{"version":3,"file":"Badge.cjs","names":["_react","require","_Box","_OdysseyDesignTokensContext","_jsxRuntime","badgeContentMaxValues","exports","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","useOdysseyDesignTokens","renderBadge","useMemo","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","jsx","Box","sx","children","MemoizedBadge","memo","displayName"],"sources":["../../src/Badge.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, memo, useMemo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Box } from \"./Box.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\n\nexport const badgeContentMaxValues = [\n 10, 20, 30, 40, 50, 60, 70, 80, 90, 100,\n] as const;\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n /**\n * The numeric count to display inside the badge. Renders nothing when the value is 0 or falsy.\n */\n badgeContent: number;\n /**\n * The maximum count value to display before appending a \"+\" suffix.\n * @default 100\n */\n badgeContentMax?: (typeof badgeContentMaxValues)[number];\n /**\n * Controls the visual style of the badge.\n * - If `'default'`, neutral background.\n * - If `'attention'`, yellow attention-state background.\n * - If `'danger'`, red danger-state background.\n * @default \"default\"\n */\n type?: (typeof badgeTypeValues)[number];\n} & Pick;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n default: {\n background: odysseyTokens.HueNeutral200,\n font: odysseyTokens.TypographyColorBody,\n },\n attention: {\n background: odysseyTokens.PalettePrimaryMain,\n font: odysseyTokens.TypographyColorInverse,\n },\n danger: {\n background: odysseyTokens.PaletteDangerMain,\n font: odysseyTokens.TypographyColorInverse,\n },\n});\n\n/**\n * A small numeric indicator that overlays or accompanies another element to convey a count or status. Renders nothing when the count is zero.\n */\nconst Badge = ({\n badgeContent,\n badgeContentMax = 100,\n testId,\n translate,\n type = \"default\",\n}: BadgeProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const renderBadge = useMemo(() => {\n const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n const threeDigitLimitedMax =\n greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n const isOverContentMax = badgeContent > threeDigitLimitedMax;\n const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n const formattedContent = isOverContentMax\n ? overContentMaxMessage\n : badgeContent.toString();\n\n const badgeStyles: CSSProperties = {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n // 6px horizontal padding per design requirements\n padding: \"0 6px\",\n backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n color: badgeTypeColors(odysseyDesignTokens)[type].font,\n borderRadius:\n formattedContent.length > 1\n ? `${odysseyDesignTokens.BorderRadiusOuter}`\n : \"50%\",\n fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n lineHeight: 1,\n transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n transitionProperty: `background-color, color`,\n };\n\n const hasNotificationCount = badgeContent && badgeContent > 0;\n\n return hasNotificationCount ? (\n \n {formattedContent}\n \n ) : null;\n }, [\n badgeContent,\n badgeContentMax,\n odysseyDesignTokens,\n testId,\n translate,\n type,\n ]);\n\n return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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","ignoreList":[]}