npm - @flipdish/portal-library - Versions diffs - 7.12.0 → 8.0.0 - Mend

@flipdish/portal-library 7.12.0 → 8.0.0

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.

Files changed (333) hide show

package/README.md CHANGED Viewed

@@ -96,9 +96,27 @@ You can find the current list of provided icons at https://flipdishbytes.github.
 ## Changelog
-## 5.0.0 — 2025-08-19
+### 8.0.0 — 2026-01-07
-### Breaking changes
+#### Breaking Changes
-Breaking: Required MUI v6 for Grid usage. Apps on MUI v5 should use MUI v5 Grid: https://v5.mui.com/material-ui/react-grid/.
-Breaking: Replaced deprecated LegacyGrid with Grid2. The exported Grid now wraps Grid2; review and adjust any Grid props/usages accordingly.
+- Removed required translated props from FlipdishUI and implemented the `useTranslation` hook.
+#### Migration Steps
+- Replace direct `ThemeProvider` usage with `FlipdishUIProvider`, which composes both `ThemeProvider` and `TranslationProvider`. Portal will use the `languageOverride` prop to set the language. MFE’s should not have to do anything, it will use the micro-frontend attribute `data-language`. Alternatively you can nest `TranslationProvider` within `ThemeProvider` as shown in `FlipdishUIProvider`.
+- Remove unnecessary translation props from following:
+  - **Atoms:** Tag, TextField
+  - **Molecules:** AlertGlobal, Autocomplete, Combobox, Pagination, QuantitySelector, Rating, SearchInput
+  - **Organisms:** Heading
+### 5.0.0 — 2025-08-19
+#### Breaking Changes
+- Required MUI v6 for Grid usage. Apps on MUI v5 should use MUI v5 Grid: https://v5.mui.com/material-ui/react-grid/.
+#### Migration Steps
+- Replaced deprecated LegacyGrid with Grid2. The exported Grid now wraps Grid2; review and adjust any Grid props/usages accordingly.

