npm - @flipdish/portal-library - Versions diffs - 8.5.7 → 8.6.0 - Mend

@flipdish/portal-library 8.5.7 → 8.6.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 (2302) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nimport MenuItem from '../MenuItem';\n\nexport interface SelectOption {\n value: number \| string;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' \| 'id' \| 'value' \| 'variant'> & {\n errorText?: string;\n fdKey: string;\n helperText?: string;\n options?: SelectOption[];\n placeholder?: string;\n value?: number \| string;\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 minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n\n '& .MuiSelect-select': {\n color: showPlaceholder\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n },\n }),\n);\n\nconst StyledIconContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n display: 'flex',\n justifyContent: 'center',\n paddingRight: theme.spacing(2),\n pointerEvents: 'auto',\n\n '& svg': {\n color: disabled\n ? theme.palette.semantic.icon['icon-disabled']\n : theme.palette.semantic.icon['icon-strong'],\n },\n}));\n\nconst StyledHiddenPlaceholderMenuItem = styled(MenuItem)(() => ({\n display: 'none',\n}));\n\nexport const Select = ({\n children,\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n onChange,\n options = [],\n placeholder,\n required = false,\n value,\n ...props\n}: SelectProps): JSX.Element => {\n const [isOpen, setIsOpen] = 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\n const isError = !!errorText && !disabled;\n const showPlaceholder = !!placeholder && (!value \|\| value === '');\n\n // Close the dropdown (if open) when the component is dynamically disabled\n useEffect(() => {\n if (disabled) {\n setIsOpen(false);\n }\n }, [disabled]);\n\n /*\n Toggles or sets the dropdown open state.\n * Does nothing when the component is disabled.\n \n @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n */\n const toggleOpen = (open?: boolean): void => {\n if (disabled) {\n return;\n }\n\n if (open !== undefined) {\n setIsOpen(open);\n return;\n }\n\n setIsOpen((prevOpen) => !prevOpen);\n };\n\n const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n // Check if the child is disabled\n const isMenuItemDisabled = !!(\n child &&\n typeof child === 'object' &&\n 'props' in (child as React.ReactElement) &&\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n (child as React.ReactElement).props?.disabled\n );\n if (isMenuItemDisabled) {\n event.preventDefault();\n return;\n }\n\n // Call the original onChange handler if provided\n if (onChange) {\n onChange(event, child);\n }\n };\n\n const getDisplayValue = (): string => {\n if (showPlaceholder) {\n return placeholder;\n }\n\n return String(value);\n };\n\n const renderIcon = (): JSX.Element => {\n const handleIconClick = (event: React.MouseEvent): void => {\n if (disabled) {\n return;\n }\n\n event.stopPropagation();\n toggleOpen();\n };\n\n return (\n <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n </StyledIconContainer>\n );\n };\n\n const optionsMenuItems = useMemo((): React.ReactNode[] => {\n return options.map((option) => (\n <MenuItem key={option.value} disabled={option.disabled} value={option.value}>\n {option.label}\n </MenuItem>\n ));\n }, [options]);\n\n const renderMenuItems = (): React.ReactNode => {\n const menuItems = [];\n\n // Workaround to get the placeholder to show up when no value is selected\n // Placeholder must be a menu item to be displayed\n if (showPlaceholder) {\n menuItems.push(\n <StyledHiddenPlaceholderMenuItem\n key=\"placeholder\"\n disabled\n aria-hidden=\"true\"\n tabIndex={-1}\n value={placeholder}\n >\n {placeholder}\n </StyledHiddenPlaceholderMenuItem>,\n );\n }\n\n // Add either options or children\n if (options?.length > 0) {\n menuItems.push(...optionsMenuItems);\n } else {\n // If no options are provided, use the children\n menuItems.push(children);\n }\n\n return menuItems;\n };\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 <StyledSelect\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n IconComponent={renderIcon}\n id={fdKey}\n inputProps={{\n 'aria-describedby': ariaDescribedBy,\n }}\n label=\"\" // Remove label from Select since we're rendering it separately\n onChange={handleChange}\n onClose={() => toggleOpen(false)}\n onOpen={() => toggleOpen(true)}\n open={isOpen}\n required={required}\n showPlaceholder={showPlaceholder}\n value={getDisplayValue()}\n variant=\"outlined\"\n {...props}\n >\n {renderMenuItems()}\n </StyledSelect>\n </StyledContainer>\n );\n};\n\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","paddingRight","pointerEvents","icon","StyledHiddenPlaceholderMenuItem","MenuItem","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","useEffect","toggleOpen","open","prevOpen","optionsMenuItems","useMemo","map","option","_jsx","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","preventDefault","onClose","onOpen","String","variant","menuItems","push","tabIndex","length","renderMenuItems"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Select/index.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport MuiSelect, { type SelectChangeEvent, type SelectProps as MuiSelectProps } from '@mui/material/Select';\nimport { styled } from '@mui/material/styles';\n\nimport ArrowDown01Icon from '@fd/icons/ArrowDown01';\nimport ArrowUp01Icon from '@fd/icons/ArrowUp01';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nimport MenuItem from '../MenuItem';\n\nexport interface SelectOption {\n value: number \| string;\n label: string;\n disabled?: boolean;\n}\n\nexport type SelectProps = Omit<MuiSelectProps, 'error' \| 'id' \| 'value' \| 'variant'> & {\n errorText?: string;\n fdKey: string;\n helperText?: string;\n options?: SelectOption[];\n placeholder?: string;\n value?: number \| string;\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 minWidth to a maximum of 100% of the container width\n}));\n\nconst StyledSelect = styled(MuiSelect, {\n shouldForwardProp: (prop) => !['fullWidth', 'showPlaceholder'].includes(prop as string),\n})<{ fullWidth?: boolean; showPlaceholder?: boolean }>(\n ({ theme, fullWidth = false, showPlaceholder = false }) => ({\n display: 'flex',\n width: fullWidth ? '100%' : 'auto',\n\n '& .MuiSelect-select': {\n color: showPlaceholder\n ? theme.palette.semantic.text['text-weak']\n : theme.palette.semantic.text['text-strong'],\n },\n }),\n);\n\nconst StyledIconContainer = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'disabled',\n})<{ disabled?: boolean }>(({ theme, disabled = false }) => ({\n alignItems: 'center',\n cursor: disabled ? 'not-allowed' : 'pointer',\n display: 'flex',\n justifyContent: 'center',\n paddingRight: theme.spacing(2),\n pointerEvents: 'auto',\n\n '& svg': {\n color: disabled\n ? theme.palette.semantic.icon['icon-disabled']\n : theme.palette.semantic.icon['icon-strong'],\n },\n}));\n\nconst StyledHiddenPlaceholderMenuItem = styled(MenuItem)(() => ({\n display: 'none',\n}));\n\nexport const Select = ({\n children,\n disabled = false,\n errorText,\n fdKey,\n fullWidth = false,\n helperText,\n label,\n onChange,\n options = [],\n placeholder,\n required = false,\n value,\n ...props\n}: SelectProps): JSX.Element => {\n const [isOpen, setIsOpen] = 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\n const isError = !!errorText && !disabled;\n const showPlaceholder = !!placeholder && (!value \|\| value === '');\n\n // Close the dropdown (if open) when the component is dynamically disabled\n useEffect(() => {\n if (disabled) {\n setIsOpen(false);\n }\n }, [disabled]);\n\n /*\n Toggles or sets the dropdown open state.\n * Does nothing when the component is disabled.\n \n @param open - Optional boolean to explicitly set open state; if undefined, toggles current state\n */\n const toggleOpen = (open?: boolean): void => {\n if (disabled) {\n return;\n }\n\n if (open !== undefined) {\n setIsOpen(open);\n return;\n }\n\n setIsOpen((prevOpen) => !prevOpen);\n };\n\n const handleChange = (event: SelectChangeEvent<unknown>, child?: React.ReactNode): void => {\n // Check if the child is disabled\n const isMenuItemDisabled = !!(\n child &&\n typeof child === 'object' &&\n 'props' in (child as React.ReactElement) &&\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n (child as React.ReactElement).props?.disabled\n );\n if (isMenuItemDisabled) {\n event.preventDefault();\n return;\n }\n\n // Call the original onChange handler if provided\n if (onChange) {\n onChange(event, child);\n }\n };\n\n const getDisplayValue = (): string => {\n if (showPlaceholder) {\n return placeholder;\n }\n\n return String(value);\n };\n\n const renderIcon = (): JSX.Element => {\n const handleIconClick = (event: React.MouseEvent): void => {\n if (disabled) {\n return;\n }\n\n event.stopPropagation();\n toggleOpen();\n };\n\n return (\n <StyledIconContainer disabled={disabled} onClick={handleIconClick}>\n {isOpen ? <ArrowUp01Icon /> : <ArrowDown01Icon />}\n </StyledIconContainer>\n );\n };\n\n const optionsMenuItems = useMemo((): React.ReactNode[] => {\n return options.map((option) => (\n <MenuItem key={option.value} disabled={option.disabled} value={option.value}>\n {option.label}\n </MenuItem>\n ));\n }, [options]);\n\n const renderMenuItems = (): React.ReactNode => {\n const menuItems = [];\n\n // Workaround to get the placeholder to show up when no value is selected\n // Placeholder must be a menu item to be displayed\n if (showPlaceholder) {\n menuItems.push(\n <StyledHiddenPlaceholderMenuItem\n key=\"placeholder\"\n disabled\n aria-hidden=\"true\"\n tabIndex={-1}\n value={placeholder}\n >\n {placeholder}\n </StyledHiddenPlaceholderMenuItem>,\n );\n }\n\n // Add either options or children\n if (options?.length > 0) {\n menuItems.push(...optionsMenuItems);\n } else {\n // If no options are provided, use the children\n menuItems.push(children);\n }\n\n return menuItems;\n };\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 <StyledSelect\n data-fd={fdKey}\n disabled={disabled}\n error={isError}\n fullWidth={fullWidth}\n IconComponent={renderIcon}\n id={fdKey}\n inputProps={{\n 'aria-describedby': ariaDescribedBy,\n }}\n label=\"\" // Remove label from Select since we're rendering it separately\n onChange={handleChange}\n onClose={() => toggleOpen(false)}\n onOpen={() => toggleOpen(true)}\n open={isOpen}\n required={required}\n showPlaceholder={showPlaceholder}\n value={getDisplayValue()}\n variant=\"outlined\"\n {...props}\n >\n {renderMenuItems()}\n </StyledSelect>\n </StyledContainer>\n );\n};\n\nexport type { SelectChangeEvent };\nexport default Select;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledSelect","MuiSelect","includes","showPlaceholder","color","palette","semantic","text","StyledIconContainer","disabled","alignItems","cursor","justifyContent","paddingRight","pointerEvents","icon","StyledHiddenPlaceholderMenuItem","MenuItem","Select","children","errorText","fdKey","helperText","label","onChange","options","placeholder","required","value","props","isOpen","setIsOpen","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","useEffect","toggleOpen","open","prevOpen","optionsMenuItems","useMemo","map","option","_jsx","_jsxs","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","CancelCircleIcon","IconComponent","onClick","event","stopPropagation","ArrowUp01Icon","ArrowDown01Icon","inputProps","child","preventDefault","onClose","onOpen","String","variant","menuItems","push","tabIndex","length","renderMenuItems"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("@mui/material/Slider"),i=require("@mui/material/Box"),o=require("@mui/material/Typography"),r=require("@mui/material/styles");const l=r.styled(t)((({theme:e})=>({color:e.palette.semantic.fill["fill-primary-strong"],height:e.spacing(1),display:"flex",alignItems:"center",margin:e.spacing(0),padding:e.spacing(0),"& .MuiSlider-rail":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,opacity:1,boxSizing:"border-box"},"& .MuiSlider-track":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-primary-strong"],border:"none",borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,paddingLeft:e.spacing(.5)},"& .MuiSlider-thumb":{width:e.spacing(3),height:e.spacing(3),flexShrink:0,aspectRatio:"1/1",backgroundColor:e.palette.semantic.background["background-overlay"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,borderRadius:e.radius["radius-24"],boxShadow:e.customShadows?.overlay,transition:"all 0.2s ease-in-out","&:hover":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&:active":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&.Mui-disabled":{width:e.spacing(3),height:e.spacing(3),backgroundColor:e.palette.semantic.fill["fill-disabled"],border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,boxShadow:"none"}},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-weak"],fontSize:e.typography.captionWeak.fontSize,fontWeight:e.typography.captionWeak.fontWeight,lineHeight:e.typography.captionWeak.lineHeight},"& .MuiSlider-valueLabel":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"],borderRadius:e.radius["radius-8"],padding:e.spacing(.5,1),fontSize:e.typography.captionStrong.fontSize,fontWeight:e.typography.captionStrong.fontWeight,lineHeight:e.typography.captionStrong.lineHeight},"&.Mui-disabled":{color:e.palette.semantic.fill["fill-disabled"],"& .MuiSlider-rail":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-disabled"]}}}))),n=r.styled(i)((({theme:e})=>({width:"100%",display:"flex",padding:e.spacing(0),flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1),backgroundColor:"transparent"}))),s=r.styled(o)((({theme:e})=>({color:e.palette.semantic.text["text-strong"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,margin:e.spacing(0),padding:e.spacing(0)}))),d=r.styled(o)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,textAlign:"right",margin:e.spacing(0),padding:e.spacing(0)}))),g=a.memo((({className:t,fdKey:o,label:r,showLabel:g=!0,showValue:c=!1,valueFormat:p="number",valueSuffix:u="",value:h,defaultValue:m,min:b=0,max:y=100,onChange:f,...k})=>{const[S,x]=a.useState(h??m??0);a.useEffect((()=>{void 0!==h&&x(h)}),[h]);const w=void 0!==h?h:S,v=g&&(r||c);return e.jsxs(n,{className:t,children:[v&&e.jsxs(i,{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%",children:[r&&e.jsx(s,{children:r}),c&&e.jsx(d,{children:(W=w,Array.isArray(W)?"percentage"===p?`${W[0]}% - ${W[1]}%`:`${W[0]}${u} - ${W[1]}${u}`:"percentage"===p?`${W}%`:`${W}${u}`)})]}),e.jsx(l,{"data-fd":o,id:o,max:y,min:b,onChange:(e,a,t)=>{void 0===h&&x(a),f?.(e,a,t)},value:w,...k})]});var W}));g.displayName="Slider",module.exports=g;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),t=require("@mui/material/Slider"),i=require("@mui/material/Box"),o=require("@mui/material/Typography"),r=require("@mui/material/styles");const l=r.styled(t)(({theme:e})=>({color:e.palette.semantic.fill["fill-primary-strong"],height:e.spacing(1),display:"flex",alignItems:"center",margin:e.spacing(0),padding:e.spacing(0),"& .MuiSlider-rail":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,opacity:1,boxSizing:"border-box"},"& .MuiSlider-track":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-primary-strong"],border:"none",borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,paddingLeft:e.spacing(.5)},"& .MuiSlider-thumb":{width:e.spacing(3),height:e.spacing(3),flexShrink:0,aspectRatio:"1/1",backgroundColor:e.palette.semantic.background["background-overlay"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,borderRadius:e.radius["radius-24"],boxShadow:e.customShadows?.overlay,transition:"all 0.2s ease-in-out","&:hover":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&:active":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&.Mui-disabled":{width:e.spacing(3),height:e.spacing(3),backgroundColor:e.palette.semantic.fill["fill-disabled"],border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,boxShadow:"none"}},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-weak"],fontSize:e.typography.captionWeak.fontSize,fontWeight:e.typography.captionWeak.fontWeight,lineHeight:e.typography.captionWeak.lineHeight},"& .MuiSlider-valueLabel":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"],borderRadius:e.radius["radius-8"],padding:e.spacing(.5,1),fontSize:e.typography.captionStrong.fontSize,fontWeight:e.typography.captionStrong.fontWeight,lineHeight:e.typography.captionStrong.lineHeight},"&.Mui-disabled":{color:e.palette.semantic.fill["fill-disabled"],"& .MuiSlider-rail":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-disabled"]}}})),n=r.styled(i)(({theme:e})=>({width:"100%",display:"flex",padding:e.spacing(0),flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1),backgroundColor:"transparent"})),s=r.styled(o)(({theme:e})=>({color:e.palette.semantic.text["text-strong"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,margin:e.spacing(0),padding:e.spacing(0)})),d=r.styled(o)(({theme:e})=>({color:e.palette.semantic.text["text-weak"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,textAlign:"right",margin:e.spacing(0),padding:e.spacing(0)})),g=a.memo(({className:t,fdKey:o,label:r,showLabel:g=!0,showValue:c=!1,valueFormat:p="number",valueSuffix:u="",value:h,defaultValue:m,min:b=0,max:y=100,onChange:f,...k})=>{const[S,x]=a.useState(h??m??0);a.useEffect(()=>{void 0!==h&&x(h)},[h]);const w=void 0!==h?h:S,v=g&&(r||c);return e.jsxs(n,{className:t,children:[v&&e.jsxs(i,{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%",children:[r&&e.jsx(s,{children:r}),c&&e.jsx(d,{children:(W=w,Array.isArray(W)?"percentage"===p?`${W[0]}% - ${W[1]}%`:`${W[0]}${u} - ${W[1]}${u}`:"percentage"===p?`${W}%`:`${W}${u}`)})]}),e.jsx(l,{"data-fd":o,id:o,max:y,min:b,onChange:(e,a,t)=>{void 0===h&&x(a),f?.(e,a,t)},value:w,...k})]});var W});g.displayName="Slider",module.exports=g;
 //# sourceMappingURL=index.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Slider/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport MuiSlider, { type SliderProps as MuiSliderProps } from '@mui/material/Slider';\n\nimport Box from \"@fd/components/atoms/Box\"\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nexport interface SliderProps extends Omit<MuiSliderProps, 'color'> {\n className?: string;\n fdKey: string;\n label?: string;\n showLabel?: boolean;\n showValue?: boolean;\n valueFormat?: 'number' \| 'percentage';\n valueSuffix?: string;\n}\n\nconst StyledSlider = styled(MuiSlider)(({ theme }) => ({\n color: theme.palette.semantic.fill['fill-primary-strong'],\n height: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n\n // Rail (background track)\n '& .MuiSlider-rail': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n opacity: 1,\n boxSizing: 'border-box'\n },\n\n // Track (active portion)\n '& .MuiSlider-track': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-primary-strong'],\n border: 'none',\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n paddingLeft: theme.spacing(0.5),\n },\n\n // Thumb (draggable handle)\n '& .MuiSlider-thumb': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n flexShrink: 0,\n aspectRatio: '1/1',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n borderRadius: theme.radius['radius-24'],\n boxShadow: theme.customShadows?.overlay,\n transition: 'all 0.2s ease-in-out',\n\n '&:hover': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&:active': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&.Mui-disabled': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n boxShadow: 'none',\n },\n },\n\n // Mark labels\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.captionWeak.fontSize,\n fontWeight: theme.typography.captionWeak.fontWeight,\n lineHeight: theme.typography.captionWeak.lineHeight,\n },\n\n // Value label (tooltip)\n '& .MuiSlider-valueLabel': {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n borderRadius: theme.radius['radius-8'],\n padding: theme.spacing(0.5, 1),\n fontSize: theme.typography.captionStrong.fontSize,\n fontWeight: theme.typography.captionStrong.fontWeight,\n lineHeight: theme.typography.captionStrong.lineHeight,\n },\n\n // Disabled state\n '&.Mui-disabled': {\n color: theme.palette.semantic.fill['fill-disabled'],\n\n '& .MuiSlider-rail': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-disabled'],\n },\n },\n}));\n\nconst SliderContainer = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n padding: theme.spacing(0),\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(1),\n backgroundColor: 'transparent',\n}));\n\nconst SliderLabel = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-strong'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst SliderValue = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n textAlign: 'right',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst Slider = React.memo(\n ({\n className,\n fdKey,\n label,\n showLabel = true,\n showValue = false,\n valueFormat = 'number',\n valueSuffix = '',\n value,\n defaultValue,\n min = 0,\n max = 100,\n onChange,\n ...rest\n }: SliderProps) => {\n const [internalValue, setInternalValue] = React.useState<number[] \| number>(\n value ?? defaultValue ?? 0\n );\n\n // Update internal value when controlled value changes\n React.useEffect(() => {\n if (value !== undefined) {\n setInternalValue(value);\n }\n }, [value]);\n\n const handleChange = (event: Event, newValue: number[] \| number, activeThumb: number): void => {\n if (value === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(event, newValue, activeThumb);\n };\n\n const formatValue = (val: number[] \| number): string => {\n if (Array.isArray(val)) {\n // For range sliders, show both values\n if (valueFormat === 'percentage') {\n return `${val[0]}% - ${val[1]}%`;\n }\n return `${val[0]}${valueSuffix} - ${val[1]}${valueSuffix}`;\n }\n\n if (valueFormat === 'percentage') {\n return `${val}%`;\n }\n return `${val}${valueSuffix}`;\n };\n\n const displayValue = value !== undefined ? value : internalValue;\n\n const shouldShowHeader = showLabel && (label \|\| showValue);\n\n return (\n <SliderContainer className={className}>\n {shouldShowHeader && (\n <Box alignItems='center' display='flex' justifyContent='space-between' width='100%'>\n {label && <SliderLabel>{label}</SliderLabel>}\n {showValue && <SliderValue>{formatValue(displayValue)}</SliderValue>}\n </Box>\n )}\n <StyledSlider\n data-fd={fdKey}\n id={fdKey}\n max={max}\n min={min}\n onChange={handleChange}\n value={displayValue}\n {...rest}\n />\n </SliderContainer>\n );\n }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["StyledSlider","styled","MuiSlider","theme","color","palette","semantic","fill","height","spacing","display","alignItems","margin","padding","backgroundColor","border","stroke","borderRadius","radius","boxShadow","customShadows","sunken","opacity","boxSizing","paddingLeft","width","flexShrink","aspectRatio","background","overlay","transition","text","fontSize","typography","captionWeak","fontWeight","lineHeight","captionStrong","SliderContainer","Box","flexDirection","gap","SliderLabel","Typography","b1Weak","fontStyle","SliderValue","textAlign","Slider","React","memo","className","fdKey","label","showLabel","showValue","valueFormat","valueSuffix","value","defaultValue","min","max","onChange","rest","internalValue","setInternalValue","useState","useEffect","undefined","displayValue","shouldShowHeader","_jsxs","children","justifyContent","_jsx","val","Array","isArray","id","event","newValue","activeThumb","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Slider/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport MuiSlider, { type SliderProps as MuiSliderProps } from '@mui/material/Slider';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nexport interface SliderProps extends Omit<MuiSliderProps, 'color'> {\n className?: string;\n fdKey: string;\n label?: string;\n showLabel?: boolean;\n showValue?: boolean;\n valueFormat?: 'number' \| 'percentage';\n valueSuffix?: string;\n}\n\nconst StyledSlider = styled(MuiSlider)(({ theme }) => ({\n color: theme.palette.semantic.fill['fill-primary-strong'],\n height: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n\n // Rail (background track)\n '& .MuiSlider-rail': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n opacity: 1,\n boxSizing: 'border-box',\n },\n\n // Track (active portion)\n '& .MuiSlider-track': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-primary-strong'],\n border: 'none',\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n paddingLeft: theme.spacing(0.5),\n },\n\n // Thumb (draggable handle)\n '& .MuiSlider-thumb': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n flexShrink: 0,\n aspectRatio: '1/1',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n borderRadius: theme.radius['radius-24'],\n boxShadow: theme.customShadows?.overlay,\n transition: 'all 0.2s ease-in-out',\n\n '&:hover': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&:active': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&.Mui-disabled': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n boxShadow: 'none',\n },\n },\n\n // Mark labels\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.captionWeak.fontSize,\n fontWeight: theme.typography.captionWeak.fontWeight,\n lineHeight: theme.typography.captionWeak.lineHeight,\n },\n\n // Value label (tooltip)\n '& .MuiSlider-valueLabel': {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n borderRadius: theme.radius['radius-8'],\n padding: theme.spacing(0.5, 1),\n fontSize: theme.typography.captionStrong.fontSize,\n fontWeight: theme.typography.captionStrong.fontWeight,\n lineHeight: theme.typography.captionStrong.lineHeight,\n },\n\n // Disabled state\n '&.Mui-disabled': {\n color: theme.palette.semantic.fill['fill-disabled'],\n\n '& .MuiSlider-rail': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-disabled'],\n },\n },\n}));\n\nconst SliderContainer = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n padding: theme.spacing(0),\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(1),\n backgroundColor: 'transparent',\n}));\n\nconst SliderLabel = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-strong'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst SliderValue = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n textAlign: 'right',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst Slider = React.memo(\n ({\n className,\n fdKey,\n label,\n showLabel = true,\n showValue = false,\n valueFormat = 'number',\n valueSuffix = '',\n value,\n defaultValue,\n min = 0,\n max = 100,\n onChange,\n ...rest\n }: SliderProps) => {\n const [internalValue, setInternalValue] = React.useState<number[] \| number>(value ?? defaultValue ?? 0);\n\n // Update internal value when controlled value changes\n React.useEffect(() => {\n if (value !== undefined) {\n setInternalValue(value);\n }\n }, [value]);\n\n const handleChange = (event: Event, newValue: number[] \| number, activeThumb: number): void => {\n if (value === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(event, newValue, activeThumb);\n };\n\n const formatValue = (val: number[] \| number): string => {\n if (Array.isArray(val)) {\n // For range sliders, show both values\n if (valueFormat === 'percentage') {\n return `${val[0]}% - ${val[1]}%`;\n }\n return `${val[0]}${valueSuffix} - ${val[1]}${valueSuffix}`;\n }\n\n if (valueFormat === 'percentage') {\n return `${val}%`;\n }\n return `${val}${valueSuffix}`;\n };\n\n const displayValue = value !== undefined ? value : internalValue;\n\n const shouldShowHeader = showLabel && (label \|\| showValue);\n\n return (\n <SliderContainer className={className}>\n {shouldShowHeader && (\n <Box alignItems=\"center\" display=\"flex\" justifyContent=\"space-between\" width=\"100%\">\n {label && <SliderLabel>{label}</SliderLabel>}\n {showValue && <SliderValue>{formatValue(displayValue)}</SliderValue>}\n </Box>\n )}\n <StyledSlider\n data-fd={fdKey}\n id={fdKey}\n max={max}\n min={min}\n onChange={handleChange}\n value={displayValue}\n {...rest}\n />\n </SliderContainer>\n );\n },\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["StyledSlider","styled","MuiSlider","theme","color","palette","semantic","fill","height","spacing","display","alignItems","margin","padding","backgroundColor","border","stroke","borderRadius","radius","boxShadow","customShadows","sunken","opacity","boxSizing","paddingLeft","width","flexShrink","aspectRatio","background","overlay","transition","text","fontSize","typography","captionWeak","fontWeight","lineHeight","captionStrong","SliderContainer","Box","flexDirection","gap","SliderLabel","Typography","b1Weak","fontStyle","SliderValue","textAlign","Slider","React","memo","className","fdKey","label","showLabel","showValue","valueFormat","valueSuffix","value","defaultValue","min","max","onChange","rest","internalValue","setInternalValue","useState","useEffect","undefined","displayValue","shouldShowHeader","_jsxs","children","justifyContent","_jsx","val","Array","isArray","id","event","newValue","activeThumb","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import t from"react";import i from"@mui/material/Slider";import o from"@mui/material/Box";import r from"@mui/material/Typography";import{styled as n}from"@mui/material/styles";const l=n(i)((({theme:e})=>({color:e.palette.semantic.fill["fill-primary-strong"],height:e.spacing(1),display:"flex",alignItems:"center",margin:e.spacing(0),padding:e.spacing(0),"& .MuiSlider-rail":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,opacity:1,boxSizing:"border-box"},"& .MuiSlider-track":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-primary-strong"],border:"none",borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,paddingLeft:e.spacing(.5)},"& .MuiSlider-thumb":{width:e.spacing(3),height:e.spacing(3),flexShrink:0,aspectRatio:"1/1",backgroundColor:e.palette.semantic.background["background-overlay"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,borderRadius:e.radius["radius-24"],boxShadow:e.customShadows?.overlay,transition:"all 0.2s ease-in-out","&:hover":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&:active":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&.Mui-disabled":{width:e.spacing(3),height:e.spacing(3),backgroundColor:e.palette.semantic.fill["fill-disabled"],border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,boxShadow:"none"}},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-weak"],fontSize:e.typography.captionWeak.fontSize,fontWeight:e.typography.captionWeak.fontWeight,lineHeight:e.typography.captionWeak.lineHeight},"& .MuiSlider-valueLabel":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"],borderRadius:e.radius["radius-8"],padding:e.spacing(.5,1),fontSize:e.typography.captionStrong.fontSize,fontWeight:e.typography.captionStrong.fontWeight,lineHeight:e.typography.captionStrong.lineHeight},"&.Mui-disabled":{color:e.palette.semantic.fill["fill-disabled"],"& .MuiSlider-rail":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-disabled"]}}}))),s=n(o)((({theme:e})=>({width:"100%",display:"flex",padding:e.spacing(0),flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1),backgroundColor:"transparent"}))),d=n(r)((({theme:e})=>({color:e.palette.semantic.text["text-strong"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,margin:e.spacing(0),padding:e.spacing(0)}))),p=n(r)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,textAlign:"right",margin:e.spacing(0),padding:e.spacing(0)}))),g=t.memo((({className:i,fdKey:r,label:n,showLabel:g=!0,showValue:c=!1,valueFormat:h="number",valueSuffix:m="",value:u,defaultValue:b,min:f=0,max:y=100,onChange:k,...S})=>{const[x,w]=t.useState(u??b??0);t.useEffect((()=>{void 0!==u&&w(u)}),[u]);const v=void 0!==u?u:x;return e(s,{className:i,children:[g&&(n||c)&&e(o,{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%",children:[n&&a(d,{children:n}),c&&a(p,{children:(W=v,Array.isArray(W)?"percentage"===h?`${W[0]}% - ${W[1]}%`:`${W[0]}${m} - ${W[1]}${m}`:"percentage"===h?`${W}%`:`${W}${m}`)})]}),a(l,{"data-fd":r,id:r,max:y,min:f,onChange:(e,a,t)=>{void 0===u&&w(a),k?.(e,a,t)},value:v,...S})]});var W}));g.displayName="Slider";export{g as default};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import t from"react";import i from"@mui/material/Slider";import o from"@mui/material/Box";import r from"@mui/material/Typography";import{styled as n}from"@mui/material/styles";const l=n(i)(({theme:e})=>({color:e.palette.semantic.fill["fill-primary-strong"],height:e.spacing(1),display:"flex",alignItems:"center",margin:e.spacing(0),padding:e.spacing(0),"& .MuiSlider-rail":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-weak"]}`,borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,opacity:1,boxSizing:"border-box"},"& .MuiSlider-track":{height:e.spacing(1),backgroundColor:e.palette.semantic.fill["fill-primary-strong"],border:"none",borderRadius:e.radius["radius-8"],boxShadow:e.customShadows?.sunken,paddingLeft:e.spacing(.5)},"& .MuiSlider-thumb":{width:e.spacing(3),height:e.spacing(3),flexShrink:0,aspectRatio:"1/1",backgroundColor:e.palette.semantic.background["background-overlay"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,borderRadius:e.radius["radius-24"],boxShadow:e.customShadows?.overlay,transition:"all 0.2s ease-in-out","&:hover":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&:active":{backgroundColor:e.palette.semantic.background["background-overlay"],boxShadow:e.customShadows?.overlay},"&.Mui-disabled":{width:e.spacing(3),height:e.spacing(3),backgroundColor:e.palette.semantic.fill["fill-disabled"],border:`1px solid ${e.palette.semantic.stroke["stroke-disabled"]}`,boxShadow:"none"}},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-weak"],fontSize:e.typography.captionWeak.fontSize,fontWeight:e.typography.captionWeak.fontWeight,lineHeight:e.typography.captionWeak.lineHeight},"& .MuiSlider-valueLabel":{backgroundColor:e.palette.semantic.background["background-inverse"],color:e.palette.semantic.text["text-inverse-strong"],borderRadius:e.radius["radius-8"],padding:e.spacing(.5,1),fontSize:e.typography.captionStrong.fontSize,fontWeight:e.typography.captionStrong.fontWeight,lineHeight:e.typography.captionStrong.lineHeight},"&.Mui-disabled":{color:e.palette.semantic.fill["fill-disabled"],"& .MuiSlider-rail":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"]},"& .MuiSlider-markLabel":{color:e.palette.semantic.text["text-disabled"]}}})),s=n(o)(({theme:e})=>({width:"100%",display:"flex",padding:e.spacing(0),flexDirection:"column",alignItems:"flex-start",gap:e.spacing(1),backgroundColor:"transparent"})),d=n(r)(({theme:e})=>({color:e.palette.semantic.text["text-strong"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,margin:e.spacing(0),padding:e.spacing(0)})),p=n(r)(({theme:e})=>({color:e.palette.semantic.text["text-weak"],fontSize:e.typography.b1Weak.fontSize,fontWeight:e.typography.b1Weak.fontWeight,lineHeight:e.typography.b1Weak.lineHeight,fontStyle:e.typography.b1Weak.fontStyle,textAlign:"right",margin:e.spacing(0),padding:e.spacing(0)})),g=t.memo(({className:i,fdKey:r,label:n,showLabel:g=!0,showValue:c=!1,valueFormat:h="number",valueSuffix:m="",value:u,defaultValue:b,min:f=0,max:y=100,onChange:k,...S})=>{const[x,w]=t.useState(u??b??0);t.useEffect(()=>{void 0!==u&&w(u)},[u]);const v=void 0!==u?u:x;return e(s,{className:i,children:[g&&(n||c)&&e(o,{alignItems:"center",display:"flex",justifyContent:"space-between",width:"100%",children:[n&&a(d,{children:n}),c&&a(p,{children:(W=v,Array.isArray(W)?"percentage"===h?`${W[0]}% - ${W[1]}%`:`${W[0]}${m} - ${W[1]}${m}`:"percentage"===h?`${W}%`:`${W}${m}`)})]}),a(l,{"data-fd":r,id:r,max:y,min:f,onChange:(e,a,t)=>{void 0===u&&w(a),k?.(e,a,t)},value:v,...S})]});var W});g.displayName="Slider";export{g as default};
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Slider/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport MuiSlider, { type SliderProps as MuiSliderProps } from '@mui/material/Slider';\n\nimport Box from \"@fd/components/atoms/Box\"\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nexport interface SliderProps extends Omit<MuiSliderProps, 'color'> {\n className?: string;\n fdKey: string;\n label?: string;\n showLabel?: boolean;\n showValue?: boolean;\n valueFormat?: 'number' \| 'percentage';\n valueSuffix?: string;\n}\n\nconst StyledSlider = styled(MuiSlider)(({ theme }) => ({\n color: theme.palette.semantic.fill['fill-primary-strong'],\n height: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n\n // Rail (background track)\n '& .MuiSlider-rail': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n opacity: 1,\n boxSizing: 'border-box'\n },\n\n // Track (active portion)\n '& .MuiSlider-track': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-primary-strong'],\n border: 'none',\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n paddingLeft: theme.spacing(0.5),\n },\n\n // Thumb (draggable handle)\n '& .MuiSlider-thumb': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n flexShrink: 0,\n aspectRatio: '1/1',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n borderRadius: theme.radius['radius-24'],\n boxShadow: theme.customShadows?.overlay,\n transition: 'all 0.2s ease-in-out',\n\n '&:hover': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&:active': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&.Mui-disabled': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n boxShadow: 'none',\n },\n },\n\n // Mark labels\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.captionWeak.fontSize,\n fontWeight: theme.typography.captionWeak.fontWeight,\n lineHeight: theme.typography.captionWeak.lineHeight,\n },\n\n // Value label (tooltip)\n '& .MuiSlider-valueLabel': {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n borderRadius: theme.radius['radius-8'],\n padding: theme.spacing(0.5, 1),\n fontSize: theme.typography.captionStrong.fontSize,\n fontWeight: theme.typography.captionStrong.fontWeight,\n lineHeight: theme.typography.captionStrong.lineHeight,\n },\n\n // Disabled state\n '&.Mui-disabled': {\n color: theme.palette.semantic.fill['fill-disabled'],\n\n '& .MuiSlider-rail': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-disabled'],\n },\n },\n}));\n\nconst SliderContainer = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n padding: theme.spacing(0),\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(1),\n backgroundColor: 'transparent',\n}));\n\nconst SliderLabel = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-strong'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst SliderValue = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n textAlign: 'right',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst Slider = React.memo(\n ({\n className,\n fdKey,\n label,\n showLabel = true,\n showValue = false,\n valueFormat = 'number',\n valueSuffix = '',\n value,\n defaultValue,\n min = 0,\n max = 100,\n onChange,\n ...rest\n }: SliderProps) => {\n const [internalValue, setInternalValue] = React.useState<number[] \| number>(\n value ?? defaultValue ?? 0\n );\n\n // Update internal value when controlled value changes\n React.useEffect(() => {\n if (value !== undefined) {\n setInternalValue(value);\n }\n }, [value]);\n\n const handleChange = (event: Event, newValue: number[] \| number, activeThumb: number): void => {\n if (value === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(event, newValue, activeThumb);\n };\n\n const formatValue = (val: number[] \| number): string => {\n if (Array.isArray(val)) {\n // For range sliders, show both values\n if (valueFormat === 'percentage') {\n return `${val[0]}% - ${val[1]}%`;\n }\n return `${val[0]}${valueSuffix} - ${val[1]}${valueSuffix}`;\n }\n\n if (valueFormat === 'percentage') {\n return `${val}%`;\n }\n return `${val}${valueSuffix}`;\n };\n\n const displayValue = value !== undefined ? value : internalValue;\n\n const shouldShowHeader = showLabel && (label \|\| showValue);\n\n return (\n <SliderContainer className={className}>\n {shouldShowHeader && (\n <Box alignItems='center' display='flex' justifyContent='space-between' width='100%'>\n {label && <SliderLabel>{label}</SliderLabel>}\n {showValue && <SliderValue>{formatValue(displayValue)}</SliderValue>}\n </Box>\n )}\n <StyledSlider\n data-fd={fdKey}\n id={fdKey}\n max={max}\n min={min}\n onChange={handleChange}\n value={displayValue}\n {...rest}\n />\n </SliderContainer>\n );\n }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["StyledSlider","styled","MuiSlider","theme","color","palette","semantic","fill","height","spacing","display","alignItems","margin","padding","backgroundColor","border","stroke","borderRadius","radius","boxShadow","customShadows","sunken","opacity","boxSizing","paddingLeft","width","flexShrink","aspectRatio","background","overlay","transition","text","fontSize","typography","captionWeak","fontWeight","lineHeight","captionStrong","SliderContainer","Box","flexDirection","gap","SliderLabel","Typography","b1Weak","fontStyle","SliderValue","textAlign","Slider","React","memo","className","fdKey","label","showLabel","showValue","valueFormat","valueSuffix","value","defaultValue","min","max","onChange","rest","internalValue","setInternalValue","useState","useEffect","undefined","displayValue","_jsxs","children","justifyContent","_jsx","val","Array","isArray","id","event","newValue","activeThumb","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Slider/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport MuiSlider, { type SliderProps as MuiSliderProps } from '@mui/material/Slider';\n\nimport Box from '@fd/components/atoms/Box';\nimport Typography from '@fd/components/atoms/Typography';\nimport styled from '@fd/utilities/styledUtilities';\n\nexport interface SliderProps extends Omit<MuiSliderProps, 'color'> {\n className?: string;\n fdKey: string;\n label?: string;\n showLabel?: boolean;\n showValue?: boolean;\n valueFormat?: 'number' \| 'percentage';\n valueSuffix?: string;\n}\n\nconst StyledSlider = styled(MuiSlider)(({ theme }) => ({\n color: theme.palette.semantic.fill['fill-primary-strong'],\n height: theme.spacing(1),\n display: 'flex',\n alignItems: 'center',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n\n // Rail (background track)\n '& .MuiSlider-rail': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n opacity: 1,\n boxSizing: 'border-box',\n },\n\n // Track (active portion)\n '& .MuiSlider-track': {\n height: theme.spacing(1),\n backgroundColor: theme.palette.semantic.fill['fill-primary-strong'],\n border: 'none',\n borderRadius: theme.radius['radius-8'],\n boxShadow: theme.customShadows?.sunken,\n paddingLeft: theme.spacing(0.5),\n },\n\n // Thumb (draggable handle)\n '& .MuiSlider-thumb': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n flexShrink: 0,\n aspectRatio: '1/1',\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n borderRadius: theme.radius['radius-24'],\n boxShadow: theme.customShadows?.overlay,\n transition: 'all 0.2s ease-in-out',\n\n '&:hover': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&:active': {\n backgroundColor: theme.palette.semantic.background['background-overlay'],\n boxShadow: theme.customShadows?.overlay,\n },\n\n '&.Mui-disabled': {\n width: theme.spacing(3),\n height: theme.spacing(3),\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-disabled']}`,\n boxShadow: 'none',\n },\n },\n\n // Mark labels\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.captionWeak.fontSize,\n fontWeight: theme.typography.captionWeak.fontWeight,\n lineHeight: theme.typography.captionWeak.lineHeight,\n },\n\n // Value label (tooltip)\n '& .MuiSlider-valueLabel': {\n backgroundColor: theme.palette.semantic.background['background-inverse'],\n color: theme.palette.semantic.text['text-inverse-strong'],\n borderRadius: theme.radius['radius-8'],\n padding: theme.spacing(0.5, 1),\n fontSize: theme.typography.captionStrong.fontSize,\n fontWeight: theme.typography.captionStrong.fontWeight,\n lineHeight: theme.typography.captionStrong.lineHeight,\n },\n\n // Disabled state\n '&.Mui-disabled': {\n color: theme.palette.semantic.fill['fill-disabled'],\n\n '& .MuiSlider-rail': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n },\n\n '& .MuiSlider-markLabel': {\n color: theme.palette.semantic.text['text-disabled'],\n },\n },\n}));\n\nconst SliderContainer = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n padding: theme.spacing(0),\n flexDirection: 'column',\n alignItems: 'flex-start',\n gap: theme.spacing(1),\n backgroundColor: 'transparent',\n}));\n\nconst SliderLabel = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-strong'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst SliderValue = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n fontSize: theme.typography.b1Weak.fontSize,\n fontWeight: theme.typography.b1Weak.fontWeight,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontStyle: theme.typography.b1Weak.fontStyle,\n textAlign: 'right',\n margin: theme.spacing(0),\n padding: theme.spacing(0),\n}));\n\nconst Slider = React.memo(\n ({\n className,\n fdKey,\n label,\n showLabel = true,\n showValue = false,\n valueFormat = 'number',\n valueSuffix = '',\n value,\n defaultValue,\n min = 0,\n max = 100,\n onChange,\n ...rest\n }: SliderProps) => {\n const [internalValue, setInternalValue] = React.useState<number[] \| number>(value ?? defaultValue ?? 0);\n\n // Update internal value when controlled value changes\n React.useEffect(() => {\n if (value !== undefined) {\n setInternalValue(value);\n }\n }, [value]);\n\n const handleChange = (event: Event, newValue: number[] \| number, activeThumb: number): void => {\n if (value === undefined) {\n setInternalValue(newValue);\n }\n onChange?.(event, newValue, activeThumb);\n };\n\n const formatValue = (val: number[] \| number): string => {\n if (Array.isArray(val)) {\n // For range sliders, show both values\n if (valueFormat === 'percentage') {\n return `${val[0]}% - ${val[1]}%`;\n }\n return `${val[0]}${valueSuffix} - ${val[1]}${valueSuffix}`;\n }\n\n if (valueFormat === 'percentage') {\n return `${val}%`;\n }\n return `${val}${valueSuffix}`;\n };\n\n const displayValue = value !== undefined ? value : internalValue;\n\n const shouldShowHeader = showLabel && (label \|\| showValue);\n\n return (\n <SliderContainer className={className}>\n {shouldShowHeader && (\n <Box alignItems=\"center\" display=\"flex\" justifyContent=\"space-between\" width=\"100%\">\n {label && <SliderLabel>{label}</SliderLabel>}\n {showValue && <SliderValue>{formatValue(displayValue)}</SliderValue>}\n </Box>\n )}\n <StyledSlider\n data-fd={fdKey}\n id={fdKey}\n max={max}\n min={min}\n onChange={handleChange}\n value={displayValue}\n {...rest}\n />\n </SliderContainer>\n );\n },\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["StyledSlider","styled","MuiSlider","theme","color","palette","semantic","fill","height","spacing","display","alignItems","margin","padding","backgroundColor","border","stroke","borderRadius","radius","boxShadow","customShadows","sunken","opacity","boxSizing","paddingLeft","width","flexShrink","aspectRatio","background","overlay","transition","text","fontSize","typography","captionWeak","fontWeight","lineHeight","captionStrong","SliderContainer","Box","flexDirection","gap","SliderLabel","Typography","b1Weak","fontStyle","SliderValue","textAlign","Slider","React","memo","className","fdKey","label","showLabel","showValue","valueFormat","valueSuffix","value","defaultValue","min","max","onChange","rest","internalValue","setInternalValue","useState","useEffect","undefined","displayValue","_jsxs","children","justifyContent","_jsx","val","Array","isArray","id","event","newValue","activeThumb","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Typography"),r=require("@mui/material/styles");const a=r.styled(t)((({theme:e})=>({border:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,padding:`${e.spacing(3)} ${e.spacing(4)}`,display:"flex",justifyContent:"center",alignItems:"center",background:e.palette.semantic.fill["fill-weaker"],borderRadius:e.radius["radius-8"],height:"100%"}))),s=r.styled(i)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],textAlign:"center",fontSize:"14px",fontWeight:"400",lineHeight:"20px"})));module.exports=()=>e.jsx(a,{children:e.jsx(s,{children:"Swap with your component"})});
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Typography"),r=require("@mui/material/styles");const a=r.styled(t)(({theme:e})=>({border:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,padding:`${e.spacing(3)} ${e.spacing(4)}`,display:"flex",justifyContent:"center",alignItems:"center",background:e.palette.semantic.fill["fill-weaker"],borderRadius:e.radius["radius-8"],height:"100%"})),s=r.styled(i)(({theme:e})=>({color:e.palette.semantic.text["text-weak"],textAlign:"center",fontSize:"14px",fontWeight:"400",lineHeight:"20px"}));module.exports=()=>e.jsx(a,{children:e.jsx(s,{children:"Swap with your component"})});
 //# sourceMappingURL=index.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Slot/index.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nimport styled from \"@fd/utilities/styledUtilities\";\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n~~\tborder~~: `1px dashed ${theme.palette.semantic.stroke[\"stroke-strong\"]}`,\n~~\tpadding~~: `${theme.spacing(3)} ${theme.spacing(4)}`,\n~~\tdisplay~~: \"flex\",\n~~\tjustifyContent~~: \"center\",\n~~\talignItems~~: \"center\",\n~~\tbackground~~: theme.palette.semantic.fill[\"fill-weaker\"],\n~~\tborderRadius~~: theme.radius[\"radius-8\"],\n~~\theight~~: \"100~~%\"~~,\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n~~\tcolor~~: theme.palette.semantic.text[\"text-weak\"],\n~~\ttextAlign~~: \"center\",\n~~\tfontSize~~: \"14px\",\n~~\tfontWeight~~: \"400\",\n~~\tlineHeight~~: \"20px\",\n}));\n\nconst Slot: React.FC = () => {\n~~\treturn~~ (\n~~\t\t~~<StyledBox>\n~~\t\t\t~~<StyledTypography>Swap with your component</StyledTypography>\n~~\t\t~~</StyledBox>\n\t);\n};\n\nexport default Slot;\n"],"names":["StyledBox","styled","Box","theme","border","palette","semantic","stroke","padding","spacing","display","justifyContent","alignItems","background","fill","borderRadius","radius","height","StyledTypography","Typography","color","text","textAlign","fontSize","fontWeight","lineHeight","_jsx","children"],"mappings":"uJAKA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,~~EAAY~~,EAAGE,YAAO,~~CACvCC~~,OAAQ,cAAcD,EAAME,QAAQC,SAASC,OAAO,mBACpDC,QAAS,GAAGL,EAAMM,QAAQ,MAAMN,EAAMM,QAAQ,KAC9CC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,WAAYV,EAAME,QAAQC,SAASQ,KAAK,eACxCC,aAAcZ,EAAMa,OAAO,YAC3BC,OAAQ,~~WAGHC~~,EAAmBjB,EAAAA,OAAOkB,EAAPlB,~~EAAmB~~,EAAGE,YAAO,~~CACrDiB~~,MAAOjB,EAAME,QAAQC,SAASe,KAAK,aACnCC,UAAW,SACXC,SAAU,OACVC,WAAY,MACZC,WAAY,~~0BAGU~~,~~IAErBC~~,EAAAA,IAAC1B,EAAS,CAAA2B,~~SACTD~~,EAAAA,IAACR,EAAgB,CAAAS,SAAA"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Slot/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n border: `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n padding: `${theme.spacing(3)} ${theme.spacing(4)}`,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: theme.palette.semantic.fill['fill-weaker'],\n borderRadius: theme.radius['radius-8'],\n height: '100%',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n textAlign: 'center',\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '20px',\n}));\n\nconst Slot: React.FC = () => {\n return (\n <StyledBox>\n <StyledTypography>Swap with your component</StyledTypography>\n </StyledBox>\n );\n};\n\nexport default Slot;\n"],"names":["StyledBox","styled","Box","theme","border","palette","semantic","stroke","padding","spacing","display","justifyContent","alignItems","background","fill","borderRadius","radius","height","StyledTypography","Typography","color","text","textAlign","fontSize","fontWeight","lineHeight","_jsx","children"],"mappings":"uJAKA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,CAAY,EAAGE,YAAO,CACtCC,OAAQ,cAAcD,EAAME,QAAQC,SAASC,OAAO,mBACpDC,QAAS,GAAGL,EAAMM,QAAQ,MAAMN,EAAMM,QAAQ,KAC9CC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,WAAYV,EAAME,QAAQC,SAASQ,KAAK,eACxCC,aAAcZ,EAAMa,OAAO,YAC3BC,OAAQ,UAGJC,EAAmBjB,EAAAA,OAAOkB,EAAPlB,CAAmB,EAAGE,YAAO,CACpDiB,MAAOjB,EAAME,QAAQC,SAASe,KAAK,aACnCC,UAAW,SACXC,SAAU,OACVC,WAAY,MACZC,WAAY,yBAGS,IAEnBC,EAAAA,IAAC1B,EAAS,CAAA2B,SACRD,EAAAA,IAACR,EAAgB,CAAAS,SAAA"}

package/dist/components/atoms/Slot/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/Typography";import{styled as r}from"@mui/material/styles";const a=r(t)((({theme:e})=>({border:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,padding:`${e.spacing(3)} ${e.spacing(4)}`,display:"flex",justifyContent:"center",alignItems:"center",background:e.palette.semantic.fill["fill-weaker"],borderRadius:e.radius["radius-8"],height:"100%"}))),o=r(i)((({theme:e})=>({color:e.palette.semantic.text["text-weak"],textAlign:"center",fontSize:"14px",fontWeight:"400",lineHeight:"20px"}))),n=()=>e(a,{children:e(o,{children:"Swap with your component"})});export{n as default};
+import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/Box";import i from"@mui/material/Typography";import{styled as r}from"@mui/material/styles";const a=r(t)(({theme:e})=>({border:`1px dashed ${e.palette.semantic.stroke["stroke-strong"]}`,padding:`${e.spacing(3)} ${e.spacing(4)}`,display:"flex",justifyContent:"center",alignItems:"center",background:e.palette.semantic.fill["fill-weaker"],borderRadius:e.radius["radius-8"],height:"100%"})),o=r(i)(({theme:e})=>({color:e.palette.semantic.text["text-weak"],textAlign:"center",fontSize:"14px",fontWeight:"400",lineHeight:"20px"})),n=()=>e(a,{children:e(o,{children:"Swap with your component"})});export{n as default};
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Slot/index.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nimport styled from \"@fd/utilities/styledUtilities\";\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n~~\tborder~~: `1px dashed ${theme.palette.semantic.stroke[\"stroke-strong\"]}`,\n~~\tpadding~~: `${theme.spacing(3)} ${theme.spacing(4)}`,\n~~\tdisplay~~: \"flex\",\n~~\tjustifyContent~~: \"center\",\n~~\talignItems~~: \"center\",\n~~\tbackground~~: theme.palette.semantic.fill[\"fill-weaker\"],\n~~\tborderRadius~~: theme.radius[\"radius-8\"],\n~~\theight~~: \"100~~%\"~~,\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n~~\tcolor~~: theme.palette.semantic.text[\"text-weak\"],\n~~\ttextAlign~~: \"center\",\n~~\tfontSize~~: \"14px\",\n~~\tfontWeight~~: \"400\",\n~~\tlineHeight~~: \"20px\",\n}));\n\nconst Slot: React.FC = () => {\n~~\treturn~~ (\n~~\t\t~~<StyledBox>\n~~\t\t\t~~<StyledTypography>Swap with your component</StyledTypography>\n~~\t\t~~</StyledBox>\n\t);\n};\n\nexport default Slot;\n"],"names":["StyledBox","styled","Box","theme","border","palette","semantic","stroke","padding","spacing","display","justifyContent","alignItems","background","fill","borderRadius","radius","height","StyledTypography","Typography","color","text","textAlign","fontSize","fontWeight","lineHeight","Slot","_jsx","children"],"mappings":"+JAKA,MAAMA,EAAYC,EAAOC,EAAPD,~~EAAY~~,EAAGE,YAAO,~~CACvCC~~,OAAQ,cAAcD,EAAME,QAAQC,SAASC,OAAO,mBACpDC,QAAS,GAAGL,EAAMM,QAAQ,MAAMN,EAAMM,QAAQ,KAC9CC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,WAAYV,EAAME,QAAQC,SAASQ,KAAK,eACxCC,aAAcZ,EAAMa,OAAO,YAC3BC,OAAQ,~~WAGHC~~,EAAmBjB,EAAOkB,EAAPlB,~~EAAmB~~,EAAGE,YAAO,~~CACrDiB~~,MAAOjB,EAAME,QAAQC,SAASe,KAAK,aACnCC,UAAW,SACXC,SAAU,OACVC,WAAY,MACZC,WAAY,~~WAGPC~~,EAAiB,~~IAErBC~~,EAAC3B,EAAS,CAAA4B,~~SACTD~~,EAACT,EAAgB,CAAAU,SAAA"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Slot/index.tsx"],"sourcesContent":["import Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n border: `1px dashed ${theme.palette.semantic.stroke['stroke-strong']}`,\n padding: `${theme.spacing(3)} ${theme.spacing(4)}`,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: theme.palette.semantic.fill['fill-weaker'],\n borderRadius: theme.radius['radius-8'],\n height: '100%',\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n color: theme.palette.semantic.text['text-weak'],\n textAlign: 'center',\n fontSize: '14px',\n fontWeight: '400',\n lineHeight: '20px',\n}));\n\nconst Slot: React.FC = () => {\n return (\n <StyledBox>\n <StyledTypography>Swap with your component</StyledTypography>\n </StyledBox>\n );\n};\n\nexport default Slot;\n"],"names":["StyledBox","styled","Box","theme","border","palette","semantic","stroke","padding","spacing","display","justifyContent","alignItems","background","fill","borderRadius","radius","height","StyledTypography","Typography","color","text","textAlign","fontSize","fontWeight","lineHeight","Slot","_jsx","children"],"mappings":"+JAKA,MAAMA,EAAYC,EAAOC,EAAPD,CAAY,EAAGE,YAAO,CACtCC,OAAQ,cAAcD,EAAME,QAAQC,SAASC,OAAO,mBACpDC,QAAS,GAAGL,EAAMM,QAAQ,MAAMN,EAAMM,QAAQ,KAC9CC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,WAAYV,EAAME,QAAQC,SAASQ,KAAK,eACxCC,aAAcZ,EAAMa,OAAO,YAC3BC,OAAQ,UAGJC,EAAmBjB,EAAOkB,EAAPlB,CAAmB,EAAGE,YAAO,CACpDiB,MAAOjB,EAAME,QAAQC,SAASe,KAAK,aACnCC,UAAW,SACXC,SAAU,OACVC,WAAY,MACZC,WAAY,UAGRC,EAAiB,IAEnBC,EAAC3B,EAAS,CAAA4B,SACRD,EAACT,EAAgB,CAAAU,SAAA"}

