@transferwise/components 0.0.0-experimental-e068634 → 0.0.0-experimental-0e166d9

package/src/main.less

@@ -39,7 +39,6 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
-@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/switch/Switch.tsx

@@ -12,15 +12,13 @@ export type SwitchProps = CommonProps & {
   'aria-label'?: string;
   /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
   'aria-labelledby'?: string;
-  /** Identifies the element(s) that describes the element on which the attribute is set */
-  'aria-describedby'?: string;
   /** Whether the switch is checked or not */
   checked?: boolean;
   disabled?: boolean;
   /** ID to apply to the switch container */
   id?: string;
   /** Function called when the switch is toggled */
-  onClick: (event?: MouseEvent<HTMLButtonElement>) => void;
+  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;
 };
 
 const Switch = (props: SwitchProps) => {
@@ -32,7 +30,6 @@ const Switch = (props: SwitchProps) => {
     id = inputAttributes.id,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledbyProp,
-    'aria-describedby': ariaDescribedbyProp,
     onClick,
     disabled,
   } = props;
@@ -55,10 +52,9 @@ const Switch = (props: SwitchProps) => {
       role="switch"
       {...inputAttributes}
       id={id}
-      aria-checked={Boolean(checked)}
+      aria-checked={checked}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
-      aria-describedby={ariaDescribedbyProp}
       disabled={disabled}
       onClick={!disabled ? onClick : undefined}
     >

package/src/test-utils/Parameters.d.ts

@@ -0,0 +1,77 @@
+declare module '@storybook/react' {
+  interface Parameters {
+    /** Prefer using `storyConfig` for configuring variants */
+    variants?: (
+      | 'default'
+      | 'light'
+      | 'dark'
+      | 'bright-green'
+      | 'forest-green'
+      | 'rtl'
+      | (string & Record<string, unknown>)
+    )[];
+    /** Used by Chromatic */
+    chromatic?: ChromaticParameters;
+    viewport?: {
+      viewports?: Record<string, unknown>;
+      defaultViewport?: string;
+    };
+  }
+}
+
+/**
+ * Derived from Chromatic's config type definitions
+ *
+ * @see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts
+ */
+export interface ChromaticParameters {
+  /**
+   * Prefer using `storyConfig` for configuring viewports if possible.
+   *
+   * To set a viewport, specify one or more screen widths to the
+   * `chromatic.viewports` parameter. When left unspecified, Chromatic
+   * uses a default value of `[1200]`. Use `[414]` for 'Large mobile'
+   * viewport width.
+   *
+   * @default [1200]
+   */
+  viewports?: [414] | [414, 1200];
+
+  /**
+   * You can omit stories entirely from Chromatic testing using the disable story parameter.
+   */
+  disable?: boolean;
+
+  /**
+   * Chromatic will pause CSS animations and reset them to their beginning state.
+   *
+   * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
+   * animation at the end, use the `pauseAnimationAtEnd` story parameter.
+   */
+  pauseAnimationAtEnd?: boolean;
+
+  /**
+   * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
+   * screenshot.
+   */
+  delay?: number;
+
+  /**
+   * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
+   * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
+   * visual noise generated by non-deterministic rendering such as anti-aliasing.
+   *
+   * 0 is the most accurate. 1 is the least accurate.
+   *
+   * @default 0.063
+   */
+  diffThreshold?: number;
+
+  /**
+   * Modes for Chromatic testing.
+   *
+   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
+   * 'dark' for dark mode, or `rtl` for right to left content.
+   */
+  modes?: object;
+}

package/build/list/List.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var clsx = require('clsx');
-require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-function List({
-  as: Element = 'ul',
-  className,
-  ...props
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Element, {
-    className: clsx.clsx('wds-list', 'list-unstyled', className),
-    ...props
-  });
-}
-
-exports.default = List;
-//# sourceMappingURL=List.js.map

package/build/list/List.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  ['data-testid']?: string;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAWc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,cAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,SAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}

package/build/list/List.mjs

@@ -1,17 +0,0 @@
-import { clsx } from 'clsx';
-import 'react';
-import { jsx } from 'react/jsx-runtime';
-
-function List({
-  as: Element = 'ul',
-  className,
-  ...props
-}) {
-  return /*#__PURE__*/jsx(Element, {
-    className: clsx('wds-list', 'list-unstyled', className),
-    ...props
-  });
-}
-
-export { List as default };
-//# sourceMappingURL=List.mjs.map

package/build/list/List.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  ['data-testid']?: string;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAWc,SAAUA,IAAIA,CAAC;EAAEC,EAAE,EAAEC,OAAO,GAAG,IAAI;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAa,EAAA;EACjF,oBAAOC,GAAA,CAACH,OAAO,EAAA;IAACC,SAAS,EAAEG,IAAI,CAAC,UAAU,EAAE,eAAe,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,IAAI;AACxF;;;;"}

package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js

@@ -1,56 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ListItemContext = require('../ListItemContext.js');
-var Body = require('../../body/Body.js');
-var Link = require('../../link/Link.js');
-require('../../common/theme.js');
-require('../../common/direction.js');
-require('../../common/propsValues/control.js');
-require('../../common/propsValues/breakpoint.js');
-require('../../common/propsValues/size.js');
-var typography = 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');
-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('clsx');
-require('react-intl');
-require('../../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const AdditionalInfo = function ({
-  children,
-  action
-}) {
-  const {
-    ids
-  } = React.useContext(ListItemContext.ListItemContext);
-  return /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
-    type: typography.Typography.BODY_DEFAULT,
-    id: ids.additionalInfo,
-    className: "wds-list-item-additional-info",
-    children: [children, action ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [' ', /*#__PURE__*/jsxRuntime.jsx(Link.default, {
-        href: action.href,
-        target: action.target,
-        onClick: action.onClick,
-        children: action.label
-      })]
-    }) : null]
-  });
-};
-AdditionalInfo.displayName = 'ListItem.AdditionalInfo';
-
-exports.AdditionalInfo = AdditionalInfo;
-//# sourceMappingURL=ListItemAdditionalInfo.js.map