package/dist/components/atoms/Tab/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var i=require("react/jsx-runtime"),r=require("@mui/material/Tab");module.exports=({iconPosition:e="start",...t})=>i.jsx(r,{iconPosition:e,...t});
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/styles"),s=require("@mui/material/Tab"),r=require("../BadgeCount/index.cjs.js"),t=require("@mui/material/Box");const a=i.styled(t)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1)})));module.exports=({iconPosition:i="start",badgeCount:t,badgeEmphasis:n="strong",label:l,...o})=>{const u=void 0!==t?e.jsxs(a,{children:[l,e.jsx(r,{emphasis:n,children:t})]}):l;return e.jsx(s,{iconPosition:i,label:u,...o})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/Tab/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nexport interface TabProps {\n iconPosition?: MuiTabProps['iconPosition'];\n icon?: MuiTabProps['icon'];\n label: string;\n value?: MuiTabProps['value'];\n disabled?: boolean;\n className?: string;\n onClick?: () => void;\n}\n\nconst Tab = ({ iconPosition = 'start', ...props }: TabProps): JSX.Element => {\n return <MuiTab iconPosition={iconPosition} {...props} />;\n};\n\nexport default Tab;\n"],"names":["iconPosition","props","_jsx","MuiTab"],"mappings":"~~8FAYY~~,~~EAAGA~~,eAAe,~~WAAYC~~,~~KACjCC~~,EAAAA,IAACC,EAAM,~~CAACH~~,aAAcA,~~KAAkBC~~"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nimport BadgeCount, { type BadgeCountProps } from '../BadgeCount';\nimport Box from '../Box';\n\nexport interface TabProps {\n badgeCount?: number;\n badgeEmphasis?: BadgeCountProps['emphasis'];\n iconPosition?: MuiTabProps['iconPosition'];\n icon?: MuiTabProps['icon'];\n label: string;\n value?: MuiTabProps['value'];\n disabled?: boolean;\n className?: string;\n onClick?: () => void;\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n iconPosition = 'start',\n badgeCount,\n badgeEmphasis = 'strong',\n label,\n ...props\n}: TabProps): JSX.Element => {\n const tabLabel =\n badgeCount !== undefined ? (\n <StyledTabLabelContainer>\n {label}\n <BadgeCount emphasis={badgeEmphasis}>{badgeCount}</BadgeCount>\n </StyledTabLabelContainer>\n ) : (\n label\n );\n\n return <MuiTab iconPosition={iconPosition} label={tabLabel} {...props} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","iconPosition","badgeCount","badgeEmphasis","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wLAkBA,MAAMA,EAA0BC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,sBAGT,EACVC,eAAe,QACfC,aACAC,gBAAgB,SAChBC,WACGC,MAEH,MAAMC,OACWC,IAAfL,EACEM,EAAAA,KAACf,EAAuB,CAAAgB,SAAA,CACrBL,EACDM,EAAAA,IAACC,EAAU,CAACC,SAAUT,EAAaM,SAAGP,OACd,EAK9B,OAAOQ,EAAAA,IAACG,EAAM,CAACZ,aAAcA,EAAcG,MAAOE,KAAcD"}

package/dist/components/atoms/Tab/index.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 import { TabProps as TabProps$1 } from '@mui/material/Tab';
+import { BadgeCountProps } from '../BadgeCount/index.js';
 interface TabProps {
+    badgeCount?: number;
+    badgeEmphasis?: BadgeCountProps['emphasis'];
     iconPosition?: TabProps$1['iconPosition'];
     icon?: TabProps$1['icon'];
     label: string;
@@ -9,7 +12,7 @@ interface TabProps {
     className?: string;
     onClick?: () => void;
 }
-declare const Tab: ({ iconPosition, ...props }: TabProps) => JSX.Element;
+declare const Tab: ({ iconPosition, badgeCount, badgeEmphasis, label, ...props }: TabProps) => JSX.Element;
 export { Tab as default };
 export type { TabProps };

package/dist/components/atoms/Tab/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import t from"@mui/material/Tab";const i=({iconPosition:i="start",...r})=>o(t,{iconPosition:i,...r});export{i as default};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import o from"@mui/material/Tab";import r from"../BadgeCount/index.js";import a from"@mui/material/Box";const m=e(a)((({theme:i})=>({display:"flex",alignItems:"center",gap:i.spacing(1)}))),s=({iconPosition:e="start",badgeCount:a,badgeEmphasis:s="strong",label:n,...l})=>{const p=void 0!==a?i(m,{children:[n,t(r,{emphasis:s,children:a})]}):n;return t(o,{iconPosition:e,label:p,...l})};export{s as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/Tab/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nexport interface TabProps {\n iconPosition?: MuiTabProps['iconPosition'];\n icon?: MuiTabProps['icon'];\n label: string;\n value?: MuiTabProps['value'];\n disabled?: boolean;\n className?: string;\n onClick?: () => void;\n}\n\nconst Tab = ({ iconPosition = 'start', ...props }: TabProps): JSX.Element => {\n return <MuiTab iconPosition={iconPosition} {...props} />;\n};\n\nexport default Tab;\n"],"names":["Tab","iconPosition","props","_jsx","MuiTab"],"mappings":"~~yEAYA~~,MAAMA,EAAM,~~EAAGC~~,eAAe,~~WAAYC~~,~~KACjCC~~,EAACC,EAAM,~~CAACH~~,aAAcA,~~KAAkBC~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tab/index.tsx"],"sourcesContent":["import { styled } from '@mui/material/styles';\nimport MuiTab, { type TabProps as MuiTabProps } from '@mui/material/Tab';\n\nimport BadgeCount, { type BadgeCountProps } from '../BadgeCount';\nimport Box from '../Box';\n\nexport interface TabProps {\n badgeCount?: number;\n badgeEmphasis?: BadgeCountProps['emphasis'];\n iconPosition?: MuiTabProps['iconPosition'];\n icon?: MuiTabProps['icon'];\n label: string;\n value?: MuiTabProps['value'];\n disabled?: boolean;\n className?: string;\n onClick?: () => void;\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n iconPosition = 'start',\n badgeCount,\n badgeEmphasis = 'strong',\n label,\n ...props\n}: TabProps): JSX.Element => {\n const tabLabel =\n badgeCount !== undefined ? (\n <StyledTabLabelContainer>\n {label}\n <BadgeCount emphasis={badgeEmphasis}>{badgeCount}</BadgeCount>\n </StyledTabLabelContainer>\n ) : (\n label\n );\n\n return <MuiTab iconPosition={iconPosition} label={tabLabel} {...props} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","Tab","iconPosition","badgeCount","badgeEmphasis","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wMAkBA,MAAMA,EAA0BC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,OAGfC,EAAM,EACVC,eAAe,QACfC,aACAC,gBAAgB,SAChBC,WACGC,MAEH,MAAMC,OACWC,IAAfL,EACEM,EAAChB,EAAuB,CAAAiB,SAAA,CACrBL,EACDM,EAACC,EAAU,CAACC,SAAUT,EAAaM,SAAGP,OACd,EAK9B,OAAOQ,EAACG,EAAM,CAACZ,aAAcA,EAAcG,MAAOE,KAAcD"}

package/dist/components/atoms/Tag/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),l=require("@mui/material/Chip"),i=require("@mui/material/styles"),s=require("../../../icons/Cancel/index.cjs.js");const o=i.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),r=i.styled(l,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),a=({className:t,disabled:l=!1,fdKey:i,label:a,onClick:d,onDismiss:n,selected:c=!1,size:m="medium",dismissAriaLabel:u})=>e.jsx(o,{disabled:l,children:e.jsx(r,{"aria-label":d?`${a}`:n?`${u} ${a}`:void 0,className:t,clickable:!l&&!!d,"data-fd":i,"data-fd-variant":"tag",deleteIcon:(()=>{if(n)return e.jsx(s,{"aria-hidden":!0,"data-testid":"tag-dismiss-icon",size:"sm"})})(),disabled:l,label:a,onClick:l?void 0:d,onDelete:l?void 0:n,onKeyDown:e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),n?n(e):d&&d(e))},selected:c,size:m})});a.displayName="Tag",exports.Tag=a,exports.default=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Chip"),s=require("@mui/material/styles"),l=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../providers/TranslationProvider.cjs.js");const r=s.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=s.styled(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),d=({className:t,disabled:i=!1,fdKey:s,label:d,onClick:n,onDismiss:c,selected:u=!1,size:m="medium"})=>{const{translate:p}=o.useTranslation();return e.jsx(r,{disabled:i,children:e.jsx(a,{"aria-label":n?d:c?p("Dismiss_dismissible",{dismissible:d}):void 0,className:t,clickable:!i&&!!n,"data-fd":s,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e.jsx(l,{"aria-hidden":!0,"data-testid":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:d,onClick:i?void 0:n,onDelete:i?void 0:c,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),c?c(e):n&&n(e))},selected:u,size:m})})};d.displayName="Tag",exports.Tag=d,exports.default=d;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/Tag/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\n\n/** Props for the Tag component /\ninterface TagBaseProps {\n /* Additional CSS class names /\n className?: string;\n /* Whether the tag is disabled /\n disabled?: boolean;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Text label displayed in the tag /\n label: string;\n /* Whether the tag is selected /\n selected?: boolean;\n /* Size of the tag /\n size?: MuiChipProps['size'];\n}\n\ninterface TagDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: ~~undefined~~;\n /* Callback function when the tag is dismissed /\n onDismiss: NonNullable<MuiChipProps['onDelete']>;\n ~~/* Aria-label prefix for the dismiss button; the tag label is appended automatically /\n dismissAriaLabel: string;\n~~}\n\ninterface TagNonDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: MuiChipProps['onClick'];\n /* No dismiss handler in this variant /\n onDismiss?: ~~undefined~~;\n ~~/* No aria label when there is no dismiss /\n dismissAriaLabel?: undefined;\n~~}\n\n/* Props for the Tag component /\nexport type TagProps = TagDismissibleProps \| TagNonDismissibleProps;\n\nconst StyledTagContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ disabled }) => ({\n cursor: disabled ? 'not-allowed' : undefined,\n}));\n\nconst StyledTag = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n ...(selected && {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n\n '&:hover:not(.Mui-disabled)': {\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n },\n '&:hover:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:active:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:focus-visible, &.Mui-focusVisible': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&.Mui-disabled': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.fill['fill-disabled'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n },\n },\n }),\n}));\n\n/\n Tag component used for categorization and filtering.\n * It supports two variants: dismissible (with delete icon) and clickable (entire tag is interactive).\n * Both variants support a selected state.\n */\nexport const Tag = ({\n className,\n disabled = false,\n fdKey,\n label,\n onClick,\n onDismiss,\n selected = false,\n size = 'medium',\n ~~dismissAriaLabel,\n~~}: TagProps): JSX.Element => {\n const getAriaLabel = (): string \| undefined => {\n if (onClick) {\n return ~~`${~~label~~}`;\~~n }\n if (onDismiss) {\n return `${~~dismissAriaLabel}~~ ${label}~~`;\~~n }\n\n return undefined;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (disabled) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n\n if (onDismiss) {\n onDismiss(event as unknown as React.MouseEvent<HTMLDivElement>);\n } else if (onClick) {\n onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n }\n }\n };\n\n const renderDismissIcon = (): React.ReactElement<unknown> \| undefined => {\n if (!onDismiss) {\n return undefined;\n }\n\n return <CancelIcon aria-hidden={true} data-testid=\"tag-dismiss-icon\" size=\"sm\" />;\n };\n\n return (\n <StyledTagContainer disabled={disabled}>\n <StyledTag\n aria-label={getAriaLabel()}\n className={className}\n clickable={disabled ? false : !!onClick}\n data-fd={fdKey}\n data-fd-variant=\"tag\"\n deleteIcon={renderDismissIcon()}\n disabled={disabled}\n label={label}\n onClick={disabled ? undefined : onClick}\n onDelete={disabled ? undefined : onDismiss}\n onKeyDown={handleKeyDown}\n selected={selected}\n size={size}\n />\n </StyledTagContainer>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"names":["StyledTagContainer","styled","Box","shouldForwardProp","prop","disabled","cursor","undefined","StyledTag","MuiChip","theme","selected","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","Tag","className","fdKey","label","onClick","onDismiss","size","~~dismissAriaLabel~~","_jsx","children","clickable","deleteIcon","CancelIcon","renderDismissIcon","onDelete","onKeyDown","event","key","preventDefault","stopPropagation","displayName"],"mappings":"~~wPA2CA~~,MAAMA,EAAqBC,EAAAA,OAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAAA,OAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,EAES,EAAGS,QAAOC,eAAU,IACzCA,GAAY,CACdC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,uBAEnC,6BAA8B,CAC5BF,MAAOR,EAAMG,QAAQC,SAASK,KAAK,yBAGvC,6BAA8B,CAC5BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,8BAA+B,CAC7BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,sCAAuC,CACrCP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,iBAAkB,CAChBP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASC,KAAK,iBACzCG,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,8BAW9BC,EAAM,EACjBC,YACAjB,YAAW,EACXkB,QACAC,QACAC,UACAC,YACAf,YAAW,EACXgB,OAAO,~~SACPC~~,~~sBAuCEC~~,EAAAA,~~IAAC7B~~,GAAmBK,SAAUA,~~EAAQyB~~,SACpCD,EAAAA,~~IAACrB~~,EAAS,CAAA,aArCRiB,~~EACK~~,~~GAAGD~~,~~IAERE~~,~~EACK~~,~~GAAGE~~,~~KAAoBJ~~,~~SADhC~~,EAoCIF,UAAWA,~~EACXS~~,~~WAAW1B~~,KAAqBoB,YACvBF,EAAK,kBACE,~~MAChBS~~,WAhBoB,MACxB,~~GAAKN~~,EAIL,~~OAAOG~~,EAAAA,~~IAACI~~,EAAU,CAAA,eAAc,EAAI,cAAc,~~mBAAmBN~~,KAAK,~~QAW1DO~~,~~GACZ7B~~,SAAUA,EACVmB,MAAOA,EACPC,QAASpB,OAAWE,EAAYkB,~~EAChCU~~,~~SAAU9B~~,OAAWE,EAAYmB,~~EACjCU~~,UAtCiBC,~~IACjBhC~~,GAIc,~~UAAdgC~~,EAAMC,KAAiC,MAAdD,EAAMC,MACjCD,EAAME,iBACNF,EAAMG,~~kBAEFd~~,EACFA,~~EAAUW~~,~~GACDZ~~,GACTA,~~EAAQY~~,~~KA2BR1B~~,SAAUA,EACVgB,KAAMA,~~MAMdN~~,~~EAAIoB~~,YAAc"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\n/** Props for the Tag component /\ninterface TagBaseProps {\n /* Additional CSS class names /\n className?: string;\n /* Whether the tag is disabled /\n disabled?: boolean;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Text label displayed in the tag /\n label: string;\n /* Whether the tag is selected /\n selected?: boolean;\n /* Size of the tag /\n size?: MuiChipProps['size'];\n}\n\ninterface TagDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: never;\n /* Callback function when the tag is dismissed /\n onDismiss: NonNullable<MuiChipProps['onDelete']>;\n}\n\ninterface TagNonDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: MuiChipProps['onClick'];\n /* No dismiss handler in this variant /\n onDismiss?: never;\n}\n\n/* Props for the Tag component /\nexport type TagProps = TagDismissibleProps \| TagNonDismissibleProps;\n\nconst StyledTagContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ disabled }) => ({\n cursor: disabled ? 'not-allowed' : undefined,\n}));\n\nconst StyledTag = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n ...(selected && {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n\n '&:hover:not(.Mui-disabled)': {\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n },\n '&:hover:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:active:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:focus-visible, &.Mui-focusVisible': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&.Mui-disabled': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.fill['fill-disabled'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n },\n },\n }),\n}));\n\n/\n Tag component used for categorization and filtering.\n * It supports two variants: dismissible (with delete icon) and clickable (entire tag is interactive).\n * Both variants support a selected state.\n */\nexport const Tag = ({\n className,\n disabled = false,\n fdKey,\n label,\n onClick,\n onDismiss,\n selected = false,\n size = 'medium',\n}: TagProps): JSX.Element => {\n const { translate } = useTranslation();\n\n const getAriaLabel = (): string \| undefined => {\n if (onClick) {\n return label;\n }\n if (onDismiss) {\n return translate('Dismiss_dismissible', { dismissible: label });\n }\n\n return undefined;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (disabled) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n\n if (onDismiss) {\n onDismiss(event as unknown as React.MouseEvent<HTMLDivElement>);\n } else if (onClick) {\n onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n }\n }\n };\n\n const renderDismissIcon = (): React.ReactElement<unknown> \| undefined => {\n if (!onDismiss) {\n return undefined;\n }\n\n return <CancelIcon aria-hidden={true} data-testid=\"tag-dismiss-icon\" size=\"sm\" />;\n };\n\n return (\n <StyledTagContainer disabled={disabled}>\n <StyledTag\n aria-label={getAriaLabel()}\n className={className}\n clickable={disabled ? false : !!onClick}\n data-fd={fdKey}\n data-fd-variant=\"tag\"\n deleteIcon={renderDismissIcon()}\n disabled={disabled}\n label={label}\n onClick={disabled ? undefined : onClick}\n onDelete={disabled ? undefined : onDismiss}\n onKeyDown={handleKeyDown}\n selected={selected}\n size={size}\n />\n </StyledTagContainer>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"names":["StyledTagContainer","styled","Box","shouldForwardProp","prop","disabled","cursor","undefined","StyledTag","MuiChip","theme","selected","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","Tag","className","fdKey","label","onClick","onDismiss","size","translate","useTranslation","_jsx","children","dismissible","clickable","deleteIcon","CancelIcon","renderDismissIcon","onDelete","onKeyDown","event","key","preventDefault","stopPropagation","displayName"],"mappings":"mTAwCA,MAAMA,EAAqBC,EAAAA,OAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAAA,OAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,EAES,EAAGS,QAAOC,eAAU,IACzCA,GAAY,CACdC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,uBAEnC,6BAA8B,CAC5BF,MAAOR,EAAMG,QAAQC,SAASK,KAAK,yBAGvC,6BAA8B,CAC5BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,8BAA+B,CAC7BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,sCAAuC,CACrCP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,iBAAkB,CAChBP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASC,KAAK,iBACzCG,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,8BAW9BC,EAAM,EACjBC,YACAjB,YAAW,EACXkB,QACAC,QACAC,UACAC,YACAf,YAAW,EACXgB,OAAO,aAEP,MAAMC,UAAEA,GAAcC,mBAsCtB,OACEC,EAAAA,IAAC9B,GAAmBK,SAAUA,EAAQ0B,SACpCD,EAAAA,IAACtB,EAAS,CAAA,aArCRiB,EACKD,EAELE,EACKE,EAAU,sBAAuB,CAAEI,YAAaR,SADzD,EAoCIF,UAAWA,EACXW,WAAW5B,KAAqBoB,YACvBF,EAAK,kBACE,MAChBW,WAhBoB,MACxB,GAAKR,EAIL,OAAOI,EAAAA,IAACK,EAAU,CAAA,eAAc,EAAI,cAAc,mBAAmBR,KAAK,QAW1DS,GACZ/B,SAAUA,EACVmB,MAAOA,EACPC,QAASpB,OAAWE,EAAYkB,EAChCY,SAAUhC,OAAWE,EAAYmB,EACjCY,UAtCiBC,IACjBlC,GAIc,UAAdkC,EAAMC,KAAiC,MAAdD,EAAMC,MACjCD,EAAME,iBACNF,EAAMG,kBAEFhB,EACFA,EAAUa,GACDd,GACTA,EAAQc,KA2BR5B,SAAUA,EACVgB,KAAMA,OAMdN,EAAIsB,YAAc"}

package/dist/components/atoms/Tag/index.d.ts CHANGED Viewed

@@ -17,19 +17,15 @@ interface TagBaseProps {
 }
 interface TagDismissibleProps extends TagBaseProps {
     /** Callback function when the tag is clicked */
-    onClick?: undefined;
+    onClick?: never;
     /** Callback function when the tag is dismissed */
     onDismiss: NonNullable<ChipProps['onDelete']>;
-    /** Aria-label prefix for the dismiss button; the tag label is appended automatically */
-    dismissAriaLabel: string;
 }
 interface TagNonDismissibleProps extends TagBaseProps {
     /** Callback function when the tag is clicked */
     onClick?: ChipProps['onClick'];
     /** No dismiss handler in this variant */
-    onDismiss?: undefined;
-    /** No aria label when there is no dismiss */
-    dismissAriaLabel?: undefined;
+    onDismiss?: never;
 }
 /** Props for the Tag component */
 type TagProps = TagDismissibleProps | TagNonDismissibleProps;
@@ -39,7 +35,7 @@ type TagProps = TagDismissibleProps | TagNonDismissibleProps;
  * Both variants support a selected state.
  */
 declare const Tag: {
-    ({ className, disabled, fdKey, label, onClick, onDismiss, selected, size, dismissAriaLabel, }: TagProps): JSX.Element;
+    ({ className, disabled, fdKey, label, onClick, onDismiss, selected, size, }: TagProps): JSX.Element;
     displayName: string;
 };

package/dist/components/atoms/Tag/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Box";import i from"@mui/material/Chip";import{styled as l}from"@mui/material/styles";import o from"../../../icons/Cancel/index.js";const s=l(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=l(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),r=({className:t,disabled:i=!1,fdKey:l,label:r,onClick:d,onDismiss:n,selected:c=!1,size:m="medium",dismissAriaLabel:p})=>e(s,{disabled:i,children:e(a,{"aria-label":d?`${r}`:n?`${p} ${r}`:void 0,className:t,clickable:!i&&!!d,"data-fd":l,"data-fd-variant":"tag",deleteIcon:(()=>{if(n)return e(o,{"aria-hidden":!0,"data-testid":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:r,onClick:i?void 0:d,onDelete:i?void 0:n,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),n?n(e):d&&d(e))},selected:c,size:m})});r.displayName="Tag";export{r as Tag,r as default};
+import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Box";import i from"@mui/material/Chip";import{styled as o}from"@mui/material/styles";import l from"../../../icons/Cancel/index.js";import{useTranslation as s}from"../../../providers/TranslationProvider.js";const r=o(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=o(i,{shouldForwardProp:e=>"selected"!==e})((({theme:e,selected:t})=>({...t&&{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"],"&:hover:not(.Mui-disabled)":{color:e.palette.semantic.text["text-inverse-strong"]}},"&:hover:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:active:not(.Mui-disabled)":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&:focus-visible, &.Mui-focusVisible":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],color:e.palette.semantic.text["text-inverse-strong"]},"&.Mui-disabled":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.fill["fill-disabled"],color:e.palette.semantic.text["text-inverse-strong"],"& .MuiChip-deleteIcon, & .MuiChip-icon":{color:e.palette.semantic.icon["icon-inverse-strong"]}}}}))),n=({className:t,disabled:i=!1,fdKey:o,label:n,onClick:d,onDismiss:c,selected:m=!1,size:p="medium"})=>{const{translate:b}=s();return e(r,{disabled:i,children:e(a,{"aria-label":d?n:c?b("Dismiss_dismissible",{dismissible:n}):void 0,className:t,clickable:!i&&!!d,"data-fd":o,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e(l,{"aria-hidden":!0,"data-testid":"tag-dismiss-icon",size:"sm"})})(),disabled:i,label:n,onClick:i?void 0:d,onDelete:i?void 0:c,onKeyDown:e=>{i||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),c?c(e):d&&d(e))},selected:m,size:p})})};n.displayName="Tag";export{n as Tag,n as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/Tag/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\n\n/** Props for the Tag component /\ninterface TagBaseProps {\n /* Additional CSS class names /\n className?: string;\n /* Whether the tag is disabled /\n disabled?: boolean;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Text label displayed in the tag /\n label: string;\n /* Whether the tag is selected /\n selected?: boolean;\n /* Size of the tag /\n size?: MuiChipProps['size'];\n}\n\ninterface TagDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: ~~undefined~~;\n /* Callback function when the tag is dismissed /\n onDismiss: NonNullable<MuiChipProps['onDelete']>;\n ~~/* Aria-label prefix for the dismiss button; the tag label is appended automatically /\n dismissAriaLabel: string;\n~~}\n\ninterface TagNonDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: MuiChipProps['onClick'];\n /* No dismiss handler in this variant /\n onDismiss?: ~~undefined~~;\n ~~/* No aria label when there is no dismiss /\n dismissAriaLabel?: undefined;\n~~}\n\n/* Props for the Tag component /\nexport type TagProps = TagDismissibleProps \| TagNonDismissibleProps;\n\nconst StyledTagContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ disabled }) => ({\n cursor: disabled ? 'not-allowed' : undefined,\n}));\n\nconst StyledTag = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n ...(selected && {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n\n '&:hover:not(.Mui-disabled)': {\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n },\n '&:hover:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:active:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:focus-visible, &.Mui-focusVisible': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&.Mui-disabled': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.fill['fill-disabled'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n },\n },\n }),\n}));\n\n/\n Tag component used for categorization and filtering.\n * It supports two variants: dismissible (with delete icon) and clickable (entire tag is interactive).\n * Both variants support a selected state.\n */\nexport const Tag = ({\n className,\n disabled = false,\n fdKey,\n label,\n onClick,\n onDismiss,\n selected = false,\n size = 'medium',\n ~~dismissAriaLabel,\n~~}: TagProps): JSX.Element => {\n const getAriaLabel = (): string \| undefined => {\n if (onClick) {\n return ~~`${~~label~~}`;\~~n }\n if (onDismiss) {\n return `${~~dismissAriaLabel}~~ ${label}~~`;\~~n }\n\n return undefined;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (disabled) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n\n if (onDismiss) {\n onDismiss(event as unknown as React.MouseEvent<HTMLDivElement>);\n } else if (onClick) {\n onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n }\n }\n };\n\n const renderDismissIcon = (): React.ReactElement<unknown> \| undefined => {\n if (!onDismiss) {\n return undefined;\n }\n\n return <CancelIcon aria-hidden={true} data-testid=\"tag-dismiss-icon\" size=\"sm\" />;\n };\n\n return (\n <StyledTagContainer disabled={disabled}>\n <StyledTag\n aria-label={getAriaLabel()}\n className={className}\n clickable={disabled ? false : !!onClick}\n data-fd={fdKey}\n data-fd-variant=\"tag\"\n deleteIcon={renderDismissIcon()}\n disabled={disabled}\n label={label}\n onClick={disabled ? undefined : onClick}\n onDelete={disabled ? undefined : onDismiss}\n onKeyDown={handleKeyDown}\n selected={selected}\n size={size}\n />\n </StyledTagContainer>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"names":["StyledTagContainer","styled","Box","shouldForwardProp","prop","disabled","cursor","undefined","StyledTag","MuiChip","theme","selected","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","Tag","className","fdKey","label","onClick","onDismiss","size","~~dismissAriaLabel~~","_jsx","children","clickable","deleteIcon","CancelIcon","renderDismissIcon","onDelete","onKeyDown","event","key","preventDefault","stopPropagation","displayName"],"mappings":"~~uMA2CA~~,MAAMA,EAAqBC,EAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,EAES,EAAGS,QAAOC,eAAU,IACzCA,GAAY,CACdC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,uBAEnC,6BAA8B,CAC5BF,MAAOR,EAAMG,QAAQC,SAASK,KAAK,yBAGvC,6BAA8B,CAC5BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,8BAA+B,CAC7BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,sCAAuC,CACrCP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,iBAAkB,CAChBP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASC,KAAK,iBACzCG,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,8BAW9BC,EAAM,EACjBC,YACAjB,YAAW,EACXkB,QACAC,QACAC,UACAC,YACAf,YAAW,EACXgB,OAAO,~~SACPC~~,~~sBAuCEC~~,~~EAAC7B~~,GAAmBK,SAAUA,~~EAAQyB~~,SACpCD,~~EAACrB~~,EAAS,CAAA,aArCRiB,~~EACK~~,~~GAAGD~~,~~IAERE~~,~~EACK~~,~~GAAGE~~,~~KAAoBJ~~,~~SADhC~~,EAoCIF,UAAWA,~~EACXS~~,~~WAAW1B~~,KAAqBoB,YACvBF,EAAK,kBACE,~~MAChBS~~,WAhBoB,MACxB,~~GAAKN~~,EAIL,~~OAAOG~~,~~EAACI~~,EAAU,CAAA,eAAc,EAAI,cAAc,~~mBAAmBN~~,KAAK,~~QAW1DO~~,~~GACZ7B~~,SAAUA,EACVmB,MAAOA,EACPC,QAASpB,OAAWE,EAAYkB,~~EAChCU~~,~~SAAU9B~~,OAAWE,EAAYmB,~~EACjCU~~,UAtCiBC,~~IACjBhC~~,GAIc,~~UAAdgC~~,EAAMC,KAAiC,MAAdD,EAAMC,MACjCD,EAAME,iBACNF,EAAMG,~~kBAEFd~~,EACFA,~~EAAUW~~,~~GACDZ~~,GACTA,~~EAAQY~~,~~KA2BR1B~~,SAAUA,EACVgB,KAAMA,~~MAMdN~~,~~EAAIoB~~,YAAc"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Tag/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport MuiChip, { type ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\n/** Props for the Tag component /\ninterface TagBaseProps {\n /* Additional CSS class names /\n className?: string;\n /* Whether the tag is disabled /\n disabled?: boolean;\n /* Test ID for testing and automation /\n fdKey?: string;\n /* Text label displayed in the tag /\n label: string;\n /* Whether the tag is selected /\n selected?: boolean;\n /* Size of the tag /\n size?: MuiChipProps['size'];\n}\n\ninterface TagDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: never;\n /* Callback function when the tag is dismissed /\n onDismiss: NonNullable<MuiChipProps['onDelete']>;\n}\n\ninterface TagNonDismissibleProps extends TagBaseProps {\n /* Callback function when the tag is clicked /\n onClick?: MuiChipProps['onClick'];\n /* No dismiss handler in this variant /\n onDismiss?: never;\n}\n\n/* Props for the Tag component /\nexport type TagProps = TagDismissibleProps \| TagNonDismissibleProps;\n\nconst StyledTagContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ disabled }) => ({\n cursor: disabled ? 'not-allowed' : undefined,\n}));\n\nconst StyledTag = styled(MuiChip, {\n shouldForwardProp: (prop) => prop !== 'selected',\n})<{ selected?: boolean }>(({ theme, selected }) => ({\n ...(selected && {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n\n '&:hover:not(.Mui-disabled)': {\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n },\n '&:hover:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:active:not(.Mui-disabled)': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&:focus-visible, &.Mui-focusVisible': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n },\n '&.Mui-disabled': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.fill['fill-disabled'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n\n '& .MuiChip-deleteIcon, & .MuiChip-icon': {\n color: theme.palette.semantic.icon['icon-inverse-strong'],\n },\n },\n }),\n}));\n\n/\n Tag component used for categorization and filtering.\n * It supports two variants: dismissible (with delete icon) and clickable (entire tag is interactive).\n * Both variants support a selected state.\n */\nexport const Tag = ({\n className,\n disabled = false,\n fdKey,\n label,\n onClick,\n onDismiss,\n selected = false,\n size = 'medium',\n}: TagProps): JSX.Element => {\n const { translate } = useTranslation();\n\n const getAriaLabel = (): string \| undefined => {\n if (onClick) {\n return label;\n }\n if (onDismiss) {\n return translate('Dismiss_dismissible', { dismissible: label });\n }\n\n return undefined;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n if (disabled) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n\n if (onDismiss) {\n onDismiss(event as unknown as React.MouseEvent<HTMLDivElement>);\n } else if (onClick) {\n onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n }\n }\n };\n\n const renderDismissIcon = (): React.ReactElement<unknown> \| undefined => {\n if (!onDismiss) {\n return undefined;\n }\n\n return <CancelIcon aria-hidden={true} data-testid=\"tag-dismiss-icon\" size=\"sm\" />;\n };\n\n return (\n <StyledTagContainer disabled={disabled}>\n <StyledTag\n aria-label={getAriaLabel()}\n className={className}\n clickable={disabled ? false : !!onClick}\n data-fd={fdKey}\n data-fd-variant=\"tag\"\n deleteIcon={renderDismissIcon()}\n disabled={disabled}\n label={label}\n onClick={disabled ? undefined : onClick}\n onDelete={disabled ? undefined : onDismiss}\n onKeyDown={handleKeyDown}\n selected={selected}\n size={size}\n />\n </StyledTagContainer>\n );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"names":["StyledTagContainer","styled","Box","shouldForwardProp","prop","disabled","cursor","undefined","StyledTag","MuiChip","theme","selected","backgroundColor","palette","semantic","fill","borderColor","stroke","color","text","icon","Tag","className","fdKey","label","onClick","onDismiss","size","translate","useTranslation","_jsx","children","dismissible","clickable","deleteIcon","CancelIcon","renderDismissIcon","onDelete","onKeyDown","event","key","preventDefault","stopPropagation","displayName"],"mappings":"kRAwCA,MAAMA,EAAqBC,EAAOC,EAAK,CACrCC,kBAAoBC,GAAkB,aAATA,GADJH,EAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,MAG/BC,EAAYP,EAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,EAES,EAAGS,QAAOC,eAAU,IACzCA,GAAY,CACdC,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,uBAEnC,6BAA8B,CAC5BF,MAAOR,EAAMG,QAAQC,SAASK,KAAK,yBAGvC,6BAA8B,CAC5BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,8BAA+B,CAC7BP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,sCAAuC,CACrCP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASG,OAAO,mBAC3CC,MAAOR,EAAMG,QAAQC,SAASK,KAAK,wBAErC,iBAAkB,CAChBP,gBAAiBF,EAAMG,QAAQC,SAASC,KAAK,iBAC7CC,YAAaN,EAAMG,QAAQC,SAASC,KAAK,iBACzCG,MAAOR,EAAMG,QAAQC,SAASK,KAAK,uBAEnC,yCAA0C,CACxCD,MAAOR,EAAMG,QAAQC,SAASM,KAAK,8BAW9BC,EAAM,EACjBC,YACAjB,YAAW,EACXkB,QACAC,QACAC,UACAC,YACAf,YAAW,EACXgB,OAAO,aAEP,MAAMC,UAAEA,GAAcC,IAsCtB,OACEC,EAAC9B,GAAmBK,SAAUA,EAAQ0B,SACpCD,EAACtB,EAAS,CAAA,aArCRiB,EACKD,EAELE,EACKE,EAAU,sBAAuB,CAAEI,YAAaR,SADzD,EAoCIF,UAAWA,EACXW,WAAW5B,KAAqBoB,YACvBF,EAAK,kBACE,MAChBW,WAhBoB,MACxB,GAAKR,EAIL,OAAOI,EAACK,EAAU,CAAA,eAAc,EAAI,cAAc,mBAAmBR,KAAK,QAW1DS,GACZ/B,SAAUA,EACVmB,MAAOA,EACPC,QAASpB,OAAWE,EAAYkB,EAChCY,SAAUhC,OAAWE,EAAYmB,EACjCY,UAtCiBC,IACjBlC,GAIc,UAAdkC,EAAMC,KAAiC,MAAdD,EAAMC,MACjCD,EAAME,iBACNF,EAAMG,kBAEFhB,EACFA,EAAUa,GACDd,GACTA,EAAQc,KA2BR5B,SAAUA,EACVgB,KAAMA,OAMdN,EAAIsB,YAAc"}