package/dist/components/atoms/Switch/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/FormControlLabel"),i=require("@mui/material/Switch"),a=require("@mui/material/styles");const o=a.styled(t,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),r=a.styled(i,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium",checked:i})=>{const a="small"===t,o=a?24:32,r=a?24:32;return{width:a?48:64,height:o,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${a?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:r,height:r,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:o,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}})),l=({ariaLabel:t,checked:i,disabled:a=!1,fdKey:l,label:s,labelPlacement:c="end",onChange:d,size:n="medium"})=>s?e.jsx(o,{$size:n,control:e.jsx(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:a,onChange:d}),disabled:a,label:s,labelPlacement:c}):e.jsx(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:a,onChange:d,slotProps:{input:{"aria-label":t}}});exports.Switch=l,exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/FormControlLabel"),i=require("@mui/material/Switch"),a=require("@mui/material/styles");const o=a.styled(t,{shouldForwardProp:e=>"$size"!==e})(({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}})),r=a.styled(i,{shouldForwardProp:e=>"$size"!==e})(({theme:e,$size:t="medium",checked:i})=>{const a="small"===t,o=a?24:32,r=a?24:32;return{width:a?48:64,height:o,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${a?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:r,height:r,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:o,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}}),l=({ariaLabel:t,checked:i,disabled:a=!1,fdKey:l,label:s,labelPlacement:c="end",onChange:d,size:n="medium"})=>s?e.jsx(o,{$size:n,control:e.jsx(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:a,onChange:d}),disabled:a,label:s,labelPlacement:c}):e.jsx(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:a,onChange:d,slotProps:{input:{"aria-label":t}}});exports.Switch=l,exports.default=l;
 //# sourceMappingURL=index.cjs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\n/*\n Props for the Switch component.\n /\nexport interface SwitchProps {\n /* Aria label for the switch if there is no label /\n ariaLabel?: string;\n /* Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element /\n fdKey: string;\n}\n\n/\n A customizable Switch component.\n \n @param props - The component props\n * @returns The rendered Switch component\n */\nexport const Switch = ({\n ariaLabel,\n checked,\n disabled = false,\n fdKey,\n label,\n labelPlacement = 'end',\n onChange,\n size = 'medium',\n}: SwitchProps): ReactElement => {\n if (!label) {\n return (\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n slotProps={{ input: { 'aria-label': ariaLabel } }}\n />\n );\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n }\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","shouldForwardProp","prop","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","ariaLabel","disabled","fdKey","label","labelPlacement","onChange","size","_jsx","control","disableRipple","slotProps","input"],"mappings":"uNAMA,MAAMA,EAAyBC,EAAAA,OAAOC,EAAkB,CACtDC,kBAAoBC,GAAkB,UAATA,GADAH,~~EAEI~~,EAAGI,QAAOC,QAAQ,aAAU,CAC7DC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,~~eAItDQ~~,EAAeb,EAAAA,OAAOc,EAAW,CACrCZ,kBAAoBC,GAAkB,UAATA,GADVH,~~EAEc~~,EAAGI,QAAOC,QAAQ,SAAUU,cAC7D,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,~~mBAiCtCiB~~,EAAS,EACpBC,YACA3B,UACA4B,YAAW,EACXC,QACAC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,YAEFH,EAeHI,EAAAA,IAAClD,SACQiD,EACPE,QACED,MAACpC,EAAY,CACXsC,uBACOH,EACPjC,QAASA,YACA6B,EACTD,SAAUA,EACVI,SAAUA,IAGdJ,SAAUA,EACVE,MAAOA,EACPC,eAAgBA,IA3BhBG,EAAAA,IAACpC,EAAY,CACXsC,eAAa,EAAA9C,MACN2C,EACPjC,QAASA,EAAO,UACP6B,EACTD,SAAUA,EACVI,SAAUA,EACVK,UAAW,CAAEC,MAAO,CAAE,aAAcX"}
1	+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\n/*\n Props for the Switch component.\n /\nexport interface SwitchProps {\n /* Aria label for the switch if there is no label /\n ariaLabel?: string;\n /* Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element /\n fdKey: string;\n}\n\n/\n A customizable Switch component.\n \n @param props - The component props\n * @returns The rendered Switch component\n */\nexport const Switch = ({\n ariaLabel,\n checked,\n disabled = false,\n fdKey,\n label,\n labelPlacement = 'end',\n onChange,\n size = 'medium',\n}: SwitchProps): ReactElement => {\n if (!label) {\n return (\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n slotProps={{ input: { 'aria-label': ariaLabel } }}\n />\n );\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n }\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","shouldForwardProp","prop","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","ariaLabel","disabled","fdKey","label","labelPlacement","onChange","size","_jsx","control","disableRipple","slotProps","input"],"mappings":"uNAMA,MAAMA,EAAyBC,EAAAA,OAAOC,EAAkB,CACtDC,kBAAoBC,GAAkB,UAATA,GADAH,CAEI,EAAGI,QAAOC,QAAQ,aAAU,CAC7DC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,cAItDQ,EAAeb,EAAAA,OAAOc,EAAW,CACrCZ,kBAAoBC,GAAkB,UAATA,GADVH,CAEc,EAAGI,QAAOC,QAAQ,SAAUU,cAC7D,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,kBAiCtCiB,EAAS,EACpBC,YACA3B,UACA4B,YAAW,EACXC,QACAC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,YAEFH,EAeHI,EAAAA,IAAClD,SACQiD,EACPE,QACED,MAACpC,EAAY,CACXsC,uBACOH,EACPjC,QAASA,YACA6B,EACTD,SAAUA,EACVI,SAAUA,IAGdJ,SAAUA,EACVE,MAAOA,EACPC,eAAgBA,IA3BhBG,EAAAA,IAACpC,EAAY,CACXsC,eAAa,EAAA9C,MACN2C,EACPjC,QAASA,EAAO,UACP6B,EACTD,SAAUA,EACVI,SAAUA,EACVK,UAAW,CAAEC,MAAO,CAAE,aAAcX"}

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/FormControlLabel";import i from"@mui/material/Switch";import{styled as o}from"@mui/material/styles";const a=o(t,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}}))),r=o(i,{shouldForwardProp:e=>"$size"!==e})((({theme:e,$size:t="medium",checked:i})=>{const o="small"===t,a=o?24:32,r=o?24:32;return{width:o?48:64,height:a,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${o?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:r,height:r,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:a,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}})),l=({ariaLabel:t,checked:i,disabled:o=!1,fdKey:l,label:s,labelPlacement:c="end",onChange:d,size:n="medium"})=>s?e(a,{$size:n,control:e(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:o,onChange:d}),disabled:o,label:s,labelPlacement:c}):e(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:o,onChange:d,slotProps:{input:{"aria-label":t}}});export{l as Switch,l as default};
+import{jsx as e}from"react/jsx-runtime";import t from"@mui/material/FormControlLabel";import i from"@mui/material/Switch";import{styled as o}from"@mui/material/styles";const a=o(t,{shouldForwardProp:e=>"$size"!==e})(({theme:e,$size:t="medium"})=>({color:e.palette.semantic.text["text-strong"],gap:"12px",margin:0,"& .MuiFormControlLabel-label":{...e.typography["small"===t?"captionWeak":"b1Weak"]}})),r=o(i,{shouldForwardProp:e=>"$size"!==e})(({theme:e,$size:t="medium",checked:i})=>{const o="small"===t,a=o?24:32,r=o?24:32;return{width:o?48:64,height:a,padding:0,overflow:"visible","& .MuiSwitch-switchBase":{padding:0,transitionDuration:"200ms","&.Mui-checked":{transform:`translateX(${o?24:32}px)`,color:e.palette.semantic.fill["fill-white"],"& .MuiSwitch-thumb":{borderColor:e.palette.semantic.stroke["stroke-selected"]},"& + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-selected"],borderColor:e.palette.semantic.stroke["stroke-selected"],opacity:1},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"&.Mui-focusVisible + .MuiSwitch-track":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&.Mui-disabled .MuiSwitch-thumb":{opacity:.5,borderColor:e.palette.semantic.stroke["stroke-disabled"],backgroundColor:e.palette.semantic.background["background-raised"]},"&.Mui-disabled + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-disabled"],borderColor:e.palette.semantic.stroke["stroke-disabled"],opacity:.5}},"& .MuiSwitch-thumb":{width:r,height:r,backgroundColor:e.palette.semantic.background["background-raised"],border:`2px solid ${e.palette.semantic.stroke["stroke-strong"]}`,transition:e.transitions.create(["border-color"],{duration:200})},"& .MuiSwitch-track":{borderRadius:a,backgroundColor:e.palette.semantic.fill["fill-weak"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,boxShadow:i?"none":e.customShadows?.sunken,opacity:1,transition:e.transitions.create(["background-color","border-color","outline"],{duration:200})},"&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track":{backgroundColor:e.palette.semantic.fill["fill-press"]}}}),l=({ariaLabel:t,checked:i,disabled:o=!1,fdKey:l,label:s,labelPlacement:c="end",onChange:d,size:n="medium"})=>s?e(a,{$size:n,control:e(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:o,onChange:d}),disabled:o,label:s,labelPlacement:c}):e(r,{disableRipple:!0,$size:n,checked:i,"data-fd":l,disabled:o,onChange:d,slotProps:{input:{"aria-label":t}}});export{l as Switch,l as default};
 //# sourceMappingURL=index.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\n/*\n Props for the Switch component.\n /\nexport interface SwitchProps {\n /* Aria label for the switch if there is no label /\n ariaLabel?: string;\n /* Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element /\n fdKey: string;\n}\n\n/\n A customizable Switch component.\n \n @param props - The component props\n * @returns The rendered Switch component\n */\nexport const Switch = ({\n ariaLabel,\n checked,\n disabled = false,\n fdKey,\n label,\n labelPlacement = 'end',\n onChange,\n size = 'medium',\n}: SwitchProps): ReactElement => {\n if (!label) {\n return (\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n slotProps={{ input: { 'aria-label': ariaLabel } }}\n />\n );\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n }\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","shouldForwardProp","prop","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","ariaLabel","disabled","fdKey","label","labelPlacement","onChange","size","_jsx","control","disableRipple","slotProps","input"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAkB,CACtDC,kBAAoBC,GAAkB,UAATA,GADAH,~~EAEI~~,EAAGI,QAAOC,QAAQ,aAAU,CAC7DC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,~~eAItDQ~~,EAAeb,EAAOc,EAAW,CACrCZ,kBAAoBC,GAAkB,UAATA,GADVH,~~EAEc~~,EAAGI,QAAOC,QAAQ,SAAUU,cAC7D,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,~~mBAiCtCiB~~,EAAS,EACpBC,YACA3B,UACA4B,YAAW,EACXC,QACAC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,YAEFH,EAeHI,EAAClD,SACQiD,EACPE,QACED,EAACpC,EAAY,CACXsC,uBACOH,EACPjC,QAASA,YACA6B,EACTD,SAAUA,EACVI,SAAUA,IAGdJ,SAAUA,EACVE,MAAOA,EACPC,eAAgBA,IA3BhBG,EAACpC,EAAY,CACXsC,eAAa,EAAA9C,MACN2C,EACPjC,QAASA,EAAO,UACP6B,EACTD,SAAUA,EACVI,SAAUA,EACVK,UAAW,CAAEC,MAAO,CAAE,aAAcX"}
1	+ {"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Switch/index.tsx"],"sourcesContent":["import FormControlLabel, { type FormControlLabelProps } from '@mui/material/FormControlLabel';\nimport MuiSwitch, { type SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\n\nimport styled from '@fd/utilities/styledUtilities';\nimport type { ReactElement } from 'react';\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium' }) => ({\n color: theme.palette.semantic.text['text-strong'],\n gap: '12px',\n margin: 0,\n '& .MuiFormControlLabel-label': {\n ...theme.typography[$size === 'small' ? 'captionWeak' : 'b1Weak'],\n },\n}));\n\nconst StyledSwitch = styled(MuiSwitch, {\n shouldForwardProp: (prop) => prop !== '$size',\n})<{ $size?: 'medium' \| 'small' }>(({ theme, $size = 'medium', checked }) => {\n const isSmall = $size === 'small';\n const width = isSmall ? 48 : 64;\n const height = isSmall ? 24 : 32;\n const thumbSize = isSmall ? 24 : 32;\n const translateX = isSmall ? 24 : 32;\n\n return {\n width,\n height,\n padding: 0,\n overflow: 'visible',\n '& .MuiSwitch-switchBase': {\n padding: 0,\n transitionDuration: '200ms',\n '&.Mui-checked': {\n transform: `translateX(${translateX}px)`,\n color: theme.palette.semantic.fill['fill-white'],\n '& .MuiSwitch-thumb': {\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n },\n '& + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-selected'],\n borderColor: theme.palette.semantic.stroke['stroke-selected'],\n opacity: 1,\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '&.Mui-focusVisible + .MuiSwitch-track': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n '&.Mui-disabled .MuiSwitch-thumb': {\n opacity: 0.5,\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n backgroundColor: theme.palette.semantic.background['background-raised'],\n },\n '&.Mui-disabled + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-disabled'],\n borderColor: theme.palette.semantic.stroke['stroke-disabled'],\n opacity: 0.5,\n },\n },\n '& .MuiSwitch-thumb': {\n width: thumbSize,\n height: thumbSize,\n backgroundColor: theme.palette.semantic.background['background-raised'],\n border: `2px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n transition: theme.transitions.create(['border-color'], {\n duration: 200,\n }),\n },\n '& .MuiSwitch-track': {\n borderRadius: height,\n backgroundColor: theme.palette.semantic.fill['fill-weak'],\n border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n boxShadow: checked ? 'none' : theme.customShadows?.sunken,\n opacity: 1,\n transition: theme.transitions.create(['background-color', 'border-color', 'outline'], {\n duration: 200,\n }),\n },\n '&:hover .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-hover'],\n },\n '&:active .MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled) + .MuiSwitch-track': {\n backgroundColor: theme.palette.semantic.fill['fill-press'],\n },\n };\n});\n\n/*\n Props for the Switch component.\n /\nexport interface SwitchProps {\n /* Aria label for the switch if there is no label /\n ariaLabel?: string;\n /* Whether the switch is checked (on) or unchecked (off) /\n checked?: boolean;\n /* Whether the switch is disabled and cannot be interacted with /\n disabled?: boolean;\n /* Optional label text to display next to the switch /\n label?: string;\n /* Position of the label relative to the switch. Options: 'start', 'end', 'top', 'bottom'. Default: 'end' /\n labelPlacement?: FormControlLabelProps['labelPlacement'];\n /* Callback fired when the switch state changes. Receives the event and checked state /\n onChange?: MuiSwitchProps['onChange'];\n /* Size of the switch. Options: 'small' (48x24px), 'medium' (64x32px). Default: 'medium' /\n size?: 'medium' \| 'small';\n /* Test ID for the switch element /\n fdKey: string;\n}\n\n/\n A customizable Switch component.\n \n @param props - The component props\n * @returns The rendered Switch component\n */\nexport const Switch = ({\n ariaLabel,\n checked,\n disabled = false,\n fdKey,\n label,\n labelPlacement = 'end',\n onChange,\n size = 'medium',\n}: SwitchProps): ReactElement => {\n if (!label) {\n return (\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n slotProps={{ input: { 'aria-label': ariaLabel } }}\n />\n );\n }\n\n return (\n <StyledFormControlLabel\n $size={size}\n control={\n <StyledSwitch\n disableRipple\n $size={size}\n checked={checked}\n data-fd={fdKey}\n disabled={disabled}\n onChange={onChange}\n />\n }\n disabled={disabled}\n label={label}\n labelPlacement={labelPlacement}\n />\n );\n};\n\nexport default Switch;\n"],"names":["StyledFormControlLabel","styled","FormControlLabel","shouldForwardProp","prop","theme","$size","color","palette","semantic","text","gap","margin","typography","StyledSwitch","MuiSwitch","checked","isSmall","height","thumbSize","width","padding","overflow","transitionDuration","transform","fill","borderColor","stroke","backgroundColor","opacity","outline","outlineOffset","background","border","transition","transitions","create","duration","borderRadius","boxShadow","customShadows","sunken","Switch","ariaLabel","disabled","fdKey","label","labelPlacement","onChange","size","_jsx","control","disableRipple","slotProps","input"],"mappings":"wKAMA,MAAMA,EAAyBC,EAAOC,EAAkB,CACtDC,kBAAoBC,GAAkB,UAATA,GADAH,CAEI,EAAGI,QAAOC,QAAQ,aAAU,CAC7DC,MAAOF,EAAMG,QAAQC,SAASC,KAAK,eACnCC,IAAK,OACLC,OAAQ,EACR,+BAAgC,IAC3BP,EAAMQ,WAAqB,UAAVP,EAAoB,cAAgB,cAItDQ,EAAeb,EAAOc,EAAW,CACrCZ,kBAAoBC,GAAkB,UAATA,GADVH,CAEc,EAAGI,QAAOC,QAAQ,SAAUU,cAC7D,MAAMC,EAAoB,UAAVX,EAEVY,EAASD,EAAU,GAAK,GACxBE,EAAYF,EAAU,GAAK,GAGjC,MAAO,CACLG,MANYH,EAAU,GAAK,GAO3BC,SACAG,QAAS,EACTC,SAAU,UACV,0BAA2B,CACzBD,QAAS,EACTE,mBAAoB,QACpB,gBAAiB,CACfC,UAAW,cAXEP,EAAU,GAAK,QAY5BV,MAAOF,EAAMG,QAAQC,SAASgB,KAAK,cACnC,qBAAsB,CACpBC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,oBAE7C,uBAAwB,CACtBC,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,GAEX,oCAAqC,CACnCD,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,wCAAyC,CACvCC,QAAS,aAAazB,EAAMG,QAAQC,SAASkB,OAAO,kBACpDI,cAAe,OAEjB,kCAAmC,CACjCF,QAAS,GACTH,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CC,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,sBAErD,oCAAqC,CACnCJ,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,iBAC7CC,YAAarB,EAAMG,QAAQC,SAASkB,OAAO,mBAC3CE,QAAS,KAGb,qBAAsB,CACpBT,MAAOD,EACPD,OAAQC,EACRS,gBAAiBvB,EAAMG,QAAQC,SAASuB,WAAW,qBACnDC,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDO,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,gBAAiB,CACrDC,SAAU,OAGd,qBAAsB,CACpBC,aAAcpB,EACdU,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,aAC7CQ,OAAQ,aAAa5B,EAAMG,QAAQC,SAASkB,OAAO,mBACnDY,UAAWvB,EAAU,OAASX,EAAMmC,eAAeC,OACnDZ,QAAS,EACTK,WAAY7B,EAAM8B,YAAYC,OAAO,CAAC,mBAAoB,eAAgB,WAAY,CACpFC,SAAU,OAGd,wFAAyF,CACvFT,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,eAE/C,yFAA0F,CACxFG,gBAAiBvB,EAAMG,QAAQC,SAASgB,KAAK,kBAiCtCiB,EAAS,EACpBC,YACA3B,UACA4B,YAAW,EACXC,QACAC,QACAC,iBAAiB,MACjBC,WACAC,OAAO,YAEFH,EAeHI,EAAClD,SACQiD,EACPE,QACED,EAACpC,EAAY,CACXsC,uBACOH,EACPjC,QAASA,YACA6B,EACTD,SAAUA,EACVI,SAAUA,IAGdJ,SAAUA,EACVE,MAAOA,EACPC,eAAgBA,IA3BhBG,EAACpC,EAAY,CACXsC,eAAa,EAAA9C,MACN2C,EACPjC,QAASA,EAAO,UACP6B,EACTD,SAAUA,EACVI,SAAUA,EACVK,UAAW,CAAEC,MAAO,CAAE,aAAcX"}

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

@@ -1,2 +1,2 @@
-"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=({badgeCount:i,badgeEmphasis:t="strong",fdKey:n,iconPosition:o="start",label:l,...u})=>{const d=void 0!==i?e.jsxs(a,{children:[l,e.jsx(r.BadgeCount,{emphasis:t,children:i})]}):l;return e.jsx(s,{...u,"data-fd":n,iconPosition:o,label:d})};
+"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=({badgeCount:i,badgeEmphasis:t="strong",fdKey:n,iconPosition:o="start",label:l,...u})=>{const d=void 0!==i?e.jsxs(a,{children:[l,e.jsx(r.BadgeCount,{emphasis:t,children:i})]}):l;return e.jsx(s,{...u,"data-fd":n,iconPosition:o,label:d})};
 //# 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 { 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 className?: string;\n disabled?: boolean;\n fdKey?: string;\n icon?: MuiTabProps['icon'];\n iconPosition?: MuiTabProps['iconPosition'];\n label: string;\n onClick?: () => void;\n value?: MuiTabProps['value'];\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n badgeCount,\n badgeEmphasis = 'strong',\n fdKey,\n iconPosition = 'start',\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 {...props} data-fd={fdKey} iconPosition={iconPosition} label={tabLabel} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","badgeCount","badgeEmphasis","fdKey","iconPosition","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wLAmBA,MAAMA,EAA0BC,EAAAA,OAAOC,EAAPD,~~EAAY~~,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,~~sBAGT~~,EACVC,aACAC,gBAAgB,SAChBC,QACAC,eAAe,QACfC,WACGC,MAEH,MAAMC,OACWC,IAAfP,EACEQ,EAAAA,KAAChB,EAAuB,CAAAiB,SAAA,CACrBL,EACDM,EAAAA,IAACC,EAAAA,WAAU,CAACC,SAAUX,EAAaQ,SAAGT,OACd,EAK9B,OAAOU,MAACG,EAAM,IAAKR,YAAgBH,EAAOC,aAAcA,EAAcC,MAAOE"}
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 className?: string;\n disabled?: boolean;\n fdKey?: string;\n icon?: MuiTabProps['icon'];\n iconPosition?: MuiTabProps['iconPosition'];\n label: string;\n onClick?: () => void;\n value?: MuiTabProps['value'];\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n badgeCount,\n badgeEmphasis = 'strong',\n fdKey,\n iconPosition = 'start',\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 {...props} data-fd={fdKey} iconPosition={iconPosition} label={tabLabel} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","badgeCount","badgeEmphasis","fdKey","iconPosition","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"wLAmBA,MAAMA,EAA0BC,EAAAA,OAAOC,EAAPD,CAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,qBAGT,EACVC,aACAC,gBAAgB,SAChBC,QACAC,eAAe,QACfC,WACGC,MAEH,MAAMC,OACWC,IAAfP,EACEQ,EAAAA,KAAChB,EAAuB,CAAAiB,SAAA,CACrBL,EACDM,EAAAA,IAACC,EAAAA,WAAU,CAACC,SAAUX,EAAaQ,SAAGT,OACd,EAK9B,OAAOU,MAACG,EAAM,IAAKR,YAAgBH,EAAOC,aAAcA,EAAcC,MAAOE"}

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

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import a from"@mui/material/Tab";import{BadgeCount as o}from"../BadgeCount/index.js";import r from"@mui/material/Box";const m=e(r)((({theme:i})=>({display:"flex",alignItems:"center",gap:i.spacing(1)}))),s=({badgeCount:e,badgeEmphasis:r="strong",fdKey:s,iconPosition:n="start",label:l,...d})=>{const p=void 0!==e?i(m,{children:[l,t(o,{emphasis:r,children:e})]}):l;return t(a,{...d,"data-fd":s,iconPosition:n,label:p})};export{s as default};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import{styled as e}from"@mui/material/styles";import a from"@mui/material/Tab";import{BadgeCount as o}from"../BadgeCount/index.js";import r from"@mui/material/Box";const m=e(r)(({theme:i})=>({display:"flex",alignItems:"center",gap:i.spacing(1)})),s=({badgeCount:e,badgeEmphasis:r="strong",fdKey:s,iconPosition:n="start",label:l,...d})=>{const p=void 0!==e?i(m,{children:[l,t(o,{emphasis:r,children:e})]}):l;return t(a,{...d,"data-fd":s,iconPosition:n,label:p})};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 { 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 className?: string;\n disabled?: boolean;\n fdKey?: string;\n icon?: MuiTabProps['icon'];\n iconPosition?: MuiTabProps['iconPosition'];\n label: string;\n onClick?: () => void;\n value?: MuiTabProps['value'];\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n badgeCount,\n badgeEmphasis = 'strong',\n fdKey,\n iconPosition = 'start',\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 {...props} data-fd={fdKey} iconPosition={iconPosition} label={tabLabel} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","Tab","badgeCount","badgeEmphasis","fdKey","iconPosition","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"sNAmBA,MAAMA,EAA0BC,EAAOC,EAAPD,~~EAAY~~,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,~~OAGfC~~,EAAM,EACVC,aACAC,gBAAgB,SAChBC,QACAC,eAAe,QACfC,WACGC,MAEH,MAAMC,OACWC,IAAfP,EACEQ,EAACjB,EAAuB,CAAAkB,SAAA,CACrBL,EACDM,EAACC,EAAU,CAACC,SAAUX,EAAaQ,SAAGT,OACd,EAK9B,OAAOU,EAACG,EAAM,IAAKR,YAAgBH,EAAOC,aAAcA,EAAcC,MAAOE"}
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 className?: string;\n disabled?: boolean;\n fdKey?: string;\n icon?: MuiTabProps['icon'];\n iconPosition?: MuiTabProps['iconPosition'];\n label: string;\n onClick?: () => void;\n value?: MuiTabProps['value'];\n}\n\nconst StyledTabLabelContainer = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n}));\n\nconst Tab = ({\n badgeCount,\n badgeEmphasis = 'strong',\n fdKey,\n iconPosition = 'start',\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 {...props} data-fd={fdKey} iconPosition={iconPosition} label={tabLabel} />;\n};\n\nexport default Tab;\n"],"names":["StyledTabLabelContainer","styled","Box","theme","display","alignItems","gap","spacing","Tab","badgeCount","badgeEmphasis","fdKey","iconPosition","label","props","tabLabel","undefined","_jsxs","children","_jsx","BadgeCount","emphasis","MuiTab"],"mappings":"sNAmBA,MAAMA,EAA0BC,EAAOC,EAAPD,CAAY,EAAGE,YAAO,CACpDC,QAAS,OACTC,WAAY,SACZC,IAAKH,EAAMI,QAAQ,MAGfC,EAAM,EACVC,aACAC,gBAAgB,SAChBC,QACAC,eAAe,QACfC,WACGC,MAEH,MAAMC,OACWC,IAAfP,EACEQ,EAACjB,EAAuB,CAAAkB,SAAA,CACrBL,EACDM,EAACC,EAAU,CAACC,SAAUX,EAAaQ,SAAGT,OACd,EAK9B,OAAOU,EAACG,EAAM,IAAKR,YAAgBH,EAAOC,aAAcA,EAAcC,MAAOE"}

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"),i=require("@mui/material/Chip"),l=require("@mui/material/styles"),s=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../providers/TranslationProvider.cjs.js");const r=l.styled(t,{shouldForwardProp:e=>"disabled"!==e})((({disabled:e})=>({cursor:e?"not-allowed":void 0}))),a=l.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:l,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":l,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e.jsx(s,{"aria-hidden":!0,"data-fd":"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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),i=require("@mui/material/Chip"),l=require("@mui/material/styles"),s=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../providers/TranslationProvider.cjs.js");const r=l.styled(t,{shouldForwardProp:e=>"disabled"!==e})(({disabled:e})=>({cursor:e?"not-allowed":void 0})),a=l.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:l,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":l,"data-fd-variant":"tag",deleteIcon:(()=>{if(c)return e.jsx(s,{"aria-hidden":!0,"data-fd":"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';\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-fd=\"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,UAAU,mBAAmBR,KAAK,QAWtDS,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"}
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-fd=\"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,CAEA,EAAGI,eAAU,CACtCC,OAAQD,EAAW,mBAAgBE,KAG/BC,EAAYP,EAAAA,OAAOQ,EAAS,CAChCN,kBAAoBC,GAAkB,aAATA,GADbH,CAES,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,6BAW9BC,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,UAAU,mBAAmBR,KAAK,QAWtDS,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.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 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-fd":"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};
+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-fd":"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