package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemAdditionalInfo.js","sources":["../../../src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx"],"sourcesContent":["import { PropsWithChildren, useContext } from 'react';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { Typography } from '../../common';\n\nexport type ListItemAdditionalInfoProps = PropsWithChildren<{\n  /**\n   * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.\n   */\n  action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;\n}>;\n\nexport const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {\n  const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n  return (\n    <Body\n      type={Typography.BODY_DEFAULT}\n      id={ids.additionalInfo}\n      className=\"wds-list-item-additional-info\"\n    >\n      {children}\n      {action ? (\n        <>\n          {' '}\n          <Link href={action.href} target={action.target} onClick={action.onClick}>\n            {action.label}\n          </Link>\n        </>\n      ) : null}\n    </Body>\n  );\n};\n\nAdditionalInfo.displayName = 'ListItem.AdditionalInfo';\n"],"names":["AdditionalInfo","children","action","ids","useContext","ListItemContext","_jsxs","Body","type","Typography","BODY_DEFAULT","id","additionalInfo","className","_Fragment","_jsx","Link","href","target","onClick","label","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,cAAc,GAAG,UAAU;EAAEC,QAAQ;AAAEC,EAAAA;AAAM,CAA+B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EAEhE,oBACEC,eAAA,CAACC,YAAI,EAAA;IACHC,IAAI,EAAEC,qBAAU,CAACC,YAAa;IAC9BC,EAAE,EAAER,GAAG,CAACS,cAAe;AACvBC,IAAAA,SAAS,EAAC,+BAA+B;AAAAZ,IAAAA,QAAA,GAExCA,QAAQ,EACRC,MAAM,gBACLI,eAAA,CAAAQ,mBAAA,EAAA;AAAAb,MAAAA,QAAA,EAAA,CACG,GAAG,eACJc,cAAA,CAACC,YAAI,EAAA;QAACC,IAAI,EAAEf,MAAM,CAACe,IAAK;QAACC,MAAM,EAAEhB,MAAM,CAACgB,MAAO;QAACC,OAAO,EAAEjB,MAAM,CAACiB,OAAQ;QAAAlB,QAAA,EACrEC,MAAM,CAACkB;AAAK,OACT,CACR;KAAA,CAAG,GACD,IAAI;AAAA,GACJ,CAAC;AAEX;AAEApB,cAAc,CAACqB,WAAW,GAAG,yBAAyB;;;;"}

package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs

@@ -1,54 +0,0 @@
-import { useContext } from 'react';
-import { ListItemContext } from '../ListItemContext.mjs';
-import Body from '../../body/Body.mjs';
-import Link from '../../link/Link.mjs';
-import '../../common/theme.mjs';
-import '../../common/direction.mjs';
-import '../../common/propsValues/control.mjs';
-import '../../common/propsValues/breakpoint.mjs';
-import '../../common/propsValues/size.mjs';
-import { Typography } from '../../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 '../../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 'clsx';
-import 'react-intl';
-import '../../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-const AdditionalInfo = function ({
-  children,
-  action
-}) {
-  const {
-    ids
-  } = useContext(ListItemContext);
-  return /*#__PURE__*/jsxs(Body, {
-    type: Typography.BODY_DEFAULT,
-    id: ids.additionalInfo,
-    className: "wds-list-item-additional-info",
-    children: [children, action ? /*#__PURE__*/jsxs(Fragment, {
-      children: [' ', /*#__PURE__*/jsx(Link, {
-        href: action.href,
-        target: action.target,
-        onClick: action.onClick,
-        children: action.label
-      })]
-    }) : null]
-  });
-};
-AdditionalInfo.displayName = 'ListItem.AdditionalInfo';
-
-export { AdditionalInfo };
-//# sourceMappingURL=ListItemAdditionalInfo.mjs.map