package/dist/components/atoms/TextArea/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextArea/index.tsx"],"sourcesContent":["import TextField, { type TextFieldProps } from '../TextField';\n\n/*\n The props for the TextArea component.\n /\nexport type TextAreaProps = Omit~~<\n~~ TextFieldProps~~,\n 'hidePasswordAriaLabel'~~ \| 'multiline' \| '~~showPasswordAriaLabel' \| '~~type'\n> & {\n /* The number of rows for the text area. /\n rows?: number;\n};\n\n/\n A TextArea component.\n \n @param props - The component props\n * @returns The rendered TextArea component\n */\nexport const TextArea = ({ fdKey, rows = 6, ...props }: TextAreaProps): JSX.Element => {\n return <TextField {...props} multiline fdKey={fdKey} rows={rows} type=\"text\" />;\n};\n\nexport default TextArea;\n"],"names":["TextArea","fdKey","rows","props","_jsx","TextField","multiline","type"],"mappings":"~~8IAmBO~~,MAAMA,EAAW,EAAGC,QAAOC,OAAO,KAAMC,KACtCC,EAAAA,IAACC,EAAAA,UAAS,IAAKF,EAAOG,aAAUL,MAAOA,EAAOC,KAAMA,EAAMK,KAAK"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextArea/index.tsx"],"sourcesContent":["import TextField, { type TextFieldProps } from '../TextField';\n\n/*\n The props for the TextArea component.\n /\nexport type TextAreaProps = Omit<TextFieldProps, 'multiline' \| 'type'> & {\n /* The number of rows for the text area. /\n rows?: number;\n};\n\n/\n A TextArea component.\n \n @param props - The component props\n * @returns The rendered TextArea component\n */\nexport const TextArea = ({ fdKey, rows = 6, ...props }: TextAreaProps): JSX.Element => {\n return <TextField {...props} multiline fdKey={fdKey} rows={rows} type=\"text\" />;\n};\n\nexport default TextArea;\n"],"names":["TextArea","fdKey","rows","props","_jsx","TextField","multiline","type"],"mappings":"8IAgBO,MAAMA,EAAW,EAAGC,QAAOC,OAAO,KAAMC,KACtCC,EAAAA,IAACC,EAAAA,UAAS,IAAKF,EAAOG,aAAUL,MAAOA,EAAOC,KAAMA,EAAMK,KAAK"}

