@transferwise/components 46.161.0 → 46.161.2

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, type ReactNode } from 'react';\n\nimport { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type ExpressiveMoneyInputProps = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [motion](https://www.npmjs.com/package/motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: ExpressiveMoneyInputProps) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}
+{"version":3,"file":"ExpressiveMoneyInput.js","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, type ReactNode } from 'react';\n\nimport { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type ExpressiveMoneyInputProps = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [motion](https://www.npmjs.com/package/motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: ExpressiveMoneyInputProps) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressiveMoneyInput.messages.js","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  currencySelectorSearchPlaceholder: {\n    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n    defaultMessage: 'Type a currency / country',\n  },\n\n  currencySelectorSelectCurrency: {\n    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n    defaultMessage: 'Select currency',\n  },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"ExpressiveMoneyInput.messages.js","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  currencySelectorSearchPlaceholder: {\n    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n    defaultMessage: 'Type a currency / country',\n  },\n\n  currencySelectorSelectCurrency: {\n    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n    defaultMessage: 'Select currency',\n  },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;"}

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressiveMoneyInput.messages.mjs","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  currencySelectorSearchPlaceholder: {\n    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n    defaultMessage: 'Type a currency / country',\n  },\n\n  currencySelectorSelectCurrency: {\n    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n    defaultMessage: 'Select currency',\n  },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"ExpressiveMoneyInput.messages.mjs","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  currencySelectorSearchPlaceholder: {\n    id: 'neptune.ExpressiveMoneyInput.currency.search.placeholder',\n    defaultMessage: 'Type a currency / country',\n  },\n\n  currencySelectorSelectCurrency: {\n    id: 'neptune.ExpressiveMoneyInput.currency.select.currency',\n    defaultMessage: 'Select currency',\n  },\n});\n"],"names":["defineMessages","currencySelectorSearchPlaceholder","id","currencySelectorSelectCurrency"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,iCAAiC,EAAE;IACjCC,EAAE,EAAA;GAEH;AAEDC,EAAAA,8BAA8B,EAAE;IAC9BD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;"}

package/build/ExpressiveMoneyInput/ExpressiveMoneyInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, type ReactNode } from 'react';\n\nimport { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type ExpressiveMoneyInputProps = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [motion](https://www.npmjs.com/package/motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: ExpressiveMoneyInputProps) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}
+{"version":3,"file":"ExpressiveMoneyInput.mjs","sources":["../../src/ExpressiveMoneyInput/ExpressiveMoneyInput.tsx"],"sourcesContent":["import Body from '../Body';\nimport { clsx } from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { useId, type ReactNode } from 'react';\n\nimport { CurrencySelector, type CurrencySelectorProps } from './CurrencySelector/CurrencySelector';\nimport { CommonProps } from '../common';\nimport { AmountInput } from './AmountInput/AmountInput';\nimport { Chevron } from './Chevron/Chevron';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt/InlinePrompt';\nimport Label from '../Label';\n\ntype AmountType = number | null;\nexport type CurrencyType = string;\n\ntype DefaultCurrencySelectorInstanceType = Pick<\n  CurrencySelectorProps,\n  'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'\n>;\ntype CustomCurrencySelectorInstanceType = {\n  customRender?: (props: { id: string; labelId: string }) => ReactNode;\n};\ntype CurrencySelectorType = DefaultCurrencySelectorInstanceType &\n  CustomCurrencySelectorInstanceType;\n\nexport type ExpressiveMoneyInputProps = {\n  label?: ReactNode;\n  currencySelector?: CurrencySelectorType;\n  amount?: AmountType;\n  /**\n   * The currency code, e.g. `USD`, `EUR`, `GBP`, etc. Governs the flag rendered in the currency selector.\n   */\n  currency: CurrencyType;\n  inlinePrompt?: {\n    sentiment?: InlinePromptProps['sentiment'];\n    message: InlinePromptProps['children'];\n    media?: InlinePromptProps['media'];\n  };\n  showChevron?: boolean;\n  /**\n   * If set, it auto-focuses the amount input upon component mount.<br />\n   * ⚠️ **Use with caution**, as it may impact user experience and\n   * fail [WCAG 2.4.3 requirements](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)\n   */\n  autoFocus?: boolean;\n  /**\n   * Dims the input to indicate a loading state. Does not disable it.\n   */\n  loading?: boolean;\n  onAmountChange: (amount: AmountType) => void;\n  onFocusChange?: (focused: boolean) => void;\n} & CommonProps;\n\n/**\n * This component has been kindly contributed by our friends at the `Send` team 🎉.\n *\n * Some patterns and implementation details used in this component may differ\n * from what's commonly used in the Design System. The overall build and QA was managed\n * by the contributing team directly, and such did not follow a typical DS lifecycle.\n *\n * While we house this component and will help facilitate its future iterations,\n * direct contributions by consuming product teams are highly encouraged.\n *\n * > ⚠️ **Prerequisite:** <br />The component depends on the\n * [motion](https://www.npmjs.com/package/motion) package, which has been\n * deliberately excluded from the Design System bundle and kept as an opt-in only.\n * **Make sure to add it to your project dependencies.**\n */\nexport default function ExpressiveMoneyInput({\n  label,\n  currency,\n  currencySelector = { options: [] },\n  amount,\n  onAmountChange,\n  className,\n  inlinePrompt,\n  showChevron,\n  autoFocus,\n  loading,\n  onFocusChange,\n}: ExpressiveMoneyInputProps) {\n  const inputId = useId();\n  const labelId = useId();\n  const customAlertId = useId();\n  const currencyId = useId();\n\n  return (\n    <div className={clsx('wds-expressive-money-input', className)}>\n      <Label id={labelId} htmlFor={inputId} className={clsx('m-b-1', 'font-weight-normal')}>\n        {label}\n      </Label>\n      <div\n        className={clsx('d-flex')}\n        role=\"group\"\n        aria-labelledby={labelId}\n        {...(inlinePrompt ? { 'aria-describedby': customAlertId } : {})}\n      >\n        <div className=\"wds-expressive-money-input-currency-selector\">\n          {currencySelector.customRender?.({ id: currencyId, labelId }) ?? (\n            <CurrencySelector\n              id={currencyId}\n              labelId={labelId}\n              currency={currency}\n              {...currencySelector}\n            />\n          )}\n        </div>\n        <AmountInput\n          id={inputId}\n          describedById={currencyId}\n          amount={amount}\n          currency={currency}\n          // eslint-disable-next-line jsx-a11y/no-autofocus\n          autoFocus={autoFocus}\n          loading={loading}\n          onChange={onAmountChange}\n          onFocusChange={onFocusChange}\n        />\n        <div className={clsx('d-flex align-items-center', 'wds-expressive-money-input-chevron')}>\n          <Chevron shouldShow={Boolean(showChevron)} />\n        </div>\n      </div>\n      <AnimatePresence initial={false}>\n        {inlinePrompt && (\n          <div className={clsx('d-flex justify-content-end', inlinePrompt && 'm-t-1')}>\n            <motion.div\n              key={customAlertId}\n              initial={{ opacity: 0, height: 0 }}\n              animate={{\n                opacity: 1,\n                height: 'auto',\n                transition: { delay: 0.75, duration: 0.3 },\n              }}\n              exit={{ opacity: 0, height: 0 }}\n            >\n              {inlinePrompt.sentiment && Object.keys(inlinePrompt.sentiment).length > 0 ? (\n                <InlinePrompt\n                  id={customAlertId}\n                  media={inlinePrompt.media}\n                  sentiment={inlinePrompt.sentiment}\n                >\n                  {inlinePrompt.message}\n                </InlinePrompt>\n              ) : (\n                <Body>{inlinePrompt.message}</Body>\n              )}\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"names":["ExpressiveMoneyInput","label","currency","currencySelector","options","amount","onAmountChange","className","inlinePrompt","showChevron","autoFocus","loading","onFocusChange","inputId","useId","labelId","customAlertId","currencyId","_jsxs","clsx","children","_jsx","Label","id","htmlFor","role","customRender","CurrencySelector","AmountInput","describedById","onChange","Chevron","shouldShow","Boolean","AnimatePresence","initial","motion","div","opacity","height","animate","transition","delay","duration","exit","sentiment","Object","keys","length","InlinePrompt","media","message","Body"],"mappings":"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"}

package/build/ExpressiveMoneyInput/hooks/useFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocus.js","sources":["../../../src/ExpressiveMoneyInput/hooks/useFocus.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst focusTimeout = 5 * 1000;\n\nexport const useFocus = () => {\n  const [focus, setFocus] = useState(false);\n  const [visualFocus, setVisualFocus] = useState(false);\n  const [counter, setCounter] = useState(0);\n\n  useEffect(() => {\n    if (focus) {\n      const timeout = setTimeout(() => {\n        setVisualFocus(false);\n      }, focusTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [focus, counter]);\n\n  return {\n    focus,\n    setFocus: (value: boolean) => {\n      setFocus(value);\n      if (value) {\n        setVisualFocus(true);\n      }\n      // any call to setFocus should reset the timeout, even if the input was already in focus\n      // updating the counter will trigger the useEffect to reset the timeout\n      setCounter((prev) => prev + 1);\n    },\n    visualFocus,\n    setVisualFocus: (value: boolean) => {\n      setVisualFocus(value);\n    },\n  };\n};\n"],"names":["focusTimeout","useFocus","focus","setFocus","useState","visualFocus","setVisualFocus","counter","setCounter","useEffect","timeout","setTimeout","clearTimeout","value","prev"],"mappings":";;;;AAEA,MAAMA,YAAY,GAAG,CAAC,GAAG,IAAI;AAEtB,MAAMC,QAAQ,GAAGA,MAAK;EAC3B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACzC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,cAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,cAAQ,CAAC,CAAC,CAAC;AAEzCK,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,KAAK,EAAE;AACT,MAAA,MAAMQ,OAAO,GAAGC,UAAU,CAAC,MAAK;QAC9BL,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAEN,YAAY,CAAC;AAChB,MAAA,OAAO,MAAMY,YAAY,CAACF,OAAO,CAAC;AACpC,IAAA;AACF,EAAA,CAAC,EAAE,CAACR,KAAK,EAAEK,OAAO,CAAC,CAAC;EAEpB,OAAO;IACLL,KAAK;IACLC,QAAQ,EAAGU,KAAc,IAAI;MAC3BV,QAAQ,CAACU,KAAK,CAAC;AACf,MAAA,IAAIA,KAAK,EAAE;QACTP,cAAc,CAAC,IAAI,CAAC;AACtB,MAAA;AACA;AACA;AACAE,MAAAA,UAAU,CAAEM,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;IAChC,CAAC;IACDT,WAAW;IACXC,cAAc,EAAGO,KAAc,IAAI;MACjCP,cAAc,CAACO,KAAK,CAAC;AACvB,IAAA;GACD;AACH;;;;"}
+{"version":3,"file":"useFocus.js","sources":["../../../src/ExpressiveMoneyInput/hooks/useFocus.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst focusTimeout = 5 * 1000;\n\nexport const useFocus = () => {\n  const [focus, setFocus] = useState(false);\n  const [visualFocus, setVisualFocus] = useState(false);\n  const [counter, setCounter] = useState(0);\n\n  useEffect(() => {\n    if (focus) {\n      const timeout = setTimeout(() => {\n        setVisualFocus(false);\n      }, focusTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [focus, counter]);\n\n  return {\n    focus,\n    setFocus: (value: boolean) => {\n      setFocus(value);\n      if (value) {\n        setVisualFocus(true);\n      }\n      // any call to setFocus should reset the timeout, even if the input was already in focus\n      // updating the counter will trigger the useEffect to reset the timeout\n      setCounter((prev) => prev + 1);\n    },\n    visualFocus,\n    setVisualFocus: (value: boolean) => {\n      setVisualFocus(value);\n    },\n  };\n};\n"],"names":["focusTimeout","useFocus","focus","setFocus","useState","visualFocus","setVisualFocus","counter","setCounter","useEffect","timeout","setTimeout","clearTimeout","value","prev"],"mappings":";;;;AAEA,MAAMA,YAAY,GAAG,CAAC,GAAG,IAAI;AAEtB,MAAMC,QAAQ,GAAGA,MAAK;EAC3B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EACzC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,cAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,cAAQ,CAAC,CAAC,CAAC;AAEzCK,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,KAAK,EAAE;AACT,MAAA,MAAMQ,OAAO,GAAGC,UAAU,CAAC,MAAK;QAC9BL,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAEN,YAAY,CAAC;AAChB,MAAA,OAAO,MAAMY,YAAY,CAACF,OAAO,CAAC;AACpC,IAAA;AACF,EAAA,CAAC,EAAE,CAACR,KAAK,EAAEK,OAAO,CAAC,CAAC;EAEpB,OAAO;IACLL,KAAK;IACLC,QAAQ,EAAGU,KAAc,IAAI;MAC3BV,QAAQ,CAACU,KAAK,CAAC;AACf,MAAA,IAAIA,KAAK,EAAE;QACTP,cAAc,CAAC,IAAI,CAAC;AACtB,MAAA;AACA;AACA;AACAE,MAAAA,UAAU,CAAEM,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;IAChC,CAAC;IACDT,WAAW;IACXC,cAAc,EAAGO,KAAc,IAAI;MACjCP,cAAc,CAACO,KAAK,CAAC;AACvB,IAAA;GACD;AACH;;"}

package/build/ExpressiveMoneyInput/hooks/useFocus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFocus.mjs","sources":["../../../src/ExpressiveMoneyInput/hooks/useFocus.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst focusTimeout = 5 * 1000;\n\nexport const useFocus = () => {\n  const [focus, setFocus] = useState(false);\n  const [visualFocus, setVisualFocus] = useState(false);\n  const [counter, setCounter] = useState(0);\n\n  useEffect(() => {\n    if (focus) {\n      const timeout = setTimeout(() => {\n        setVisualFocus(false);\n      }, focusTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [focus, counter]);\n\n  return {\n    focus,\n    setFocus: (value: boolean) => {\n      setFocus(value);\n      if (value) {\n        setVisualFocus(true);\n      }\n      // any call to setFocus should reset the timeout, even if the input was already in focus\n      // updating the counter will trigger the useEffect to reset the timeout\n      setCounter((prev) => prev + 1);\n    },\n    visualFocus,\n    setVisualFocus: (value: boolean) => {\n      setVisualFocus(value);\n    },\n  };\n};\n"],"names":["focusTimeout","useFocus","focus","setFocus","useState","visualFocus","setVisualFocus","counter","setCounter","useEffect","timeout","setTimeout","clearTimeout","value","prev"],"mappings":";;AAEA,MAAMA,YAAY,GAAG,CAAC,GAAG,IAAI;AAEtB,MAAMC,QAAQ,GAAGA,MAAK;EAC3B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACzC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,QAAQ,CAAC,CAAC,CAAC;AAEzCK,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,KAAK,EAAE;AACT,MAAA,MAAMQ,OAAO,GAAGC,UAAU,CAAC,MAAK;QAC9BL,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAEN,YAAY,CAAC;AAChB,MAAA,OAAO,MAAMY,YAAY,CAACF,OAAO,CAAC;AACpC,IAAA;AACF,EAAA,CAAC,EAAE,CAACR,KAAK,EAAEK,OAAO,CAAC,CAAC;EAEpB,OAAO;IACLL,KAAK;IACLC,QAAQ,EAAGU,KAAc,IAAI;MAC3BV,QAAQ,CAACU,KAAK,CAAC;AACf,MAAA,IAAIA,KAAK,EAAE;QACTP,cAAc,CAAC,IAAI,CAAC;AACtB,MAAA;AACA;AACA;AACAE,MAAAA,UAAU,CAAEM,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;IAChC,CAAC;IACDT,WAAW;IACXC,cAAc,EAAGO,KAAc,IAAI;MACjCP,cAAc,CAACO,KAAK,CAAC;AACvB,IAAA;GACD;AACH;;;;"}
+{"version":3,"file":"useFocus.mjs","sources":["../../../src/ExpressiveMoneyInput/hooks/useFocus.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst focusTimeout = 5 * 1000;\n\nexport const useFocus = () => {\n  const [focus, setFocus] = useState(false);\n  const [visualFocus, setVisualFocus] = useState(false);\n  const [counter, setCounter] = useState(0);\n\n  useEffect(() => {\n    if (focus) {\n      const timeout = setTimeout(() => {\n        setVisualFocus(false);\n      }, focusTimeout);\n      return () => clearTimeout(timeout);\n    }\n  }, [focus, counter]);\n\n  return {\n    focus,\n    setFocus: (value: boolean) => {\n      setFocus(value);\n      if (value) {\n        setVisualFocus(true);\n      }\n      // any call to setFocus should reset the timeout, even if the input was already in focus\n      // updating the counter will trigger the useEffect to reset the timeout\n      setCounter((prev) => prev + 1);\n    },\n    visualFocus,\n    setVisualFocus: (value: boolean) => {\n      setVisualFocus(value);\n    },\n  };\n};\n"],"names":["focusTimeout","useFocus","focus","setFocus","useState","visualFocus","setVisualFocus","counter","setCounter","useEffect","timeout","setTimeout","clearTimeout","value","prev"],"mappings":";;AAEA,MAAMA,YAAY,GAAG,CAAC,GAAG,IAAI;AAEtB,MAAMC,QAAQ,GAAGA,MAAK;EAC3B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EACzC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,QAAQ,CAAC,CAAC,CAAC;AAEzCK,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,KAAK,EAAE;AACT,MAAA,MAAMQ,OAAO,GAAGC,UAAU,CAAC,MAAK;QAC9BL,cAAc,CAAC,KAAK,CAAC;MACvB,CAAC,EAAEN,YAAY,CAAC;AAChB,MAAA,OAAO,MAAMY,YAAY,CAACF,OAAO,CAAC;AACpC,IAAA;AACF,EAAA,CAAC,EAAE,CAACR,KAAK,EAAEK,OAAO,CAAC,CAAC;EAEpB,OAAO;IACLL,KAAK;IACLC,QAAQ,EAAGU,KAAc,IAAI;MAC3BV,QAAQ,CAACU,KAAK,CAAC;AACf,MAAA,IAAIA,KAAK,EAAE;QACTP,cAAc,CAAC,IAAI,CAAC;AACtB,MAAA;AACA;AACA;AACAE,MAAAA,UAAU,CAAEM,IAAI,IAAKA,IAAI,GAAG,CAAC,CAAC;IAChC,CAAC;IACDT,WAAW;IACXC,cAAc,EAAGO,KAAc,IAAI;MACjCP,cAAc,CAACO,KAAK,CAAC;AACvB,IAAA;GACD;AACH;;"}

package/build/ExpressiveMoneyInput/hooks/useInputStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.js","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.parentElement?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","parentElement","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}
+{"version":3,"file":"useInputStyle.js","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.parentElement?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","parentElement","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}

package/build/ExpressiveMoneyInput/hooks/useInputStyle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.parentElement?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","parentElement","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}
+{"version":3,"file":"useInputStyle.mjs","sources":["../../../src/ExpressiveMoneyInput/hooks/useInputStyle.ts"],"sourcesContent":["import {\n  type CSSProperties,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport type { ExpressiveMoneyInputProps } from '../ExpressiveMoneyInput';\n\ntype InputStyleObject = {\n  value: string;\n  focus: boolean;\n  inputElement: RefObject<HTMLInputElement> | null;\n} & Pick<ExpressiveMoneyInputProps, 'loading'>;\n\nexport const useInputStyle = ({ value, focus, inputElement, loading }: InputStyleObject) => {\n  const initialRender = !useTimeout(300);\n  const inputWidth = useFirstDefinedValue(inputElement?.current?.parentElement?.clientWidth, [\n    inputElement?.current,\n    value,\n  ]);\n\n  const getStyle = useCallback((): CSSProperties => {\n    const fontSize = getFontSize(value, focus, inputWidth);\n    return {\n      fontSize,\n      height: fontSize,\n      // aligns the top of the digit with the currency button\n      marginTop: fontSize * -0.19,\n      // if the input loads with a pre-filled value, we don't want to animate the font-size immediately\n      transition: initialRender ? 'none' : undefined,\n      color: loading ? 'var(--color-interactive-secondary)' : undefined,\n    };\n  }, [value, focus, inputWidth, loading, initialRender]);\n\n  const [style, setStyle] = useState<CSSProperties>(() => getStyle());\n\n  useLayoutEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- Computing style based on layout measurements\n    setStyle(getStyle());\n  }, [value, focus, loading, inputWidth, getStyle]);\n\n  return style;\n};\n\nfunction getFontSize(inputValue: string, isFocused: boolean, inputWidth: number | undefined) {\n  const defaultFontSize = 52;\n  const focusFontSize = 90;\n  const minimumFontSize = 34;\n\n  let fontSize = isFocused ? focusFontSize : defaultFontSize;\n\n  if (typeof inputWidth === 'undefined') {\n    return fontSize;\n  }\n  const textLength = inputValue.length;\n  const maxCharactersWithoutShrinking = Math.floor(inputWidth / 40);\n\n  if (textLength > maxCharactersWithoutShrinking) {\n    const adjustedSize = Math.round((inputWidth / textLength) * 1.9);\n    fontSize = Math.min(fontSize, adjustedSize);\n  }\n\n  return Math.max(fontSize, minimumFontSize);\n}\n\nconst useFirstDefinedValue = (newValue: number | undefined, dependencies: unknown[]) => {\n  const [value, setValue] = useState<number | undefined>(newValue);\n\n  useLayoutEffect(() => {\n    if (typeof newValue !== 'undefined' && typeof value === 'undefined') {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Lazy initialization from prop\n      setValue(newValue);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...dependencies, value, newValue]);\n\n  return value;\n};\n\nconst useTimeout = (delay: number) => {\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setReady(true);\n    }, delay);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [delay]);\n\n  return ready;\n};\n"],"names":["useInputStyle","value","focus","inputElement","loading","initialRender","useTimeout","inputWidth","useFirstDefinedValue","current","parentElement","clientWidth","getStyle","useCallback","fontSize","getFontSize","height","marginTop","transition","undefined","color","style","setStyle","useState","useLayoutEffect","inputValue","isFocused","defaultFontSize","focusFontSize","minimumFontSize","textLength","length","maxCharactersWithoutShrinking","Math","floor","adjustedSize","round","min","max","newValue","dependencies","setValue","delay","ready","setReady","useEffect","timeout","setTimeout","clearTimeout"],"mappings":"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"}

package/build/Field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/Field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../Body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\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\nconst 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 { formatMessage } = useIntl();\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  const textareaCharCounterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  const isNearCharLimit =\n    textareaCharacterCount != null &&\n    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;\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    if (textareaCharacterCount) {\n      messageIds.push(textareaCharCounterId);\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            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\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 || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\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                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={textareaCharCounterId}\n                        {...(isNearCharLimit\n                          ? {\n                              role: 'status' as const,\n                              'aria-live': 'polite' as const,\n                              'aria-atomic': 'true' as const,\n                            }\n                          : {})}\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-textarea-char-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n\nexport default Field;\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","textareaCharCounterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","isNearCharLimit","current","max","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","messages","characterCount"],"mappings":"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"}
+{"version":3,"file":"Field.js","sources":["../../src/Field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../Body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\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\nconst 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 { formatMessage } = useIntl();\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  const textareaCharCounterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  const isNearCharLimit =\n    textareaCharacterCount != null &&\n    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;\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    if (textareaCharacterCount) {\n      messageIds.push(textareaCharCounterId);\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            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\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 || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\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                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={textareaCharCounterId}\n                        {...(isNearCharLimit\n                          ? {\n                              role: 'status' as const,\n                              'aria-live': 'polite' as const,\n                              'aria-atomic': 'true' as const,\n                            }\n                          : {})}\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-textarea-char-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n\nexport default Field;\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","textareaCharCounterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","isNearCharLimit","current","max","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","messages","characterCount"],"mappings":"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"}

package/build/Field/Field.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.messages.js","sources":["../../src/Field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Field.messages.js","sources":["../../src/Field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;"}

package/build/Field/Field.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.messages.mjs","sources":["../../src/Field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"Field.messages.mjs","sources":["../../src/Field/Field.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  characterCount: {\n    id: 'neptune.Field.characterCount',\n    defaultMessage: '{current} of {max} characters used',\n  },\n});\n"],"names":["defineMessages","characterCount","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,cAAc,EAAE;IACdC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;"}

package/build/Field/Field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Field.mjs","sources":["../../src/Field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../Body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\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\nconst 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 { formatMessage } = useIntl();\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  const textareaCharCounterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  const isNearCharLimit =\n    textareaCharacterCount != null &&\n    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;\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    if (textareaCharacterCount) {\n      messageIds.push(textareaCharCounterId);\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            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\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 || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\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                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={textareaCharCounterId}\n                        {...(isNearCharLimit\n                          ? {\n                              role: 'status' as const,\n                              'aria-live': 'polite' as const,\n                              'aria-atomic': 'true' as const,\n                            }\n                          : {})}\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-textarea-char-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n\nexport default Field;\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","textareaCharCounterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","isNearCharLimit","current","max","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","messages","characterCount"],"mappings":"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"}
+{"version":3,"file":"Field.mjs","sources":["../../src/Field/Field.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useCallback, useId, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../Body';\nimport { Sentiment } from '../common';\nimport messages from './Field.messages';\nimport { InlinePrompt, type InlinePromptProps } from '../Prompt';\nimport {\n  TextareaCharacterCountProvider,\n  type TextareaCharacterCountState,\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\nconst 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 { formatMessage } = useIntl();\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  const textareaCharCounterId = useId();\n\n  const [textareaCharacterCount, setTextareaCharacterCount] =\n    useState<TextareaCharacterCountState>(null);\n  const handleTextareaCharacterCount = useCallback(\n    (state: TextareaCharacterCountState) => setTextareaCharacterCount(state),\n    [],\n  );\n\n  const isNearCharLimit =\n    textareaCharacterCount != null &&\n    textareaCharacterCount.current >= textareaCharacterCount.max * 0.8;\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    if (textareaCharacterCount) {\n      messageIds.push(textareaCharCounterId);\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            <TextareaCharacterCountProvider value={handleTextareaCharacterCount}>\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 || textareaCharacterCount) && (\n                  <div className=\"np-field-validation\">\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                    {textareaCharacterCount && (\n                      <Body\n                        as=\"span\"\n                        id={textareaCharCounterId}\n                        {...(isNearCharLimit\n                          ? {\n                              role: 'status' as const,\n                              'aria-live': 'polite' as const,\n                              'aria-atomic': 'true' as const,\n                            }\n                          : {})}\n                        aria-label={formatMessage(messages.characterCount, {\n                          current: textareaCharacterCount.current,\n                          max: textareaCharacterCount.max,\n                        })}\n                        className=\"np-field-textarea-char-counter\"\n                      >\n                        {textareaCharacterCount.current}/{textareaCharacterCount.max}\n                      </Body>\n                    )}\n                  </div>\n                )}\n              </div>\n            </TextareaCharacterCountProvider>\n          </InputInvalidProvider>\n        </InputDescribedByProvider>\n      </InputIdContextProvider>\n    </FieldLabelContextProvider>\n  );\n};\n\nexport default Field;\n"],"names":["Field","id","label","required","message","propMessage","messageIconLabel","messageLoading","hint","description","sentiment","propType","Sentiment","NEUTRAL","className","children","props","formatMessage","useIntl","labelRef","useRef","error","NEGATIVE","hasError","labelId","useId","fallbackInputId","inputId","undefined","messageId","descriptionId","textareaCharCounterId","textareaCharacterCount","setTextareaCharacterCount","useState","handleTextareaCharacterCount","useCallback","state","isNearCharLimit","current","max","ariaDescribedbyByIds","messageIds","push","length","join","_jsx","FieldLabelContextProvider","value","ref","InputIdContextProvider","InputDescribedByProvider","InputInvalidProvider","TextareaCharacterCountProvider","_jsxs","clsx","POSITIVE","WARNING","_Fragment","Label","htmlFor","Optional","Description","InlinePrompt","mediaLabel","loading","width","Body","as","role","messages","characterCount"],"mappings":"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"}

package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
+{"version":3,"file":"AnimatedLabel.js","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}

package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;AAgBA,MAAMA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA;AAAK,CAAsB,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC;AACnBG,MAAAA,OAAO,IAAI;IACb,CAAC;AACH,EAAA;EAEA,oBACEC,GAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,GAAA,CAACI,gBAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,GAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;YACzBJ,SAAS,EAAEoB,IAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBpB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACoB,GAAG,CAAC,CAAC;AAAEC,cAAAA;aAAO,EAAEC,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC;AAC/B,cAAA,oBACEP,IAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACQ,aAAc;gBAC5BxB,SAAS,EAAEoB,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,yCAAyC,EAAEI;AAC5C,iBAAA,CAAE;gBAAAZ,QAAA,EAAA,CAEFU,KAAK,EAAE,GAAA,eAAAb,GAAA,CAACiB,WAAW,EAAA,EAAA,CACtB;AAAA,eAAA,EAPOD,aAOF,CAAC;YAEV,CAAC;AAAC,WACI,CACR,eAAAhB,GAAA,CAACkB,WAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB1B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChByB,YAAAA,OAAO,EAAEA,MAAMxB,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,GAAA,CAACqB,IAAI,EAAA;AAAC9B,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACoB,GAAG,CAAC,CAACU,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK;AAC3C,gBAAA,MAAMS,UAAU,GAAGjC,WAAW,GAAGwB,KAAK;AACtC,gBAAA,MAAMU,MAAM,GAAG,CAAA,KAAA,EAAQV,KAAK,CAAA,CAAE;gBAC9B,oBACEd,GAAA,CAACyB,MAAM,EAAA;AAELf,kBAAAA,EAAE,EAAEc,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBpC,SAAS,EAAEoB,IAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEiB,oBAAAA,SAAS,EAAE,CAACL;AACb,mBAAA,CAAE;kBACHM,KAAK,EAAEP,IAAI,CAACT,KAAM;kBAClBiB,OAAO,EAAER,IAAI,CAACS,UAAW;AACzBC,kBAAAA,MAAM,EAAEjB,aAAa,gBAAGf,GAAA,CAACiC,KAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAcnB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BY,kBAAAA,QAAQ,EAAEZ,UAAW;kBACrBa,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACb,UAAU,IAAI;AAClBc,oBAAAA,QAAQ,EAAE,CAAC;AACXtC,oBAAAA,OAAO,EAAED,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC;oBACvCuC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD3C,wBAAAA,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC,EAAE;AAClC,sBAAA;AACF,oBAAA;mBACD;AAAA,iBAAA,EAxBIyB,MAwBF,CACH;cAEN,CAAC;aACG;AACR,WAAa,CACf;AAAA,SAAA,CAAG;AAEP,MAAA;KACyB;AAC7B,GAAmB,CAAC;AAExB;;;;"}
+{"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../Stepper/Stepper';\nimport BottomSheet from '../../common/BottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../Provider/overlay/OverlayIdProvider';\nimport List from '../../List';\n\nexport interface AnimatedLabelProps {\n  activeLabel: number;\n  className?: string;\n  steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n  const labelId = useId();\n  const [showSteps, setShowSteps] = useState(false);\n\n  function handleStepAction(onClick: Step['onClick']) {\n    return () => {\n      setShowSteps(false);\n      onClick?.();\n    };\n  }\n\n  return (\n    <OverlayIdProvider open={showSteps}>\n      <OverlayIdContext.Consumer>\n        {(overlayId) => {\n          return (\n            <>\n              <button\n                type=\"button\"\n                id={labelId}\n                aria-haspopup=\"menu\"\n                aria-controls={overlayId}\n                aria-expanded={showSteps}\n                className={clsx(\n                  'np-animated-label',\n                  'btn-unstyled',\n                  'np-text-body-large-bold',\n                  className,\n                )}\n                onClick={() => setShowSteps(true)}\n              >\n                {steps.map(({ label }, index) => {\n                  const isCurrentStep = activeLabel === index;\n                  const previousIndex = index - 1;\n                  return (\n                    <div\n                      key={previousIndex}\n                      aria-hidden={!isCurrentStep}\n                      className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n                        'np-animated-label--active text-ellipsis': isCurrentStep,\n                      })}\n                    >\n                      {label} <ChevronDown />\n                    </div>\n                  );\n                })}\n              </button>\n              <BottomSheet\n                role=\"menu\"\n                aria-labelledby={labelId}\n                open={showSteps}\n                onClose={() => setShowSteps(false)}\n              >\n                <List className=\"m-b-0 p-a-1\">\n                  {steps.map((step, index) => {\n                    const isCurrentStep = activeLabel === index;\n                    const isDisabled = activeLabel < index;\n                    const itemId = `step-${index}`;\n                    return (\n                      <Option\n                        key={itemId}\n                        id={itemId}\n                        as=\"li\"\n                        role=\"menuitem\"\n                        decision={false}\n                        className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n                          clickable: !isDisabled,\n                        })}\n                        title={step.label}\n                        content={step.hoverLabel}\n                        button={isCurrentStep ? <Check size={24} /> : null}\n                        aria-current={isCurrentStep ? 'step' : false}\n                        aria-disabled={isDisabled}\n                        disabled={isDisabled}\n                        isContainerAligned\n                        {...(!isDisabled && {\n                          tabIndex: 0,\n                          onClick: handleStepAction(step.onClick),\n                          onKeyDown: (event) => {\n                            event.preventDefault();\n                            if (event.code === 'Enter' || event.code === 'Space') {\n                              handleStepAction(step.onClick)();\n                            }\n                          },\n                        })}\n                      />\n                    );\n                  })}\n                </List>\n              </BottomSheet>\n            </>\n          );\n        }}\n      </OverlayIdContext.Consumer>\n    </OverlayIdProvider>\n  );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"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';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { 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';\nimport Container from '../Container';\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\nconst defaultLogo = <Logo />;\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) | React.MouseEventHandler<HTMLButtonElement>;\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 not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\n        'np-flow-navigation--no-steps': !hasSteps || done,\n      })}\n    >\n      {flowHeaderContent}\n    </Container>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAuB5B,MAAMC,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,GAAGN,WAAW;AAClBO,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;EACRC,KAAK;AACLC,EAAAA,gBAAgB,GAAG;AAAI,CACH,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,wBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,wBAAU,CAACG,KAAK,CAAC;EAEhD,MAAMC,QAAQ,GAAGV,KAAK,IAAIA,KAAK,CAACW,MAAM,GAAG,CAAC;EAC1C,MAAMC,aAAa,GAAGb,QAAQ,IAAI,IAAI,IAAIL,UAAU,GAAG,CAAC;EAExD,MAAMmB,WAAW,GAAGf,OAAO,IAAI,IAAI,iBAAIP,cAAA,CAACuB,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAElB;AAAQ,IAAG;AAClF,EAAA,MAAMmB,SAAS,GAAGpB,IAAI,GAAG,IAAI,GAAGF,MAAM;AAEtC,EAAA,MAAMuB,iBAAiB,gBACrB3B,cAAA,CAAC4B,kBAAU,EAAA;IACTC,SAAS,EAAEC,SAAI,CACb,6BAA6B,EAC7BjB,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;MACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,MAAA,wBAAwB,EAAEA,QAAQ;AAClC,MAAA,wBAAwB,EAAEI;AAC3B,KAAA,CACL;IACFc,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,CACG,CAACrB,QAAQ,IAAIQ,aAAa,gBACzBrB,cAAA,CAACmC,kBAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnBC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9Cf,QAAAA,OAAO,EAAEjB,QAAS;AAAA0B,QAAAA,QAAA,eAElBlC,cAAA,CAACyC,eAAS,EAAA,EAAA;OACA,CAAC,gBAEbzC,cAAA,CAAA,KAAA,EAAA;AAAK6B,QAAAA,SAAS,EAAC,sBAAsB;AAAAK,QAAAA,QAAA,EAAE7B;AAAI,OAAM,CAClD,EACA,CAACQ,QAAQ,IAAI,CAACP,IAAI,IAAIa,QAAQ,iBAC7BnB,cAAA,CAAC0C,qBAAa,EAAA;AAACb,QAAAA,SAAS,EAAC,OAAO;AAACpB,QAAAA,KAAK,EAAEA,KAAM;AAACkC,QAAAA,WAAW,EAAExC;AAAW,OAAA,CACxE;AAAA,KACH,CACD;AACDyC,IAAAA,YAAY,eACVZ,eAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,iFAAiF;AAAAK,MAAAA,QAAA,GAC7FR,SAAS,EACTA,SAAS,IAAIJ,WAAW,iBAAItB,cAAA,CAAA,MAAA,EAAA;AAAM6B,QAAAA,SAAS,EAAC;OAAO,CAAG,EACtDP,WAAW;AAAA,KACT,CACN;IACDuB,aAAa,EACX,CAACvC,IAAI,IAAIa,QAAQ,gBACfnB,cAAA,CAAC8C,eAAO,EAAA;AACN3C,MAAAA,UAAU,EAAEA,UAAW;AACvBM,MAAAA,KAAK,EAAEA,KAAM;MACboB,SAAS,EAAEC,SAAI,CAAC,6BAA6B;KAAE,CAC/C,GACA,IACL;IACDiB,MAAM,EAAE,CAAC9B,QAAQ,GAAG+B,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;AAAW,GAAA,CAE3D;EAED,oBACElD,cAAA,CAACmD,iBAAS,EAAA;AACR3B,IAAAA,IAAI,EAAC,OAAO;AACZK,IAAAA,SAAS,EAAEC,SAAI,CAAC,oBAAoB,EAAE;AACpC,MAAA,mCAAmC,EAAEpB,gBAAgB;MACrD,8BAA8B,EAAE,CAACS,QAAQ,IAAIb;AAC9C,KAAA,CAAE;AAAA4B,IAAAA,QAAA,EAEFP;AAAiB,GACT,CAAC;AAEhB;;;;"}
+{"version":3,"file":"FlowNavigation.js","sources":["../../src/FlowNavigation/FlowNavigation.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { 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';\nimport Container from '../Container';\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\nconst defaultLogo = <Logo />;\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) | React.MouseEventHandler<HTMLButtonElement>;\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 not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\n        'np-flow-navigation--no-steps': !hasSteps || done,\n      })}\n    >\n      {flowHeaderContent}\n    </Container>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAMA,WAAW,gBAAGC,cAAA,CAACC,YAAI,KAAG;AAuB5B,MAAMC,cAAc,GAAGA,CAAC;AACtBC,EAAAA,UAAU,GAAG,CAAC;EACdC,MAAM;AACNC,EAAAA,IAAI,GAAGN,WAAW;AAClBO,EAAAA,IAAI,GAAG,KAAK;EACZC,OAAO;EACPC,QAAQ;EACRC,KAAK;AACLC,EAAAA,gBAAgB,GAAG;AAAI,CACH,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AACtB,EAAA,MAAMC,QAAQ,GAAGC,2BAAa,CAACC,wBAAU,CAACC,KAAK,CAAC;AAChD,EAAA,MAAMC,QAAQ,GAAGH,2BAAa,CAACC,wBAAU,CAACG,KAAK,CAAC;EAEhD,MAAMC,QAAQ,GAAGV,KAAK,IAAIA,KAAK,CAACW,MAAM,GAAG,CAAC;EAC1C,MAAMC,aAAa,GAAGb,QAAQ,IAAI,IAAI,IAAIL,UAAU,GAAG,CAAC;EAExD,MAAMmB,WAAW,GAAGf,OAAO,IAAI,IAAI,iBAAIP,cAAA,CAACuB,uBAAW,EAAA;AAACC,IAAAA,IAAI,EAAC,IAAI;AAACC,IAAAA,OAAO,EAAElB;AAAQ,IAAG;AAClF,EAAA,MAAMmB,SAAS,GAAGpB,IAAI,GAAG,IAAI,GAAGF,MAAM;AAEtC,EAAA,MAAMuB,iBAAiB,gBACrB3B,cAAA,CAAC4B,kBAAU,EAAA;IACTC,SAAS,EAAEC,SAAI,CACb,6BAA6B,EAC7BjB,QAAQ,IAAI,IAAI,GACZ,4BAA4B,GAC5B;MACE,4BAA4B,EAAE,CAACA,QAAQ;AACvC;AACA,MAAA,wBAAwB,EAAEA,QAAQ;AAClC,MAAA,wBAAwB,EAAEI;AAC3B,KAAA,CACL;IACFc,WAAW,eACTC,eAAA,CAAAC,mBAAA,EAAA;MAAAC,QAAA,EAAA,CACG,CAACrB,QAAQ,IAAIQ,aAAa,gBACzBrB,cAAA,CAACmC,kBAAU,EAAA;AACTX,QAAAA,IAAI,EAAE,EAAG;AACTY,QAAAA,QAAQ,EAAC,UAAU;AACnBC,QAAAA,IAAI,EAAC,SAAS;AACd,QAAA,YAAA,EAAY1B,IAAI,CAAC2B,aAAa,CAACC,+BAAQ,CAACC,IAAI,CAAE;AAC9Cf,QAAAA,OAAO,EAAEjB,QAAS;AAAA0B,QAAAA,QAAA,eAElBlC,cAAA,CAACyC,eAAS,EAAA,EAAA;OACA,CAAC,gBAEbzC,cAAA,CAAA,KAAA,EAAA;AAAK6B,QAAAA,SAAS,EAAC,sBAAsB;AAAAK,QAAAA,QAAA,EAAE7B;AAAI,OAAM,CAClD,EACA,CAACQ,QAAQ,IAAI,CAACP,IAAI,IAAIa,QAAQ,iBAC7BnB,cAAA,CAAC0C,qBAAa,EAAA;AAACb,QAAAA,SAAS,EAAC,OAAO;AAACpB,QAAAA,KAAK,EAAEA,KAAM;AAACkC,QAAAA,WAAW,EAAExC;AAAW,OAAA,CACxE;AAAA,KACH,CACD;AACDyC,IAAAA,YAAY,eACVZ,eAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,iFAAiF;AAAAK,MAAAA,QAAA,GAC7FR,SAAS,EACTA,SAAS,IAAIJ,WAAW,iBAAItB,cAAA,CAAA,MAAA,EAAA;AAAM6B,QAAAA,SAAS,EAAC;OAAO,CAAG,EACtDP,WAAW;AAAA,KACT,CACN;IACDuB,aAAa,EACX,CAACvC,IAAI,IAAIa,QAAQ,gBACfnB,cAAA,CAAC8C,eAAO,EAAA;AACN3C,MAAAA,UAAU,EAAEA,UAAW;AACvBM,MAAAA,KAAK,EAAEA,KAAM;MACboB,SAAS,EAAEC,SAAI,CAAC,6BAA6B;KAAE,CAC/C,GACA,IACL;IACDiB,MAAM,EAAE,CAAC9B,QAAQ,GAAG+B,cAAM,CAACC,QAAQ,GAAGD,cAAM,CAACE;AAAW,GAAA,CAE3D;EAED,oBACElD,cAAA,CAACmD,iBAAS,EAAA;AACR3B,IAAAA,IAAI,EAAC,OAAO;AACZK,IAAAA,SAAS,EAAEC,SAAI,CAAC,oBAAoB,EAAE;AACpC,MAAA,mCAAmC,EAAEpB,gBAAgB;MACrD,8BAA8B,EAAE,CAACS,QAAQ,IAAIb;AAC9C,KAAA,CAAE;AAAA4B,IAAAA,QAAA,EAEFP;AAAiB,GACT,CAAC;AAEhB;;"}

package/build/FlowNavigation/FlowNavigation.messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.messages.js","sources":["../../src/FlowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"FlowNavigation.messages.js","sources":["../../src/FlowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;"}

package/build/FlowNavigation/FlowNavigation.messages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.messages.mjs","sources":["../../src/FlowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"FlowNavigation.messages.mjs","sources":["../../src/FlowNavigation/FlowNavigation.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  back: {\n    id: 'neptune.FlowNavigation.back',\n    defaultMessage: 'back to previous step',\n  },\n});\n"],"names":["defineMessages","back","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,IAAI,EAAE;IACJC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;"}

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';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { 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';\nimport Container from '../Container';\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\nconst defaultLogo = <Logo />;\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) | React.MouseEventHandler<HTMLButtonElement>;\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 not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\n        'np-flow-navigation--no-steps': !hasSteps || done,\n      })}\n    >\n      {flowHeaderContent}\n    </Container>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"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';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\n\nimport { 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';\nimport Container from '../Container';\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\nconst defaultLogo = <Logo />;\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) | React.MouseEventHandler<HTMLButtonElement>;\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 not provided, the stepper won't show. */\n  steps?: readonly Step[];\n  /**\n   * Controls whether the bottom border is displayed.\n   * @default true\n   */\n  showBottomBorder?: boolean;\n}\n\nconst FlowNavigation = ({\n  activeStep = 0,\n  avatar,\n  logo = defaultLogo,\n  done = false,\n  onClose,\n  onGoBack,\n  steps,\n  showBottomBorder = true,\n}: FlowNavigationProps) => {\n  const intl = useIntl();\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const screenLg = useScreenSize(Breakpoint.LARGE);\n\n  const hasSteps = steps && steps.length > 0;\n  const displayGoBack = onGoBack != null && activeStep > 0;\n\n  const closeButton = onClose != null && <CloseButton size=\"lg\" onClick={onClose} />;\n  const newAvatar = done ? null : avatar;\n\n  const flowHeaderContent = (\n    <FlowHeader\n      className={clsx(\n        'np-flow-navigation__content',\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 && hasSteps && (\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 && hasSteps ? (\n          <Stepper\n            activeStep={activeStep}\n            steps={steps}\n            className={clsx('np-flow-navigation__stepper')}\n          />\n        ) : null\n      }\n      layout={!screenLg ? Layout.VERTICAL : Layout.HORIZONTAL}\n    />\n  );\n\n  return (\n    <Container\n      size=\"fluid\"\n      className={clsx('np-flow-navigation', {\n        'np-flow-navigation--border-bottom': showBottomBorder,\n        'np-flow-navigation--no-steps': !hasSteps || done,\n      })}\n    >\n      {flowHeaderContent}\n    </Container>\n  );\n};\n\nexport default FlowNavigation;\n"],"names":["defaultLogo","_jsx","Logo","FlowNavigation","activeStep","avatar","logo","done","onClose","onGoBack","steps","showBottomBorder","intl","useIntl","screenSm","useScreenSize","Breakpoint","SMALL","screenLg","LARGE","hasSteps","length","displayGoBack","closeButton","CloseButton","size","onClick","newAvatar","flowHeaderContent","FlowHeader","className","clsx","leftContent","_jsxs","_Fragment","children","IconButton","priority","type","formatMessage","messages","back","ArrowLeft","AnimatedLabel","activeLabel","rightContent","bottomContent","Stepper","layout","Layout","VERTICAL","HORIZONTAL","Container"],"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   * @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?.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}>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAMA,YAAY,gBAAGC,sBAAK,CAACC,UAAU,CAGnC,CAAC;AAAEC,EAAAA;AAAM,CAAE,EAAEC,GAAG,KAAI;EACpB,oBACEC,cAAA,CAACC,YAAI,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,sBAAK,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,YAAM,CAAoB,IAAI,CAAC;AACnD,EAAA,MAAMC,eAAe,GACnBJ,KAAK,KAAK,OAAO,GAAGK,qBAAU,CAACC,WAAW,GAAGD,qBAAU,CAACE,gBAAgB;AAC1E,EAAA,MAAMC,aAAa,GAAGC,SAAI,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,eAAS,CAAC,MAAK;AACb,IAAA,IAAId,EAAE,KAAK,QAAQ,IAAIK,WAAW,CAACU,OAAO,EAAE;MAC1C,MAAM;AAAEC,QAAAA;OAAe,GAAGX,WAAW,CAACU,OAAO;MAC7C,IAAIC,aAAa,EAAEC,OAAO,CAACC,WAAW,EAAE,KAAK,UAAU,EAAE;AACvDC,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,cAAA,CAACiC,aAAK,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,eAAA,CAAA,KAAA,EAAA;AAAA,IAAA,GAASV,WAAW;AAAA,IAAA,GAAMT,KAAK;AAAEjB,IAAAA,GAAG,EAAEA,GAAI;IAAAS,QAAA,EAAA,cACxCR,cAAA,CAACiC,aAAK,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,cAAA,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.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?.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}>\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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"}