package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemAdditionalInfo.mjs","sources":["../../../src/listItem/AdditionalInfo/ListItemAdditionalInfo.tsx"],"sourcesContent":["import { PropsWithChildren, useContext } from 'react';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { Typography } from '../../common';\n\nexport type ListItemAdditionalInfoProps = PropsWithChildren<{\n  /**\n   * Props object to be passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs) component.\n   */\n  action?: { label: string } & Pick<LinkProps, 'href' | 'onClick' | 'target'>;\n}>;\n\nexport const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {\n  const { ids } = useContext<ListItemContextData>(ListItemContext);\n\n  return (\n    <Body\n      type={Typography.BODY_DEFAULT}\n      id={ids.additionalInfo}\n      className=\"wds-list-item-additional-info\"\n    >\n      {children}\n      {action ? (\n        <>\n          {' '}\n          <Link href={action.href} target={action.target} onClick={action.onClick}>\n            {action.label}\n          </Link>\n        </>\n      ) : null}\n    </Body>\n  );\n};\n\nAdditionalInfo.displayName = 'ListItem.AdditionalInfo';\n"],"names":["AdditionalInfo","children","action","ids","useContext","ListItemContext","_jsxs","Body","type","Typography","BODY_DEFAULT","id","additionalInfo","className","_Fragment","_jsx","Link","href","target","onClick","label","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,cAAc,GAAG,UAAU;EAAEC,QAAQ;AAAEC,EAAAA;AAAM,CAA+B,EAAA;EACvF,MAAM;AAAEC,IAAAA;AAAG,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EAEhE,oBACEC,IAAA,CAACC,IAAI,EAAA;IACHC,IAAI,EAAEC,UAAU,CAACC,YAAa;IAC9BC,EAAE,EAAER,GAAG,CAACS,cAAe;AACvBC,IAAAA,SAAS,EAAC,+BAA+B;AAAAZ,IAAAA,QAAA,GAExCA,QAAQ,EACRC,MAAM,gBACLI,IAAA,CAAAQ,QAAA,EAAA;AAAAb,MAAAA,QAAA,EAAA,CACG,GAAG,eACJc,GAAA,CAACC,IAAI,EAAA;QAACC,IAAI,EAAEf,MAAM,CAACe,IAAK;QAACC,MAAM,EAAEhB,MAAM,CAACgB,MAAO;QAACC,OAAO,EAAEjB,MAAM,CAACiB,OAAQ;QAAAlB,QAAA,EACrEC,MAAM,CAACkB;AAAK,OACT,CACR;KAAA,CAAG,GACD,IAAI;AAAA,GACJ,CAAC;AAEX;AAEApB,cAAc,CAACqB,WAAW,GAAG,yBAAyB;;;;"}

package/build/listItem/AvatarLayout/ListItemAvatarLayout.js

@@ -1,23 +0,0 @@
-'use strict';
-
-var AvatarLayout$1 = require('../../avatarLayout/AvatarLayout.js');
-var clsx = require('clsx');
-var useListItemMedia = require('../useListItemMedia.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const AvatarLayout = ({
-  className,
-  size = 48,
-  ...props
-}) => {
-  useListItemMedia.useListItemMedia(size);
-  return /*#__PURE__*/jsxRuntime.jsx(AvatarLayout$1.default, {
-    ...props,
-    size: size,
-    className: clsx.clsx('wds-list-item-media-avatar-layout', className)
-  });
-};
-AvatarLayout.displayName = 'ListItem.AvatarLayout';
-
-exports.AvatarLayout = AvatarLayout;
-//# sourceMappingURL=ListItemAvatarLayout.js.map