package/dist/components/atoms/TextArea/index.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { TextFieldProps } from '../TextField/index.js';
 /**
  * The props for the TextArea component.
  */
-type TextAreaProps = Omit<TextFieldProps, 'hidePasswordAriaLabel' | 'multiline' | 'showPasswordAriaLabel' | 'type'> & {
+type TextAreaProps = Omit<TextFieldProps, 'multiline' | 'type'> & {
     /** The number of rows for the text area. */
     rows?: number;
 };

package/dist/components/atoms/TextArea/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextArea/index.tsx"],"sourcesContent":["import TextField, { type TextFieldProps } from '../TextField';\n\n/*\n The props for the TextArea component.\n /\nexport type TextAreaProps = Omit~~<\n~~ TextFieldProps~~,\n 'hidePasswordAriaLabel'~~ \| 'multiline' \| '~~showPasswordAriaLabel' \| '~~type'\n> & {\n /* The number of rows for the text area. /\n rows?: number;\n};\n\n/\n A TextArea component.\n \n @param props - The component props\n * @returns The rendered TextArea component\n */\nexport const TextArea = ({ fdKey, rows = 6, ...props }: TextAreaProps): JSX.Element => {\n return <TextField {...props} multiline fdKey={fdKey} rows={rows} type=\"text\" />;\n};\n\nexport default TextArea;\n"],"names":["TextArea","fdKey","rows","props","_jsx","TextField","multiline","type"],"mappings":"~~0FAmBO~~,MAAMA,EAAW,EAAGC,QAAOC,OAAO,KAAMC,KACtCC,EAACC,EAAS,IAAKF,EAAOG,aAAUL,MAAOA,EAAOC,KAAMA,EAAMK,KAAK"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextArea/index.tsx"],"sourcesContent":["import TextField, { type TextFieldProps } from '../TextField';\n\n/*\n The props for the TextArea component.\n /\nexport type TextAreaProps = Omit<TextFieldProps, 'multiline' \| 'type'> & {\n /* The number of rows for the text area. /\n rows?: number;\n};\n\n/\n A TextArea component.\n \n @param props - The component props\n * @returns The rendered TextArea component\n */\nexport const TextArea = ({ fdKey, rows = 6, ...props }: TextAreaProps): JSX.Element => {\n return <TextField {...props} multiline fdKey={fdKey} rows={rows} type=\"text\" />;\n};\n\nexport default TextArea;\n"],"names":["TextArea","fdKey","rows","props","_jsx","TextField","multiline","type"],"mappings":"0FAgBO,MAAMA,EAAW,EAAGC,QAAOC,OAAO,KAAMC,KACtCC,EAACC,EAAS,IAAKF,EAAOG,aAAUL,MAAOA,EAAOC,KAAMA,EAAMK,KAAK"}

