@transferwise/components 0.0.0-experimental-29d0f94 → 0.0.0-experimental-4b1de0a

package/build/listItem/ListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.mjs","sources":["../../src/listItem/ListItem.tsx"],"sourcesContent":["/* eslint-disable functional/immutable-data */\nimport {\n  useContext,\n  useId,\n  useMemo,\n  useState,\n  useEffect,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { 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 } from '../primitives';\nimport {\n  ListItemContext,\n  type ListItemContextData,\n  type ListItemMediaSize,\n} from './ListItemContext';\n\nexport type ListItemTypes =\n  | 'non-interactive'\n  | 'navigation'\n  | 'radio'\n  | 'checkbox'\n  | 'switch'\n  | 'button'\n  | 'icon-button';\n\nexport type ListItemControlProps =\n  | ListItemNavigationProps\n  | ListItemCheckboxProps\n  | ListItemButtonProps\n  | ListItemIconButtonProps\n  | ListItemRadioProps\n  | ListItemSwitchProps;\n\nexport type Props = {\n  as?: 'li' | 'div';\n  /**\n   * Swaps vertical hierarchy of title and subtitle and their corresponding right values.\n   */\n  inverted?: boolean;\n  disabled?: boolean;\n  /**\n   * Highlights the list item as an action to be taken or already taken. <br />\n   */\n  spotlight?: 'active' | 'inactive';\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   */\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  role?: string;\n  'aria-labelledby'?: string;\n};\n\n/**\n * @see [Design documentation](https://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  valueTitle,\n  valueSubtitle,\n  control = null,\n  disabled,\n  className,\n  valueColumnWidth,\n  role,\n  id,\n  'aria-labelledby': ariaLabelledby,\n}: Props) => {\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 ? { 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\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  }, [isFullyInteractive]);\n\n  const listItemContext = useMemo(\n    () => ({\n      setControlType,\n      setControlProps,\n      setMediaSize,\n      ids,\n      props: { disabled, inverted },\n      mediaSize,\n      describedByIds,\n    }),\n    [describedByIds, mediaSize],\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 hasControl = Boolean(control);\n    const hasInfo = Boolean(additionalInfo);\n    const hasPrompt = Boolean(prompt);\n\n    if (hasMedia && hasControl) {\n      partials.push('wds-list-item-hasMedia-hasControl');\n    }\n\n    if (hasMedia && !hasControl) {\n      partials.push('wds-list-item-hasMedia-noControl');\n    }\n\n    if (!hasMedia && hasControl) {\n      partials.push('wds-list-item-noMedia-hasControl');\n    }\n\n    if (!hasMedia && !hasControl) {\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\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            disabled,\n          },\n          className,\n        )}\n        id={id}\n        role={role}\n        aria-disabled={disabled}\n        aria-labelledby={ariaLabelledby}\n      >\n        {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            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\n              className={clsx({\n                'wds-list-item-body-center': title && !subtitle,\n              })}\n            >\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                  'wds-list-item-body-center':\n                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),\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              })}\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<Props, 'subtitle' | 'additionalInfo' | 'disabled' | 'prompt' | 'className'>;\n\nfunction View({\n  children,\n  subtitle,\n  additionalInfo,\n  prompt,\n  disabled,\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 =\n    isLinkControl &&\n    !!(controlProps as ListItemNavigationProps)?.href &&\n    (controlProps as ListItemNavigationProps)?.href !== '#';\n\n  const renderExtras = () => (\n    <>\n      {Boolean(subtitle) && additionalInfo}\n      {prompt}\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 d-flex flex-row', {\n            'wds-list-item-control': controlType === 'navigation',\n          })}\n          disabled={disabled}\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={clsx('wds-list-item-view d-flex flex-row')}>{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","valueTitle","valueSubtitle","control","disabled","className","valueColumnWidth","role","id","ariaLabelledby","idPrefix","useId","controlProps","setControlProps","useState","controlType","setControlType","mediaSize","setMediaSize","ids","isPartiallyInteractive","Boolean","partiallyInteractive","isFullyInteractive","isButtonAsLink","href","titlesAndValues","join","additionalInfoPrompt","filter","describedByIds","useMemo","listItemContext","props","gridColumnsStyle","getFeatureClassName","partials","hasMedia","hasControl","hasInfo","hasPrompt","push","_jsx","ListItemContext","Provider","value","children","_jsxs","clsx","View","style","undefined","titles","Body","type","Typography","BODY_LARGE_BOLD","reverse","values","useContext","isLinkControl","includes","isHrefProvided","renderExtras","_Fragment","PrimitiveAnchor","target","InputWrapper","htmlFor","clickable","fullyInteractive","Image","AvatarView","AvatarLayout","AdditionalInfo","Checkbox","Radio","IconButton","Navigation","Button","Switch","Prompt"],"mappings":"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"}

package/build/listItem/ListItemContext.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var React = require('react');
+
+const ListItemContext = /*#__PURE__*/React.createContext(null);
+
+exports.ListItemContext = ListItemContext;
+//# sourceMappingURL=ListItemContext.js.map

package/build/listItem/ListItemContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContext.js","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';\nimport type { ListItemAvatarViewProps } from './AvatarView';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n  setControlType: (type: ListItemTypes) => void;\n  setControlProps: (props: ListItemControlProps) => void;\n  setMediaSize: (size: ListItemMediaSize | undefined) => void;\n  ids: {\n    title: string;\n    subtitle?: string;\n    valueTitle?: string;\n    valueSubtitle?: string;\n    additionalInfo?: string;\n    control: string;\n    prompt?: string;\n  };\n  props: Pick<ListItemProps, 'disabled' | 'inverted'>;\n  mediaSize?: ListItemAvatarViewProps['size'];\n  describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n  null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;;;MAwBaA,eAAe,gBAAGC,mBAAa,CAC1C,IAAsC;;;;"}

package/build/listItem/ListItemContext.mjs

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const ListItemContext = /*#__PURE__*/createContext(null);
+
+export { ListItemContext };
+//# sourceMappingURL=ListItemContext.mjs.map

package/build/listItem/ListItemContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemContext.mjs","sources":["../../src/listItem/ListItemContext.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport type { ListItemTypes, ListItemControlProps, Props as ListItemProps } from './ListItem';\nimport type { ListItemAvatarViewProps } from './AvatarView';\n\nexport type ListItemMediaSize = 32 | 40 | 48 | 56 | 72;\n\nexport type ListItemContextData = {\n  setControlType: (type: ListItemTypes) => void;\n  setControlProps: (props: ListItemControlProps) => void;\n  setMediaSize: (size: ListItemMediaSize | undefined) => void;\n  ids: {\n    title: string;\n    subtitle?: string;\n    valueTitle?: string;\n    valueSubtitle?: string;\n    additionalInfo?: string;\n    control: string;\n    prompt?: string;\n  };\n  props: Pick<ListItemProps, 'disabled' | 'inverted'>;\n  mediaSize?: ListItemAvatarViewProps['size'];\n  describedByIds: string;\n};\n\nexport const ListItemContext = createContext<ListItemContextData>(\n  null as unknown as ListItemContextData,\n);\n"],"names":["ListItemContext","createContext"],"mappings":";;MAwBaA,eAAe,gBAAGC,aAAa,CAC1C,IAAsC;;;;"}

package/build/listItem/Navigation/ListItemNavigation.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var icons = require('@transferwise/icons');
+var useListItemControl = require('../useListItemControl.js');
+var PrimitiveButton = require('../../primitives/PrimitiveButton/PrimitiveButton.js');
+require('../../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
+var React = require('react');
+var ListItemContext = require('../ListItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Navigation = function Navigation({
+  href = '#',
+  ...props
+}) {
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('navigation', {
+    href,
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = React.useContext(ListItemContext.ListItemContext);
+  const isLink = href !== '#';
+  const icon = /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
+    size: 16
+  });
+  if (baseItemProps.disabled) return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
+    size: 24
+  });
+  return isLink ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: icon
+  }) : /*#__PURE__*/jsxRuntime.jsx(PrimitiveButton.default, {
+    "aria-describedby": describedByIds,
+    id: ids.control,
+    className: "btn-unstyled wds-list-item-control",
+    onClick: props.onClick,
+    children: icon
+  });
+};
+Navigation.displayName = 'ListItem.Navigation';
+
+exports.Navigation = Navigation;
+//# sourceMappingURL=ListItemNavigation.js.map

package/build/listItem/Navigation/ListItemNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemNavigation.js","sources":["../../../src/listItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight, BackslashCircle } from '@transferwise/icons';\nimport type { ButtonProps } from '../../button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({ href = '#', ...props }: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const isLink = href !== '#';\n  const icon = <ChevronRight size={16} />;\n\n  if (baseItemProps.disabled) return <BackslashCircle size={24} />;\n\n  return isLink ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","isLink","icon","_jsx","ChevronRight","size","disabled","BackslashCircle","_Fragment","children","PrimitiveButton","id","control","className","onClick","displayName"],"mappings":";;;;;;;;;;AAiBO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAE,GAAGC;AAAK,CAA2B,EAAA;EAC7F,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,YAAY,EAAE;IAAEH,IAAI;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAC3D,EAAA,MAAMC,MAAM,GAAGR,IAAI,KAAK,GAAG;AAC3B,EAAA,MAAMS,IAAI,gBAAGC,cAAA,CAACC,kBAAY,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEvC,EAAA,IAAIV,aAAa,CAACW,QAAQ,EAAE,oBAAOH,cAAA,CAACI,qBAAe,EAAA;AAACF,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEhE,EAAA,OAAOJ,MAAM,gBACXE,cAAA,CAAAK,mBAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGP;AAAI,IAAI,gBAEXC,cAAA,CAACO,uBAAe,EAAA;AACd,IAAA,kBAAA,EAAkBZ,cAAe;IACjCa,EAAE,EAAEd,GAAG,CAACe,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAEpB,KAAK,CAACoB,OAAkE;AAAAL,IAAAA,QAAA,EAEhFP;AAAI,GACU,CAClB;AACH;AAEAV,UAAU,CAACuB,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/Navigation/ListItemNavigation.mjs

@@ -0,0 +1,43 @@
+import { BackslashCircle, ChevronRight } from '@transferwise/icons';
+import { useListItemControl } from '../useListItemControl.mjs';
+import PrimitiveButton from '../../primitives/PrimitiveButton/PrimitiveButton.mjs';
+import '../../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
+import { useContext } from 'react';
+import { ListItemContext } from '../ListItemContext.mjs';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const Navigation = function Navigation({
+  href = '#',
+  ...props
+}) {
+  const {
+    baseItemProps
+  } = useListItemControl('navigation', {
+    href,
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = useContext(ListItemContext);
+  const isLink = href !== '#';
+  const icon = /*#__PURE__*/jsx(ChevronRight, {
+    size: 16
+  });
+  if (baseItemProps.disabled) return /*#__PURE__*/jsx(BackslashCircle, {
+    size: 24
+  });
+  return isLink ? /*#__PURE__*/jsx(Fragment, {
+    children: icon
+  }) : /*#__PURE__*/jsx(PrimitiveButton, {
+    "aria-describedby": describedByIds,
+    id: ids.control,
+    className: "btn-unstyled wds-list-item-control",
+    onClick: props.onClick,
+    children: icon
+  });
+};
+Navigation.displayName = 'ListItem.Navigation';
+
+export { Navigation };
+//# sourceMappingURL=ListItemNavigation.mjs.map

package/build/listItem/Navigation/ListItemNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemNavigation.mjs","sources":["../../../src/listItem/Navigation/ListItemNavigation.tsx"],"sourcesContent":["import { ChevronRight, BackslashCircle } from '@transferwise/icons';\nimport type { ButtonProps } from '../../button/Button.types';\nimport { useListItemControl } from '../useListItemControl';\nimport { PrimitiveButton } from '../../primitives';\nimport { useContext } from 'react';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'target'>;\n\n/**\n * This component allows for rendering a control functionally synonymous with HTML `anchor` or a\n * `button`, giving users a rich way to choose between options and navigate to another screen or\n * step in a flow. It offers only a subset of features of the HTML element in line with the\n * ListItem's constraints.<br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---navigation) for details.\n */\nexport const Navigation = function Navigation({ href = '#', ...props }: ListItemNavigationProps) {\n  const { baseItemProps } = useListItemControl('navigation', { href, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n  const isLink = href !== '#';\n  const icon = <ChevronRight size={16} />;\n\n  if (baseItemProps.disabled) return <BackslashCircle size={24} />;\n\n  return isLink ? (\n    <>{icon}</>\n  ) : (\n    <PrimitiveButton\n      aria-describedby={describedByIds}\n      id={ids.control}\n      className=\"btn-unstyled wds-list-item-control\"\n      onClick={props.onClick as React.MouseEventHandler<HTMLButtonElement> | undefined}\n    >\n      {icon}\n    </PrimitiveButton>\n  );\n};\n\nNavigation.displayName = 'ListItem.Navigation';\n"],"names":["Navigation","href","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","isLink","icon","_jsx","ChevronRight","size","disabled","BackslashCircle","_Fragment","children","PrimitiveButton","id","control","className","onClick","displayName"],"mappings":";;;;;;;;AAiBO,MAAMA,UAAU,GAAG,SAASA,UAAUA,CAAC;AAAEC,EAAAA,IAAI,GAAG,GAAG;EAAE,GAAGC;AAAK,CAA2B,EAAA;EAC7F,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,YAAY,EAAE;IAAEH,IAAI;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC9E,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAC3D,EAAA,MAAMC,MAAM,GAAGR,IAAI,KAAK,GAAG;AAC3B,EAAA,MAAMS,IAAI,gBAAGC,GAAA,CAACC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEvC,EAAA,IAAIV,aAAa,CAACW,QAAQ,EAAE,oBAAOH,GAAA,CAACI,eAAe,EAAA;AAACF,IAAAA,IAAI,EAAE;AAAG,GAAA,CAAG;AAEhE,EAAA,OAAOJ,MAAM,gBACXE,GAAA,CAAAK,QAAA,EAAA;AAAAC,IAAAA,QAAA,EAAGP;AAAI,IAAI,gBAEXC,GAAA,CAACO,eAAe,EAAA;AACd,IAAA,kBAAA,EAAkBZ,cAAe;IACjCa,EAAE,EAAEd,GAAG,CAACe,OAAQ;AAChBC,IAAAA,SAAS,EAAC,oCAAoC;IAC9CC,OAAO,EAAEpB,KAAK,CAACoB,OAAkE;AAAAL,IAAAA,QAAA,EAEhFP;AAAI,GACU,CAClB;AACH;AAEAV,UAAU,CAACuB,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/Prompt/ListItemPrompt.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var clsx = require('clsx');
+require('../../common/theme.js');
+require('../../common/direction.js');
+require('../../common/propsValues/control.js');
+require('../../common/propsValues/breakpoint.js');
+require('../../common/propsValues/size.js');
+require('../../common/propsValues/typography.js');
+require('../../common/propsValues/width.js');
+require('../../common/propsValues/type.js');
+require('../../common/propsValues/dateMode.js');
+require('../../common/propsValues/monthFormat.js');
+require('../../common/propsValues/position.js');
+require('../../common/propsValues/layouts.js');
+require('../../common/propsValues/status.js');
+var sentiment = require('../../common/propsValues/sentiment.js');
+require('../../common/propsValues/profileType.js');
+require('../../common/propsValues/variant.js');
+require('../../common/propsValues/scroll.js');
+require('../../common/propsValues/markdownNodeType.js');
+require('../../common/fileType.js');
+require('@transferwise/icons');
+require('react-intl');
+require('../../common/closeButton/CloseButton.messages.js');
+var jsxRuntime = require('react/jsx-runtime');
+var StatusIcon = require('../../statusIcon/StatusIcon.js');
+var Body = require('../../body/Body.js');
+var ListItemContext = require('../ListItemContext.js');
+
+const Prompt = ({
+  sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
+  children
+}) => {
+  const {
+    ids
+  } = React.useContext(ListItemContext.ListItemContext);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    id: ids.prompt,
+    className: clsx.clsx('wds-list-item-prompt', sentiment$1),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "np-prompt-icon",
+      children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+        size: 16,
+        sentiment: sentiment$1
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+      children: children
+    })]
+  });
+};
+Prompt.displayName = 'ListItem.Prompt';
+
+exports.Prompt = Prompt;
+exports.default = Prompt;
+//# sourceMappingURL=ListItemPrompt.js.map

package/build/listItem/Prompt/ListItemPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\n\nexport type ListItemPromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n  const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n  return (\n    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n      <div className=\"np-prompt-icon\">\n        <StatusIcon size={16} sentiment={sentiment} />\n      </div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","useContext","ListItemContext","_jsxs","id","prompt","className","clsx","_jsx","StatusIcon","size","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,MAAM,GAAGA,CAAC;aAAEC,WAAS,GAAGC,mBAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;AAEhE,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEJ,GAAG,CAACK,MAAO;AAACC,IAAAA,SAAS,EAAEC,SAAI,CAAC,sBAAsB,EAAEX,WAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtES,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,gBAAgB;MAAAP,QAAA,eAC7BS,cAAA,CAACC,kBAAU,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAACd,QAAAA,SAAS,EAAEA;OAAU;AAC7C,KAAK,CACL,eAAAY,cAAA,CAACG,YAAI,EAAA;AAAAZ,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACiB,WAAW,GAAG,iBAAiB;;;;;"}

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -0,0 +1,54 @@
+import { useContext } from 'react';
+import { clsx } from 'clsx';
+import '../../common/theme.mjs';
+import '../../common/direction.mjs';
+import '../../common/propsValues/control.mjs';
+import '../../common/propsValues/breakpoint.mjs';
+import '../../common/propsValues/size.mjs';
+import '../../common/propsValues/typography.mjs';
+import '../../common/propsValues/width.mjs';
+import '../../common/propsValues/type.mjs';
+import '../../common/propsValues/dateMode.mjs';
+import '../../common/propsValues/monthFormat.mjs';
+import '../../common/propsValues/position.mjs';
+import '../../common/propsValues/layouts.mjs';
+import '../../common/propsValues/status.mjs';
+import { Sentiment } from '../../common/propsValues/sentiment.mjs';
+import '../../common/propsValues/profileType.mjs';
+import '../../common/propsValues/variant.mjs';
+import '../../common/propsValues/scroll.mjs';
+import '../../common/propsValues/markdownNodeType.mjs';
+import '../../common/fileType.mjs';
+import '@transferwise/icons';
+import 'react-intl';
+import '../../common/closeButton/CloseButton.messages.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import StatusIcon from '../../statusIcon/StatusIcon.mjs';
+import Body from '../../body/Body.mjs';
+import { ListItemContext } from '../ListItemContext.mjs';
+
+const Prompt = ({
+  sentiment = Sentiment.NEUTRAL,
+  children
+}) => {
+  const {
+    ids
+  } = useContext(ListItemContext);
+  return /*#__PURE__*/jsxs("div", {
+    id: ids.prompt,
+    className: clsx('wds-list-item-prompt', sentiment),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "np-prompt-icon",
+      children: /*#__PURE__*/jsx(StatusIcon, {
+        size: 16,
+        sentiment: sentiment
+      })
+    }), /*#__PURE__*/jsx(Body, {
+      children: children
+    })]
+  });
+};
+Prompt.displayName = 'ListItem.Prompt';
+
+export { Prompt, Prompt as default };
+//# sourceMappingURL=ListItemPrompt.mjs.map

package/build/listItem/Prompt/ListItemPrompt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\n\nexport type ListItemPromptProps = {\n  sentiment?: `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`;\n  children: React.ReactNode;\n};\n\n/**\n * This component allows for rendering an Inline Prompt. <br />In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({ sentiment = Sentiment.NEUTRAL, children }: ListItemPromptProps) => {\n  const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n  return (\n    <div id={ids.prompt} className={clsx('wds-list-item-prompt', sentiment)}>\n      <div className=\"np-prompt-icon\">\n        <StatusIcon size={16} sentiment={sentiment} />\n      </div>\n      <Body>{children}</Body>\n    </div>\n  );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","children","ids","useContext","ListItemContext","_jsxs","id","prompt","className","clsx","_jsx","StatusIcon","size","Body","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,MAAM,GAAGA,CAAC;EAAEC,SAAS,GAAGC,SAAS,CAACC,OAAO;AAAEC,EAAAA;AAAQ,CAAuB,KAAI;EACzF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;AAEhE,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;IAAKC,EAAE,EAAEJ,GAAG,CAACK,MAAO;AAACC,IAAAA,SAAS,EAAEC,IAAI,CAAC,sBAAsB,EAAEX,SAAS,CAAE;AAAAG,IAAAA,QAAA,gBACtES,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,gBAAgB;MAAAP,QAAA,eAC7BS,GAAA,CAACC,UAAU,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAACd,QAAAA,SAAS,EAAEA;OAAU;AAC7C,KAAK,CACL,eAAAY,GAAA,CAACG,IAAI,EAAA;AAAAZ,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAK,CAAC;AAEV;AAEAJ,MAAM,CAACiB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Radio/ListItemRadio.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var RadioButton = require('../../common/RadioButton/RadioButton.js');
+var useListItemControl = require('../useListItemControl.js');
+var ListItemContext = require('../ListItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Radio = function (props) {
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('radio', {
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = React.useContext(ListItemContext.ListItemContext);
+  return /*#__PURE__*/jsxRuntime.jsx(RadioButton.default, {
+    ...props,
+    "aria-describedby": describedByIds,
+    className: "wds-list-item-control",
+    disabled: baseItemProps.disabled,
+    id: ids.control
+  });
+};
+Radio.displayName = 'ListItem.Radio';
+
+exports.Radio = Radio;
+//# sourceMappingURL=ListItemRadio.js.map

package/build/listItem/Radio/ListItemRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRadio.js","sources":["../../../src/listItem/Radio/ListItemRadio.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport RadioButton, { type RadioButtonProps } from '../../common/RadioButton/RadioButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemRadioProps = Omit<\n  RadioButtonProps,\n  'disabled' | 'readOnly' | 'className' | 'id'\n>;\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Radio = function (props: ListItemRadioProps) {\n  const { baseItemProps } = useListItemControl('radio', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <RadioButton\n      {...props}\n      aria-describedby={describedByIds}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n    />\n  );\n};\n\nRadio.displayName = 'ListItem.Radio';\n"],"names":["Radio","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","RadioButton","className","disabled","id","control","displayName"],"mappings":";;;;;;;;MAiBaA,KAAK,GAAG,UAAUC,KAAyB,EAAA;EACtD,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,OAAO,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACnE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAE3D,oBACEC,cAAA,CAACC,mBAAW,EAAA;AAAA,IAAA,GACNR,KAAK;AACT,IAAA,kBAAA,EAAkBI,cAAe;AACjCK,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS;AAAQ,GAAA,CAChB;AAEN;AAEAb,KAAK,CAACc,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/Radio/ListItemRadio.mjs

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import RadioButton from '../../common/RadioButton/RadioButton.mjs';
+import { useListItemControl } from '../useListItemControl.mjs';
+import { ListItemContext } from '../ListItemContext.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Radio = function (props) {
+  const {
+    baseItemProps
+  } = useListItemControl('radio', {
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = useContext(ListItemContext);
+  return /*#__PURE__*/jsx(RadioButton, {
+    ...props,
+    "aria-describedby": describedByIds,
+    className: "wds-list-item-control",
+    disabled: baseItemProps.disabled,
+    id: ids.control
+  });
+};
+Radio.displayName = 'ListItem.Radio';
+
+export { Radio };
+//# sourceMappingURL=ListItemRadio.mjs.map

package/build/listItem/Radio/ListItemRadio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRadio.mjs","sources":["../../../src/listItem/Radio/ListItemRadio.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport RadioButton, { type RadioButtonProps } from '../../common/RadioButton/RadioButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemRadioProps = Omit<\n  RadioButtonProps,\n  'disabled' | 'readOnly' | 'className' | 'id'\n>;\n\n/**\n * This component allows for rendering a Button control. It's a thin wrapper around the\n * [Button component](https://storybook.wise.design/?path=/docs/content-button--docs), but offers only\n * a subset of its features in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item---button) for details.\n */\nexport const Radio = function (props: ListItemRadioProps) {\n  const { baseItemProps } = useListItemControl('radio', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <RadioButton\n      {...props}\n      aria-describedby={describedByIds}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n    />\n  );\n};\n\nRadio.displayName = 'ListItem.Radio';\n"],"names":["Radio","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","RadioButton","className","disabled","id","control","displayName"],"mappings":";;;;;;MAiBaA,KAAK,GAAG,UAAUC,KAAyB,EAAA;EACtD,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,OAAO,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACnE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAE3D,oBACEC,GAAA,CAACC,WAAW,EAAA;AAAA,IAAA,GACNR,KAAK;AACT,IAAA,kBAAA,EAAkBI,cAAe;AACjCK,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS;AAAQ,GAAA,CAChB;AAEN;AAEAb,KAAK,CAACc,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/Switch/ListItemSwitch.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var Switch$1 = require('../../switch/Switch.js');
+var useListItemControl = require('../useListItemControl.js');
+var ListItemContext = require('../ListItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+const Switch = function (props) {
+  const {
+    baseItemProps
+  } = useListItemControl.useListItemControl('switch', {
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = React.useContext(ListItemContext.ListItemContext);
+  return /*#__PURE__*/jsxRuntime.jsx(Switch$1.default, {
+    ...props,
+    "aria-describedby": describedByIds,
+    className: "wds-list-item-control",
+    disabled: baseItemProps.disabled,
+    id: ids.control
+  });
+};
+Switch.displayName = 'ListItem.Switch';
+
+exports.Switch = Switch;
+//# sourceMappingURL=ListItemSwitch.js.map

package/build/listItem/Switch/ListItemSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSwitch.js","sources":["../../../src/listItem/Switch/ListItemSwitch.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport SwitchComp, { type SwitchProps } from '../../switch';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemSwitchProps = Omit<\n  SwitchProps,\n  'disabled' | 'id' | 'aria-labelledby' | 'aria-label'\n>;\n\n/**\n * This component allows for rendering a switch control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--docs),\n * but offers only a subset of its features in line with the ListItem's constraints. <br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item---switch) for details.\n */\nexport const Switch = function (props: ListItemSwitchProps) {\n  const { baseItemProps } = useListItemControl('switch', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <SwitchComp\n      {...props}\n      aria-describedby={describedByIds}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n    />\n  );\n};\n\nSwitch.displayName = 'ListItem.Switch';\n"],"names":["Switch","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","SwitchComp","className","disabled","id","control","displayName"],"mappings":";;;;;;;;MAiBaA,MAAM,GAAG,UAAUC,KAA0B,EAAA;EACxD,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,QAAQ,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACpE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAE3D,oBACEC,cAAA,CAACC,gBAAU,EAAA;AAAA,IAAA,GACLR,KAAK;AACT,IAAA,kBAAA,EAAkBI,cAAe;AACjCK,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS;AAAQ,GAAA,CAChB;AAEN;AAEAb,MAAM,CAACc,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Switch/ListItemSwitch.mjs

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import Switch$1 from '../../switch/Switch.mjs';
+import { useListItemControl } from '../useListItemControl.mjs';
+import { ListItemContext } from '../ListItemContext.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Switch = function (props) {
+  const {
+    baseItemProps
+  } = useListItemControl('switch', {
+    ...props
+  });
+  const {
+    ids,
+    describedByIds
+  } = useContext(ListItemContext);
+  return /*#__PURE__*/jsx(Switch$1, {
+    ...props,
+    "aria-describedby": describedByIds,
+    className: "wds-list-item-control",
+    disabled: baseItemProps.disabled,
+    id: ids.control
+  });
+};
+Switch.displayName = 'ListItem.Switch';
+
+export { Switch };
+//# sourceMappingURL=ListItemSwitch.mjs.map

package/build/listItem/Switch/ListItemSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSwitch.mjs","sources":["../../../src/listItem/Switch/ListItemSwitch.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport SwitchComp, { type SwitchProps } from '../../switch';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemSwitchProps = Omit<\n  SwitchProps,\n  'disabled' | 'id' | 'aria-labelledby' | 'aria-label'\n>;\n\n/**\n * This component allows for rendering a switch control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-switch--docs),\n * but offers only a subset of its features in line with the ListItem's constraints. <br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item---switch) for details.\n */\nexport const Switch = function (props: ListItemSwitchProps) {\n  const { baseItemProps } = useListItemControl('switch', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <SwitchComp\n      {...props}\n      aria-describedby={describedByIds}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n    />\n  );\n};\n\nSwitch.displayName = 'ListItem.Switch';\n"],"names":["Switch","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","SwitchComp","className","disabled","id","control","displayName"],"mappings":";;;;;;MAiBaA,MAAM,GAAG,UAAUC,KAA0B,EAAA;EACxD,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACpE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAE3D,oBACEC,GAAA,CAACC,QAAU,EAAA;AAAA,IAAA,GACLR,KAAK;AACT,IAAA,kBAAA,EAAkBI,cAAe;AACjCK,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS;AAAQ,GAAA,CAChB;AAEN;AAEAb,MAAM,CAACc,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/useListItemControl.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var ListItemContext = require('./ListItemContext.js');
+
+function useListItemControl(controlType, controlProps) {
+  const {
+    setControlType,
+    setControlProps,
+    props: baseItemProps
+  } = React.useContext(ListItemContext.ListItemContext);
+  React.useEffect(() => {
+    setControlType(controlType);
+    setControlProps(controlProps);
+  }, [controlType, controlProps, setControlType, setControlProps]);
+  return {
+    baseItemProps
+  };
+}
+
+exports.useListItemControl = useListItemControl;
+//# sourceMappingURL=useListItemControl.js.map

package/build/listItem/useListItemControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemControl.js","sources":["../../src/listItem/useListItemControl.tsx"],"sourcesContent":["import { useContext, useEffect } from 'react';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\nimport type { ListItemTypes, ListItemControlProps } from './ListItem';\n\nexport function useListItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps) {\n  const {\n    setControlType,\n    setControlProps,\n    props: baseItemProps,\n  } = useContext<ListItemContextData>(ListItemContext);\n\n  useEffect(() => {\n    setControlType(controlType);\n    setControlProps(controlProps);\n  }, [controlType, controlProps, setControlType, setControlProps]);\n\n  return { baseItemProps };\n}\n"],"names":["useListItemControl","controlType","controlProps","setControlType","setControlProps","props","baseItemProps","useContext","ListItemContext","useEffect"],"mappings":";;;;;AAIM,SAAUA,kBAAkBA,CAACC,WAA0B,EAAEC,YAAkC,EAAA;EAC/F,MAAM;IACJC,cAAc;IACdC,eAAe;AACfC,IAAAA,KAAK,EAAEC;AAAa,GACrB,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;AAEpDC,EAAAA,eAAS,CAAC,MAAK;IACbN,cAAc,CAACF,WAAW,CAAC;IAC3BG,eAAe,CAACF,YAAY,CAAC;EAC/B,CAAC,EAAE,CAACD,WAAW,EAAEC,YAAY,EAAEC,cAAc,EAAEC,eAAe,CAAC,CAAC;EAEhE,OAAO;AAAEE,IAAAA;GAAe;AAC1B;;;;"}

package/build/listItem/useListItemControl.mjs

@@ -0,0 +1,20 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext } from './ListItemContext.mjs';
+
+function useListItemControl(controlType, controlProps) {
+  const {
+    setControlType,
+    setControlProps,
+    props: baseItemProps
+  } = useContext(ListItemContext);
+  useEffect(() => {
+    setControlType(controlType);
+    setControlProps(controlProps);
+  }, [controlType, controlProps, setControlType, setControlProps]);
+  return {
+    baseItemProps
+  };
+}
+
+export { useListItemControl };
+//# sourceMappingURL=useListItemControl.mjs.map

package/build/listItem/useListItemControl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemControl.mjs","sources":["../../src/listItem/useListItemControl.tsx"],"sourcesContent":["import { useContext, useEffect } from 'react';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\nimport type { ListItemTypes, ListItemControlProps } from './ListItem';\n\nexport function useListItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps) {\n  const {\n    setControlType,\n    setControlProps,\n    props: baseItemProps,\n  } = useContext<ListItemContextData>(ListItemContext);\n\n  useEffect(() => {\n    setControlType(controlType);\n    setControlProps(controlProps);\n  }, [controlType, controlProps, setControlType, setControlProps]);\n\n  return { baseItemProps };\n}\n"],"names":["useListItemControl","controlType","controlProps","setControlType","setControlProps","props","baseItemProps","useContext","ListItemContext","useEffect"],"mappings":";;;AAIM,SAAUA,kBAAkBA,CAACC,WAA0B,EAAEC,YAAkC,EAAA;EAC/F,MAAM;IACJC,cAAc;IACdC,eAAe;AACfC,IAAAA,KAAK,EAAEC;AAAa,GACrB,GAAGC,UAAU,CAAsBC,eAAe,CAAC;AAEpDC,EAAAA,SAAS,CAAC,MAAK;IACbN,cAAc,CAACF,WAAW,CAAC;IAC3BG,eAAe,CAACF,YAAY,CAAC;EAC/B,CAAC,EAAE,CAACD,WAAW,EAAEC,YAAY,EAAEC,cAAc,EAAEC,eAAe,CAAC,CAAC;EAEhE,OAAO;AAAEE,IAAAA;GAAe;AAC1B;;;;"}

package/build/listItem/useListItemMedia.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var ListItemContext = require('./ListItemContext.js');
+
+function useListItemMedia(size) {
+  const {
+    setMediaSize,
+    mediaSize
+  } = React.useContext(ListItemContext.ListItemContext);
+  React.useEffect(() => {
+    setMediaSize(size);
+  }, [size, setMediaSize]);
+  return {
+    mediaSize,
+    setMediaSize
+  };
+}
+
+exports.useListItemMedia = useListItemMedia;
+//# sourceMappingURL=useListItemMedia.js.map

package/build/listItem/useListItemMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemMedia.js","sources":["../../src/listItem/useListItemMedia.tsx"],"sourcesContent":["import { useContext, useEffect } from 'react';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\nimport type { ListItemAvatarViewProps } from './AvatarView';\n\nexport function useListItemMedia(size?: ListItemAvatarViewProps['size']) {\n  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);\n\n  useEffect(() => {\n    setMediaSize(size);\n  }, [size, setMediaSize]);\n\n  return { mediaSize, setMediaSize };\n}\n"],"names":["useListItemMedia","size","setMediaSize","mediaSize","useContext","ListItemContext","useEffect"],"mappings":";;;;;AAIM,SAAUA,gBAAgBA,CAACC,IAAsC,EAAA;EACrE,MAAM;IAAEC,YAAY;AAAEC,IAAAA;AAAS,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;AAEpFC,EAAAA,eAAS,CAAC,MAAK;IACbJ,YAAY,CAACD,IAAI,CAAC;AACpB,EAAA,CAAC,EAAE,CAACA,IAAI,EAAEC,YAAY,CAAC,CAAC;EAExB,OAAO;IAAEC,SAAS;AAAED,IAAAA;GAAc;AACpC;;;;"}

package/build/listItem/useListItemMedia.mjs

@@ -0,0 +1,19 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext } from './ListItemContext.mjs';
+
+function useListItemMedia(size) {
+  const {
+    setMediaSize,
+    mediaSize
+  } = useContext(ListItemContext);
+  useEffect(() => {
+    setMediaSize(size);
+  }, [size, setMediaSize]);
+  return {
+    mediaSize,
+    setMediaSize
+  };
+}
+
+export { useListItemMedia };
+//# sourceMappingURL=useListItemMedia.mjs.map

package/build/listItem/useListItemMedia.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListItemMedia.mjs","sources":["../../src/listItem/useListItemMedia.tsx"],"sourcesContent":["import { useContext, useEffect } from 'react';\nimport { ListItemContext, type ListItemContextData } from './ListItemContext';\nimport type { ListItemAvatarViewProps } from './AvatarView';\n\nexport function useListItemMedia(size?: ListItemAvatarViewProps['size']) {\n  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);\n\n  useEffect(() => {\n    setMediaSize(size);\n  }, [size, setMediaSize]);\n\n  return { mediaSize, setMediaSize };\n}\n"],"names":["useListItemMedia","size","setMediaSize","mediaSize","useContext","ListItemContext","useEffect"],"mappings":";;;AAIM,SAAUA,gBAAgBA,CAACC,IAAsC,EAAA;EACrE,MAAM;IAAEC,YAAY;AAAEC,IAAAA;AAAS,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;AAEpFC,EAAAA,SAAS,CAAC,MAAK;IACbJ,YAAY,CAACD,IAAI,CAAC;AACpB,EAAA,CAAC,EAAE,CAACA,IAAI,EAAEC,YAAY,CAAC,CAAC;EAExB,OAAO;IAAEC,SAAS;AAAED,IAAAA;GAAc;AACpC;;;;"}