package/build/listItem/AvatarLayout/ListItemAvatarLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemAvatarLayout.js","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\ntype SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n  useListItemMedia(size);\n\n  return (\n    <AvatarLayoutComp\n      {...props}\n      size={size}\n      className={clsx('wds-list-item-media-avatar-layout', className)}\n    />\n  );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,sBAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}

package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs

@@ -1,21 +0,0 @@
-import AvatarLayout$1 from '../../avatarLayout/AvatarLayout.mjs';
-import { clsx } from 'clsx';
-import { useListItemMedia } from '../useListItemMedia.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const AvatarLayout = ({
-  className,
-  size = 48,
-  ...props
-}) => {
-  useListItemMedia(size);
-  return /*#__PURE__*/jsx(AvatarLayout$1, {
-    ...props,
-    size: size,
-    className: clsx('wds-list-item-media-avatar-layout', className)
-  });
-};
-AvatarLayout.displayName = 'ListItem.AvatarLayout';
-
-export { AvatarLayout };
-//# sourceMappingURL=ListItemAvatarLayout.mjs.map

package/build/listItem/AvatarLayout/ListItemAvatarLayout.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemAvatarLayout.mjs","sources":["../../../src/listItem/AvatarLayout/ListItemAvatarLayout.tsx"],"sourcesContent":["import AvatarLayoutComp, { type AvatarLayoutProps } from '../../avatarLayout';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\n\ntype SizeProp = { size?: 32 | 40 | 48 | 56 | 72 };\n\nexport type ListItemAvatarLayoutProps = Omit<AvatarLayoutProps, 'size' | 'interactive'> & SizeProp;\n\n/**\n * This component allows for rendering 2 avatars. It's a thin wrapper around the\n * [AvatarLayout component](https://storybook.wise.design/?path=/docs/content-avatarlayout--docs), but offers only\n * a subset of its sizes, and disallows interactive mode, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarLayout = ({ className, size = 48, ...props }: ListItemAvatarLayoutProps) => {\n  useListItemMedia(size);\n\n  return (\n    <AvatarLayoutComp\n      {...props}\n      size={size}\n      className={clsx('wds-list-item-media-avatar-layout', className)}\n    />\n  );\n};\nAvatarLayout.displayName = 'ListItem.AvatarLayout';\n"],"names":["AvatarLayout","className","size","props","useListItemMedia","_jsx","AvatarLayoutComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,YAAY,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA6B,KAAI;EAC5FC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,cAAgB,EAAA;AAAA,IAAA,GACXH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,mCAAmC,EAAEN,SAAS;AAAE,GAAA,CAChE;AAEN;AACAD,YAAY,CAACQ,WAAW,GAAG,uBAAuB;;;;"}

package/build/listItem/AvatarView/ListItemAvatarView.js

@@ -1,23 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var AvatarView$1 = require('../../avatarView/AvatarView.js');
-var useListItemMedia = require('../useListItemMedia.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const AvatarView = ({
-  className,
-  size = 48,
-  ...props
-}) => {
-  useListItemMedia.useListItemMedia(size);
-  return /*#__PURE__*/jsxRuntime.jsx(AvatarView$1.default, {
-    ...props,
-    size: size,
-    className: clsx.clsx('wds-list-item-media-avatar-view', className)
-  });
-};
-AvatarView.displayName = 'ListItem.AvatarView';
-
-exports.AvatarView = AvatarView;
-//# sourceMappingURL=ListItemAvatarView.js.map