package/dist/components/atoms/TextField/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),t=require("@mui/material/FormHelperText"),l=require("@mui/material/InputAdornment"),d=require("@mui/material/InputLabel"),s=require("@mui/material/styles"),n=require("@mui/material/TextField"),o=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/View/index.cjs.js"),u=require("../../../icons/ViewOff/index.cjs.js"),c=require("../IconButton/index.cjs.js");const p=s.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),x=s.styled(n,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({display:"flex",width:e?"100%":"auto"}))),m=s.styled(l,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}))),h=({disabled:l=!1,endAdornment:s,errorText:n,fdKey:h,fullWidth:j=!1,helperText:f,hidePasswordAriaLabel:b,label:q,multiline:y=!1,required:w=!1,showPasswordAriaLabel:P,startAdornment:v,type:A="text",...F})=>{const[I,W]=r.useState(!1),B=f?`${h}-helper-text`:void 0,T=n?`${h}-error-message`:void 0,g=[B,T].filter(Boolean).join(" ")||void 0,C=F.slotProps?.htmlInput?.["aria-describedby"],L=[C,g].filter(Boolean).join(" ")||void 0,O=!!n&&!l,V="password"===A,$=()=>W((e=>!e)),_=(()=>{if(V){if(!P||!b)return;return e.jsx(m,{position:"end",children:e.jsx(c.IconButton,{"aria-label":I?b:P,disabled:l,onClick:$,size:"small",tone:"neutral",variant:"tertiary",children:I?e.jsx(u,{}):e.jsx(a,{})})})}if(s)return e.jsx(m,{disabled:l,position:"end",children:s})})(),k=(()=>{if(v)return e.jsx(m,{disabled:l,position:"start",children:v})})();return e.jsxs(p,{fullWidth:j,children:[e.jsxs(i,{children:[q&&e.jsx(d,{disabled:l,htmlFor:h,required:w,children:q}),f&&e.jsx(t,{disabled:l,id:B,children:f})]}),O&&e.jsxs(t,{error:!0,id:T,children:[e.jsx(o,{}),n]}),e.jsx(x,{...F,"data-fd":h,disabled:l,error:O,fullWidth:j,id:h,label:"",multiline:y,required:w,slotProps:{input:{...F.slotProps?.input??{},...k&&{startAdornment:k},..._&&{endAdornment:_}},htmlInput:{...F.slotProps?.htmlInput??{},"aria-describedby":L}},type:V?I?"text":"password":A,variant:"outlined"})]})};exports.TextField=h,exports.default=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),t=require("@mui/material/FormHelperText"),l=require("@mui/material/InputAdornment"),s=require("@mui/material/InputLabel"),d=require("@mui/material/styles"),o=require("@mui/material/TextField"),n=require("../../../icons/CancelCircle/index.cjs.js"),a=require("../../../icons/View/index.cjs.js"),u=require("../../../icons/ViewOff/index.cjs.js"),c=require("../../../providers/TranslationProvider.cjs.js"),p=require("../IconButton/index.cjs.js");const x=d.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),m=d.styled(o,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({display:"flex",width:e?"100%":"auto"}))),h=d.styled(l,{shouldForwardProp:e=>"disabled"!==e})((({theme:e,disabled:r=!1})=>({color:r?e.palette.semantic.icon["icon-disabled"]:e.palette.semantic.icon["icon-strong"]}))),j=({disabled:l=!1,endAdornment:d,errorText:o,fdKey:j,fullWidth:b=!1,helperText:f,label:q,multiline:y=!1,required:w=!1,startAdornment:v,type:P="text",...F})=>{const[I,T]=r.useState(!1),{translate:W}=c.useTranslation(),A=f?`${j}-helper-text`:void 0,B=o?`${j}-error-message`:void 0,g=[A,B].filter(Boolean).join(" ")||void 0,_=F.slotProps?.htmlInput?.["aria-describedby"],C=[_,g].filter(Boolean).join(" ")||void 0,H=!!o&&!l,O="password"===P,S=()=>T((e=>!e)),V=O?e.jsx(h,{position:"end",children:e.jsx(p.IconButton,{"aria-label":W(I?"Hide_password":"Show_password"),disabled:l,onClick:S,size:"small",tone:"neutral",variant:"tertiary",children:I?e.jsx(u,{}):e.jsx(a,{})})}):d?e.jsx(h,{disabled:l,position:"end",children:d}):void 0,$=(()=>{if(v)return e.jsx(h,{disabled:l,position:"start",children:v})})();return e.jsxs(x,{fullWidth:b,children:[e.jsxs(i,{children:[q&&e.jsx(s,{disabled:l,htmlFor:j,required:w,children:q}),f&&e.jsx(t,{disabled:l,id:A,children:f})]}),H&&e.jsxs(t,{error:!0,id:B,children:[e.jsx(n,{}),o]}),e.jsx(m,{...F,"data-fd":j,disabled:l,error:H,fullWidth:b,id:j,label:"",multiline:y,required:w,slotProps:{input:{...F.slotProps?.input??{},...$&&{startAdornment:$},...V&&{endAdornment:V}},htmlInput:{...F.slotProps?.htmlInput??{},"aria-describedby":C}},type:O?I?"text":"password":P,variant:"outlined"})]})};exports.TextField=j,exports.default=j;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/TextField/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' \| 'id' \| 'type' \| 'variant'> & {\n /** The content rendered at the end of the input (suffix). /\n endAdornment?: ReactNode;\n /* The error text to display. /\n errorText?: string;\n /* The key for the input. /\n fdKey: string;\n /* The content rendered at the start of the input (prefix). /\n startAdornment?: ReactNode;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n /* The type of the input. /\n type: 'password';\n /* The aria label for the hide password button. /\n hidePasswordAriaLabel: string;\n /* The aria label for the show password button. /\n showPasswordAriaLabel: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n /* The type of the input. /\n type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n /* The aria label for the hide password button. /\n hidePasswordAriaLabel?: never;\n /* The aria label for the show password button. /\n showPasswordAriaLabel?: never;\n};\n\n/\n The props for the TextField component.\n /\nexport type TextFieldProps = GenericTextFieldProps \| PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/\n A TextField component.\n \n @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n disabled = false,\n endAdornment = undefined,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n hidePasswordAriaLabel,\n label,\n multiline = false,\n required = false,\n showPasswordAriaLabel,\n startAdornment = undefined,\n type = 'text',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') \|\| undefined;\n const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n 'aria-describedby'\n ] as string \| undefined;\n const mergedAriaDescribedBy =\n [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') \|\| undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n if (!showPasswordAriaLabel \|\| !hidePasswordAriaLabel) {\n return undefined;\n }\n\n return (\n <StyledInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </StyledInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"end\">\n {endAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if (startAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"start\">\n {startAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderedEndAdornment = renderEndAdornment();\n const renderedStartAdornment = renderStartAdornment();\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n <Box>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n </Box>\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n {...props}\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n ...(props.slotProps?.input ?? {}),\n // Only pass startAdornment and endAdornment if they are defined\n ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n },\n htmlInput: {\n ...(props.slotProps?.htmlInput ?? {}),\n 'aria-describedby': mergedAriaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","startAdornment","type","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport IconButton from '../IconButton';\n\n/*\n The props for the TextField component.\n /\nexport type TextFieldProps = Omit<MuiTextFieldProps, 'error' \| 'id' \| 'variant'> & {\n /* The content rendered at the end of the input (suffix). /\n endAdornment?: ReactNode;\n /* The error text to display. /\n errorText?: string;\n /* The key for the input. /\n fdKey: string;\n /* The content rendered at the start of the input (prefix). /\n startAdornment?: ReactNode;\n};\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/\n A TextField component.\n \n @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n disabled = false,\n endAdornment = undefined,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n multiline = false,\n required = false,\n startAdornment = undefined,\n type = 'text',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const { translate } = useTranslation();\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') \|\| undefined;\n const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n 'aria-describedby'\n ] as string \| undefined;\n const mergedAriaDescribedBy =\n [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') \|\| undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n return (\n <StyledInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? translate('Hide_password') : translate('Show_password')}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </StyledInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"end\">\n {endAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if (startAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"start\">\n {startAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderedEndAdornment = renderEndAdornment();\n const renderedStartAdornment = renderStartAdornment();\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n <Box>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n </Box>\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n {...props}\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n ...(props.slotProps?.input ?? {}),\n // Only pass startAdornment and endAdornment if they are defined\n ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n },\n htmlInput: {\n ...(props.slotProps?.htmlInput ?? {}),\n 'aria-describedby': mergedAriaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","label","multiline","required","startAdornment","type","props","showPassword","setShowPassword","useState","translate","useTranslation","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"klBA8BA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAuBb,EAAAA,OAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,mBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,QACAC,aAAY,EACZC,YAAW,EACXC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,IAEpDC,UAAEA,GAAcC,mBAEhBC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2Bb,EAAMc,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATnB,EAEboB,EAA0B,IAAYjB,GAAiBkB,IAAUA,IAkDjEC,EAvCAH,EAEAI,EAAAA,IAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAAAA,IAACG,EAAAA,WAAU,CAAA,aACkBrB,EAAfH,EAAyB,gBAA6B,iBAClEhB,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEjBvB,EAAeqB,EAAAA,IAACQ,EAAW,CAAA,GAAMR,EAAAA,IAACS,EAAQ,CAAA,OAK/CxC,EAEA+B,EAAAA,IAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,SAHP,EAwBIyC,EAbuB,MAC3B,GAAIlC,EACF,OACEwB,EAAAA,IAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvD1B,KASsBmC,GAE/B,OACEC,EAAAA,KAACjE,EAAe,CAACM,UAAWA,YAC1B2D,EAAAA,KAAC/D,aACEwB,GACC2B,EAAAA,IAACa,GAAclD,SAAUA,EAAUmD,QAAS3C,EAAOI,SAAUA,EAAQ2B,SAClE7B,IAIJD,GACC4B,EAAAA,IAACe,EAAiB,CAACpD,SAAUA,EAAUqD,GAAIhC,EAAYkB,SACpD9B,OAKNuB,GACCiB,EAAAA,KAACG,EAAiB,CAACE,OAAK,EAACD,GAAI9B,EAAcgB,SAAA,CACzCF,EAAAA,IAACkB,EAAgB,CAAA,GAEhBhD,KAIL8B,EAAAA,IAACzC,EAAe,IACVmB,EAAK,UACAP,EACTR,SAAUA,EACVsD,MAAOtB,EACP1C,UAAWA,EACX+D,GAAI7C,EACJE,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACViB,UAAW,CACT2B,MAAO,IACDzC,EAAMc,WAAW2B,OAAS,MAE1BT,GAA0B,CAAElC,eAAgBkC,MAC5CX,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLf,EAAMc,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBjB,KAhGAmB,EACKjB,EAAe,OAAS,WAG1BF,EA6FH8B,QAAQ"}

