@transferwise/components 46.165.5 → 46.167.0

package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInputPopover.mjs","sources":["../../../../src/Inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/PreventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: SelectInputPopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: FLOATING_PADDING, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: FLOATING_PADDING,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n      {/* eslint-enable react-hooks/refs */}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  {/* eslint-enable react-hooks/refs */}\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body\">{title}</h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default\">{children}</div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}
+{"version":3,"file":"SelectInputPopover.mjs","sources":["../../../../src/Inputs/SelectInput/Popover/SelectInputPopover.tsx"],"sourcesContent":["import {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  type Placement,\n  shift,\n  size as floatingSize,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { Transition } from '@headlessui/react';\nimport { FocusScope } from '@react-aria/focus';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\n\nimport { PreventScroll } from '../../../common/PreventScroll/PreventScroll';\n\nexport interface SelectInputPopoverProps {\n  placement?: Placement;\n  open: boolean;\n  renderTrigger: (args: {\n    ref: React.RefCallback<Element>;\n    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {\n      [key: string]: unknown;\n    };\n  }) => React.ReactNode;\n  title?: string;\n  size?: 'md' | 'lg';\n  padding?: 'none' | 'md';\n  children?: React.ReactNode;\n  onClose?: () => void;\n  onCloseEnd?: () => void;\n}\n\nconst FLOATING_PADDING = 16;\n\nexport function SelectInputPopover({\n  placement,\n  open,\n  renderTrigger,\n  title,\n  size = 'md',\n  padding = 'md',\n  children,\n  onClose,\n  onCloseEnd,\n}: SelectInputPopoverProps) {\n  const { refs, floatingStyles, context } = useFloating<Element>({\n    strategy: 'fixed',\n    placement,\n    middleware: [\n      offset(8),\n      flip({ padding: FLOATING_PADDING, crossAxis: false }),\n      shift(),\n      floatingSize({\n        padding: FLOATING_PADDING,\n        apply: ({ elements, rects, availableHeight }) => {\n          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);\n          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n    open,\n    onOpenChange: (value) => {\n      if (!value) {\n        onClose?.();\n      }\n    },\n  });\n\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);\n\n  const [floatingKey, setFloatingKey] = useState(0);\n\n  const { theme, screenMode } = useTheme();\n\n  return (\n    <>\n      {open ? <PreventScroll /> : null}\n      {/* eslint-disable react-hooks/refs -- setReference is a callback ref from floating-ui, safe to pass during render */}\n      {renderTrigger({\n        ref: refs.setReference,\n        getInteractionProps: getReferenceProps,\n      })}\n      {/* eslint-enable react-hooks/refs */}\n\n      <FloatingPortal>\n        <ThemeProvider theme=\"personal\" screenMode={theme === 'personal' ? screenMode : 'light'}>\n          <Transition\n            as=\"div\"\n            show={open}\n            leave=\"transition-opacity\"\n            leaveTo=\"opacity-0\"\n            beforeEnter={() => {\n              setFloatingKey((prev) => prev + 1);\n            }}\n            afterLeave={onCloseEnd}\n          >\n            <FocusScope>\n              <FloatingFocusManager context={context}>\n                {/* eslint-disable react-hooks/refs -- setFloating is a callback ref from floating-ui, safe to pass during render */}\n                <div\n                  key={floatingKey} // Force inner state invalidation on open\n                  ref={refs.setFloating}\n                  className={clsx('np-popover-v2-container', {\n                    'np-popover-v2-container--size-md': size === 'md',\n                    'np-popover-v2-container--size-lg': size === 'lg',\n                  })}\n                  style={floatingStyles}\n                  {...getFloatingProps()}\n                >\n                  {/* eslint-enable react-hooks/refs */}\n                  <div\n                    className={clsx('np-popover-v2', title && 'np-popover-v2--has-title', {\n                      'np-popover-v2--padding-md': padding === 'md',\n                    })}\n                  >\n                    {title ? (\n                      <h2 className=\"np-popover-v2-title np-text-title-body wds-text-title-body\">\n                        {title}\n                      </h2>\n                    ) : null}\n                    <div className=\"np-popover-v2-content np-text-body-default wds-text-body-default\">\n                      {children}\n                    </div>\n                  </div>\n                </div>\n              </FloatingFocusManager>\n            </FocusScope>\n          </Transition>\n        </ThemeProvider>\n      </FloatingPortal>\n    </>\n  );\n}\n"],"names":["FLOATING_PADDING","SelectInputPopover","placement","open","renderTrigger","title","size","padding","children","onClose","onCloseEnd","refs","floatingStyles","context","useFloating","strategy","middleware","offset","flip","crossAxis","shift","floatingSize","apply","elements","rects","availableHeight","floating","style","setProperty","reference","width","whileElementsMounted","autoUpdate","onOpenChange","value","dismiss","useDismiss","role","useRole","getReferenceProps","getFloatingProps","useInteractions","floatingKey","setFloatingKey","useState","theme","screenMode","useTheme","_jsxs","_Fragment","_jsx","PreventScroll","ref","setReference","getInteractionProps","FloatingPortal","ThemeProvider","Transition","as","show","leave","leaveTo","beforeEnter","prev","afterLeave","FocusScope","FloatingFocusManager","setFloating","className","clsx"],"mappings":"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"}