package/build/listItem/AvatarView/ListItemAvatarView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemAvatarView.js","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n  size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n  useListItemMedia(size);\n\n  return (\n    <AvatarViewComp\n      {...props}\n      size={size}\n      className={clsx('wds-list-item-media-avatar-view', className)}\n    />\n  );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,iCAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,SAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/AvatarView/ListItemAvatarView.mjs

@@ -1,21 +0,0 @@
-import { clsx } from 'clsx';
-import AvatarView$1 from '../../avatarView/AvatarView.mjs';
-import { useListItemMedia } from '../useListItemMedia.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const AvatarView = ({
-  className,
-  size = 48,
-  ...props
-}) => {
-  useListItemMedia(size);
-  return /*#__PURE__*/jsx(AvatarView$1, {
-    ...props,
-    size: size,
-    className: clsx('wds-list-item-media-avatar-view', className)
-  });
-};
-AvatarView.displayName = 'ListItem.AvatarView';
-
-export { AvatarView };
-//# sourceMappingURL=ListItemAvatarView.mjs.map

package/build/listItem/AvatarView/ListItemAvatarView.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemAvatarView.mjs","sources":["../../../src/listItem/AvatarView/ListItemAvatarView.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport AvatarViewComp, { AvatarViewProps } from '../../avatarView';\nimport { useListItemMedia } from '../useListItemMedia';\n\nexport type ListItemAvatarViewProps = Omit<AvatarViewProps, 'size' | 'interactive'> & {\n  size?: 32 | 40 | 48 | 56 | 72;\n};\n\n/**\n * This component renders a single avatar. It's a thin wrapper around the\n * [AvatarView component](https://storybook.wise.design/?path=/docs/content-avatarview--docs), but offers only\n * a subset of its sizes, in line with the ListItem's constraints. <br />\n * <br />\n * Please refer to the [Design documentation](https://wise.design/components/list-item#avatar) for details.\n */\nexport const AvatarView = ({ className, size = 48, ...props }: ListItemAvatarViewProps) => {\n  useListItemMedia(size);\n\n  return (\n    <AvatarViewComp\n      {...props}\n      size={size}\n      className={clsx('wds-list-item-media-avatar-view', className)}\n    />\n  );\n};\nAvatarView.displayName = 'ListItem.AvatarView';\n"],"names":["AvatarView","className","size","props","useListItemMedia","_jsx","AvatarViewComp","clsx","displayName"],"mappings":";;;;;AAeO,MAAMA,UAAU,GAAGA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAE,GAAGC;AAAK,CAA2B,KAAI;EACxFC,gBAAgB,CAACF,IAAI,CAAC;EAEtB,oBACEG,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTH,KAAK;AACTD,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEM,IAAI,CAAC,iCAAiC,EAAEN,SAAS;AAAE,GAAA,CAC9D;AAEN;AACAD,UAAU,CAACQ,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/Button/ListItemButton.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var React = require('react');
-var clsx = require('clsx');
-var Button_resolver = require('../../button/Button.resolver.js');
-var useListItemControl = require('../useListItemControl.js');
-var ListItemContext = require('../ListItemContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const Button = ({
-  priority = 'secondary-neutral',
-  partiallyInteractive,
-  ...props
-}) => {
-  const {
-    baseItemProps
-  } = useListItemControl.useListItemControl('button', {
-    partiallyInteractive,
-    ...props
-  });
-  const {
-    ids,
-    describedByIds
-  } = React.useContext(ListItemContext.ListItemContext);
-  const commonProps = {
-    ...props,
-    className: clsx.clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
-    id: ids.control,
-    priority,
-    v2: true,
-    size: 'sm',
-    disabled: baseItemProps.disabled
-  };
-  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
-  return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
-    "aria-describedby": `${buttonContentId} ${describedByIds}`,
-    ...commonProps
-  });
-};
-Button.displayName = 'ListItem.Button';
-
-exports.Button = Button;
-//# sourceMappingURL=ListItemButton.js.map

package/build/listItem/Button/ListItemButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n  NewButtonProps,\n  'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n  /**\n   * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n   */\n  partiallyInteractive?: boolean;\n  addonStart?: ButtonAddonIcon;\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 Button = ({\n  priority = 'secondary-neutral',\n  partiallyInteractive,\n  ...props\n}: ListItemButtonProps) => {\n  const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  const commonProps = {\n    ...props,\n    className: clsx(\n      'wds-list-item-control',\n      !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n    ),\n    id: ids.control,\n    priority,\n    v2: true,\n    size: 'sm',\n    disabled: baseItemProps.disabled,\n  };\n\n  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n  return (\n    <ButtonComp\n      aria-describedby={`${buttonContentId} ${describedByIds}`}\n      {...(commonProps as NewButtonProps)}\n    />\n  );\n};\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","priority","partiallyInteractive","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;;;AAwBO,MAAMA,MAAM,GAAGA,CAAC;AACrBC,EAAAA,QAAQ,GAAG,mBAAmB;EAC9BC,oBAAoB;EACpB,GAAGC;AAAK,CACY,KAAI;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,QAAQ,EAAE;IAAEH,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGP,KAAK;AACRQ,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACV,oBAAoB,IAAIC,KAAK,CAACU,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACfd,QAAQ;AACRe,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGhB,KAAK,CAACU,IAAI,IAAIX,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGI,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,cAAA,CAACC,uBAAU,EAAA;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN;AAEAV,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Button/ListItemButton.mjs

