npm - @transferwise/components - Versions diffs - 0.0.0-experimental-2f9c87f → 0.0.0-experimental-078341d - Mend

@transferwise/components 0.0.0-experimental-2f9c87f → 0.0.0-experimental-078341d

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 (17) hide show

package/build/ListItem/ListItem.js +2 -0
package/build/ListItem/ListItem.js.map +1 -1
package/build/ListItem/ListItem.mjs +2 -0
package/build/ListItem/ListItem.mjs.map +1 -1
package/build/main.css +8 -0
package/build/styles/ListItem/ListItem.css +8 -0
package/build/styles/main.css +8 -0
package/build/types/ListItem/ListItem.d.ts +1 -1
package/build/types/ListItem/ListItem.d.ts.map +1 -1
package/package.json +1 -1
package/src/ListItem/ListItem.css +8 -0
package/src/ListItem/ListItem.less +8 -0
package/src/ListItem/ListItem.test.tsx +20 -0
package/src/ListItem/ListItem.tsx +3 -1
package/src/ListItem/_stories/ListItem.layout.test.story.tsx +1 -1
package/src/ListItem/_stories/ListItem.story.tsx +1 -1
package/src/main.css +8 -0

package/build/ListItem/ListItem.js CHANGED Viewed

@@ -154,6 +154,8 @@ const ListItem = ({
         'wds-list-item-interactive': isFullyInteractive,
         'wds-list-item-partially-interactive': isPartiallyInteractive,
         [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+        'wds-list-item-paddingY-8': paddingY === 8,
+        'wds-list-item-paddingY-16': paddingY === 16,
         'wds-list-item-paddingY-24': paddingY === 24,
         disabled: disabled && !isPartiallyInteractive,
         'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive

package/build/ListItem/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n 'non-interactive' \| 'navigation' \| 'radio' \| 'checkbox' \| 'switch' \| 'button' \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type ListItemProps = {\n /** @default 'li' /\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n /\n Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n /\n disabled?: boolean;\n /\n If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n * NB: This message cannot house more than 1 link or inline button.<br />\n * NB: It must be used together with `disabled` prop and will be disregarded otherwise.\n /\n disabledPromptMessage?: ReactNode;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n /\n Vertical padding of the list item, in pixels.\n * @default 12\n /\n paddingY?: 12 \| 24;\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n * @default null\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n};\n\n/\n @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n paddingY = 12,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n disabledPromptMessage,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize \| undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt \|\| (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n const isNavigationIndicatorHidden =\n controlType === 'navigation' &&\n Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted, disabledPromptMessage },\n mediaSize,\n isPartiallyInteractive,\n describedByIds,\n }),\n [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt) \|\| (disabled && Boolean(disabledPromptMessage));\n\n / eslint-disable functional/immutable-data /\n if (hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n / eslint-enable functional/immutable-data /\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n 'wds-list-item-paddingY-24': paddingY === 24,\n disabled: disabled && !isPartiallyInteractive,\n 'disabled--has-prompt-reason':\n !disabledPromptMessage && disabled && !isPartiallyInteractive,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n style={\n {\n '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n } as React.CSSProperties\n }\n >\n {isFullyInteractive && spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n disabledPromptMessage,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span className=\"wds-list-item-titles\">\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n 'wds-list-item-button-control--hasPrompt':\n controlType === 'button' && Boolean(prompt),\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<\n ListItemProps,\n 'subtitle' \| 'additionalInfo' \| 'prompt' \| 'disabled' \| 'disabledPromptMessage' \| 'className'\n >;\n\nfunction View({\n children,\n additionalInfo,\n prompt,\n disabled,\n disabledPromptMessage,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => {\n const resolvedPrompt =\n disabled && disabledPromptMessage && !prompt ? (\n <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n ) : (\n prompt\n );\n\n return (\n <>\n {additionalInfo}\n {resolvedPrompt}\n </>\n );\n };\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps \| undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className=\"wds-list-item-view\">{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","paddingY","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GO,MAAMA,QAAQ,GAAGA,CAAC;EACvBC,EAAE,EAAEC,eAAe,GAAG,IAAI;EAC1BC,KAAK;EACLC,QAAQ;EACRC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,QAAQ,GAAG,EAAE;EACbC,UAAU;EACVC,aAAa;AACbC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,qBAAqB;EACrBC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA;AAAE,CACY,KAAI;AAClB,EAAA,MAAMC,QAAQ,GAAGC,WAAK,EAAE;EACxB,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAuB,EAAE,CAAC;EAC1E,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,cAAQ,CAAgB,iBAAiB,CAAC;EAChF,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAGJ,cAAQ,EAAiC;AAE3E,EAAA,MAAMK,GAAG,GAA+B;IACtCzB,KAAK,EAAE,CAAA,EAAGgB,QAAQ,CAAA,MAAA,CAAQ;AAC1B,IAAA,IAAIf,QAAQ,GAAG;MAAEA,QAAQ,EAAE,GAAGe,QAAQ,CAAA,SAAA;KAAa,GAAG,EAAE,CAAC;AACzD,IAAA,IAAIR,UAAU,GAAG;MAAEA,UAAU,EAAE,GAAGQ,QAAQ,CAAA,YAAA;KAAgB,GAAG,EAAE,CAAC;AAChE,IAAA,IAAIP,aAAa,GAAG;MAAEA,aAAa,EAAE,GAAGO,QAAQ,CAAA,eAAA;KAAmB,GAAG,EAAE,CAAC;IACzEN,OAAO,EAAE,CAAA,EAAGM,QAAQ,CAAA,QAAA,CAAU;AAC9B,IAAA,IAAIb,MAAM,IAAKQ,QAAQ,IAAIC,qBAAsB,GAAG;MAAET,MAAM,EAAE,GAAGa,QAAQ,CAAA,OAAA;KAAW,GAAG,EAAE,CAAC;AAC1F,IAAA,IAAId,cAAc,GAAG;MAAEA,cAAc,EAAE,GAAGc,QAAQ,CAAA,gBAAA;KAAoB,GAAG,EAAE;GAC5E;AAED,EAAA,MAAMU,sBAAsB,GAAGC,OAAO,CACpC,CAACN,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,aAAa,KACzDH,YAA8D,EAAEU,oBAAoB,CACtF;AACD,EAAA,MAAMC,kBAAkB,GAAGR,WAAW,KAAK,iBAAiB,IAAI,CAACK,sBAAsB;AACvF,EAAA,MAAMI,cAAc,GAClB,CAACT,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,aAAa,KAC1DM,OAAO,CAAET,YAA8D,EAAEa,IAAI,CAAC;EAChF,MAAMC,2BAA2B,GAC/BX,WAAW,KAAK,YAAY,IAC5BM,OAAO,CAAET,YAAwC,EAAEe,aAAa,CAAC;EAEnE,MAAMC,eAAe,GAAG,CACtB9B,QAAQ,GAAGqB,GAAG,CAACxB,QAAQ,GAAGwB,GAAG,CAACzB,KAAK,EACnCI,QAAQ,GAAGqB,GAAG,CAACzB,KAAK,GAAGyB,GAAG,CAACxB,QAAQ,EACnCG,QAAQ,GAAGqB,GAAG,CAAChB,aAAa,GAAGgB,GAAG,CAACjB,UAAU,EAC7CJ,QAAQ,GAAGqB,GAAG,CAACjB,UAAU,GAAGiB,GAAG,CAAChB,aAAa,CAC9C,CAAC0B,IAAI,CAAC,GAAG,CAAC;EACX,MAAMC,oBAAoB,GAAG,CAACX,GAAG,CAACvB,cAAc,EAAEuB,GAAG,CAACtB,MAAM,CAAC,CAACkC,MAAM,CAACV,OAAO,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAC;AAEvF,EAAA,MAAMG,cAAc,GAAGC,aAAO,CAAC,MAAK;IAClC,OAAOV,kBAAkB,IAAI,CAACC,cAAc,GACxCM,oBAAoB,GACpB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIE,oBAAoB,CAAA,CAAE;EAClD,CAAC,EAAE,CAACA,oBAAoB,EAAEN,cAAc,EAAED,kBAAkB,EAAEK,eAAe,CAAC,CAAC;AAC/E,EAAA,MAAMM,eAAe,GAAGD,aAAO,CAC7B,OAAO;IACLjB,cAAc;IACdH,eAAe;IACfK,YAAY;IACZC,GAAG;AACHgB,IAAAA,KAAK,EAAE;MAAE9B,QAAQ;MAAEP,QAAQ;AAAEQ,MAAAA;KAAuB;IACpDW,SAAS;IACTG,sBAAsB;AACtBY,IAAAA;AACD,GAAA,CAAC,EACF,CAACA,cAAc,EAAEf,SAAS,EAAEZ,QAAQ,EAAEP,QAAQ,EAAEQ,qBAAqB,EAAEc,sBAAsB,CAAC,CAC/F;AACD,EAAA,MAAMgB,gBAAgB,GAAG;IACvB,2BAA2B,EAAE5B,gBAAgB,GAAG,CAAA,EAAG,GAAG,GAAGA,gBAAgB,CAAA,EAAA,CAAI,GAAG,MAAM;AACtF,IAAA,4BAA4B,EAAEA,gBAAgB,GAAG,CAAA,EAAGA,gBAAgB,IAAI,GAAG;GACrD;EAExB,MAAM6B,mBAAmB,GAAGA,MAAK;IAC/B,MAAMC,QAAQ,GAAG,EAAE;AACnB,IAAA,MAAMC,QAAQ,GAAGlB,OAAO,CAACtB,KAAK,CAAC;IAC/B,MAAMyC,iBAAiB,GAAGnB,OAAO,CAACjB,OAAO,CAAC,IAAI,CAACsB,2BAA2B;AAC1E,IAAA,MAAMe,OAAO,GAAGpB,OAAO,CAACzB,cAAc,CAAC;AACvC,IAAA,MAAM8C,SAAS,GAAGrB,OAAO,CAACxB,MAAM,CAAC,IAAKQ,QAAQ,IAAIgB,OAAO,CAACf,qBAAqB,CAAE;AAEjF;IACA,IAAIiC,QAAQ,IAAIC,iBAAiB,EAAE;AACjCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,mCAAmC,CAAC;AACpD,IAAA;AAEA,IAAA,IAAIJ,QAAQ,IAAI,CAACC,iBAAiB,EAAE;AAClCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,kCAAkC,CAAC;AACnD,IAAA;AAEA,IAAA,IAAI,CAACJ,QAAQ,IAAIC,iBAAiB,EAAE;AAClCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,kCAAkC,CAAC;AACnD,IAAA;AAEA,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACC,iBAAiB,EAAE;AACnCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,iCAAiC,CAAC;AAClD,IAAA;IAEA,IAAIF,OAAO,IAAIC,SAAS,EAAE;AACxBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,iCAAiC,CAAC;AAClD,IAAA;AACA,IAAA,IAAIF,OAAO,IAAI,CAACC,SAAS,EAAE;AACzBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,gCAAgC,CAAC;AACjD,IAAA;AACA,IAAA,IAAI,CAACF,OAAO,IAAIC,SAAS,EAAE;AACzBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,gCAAgC,CAAC;AACjD,IAAA;AACA,IAAA,IAAI,CAACF,OAAO,IAAI,CAACC,SAAS,EAAE;AAC1BJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,+BAA+B,CAAC;AAChD,IAAA;AACA;AAEA,IAAA,OAAOL,QAAQ,CAACT,IAAI,CAAC,GAAG,CAAC;EAC3B,CAAC;AAED,EAAA,oBACEe,cAAA,CAACC,+BAAe,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEb,eAAgB;IAAAc,QAAA,eAC/CC,eAAA,CAACxD,eAAe,EAAA;AACdc,MAAAA,SAAS,EAAE2C,SAAI,CACb,eAAe,EACf,CAAA,cAAA,EAAiBnC,WAAW,CAAA,CAAE,EAC9BsB,mBAAmB,EAAE,EACrB;AACE,QAAA,2BAA2B,EAAEd,kBAAkB;AAC/C,QAAA,qCAAqC,EAAEH,sBAAsB;QAC7D,CAAC,CAAA,gDAAA,EAAmDpB,SAAS,CAAA,CAAE,GAC7DuB,kBAAkB,IAAI,CAAC,CAACvB,SAAS;QACnC,2BAA2B,EAAEC,QAAQ,KAAK,EAAE;AAC5CI,QAAAA,QAAQ,EAAEA,QAAQ,IAAI,CAACe,sBAAsB;AAC7C,QAAA,6BAA6B,EAC3B,CAACd,qBAAqB,IAAID,QAAQ,IAAI,CAACe;OAC1C,EACDb,SAAS,CACT;AACFE,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,eAAA,EAAeJ,QAAS;AACxB8C,MAAAA,KAAK,EACH;AACE,QAAA,kCAAkC,EAAElC,SAAS,GAAG,CAAA,EAAGA,SAAS,IAAI,GAAGmC;OAEtE;AAAAJ,MAAAA,QAAA,GAEAzB,kBAAkB,IAAIvB,SAAS,KAAK,UAAU,iBAC7C4C,cAAA,CAAA,KAAA,EAAA;AAAK,QAAA,aAAA,EAAY,MAAM;AAACrC,QAAAA,SAAS,EAAC,iCAAiC;QAAAyC,QAAA,eACjEJ,cAAA,CAAA,MAAA,EAAA,EAAK;AACP,OAAK,CACN,eAEDK,eAAA,CAACI,IAAI,EAAA;QAEDjC,sBAAsB;QACtBzB,QAAQ;QACRC,cAAc;QACdS,QAAQ;QACRC,qBAAqB;QACrBT,MAAM;QACNkB,WAAW;QACXH,YAAY;QAEdL,SAAS,EAAE8B,mBAAmB,EAAG;QAAAW,QAAA,EAAA,CAEhCjD,KAAK,iBAAI6C,cAAA,CAAA,KAAA,EAAA;AAAKrC,UAAAA,SAAS,EAAC,qBAAqB;AAAAyC,UAAAA,QAAA,EAAEjD;SAAW,CAAC,eAG5DkD,eAAA,CAAA,KAAA,EAAA;AACE1C,UAAAA,SAAS,EAAC,oBAAoB;AAC9B4C,UAAAA,KAAK,EAAE3C,gBAAgB,GAAG4B,gBAAgB,GAAGgB,SAAU;AAAAJ,UAAAA,QAAA,gBAGvDJ,cAAA,CAAA,MAAA,EAAA;AAAMrC,YAAAA,SAAS,EAAC,sBAAsB;YAAAyC,QAAA,EACnC,CAAC,MAAK;AACL,cAAA,MAAMM,MAAM,GAAG,cACbV,cAAA,CAACW,YAAI,EAAA;gBAEH9C,EAAE,EAAEU,GAAG,CAACzB,KAAM;gBACd8D,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AACjCnD,gBAAAA,SAAS,EAAC,qBAAqB;AAAAyC,gBAAAA,QAAA,EAE9BtD;AAAK,eAAA,EALDyB,GAAG,CAACzB,KAML,CAAC,CACR;AACD,cAAA,IAAIC,QAAQ,EAAE;AACZ2D,gBAAAA,MAAM,CAACX,IAAI,cACTC,cAAA,CAACW,YAAI,EAAA;kBAAoB9C,EAAE,EAAEU,GAAG,CAACxB,QAAS;AAACY,kBAAAA,SAAS,EAAC,wBAAwB;AAAAyC,kBAAAA,QAAA,EAC1ErD;AAAQ,iBAAA,EADAwB,GAAG,CAACxB,QAET,CAAC,CACR;AACH,cAAA;cACA,OAAOG,QAAQ,GAAG,CAAC,GAAGwD,MAAM,CAAC,CAACK,OAAO,EAAE,GAAGL,MAAM;AAClD,YAAA,CAAC;AAAG,WACA,CAEN,EAAC,CAACpD,UAAU,IAAIC,aAAa,kBAC3ByC,cAAA,CAAA,MAAA,EAAA;AACErC,YAAAA,SAAS,EAAE2C,SAAI,CAAC,qBAAqB,EAAE;AACrC,cAAA,aAAa,EAAEhD,UAAU,KAAKkD,SAAS,IAAIjD,aAAa,KAAKiD;AAC9D,aAAA,CAAE;YAAAJ,QAAA,EAEF,CAAC,MAAK;cACL,MAAMY,MAAM,GAAG,EAAE;AACjB,cAAA,IAAI1D,UAAU,EAAE;AACd0D,gBAAAA,MAAM,CAACjB,IAAI,cACTC,cAAA,CAACW,YAAI,EAAA;kBAEH9C,EAAE,EAAEU,GAAG,CAACjB,UAAW;kBACnBsD,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AACjCnD,kBAAAA,SAAS,EAAC,2BAA2B;AAAAyC,kBAAAA,QAAA,EAEpC9C;AAAU,iBAAA,EALNiB,GAAG,CAACjB,UAML,CAAC,CACR;AACH,cAAA;AACA,cAAA,IAAIC,aAAa,EAAE;AACjByD,gBAAAA,MAAM,CAACjB,IAAI,cACTC,cAAA,CAACW,YAAI,EAAA;kBAEH9C,EAAE,EAAEU,GAAG,CAAChB,aAAc;AACtBI,kBAAAA,SAAS,EAAC,8BAA8B;AAAAyC,kBAAAA,QAAA,EAEvC7C;AAAa,iBAAA,EAJTgB,GAAG,CAAChB,aAKL,CAAC,CACR;AACH,cAAA;cACA,OAAOL,QAAQ,GAAG,CAAC,GAAG8D,MAAM,CAAC,CAACD,OAAO,EAAE,GAAGC,MAAM;AAClD,YAAA,CAAC;AAAG,WACA,CACP;SACE,CAEL,EAACxD,OAAO,KAAK,IAAI,GAAG,IAAI,gBACtBwC,cAAA,CAACW,YAAI,EAAA;AACHhD,UAAAA,SAAS,EAAE2C,SAAI,CAAC,+BAA+B,EAAE;YAC/C,8BAA8B,EAAEnC,WAAW,KAAK,QAAQ;AACxD,YAAA,yCAAyC,EACvCA,WAAW,KAAK,QAAQ,IAAIM,OAAO,CAACxB,MAAM;AAC7C,WAAA,CAAE;AACHsD,UAAAA,KAAK,EACH;AACE,YAAA,wCAAwC,EAAElC,SAAS,GAAG,CAAA,EAAGA,SAAS,IAAI,GAAG;WAE5E;AAAA+B,UAAAA,QAAA,EAEA5C;AAAO,SACJ,CACP;AAAA,OACG,CACR;KAAiB;AACnB,GAA0B,CAAC;AAE/B;AAYA,SAASiD,IAAIA,CAAC;EACZL,QAAQ;EACRpD,cAAc;EACdC,MAAM;EACNQ,QAAQ;EACRC,qBAAqB;EACrBc,sBAAsB;AACtBL,EAAAA,WAAW,GAAG,iBAAiB;EAC/BH,YAAY;AACZL,EAAAA,SAAS,GAAG;AAAE,CACJ,EAAA;EACV,MAAM;IAAEY,GAAG;AAAEa,IAAAA;AAAc,GAAE,GAAG6B,gBAAU,CAAsBhB,+BAAe,CAAC;EAChF,MAAMiB,aAAa,GAAG,CAAC,YAAY,CAAC,CAACC,QAAQ,CAAChD,WAAW,CAAC;EAE1D,MAAMiD,cAAc,GAAGF,aAAa,IAAI,CAAC,CAAElD,YAAwC,EAAEa,IAAI;EAEzF,MAAMwC,YAAY,GAAGA,MAAK;IACxB,MAAMC,cAAc,GAClB7D,QAAQ,IAAIC,qBAAqB,IAAI,CAACT,MAAM,gBAC1C+C,cAAA,CAACuB,qBAAM,EAAA;MAACC,SAAS,EAAEC,mBAAS,CAACC,OAAQ;AAAAtB,MAAAA,QAAA,EAAE1C;KAA8B,CAAC,GAEtET,MACD;IAEH,oBACEoD,eAAA,CAAAsB,mBAAA,EAAA;MAAAvB,QAAA,EAAA,CACGpD,cAAc,EACdsE,cAAc;AAAA,KACjB,CAAG;EAEP,CAAC;EAED,IAAIJ,aAAa,IAAIE,cAAc,EAAE;AACnC,IAAA;AAAA;AACE;MACAf,eAAA,CAAA,KAAA,EAAA;AAAK1C,QAAAA,SAAS,EAAE2C,SAAI,CAAC,2BAA2B,EAAE3C,SAAS,CAAE;QAAAyC,QAAA,EAAA,cAC3DJ,cAAA,CAAC4B,uBAAe,EAAA;AACd,UAAA,kBAAA,EAAkBxC,cAAe;UACjCP,IAAI,EAAGb,YAAwC,EAAEa,IAAK;UACtDgD,MAAM,EAAG7D,YAAwC,EAAE6D,MAAO;AAC1DlE,UAAAA,SAAS,EAAE2C,SAAI,CAAC,oBAAoB,EAAE;YACpC,uBAAuB,EAAEnC,WAAW,KAAK,YAAY;AACrD2D,YAAAA,gBAAgB,EAAE,CAACtD;AACpB,WAAA,CAAE;AACHf,UAAAA,QAAQ,EAAEA,QAAS;UACnBsE,OAAO,EAAG/D,YAAiD,EAAE+D,OAAQ;AAAA3B,UAAAA,QAAA,EAEpEA;AAAQ,SACM,CAEjB,EAACiB,YAAY,EAAE;OACZ;AAAC;AAEV,EAAA;AAEA,EAAA,IAAI7C,sBAAsB,IAAIL,WAAW,KAAK,iBAAiB,EAAE;AAC/D,IAAA,oBACEkC,eAAA,CAAA,KAAA,EAAA;AAAK1C,MAAAA,SAAS,EAAE2C,SAAI,CAAC,2BAA2B,EAAE3C,SAAS,CAAE;AAAAyC,MAAAA,QAAA,gBAC3DJ,cAAA,CAAA,KAAA,EAAA;AAAKrC,QAAAA,SAAS,EAAC,oBAAoB;AAAAyC,QAAAA,QAAA,EAAEA;AAAQ,OAAM,CAEnD,EAACiB,YAAY,EAAE;AAAA,KACZ,CAAC;AAEV,EAAA;AAEA;AACA;EACA,MAAMW,YAAY,GAAG7D,WAAW,KAAK,OAAO,GAAG,KAAK,GAAG,UAAU;EACjE,oBACEkC,eAAA,CAAC2B,YAAY,EAAA;AAACrE,IAAAA,SAAS,EAAE2C,SAAI,CAAC,2BAA2B,EAAE3C,SAAS,CAAE;AAAAyC,IAAAA,QAAA,gBACpEJ,cAAA,CAAA,OAAA,EAAA;MACEiC,OAAO,EAAE1D,GAAG,CAACf,OAAQ;AACrBG,MAAAA,SAAS,EAAE2C,SAAI,CAAC,oBAAoB,EAAE;QACpC4B,SAAS,EAAE,CAACzE,QAAQ;AACpBqE,QAAAA,gBAAgB,EAAE,CAACtD;AACpB,OAAA,CAAE;AAAA4B,MAAAA,QAAA,EAEFA;AAAQ,KACJ,CAEP,EAACiB,YAAY,EAAE;AAAA,GACH,CAAC;AAEnB;AAEA1E,QAAQ,CAACwF,KAAK,GAAGA,mBAAK;AACtBxF,QAAQ,CAACyF,UAAU,GAAGA,6BAAU;AAChCzF,QAAQ,CAAC0F,YAAY,GAAGA,iCAAY;AACpC1F,QAAQ,CAAC2F,cAAc,GAAGA,qCAAc;AACxC3F,QAAQ,CAAC4F,QAAQ,GAAGA,yBAAQ;AAC5B5F,QAAQ,CAAC6F,KAAK,GAAGA,mBAAK;AACtB7F,QAAQ,CAAC8F,UAAU,GAAGA,6BAAU;AAChC9F,QAAQ,CAAC+F,UAAU,GAAGA,6BAAU;AAChC/F,QAAQ,CAACgG,MAAM,GAAGA,qBAAM;AACxBhG,QAAQ,CAACiG,MAAM,GAAGA,qBAAM;AACxBjG,QAAQ,CAAC4E,MAAM,GAAGA,qBAAM;;;"}
1	+ {"version":3,"file":"ListItem.js","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n 'non-interactive' \| 'navigation' \| 'radio' \| 'checkbox' \| 'switch' \| 'button' \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type ListItemProps = {\n /** @default 'li' /\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n /\n Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n /\n disabled?: boolean;\n /\n If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n * NB: This message cannot house more than 1 link or inline button.<br />\n * NB: It must be used together with `disabled` prop and will be disregarded otherwise.\n /\n disabledPromptMessage?: ReactNode;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n /\n Vertical padding of the list item, in pixels.\n * @default 12\n /\n paddingY?: 8 \| 12 \| 16 \| 24;\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n * @default null\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n};\n\n/\n @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n paddingY = 12,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n disabledPromptMessage,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize \| undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt \|\| (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n const isNavigationIndicatorHidden =\n controlType === 'navigation' &&\n Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted, disabledPromptMessage },\n mediaSize,\n isPartiallyInteractive,\n describedByIds,\n }),\n [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt) \|\| (disabled && Boolean(disabledPromptMessage));\n\n / eslint-disable functional/immutable-data /\n if (hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n / eslint-enable functional/immutable-data /\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n 'wds-list-item-paddingY-8': paddingY === 8,\n 'wds-list-item-paddingY-16': paddingY === 16,\n 'wds-list-item-paddingY-24': paddingY === 24,\n disabled: disabled && !isPartiallyInteractive,\n 'disabled--has-prompt-reason':\n !disabledPromptMessage && disabled && !isPartiallyInteractive,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n style={\n {\n '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n } as React.CSSProperties\n }\n >\n {isFullyInteractive && spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n disabledPromptMessage,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span className=\"wds-list-item-titles\">\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n 'wds-list-item-button-control--hasPrompt':\n controlType === 'button' && Boolean(prompt),\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<\n ListItemProps,\n 'subtitle' \| 'additionalInfo' \| 'prompt' \| 'disabled' \| 'disabledPromptMessage' \| 'className'\n >;\n\nfunction View({\n children,\n additionalInfo,\n prompt,\n disabled,\n disabledPromptMessage,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => {\n const resolvedPrompt =\n disabled && disabledPromptMessage && !prompt ? (\n <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n ) : (\n prompt\n );\n\n return (\n <>\n {additionalInfo}\n {resolvedPrompt}\n </>\n );\n };\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps \| undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className=\"wds-list-item-view\">{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","paddingY","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}

package/build/ListItem/ListItem.mjs CHANGED Viewed

@@ -150,6 +150,8 @@ const ListItem = ({
         'wds-list-item-interactive': isFullyInteractive,
         'wds-list-item-partially-interactive': isPartiallyInteractive,
         [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
+        'wds-list-item-paddingY-8': paddingY === 8,
+        'wds-list-item-paddingY-16': paddingY === 16,
         'wds-list-item-paddingY-24': paddingY === 24,
         disabled: disabled && !isPartiallyInteractive,
         'disabled--has-prompt-reason': !disabledPromptMessage && disabled && !isPartiallyInteractive

package/build/ListItem/ListItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.mjs","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n 'non-interactive' \| 'navigation' \| 'radio' \| 'checkbox' \| 'switch' \| 'button' \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type ListItemProps = {\n /** @default 'li' /\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n /\n Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n /\n disabled?: boolean;\n /\n If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n * NB: This message cannot house more than 1 link or inline button.<br />\n * NB: It must be used together with `disabled` prop and will be disregarded otherwise.\n /\n disabledPromptMessage?: ReactNode;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n /\n Vertical padding of the list item, in pixels.\n * @default 12\n /\n paddingY?: 12 \| 24;\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n * @default null\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n};\n\n/\n @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n paddingY = 12,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n disabledPromptMessage,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize \| undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt \|\| (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n const isNavigationIndicatorHidden =\n controlType === 'navigation' &&\n Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted, disabledPromptMessage },\n mediaSize,\n isPartiallyInteractive,\n describedByIds,\n }),\n [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt) \|\| (disabled && Boolean(disabledPromptMessage));\n\n / eslint-disable functional/immutable-data /\n if (hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n / eslint-enable functional/immutable-data /\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n 'wds-list-item-paddingY-24': paddingY === 24,\n disabled: disabled && !isPartiallyInteractive,\n 'disabled--has-prompt-reason':\n !disabledPromptMessage && disabled && !isPartiallyInteractive,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n style={\n {\n '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n } as React.CSSProperties\n }\n >\n {isFullyInteractive && spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n disabledPromptMessage,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span className=\"wds-list-item-titles\">\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n 'wds-list-item-button-control--hasPrompt':\n controlType === 'button' && Boolean(prompt),\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<\n ListItemProps,\n 'subtitle' \| 'additionalInfo' \| 'prompt' \| 'disabled' \| 'disabledPromptMessage' \| 'className'\n >;\n\nfunction View({\n children,\n additionalInfo,\n prompt,\n disabled,\n disabledPromptMessage,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => {\n const resolvedPrompt =\n disabled && disabledPromptMessage && !prompt ? (\n <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n ) : (\n prompt\n );\n\n return (\n <>\n {additionalInfo}\n {resolvedPrompt}\n </>\n );\n };\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps \| undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className=\"wds-list-item-view\">{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","paddingY","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":"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"}
1	+ {"version":3,"file":"ListItem.mjs","sources":["../../src/ListItem/ListItem.tsx"],"sourcesContent":["import {\n useContext,\n useId,\n useMemo,\n useState,\n type PropsWithChildren,\n type ReactNode,\n} from 'react';\nimport { Sentiment, Typography } from '../common';\nimport Body from '../Body';\nimport { AdditionalInfo } from './AdditionalInfo';\nimport { IconButton, type ListItemIconButtonProps } from './IconButton';\nimport { Checkbox, type ListItemCheckboxProps } from './Checkbox';\nimport { Navigation, type ListItemNavigationProps } from './Navigation';\nimport { clsx } from 'clsx';\nimport { Button, type ListItemButtonProps } from './Button';\nimport { Radio, type ListItemRadioProps } from './Radio';\nimport { Switch, type ListItemSwitchProps } from './Switch';\nimport { AvatarLayout } from './AvatarLayout';\nimport { AvatarView } from './AvatarView';\nimport { Image } from './Image';\nimport { Prompt } from './Prompt';\nimport { PrimitiveAnchor, type PrimitiveAnchorProps } from '../Primitives';\nimport {\n ListItemContext,\n type ListItemContextData,\n type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n 'non-interactive' \| 'navigation' \| 'radio' \| 'checkbox' \| 'switch' \| 'button' \| 'icon-button';\n\nexport type ListItemControlProps =\n \| ListItemNavigationProps\n \| ListItemCheckboxProps\n \| ListItemButtonProps\n \| ListItemIconButtonProps\n \| ListItemRadioProps\n \| ListItemSwitchProps;\n\nexport type ListItemProps = {\n /** @default 'li' /\n as?: 'li' \| 'div';\n /\n Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n /\n inverted?: boolean;\n /\n Disables the control and renders the ListItem in greyscale and with slightly decreased opacity.\n /\n disabled?: boolean;\n /\n If set, it'll extend the `disabled` state, overriding existing or injecting uniquely styled prompt with the message provided via this prop. <br />\n * NB: This message cannot house more than 1 link or inline button.<br />\n * NB: It must be used together with `disabled` prop and will be disregarded otherwise.\n /\n disabledPromptMessage?: ReactNode;\n /\n Highlights the list item as an action to be taken or already taken. <br />\n /\n spotlight?: 'active' \| 'inactive';\n /\n Vertical padding of the list item, in pixels.\n * @default 12\n /\n paddingY?: 8 \| 12 \| 16 \| 24;\n title: ReactNode;\n subtitle?: ReactNode;\n /\n Requires `<ListItem.AdditionalInfo />` component as a sole child. <br />\n * Can be only rendered if `subtitle` is also provided.\n /\n additionalInfo?: ReactNode;\n valueTitle?: ReactNode;\n valueSubtitle?: ReactNode;\n /\n Requires one of the following as a sole child: <br />\n * `<ListItem.AvatarView />`,\n * `<ListItem.AvatarLayout />` or\n * `<ListItem.Image />`\n /\n media?: ReactNode;\n /\n Requires one of the following as a sole child: <br/>\n * `<ListItem.Button />`, <br/>\n * `<ListItem.Checkbox />`, <br/>\n * `<ListItem.IconButton />`, <br/>\n * `<ListItem.Navigation />`, <br/>\n * `<ListItem.Radio />`, or\n * `<ListItem.Switch />`\n * @default null\n /\n control?: ReactNode;\n /\n Requires `<ListItem.Prompt />` component as a sole child.\n /\n prompt?: ReactNode;\n className?: string;\n /\n A number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration. E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`. <br />\n * Controls the width ratio of left side content (title and subtitle) to the right side content.\n /\n valueColumnWidth?: number;\n id?: string;\n};\n\n/\n @see [Design documentation](https://docs.wise.design/components/list-item)\n * @see [Storybook documentation](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n /\nexport const ListItem = ({\n as: ListItemElement = 'li',\n title,\n subtitle,\n additionalInfo,\n prompt,\n inverted,\n media,\n spotlight,\n paddingY = 12,\n valueTitle,\n valueSubtitle,\n control = null,\n disabled,\n disabledPromptMessage,\n className,\n valueColumnWidth,\n id,\n}: ListItemProps) => {\n const idPrefix = useId();\n const [controlProps, setControlProps] = useState<ListItemControlProps>({});\n const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');\n const [mediaSize, setMediaSize] = useState<ListItemMediaSize \| undefined>();\n\n const ids: ListItemContextData['ids'] = {\n title: `${idPrefix}_title`,\n ...(subtitle ? { subtitle: `${idPrefix}_subtitle` } : {}),\n ...(valueTitle ? { valueTitle: `${idPrefix}_value-title` } : {}),\n ...(valueSubtitle ? { valueSubtitle: `${idPrefix}_value-subtitle` } : {}),\n control: `${idPrefix}_control`,\n ...(prompt \|\| (disabled && disabledPromptMessage) ? { prompt: `${idPrefix}_prompt` } : {}),\n ...(additionalInfo ? { additionalInfo: `${idPrefix}_additional-info` } : {}),\n };\n\n const isPartiallyInteractive = Boolean(\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n (controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.partiallyInteractive,\n );\n const isFullyInteractive = controlType !== 'non-interactive' && !isPartiallyInteractive;\n const isButtonAsLink =\n (controlType === 'button' \|\| controlType === 'icon-button') &&\n Boolean((controlProps as ListItemButtonProps \| ListItemIconButtonProps)?.href);\n const isNavigationIndicatorHidden =\n controlType === 'navigation' &&\n Boolean((controlProps as ListItemNavigationProps)?.hideIndicator);\n\n const titlesAndValues = [\n inverted ? ids.subtitle : ids.title,\n inverted ? ids.title : ids.subtitle,\n inverted ? ids.valueSubtitle : ids.valueTitle,\n inverted ? ids.valueTitle : ids.valueSubtitle,\n ].join(' ');\n const additionalInfoPrompt = [ids.additionalInfo, ids.prompt].filter(Boolean).join(' ');\n\n const describedByIds = useMemo(() => {\n return isFullyInteractive && !isButtonAsLink\n ? additionalInfoPrompt\n : `${titlesAndValues} ${additionalInfoPrompt}`;\n }, [additionalInfoPrompt, isButtonAsLink, isFullyInteractive, titlesAndValues]);\n const listItemContext = useMemo(\n () => ({\n setControlType,\n setControlProps,\n setMediaSize,\n ids,\n props: { disabled, inverted, disabledPromptMessage },\n mediaSize,\n isPartiallyInteractive,\n describedByIds,\n }),\n [describedByIds, mediaSize, disabled, inverted, disabledPromptMessage, isPartiallyInteractive],\n );\n const gridColumnsStyle = {\n '--wds-list-item-body-left': valueColumnWidth ? `${100 - valueColumnWidth}fr` : '50fr',\n '--wds-list-item-body-right': valueColumnWidth ? `${valueColumnWidth}fr` : '50fr',\n } as React.CSSProperties;\n\n const getFeatureClassName = () => {\n const partials = [];\n const hasMedia = Boolean(media);\n const hasVisibleControl = Boolean(control) && !isNavigationIndicatorHidden;\n const hasInfo = Boolean(additionalInfo);\n const hasPrompt = Boolean(prompt) \|\| (disabled && Boolean(disabledPromptMessage));\n\n / eslint-disable functional/immutable-data /\n if (hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-hasControl');\n }\n\n if (hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-hasMedia-noControl');\n }\n\n if (!hasMedia && hasVisibleControl) {\n partials.push('wds-list-item-noMedia-hasControl');\n }\n\n if (!hasMedia && !hasVisibleControl) {\n partials.push('wds-list-item-noMedia-noControl');\n }\n\n if (hasInfo && hasPrompt) {\n partials.push('wds-list-item-hasInfo-hasPrompt');\n }\n if (hasInfo && !hasPrompt) {\n partials.push('wds-list-item-hasInfo-noPrompt');\n }\n if (!hasInfo && hasPrompt) {\n partials.push('wds-list-item-noInfo-hasPrompt');\n }\n if (!hasInfo && !hasPrompt) {\n partials.push('wds-list-item-noInfo-noPrompt');\n }\n / eslint-enable functional/immutable-data /\n\n return partials.join(' ');\n };\n\n return (\n <ListItemContext.Provider value={listItemContext}>\n <ListItemElement\n className={clsx(\n 'wds-list-item',\n `wds-list-item-${controlType}`,\n getFeatureClassName(),\n {\n 'wds-list-item-interactive': isFullyInteractive,\n 'wds-list-item-partially-interactive': isPartiallyInteractive,\n [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:\n isFullyInteractive && !!spotlight,\n 'wds-list-item-paddingY-8': paddingY === 8,\n 'wds-list-item-paddingY-16': paddingY === 16,\n 'wds-list-item-paddingY-24': paddingY === 24,\n disabled: disabled && !isPartiallyInteractive,\n 'disabled--has-prompt-reason':\n !disabledPromptMessage && disabled && !isPartiallyInteractive,\n },\n className,\n )}\n id={id}\n aria-disabled={disabled}\n style={\n {\n '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,\n } as React.CSSProperties\n }\n >\n {isFullyInteractive && spotlight === 'inactive' && (\n <svg aria-hidden=\"true\" className=\"wds-list-item-spotlight__border\">\n <rect />\n </svg>\n )}\n\n <View\n {...{\n isPartiallyInteractive,\n subtitle,\n additionalInfo,\n disabled,\n disabledPromptMessage,\n prompt,\n controlType,\n controlProps,\n }}\n className={getFeatureClassName()}\n >\n {media && <div className=\"wds-list-item-media\">{media}</div>}\n\n {/ Title + Subtitle + Values - Group /}\n <div\n className=\"wds-list-item-body\"\n style={valueColumnWidth ? gridColumnsStyle : undefined}\n >\n {/ Title + Subtitle + Values - Group */}\n <span className=\"wds-list-item-titles\">\n {(() => {\n const titles = [\n <Body\n key={ids.title}\n id={ids.title}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title\"\n >\n {title}\n </Body>,\n ];\n if (subtitle) {\n titles.push(\n <Body key={ids.subtitle} id={ids.subtitle} className=\"wds-list-item-subtitle\">\n {subtitle}\n </Body>,\n );\n }\n return inverted ? [...titles].reverse() : titles;\n })()}\n </span>\n\n {(valueTitle \|\| valueSubtitle) && (\n <span\n className={clsx('wds-list-item-value', {\n 'flex-column': valueTitle !== undefined \|\| valueSubtitle !== undefined,\n })}\n >\n {(() => {\n const values = [];\n if (valueTitle) {\n values.push(\n <Body\n key={ids.valueTitle}\n id={ids.valueTitle}\n type={Typography.BODY_LARGE_BOLD}\n className=\"wds-list-item-title-value\"\n >\n {valueTitle}\n </Body>,\n );\n }\n if (valueSubtitle) {\n values.push(\n <Body\n key={ids.valueSubtitle}\n id={ids.valueSubtitle}\n className=\"wds-list-item-subtitle-value\"\n >\n {valueSubtitle}\n </Body>,\n );\n }\n return inverted ? [...values].reverse() : values;\n })()}\n </span>\n )}\n </div>\n\n {control === null ? null : (\n <Body\n className={clsx('wds-list-item-control-wrapper', {\n 'wds-list-item-button-control': controlType === 'button',\n 'wds-list-item-button-control--hasPrompt':\n controlType === 'button' && Boolean(prompt),\n })}\n style={\n {\n '--wds-list-item-control-wrapper-height': mediaSize ? `${mediaSize}px` : 'auto',\n } as React.CSSProperties\n }\n >\n {control}\n </Body>\n )}\n </View>\n </ListItemElement>\n </ListItemContext.Provider>\n );\n};\n\ntype ViewProps = PropsWithChildren<{\n isPartiallyInteractive: boolean;\n controlType?: ListItemTypes;\n controlProps?: ListItemControlProps;\n}> &\n Pick<\n ListItemProps,\n 'subtitle' \| 'additionalInfo' \| 'prompt' \| 'disabled' \| 'disabledPromptMessage' \| 'className'\n >;\n\nfunction View({\n children,\n additionalInfo,\n prompt,\n disabled,\n disabledPromptMessage,\n isPartiallyInteractive,\n controlType = 'non-interactive',\n controlProps,\n className = '',\n}: ViewProps) {\n const { ids, describedByIds } = useContext<ListItemContextData>(ListItemContext);\n const isLinkControl = ['navigation'].includes(controlType);\n\n const isHrefProvided = isLinkControl && !!(controlProps as ListItemNavigationProps)?.href;\n\n const renderExtras = () => {\n const resolvedPrompt =\n disabled && disabledPromptMessage && !prompt ? (\n <Prompt sentiment={Sentiment.NEUTRAL}>{disabledPromptMessage}</Prompt>\n ) : (\n prompt\n );\n\n return (\n <>\n {additionalInfo}\n {resolvedPrompt}\n </>\n );\n };\n\n if (isLinkControl && isHrefProvided) {\n return (\n // for link instances of .Navigation, .IconButton, .Button\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <PrimitiveAnchor\n aria-describedby={describedByIds}\n href={(controlProps as ListItemNavigationProps)?.href}\n target={(controlProps as ListItemNavigationProps)?.target}\n className={clsx('wds-list-item-view', {\n 'wds-list-item-control': controlType === 'navigation',\n fullyInteractive: !isPartiallyInteractive,\n })}\n disabled={disabled}\n onClick={(controlProps as PrimitiveAnchorProps \| undefined)?.onClick}\n >\n {children}\n </PrimitiveAnchor>\n\n {renderExtras()}\n </div>\n );\n }\n\n if (isPartiallyInteractive \|\| controlType === 'non-interactive') {\n return (\n <div className={clsx('wds-list-item-gridWrapper', className)}>\n <div className=\"wds-list-item-view\">{children}</div>\n\n {renderExtras()}\n </div>\n );\n }\n\n // for form control instances of .Radio, .Checkbox, .Switch, .Button, .Navigation etc\n // Radio cannot be wrapped in a <fieldset> element to announce it as a group.\n const InputWrapper = controlType === 'radio' ? 'div' : 'fieldset';\n return (\n <InputWrapper className={clsx('wds-list-item-gridWrapper', className)}>\n <label\n htmlFor={ids.control}\n className={clsx('wds-list-item-view', {\n clickable: !disabled,\n fullyInteractive: !isPartiallyInteractive,\n })}\n >\n {children}\n </label>\n\n {renderExtras()}\n </InputWrapper>\n );\n}\n\nListItem.Image = Image;\nListItem.AvatarView = AvatarView;\nListItem.AvatarLayout = AvatarLayout;\nListItem.AdditionalInfo = AdditionalInfo;\nListItem.Checkbox = Checkbox;\nListItem.Radio = Radio;\nListItem.IconButton = IconButton;\nListItem.Navigation = Navigation;\nListItem.Button = Button;\nListItem.Switch = Switch;\nListItem.Prompt = Prompt;\n\nexport default ListItem;\n"],"names":["ListItem","as","ListItemElement","title","subtitle","additionalInfo","prompt","inverted","media","spotlight","paddingY","valueTitle","valueSubtitle","control","disabled","disabledPromptMessage","className","valueColumnWidth","id","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","isNavigationIndicatorHidden","hideIndicator","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasVisibleControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","style","undefined","View","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","resolvedPrompt","Prompt","sentiment","Sentiment","NEUTRAL","_Fragment","PrimitiveAnchor","target","fullyInteractive","onClick","InputWrapper","htmlFor","clickable","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GO,MAAMA,QAAQ,GAAGA,CAAC;EACvBC,EAAE,EAAEC,eAAe,GAAG,IAAI;EAC1BC,KAAK;EACLC,QAAQ;EACRC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA,QAAQ,GAAG,EAAE;EACbC,UAAU;EACVC,aAAa;AACbC,EAAAA,OAAO,GAAG,IAAI;EACdC,QAAQ;EACRC,qBAAqB;EACrBC,SAAS;EACTC,gBAAgB;AAChBC,EAAAA;AAAE,CACY,KAAI;AAClB,EAAA,MAAMC,QAAQ,GAAGC,KAAK,EAAE;EACxB,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAuB,EAAE,CAAC;EAC1E,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAAgB,iBAAiB,CAAC;EAChF,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAGJ,QAAQ,EAAiC;AAE3E,EAAA,MAAMK,GAAG,GAA+B;IACtCzB,KAAK,EAAE,CAAA,EAAGgB,QAAQ,CAAA,MAAA,CAAQ;AAC1B,IAAA,IAAIf,QAAQ,GAAG;MAAEA,QAAQ,EAAE,GAAGe,QAAQ,CAAA,SAAA;KAAa,GAAG,EAAE,CAAC;AACzD,IAAA,IAAIR,UAAU,GAAG;MAAEA,UAAU,EAAE,GAAGQ,QAAQ,CAAA,YAAA;KAAgB,GAAG,EAAE,CAAC;AAChE,IAAA,IAAIP,aAAa,GAAG;MAAEA,aAAa,EAAE,GAAGO,QAAQ,CAAA,eAAA;KAAmB,GAAG,EAAE,CAAC;IACzEN,OAAO,EAAE,CAAA,EAAGM,QAAQ,CAAA,QAAA,CAAU;AAC9B,IAAA,IAAIb,MAAM,IAAKQ,QAAQ,IAAIC,qBAAsB,GAAG;MAAET,MAAM,EAAE,GAAGa,QAAQ,CAAA,OAAA;KAAW,GAAG,EAAE,CAAC;AAC1F,IAAA,IAAId,cAAc,GAAG;MAAEA,cAAc,EAAE,GAAGc,QAAQ,CAAA,gBAAA;KAAoB,GAAG,EAAE;GAC5E;AAED,EAAA,MAAMU,sBAAsB,GAAGC,OAAO,CACpC,CAACN,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,aAAa,KACzDH,YAA8D,EAAEU,oBAAoB,CACtF;AACD,EAAA,MAAMC,kBAAkB,GAAGR,WAAW,KAAK,iBAAiB,IAAI,CAACK,sBAAsB;AACvF,EAAA,MAAMI,cAAc,GAClB,CAACT,WAAW,KAAK,QAAQ,IAAIA,WAAW,KAAK,aAAa,KAC1DM,OAAO,CAAET,YAA8D,EAAEa,IAAI,CAAC;EAChF,MAAMC,2BAA2B,GAC/BX,WAAW,KAAK,YAAY,IAC5BM,OAAO,CAAET,YAAwC,EAAEe,aAAa,CAAC;EAEnE,MAAMC,eAAe,GAAG,CACtB9B,QAAQ,GAAGqB,GAAG,CAACxB,QAAQ,GAAGwB,GAAG,CAACzB,KAAK,EACnCI,QAAQ,GAAGqB,GAAG,CAACzB,KAAK,GAAGyB,GAAG,CAACxB,QAAQ,EACnCG,QAAQ,GAAGqB,GAAG,CAAChB,aAAa,GAAGgB,GAAG,CAACjB,UAAU,EAC7CJ,QAAQ,GAAGqB,GAAG,CAACjB,UAAU,GAAGiB,GAAG,CAAChB,aAAa,CAC9C,CAAC0B,IAAI,CAAC,GAAG,CAAC;EACX,MAAMC,oBAAoB,GAAG,CAACX,GAAG,CAACvB,cAAc,EAAEuB,GAAG,CAACtB,MAAM,CAAC,CAACkC,MAAM,CAACV,OAAO,CAAC,CAACQ,IAAI,CAAC,GAAG,CAAC;AAEvF,EAAA,MAAMG,cAAc,GAAGC,OAAO,CAAC,MAAK;IAClC,OAAOV,kBAAkB,IAAI,CAACC,cAAc,GACxCM,oBAAoB,GACpB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIE,oBAAoB,CAAA,CAAE;EAClD,CAAC,EAAE,CAACA,oBAAoB,EAAEN,cAAc,EAAED,kBAAkB,EAAEK,eAAe,CAAC,CAAC;AAC/E,EAAA,MAAMM,eAAe,GAAGD,OAAO,CAC7B,OAAO;IACLjB,cAAc;IACdH,eAAe;IACfK,YAAY;IACZC,GAAG;AACHgB,IAAAA,KAAK,EAAE;MAAE9B,QAAQ;MAAEP,QAAQ;AAAEQ,MAAAA;KAAuB;IACpDW,SAAS;IACTG,sBAAsB;AACtBY,IAAAA;AACD,GAAA,CAAC,EACF,CAACA,cAAc,EAAEf,SAAS,EAAEZ,QAAQ,EAAEP,QAAQ,EAAEQ,qBAAqB,EAAEc,sBAAsB,CAAC,CAC/F;AACD,EAAA,MAAMgB,gBAAgB,GAAG;IACvB,2BAA2B,EAAE5B,gBAAgB,GAAG,CAAA,EAAG,GAAG,GAAGA,gBAAgB,CAAA,EAAA,CAAI,GAAG,MAAM;AACtF,IAAA,4BAA4B,EAAEA,gBAAgB,GAAG,CAAA,EAAGA,gBAAgB,IAAI,GAAG;GACrD;EAExB,MAAM6B,mBAAmB,GAAGA,MAAK;IAC/B,MAAMC,QAAQ,GAAG,EAAE;AACnB,IAAA,MAAMC,QAAQ,GAAGlB,OAAO,CAACtB,KAAK,CAAC;IAC/B,MAAMyC,iBAAiB,GAAGnB,OAAO,CAACjB,OAAO,CAAC,IAAI,CAACsB,2BAA2B;AAC1E,IAAA,MAAMe,OAAO,GAAGpB,OAAO,CAACzB,cAAc,CAAC;AACvC,IAAA,MAAM8C,SAAS,GAAGrB,OAAO,CAACxB,MAAM,CAAC,IAAKQ,QAAQ,IAAIgB,OAAO,CAACf,qBAAqB,CAAE;AAEjF;IACA,IAAIiC,QAAQ,IAAIC,iBAAiB,EAAE;AACjCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,mCAAmC,CAAC;AACpD,IAAA;AAEA,IAAA,IAAIJ,QAAQ,IAAI,CAACC,iBAAiB,EAAE;AAClCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,kCAAkC,CAAC;AACnD,IAAA;AAEA,IAAA,IAAI,CAACJ,QAAQ,IAAIC,iBAAiB,EAAE;AAClCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,kCAAkC,CAAC;AACnD,IAAA;AAEA,IAAA,IAAI,CAACJ,QAAQ,IAAI,CAACC,iBAAiB,EAAE;AACnCF,MAAAA,QAAQ,CAACK,IAAI,CAAC,iCAAiC,CAAC;AAClD,IAAA;IAEA,IAAIF,OAAO,IAAIC,SAAS,EAAE;AACxBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,iCAAiC,CAAC;AAClD,IAAA;AACA,IAAA,IAAIF,OAAO,IAAI,CAACC,SAAS,EAAE;AACzBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,gCAAgC,CAAC;AACjD,IAAA;AACA,IAAA,IAAI,CAACF,OAAO,IAAIC,SAAS,EAAE;AACzBJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,gCAAgC,CAAC;AACjD,IAAA;AACA,IAAA,IAAI,CAACF,OAAO,IAAI,CAACC,SAAS,EAAE;AAC1BJ,MAAAA,QAAQ,CAACK,IAAI,CAAC,+BAA+B,CAAC;AAChD,IAAA;AACA;AAEA,IAAA,OAAOL,QAAQ,CAACT,IAAI,CAAC,GAAG,CAAC;EAC3B,CAAC;AAED,EAAA,oBACEe,GAAA,CAACC,eAAe,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEb,eAAgB;IAAAc,QAAA,eAC/CC,IAAA,CAACxD,eAAe,EAAA;AACdc,MAAAA,SAAS,EAAE2C,IAAI,CACb,eAAe,EACf,CAAA,cAAA,EAAiBnC,WAAW,CAAA,CAAE,EAC9BsB,mBAAmB,EAAE,EACrB;AACE,QAAA,2BAA2B,EAAEd,kBAAkB;AAC/C,QAAA,qCAAqC,EAAEH,sBAAsB;QAC7D,CAAC,CAAA,gDAAA,EAAmDpB,SAAS,CAAA,CAAE,GAC7DuB,kBAAkB,IAAI,CAAC,CAACvB,SAAS;QACnC,0BAA0B,EAAEC,QAAQ,KAAK,CAAC;QAC1C,2BAA2B,EAAEA,QAAQ,KAAK,EAAE;QAC5C,2BAA2B,EAAEA,QAAQ,KAAK,EAAE;AAC5CI,QAAAA,QAAQ,EAAEA,QAAQ,IAAI,CAACe,sBAAsB;AAC7C,QAAA,6BAA6B,EAC3B,CAACd,qBAAqB,IAAID,QAAQ,IAAI,CAACe;OAC1C,EACDb,SAAS,CACT;AACFE,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,eAAA,EAAeJ,QAAS;AACxB8C,MAAAA,KAAK,EACH;AACE,QAAA,kCAAkC,EAAElC,SAAS,GAAG,CAAA,EAAGA,SAAS,IAAI,GAAGmC;OAEtE;AAAAJ,MAAAA,QAAA,GAEAzB,kBAAkB,IAAIvB,SAAS,KAAK,UAAU,iBAC7C4C,GAAA,CAAA,KAAA,EAAA;AAAK,QAAA,aAAA,EAAY,MAAM;AAACrC,QAAAA,SAAS,EAAC,iCAAiC;QAAAyC,QAAA,eACjEJ,GAAA,CAAA,MAAA,EAAA,EAAK;AACP,OAAK,CACN,eAEDK,IAAA,CAACI,IAAI,EAAA;QAEDjC,sBAAsB;QACtBzB,QAAQ;QACRC,cAAc;QACdS,QAAQ;QACRC,qBAAqB;QACrBT,MAAM;QACNkB,WAAW;QACXH,YAAY;QAEdL,SAAS,EAAE8B,mBAAmB,EAAG;QAAAW,QAAA,EAAA,CAEhCjD,KAAK,iBAAI6C,GAAA,CAAA,KAAA,EAAA;AAAKrC,UAAAA,SAAS,EAAC,qBAAqB;AAAAyC,UAAAA,QAAA,EAAEjD;SAAW,CAAC,eAG5DkD,IAAA,CAAA,KAAA,EAAA;AACE1C,UAAAA,SAAS,EAAC,oBAAoB;AAC9B4C,UAAAA,KAAK,EAAE3C,gBAAgB,GAAG4B,gBAAgB,GAAGgB,SAAU;AAAAJ,UAAAA,QAAA,gBAGvDJ,GAAA,CAAA,MAAA,EAAA;AAAMrC,YAAAA,SAAS,EAAC,sBAAsB;YAAAyC,QAAA,EACnC,CAAC,MAAK;AACL,cAAA,MAAMM,MAAM,GAAG,cACbV,GAAA,CAACW,IAAI,EAAA;gBAEH9C,EAAE,EAAEU,GAAG,CAACzB,KAAM;gBACd8D,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjCnD,gBAAAA,SAAS,EAAC,qBAAqB;AAAAyC,gBAAAA,QAAA,EAE9BtD;AAAK,eAAA,EALDyB,GAAG,CAACzB,KAML,CAAC,CACR;AACD,cAAA,IAAIC,QAAQ,EAAE;AACZ2D,gBAAAA,MAAM,CAACX,IAAI,cACTC,GAAA,CAACW,IAAI,EAAA;kBAAoB9C,EAAE,EAAEU,GAAG,CAACxB,QAAS;AAACY,kBAAAA,SAAS,EAAC,wBAAwB;AAAAyC,kBAAAA,QAAA,EAC1ErD;AAAQ,iBAAA,EADAwB,GAAG,CAACxB,QAET,CAAC,CACR;AACH,cAAA;cACA,OAAOG,QAAQ,GAAG,CAAC,GAAGwD,MAAM,CAAC,CAACK,OAAO,EAAE,GAAGL,MAAM;AAClD,YAAA,CAAC;AAAG,WACA,CAEN,EAAC,CAACpD,UAAU,IAAIC,aAAa,kBAC3ByC,GAAA,CAAA,MAAA,EAAA;AACErC,YAAAA,SAAS,EAAE2C,IAAI,CAAC,qBAAqB,EAAE;AACrC,cAAA,aAAa,EAAEhD,UAAU,KAAKkD,SAAS,IAAIjD,aAAa,KAAKiD;AAC9D,aAAA,CAAE;YAAAJ,QAAA,EAEF,CAAC,MAAK;cACL,MAAMY,MAAM,GAAG,EAAE;AACjB,cAAA,IAAI1D,UAAU,EAAE;AACd0D,gBAAAA,MAAM,CAACjB,IAAI,cACTC,GAAA,CAACW,IAAI,EAAA;kBAEH9C,EAAE,EAAEU,GAAG,CAACjB,UAAW;kBACnBsD,IAAI,EAAEC,UAAU,CAACC,eAAgB;AACjCnD,kBAAAA,SAAS,EAAC,2BAA2B;AAAAyC,kBAAAA,QAAA,EAEpC9C;AAAU,iBAAA,EALNiB,GAAG,CAACjB,UAML,CAAC,CACR;AACH,cAAA;AACA,cAAA,IAAIC,aAAa,EAAE;AACjByD,gBAAAA,MAAM,CAACjB,IAAI,cACTC,GAAA,CAACW,IAAI,EAAA;kBAEH9C,EAAE,EAAEU,GAAG,CAAChB,aAAc;AACtBI,kBAAAA,SAAS,EAAC,8BAA8B;AAAAyC,kBAAAA,QAAA,EAEvC7C;AAAa,iBAAA,EAJTgB,GAAG,CAAChB,aAKL,CAAC,CACR;AACH,cAAA;cACA,OAAOL,QAAQ,GAAG,CAAC,GAAG8D,MAAM,CAAC,CAACD,OAAO,EAAE,GAAGC,MAAM;AAClD,YAAA,CAAC;AAAG,WACA,CACP;SACE,CAEL,EAACxD,OAAO,KAAK,IAAI,GAAG,IAAI,gBACtBwC,GAAA,CAACW,IAAI,EAAA;AACHhD,UAAAA,SAAS,EAAE2C,IAAI,CAAC,+BAA+B,EAAE;YAC/C,8BAA8B,EAAEnC,WAAW,KAAK,QAAQ;AACxD,YAAA,yCAAyC,EACvCA,WAAW,KAAK,QAAQ,IAAIM,OAAO,CAACxB,MAAM;AAC7C,WAAA,CAAE;AACHsD,UAAAA,KAAK,EACH;AACE,YAAA,wCAAwC,EAAElC,SAAS,GAAG,CAAA,EAAGA,SAAS,IAAI,GAAG;WAE5E;AAAA+B,UAAAA,QAAA,EAEA5C;AAAO,SACJ,CACP;AAAA,OACG,CACR;KAAiB;AACnB,GAA0B,CAAC;AAE/B;AAYA,SAASiD,IAAIA,CAAC;EACZL,QAAQ;EACRpD,cAAc;EACdC,MAAM;EACNQ,QAAQ;EACRC,qBAAqB;EACrBc,sBAAsB;AACtBL,EAAAA,WAAW,GAAG,iBAAiB;EAC/BH,YAAY;AACZL,EAAAA,SAAS,GAAG;AAAE,CACJ,EAAA;EACV,MAAM;IAAEY,GAAG;AAAEa,IAAAA;AAAc,GAAE,GAAG6B,UAAU,CAAsBhB,eAAe,CAAC;EAChF,MAAMiB,aAAa,GAAG,CAAC,YAAY,CAAC,CAACC,QAAQ,CAAChD,WAAW,CAAC;EAE1D,MAAMiD,cAAc,GAAGF,aAAa,IAAI,CAAC,CAAElD,YAAwC,EAAEa,IAAI;EAEzF,MAAMwC,YAAY,GAAGA,MAAK;IACxB,MAAMC,cAAc,GAClB7D,QAAQ,IAAIC,qBAAqB,IAAI,CAACT,MAAM,gBAC1C+C,GAAA,CAACuB,MAAM,EAAA;MAACC,SAAS,EAAEC,SAAS,CAACC,OAAQ;AAAAtB,MAAAA,QAAA,EAAE1C;KAA8B,CAAC,GAEtET,MACD;IAEH,oBACEoD,IAAA,CAAAsB,QAAA,EAAA;MAAAvB,QAAA,EAAA,CACGpD,cAAc,EACdsE,cAAc;AAAA,KACjB,CAAG;EAEP,CAAC;EAED,IAAIJ,aAAa,IAAIE,cAAc,EAAE;AACnC,IAAA;AAAA;AACE;MACAf,IAAA,CAAA,KAAA,EAAA;AAAK1C,QAAAA,SAAS,EAAE2C,IAAI,CAAC,2BAA2B,EAAE3C,SAAS,CAAE;QAAAyC,QAAA,EAAA,cAC3DJ,GAAA,CAAC4B,eAAe,EAAA;AACd,UAAA,kBAAA,EAAkBxC,cAAe;UACjCP,IAAI,EAAGb,YAAwC,EAAEa,IAAK;UACtDgD,MAAM,EAAG7D,YAAwC,EAAE6D,MAAO;AAC1DlE,UAAAA,SAAS,EAAE2C,IAAI,CAAC,oBAAoB,EAAE;YACpC,uBAAuB,EAAEnC,WAAW,KAAK,YAAY;AACrD2D,YAAAA,gBAAgB,EAAE,CAACtD;AACpB,WAAA,CAAE;AACHf,UAAAA,QAAQ,EAAEA,QAAS;UACnBsE,OAAO,EAAG/D,YAAiD,EAAE+D,OAAQ;AAAA3B,UAAAA,QAAA,EAEpEA;AAAQ,SACM,CAEjB,EAACiB,YAAY,EAAE;OACZ;AAAC;AAEV,EAAA;AAEA,EAAA,IAAI7C,sBAAsB,IAAIL,WAAW,KAAK,iBAAiB,EAAE;AAC/D,IAAA,oBACEkC,IAAA,CAAA,KAAA,EAAA;AAAK1C,MAAAA,SAAS,EAAE2C,IAAI,CAAC,2BAA2B,EAAE3C,SAAS,CAAE;AAAAyC,MAAAA,QAAA,gBAC3DJ,GAAA,CAAA,KAAA,EAAA;AAAKrC,QAAAA,SAAS,EAAC,oBAAoB;AAAAyC,QAAAA,QAAA,EAAEA;AAAQ,OAAM,CAEnD,EAACiB,YAAY,EAAE;AAAA,KACZ,CAAC;AAEV,EAAA;AAEA;AACA;EACA,MAAMW,YAAY,GAAG7D,WAAW,KAAK,OAAO,GAAG,KAAK,GAAG,UAAU;EACjE,oBACEkC,IAAA,CAAC2B,YAAY,EAAA;AAACrE,IAAAA,SAAS,EAAE2C,IAAI,CAAC,2BAA2B,EAAE3C,SAAS,CAAE;AAAAyC,IAAAA,QAAA,gBACpEJ,GAAA,CAAA,OAAA,EAAA;MACEiC,OAAO,EAAE1D,GAAG,CAACf,OAAQ;AACrBG,MAAAA,SAAS,EAAE2C,IAAI,CAAC,oBAAoB,EAAE;QACpC4B,SAAS,EAAE,CAACzE,QAAQ;AACpBqE,QAAAA,gBAAgB,EAAE,CAACtD;AACpB,OAAA,CAAE;AAAA4B,MAAAA,QAAA,EAEFA;AAAQ,KACJ,CAEP,EAACiB,YAAY,EAAE;AAAA,GACH,CAAC;AAEnB;AAEA1E,QAAQ,CAACwF,KAAK,GAAGA,KAAK;AACtBxF,QAAQ,CAACyF,UAAU,GAAGA,UAAU;AAChCzF,QAAQ,CAAC0F,YAAY,GAAGA,YAAY;AACpC1F,QAAQ,CAAC2F,cAAc,GAAGA,cAAc;AACxC3F,QAAQ,CAAC4F,QAAQ,GAAGA,QAAQ;AAC5B5F,QAAQ,CAAC6F,KAAK,GAAGA,KAAK;AACtB7F,QAAQ,CAAC8F,UAAU,GAAGA,UAAU;AAChC9F,QAAQ,CAAC+F,UAAU,GAAGA,UAAU;AAChC/F,QAAQ,CAACgG,MAAM,GAAGA,MAAM;AACxBhG,QAAQ,CAACiG,MAAM,GAAGA,MAAM;AACxBjG,QAAQ,CAAC4E,MAAM,GAAGA,MAAM;;"}

package/build/main.css CHANGED Viewed

@@ -29376,6 +29376,14 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;

package/build/styles/ListItem/ListItem.css CHANGED Viewed

@@ -391,6 +391,14 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;

package/build/styles/main.css CHANGED Viewed

@@ -29376,6 +29376,14 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;

package/build/types/ListItem/ListItem.d.ts CHANGED Viewed

@@ -32,7 +32,7 @@ export type ListItemProps = {
      * Vertical padding of the list item, in pixels.
      * @default 12
      */
-    paddingY?: 12 | 24;
+    paddingY?: 8 | 12 | 16 | 24;
     title: ReactNode;
     subtitle?: ReactNode;
     /**

package/build/types/ListItem/ListItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACvB,iBAAiB,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC;~~IACnB~~,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;oNAkBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CA0Of~~,CAAC;AA6GF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAClE,OAAO,EAAc,KAAK,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAExE,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAS,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAU,KAAK,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY5D,MAAM,MAAM,aAAa,GACvB,iBAAiB,GAAG,YAAY,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAC;AAEhG,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GACvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,aAAa,GAAG;IAC1B,oBAAoB;IACpB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ;oNAkBlB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4Of,CAAC;AA6GF,eAAe,QAAQ,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-2f9c87f",
+  "version": "0.0.0-experimental-078341d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/ListItem/ListItem.css CHANGED Viewed

@@ -391,6 +391,14 @@
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;

package/src/ListItem/ListItem.less CHANGED Viewed

@@ -11,6 +11,14 @@
   padding: var(--size-12) 0;
   container-type: inline-size;
+  &-paddingY-8 {
+    padding: var(--size-8) 0;
+  }
+  &-paddingY-16 {
+    padding: var(--size-16) 0;
+  }
   &-paddingY-24 {
     padding: var(--size-24) 0;
   }

package/src/ListItem/ListItem.test.tsx CHANGED Viewed

@@ -1516,16 +1516,36 @@ describe('ListItem', () => {
   describe('paddingY', () => {
     it('uses the default vertical padding when not set', () => {
       render(<ListItem title="Test Title" />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+    it('uses the smaller vertical padding when set to 8', () => {
+      render(<ListItem title="Test Title" paddingY={8} />);
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
       expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
     });
     it('uses the default vertical padding when set to 12', () => {
       render(<ListItem title="Test Title" paddingY={12} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
+    });
+    it('uses the medium vertical padding when set to 16', () => {
+      render(<ListItem title="Test Title" paddingY={16} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-16');
       expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-24');
     });
     it('uses the larger vertical padding when set to 24', () => {
       render(<ListItem title="Test Title" paddingY={24} />);
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-8');
+      expect(screen.getByRole('listitem')).not.toHaveClass('wds-list-item-paddingY-16');
       expect(screen.getByRole('listitem')).toHaveClass('wds-list-item-paddingY-24');
     });
   });

package/src/ListItem/ListItem.tsx CHANGED Viewed

@@ -63,7 +63,7 @@ export type ListItemProps = {
    * Vertical padding of the list item, in pixels.
    * @default 12
    */
-  paddingY?: 12 | 24;
+  paddingY?: 8 | 12 | 16 | 24;
   title: ReactNode;
   subtitle?: ReactNode;
   /**
@@ -238,6 +238,8 @@ export const ListItem = ({
             'wds-list-item-partially-interactive': isPartiallyInteractive,
             [`wds-list-item-spotlight wds-list-item-spotlight-${spotlight}`]:
               isFullyInteractive && !!spotlight,
+            'wds-list-item-paddingY-8': paddingY === 8,
+            'wds-list-item-paddingY-16': paddingY === 16,
             'wds-list-item-paddingY-24': paddingY === 24,
             disabled: disabled && !isPartiallyInteractive,
             'disabled--has-prompt-reason':

package/src/ListItem/_stories/ListItem.layout.test.story.tsx CHANGED Viewed

@@ -72,7 +72,7 @@ export const PaddingY: Story = {
     };
     return (
       <List>
-        {([12, 24] as const).map((paddingY) => (
+        {([8, 12, 16, 24] as const).map((paddingY) => (
           <Fragment key={paddingY}>
             <ListItem {...props} paddingY={paddingY} />
             <ListItem {...props} paddingY={paddingY} spotlight="active" />

package/src/ListItem/_stories/ListItem.story.tsx CHANGED Viewed

@@ -76,7 +76,7 @@ export default {
     },
     paddingY: {
       control: 'radio',
-      options: ['unset (undefined)', 12, 24],
+      options: ['unset (undefined)', 8, 12, 16, 24],
       mapping: {
         'unset (undefined)': undefined,
       },

package/src/main.css CHANGED Viewed

@@ -29376,6 +29376,14 @@ button.np-option {
   padding-inline: 0;
   container-type: inline-size;
 }
+.wds-list-item-paddingY-8 {
+  padding-block: var(--size-8);
+  padding-inline: 0;
+}
+.wds-list-item-paddingY-16 {
+  padding-block: var(--size-16);
+  padding-inline: 0;
+}
 .wds-list-item-paddingY-24 {
   padding-block: var(--size-24);
   padding-inline: 0;