package/build/Label/Label.js

@@ -19,7 +19,7 @@ const Label = /*#__PURE__*/React.forwardRef(({
     ref: ref,
     id: id,
     htmlFor: htmlFor,
-    className: clsx.clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
+    className: clsx.clsx('np-label d-flex flex-column np-text-body-default-bold wds-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 });

package/build/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, children, htmlFor, id }: LabelProps, ref) => {\n    return (\n      <label\n        ref={ref}\n        id={id}\n        htmlFor={htmlFor}\n        className={clsx(\n          'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n          className,\n        )}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      {children}\n      <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n        {formatMessage(messages.optionalLabel)}\n      </Body>\n    </div>\n  );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n  return children ? (\n    <Body id={id} className={clsx('text-secondary', className)}>\n      {children}\n    </Body>\n  ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,gBAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,SAAI,CACb,0EAA0E,EAC1EN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,iBAAO,EAAE;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,cAAA,CAACM,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,sBAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,cAAA,CAACM,YAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}
+{"version":3,"file":"Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, children, htmlFor, id }: LabelProps, ref) => {\n    return (\n      <label\n        ref={ref}\n        id={id}\n        htmlFor={htmlFor}\n        className={clsx(\n          'np-label d-flex flex-column np-text-body-default-bold wds-text-body-default-bold text-primary m-b-0',\n          className,\n        )}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      {children}\n      <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n        {formatMessage(messages.optionalLabel)}\n      </Body>\n    </div>\n  );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n  return children ? (\n    <Body id={id} className={clsx('text-secondary', className)}>\n      {children}\n    </Body>\n  ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,gBAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,cAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,SAAI,CACb,qGAAqG,EACrGN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,iBAAO,EAAE;AACnC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,cAAA,CAACM,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,sBAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,cAAA,CAACM,YAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}

package/build/Label/Label.mjs

@@ -15,7 +15,7 @@ const Label = /*#__PURE__*/forwardRef(({
     ref: ref,
     id: id,
     htmlFor: htmlFor,
-    className: clsx('np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0', className),
+    className: clsx('np-label d-flex flex-column np-text-body-default-bold wds-text-body-default-bold text-primary m-b-0', className),
     children: children
   });
 });

package/build/Label/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, children, htmlFor, id }: LabelProps, ref) => {\n    return (\n      <label\n        ref={ref}\n        id={id}\n        htmlFor={htmlFor}\n        className={clsx(\n          'np-label d-flex flex-column np-text-body-default-bold text-primary m-b-0',\n          className,\n        )}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      {children}\n      <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n        {formatMessage(messages.optionalLabel)}\n      </Body>\n    </div>\n  );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n  return children ? (\n    <Body id={id} className={clsx('text-secondary', className)}>\n      {children}\n    </Body>\n  ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,UAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,IAAI,CACb,0EAA0E,EAC1EN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,OAAO,EAAE;AACnC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,GAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,QAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,GAAA,CAACM,IAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}
+{"version":3,"file":"Label.mjs","sources":["../../src/Label/Label.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport messages from './Label.messages';\nimport { useIntl } from 'react-intl';\nimport Body from '../Body';\nimport { CommonProps } from '../common';\nimport { forwardRef, PropsWithChildren } from 'react';\n\nexport type LabelProps = {\n  id?: string;\n  htmlFor?: string;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/**\n * Avoid using `<Label>` component directly\n * it's for edge cases when `<Field />` isn't suitable for some reasons.\n *\n * Example:\n * ```\n * <Field label={..} description={..} required={..}>..</Field>\n * ```\n */\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, children, htmlFor, id }: LabelProps, ref) => {\n    return (\n      <label\n        ref={ref}\n        id={id}\n        htmlFor={htmlFor}\n        className={clsx(\n          'np-label d-flex flex-column np-text-body-default-bold wds-text-body-default-bold text-primary m-b-0',\n          className,\n        )}\n      >\n        {children}\n      </label>\n    );\n  },\n);\n\nexport type LabelOptionalProps = PropsWithChildren<CommonProps>;\n\nconst Optional = function Optional({ children, className }: LabelOptionalProps) {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      {children}\n      <Body as=\"span\" className={clsx('text-secondary', 'm-l-1', className)}>\n        {formatMessage(messages.optionalLabel)}\n      </Body>\n    </div>\n  );\n};\n\nexport type LabelDescriptionProps = PropsWithChildren<CommonProps> & { id?: string };\n\nconst Description = function Description({ id, children, className }: LabelDescriptionProps) {\n  return children ? (\n    <Body id={id} className={clsx('text-secondary', className)}>\n      {children}\n    </Body>\n  ) : null;\n};\n\n// eslint-disable-next-line functional/immutable-data\nconst LabelNamespace = Object.assign(Label, { Optional, Description });\n\nLabelNamespace.displayName = 'Label';\nexport default LabelNamespace;\n"],"names":["Label","forwardRef","className","children","htmlFor","id","ref","_jsx","clsx","Optional","formatMessage","useIntl","_jsxs","Body","as","messages","optionalLabel","Description","LabelNamespace","Object","assign","displayName"],"mappings":";;;;;;;AAuBA,MAAMA,KAAK,gBAAGC,UAAU,CACtB,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;CAAgB,EAAEC,GAAG,KAAI;AACxD,EAAA,oBACEC,GAAA,CAAA,OAAA,EAAA;AACED,IAAAA,GAAG,EAAEA,GAAI;AACTD,IAAAA,EAAE,EAAEA,EAAG;AACPD,IAAAA,OAAO,EAAEA,OAAQ;AACjBF,IAAAA,SAAS,EAAEM,IAAI,CACb,qGAAqG,EACrGN,SAAS,CACT;AAAAC,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ,CAAC,CACF;AAID,MAAMM,QAAQ,GAAG,SAASA,QAAQA,CAAC;EAAEN,QAAQ;AAAED,EAAAA;AAAS,CAAsB,EAAA;EAC5E,MAAM;AAAEQ,IAAAA;GAAe,GAAGC,OAAO,EAAE;AACnC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAAT,IAAAA,QAAA,EAAA,CACGA,QAAQ,eACTI,GAAA,CAACM,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACZ,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAEN,SAAS,CAAE;AAAAC,MAAAA,QAAA,EACnEO,aAAa,CAACK,QAAQ,CAACC,aAAa;AAAC,KAClC,CACR;AAAA,GAAK,CAAC;AAEV,CAAC;AAID,MAAMC,WAAW,GAAG,SAASA,WAAWA,CAAC;EAAEZ,EAAE;EAAEF,QAAQ;AAAED,EAAAA;AAAS,CAAyB,EAAA;AACzF,EAAA,OAAOC,QAAQ,gBACbI,GAAA,CAACM,IAAI,EAAA;AAACR,IAAAA,EAAE,EAAEA,EAAG;AAACH,IAAAA,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;AAAAC,IAAAA,QAAA,EACxDA;GACG,CAAC,GACL,IAAI;AACV,CAAC;AAED;AACA,MAAMe,cAAc,GAAGC,MAAM,CAACC,MAAM,CAACpB,KAAK,EAAE;EAAES,QAAQ;AAAEQ,EAAAA;AAAW,CAAE;AAErEC,cAAc,CAACG,WAAW,GAAG,OAAO;;"}

package/build/ListItem/ListItem.js

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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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"}
+{"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":"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"}

package/build/Stepper/Stepper.js

@@ -73,7 +73,8 @@ const Stepper = ({
       type: "button",
       className: "btn-unstyled tw-stepper__step-label",
       onClick: () => clickable && step.onClick?.(),
-      children: /*#__PURE__*/jsxRuntime.jsx("small", {
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "wds-text-body-default",
         children: step.label
       })
     }) : /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -81,7 +82,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default wds-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`

package/build/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <span className=\"wds-text-body-default\">{step.label}</span>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active\n            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'\n            : 'np-text-body-default wds-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,SAASA,KAAKA,CAACC,IAAY,EAAEC,EAAU,EAAEC,KAAa,EAAA;AACpD,EAAA,OAAOC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACJ,EAAE,EAAEC,KAAK,CAAC,EAAEF,IAAI,CAAC;AAC5C;AAeA;;;AAGG;AACH,MAAMM,OAAO,GAAGA,CAAC;EAAEC,KAAK;AAAEC,EAAAA,UAAU,GAAG,CAAC;EAAEC,SAAS;AAAEC,EAAAA;AAAM,CAAgB,KAAI;EAC7E,MAAM;AAAEC,IAAAA;GAAO,GAAGC,yBAAY,EAAE;AAEhC,EAAA,IAAIL,KAAK,CAACM,MAAM,KAAK,CAAC,EAAE;AACtB,IAAA,OAAO,IAAI;AACb,EAAA;AAEA,EAAA,MAAMC,eAAe,GAAGf,KAAK,CAAC,CAAC,EAAEQ,KAAK,CAACM,MAAM,GAAG,CAAC,EAAEL,UAAU,CAAC;EAC9D,MAAMO,cAAc,GAAG,CAAC,IAAIR,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;EAC7C,MAAMG,mBAAmB,GAAGF,eAAe,IAAIP,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;EAEhE,MAAMI,gBAAgB,GAAGA,MAAa;IACpC,IAAID,mBAAmB,KAAK,CAAC,EAAE;AAC7B,MAAA,OAAO,IAAI;AACb,IAAA;AACA;;;;AAIG;AACH,IAAA,OAAO,CAAA,KAAA,EAAQA,mBAAmB,GAAG,GAAG,CAAA,uEAAA,CAAyE;EACnH,CAAC;AAED,EAAA,MAAME,UAAU,GAAGA,CAACC,IAAU,EAAEC,KAAa,KAAI;AAC/C,IAAA,MAAMC,MAAM,GAAGD,KAAK,KAAKN,eAAe;AACxC,IAAA,MAAMQ,SAAS,GAAGH,IAAI,CAACI,OAAO,IAAI,CAACF,MAAM;AAEzC,IAAA,MAAMG,WAAW,GAAGF,SAAS,gBAC3BG,cAAA,CAAA,QAAA,EAAA;AACEC,MAAAA,IAAI,EAAC,QAAQ;AACbjB,MAAAA,SAAS,EAAC,qCAAqC;MAC/Cc,OAAO,EAAEA,MAAMD,SAAS,IAAIH,IAAI,CAACI,OAAO,IAAK;AAAAI,MAAAA,QAAA,eAE7CF,cAAA,CAAA,MAAA,EAAA;AAAMhB,QAAAA,SAAS,EAAC,uBAAuB;QAAAkB,QAAA,EAAER,IAAI,CAACS;OAAY;KACpD,CAAC,gBAETH,cAAA,CAAA,MAAA,EAAA;AAAMhB,MAAAA,SAAS,EAAC,wBAAwB;MAAAkB,QAAA,EAAER,IAAI,CAACS;AAAK,KAAO,CAC5D;AAED,IAAA,oBACEH,cAAA,CAAA,IAAA,EAAA;MAEEhB,SAAS,EAAEoB,SAAI,CACb,WAAW,EACX,kBAAkB,EAClBR,MAAM,GACF,+EAA+E,GAC/E,4CAA4C,EAChDC,SAAS,IAAI,6BAA6B,EAC1CH,IAAI,CAACW,UAAU,IAAI,+BAA+B,CAClD;AACF,MAAA,cAAA,EAAcT,MAAM,GAAG,MAAM,GAAG,KAAM;MACtCU,KAAK,EACHpB,KAAK,GACD;AAAEqB,QAAAA,KAAK,EAAE,CAAA,EAAGZ,KAAK,GAAGL,cAAc,GAAG,GAAG,CAAA,CAAA;AAAG,OAAE,GAC7C;AAAEkB,QAAAA,IAAI,EAAE,CAAA,EAAGb,KAAK,GAAGL,cAAc,GAAG,GAAG,CAAA,CAAA;OAC5C;AAAAY,MAAAA,QAAA,EAEAR,IAAI,CAACW,UAAU,IAAI,CAACI,6BAAa,EAAE,gBAClCT,cAAA,CAACU,eAAO,EAAA;QAACC,QAAQ,EAAEC,iBAAQ,CAACC,MAAO;QAACV,KAAK,EAAET,IAAI,CAACW,UAAW;AAAAH,QAAAA,QAAA,EACxDH;AAAW,OACL,CAAC,GAEVA;AACD,KAAA,EAvBIJ,KAwBH,CAAC;EAET,CAAC;AAED,EAAA,oBACEmB,eAAA,CAAA,KAAA,EAAA;AAAK9B,IAAAA,SAAS,EAAEoB,SAAI,CAAC,YAAY,EAAEpB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaC,MAAO;AAAAiB,IAAAA,QAAA,gBACjEF,cAAA,CAAA,KAAA,EAAA;AAAKhB,MAAAA,SAAS,EAAC,UAAU;AAAAkB,MAAAA,QAAA,eACvBF,cAAA,CAAA,KAAA,EAAA;AACEhB,QAAAA,SAAS,EAAC,cAAc;AACxBsB,QAAAA,KAAK,EAAE;UAAES,KAAK,EAAEvB,gBAAgB;SAAK;QACrC,aAAA,EAAY;OAAc;KAEzB,CACL,eAAAQ,cAAA,CAAA,IAAA,EAAA;AAAIhB,MAAAA,SAAS,EAAC,8BAA8B;AAAAkB,MAAAA,QAAA,EAAEpB,KAAK,CAACkC,GAAG,CAACvB,UAAU;AAAC,KAAK,CAC1E;AAAA,GAAK,CAAC;AAEV;;"}

package/build/Stepper/Stepper.mjs

@@ -69,7 +69,8 @@ const Stepper = ({
       type: "button",
       className: "btn-unstyled tw-stepper__step-label",
       onClick: () => clickable && step.onClick?.(),
-      children: /*#__PURE__*/jsx("small", {
+      children: /*#__PURE__*/jsx("span", {
+        className: "wds-text-body-default",
         children: step.label
       })
     }) : /*#__PURE__*/jsx("span", {
@@ -77,7 +78,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsx("li", {
-      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default wds-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`

package/build/Stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <span className=\"wds-text-body-default\">{step.label}</span>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active\n            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'\n            : 'np-text-body-default wds-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/Table/Header/TableHeader.js

@@ -37,7 +37,7 @@ const TableHeader = ({
     }
     // If headers are empty, we still should render empty headers to keep visual consistency
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-table-header-content np-text-body-default-bold",
+      className: "np-table-header-content np-text-body-default-bold wds-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

package/build/Table/Header/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n  header?: string;\n  className?: string;\n  alignment?: 'left' | 'right';\n  status?: 'error';\n  width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n  isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n  header,\n  className,\n  alignment = 'left',\n  status,\n  width,\n  isActionHeader = false,\n}: TableHeaderProps) => {\n  const { formatMessage } = useIntl();\n\n  const getHeaderContent = () => {\n    if (isActionHeader) {\n      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n      return (\n        <TableStatusText\n          text={formatMessage(messages.actionHeader)}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n        />\n      );\n    }\n\n    if (header) {\n      return (\n        <TableStatusText\n          text={header}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n          status={status}\n          typography=\"default-bold\"\n        />\n      );\n    }\n\n    // If headers are empty, we still should render empty headers to keep visual consistency\n    return (\n      <div\n        className=\"np-table-header-content np-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\n      </div>\n    );\n  };\n\n  return (\n    <th\n      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n        'np-table-header--error': status === 'error',\n        'np-table-header--action': isActionHeader,\n      })}\n      style={{ minWidth: width, width }}\n    >\n      {getHeaderContent()}\n    </th>\n  );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n  header?: string;\n  className?: string;\n  alignment?: 'left' | 'right';\n  status?: 'error';\n  width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n  isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n  header,\n  className,\n  alignment = 'left',\n  status,\n  width,\n  isActionHeader = false,\n}: TableHeaderProps) => {\n  const { formatMessage } = useIntl();\n\n  const getHeaderContent = () => {\n    if (isActionHeader) {\n      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n      return (\n        <TableStatusText\n          text={formatMessage(messages.actionHeader)}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n        />\n      );\n    }\n\n    if (header) {\n      return (\n        <TableStatusText\n          text={header}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n          status={status}\n          typography=\"default-bold\"\n        />\n      );\n    }\n\n    // If headers are empty, we still should render empty headers to keep visual consistency\n    return (\n      <div\n        className=\"np-table-header-content np-text-body-default-bold wds-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\n      </div>\n    );\n  };\n\n  return (\n    <th\n      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n        'np-table-header--error': status === 'error',\n        'np-table-header--action': isActionHeader,\n      })}\n      style={{ minWidth: width, width }}\n    >\n      {getHeaderContent()}\n    </th>\n  );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,8EAA8E;AACxF,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}

package/build/Table/Header/TableHeader.mjs

@@ -33,7 +33,7 @@ const TableHeader = ({
     }
     // If headers are empty, we still should render empty headers to keep visual consistency
     return /*#__PURE__*/jsx("div", {
-      className: "np-table-header-content np-text-body-default-bold",
+      className: "np-table-header-content np-text-body-default-bold wds-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });