@transferwise/components 46.129.0 → 46.130.1

package/build/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  required?: boolean;\n  /** @deprecated use `description` prop instead */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated use `message` and `type={Sentiment.NEGATIVE}` prop instead */\n  error?: React.ReactNode;\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}
+{"version":3,"file":"Field.mjs","sources":["../../src/field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useRef } from 'react';\n\nimport { Sentiment } from '../common';\nimport { InlinePrompt, type InlinePromptProps } from '../prompt';\nimport {\n  FieldLabelContextProvider,\n  InputDescribedByProvider,\n  InputIdContextProvider,\n  InputInvalidProvider,\n} from '../inputs/contexts';\nimport { Label } from '../label';\n\nexport type FieldProps = {\n  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */\n  id?: string | null;\n  /** Should be specified unless the wrapped control has its own labeling mechanism, e.g. `Checkbox`. */\n  label?: React.ReactNode;\n  /** @default true */\n  required?: boolean;\n  /** @deprecated Use `description` prop instead. */\n  hint?: React.ReactNode;\n  message?: React.ReactNode;\n  /**\n   * Override for the [InlinePrompt icon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n   * announced by the screen readers\n   * */\n  messageIconLabel?: string;\n  /**\n   * If true, shows a loading spinner in place of the message icon of the InlinePrompt\n   * @default false\n   */\n  messageLoading?: boolean;\n  description?: React.ReactNode;\n  /** @deprecated Use `message` and `type={Sentiment.NEGATIVE}` prop instead. */\n  error?: React.ReactNode;\n  /** @default Sentiment.NEUTRAL */\n  sentiment?: InlinePromptProps['sentiment'];\n  className?: string;\n  children?: React.ReactNode;\n};\n\nexport const Field = ({\n  id,\n  label,\n  required = true,\n  message: propMessage,\n  messageIconLabel,\n  messageLoading,\n  hint,\n  description = hint,\n  sentiment: propType = Sentiment.NEUTRAL,\n  className,\n  children,\n  ...props\n}: FieldProps) => {\n  const labelRef = useRef<HTMLLabelElement>(null);\n  const sentiment = props.error ? Sentiment.NEGATIVE : propType;\n  const message = propMessage || props.error;\n  const hasError = sentiment === Sentiment.NEGATIVE;\n\n  const labelId = useId();\n\n  const fallbackInputId = useId();\n  const inputId = id !== null ? (id ?? fallbackInputId) : undefined;\n\n  const messageId = useId();\n  const descriptionId = useId();\n\n  /**\n   * form control can have multiple messages to describe it,\n   * e.g the description underneath the label and inline alert\n   */\n  function ariaDescribedbyByIds() {\n    const messageIds = [];\n    if (description) {\n      messageIds.push(descriptionId);\n    }\n    if (message) {\n      messageIds.push(messageId);\n    }\n    return messageIds.length > 0 ? messageIds.join(' ') : undefined;\n  }\n\n  return (\n    <FieldLabelContextProvider value={{ id: labelId, ref: labelRef }}>\n      <InputIdContextProvider value={inputId}>\n        <InputDescribedByProvider value={ariaDescribedbyByIds()}>\n          <InputInvalidProvider value={hasError}>\n            <div\n              className={clsx(\n                'np-field form-group d-block',\n                {\n                  'has-success': sentiment === Sentiment.POSITIVE,\n                  'has-warning': sentiment === Sentiment.WARNING,\n                  'has-error': hasError,\n                  'has-info': sentiment === Sentiment.NEUTRAL,\n                },\n                className,\n              )}\n            >\n              {label != null ? (\n                <>\n                  <Label ref={labelRef} id={labelId} htmlFor={inputId}>\n                    {required ? label : <Label.Optional>{label}</Label.Optional>}\n                  </Label>\n                  <Label.Description id={descriptionId}>{description}</Label.Description>\n                  <div className=\"np-field-control\">{children}</div>\n                </>\n              ) : (\n                children\n              )}\n\n              {message && (\n                <InlinePrompt\n                  sentiment={sentiment}\n                  id={messageId}\n                  mediaLabel={messageIconLabel}\n                  className=\"np-field__prompt\"\n                  loading={messageLoading}\n                  width=\"full\"\n                >\n                  {message}\n                </InlinePrompt>\n              )}\n            </div>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/flowNavigation/FlowNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  logo?: React.ReactNode;\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}
+{"version":3,"file":"FlowNavigation.mjs","sources":["../../src/flowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Breakpoint, Layout } from '../common';\nimport { CloseButton } from '../common/closeButton';\nimport FlowHeader from '../common/flowHeader/FlowHeader';\nimport Logo from '../logo';\nimport Stepper, { type Step } from '../stepper/Stepper';\n\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport messages from './FlowNavigation.messages';\nimport AnimatedLabel from './animatedLabel';\nimport IconButton from '../iconButton';\nimport { ArrowLeft } from '@transferwise/icons';\n\nexport interface FlowNavigationProps {\n  /** @default 0 */\n  activeStep?: number;\n  avatar?: React.ReactNode;\n  /** @default <Logo /> */\n  logo?: React.ReactNode;\n  /** @default false */\n  done?: boolean;\n  /** Called when the close button is clicked. If not provided the close button won't show */\n  onClose?: () => void;\n  /** Called when the back button is clicked. If not provided the back button won't show. The back button only shows on small screens */\n  onGoBack?: () => void;\n  /** Steps to be displayed in stepper. If you don't need the stepper, please use OverlayHeader instead */\n  steps: readonly Step[];\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = <Logo />,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const newAvatar = done ? null : avatar;\n\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  return (\n    <div\n      className={clsx('np-flow-navigation d-flex align-items-center justify-content-center p-y-3', {\n        'np-flow-navigation--border-bottom': !done,\n      })}\n    >\n      <FlowHeader\n        className={clsx(\n          'np-flow-navigation__content p-x-3',\n          screenSm == null\n            ? 'np-flow-navigation--hidden'\n            : {\n                'np-flow-navigation--xs-max': !screenSm,\n                // Size switches on parent container which may or may not have the same size as the window.\n                'np-flow-navigation--sm': screenSm,\n                'np-flow-navigation--lg': screenLg,\n              },\n        )}\n        leftContent={\n          <>\n            {!screenSm && displayGoBack ? (\n              <IconButton\n                size={40}\n                priority=\"tertiary\"\n                type=\"default\"\n                aria-label={intl.formatMessage(messages.back)}\n                onClick={onGoBack}\n              >\n                <ArrowLeft />\n              </IconButton>\n            ) : (\n              <div className=\"np-flow-header__left\">{logo}</div>\n            )}\n            {!screenSm && !done && (\n              <AnimatedLabel className=\"m-x-1\" steps={steps} activeLabel={activeStep} />\n            )}\n          </>\n        }\n        rightContent={\n          <div className=\"np-flow-header__right d-flex align-items-center justify-content-end order-2--lg\">\n            {newAvatar}\n            {newAvatar && closeButton && <span className=\"m-x-1\" />}\n            {closeButton}\n          </div>\n        }\n        bottomContent={\n          !done && (\n            <Stepper\n              activeStep={activeStep}\n              steps={steps}\n              className={clsx('np-flow-navigation__stepper')}\n            />\n          )\n        }\n        layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n      />\n    </div>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["FlowNavigation","activeStep","avatar","logo","_jsx","Logo","done","onClose","onGoBack","steps","intl","useIntl","closeButton","CloseButton","size","onClick","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","newAvatar","displayGoBack","className","clsx","children","FlowHeader","leftContent","_jsxs","_Fragment","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL"],"mappings":"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"}

package/build/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: ReactNode;\n\n  /** Optional prop to specify the level of the Header */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      disabled={action.disabled}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\n  );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   * @default 'h5'\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: ReactNode;\n\n  /**\n   * Optional prop to specify the level of the Header\n   * @default 'group'\n   */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      disabled={action.disabled}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\n  );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/header/Header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: ReactNode;\n\n  /** Optional prop to specify the level of the Header */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      disabled={action.disabled}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\n  );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAMA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,GAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,SAAS,EAAC,0BAA0B;IACpC,YAAA,EAAYJ,MAAM,CAAC,YAAY,CAAE;IACjCK,IAAI,EAAE,MAAM,IAAIL,MAAM,GAAGA,MAAM,CAACK,IAAI,GAAGC,SAAU;IACjDC,MAAM,EAAE,QAAQ,IAAIP,MAAM,GAAGA,MAAM,CAACO,MAAM,GAAGD,SAAU;IACvDE,QAAQ,EAAER,MAAM,CAACQ,QAAS;IAC1BC,OAAO,EAAET,MAAM,CAACS,OAAQ;IAAAC,QAAA,EAEvBV,MAAM,CAACW;AAAI,GACR,CAAC;AAEX,CAAC,CAAC;AAEFd,YAAY,CAACe,WAAW,GAAG,cAAc;AAEzC;;;;;;;;;;AAUG;AACH,MAAMC,MAAM,gBAAmCf,cAAK,CAACC,UAAU,CAC7D,CACE;AAAEe,EAAAA,EAAE,GAAG,IAAI;EAAEd,MAAM;EAAEI,SAAS;EAAEW,MAAM;EAAEC,KAAK;AAAEC,EAAAA,KAAK,GAAG,OAAO;EAAE,GAAGC;AAAK,CAAE,EAC1EjB,GAAuE,KACrE;AACF,EAAA,MAAMkB,WAAW,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,UAAU,CAACC,WAAW,GAAGD,UAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAAC,WAAW,EAAEtB,SAAS,EAAE;IACjD,kBAAkB,EAAEa,KAAK,KAAK;AAC/B,GAAA,CAAC;AAEF,EAAA,MAAMU,WAAW,GAAG;AAClBvB,IAAAA,SAAS,EAAEqB,aAAa;AACxB,IAAA,aAAa,EAAEV;GAChB;AAEDa,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;AAC7C,MAAA,IAAI,CAACC,aAAa,IAAIA,aAAa,CAACC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACxEC,QAAAA,OAAO,CAACC,IAAI,CACV,oGAAoG,CACrG;AACH,MAAA;AACF,IAAA;AACF,EAAA,CAAC,EAAE,CAACpB,EAAE,CAAC,CAAC;EAER,IAAI,CAACd,MAAM,EAAE;IACX,oBACEE,GAAA,CAACiC,KAAK,EAAA;AAAClC,MAAAA,GAAG,EAAEkB,WAAY;AAACL,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAAA,MAAA,GAAKM,WAAW;AAAA,MAAA,GAAMT,KAAK;AAAAR,MAAAA,QAAA,EAC/EM;AAAK,KACD,CAAC;AAEZ,EAAA;AAEA,EAAA,oBACEqB,IAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEjB,IAAAA,GAAG,EAAEA,GAAiC;IAAAS,QAAA,EAAA,cACrER,GAAA,CAACiC,KAAK,EAAA;AAACrB,MAAAA,EAAE,EAAEA,EAAG;AAACsB,MAAAA,IAAI,EAAEf,eAAgB;AAACjB,MAAAA,SAAS,EAAC,kBAAkB;AAAAM,MAAAA,QAAA,EAC/DM;AAAK,KACD,CACP,eAAAd,GAAA,CAACL,YAAY,EAAA;AAACG,MAAAA,MAAM,EAAEA;AAAO,KAAA,CAC/B;AAAA,GAAK,CAAC;AAEV,CAAC;AAGHa,MAAM,CAACD,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';\n\ntype ActionProps = AriaLabelProperty & {\n  text: string;\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n};\n\ntype ButtonActionProps = ActionProps;\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n  /**\n   * Optional prop to define the action for the header. If the `href` property\n   * is provided, a `Link` will be rendered instead of a `Button`.\n   */\n  action?: ButtonActionProps | LinkActionProps;\n\n  /**\n   * Option prop to specify DOM render element of the title\n   *\n   * - When `as=\"legend\"`, the `Header` will render as a `<legend>` element.\n   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.\n   *   If this condition is not met, a warning will be logged to the console.\n   *\n   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.\n   * @default 'h5'\n   */\n  as?: Heading | 'legend' | 'header';\n\n  /** Required prop to set the title of the Header. */\n  title: ReactNode;\n\n  /**\n   * Optional prop to specify the level of the Header\n   * @default 'group'\n   */\n  level?: 'section' | 'group';\n\n  className?: string;\n  testId?: string;\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  { action: ButtonActionProps | LinkActionProps }\n>(({ action }, ref) => {\n  return (\n    <Link\n      className=\"np-header__action-button\"\n      aria-label={action['aria-label']}\n      href={'href' in action ? action.href : undefined}\n      target={'target' in action ? action.target : undefined}\n      disabled={action.disabled}\n      onClick={action.onClick}\n    >\n      {action.text}\n    </Link>\n  );\n});\n\nHeaderAction.displayName = 'HeaderAction';\n\n/**\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.\n * @param {string} [className]\n * @param {string} [testId]\n *\n * @see {@link Header } for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n  (\n    { as = 'h5', action, className, testId, title, level = 'group', ...props },\n    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n  ) => {\n    const internalRef = useRef<HTMLLegendElement>(null);\n    const levelTypography =\n      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;\n    const headerClasses = clsx('np-header', className, {\n      'np-header--group': level === 'group',\n    });\n\n    const commonProps = {\n      className: headerClasses,\n      'data-testid': testId,\n    };\n\n    useEffect(() => {\n      if (as === 'legend' && internalRef.current) {\n        const { parentElement } = internalRef.current;\n        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n          console.warn(\n            'Legends should be the first child in a fieldset, and this is not possible when including an action',\n          );\n        }\n      }\n    }, [as]);\n\n    if (!action) {\n      return (\n        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>\n          {title}\n        </Title>\n      );\n    }\n\n    return (\n      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n        <Title as={as} type={levelTypography} className=\"np-header__title\">\n          {title}\n        </Title>\n        <HeaderAction action={action} />\n      </div>\n    );\n  },\n);\n\nHeader.displayName = 'Header';\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","_jsx","Link","className","href","undefined","target","disabled","onClick","children","text","displayName","Header","as","testId","title","level","props","internalRef","useRef","levelTypography","Typography","TITLE_GROUP","TITLE_SUBSECTION","headerClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","_jsxs"],"mappings":"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"}

package/build/iconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  /** @default 48 */\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** @default 'primary' */\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  /** @default 'default' */\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,gBAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,cAAA,CAACC,cAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,uBAAe,GAAGC,uBAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,SAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}

package/build/iconButton/IconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAiBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}
+{"version":3,"file":"IconButton.mjs","sources":["../../src/iconButton/IconButton.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport Circle from '../common/circle';\nimport { clsx } from 'clsx';\n\nexport type Props = {\n  /** @default 48 */\n  size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n  /** @default 'primary' */\n  priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';\n  /** @default 'default' */\n  type?: 'default' | 'negative';\n  'data-testid'?: string;\n} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &\n  Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &\n  Pick<\n    HTMLAttributes<HTMLDivElement>,\n    'id' | 'className' | 'role' | 'children' | 'aria-label' | 'tabIndex'\n  >;\n\nconst IconButton = forwardRef(function IconButton(\n  {\n    size = 48,\n    href = '#',\n    children,\n    className,\n    priority = 'primary',\n    type = 'default',\n    ...props\n  }: Props,\n  ref,\n) {\n  const isLink = href !== '#';\n  return (\n    // @ts-expect-error it's either link or `button` element so it has `onClick` / `href`\n    <Circle\n      ref={ref}\n      as={isLink ? PrimitiveAnchor : PrimitiveButton}\n      size={size}\n      fixedSize\n      className={clsx(\n        'np-icon-button',\n        `np-icon-button-${priority}-${type}`,\n        {\n          disabled: props.disabled,\n        },\n        className,\n      )}\n      {...(isLink ? { href } : {})}\n      {...props}\n    >\n      {children}\n    </Circle>\n  );\n});\n\nexport default IconButton;\n"],"names":["IconButton","forwardRef","size","href","children","className","priority","type","props","ref","isLink","_jsx","Circle","as","PrimitiveAnchor","PrimitiveButton","fixedSize","clsx","disabled"],"mappings":";;;;;;;AAoBA,MAAMA,UAAU,gBAAGC,UAAU,CAAC,SAASD,UAAUA,CAC/C;AACEE,EAAAA,IAAI,GAAG,EAAE;AACTC,EAAAA,IAAI,GAAG,GAAG;EACVC,QAAQ;EACRC,SAAS;AACTC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,IAAI,GAAG,SAAS;EAChB,GAAGC;AAAK,CACF,EACRC,GAAG,EAAA;AAEH,EAAA,MAAMC,MAAM,GAAGP,IAAI,KAAK,GAAG;AAC3B,EAAA;AAAA;AACE;AACAQ,IAAAA,GAAA,CAACC,MAAM,EAAA;AACLH,MAAAA,GAAG,EAAEA,GAAI;AACTI,MAAAA,EAAE,EAAEH,MAAM,GAAGI,eAAe,GAAGC,eAAgB;AAC/Cb,MAAAA,IAAI,EAAEA,IAAK;MACXc,SAAS,EAAA,IAAA;MACTX,SAAS,EAAEY,IAAI,CACb,gBAAgB,EAChB,kBAAkBX,QAAQ,CAAA,CAAA,EAAIC,IAAI,CAAA,CAAE,EACpC;QACEW,QAAQ,EAAEV,KAAK,CAACU;OACjB,EACDb,SAAS,CACT;AAAA,MAAA,IACGK,MAAM,GAAG;AAAEP,QAAAA;OAAM,GAAG,EAAE,CAAA;AAAA,MAAA,GACvBK,KAAK;AAAAJ,MAAAA,QAAA,EAERA;KACK;AAAC;AAEb,CAAC;;;;"}

package/build/index.js

@@ -23,7 +23,7 @@ var Body = require('./body/Body.js');
 var Button_resolver = require('./button/Button.resolver.js');
 var IconButton = require('./iconButton/IconButton.js');
 var Carousel = require('./carousel/Carousel.js');
-var Card$1 = require('./card/Card.js');
+var Card = require('./card/Card.js');
 var Checkbox = require('./checkbox/Checkbox.js');
 var CheckboxButton = require('./checkboxButton/CheckboxButton.js');
 var CheckboxOption = require('./checkboxOption/CheckboxOption.js');
@@ -33,7 +33,7 @@ var Chip = require('./chips/Chip.js');
 var CircularButton = require('./circularButton/CircularButton.js');
 var Option = require('./common/Option/Option.js');
 var BottomSheet = require('./common/bottomSheet/BottomSheet.js');
-var Card = require('./common/card/Card.js');
+var BaseCard = require('./common/baseCard/BaseCard.js');
 var CriticalCommsBanner = require('./criticalBanner/CriticalCommsBanner.js');
 var DateInput = require('./dateInput/DateInput.js');
 var DateLookup = require('./dateLookup/DateLookup.js');
@@ -173,7 +173,7 @@ exports.Body = Body.default;
 exports.Button = Button_resolver.default;
 exports.IconButton = IconButton.default;
 exports.Carousel = Carousel.default;
-exports.Card = Card$1.default;
+exports.Card = Card.default;
 exports.Checkbox = Checkbox.default;
 exports.CheckboxButton = CheckboxButton.default;
 exports.CheckboxOption = CheckboxOption.default;
@@ -183,7 +183,7 @@ exports.Chip = Chip.default;
 exports.CircularButton = CircularButton.default;
 exports.Option = Option.default;
 exports.BottomSheet = BottomSheet.default;
-exports.BaseCard = Card.default;
+exports.BaseCard = BaseCard.default;
 exports.CriticalCommsBanner = CriticalCommsBanner.default;
 exports.DateInput = DateInput.default;
 exports.DateLookup = DateLookup.default;

package/build/index.mjs

@@ -31,7 +31,7 @@ export { default as Chip } from './chips/Chip.mjs';
 export { default as CircularButton } from './circularButton/CircularButton.mjs';
 export { default as Option } from './common/Option/Option.mjs';
 export { default as BottomSheet } from './common/bottomSheet/BottomSheet.mjs';
-export { default as BaseCard } from './common/card/Card.mjs';
+export { default as BaseCard } from './common/baseCard/BaseCard.mjs';
 export { default as CriticalCommsBanner } from './criticalBanner/CriticalCommsBanner.mjs';
 export { default as DateInput } from './dateInput/DateInput.mjs';
 export { default as DateLookup } from './dateLookup/DateLookup.mjs';

package/build/legacylistItem/LegacyListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
+{"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\n/**\n * @deprecated Use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}

package/build/legacylistItem/LegacyListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\n/**\n * @deprecated Please use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}
+{"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n  title: ReactNode;\n  value: ReactNode;\n  media?: ReactNode;\n  action?: ReactNode;\n  className?: string;\n  isContainerAligned?: boolean;\n  as?: ElementType;\n};\n\n/**\n * @deprecated Use `<ListItem />` instead.\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n  media,\n  action,\n  className,\n  title,\n  value,\n  isContainerAligned,\n  as = 'li',\n  ...rest\n}) => {\n  const Element = as;\n\n  return (\n    <Element\n      className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n        'p-x-2': !isContainerAligned,\n      })}\n      {...rest}\n    >\n      {media}\n\n      <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n        <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n          {title}\n        </Body>\n        {value && (\n          <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n            {value}\n          </Body>\n        )}\n      </div>\n\n      {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n    </Element>\n  );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAuBA,MAAMA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC;AAAI,CACR,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP;AAAK,OACF,CACP;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV;KAAY,CAAC,GAAG,IAAI;AAAA,GACvE,CAAC;AAEd;;;;"}

package/build/list/List.js.map

@@ -1 +1 @@
-{"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  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAYc,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,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}
+{"version":3,"file":"List.js","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  /** @default 'ul' */\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;;;;;AAac,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,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}

package/build/list/List.mjs.map

@@ -1 +1 @@
-{"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  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAYc,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,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}
+{"version":3,"file":"List.mjs","sources":["../../src/list/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\n\nexport interface ListProps {\n  /** @default 'ul' */\n  as?: 'ul' | 'ol' | 'div';\n  className?: string;\n  children?: React.ReactNode;\n  style?: React.CSSProperties;\n  id?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport default function List({ as: Element = 'ul', className, ...props }: ListProps) {\n  return <Element className={clsx('wds-list', 'list-unstyled', 'm-y-0', className)} {...props} />;\n}\n"],"names":["List","as","Element","className","props","_jsx","clsx"],"mappings":";;;;AAac,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,EAAE,OAAO,EAAEH,SAAS,CAAE;IAAA,GAAKC;AAAK,GAAC,CAAG;AACjG;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext, forwardRef } 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 = forwardRef<HTMLButtonElement, ListItemButtonProps>(\n  (\n    { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,\n    ref,\n  ) => {\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        ref={ref}\n        aria-describedby={`${buttonContentId} ${describedByIds}`}\n        {...(commonProps as NewButtonProps)}\n      />\n    );\n  },\n);\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","forwardRef","priority","partiallyInteractive","props","ref","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;;;AAwBO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CACE;AAAEC,EAAAA,QAAQ,GAAG,mBAAmB;EAAEC,oBAAoB;EAAE,GAAGC;CAA4B,EACvFC,GAAG,KACD;EACF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,QAAQ,EAAE;IAAEJ,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEI,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGR,KAAK;AACRS,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACX,oBAAoB,IAAIC,KAAK,CAACW,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACff,QAAQ;AACRgB,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGjB,KAAK,CAACW,IAAI,IAAIZ,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGK,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,cAAA,CAACC,uBAAU,EAAA;AACTlB,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGgB,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN,CAAC;AAGHZ,MAAM,CAACwB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemButton.js","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext, forwardRef } 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  /** @default 'secondary-neutral' */\n  priority?: NewButtonProps['priority'];\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 = forwardRef<HTMLButtonElement, ListItemButtonProps>(\n  (\n    { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,\n    ref,\n  ) => {\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        ref={ref}\n        aria-describedby={`${buttonContentId} ${describedByIds}`}\n        {...(commonProps as NewButtonProps)}\n      />\n    );\n  },\n);\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","forwardRef","priority","partiallyInteractive","props","ref","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;;;AA0BO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CACE;AAAEC,EAAAA,QAAQ,GAAG,mBAAmB;EAAEC,oBAAoB;EAAE,GAAGC;CAA4B,EACvFC,GAAG,KACD;EACF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,QAAQ,EAAE;IAAEJ,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEI,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGR,KAAK;AACRS,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACX,oBAAoB,IAAIC,KAAK,CAACW,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACff,QAAQ;AACRgB,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGjB,KAAK,CAACW,IAAI,IAAIZ,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGK,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,cAAA,CAACC,uBAAU,EAAA;AACTlB,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGgB,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN,CAAC;AAGHZ,MAAM,CAACwB,WAAW,GAAG,iBAAiB;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext, forwardRef } 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 = forwardRef<HTMLButtonElement, ListItemButtonProps>(\n  (\n    { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,\n    ref,\n  ) => {\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        ref={ref}\n        aria-describedby={`${buttonContentId} ${describedByIds}`}\n        {...(commonProps as NewButtonProps)}\n      />\n    );\n  },\n);\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","forwardRef","priority","partiallyInteractive","props","ref","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;AAwBO,MAAMA,MAAM,gBAAGC,UAAU,CAC9B,CACE;AAAEC,EAAAA,QAAQ,GAAG,mBAAmB;EAAEC,oBAAoB;EAAE,GAAGC;CAA4B,EACvFC,GAAG,KACD;EACF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAEJ,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEI,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGR,KAAK;AACRS,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACX,oBAAoB,IAAIC,KAAK,CAACW,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACff,QAAQ;AACRgB,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGjB,KAAK,CAACW,IAAI,IAAIZ,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGK,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,GAAA,CAACC,QAAU,EAAA;AACTlB,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGgB,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN,CAAC;AAGHZ,MAAM,CAACwB,WAAW,GAAG,iBAAiB;;;;"}
+{"version":3,"file":"ListItemButton.mjs","sources":["../../../src/listItem/Button/ListItemButton.tsx"],"sourcesContent":["import { useContext, forwardRef } 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  /** @default 'secondary-neutral' */\n  priority?: NewButtonProps['priority'];\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 = forwardRef<HTMLButtonElement, ListItemButtonProps>(\n  (\n    { priority = 'secondary-neutral', partiallyInteractive, ...props }: ListItemButtonProps,\n    ref,\n  ) => {\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        ref={ref}\n        aria-describedby={`${buttonContentId} ${describedByIds}`}\n        {...(commonProps as NewButtonProps)}\n      />\n    );\n  },\n);\n\nButton.displayName = 'ListItem.Button';\n"],"names":["Button","forwardRef","priority","partiallyInteractive","props","ref","baseItemProps","useListItemControl","ids","describedByIds","useContext","ListItemContext","commonProps","className","clsx","href","id","control","v2","size","disabled","buttonContentId","_jsx","ButtonComp","displayName"],"mappings":";;;;;;;AA0BO,MAAMA,MAAM,gBAAGC,UAAU,CAC9B,CACE;AAAEC,EAAAA,QAAQ,GAAG,mBAAmB;EAAEC,oBAAoB;EAAE,GAAGC;CAA4B,EACvFC,GAAG,KACD;EACF,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,QAAQ,EAAE;IAAEJ,oBAAoB;IAAE,GAAGC;AAAK,GAAE,CAAC;EAC1F,MAAM;IAAEI,GAAG;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAE3D,EAAA,MAAMC,WAAW,GAAG;AAClB,IAAA,GAAGR,KAAK;AACRS,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACX,oBAAoB,IAAIC,KAAK,CAACW,IAAI,IAAI,sCAAsC,CAC9E;IACDC,EAAE,EAAER,GAAG,CAACS,OAAO;IACff,QAAQ;AACRgB,IAAAA,EAAE,EAAE,IAAI;AACRC,IAAAA,IAAI,EAAE,IAAI;IACVC,QAAQ,EAAEd,aAAa,CAACc;GACzB;AAED,EAAA,MAAMC,eAAe,GAAGjB,KAAK,CAACW,IAAI,IAAIZ,oBAAoB,GAAG,EAAE,GAAG,CAAA,EAAGK,GAAG,CAACS,OAAO,CAAA,QAAA,CAAU;EAE1F,oBACEK,GAAA,CAACC,QAAU,EAAA;AACTlB,IAAAA,GAAG,EAAEA,GAAI;AACT,IAAA,kBAAA,EAAkB,CAAA,EAAGgB,eAAe,CAAA,CAAA,EAAIZ,cAAc,CAAA,CAAG;IAAA,GACpDG;AAA8B,GAAC,CACpC;AAEN,CAAC;AAGHZ,MAAM,CAACwB,WAAW,GAAG,iBAAiB;;;;"}

package/build/listItem/IconButton/ListItemIconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemIconButton.js","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n  IconButtonProps,\n  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n  children: ReactNode;\n  partiallyInteractive?: boolean;\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--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---icon-button) for details.\n */\nexport const IconButton = function ({\n  priority = 'minimal',\n  'aria-label': ariaLabel,\n  ...props\n}: ListItemIconButtonProps) {\n  const { partiallyInteractive, ...restProps } = props;\n\n  const { ids, props: itemProps } = useContext(ListItemContext);\n  const { baseItemProps } = useListItemControl('icon-button', {\n    partiallyInteractive,\n    ...restProps,\n  });\n\n  const getAriaProps = () => {\n    const labelIds = [\n      itemProps.inverted ? ids.subtitle : ids.title,\n      itemProps.inverted ? ids.title : ids.subtitle,\n      itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n      itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n    ].join(' ');\n    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n    if (ariaLabel) {\n      return {\n        'aria-label': ariaLabel,\n        'aria-describedby': labelIds.concat(descriptorIds),\n      };\n    }\n\n    return {\n      'aria-labelledby': labelIds,\n      'aria-describedby': descriptorIds,\n    };\n  };\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      {...getAriaProps()}\n      className={clsx(\n        'wds-list-item-control',\n        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n      )}\n      id={ids.control}\n      size={40}\n      priority={priority}\n      disabled={baseItemProps.disabled}\n    />\n  );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"ListItemIconButton.js","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n  IconButtonProps,\n  'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n  children: ReactNode;\n  partiallyInteractive?: boolean;\n  /** @default 'minimal' */\n  priority?: IconButtonProps['priority'];\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--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---icon-button) for details.\n */\nexport const IconButton = function ({\n  priority = 'minimal',\n  'aria-label': ariaLabel,\n  ...props\n}: ListItemIconButtonProps) {\n  const { partiallyInteractive, ...restProps } = props;\n\n  const { ids, props: itemProps } = useContext(ListItemContext);\n  const { baseItemProps } = useListItemControl('icon-button', {\n    partiallyInteractive,\n    ...restProps,\n  });\n\n  const getAriaProps = () => {\n    const labelIds = [\n      itemProps.inverted ? ids.subtitle : ids.title,\n      itemProps.inverted ? ids.title : ids.subtitle,\n      itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n      itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n    ].join(' ');\n    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n    if (ariaLabel) {\n      return {\n        'aria-label': ariaLabel,\n        'aria-describedby': labelIds.concat(descriptorIds),\n      };\n    }\n\n    return {\n      'aria-labelledby': labelIds,\n      'aria-describedby': descriptorIds,\n    };\n  };\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      {...getAriaProps()}\n      className={clsx(\n        'wds-list-item-control',\n        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n      )}\n      id={ids.control}\n      size={40}\n      priority={priority}\n      disabled={baseItemProps.disabled}\n    />\n  );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;;;AAuBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,qCAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,cAAA,CAACC,oBAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,SAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/IconButton/ListItemIconButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemIconButton.mjs","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n  IconButtonProps,\n  'priority' | 'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n  children: ReactNode;\n  partiallyInteractive?: boolean;\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--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---icon-button) for details.\n */\nexport const IconButton = function ({\n  priority = 'minimal',\n  'aria-label': ariaLabel,\n  ...props\n}: ListItemIconButtonProps) {\n  const { partiallyInteractive, ...restProps } = props;\n\n  const { ids, props: itemProps } = useContext(ListItemContext);\n  const { baseItemProps } = useListItemControl('icon-button', {\n    partiallyInteractive,\n    ...restProps,\n  });\n\n  const getAriaProps = () => {\n    const labelIds = [\n      itemProps.inverted ? ids.subtitle : ids.title,\n      itemProps.inverted ? ids.title : ids.subtitle,\n      itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n      itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n    ].join(' ');\n    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n    if (ariaLabel) {\n      return {\n        'aria-label': ariaLabel,\n        'aria-describedby': labelIds.concat(descriptorIds),\n      };\n    }\n\n    return {\n      'aria-labelledby': labelIds,\n      'aria-describedby': descriptorIds,\n    };\n  };\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      {...getAriaProps()}\n      className={clsx(\n        'wds-list-item-control',\n        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n      )}\n      id={ids.control}\n      size={40}\n      priority={priority}\n      disabled={baseItemProps.disabled}\n    />\n  );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;AAqBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"ListItemIconButton.mjs","sources":["../../../src/listItem/IconButton/ListItemIconButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useContext, type ReactNode } from 'react';\nimport IconButtonComp, { type IconButtonProps } from '../../iconButton';\nimport { useListItemControl } from '../useListItemControl';\nimport { ListItemContext } from '../ListItemContext';\n\nexport type ListItemIconButtonProps = Pick<\n  IconButtonProps,\n  'type' | 'onClick' | 'href' | 'target' | 'aria-label'\n> & {\n  children: ReactNode;\n  partiallyInteractive?: boolean;\n  /** @default 'minimal' */\n  priority?: IconButtonProps['priority'];\n};\n\n/**\n * This component allows for rendering a IconButton control. It's a thin wrapper around the\n * [IconButton component](https://storybook.wise.design/?path=/docs/actions-iconbutton--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---icon-button) for details.\n */\nexport const IconButton = function ({\n  priority = 'minimal',\n  'aria-label': ariaLabel,\n  ...props\n}: ListItemIconButtonProps) {\n  const { partiallyInteractive, ...restProps } = props;\n\n  const { ids, props: itemProps } = useContext(ListItemContext);\n  const { baseItemProps } = useListItemControl('icon-button', {\n    partiallyInteractive,\n    ...restProps,\n  });\n\n  const getAriaProps = () => {\n    const labelIds = [\n      itemProps.inverted ? ids.subtitle : ids.title,\n      itemProps.inverted ? ids.title : ids.subtitle,\n      itemProps.inverted ? ids.valueSubtitle : ids.valueTitle,\n      itemProps.inverted ? ids.valueTitle : ids.valueSubtitle,\n    ].join(' ');\n    const descriptorIds = [ids.additionalInfo, ids.prompt].join(' ');\n\n    if (ariaLabel) {\n      return {\n        'aria-label': ariaLabel,\n        'aria-describedby': labelIds.concat(descriptorIds),\n      };\n    }\n\n    return {\n      'aria-labelledby': labelIds,\n      'aria-describedby': descriptorIds,\n    };\n  };\n\n  return (\n    <IconButtonComp\n      {...restProps}\n      {...getAriaProps()}\n      className={clsx(\n        'wds-list-item-control',\n        !partiallyInteractive && props.href && 'wds-list-item-control_pseudo-element',\n      )}\n      id={ids.control}\n      size={40}\n      priority={priority}\n      disabled={baseItemProps.disabled}\n    />\n  );\n};\n\nIconButton.displayName = 'ListItem.IconButton';\n"],"names":["IconButton","priority","ariaLabel","props","partiallyInteractive","restProps","ids","itemProps","useContext","ListItemContext","baseItemProps","useListItemControl","getAriaProps","labelIds","inverted","subtitle","title","valueSubtitle","valueTitle","join","descriptorIds","additionalInfo","prompt","concat","_jsx","IconButtonComp","className","clsx","href","id","control","size","disabled","displayName"],"mappings":";;;;;;;AAuBO,MAAMA,UAAU,GAAG,UAAU;AAClCC,EAAAA,QAAQ,GAAG,SAAS;AACpB,EAAA,YAAY,EAAEC,SAAS;EACvB,GAAGC;AAAK,CACgB,EAAA;EACxB,MAAM;IAAEC,oBAAoB;IAAE,GAAGC;AAAS,GAAE,GAAGF,KAAK;EAEpD,MAAM;IAAEG,GAAG;AAAEH,IAAAA,KAAK,EAAEI;AAAS,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;EAC7D,MAAM;AAAEC,IAAAA;AAAa,GAAE,GAAGC,kBAAkB,CAAC,aAAa,EAAE;IAC1DP,oBAAoB;IACpB,GAAGC;AACJ,GAAA,CAAC;EAEF,MAAMO,YAAY,GAAGA,MAAK;IACxB,MAAMC,QAAQ,GAAG,CACfN,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACS,QAAQ,GAAGT,GAAG,CAACU,KAAK,EAC7CT,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACU,KAAK,GAAGV,GAAG,CAACS,QAAQ,EAC7CR,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACW,aAAa,GAAGX,GAAG,CAACY,UAAU,EACvDX,SAAS,CAACO,QAAQ,GAAGR,GAAG,CAACY,UAAU,GAAGZ,GAAG,CAACW,aAAa,CACxD,CAACE,IAAI,CAAC,GAAG,CAAC;AACX,IAAA,MAAMC,aAAa,GAAG,CAACd,GAAG,CAACe,cAAc,EAAEf,GAAG,CAACgB,MAAM,CAAC,CAACH,IAAI,CAAC,GAAG,CAAC;AAEhE,IAAA,IAAIjB,SAAS,EAAE;MACb,OAAO;AACL,QAAA,YAAY,EAAEA,SAAS;AACvB,QAAA,kBAAkB,EAAEW,QAAQ,CAACU,MAAM,CAACH,aAAa;OAClD;AACH,IAAA;IAEA,OAAO;AACL,MAAA,iBAAiB,EAAEP,QAAQ;AAC3B,MAAA,kBAAkB,EAAEO;KACrB;EACH,CAAC;EAED,oBACEI,GAAA,CAACC,YAAc,EAAA;AAAA,IAAA,GACTpB,SAAS;IAAA,GACTO,YAAY,EAAE;AAClBc,IAAAA,SAAS,EAAEC,IAAI,CACb,uBAAuB,EACvB,CAACvB,oBAAoB,IAAID,KAAK,CAACyB,IAAI,IAAI,sCAAsC,CAC7E;IACFC,EAAE,EAAEvB,GAAG,CAACwB,OAAQ;AAChBC,IAAAA,IAAI,EAAE,EAAG;AACT9B,IAAAA,QAAQ,EAAEA,QAAS;IACnB+B,QAAQ,EAAEtB,aAAa,CAACsB;AAAS,GAAA,CACjC;AAEN;AAEAhC,UAAU,CAACiC,WAAW,GAAG,qBAAqB;;;;"}

package/build/listItem/Image/ListItemImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n  /**\n   * The size of square container for the image, matching available avatar sizes.\n   */\n  size?: ListItemMediaSize;\n  /**\n   * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n   */\n  alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n  useListItemMedia(size);\n\n  return (\n    <div\n      className={clsx('wds-list-item-media-image-wrapper')}\n      style={\n        {\n          '--wds-list-item-media-size': `${size}px`,\n        } as React.CSSProperties\n      }\n    >\n      <ImageComp\n        {...props}\n        className={clsx(className, 'wds-list-item-media-image')}\n        alt={alt}\n        role={alt ? undefined : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AAyBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"ListItemImage.js","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n  /**\n   * The size of square container for the image, matching available avatar sizes.\n   * @default 48\n   */\n  size?: ListItemMediaSize;\n  /**\n   * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n   * @default ''\n   */\n  alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n  useListItemMedia(size);\n\n  return (\n    <div\n      className={clsx('wds-list-item-media-image-wrapper')}\n      style={\n        {\n          '--wds-list-item-media-size': `${size}px`,\n        } as React.CSSProperties\n      }\n    >\n      <ImageComp\n        {...props}\n        className={clsx(className, 'wds-list-item-media-image')}\n        alt={alt}\n        role={alt ? undefined : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;;;AA2BO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,iCAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,cAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,SAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,cAAA,CAACI,eAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,SAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}

package/build/listItem/Image/ListItemImage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n  /**\n   * The size of square container for the image, matching available avatar sizes.\n   */\n  size?: ListItemMediaSize;\n  /**\n   * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n   */\n  alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n  useListItemMedia(size);\n\n  return (\n    <div\n      className={clsx('wds-list-item-media-image-wrapper')}\n      style={\n        {\n          '--wds-list-item-media-size': `${size}px`,\n        } as React.CSSProperties\n      }\n    >\n      <ImageComp\n        {...props}\n        className={clsx(className, 'wds-list-item-media-image')}\n        alt={alt}\n        role={alt ? undefined : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AAyBO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}
+{"version":3,"file":"ListItemImage.mjs","sources":["../../../src/listItem/Image/ListItemImage.tsx"],"sourcesContent":["import ImageComp, { type ImageProps } from '../../image';\nimport { clsx } from 'clsx';\nimport { useListItemMedia } from '../useListItemMedia';\nimport { ListItemMediaSize } from '../ListItemContext';\n\nexport type ListItemImageProps = Omit<ImageProps, 'stretch' | 'shrink' | 'id' | 'alt' | 'role'> & {\n  /**\n   * The size of square container for the image, matching available avatar sizes.\n   * @default 48\n   */\n  size?: ListItemMediaSize;\n  /**\n   * When unset, it will force `role=\"presentation\"` on the image. Otherwise, the image will use its implicit img role.\n   * @default ''\n   */\n  alt?: string;\n};\n\n/**\n * This component should be used as a last resort, for rare cases when `<ListItem.AvatarView />`\n * or `<ListItem.AvatarLayout />` are insufficient.\n * It's a wrapper around the\n * [Image component](https://storybook.wise.design/?path=/docs/content-image--docs), but offers only\n * a subset of its props, in line with the ListItem's constraints.\n *\n * > **NB**: This component is [not intended for use with illustrations](https://wise.design/foundations/illustration#scale).\n */\nexport const Image = ({ alt = '', size = 48, className, ...props }: ListItemImageProps) => {\n  useListItemMedia(size);\n\n  return (\n    <div\n      className={clsx('wds-list-item-media-image-wrapper')}\n      style={\n        {\n          '--wds-list-item-media-size': `${size}px`,\n        } as React.CSSProperties\n      }\n    >\n      <ImageComp\n        {...props}\n        className={clsx(className, 'wds-list-item-media-image')}\n        alt={alt}\n        role={alt ? undefined : 'presentation'}\n      />\n    </div>\n  );\n};\nImage.displayName = 'ListItem.Image';\n"],"names":["Image","alt","size","className","props","useListItemMedia","_jsx","clsx","style","children","ImageComp","role","undefined","displayName"],"mappings":";;;;;AA2BO,MAAMA,KAAK,GAAGA,CAAC;AAAEC,EAAAA,GAAG,GAAG,EAAE;AAAEC,EAAAA,IAAI,GAAG,EAAE;EAAEC,SAAS;EAAE,GAAGC;AAAK,CAAsB,KAAI;EACxFC,gBAAgB,CAACH,IAAI,CAAC;AAEtB,EAAA,oBACEI,GAAA,CAAA,KAAA,EAAA;AACEH,IAAAA,SAAS,EAAEI,IAAI,CAAC,mCAAmC,CAAE;AACrDC,IAAAA,KAAK,EACH;MACE,4BAA4B,EAAE,GAAGN,IAAI,CAAA,EAAA;KAExC;IAAAO,QAAA,eAEDH,GAAA,CAACI,OAAS,EAAA;AAAA,MAAA,GACJN,KAAK;AACTD,MAAAA,SAAS,EAAEI,IAAI,CAACJ,SAAS,EAAE,2BAA2B,CAAE;AACxDF,MAAAA,GAAG,EAAEA,GAAI;AACTU,MAAAA,IAAI,EAAEV,GAAG,GAAGW,SAAS,GAAG;KAAe;AAE3C,GAAK,CAAC;AAEV;AACAZ,KAAK,CAACa,WAAW,GAAG,gBAAgB;;;;"}