package/dist/components/atoms/TextField/index.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
 import { ReactNode } from 'react';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
-type BaseTextFieldProps = Omit<TextFieldProps$1, 'error' | 'id' | 'type' | 'variant'> & {
+/**
+ * The props for the TextField component.
+ */
+type TextFieldProps = Omit<TextFieldProps$1, 'error' | 'id' | 'variant'> & {
     /** The content rendered at the end of the input (suffix). */
     endAdornment?: ReactNode;
     /** The error text to display. */
@@ -11,33 +14,13 @@ type BaseTextFieldProps = Omit<TextFieldProps$1, 'error' | 'id' | 'type' | 'vari
     /** The content rendered at the start of the input (prefix). */
     startAdornment?: ReactNode;
 };
-type PasswordTextFieldProps = BaseTextFieldProps & {
-    /** The type of the input. */
-    type: 'password';
-    /** The aria label for the hide password button. */
-    hidePasswordAriaLabel: string;
-    /** The aria label for the show password button. */
-    showPasswordAriaLabel: string;
-};
-type GenericTextFieldProps = BaseTextFieldProps & {
-    /** The type of the input. */
-    type?: Exclude<TextFieldProps$1['type'], 'password'>;
-    /** The aria label for the hide password button. */
-    hidePasswordAriaLabel?: never;
-    /** The aria label for the show password button. */
-    showPasswordAriaLabel?: never;
-};
-/**
- * The props for the TextField component.
- */
-type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;
 /**
  * A TextField component.
  *
  * @param props - The component props
  * @returns The rendered TextField component
  */
-declare const TextField: ({ disabled, endAdornment, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, startAdornment, type, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ disabled, endAdornment, errorText, fdKey, fullWidth, helperText, label, multiline, required, startAdornment, type, ...props }: TextFieldProps) => JSX.Element;
 export { TextField, TextField as default };
 export type { TextFieldProps };

package/dist/components/atoms/TextField/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as r}from"react/jsx-runtime";import{useState as e}from"react";import t from"@mui/material/Box";import o from"@mui/material/FormHelperText";import l from"@mui/material/InputAdornment";import d from"@mui/material/InputLabel";import{styled as n}from"@mui/material/styles";import a from"@mui/material/TextField";import s from"../../../icons/CancelCircle/index.js";import m from"../../../icons/View/index.js";import p from"../../../icons/ViewOff/index.js";import{IconButton as u}from"../IconButton/index.js";const f=n(t,{shouldForwardProp:i=>"fullWidth"!==i})((({theme:i,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:i.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),c=n(a,{shouldForwardProp:i=>"fullWidth"!==i})((({fullWidth:i=!1})=>({display:"flex",width:i?"100%":"auto"}))),h=n(l,{shouldForwardProp:i=>"disabled"!==i})((({theme:i,disabled:r=!1})=>({color:r?i.palette.semantic.icon["icon-disabled"]:i.palette.semantic.icon["icon-strong"]}))),b=({disabled:l=!1,endAdornment:n,errorText:a,fdKey:b,fullWidth:x=!1,helperText:w,hidePasswordAriaLabel:y,label:P,multiline:j=!1,required:A=!1,showPasswordAriaLabel:W,startAdornment:v,type:F="text",...I})=>{const[g,B]=e(!1),T=w?`${b}-helper-text`:void 0,q=a?`${b}-error-message`:void 0,C=[T,q].filter(Boolean).join(" ")||void 0,L=I.slotProps?.htmlInput?.["aria-describedby"],V=[L,C].filter(Boolean).join(" ")||void 0,$=!!a&&!l,k="password"===F,z=()=>B((i=>!i)),D=(()=>{if(k){if(!W||!y)return;return r(h,{position:"end",children:r(u,{"aria-label":g?y:W,disabled:l,onClick:z,size:"small",tone:"neutral",variant:"tertiary",children:r(g?p:m,{})})})}if(n)return r(h,{disabled:l,position:"end",children:n})})(),H=(()=>{if(v)return r(h,{disabled:l,position:"start",children:v})})();return i(f,{fullWidth:x,children:[i(t,{children:[P&&r(d,{disabled:l,htmlFor:b,required:A,children:P}),w&&r(o,{disabled:l,id:T,children:w})]}),$&&i(o,{error:!0,id:q,children:[r(s,{}),a]}),r(c,{...I,"data-fd":b,disabled:l,error:$,fullWidth:x,id:b,label:"",multiline:j,required:A,slotProps:{input:{...I.slotProps?.input??{},...H&&{startAdornment:H},...D&&{endAdornment:D}},htmlInput:{...I.slotProps?.htmlInput??{},"aria-describedby":V}},type:k?g?"text":"password":F,variant:"outlined"})]})};export{b as TextField,b as default};
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import{useState as e}from"react";import t from"@mui/material/Box";import o from"@mui/material/FormHelperText";import l from"@mui/material/InputAdornment";import d from"@mui/material/InputLabel";import{styled as n}from"@mui/material/styles";import a from"@mui/material/TextField";import s from"../../../icons/CancelCircle/index.js";import m from"../../../icons/View/index.js";import p from"../../../icons/ViewOff/index.js";import{useTranslation as u}from"../../../providers/TranslationProvider.js";import{IconButton as c}from"../IconButton/index.js";const f=n(t,{shouldForwardProp:i=>"fullWidth"!==i})((({theme:i,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:i.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),h=n(a,{shouldForwardProp:i=>"fullWidth"!==i})((({fullWidth:i=!1})=>({display:"flex",width:i?"100%":"auto"}))),b=n(l,{shouldForwardProp:i=>"disabled"!==i})((({theme:i,disabled:r=!1})=>({color:r?i.palette.semantic.icon["icon-disabled"]:i.palette.semantic.icon["icon-strong"]}))),x=({disabled:l=!1,endAdornment:n,errorText:a,fdKey:x,fullWidth:w=!1,helperText:v,label:y,multiline:j=!1,required:P=!1,startAdornment:W,type:F="text",...I})=>{const[A,T]=e(!1),{translate:g}=u(),B=v?`${x}-helper-text`:void 0,q=a?`${x}-error-message`:void 0,C=[B,q].filter(Boolean).join(" ")||void 0,H=I.slotProps?.htmlInput?.["aria-describedby"],V=[H,C].filter(Boolean).join(" ")||void 0,$=!!a&&!l,_="password"===F,k=()=>T((i=>!i)),z=_?r(b,{position:"end",children:r(c,{"aria-label":g(A?"Hide_password":"Show_password"),disabled:l,onClick:k,size:"small",tone:"neutral",variant:"tertiary",children:r(A?p:m,{})})}):n?r(b,{disabled:l,position:"end",children:n}):void 0,D=(()=>{if(W)return r(b,{disabled:l,position:"start",children:W})})();return i(f,{fullWidth:w,children:[i(t,{children:[y&&r(d,{disabled:l,htmlFor:x,required:P,children:y}),v&&r(o,{disabled:l,id:B,children:v})]}),$&&i(o,{error:!0,id:q,children:[r(s,{}),a]}),r(h,{...I,"data-fd":x,disabled:l,error:$,fullWidth:w,id:x,label:"",multiline:j,required:P,slotProps:{input:{...I.slotProps?.input??{},...D&&{startAdornment:D},...z&&{endAdornment:z}},htmlInput:{...I.slotProps?.htmlInput??{},"aria-describedby":V}},type:_?A?"text":"password":F,variant:"outlined"})]})};export{x as TextField,x as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/TextField/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' \| 'id' \| 'type' \| 'variant'> & {\n /** The content rendered at the end of the input (suffix). /\n endAdornment?: ReactNode;\n /* The error text to display. /\n errorText?: string;\n /* The key for the input. /\n fdKey: string;\n /* The content rendered at the start of the input (prefix). /\n startAdornment?: ReactNode;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n /* The type of the input. /\n type: 'password';\n /* The aria label for the hide password button. /\n hidePasswordAriaLabel: string;\n /* The aria label for the show password button. /\n showPasswordAriaLabel: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n /* The type of the input. /\n type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n /* The aria label for the hide password button. /\n hidePasswordAriaLabel?: never;\n /* The aria label for the show password button. /\n showPasswordAriaLabel?: never;\n};\n\n/\n The props for the TextField component.\n /\nexport type TextFieldProps = GenericTextFieldProps \| PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/\n A TextField component.\n \n @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n disabled = false,\n endAdornment = undefined,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n hidePasswordAriaLabel,\n label,\n multiline = false,\n required = false,\n showPasswordAriaLabel,\n startAdornment = undefined,\n type = 'text',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') \|\| undefined;\n const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n 'aria-describedby'\n ] as string \| undefined;\n const mergedAriaDescribedBy =\n [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') \|\| undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n if (!showPasswordAriaLabel \|\| !hidePasswordAriaLabel) {\n return undefined;\n }\n\n return (\n <StyledInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </StyledInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"end\">\n {endAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if (startAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"start\">\n {startAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderedEndAdornment = renderEndAdornment();\n const renderedStartAdornment = renderStartAdornment();\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n <Box>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n </Box>\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n {...props}\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n ...(props.slotProps?.input ?? {}),\n // Only pass startAdornment and endAdornment if they are defined\n ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n },\n htmlInput: {\n ...(props.slotProps?.htmlInput ?? {}),\n 'aria-describedby': mergedAriaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","startAdornment","type","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"4gBAoDA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAuBb,EAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,mBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2BX,EAAMY,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATjB,EAEbkB,EAA0B,IAAYf,GAAiBgB,IAAUA,IAsDjEC,EA5CqB,MACzB,GAAIH,EAAY,CACd,IAAKnB,IAA0BJ,EAC7B,OAGF,OACE2B,EAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAACG,EAAU,CAAA,aACGtB,EAAeR,EAAwBI,EACnDd,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEFF,EAAfnB,EAAgB2B,EAAkBC,EAAP,CAAA,MAIpC,CACA,GAAIxC,EACF,OACE+B,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,KAoBoByC,GACvBC,EAbuB,MAC3B,GAAIjC,EACF,OACEsB,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvDxB,KASsBkC,GAE/B,OACEC,EAAClE,EAAe,CAACM,UAAWA,YAC1B4D,EAAChE,aACEyB,GACC0B,EAACc,GAAcnD,SAAUA,EAAUoD,QAAS5C,EAAOK,SAAUA,EAAQ0B,SAClE5B,IAIJF,GACC4B,EAACgB,EAAiB,CAACrD,SAAUA,EAAUsD,GAAIjC,EAAYkB,SACpD9B,OAKNuB,GACCkB,EAACG,EAAiB,CAACE,OAAK,EAACD,GAAI/B,EAAcgB,SAAA,CACzCF,EAACmB,EAAgB,CAAA,GAEhBjD,KAIL8B,EAACzC,EAAe,IACVqB,EAAK,UACAT,EACTR,SAAUA,EACVuD,MAAOvB,EACP1C,UAAWA,EACXgE,GAAI9C,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACVgB,UAAW,CACT4B,MAAO,IACDxC,EAAMY,WAAW4B,OAAS,MAE1BT,GAA0B,CAAEjC,eAAgBiC,MAC5CZ,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLb,EAAMY,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBf,KApGAiB,EACKf,EAAe,OAAS,WAG1BF,EAiGH4B,QAAQ"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\n\nimport IconButton from '../IconButton';\n\n/*\n The props for the TextField component.\n /\nexport type TextFieldProps = Omit<MuiTextFieldProps, 'error' \| 'id' \| 'variant'> & {\n /* The content rendered at the end of the input (suffix). /\n endAdornment?: ReactNode;\n /* The error text to display. /\n errorText?: string;\n /* The key for the input. /\n fdKey: string;\n /* The content rendered at the start of the input (prefix). /\n startAdornment?: ReactNode;\n};\n\nconst StyledContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n}));\n\nconst StyledInputAdornment = styled(MuiInputAdornment, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n color: disabled ? theme.palette.semantic.icon['icon-disabled'] : theme.palette.semantic.icon['icon-strong'],\n}));\n\n/\n A TextField component.\n \n @param props - The component props\n * @returns The rendered TextField component\n */\nexport const TextField = ({\n disabled = false,\n endAdornment = undefined,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n multiline = false,\n required = false,\n startAdornment = undefined,\n type = 'text',\n ...props\n}: TextFieldProps): JSX.Element => {\n const [showPassword, setShowPassword] = useState<boolean>(false);\n\n const { translate } = useTranslation();\n\n const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n // Combine helper text and error message IDs for aria-describedby\n const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') \|\| undefined;\n const incomingAriaDescribedBy = (props.slotProps?.htmlInput as Record<string, unknown>)?.[\n 'aria-describedby'\n ] as string \| undefined;\n const mergedAriaDescribedBy =\n [incomingAriaDescribedBy, ariaDescribedBy].filter(Boolean).join(' ') \|\| undefined;\n\n const isError = !!errorText && !disabled;\n const isPassword = type === 'password';\n\n const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n const getFieldType = (): MuiTextFieldProps['type'] => {\n if (isPassword) {\n return showPassword ? 'text' : 'password';\n }\n\n return type;\n };\n\n const renderEndAdornment = (): React.ReactNode => {\n if (isPassword) {\n return (\n <StyledInputAdornment position=\"end\">\n <IconButton\n aria-label={showPassword ? translate('Hide_password') : translate('Show_password')}\n disabled={disabled}\n onClick={handleClickShowPassword}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n </IconButton>\n </StyledInputAdornment>\n );\n }\n if (endAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"end\">\n {endAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderStartAdornment = (): React.ReactNode => {\n if (startAdornment) {\n return (\n <StyledInputAdornment disabled={disabled} position=\"start\">\n {startAdornment}\n </StyledInputAdornment>\n );\n }\n\n return undefined;\n };\n\n const renderedEndAdornment = renderEndAdornment();\n const renderedStartAdornment = renderStartAdornment();\n\n return (\n <StyledContainer fullWidth={fullWidth}>\n <Box>\n {label && (\n <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n {label}\n </MuiInputLabel>\n )}\n\n {helperText && (\n <MuiFormHelperText disabled={disabled} id={helperTextId}>\n {helperText}\n </MuiFormHelperText>\n )}\n </Box>\n\n {isError && (\n <MuiFormHelperText error id={errorMessageId}>\n <CancelCircleIcon />\n\n {errorText}\n </MuiFormHelperText>\n )}\n\n <StyledTextField\n {...props}\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n id={fdKey}\n label=\"\" // Remove label from TextField since we're rendering it separately\n multiline={multiline}\n required={required}\n slotProps={{\n input: {\n ...(props.slotProps?.input ?? {}),\n // Only pass startAdornment and endAdornment if they are defined\n ...(renderedStartAdornment && { startAdornment: renderedStartAdornment }),\n ...(renderedEndAdornment && { endAdornment: renderedEndAdornment }),\n },\n htmlInput: {\n ...(props.slotProps?.htmlInput ?? {}),\n 'aria-describedby': mergedAriaDescribedBy,\n },\n }}\n type={getFieldType()}\n variant=\"outlined\"\n />\n </StyledContainer>\n );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","StyledInputAdornment","MuiInputAdornment","disabled","color","palette","semantic","icon","TextField","endAdornment","errorText","fdKey","helperText","label","multiline","required","startAdornment","type","props","showPassword","setShowPassword","useState","translate","useTranslation","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","incomingAriaDescribedBy","slotProps","htmlInput","mergedAriaDescribedBy","isError","isPassword","handleClickShowPassword","show","renderedEndAdornment","_jsx","position","children","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderedStartAdornment","renderStartAdornment","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","input"],"mappings":"ulBA8BA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAuBb,EAAOc,EAAmB,CACrDZ,kBAAoBC,GAAkB,aAATA,GADFH,EAEF,EAAGI,QAAOW,YAAW,MAAO,CACrDC,MAAOD,EAAWX,EAAMa,QAAQC,SAASC,KAAK,iBAAmBf,EAAMa,QAAQC,SAASC,KAAK,mBASlFC,EAAY,EACvBL,YAAW,EACXM,eACAC,YACAC,QACAlB,aAAY,EACZmB,aACAC,QACAC,aAAY,EACZC,YAAW,EACXC,iBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,IAEpDC,UAAEA,GAAcC,IAEhBC,EAAeZ,EAAa,GAAGD,qBAAsBc,EACrDC,EAAiBhB,EAAY,GAAGC,uBAAwBc,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAC9EM,EAA2Bb,EAAMc,WAAWC,YAChD,oBAEIC,EACJ,CAACH,EAAyBJ,GAAiBC,OAAOC,SAASC,KAAK,WAAQL,EAEpEU,IAAYzB,IAAcP,EAC1BiC,EAAsB,aAATnB,EAEboB,EAA0B,IAAYjB,GAAiBkB,IAAUA,IAkDjEC,EAvCAH,EAEAI,EAACvC,EAAoB,CAACwC,SAAS,MAAKC,SAClCF,EAACG,EAAU,CAAA,aACkBrB,EAAfH,EAAyB,gBAA6B,iBAClEhB,SAAUA,EACVyC,QAASP,EACTQ,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUL,SAEFF,EAAfrB,EAAgB6B,EAAkBC,EAAP,CAAA,OAKhCxC,EAEA+B,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,MAAKC,SACrDjC,SAHP,EAwBIyC,EAbuB,MAC3B,GAAIlC,EACF,OACEwB,EAACvC,EAAoB,CAACE,SAAUA,EAAUsC,SAAS,QAAOC,SACvD1B,KASsBmC,GAE/B,OACEC,EAACjE,EAAe,CAACM,UAAWA,YAC1B2D,EAAC/D,aACEwB,GACC2B,EAACa,GAAclD,SAAUA,EAAUmD,QAAS3C,EAAOI,SAAUA,EAAQ2B,SAClE7B,IAIJD,GACC4B,EAACe,EAAiB,CAACpD,SAAUA,EAAUqD,GAAIhC,EAAYkB,SACpD9B,OAKNuB,GACCiB,EAACG,EAAiB,CAACE,OAAK,EAACD,GAAI9B,EAAcgB,SAAA,CACzCF,EAACkB,EAAgB,CAAA,GAEhBhD,KAIL8B,EAACzC,EAAe,IACVmB,EAAK,UACAP,EACTR,SAAUA,EACVsD,MAAOtB,EACP1C,UAAWA,EACX+D,GAAI7C,EACJE,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACViB,UAAW,CACT2B,MAAO,IACDzC,EAAMc,WAAW2B,OAAS,MAE1BT,GAA0B,CAAElC,eAAgBkC,MAC5CX,GAAwB,CAAE9B,aAAc8B,IAE9CN,UAAW,IACLf,EAAMc,WAAWC,WAAa,GAClC,mBAAoBC,IAGxBjB,KAhGAmB,EACKjB,EAAe,OAAS,WAG1BF,EA6FH8B,QAAQ"}

package/dist/components/molecules/AlertGlobal/index.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),i=require("@mui/material/Box"),l=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),o=require("../ButtonGroup/index.cjs.js"),r=require("../../../icons/Cancel/index.cjs.js"),s=require("@mui/material/styles"),c=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),u=require("./alertGlobalTokens.cjs.js");const g=s.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:u.getAlertGlobalBackgroundColour(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u.getAlertGlobalBorderColour(e,t),color:u.getAlertGlobalTextColour(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),p=s.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),m=t.memo((({description:t,tone:a="neutral",onClose:s,action:m,className:f,closeAriaLabel:x="Close","data-fd":h})=>{const b=d(),y=c(b.breakpoints.down("tablet")),j=(m?Array.isArray(m)?m:[m]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e.jsx(l.Button,{fdKey:t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),A=[];return j.length&&!y&&A.push(e.jsx(o,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:j},"action-group-action")),s&&A.push(e.jsx(n.IconButton,{"aria-label":x,"data-fd":"close-button",onClick:s,size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(r,{})},"close")),e.jsx(g,{action:A.length?e.jsx(p,{children:A}):void 0,className:f,"data-fd":h,icon:u.getAlertGlobalIcon(b,a),role:"alert",tone:a,children:e.jsxs(i,{className:"fd-alert-message",children:[e.jsx(i,{className:"fd-alert-description",children:t}),y&&j.length?e.jsx(o,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:j}):null]})})}));m.displayName="AlertGlobal",module.exports=m;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),i=require("@mui/material/Box"),n=require("../../atoms/Button/index.cjs.js"),o=require("../../atoms/IconButton/index.cjs.js"),l=require("../ButtonGroup/index.cjs.js"),r=require("../../../icons/Cancel/index.cjs.js"),s=require("../../../providers/TranslationProvider.cjs.js"),c=require("@mui/material/styles"),d=require("@mui/material/useMediaQuery"),u=require("@mui/material/styles/useTheme"),p=require("./alertGlobalTokens.cjs.js");const g=c.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:p.getAlertGlobalBackgroundColour(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:p.getAlertGlobalBorderColour(e,t),color:p.getAlertGlobalTextColour(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),m=c.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),f=t.memo((({description:t,tone:a="neutral",onClose:c,action:f,className:x,"data-fd":h})=>{const y=u(),b=d(y.breakpoints.down("tablet")),{translate:j}=s.useTranslation(),A=(f?Array.isArray(f)?f:[f]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e.jsx(n.Button,{fdKey:t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),C=[];return A.length&&!b&&C.push(e.jsx(l,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:A},"action-group-action")),c&&C.push(e.jsx(o.IconButton,{"aria-label":j("Close"),"data-fd":"close-button",onClick:c,size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(r,{})},"close")),e.jsx(g,{action:C.length?e.jsx(m,{children:C}):void 0,className:x,"data-fd":h,icon:p.getAlertGlobalIcon(y,a),role:"alert",tone:a,children:e.jsxs(i,{className:"fd-alert-message",children:[e.jsx(i,{className:"fd-alert-description",children:t}),b&&A.length?e.jsx(l,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:A}):null]})})}));f.displayName="AlertGlobal",module.exports=f;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/AlertGlobal/index.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n getAlertGlobalBackgroundColour,\n getAlertGlobalBorderColour,\n getAlertGlobalIcon,\n getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/*\n Global alert component for prominent, page-level messages.\n \n - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n * user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n /\nexport interface AlertGlobalProps {\n /\n Message content shown in the alert. Provide a localized string.\n /\n description: string;\n /\n Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n /\n tone?: AlertTones;\n /\n Called when the close button is pressed. When omitted, no close button is rendered.\n /\n onClose?: () => void;\n /\n One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n /\n action?: AlertAction \| AlertAction[];\n /\n Accessible label for the close icon button. Provide a localized string.\n * Defaults to \"Close\".\n /\n closeAriaLabel?: string;\n /* Optional CSS class name for the root element. /\n className?: string;\n /* Optional test id for the root element. /\n 'data-fd'?: string;\n}\n\n/\n Describes a user action rendered as a button in the alert.\n /\nexport interface AlertAction {\n /* Optional unique identifier for this action. Recommended for stable React keys. /\n id?: string;\n /* Button text. Provide a localized string. /\n label: string;\n /* Visual variant of the button. Defaults to `secondary`. /\n type?: ButtonType;\n /* Click handler for the action. /\n onClick: () => void;\n /* Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(\n ({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n }),\n);\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n closeAriaLabel = 'Close',\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey =\n actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n return (\n <Button\n key={uniqueKey}\n fdKey={\n actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n }\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n );\n });\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup\n key=\"action-group-action\"\n align=\"right\"\n className=\"fd-alert-actions-action\"\n layout=\"horizontal\"\n size=\"small\"\n >\n {actionButtons}\n </ButtonGroup>,\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={closeAriaLabel}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>,\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from 'react';\n\nimport MuiAlert from '@mui/material/Alert';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport type { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';\nimport IconButton from '@fd/components/atoms/IconButton';\nimport type { AlertTones } from '@fd/components/molecules/Alert';\nimport ButtonGroup from '@fd/components/molecules/ButtonGroup';\nimport CancelIcon from '@fd/icons/Cancel';\nimport { useTranslation } from '@fd/providers/TranslationProvider';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport {\n getAlertGlobalBackgroundColour,\n getAlertGlobalBorderColour,\n getAlertGlobalIcon,\n getAlertGlobalTextColour,\n} from './alertGlobalTokens';\n\n/*\n Global alert component for prominent, page-level messages.\n \n - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n * (use an array to render multiple buttons side-by-side)\n /\nexport interface AlertGlobalProps {\n /\n Message content shown in the alert. Provide a localized string.\n /\n description: string;\n /\n Visual tone of the alert which controls icon and colors.\n * Defaults to `neutral`.\n /\n tone?: AlertTones;\n /\n Called when the close button is pressed. When omitted, no close button is rendered.\n /\n onClose?: () => void;\n /\n One or more actions to render as buttons. A single object renders one button;\n * an array renders multiple buttons. Provide localized `label` values.\n /\n action?: AlertAction \| AlertAction[];\n /* Optional CSS class name for the root element. /\n className?: string;\n /* Optional test id for the root element. /\n 'data-fd'?: string;\n}\n\n/\n Describes a user action rendered as a button in the alert.\n /\nexport interface AlertAction {\n /* Optional unique identifier for this action. Recommended for stable React keys. /\n id?: string;\n /* Button text. Provide a localized string. /\n label: string;\n /* Visual variant of the button. Defaults to `secondary`. /\n type?: ButtonType;\n /* Click handler for the action. /\n onClick: () => void;\n /* Optional test id applied to the button. */\n 'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n alignItems: 'center',\n backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n borderBottom: '1px solid',\n borderRadius: 0,\n borderColor: getAlertGlobalBorderColour(theme, tone),\n color: getAlertGlobalTextColour(theme, tone),\n padding: theme.spacing(3),\n paddingTop: theme.spacing(1.5),\n paddingBottom: theme.spacing(1.5),\n width: '100%',\n display: 'flex',\n position: 'relative',\n '& .MuiAlert-icon': {\n alignSelf: 'flex-start',\n },\n '& .MuiAlert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n flexGrow: 1,\n minWidth: 0,\n },\n '& .MuiAlert-action': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n marginLeft: 'auto',\n },\n '& .MuiAlert-action .MuiIconButton-root': {\n outline: 'none',\n boxShadow: 'none',\n border: 'none',\n },\n '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n outline: 'none',\n boxShadow: 'none',\n },\n // Inline actions inside message container\n '& .fd-alert-message': {\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(2),\n width: '100%',\n },\n '& .fd-alert-description': {\n flexGrow: 1,\n minWidth: 0,\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 'auto',\n display: 'none',\n },\n '& .fd-alert-actions-action': {\n display: 'flex',\n },\n // Mobile layout: stack and right-align button group below description\n [theme.breakpoints.down('tablet')]: {\n '& .fd-alert-message': {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(2),\n },\n '& .fd-alert-actions-inline': {\n marginLeft: 0,\n marginTop: theme.spacing(2),\n width: '100%',\n justifyContent: 'flex-end',\n display: 'flex',\n },\n '& .fd-alert-actions-action': {\n display: 'none',\n },\n '& .MuiAlert-action': {\n position: 'absolute',\n top: theme.spacing(3),\n right: theme.spacing(3),\n marginLeft: 0,\n },\n },\n}));\n\nconst ActionContainer = styled(Box)(\n ({ theme }): Record<string, unknown> => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(3),\n }),\n);\n\nconst AlertGlobalComponent = ({\n description,\n tone = 'neutral',\n onClose,\n action,\n className,\n 'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n const theme = useTheme();\n const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n const { translate } = useTranslation();\n\n const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n const actionButtons = actionsArray.map((actionItem) => {\n const uniqueKey =\n actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`;\n return (\n <Button\n key={uniqueKey}\n fdKey={\n actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`\n }\n onClick={actionItem.onClick}\n size=\"small\"\n tone=\"neutral\"\n variant={actionItem.type ?? 'secondary'}\n >\n {actionItem.label}\n </Button>\n );\n });\n\n const nodes: ReactNode[] = [];\n if (actionButtons.length && !isMobile) {\n nodes.push(\n <ButtonGroup\n key=\"action-group-action\"\n align=\"right\"\n className=\"fd-alert-actions-action\"\n layout=\"horizontal\"\n size=\"small\"\n >\n {actionButtons}\n </ButtonGroup>,\n );\n }\n if (onClose) {\n nodes.push(\n <IconButton\n key=\"close\"\n aria-label={translate('Close')}\n data-fd=\"close-button\"\n onClick={onClose}\n size=\"small\"\n tone=\"neutral\"\n variant=\"tertiary\"\n >\n <CancelIcon />\n </IconButton>,\n );\n }\n\n return (\n <StyledGlobalAlert\n action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n className={className}\n data-fd={dataFd}\n icon={getAlertGlobalIcon(theme, tone)}\n role=\"alert\"\n tone={tone}\n >\n <Box className=\"fd-alert-message\">\n <Box className=\"fd-alert-description\">{description}</Box>\n {isMobile && actionButtons.length ? (\n <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n {actionButtons}\n </ButtonGroup>\n ) : null}\n </Box>\n </StyledGlobalAlert>\n );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","dataFd","useTheme","isMobile","useMediaQuery","translate","useTranslation","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}