@flipdish/portal-library 7.10.3 → 7.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Chip"),r=require("@mui/material/styles");const a=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"]},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"]},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"]},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"]},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"]},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"]}}[e]),o=r.styled(t,{shouldForwardProp:e=>"tone"!==e})((({theme:e,tone:t})=>({...a(t,e)}))),l=({className:t,fdKey:r,icon:a,label:l,size:i="medium",tone:s="neutral"})=>e.jsx(o,{className:t,clickable:!1,"data-fd":r,"data-fd-variant":"badge",icon:a,label:l,size:i,tone:s});l.displayName="Badge",exports.BADGE_TONES=["neutral","error","warning","success","information","brand"],exports.Badge=l,exports.default=l;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Chip"),a=require("@mui/material/styles");const r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-information"]}},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-primary"]}}}[e]),o=a.styled(t,{shouldForwardProp:e=>"tone"!==e})((({theme:e,tone:t})=>({...r(t,e)}))),i=({className:t,fdKey:a,icon:r,label:i,size:n="medium",tone:l="neutral"})=>e.jsx(o,{className:t,clickable:!1,"data-fd":a,"data-fd-variant":"badge",icon:r,label:i,size:n,tone:l});i.displayName="Badge",exports.BADGE_TONES=["neutral","error","warning","success","information","brand"],exports.Badge=i,exports.default=i;
2
2
  //# sourceMappingURL=index.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n },\n information: {\n backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n color: theme.palette.semantic.text['text-information'],\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","icon","label","size","_jsx","clickable","displayName"],"mappings":"yKAIO,MAuBDA,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBAErCC,MAAO,CACLR,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eAErCE,QAAS,CACPT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCG,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCI,YAAa,CACXX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,qBAErCK,MAAO,CACLZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,kBAIvBV,IAGZgB,EAAcC,EAAAA,OAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,EAEC,EAAGhB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,OAQZoB,EAAQ,EACnBC,YACAC,QACAC,OACAC,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAAAA,IAACX,EAAW,CACVM,UAAWA,EACXM,WAAW,EAAK,UACPL,EAAK,kBACE,QAChBC,KAAMA,EACNC,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVqB,EAAMQ,YAAc,4BAlGO,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe"}