@@ -1,41 +0,0 @@
-import { useContext } from 'react';
-import { clsx } from 'clsx';
-import Button$1 from '../../button/Button.resolver.mjs';
-import { useListItemControl } from '../useListItemControl.mjs';
-import { ListItemContext } from '../ListItemContext.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const Button = ({
-  priority = 'secondary-neutral',
-  partiallyInteractive,
-  ...props
-}) => {
-  const {
-    baseItemProps
-  } = useListItemControl('button', {
-    partiallyInteractive,
-    ...props
-  });
-  const {
-    ids,
-    describedByIds
-  } = useContext(ListItemContext);
-  const commonProps = {
-    ...props,
-    className: clsx('wds-list-item-control', !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element'),
-    id: ids.control,
-    priority,
-    v2: true,
-    size: 'sm',
-    disabled: baseItemProps.disabled
-  };
-  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;
-  return /*#__PURE__*/jsx(Button$1, {
-    "aria-describedby": `${buttonContentId} ${describedByIds}`,
-    ...commonProps
-  });
-};
-Button.displayName = 'ListItem.Button';
-
-export { Button };
-//# sourceMappingURL=ListItemButton.mjs.map

package/build/listItem/Button/ListItemButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport ButtonComp, { type ButtonAddonIcon, type NewButtonProps } from '../../button';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemButtonProps = Omit<\n  NewButtonProps,\n  'v2' | 'size' | 'disabled' | 'block' | 'addonStart'\n> & {\n  /**\n   * Toggles the [interactivity strategy](https://storybook.wise.design/?path=/docs/content-listitem--docs#interactivity) for the whole ListItem.\n   */\n  partiallyInteractive?: boolean;\n  addonStart?: ButtonAddonIcon;\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 Button = ({\n  priority = 'secondary-neutral',\n  partiallyInteractive,\n  ...props\n}: ListItemButtonProps) => {\n  const { baseItemProps } = useListItemControl('button', { partiallyInteractive, ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  const commonProps = {\n    ...props,\n    className: clsx(\n      'wds-list-item-control',\n      !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n    ),\n    id: ids.control,\n    priority,\n    v2: true,\n    size: 'sm',\n    disabled: baseItemProps.disabled,\n  };\n\n  const buttonContentId = props.href || partiallyInteractive ? '' : `${ids.control}_content`;\n\n  return (\n    <ButtonComp\n      aria-describedby={`${buttonContentId} ${describedByIds}`}\n      {...(commonProps as NewButtonProps)}\n    />\n  );\n};\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","priority","partiallyInteractive","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,MAAM,GAAGA,CAAC;AACrBC,EAAAA,QAAQ,GAAG,mBAAmB;EAC9BC,oBAAoB;EACpB,GAAGC;AAAK,CACY,KAAI;EACxB,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAEH,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGP,KAAK;AACRQ,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACV,oBAAoB,IAAIC,KAAK,CAACU,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACfd,QAAQ;AACRe,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGhB,KAAK,CAACU,IAAI,IAAIX,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGI,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,GAAA,CAACC,QAAU,EAAA;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGF,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN;AAEAV,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/Checkbox/ListItemCheckbox.js

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

package/build/listItem/Checkbox/ListItemCheckbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemCheckbox.js","sources":["../../../src/listItem/Checkbox/ListItemCheckbox.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemCheckboxProps = Pick<\n  CheckboxButtonProps,\n  'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'\n>;\n\n/**\n * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--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---checkbox) for details.\n */\nexport const Checkbox = function (props: ListItemCheckboxProps) {\n  const { baseItemProps } = useListItemControl('checkbox', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <CheckboxButton\n      {...props}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n      aria-describedby={describedByIds}\n    />\n  );\n};\n\nCheckbox.displayName = 'ListItem.Checkbox';\n"],"names":["Checkbox","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","CheckboxButton","className","disabled","id","control","displayName"],"mappings":";;;;;;;;MAiBaA,QAAQ,GAAG,UAAUC,KAA4B,EAAA;EAC5D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,UAAU,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACtE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAE3D,oBACEC,cAAA,CAACC,sBAAc,EAAA;AAAA,IAAA,GACTR,KAAK;AACTS,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS,OAAQ;IAChB,kBAAA,EAAkBR;AAAe,GAAA,CACjC;AAEN;AAEAL,QAAQ,CAACc,WAAW,GAAG,mBAAmB;;;;"}

package/build/listItem/Checkbox/ListItemCheckbox.mjs

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

package/build/listItem/Checkbox/ListItemCheckbox.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListItemCheckbox.mjs","sources":["../../../src/listItem/Checkbox/ListItemCheckbox.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport CheckboxButton, { type CheckboxButtonProps } from '../../checkboxButton/CheckboxButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemCheckboxProps = Pick<\n  CheckboxButtonProps,\n  'checked' | 'indeterminate' | 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'name'\n>;\n\n/**\n * This component allows for rendering a checkbox control within a fully interactive ListItem. <br />It's a thin wrapper around the\n * [CheckboxButton component](https://storybook.wise.design/?path=/docs/actions-checkboxbutton--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---checkbox) for details.\n */\nexport const Checkbox = function (props: ListItemCheckboxProps) {\n  const { baseItemProps } = useListItemControl('checkbox', { ...props });\n  const { ids, describedByIds } = useContext(ListItemContext);\n\n  return (\n    <CheckboxButton\n      {...props}\n      className=\"wds-list-item-control\"\n      disabled={baseItemProps.disabled}\n      id={ids.control}\n      aria-describedby={describedByIds}\n    />\n  );\n};\n\nCheckbox.displayName = 'ListItem.Checkbox';\n"],"names":["Checkbox","props","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","_jsx","CheckboxButton","className","disabled","id","control","displayName"],"mappings":";;;;;;MAiBaA,QAAQ,GAAG,UAAUC,KAA4B,EAAA;EAC5D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,UAAU,EAAE;IAAE,GAAGF;AAAK,GAAE,CAAC;EACtE,MAAM;IAAEG,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAE3D,oBACEC,GAAA,CAACC,cAAc,EAAA;AAAA,IAAA,GACTR,KAAK;AACTS,IAAAA,SAAS,EAAC,uBAAuB;IACjCC,QAAQ,EAAET,aAAa,CAACS,QAAS;IACjCC,EAAE,EAAER,GAAG,CAACS,OAAQ;IAChB,kBAAA,EAAkBR;AAAe,GAAA,CACjC;AAEN;AAEAL,QAAQ,CAACc,WAAW,GAAG,mBAAmB;;;;"}