1
+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-strong'],\n },\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-error'],\n },\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-warning'],\n },\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-success'],\n },\n },\n information: {\n backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n color: theme.palette.semantic.text['text-information'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-information'],\n },\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-primary'],\n },\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","label","size","_jsx","clickable","displayName"],"mappings":"yKAIO,MAuBDA,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,iBAGvCC,MAAO,CACLT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,cACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,gBAGvCE,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCG,QAAS,CACPX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCI,YAAa,CACXZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,oBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,sBAGvCK,MAAO,CACLb,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,mBAKzBX,IAGZiB,EAAcC,EAAAA,OAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,EAEC,EAAGjB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,OAQZqB,EAAQ,EACnBC,YACAC,QACAb,OACAc,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAAAA,IAACV,EAAW,CACVM,UAAWA,EACXK,WAAW,EAAK,UACPJ,EAAK,kBACE,QAChBb,KAAMA,EACNc,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVsB,EAAMO,YAAc,4BApHO,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe"}
@@ -1,2 +1,2 @@
1
- import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Chip";import{styled as r}from"@mui/material/styles";const a=["neutral","error","warning","success","information","brand"],o=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"]},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"]},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"]},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"]},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"]},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"]}}[e]),l=r(t,{shouldForwardProp:e=>"tone"!==e})((({theme:e,tone:t})=>({...o(t,e)}))),i=({className:t,fdKey:r,icon:a,label:o,size:i="medium",tone:n="neutral"})=>e(l,{className:t,clickable:!1,"data-fd":r,"data-fd-variant":"badge",icon:a,label:o,size:i,tone:n});i.displayName="Badge";export{a as BADGE_TONES,i as Badge,i as default};
1
+ import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Chip";import{styled as a}from"@mui/material/styles";const o=["neutral","error","warning","success","information","brand"],r=(e,t)=>({neutral:{backgroundColor:t.palette.semantic.fill["fill-weak"],borderColor:t.palette.semantic.stroke["stroke-weak"],color:t.palette.semantic.text["text-strong"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-strong"]}},error:{backgroundColor:t.palette.semantic.fill["fill-error-weak"],borderColor:t.palette.semantic.stroke["stroke-error-weak"],color:t.palette.semantic.text["text-error"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-error"]}},warning:{backgroundColor:t.palette.semantic.fill["fill-warning-weak"],borderColor:t.palette.semantic.stroke["stroke-warning-weak"],color:t.palette.semantic.text["text-warning"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-warning"]}},success:{backgroundColor:t.palette.semantic.fill["fill-success-weak"],borderColor:t.palette.semantic.stroke["stroke-success-weak"],color:t.palette.semantic.text["text-success"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-success"]}},information:{backgroundColor:t.palette.semantic.fill["fill-information-weak"],borderColor:t.palette.semantic.stroke["stroke-information-weak"],color:t.palette.semantic.text["text-information"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-information"]}},brand:{backgroundColor:t.palette.semantic.fill["fill-primary-weak"],borderColor:t.palette.semantic.stroke["stroke-primary-weak"],color:t.palette.semantic.text["text-primary"],'&[data-fd-variant="badge"] .MuiChip-icon':{color:t.palette.semantic.icon["icon-primary"]}}}[e]),i=a(t,{shouldForwardProp:e=>"tone"!==e})((({theme:e,tone:t})=>({...r(t,e)}))),n=({className:t,fdKey:a,icon:o,label:r,size:n="medium",tone:l="neutral"})=>e(i,{className:t,clickable:!1,"data-fd":a,"data-fd-variant":"badge",icon:o,label:r,size:n,tone:l});n.displayName="Badge";export{o as BADGE_TONES,n as Badge,n as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n },\n information: {\n backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n color: theme.palette.semantic.text['text-information'],\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["BADGE_TONES","getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","icon","label","size","_jsx","clickable","displayName"],"mappings":"wHAIO,MAAMA,EAAc,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe,SAuB/EC,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBAErCC,MAAO,CACLR,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eAErCE,QAAS,CACPT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCG,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,iBAErCI,YAAa,CACXX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,qBAErCK,MAAO,CACLZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,kBAIvBV,IAGZgB,EAAcC,EAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,EAEC,EAAGhB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,OAQZoB,EAAQ,EACnBC,YACAC,QACAC,OACAC,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAACX,EAAW,CACVM,UAAWA,EACXM,WAAW,EAAK,UACPL,EAAK,kBACE,QAChBC,KAAMA,EACNC,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVqB,EAAMQ,YAAc"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Badge/index.tsx"],"sourcesContent":["import MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled, type Theme } from '@mui/material/styles';\n\n/** Available visual tones for the Badge component */\nexport const BADGE_TONES = ['neutral', 'error', 'warning', 'success', 'information', 'brand'] as const;\nexport type BadgeTone = (typeof BADGE_TONES)[number];\n\n/** Props for the Badge component */\nexport interface BadgeProps {\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n fdKey?: string;\n /** Optional icon to display within the badge */\n icon?: MuiChipProps['icon'];\n /** Text label displayed in the badge */\n label: string;\n /** Visual tone/color of the badge */\n tone?: BadgeTone;\n /** Size of the badge */\n size?: MuiChipProps['size'];\n}\n\ninterface StyledBadgeProps {\n tone: BadgeTone;\n}\n\nconst getToneStyles = (\n tone: BadgeTone,\n theme: Theme,\n): {\n backgroundColor: string;\n borderColor: string;\n color: string;\n} => {\n const colorMap = {\n neutral: {\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-weak'],\n color: theme.palette.semantic.text['text-strong'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-strong'],\n },\n },\n error: {\n backgroundColor: theme.palette.semantic.fill['fill-error-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-error-weak'],\n color: theme.palette.semantic.text['text-error'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-error'],\n },\n },\n warning: {\n backgroundColor: theme.palette.semantic.fill['fill-warning-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-warning-weak'],\n color: theme.palette.semantic.text['text-warning'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-warning'],\n },\n },\n success: {\n backgroundColor: theme.palette.semantic.fill['fill-success-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-success-weak'],\n color: theme.palette.semantic.text['text-success'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-success'],\n },\n },\n information: {\n backgroundColor: theme.palette.semantic.fill['fill-information-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-information-weak'],\n color: theme.palette.semantic.text['text-information'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-information'],\n },\n },\n brand: {\n backgroundColor: theme.palette.semantic.fill['fill-primary-weak'],\n borderColor: theme.palette.semantic.stroke['stroke-primary-weak'],\n color: theme.palette.semantic.text['text-primary'],\n '&[data-fd-variant=\"badge\"] .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-primary'],\n },\n },\n } satisfies Record<BadgeTone, object>;\n\n return colorMap[tone];\n};\n\nconst StyledBadge = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'tone',\n})<StyledBadgeProps>(({ theme, tone }) => ({\n ...getToneStyles(tone, theme),\n}));\n\n/**\n * Badge component is used to highlight and categorize information using short text labels.\n * It supports different visual tones to convey different semantic meanings and can include\n * an optional icon. It is a presentational component and should not be used as a button or link.\n */\nexport const Badge = ({\n className,\n fdKey,\n icon,\n label,\n size = 'medium',\n tone = 'neutral',\n}: BadgeProps): JSX.Element => (\n <StyledBadge\n className={className}\n clickable={false}\n data-fd={fdKey}\n data-fd-variant=\"badge\"\n icon={icon}\n label={label}\n size={size}\n tone={tone}\n />\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"names":["BADGE_TONES","getToneStyles","tone","theme","neutral","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","error","warning","success","information","brand","StyledBadge","styled","MuiChip","shouldForwardProp","prop","Badge","className","fdKey","label","size","_jsx","clickable","displayName"],"mappings":"wHAIO,MAAMA,EAAc,CAAC,UAAW,QAAS,UAAW,UAAW,cAAe,SAuB/EC,EAAgB,CACpBC,EACAC,KAMiB,CACfC,QAAS,CACPC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,aAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,eAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,eACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,iBAGvCC,MAAO,CACLT,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,mBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,qBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,cACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,gBAGvCE,QAAS,CACPV,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCG,QAAS,CACPX,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,kBAGvCI,YAAa,CACXZ,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,yBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,2BAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,oBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,sBAGvCK,MAAO,CACLb,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,qBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,uBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,gBACnC,2CAA4C,CAC1CD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,mBAKzBX,IAGZiB,EAAcC,EAAOC,EAAS,CAClCC,kBAAoBC,GAAkB,SAATA,GADXH,EAEC,EAAGjB,QAAOD,WAAM,IAChCD,EAAcC,EAAMC,OAQZqB,EAAQ,EACnBC,YACAC,QACAb,OACAc,QACAC,OAAO,SACP1B,OAAO,aAEP2B,EAACV,EAAW,CACVM,UAAWA,EACXK,WAAW,EAAK,UACPJ,EAAK,kBACE,QAChBb,KAAMA,EACNc,MAAOA,EACPC,KAAMA,EACN1B,KAAMA,IAIVsB,EAAMO,YAAc"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flipdish/portal-library",
3
- "version": "7.10.3",
3
+ "version": "7.10.4",
4
4
  "files": [
5
5
  "dist"
6
6
  ],