@transferwise/components 46.141.0 → 46.143.0

package/build/inputs/SelectInput/SelectInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import mergeProps from 'merge-props';\nimport { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';\nimport { Listbox as ListboxBase } from '@headlessui/react';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { Breakpoint } from '../../common/propsValues/breakpoint';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useInputAttributes } from '../contexts';\n\nimport { SelectInputBottomSheet } from './BottomSheet';\nimport { SelectInputPopover } from './Popover';\nimport { SelectInputOptions } from './Options';\nimport { DefaultRenderTrigger } from './DefaultRenderTrigger';\n\nimport {\n  SelectInputOptionContentWithinTriggerContext,\n  SelectInputTriggerButtonPropsContext,\n} from './SelectInput.contexts';\nimport { searchableString, sortByRelevance } from './SelectInput.utils';\nimport { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\n/**\n * SelectInput component allows users to select an option from a dropdown list.\n * Supports filtering, multiple selection, and customization.\n */\nexport function SelectInput<T = string, M extends boolean = false>({\n  id: idProp,\n  parentId,\n  name,\n  multiple,\n  placeholder,\n  autocomplete,\n  items,\n  defaultValue,\n  value: controlledValue,\n  compareValues,\n  renderValue = String,\n  renderFooter,\n  renderTrigger = DefaultRenderTrigger,\n  filterable,\n  filterPlaceholder,\n  sortFilteredOptions,\n  disabled,\n  size = 'md',\n  className,\n  UNSAFE_triggerButtonProps,\n  triggerRef: externalTriggerRef,\n  onFilterChange = noop,\n  onChange,\n  onOpen,\n  onClose,\n  onClear,\n}: SelectInputProps<T, M>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const id = idProp ?? inputAttributes.id;\n\n  const [open, setOpen] = useState(false);\n\n  const initialized = useRef(false);\n  const handleClose = useEffectEvent(onClose ?? (() => {}));\n  const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n\n  useEffect(() => {\n    if (initialized.current) {\n      if (open) {\n        handleOpen?.();\n      } else {\n        handleClose?.();\n      }\n    } else {\n      initialized.current = true;\n    }\n  }, [open]);\n\n  const [filterQuery, _setFilterQuery] = useState('');\n  const deferredFilterQuery = useDeferredValue(filterQuery);\n  const previousFilterQueryRef = useRef(filterQuery);\n\n  const setFilterQuery = useCallback(\n    (query: string) => {\n      _setFilterQuery(query);\n      if (query !== previousFilterQueryRef.current) {\n        onFilterChange({\n          query,\n          queryNormalized: query ? searchableString(query) : null,\n        });\n        previousFilterQueryRef.current = query;\n      }\n    },\n    [onFilterChange],\n  );\n\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const listboxRef = useRef<HTMLDivElement>(null);\n  const controllerRef = filterable ? searchInputRef : listboxRef;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;\n\n  /**\n   * Attempts to resolve the `listbox` label\n   * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n   */\n  const getListBoxLabelProps = (): {\n    listBoxLabel?: string;\n    listBoxLabelledBy?: string;\n  } => {\n    if (UNSAFE_triggerButtonProps?.['aria-label']) {\n      return {\n        listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n      };\n    }\n\n    if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n      return {\n        listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n      };\n    }\n\n    if (inputAttributes['aria-labelledby']) {\n      return {\n        listBoxLabelledBy: inputAttributes['aria-labelledby'],\n      };\n    }\n\n    return {};\n  };\n\n  return (\n    <ListboxBase\n      name={name}\n      multiple={multiple}\n      defaultValue={defaultValue as M extends true ? T[] : T}\n      value={controlledValue as M extends true ? T[] : T}\n      by={compareValues}\n      disabled={disabled}\n      onChange={\n        ((value) => {\n          if (!multiple) {\n            setOpen(false);\n          }\n          onChange?.(value);\n        }) satisfies SelectInputProps<T, M>['onChange']\n      }\n    >\n      {({ disabled: uiDisabled, value }) => {\n        const placeholderShown =\n          multiple && Array.isArray(value) ? value.length === 0 : value == null;\n        return (\n          <OptionsOverlay\n            placement=\"bottom-start\"\n            open={open}\n            renderTrigger={({ ref, getInteractionProps }) => (\n              <SelectInputTriggerButtonPropsContext.Provider\n                // eslint-disable-next-line react/jsx-no-constructed-context-values\n                value={{\n                  ref: (node) => {\n                    ref(node);\n                    if (externalTriggerRef) {\n                      // eslint-disable-next-line no-param-reassign\n                      externalTriggerRef.current = node;\n                    } else {\n                      internalTriggerRef.current = node;\n                    }\n                  },\n                  size,\n                  ...inputAttributes,\n                  ...UNSAFE_triggerButtonProps,\n                  id,\n                  ...mergeProps(\n                    {\n                      onClick: () => {\n                        setOpen((prev) => !prev);\n                      },\n                      onKeyDown: (event: React.KeyboardEvent) => {\n                        if (\n                          event.key === ' ' ||\n                          event.key === 'Enter' ||\n                          event.key === 'ArrowDown' ||\n                          event.key === 'ArrowUp'\n                        ) {\n                          setOpen((prev) => !prev);\n                        }\n                      },\n                    },\n                    getInteractionProps(),\n                  ),\n                }}\n              >\n                {renderTrigger({\n                  content: !placeholderShown ? (\n                    <SelectInputOptionContentWithinTriggerContext.Provider value>\n                      {multiple && Array.isArray(value)\n                        ? (value as readonly NonNullable<T>[])\n                            .map((option) => renderValue(option, true))\n                            .filter((node) => node != null)\n                            .join(', ')\n                        : renderValue(value as NonNullable<T>, true)}\n                    </SelectInputOptionContentWithinTriggerContext.Provider>\n                  ) : (\n                    placeholder\n                  ),\n                  placeholderShown,\n                  clear:\n                    onClear != null\n                      ? () => {\n                          onClear();\n                          (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n                            preventScroll: true,\n                          });\n                        }\n                      : undefined,\n                  disabled: uiDisabled,\n                  size,\n                  className,\n                })}\n              </SelectInputTriggerButtonPropsContext.Provider>\n            )}\n            initialFocusRef={controllerRef}\n            size={filterable ? 'lg' : 'md'}\n            padding=\"none\"\n            onClose={() => {\n              setOpen(false);\n            }}\n            onCloseEnd={() => {\n              setFilterQuery('');\n            }}\n          >\n            <SelectInputOptions\n              id={id ? `${id}Search` : undefined}\n              parentId={parentId}\n              items={items}\n              compareValues={compareValues}\n              renderValue={renderValue}\n              renderFooter={renderFooter}\n              filterable={filterable}\n              filterPlaceholder={filterPlaceholder}\n              sortFilteredOptions={sortFilteredOptions}\n              searchInputRef={searchInputRef}\n              listboxRef={listboxRef}\n              filterQuery={deferredFilterQuery}\n              autocomplete={autocomplete}\n              name={name}\n              onFilterChange={setFilterQuery}\n              onAutocompleteSelect={(matchedValue) => {\n                onChange?.(matchedValue as M extends true ? T[] : T);\n                if (!multiple) {\n                  setOpen(false);\n                }\n              }}\n              {...getListBoxLabelProps()}\n            />\n          </OptionsOverlay>\n        );\n      }}\n    </ListboxBase>\n  );\n}\n\n// Attach sortByRelevance to the component for convenience\nSelectInput.sortByRelevance = sortByRelevance;\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","DefaultRenderTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","previousFilterQueryRef","setFilterQuery","useCallback","query","queryNormalized","searchableString","internalTriggerRef","searchInputRef","listboxRef","controllerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","SelectInputPopover","SelectInputBottomSheet","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue","sortByRelevance"],"mappings":"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"}
+{"version":3,"file":"SelectInput.mjs","sources":["../../../src/inputs/SelectInput/SelectInput.tsx"],"sourcesContent":["import mergeProps from 'merge-props';\nimport { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';\nimport { Listbox as ListboxBase } from '@headlessui/react';\nimport { Breakpoint } from '@transferwise/neptune-tokens';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { useEffectEvent } from '../../common/hooks/useEffectEvent';\nimport { useInputAttributes } from '../contexts';\n\nimport { SelectInputBottomSheet } from './BottomSheet';\nimport { SelectInputPopover } from './Popover';\nimport { SelectInputOptions } from './Options';\nimport { DefaultRenderTrigger } from './DefaultRenderTrigger';\n\nimport {\n  SelectInputOptionContentWithinTriggerContext,\n  SelectInputTriggerButtonPropsContext,\n} from './SelectInput.contexts';\nimport { searchableString, sortByRelevance } from './SelectInput.utils';\nimport { SelectInputProps } from './SelectInput.types';\n\nconst noop = () => {};\n\n/**\n * SelectInput component allows users to select an option from a dropdown list.\n * Supports filtering, multiple selection, and customization.\n */\nexport function SelectInput<T = string, M extends boolean = false>({\n  id: idProp,\n  parentId,\n  name,\n  multiple,\n  placeholder,\n  autocomplete,\n  items,\n  defaultValue,\n  value: controlledValue,\n  compareValues,\n  renderValue = String,\n  renderFooter,\n  renderTrigger = DefaultRenderTrigger,\n  filterable,\n  filterPlaceholder,\n  sortFilteredOptions,\n  disabled,\n  size = 'md',\n  className,\n  UNSAFE_triggerButtonProps,\n  triggerRef: externalTriggerRef,\n  onFilterChange = noop,\n  onChange,\n  onOpen,\n  onClose,\n  onClear,\n}: SelectInputProps<T, M>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n  const id = idProp ?? inputAttributes.id;\n\n  const [open, setOpen] = useState(false);\n\n  const initialized = useRef(false);\n  const handleClose = useEffectEvent(onClose ?? (() => {}));\n  const handleOpen = useEffectEvent(onOpen ?? (() => {}));\n\n  useEffect(() => {\n    if (initialized.current) {\n      if (open) {\n        handleOpen?.();\n      } else {\n        handleClose?.();\n      }\n    } else {\n      initialized.current = true;\n    }\n  }, [open]);\n\n  const [filterQuery, _setFilterQuery] = useState('');\n  const deferredFilterQuery = useDeferredValue(filterQuery);\n  const previousFilterQueryRef = useRef(filterQuery);\n\n  const setFilterQuery = useCallback(\n    (query: string) => {\n      _setFilterQuery(query);\n      if (query !== previousFilterQueryRef.current) {\n        onFilterChange({\n          query,\n          queryNormalized: query ? searchableString(query) : null,\n        });\n        previousFilterQueryRef.current = query;\n      }\n    },\n    [onFilterChange],\n  );\n\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const listboxRef = useRef<HTMLDivElement>(null);\n  const controllerRef = filterable ? searchInputRef : listboxRef;\n\n  const screenSm = useScreenSize(Breakpoint.SMALL);\n  const OptionsOverlay = screenSm ? SelectInputPopover : SelectInputBottomSheet;\n\n  /**\n   * Attempts to resolve the `listbox` label\n   * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling\n   */\n  const getListBoxLabelProps = (): {\n    listBoxLabel?: string;\n    listBoxLabelledBy?: string;\n  } => {\n    if (UNSAFE_triggerButtonProps?.['aria-label']) {\n      return {\n        listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],\n      };\n    }\n\n    if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {\n      return {\n        listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],\n      };\n    }\n\n    if (inputAttributes['aria-labelledby']) {\n      return {\n        listBoxLabelledBy: inputAttributes['aria-labelledby'],\n      };\n    }\n\n    return {};\n  };\n\n  return (\n    <ListboxBase\n      name={name}\n      multiple={multiple}\n      defaultValue={defaultValue as M extends true ? T[] : T}\n      value={controlledValue as M extends true ? T[] : T}\n      by={compareValues}\n      disabled={disabled}\n      onChange={\n        ((value) => {\n          if (!multiple) {\n            setOpen(false);\n          }\n          onChange?.(value);\n        }) satisfies SelectInputProps<T, M>['onChange']\n      }\n    >\n      {({ disabled: uiDisabled, value }) => {\n        const placeholderShown =\n          multiple && Array.isArray(value) ? value.length === 0 : value == null;\n        return (\n          <OptionsOverlay\n            placement=\"bottom-start\"\n            open={open}\n            renderTrigger={({ ref, getInteractionProps }) => (\n              <SelectInputTriggerButtonPropsContext.Provider\n                // eslint-disable-next-line react/jsx-no-constructed-context-values\n                value={{\n                  ref: (node) => {\n                    ref(node);\n                    if (externalTriggerRef) {\n                      // eslint-disable-next-line no-param-reassign\n                      externalTriggerRef.current = node;\n                    } else {\n                      internalTriggerRef.current = node;\n                    }\n                  },\n                  size,\n                  ...inputAttributes,\n                  ...UNSAFE_triggerButtonProps,\n                  id,\n                  ...mergeProps(\n                    {\n                      onClick: () => {\n                        setOpen((prev) => !prev);\n                      },\n                      onKeyDown: (event: React.KeyboardEvent) => {\n                        if (\n                          event.key === ' ' ||\n                          event.key === 'Enter' ||\n                          event.key === 'ArrowDown' ||\n                          event.key === 'ArrowUp'\n                        ) {\n                          setOpen((prev) => !prev);\n                        }\n                      },\n                    },\n                    getInteractionProps(),\n                  ),\n                }}\n              >\n                {renderTrigger({\n                  content: !placeholderShown ? (\n                    <SelectInputOptionContentWithinTriggerContext.Provider value>\n                      {multiple && Array.isArray(value)\n                        ? (value as readonly NonNullable<T>[])\n                            .map((option) => renderValue(option, true))\n                            .filter((node) => node != null)\n                            .join(', ')\n                        : renderValue(value as NonNullable<T>, true)}\n                    </SelectInputOptionContentWithinTriggerContext.Provider>\n                  ) : (\n                    placeholder\n                  ),\n                  placeholderShown,\n                  clear:\n                    onClear != null\n                      ? () => {\n                          onClear();\n                          (externalTriggerRef?.current ?? internalTriggerRef.current)?.focus({\n                            preventScroll: true,\n                          });\n                        }\n                      : undefined,\n                  disabled: uiDisabled,\n                  size,\n                  className,\n                })}\n              </SelectInputTriggerButtonPropsContext.Provider>\n            )}\n            initialFocusRef={controllerRef}\n            size={filterable ? 'lg' : 'md'}\n            padding=\"none\"\n            onClose={() => {\n              setOpen(false);\n            }}\n            onCloseEnd={() => {\n              setFilterQuery('');\n            }}\n          >\n            <SelectInputOptions\n              id={id ? `${id}Search` : undefined}\n              parentId={parentId}\n              items={items}\n              compareValues={compareValues}\n              renderValue={renderValue}\n              renderFooter={renderFooter}\n              filterable={filterable}\n              filterPlaceholder={filterPlaceholder}\n              sortFilteredOptions={sortFilteredOptions}\n              searchInputRef={searchInputRef}\n              listboxRef={listboxRef}\n              filterQuery={deferredFilterQuery}\n              autocomplete={autocomplete}\n              name={name}\n              onFilterChange={setFilterQuery}\n              onAutocompleteSelect={(matchedValue) => {\n                onChange?.(matchedValue as M extends true ? T[] : T);\n                if (!multiple) {\n                  setOpen(false);\n                }\n              }}\n              {...getListBoxLabelProps()}\n            />\n          </OptionsOverlay>\n        );\n      }}\n    </ListboxBase>\n  );\n}\n\n// Attach sortByRelevance to the component for convenience\nSelectInput.sortByRelevance = sortByRelevance;\n"],"names":["noop","SelectInput","id","idProp","parentId","name","multiple","placeholder","autocomplete","items","defaultValue","value","controlledValue","compareValues","renderValue","String","renderFooter","renderTrigger","DefaultRenderTrigger","filterable","filterPlaceholder","sortFilteredOptions","disabled","size","className","UNSAFE_triggerButtonProps","triggerRef","externalTriggerRef","onFilterChange","onChange","onOpen","onClose","onClear","inputAttributes","useInputAttributes","nonLabelable","open","setOpen","useState","initialized","useRef","handleClose","useEffectEvent","handleOpen","useEffect","current","filterQuery","_setFilterQuery","deferredFilterQuery","useDeferredValue","previousFilterQueryRef","setFilterQuery","useCallback","query","queryNormalized","searchableString","internalTriggerRef","searchInputRef","listboxRef","controllerRef","screenSm","useScreenSize","Breakpoint","SMALL","OptionsOverlay","SelectInputPopover","SelectInputBottomSheet","getListBoxLabelProps","listBoxLabel","listBoxLabelledBy","_jsx","ListboxBase","by","children","uiDisabled","placeholderShown","Array","isArray","length","placement","ref","getInteractionProps","SelectInputTriggerButtonPropsContext","Provider","node","mergeProps","onClick","prev","onKeyDown","event","key","content","SelectInputOptionContentWithinTriggerContext","map","option","filter","join","clear","focus","preventScroll","undefined","initialFocusRef","padding","onCloseEnd","SelectInputOptions","onAutocompleteSelect","matchedValue","sortByRelevance"],"mappings":"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"}

package/build/inputs/TextArea.js

@@ -8,12 +8,17 @@ var jsxRuntime = require('react/jsx-runtime');
 
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea({
   className,
+  maxLength,
   ...restProps
 }, reference) {
   const inputAttributes = contexts.useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = typeof value === 'string' ? value.length : String(value).length;
+  contexts.useTextareaCharacterCount(currentLength, maxLength);
   return /*#__PURE__*/jsxRuntime.jsx("textarea", {
     ref: reference,
     className: clsx.clsx(className, _common.inputClassNameBase(), 'np-text-area'),
+    maxLength: maxLength,
     ...inputAttributes,
     ...restProps
   });

package/build/inputs/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n  React.ComponentPropsWithRef<'textarea'>,\n  {\n    'aria-invalid'?: boolean;\n  }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <textarea\n      ref={reference}\n      className={clsx(className, inputClassNameBase(), 'np-text-area')}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","restProps","reference","inputAttributes","useInputAttributes","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;;;MAcaA,QAAQ,gBAAGC,gBAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAE,GAAGC;AAAS,CAAiB,EAC1CC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;AAE5C,EAAA,oBACEC,cAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,SAAI,CAACP,SAAS,EAAEQ,0BAAkB,EAAE,EAAE,cAAc,CAAE;AAAA,IAAA,GAC7DL,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextArea.js","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useTextareaCharacterCount, useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n  React.ComponentPropsWithRef<'textarea'>,\n  {\n    'aria-invalid'?: boolean;\n  }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, maxLength, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const value = restProps.value ?? restProps.defaultValue ?? '';\n  const currentLength = typeof value === 'string' ? value.length : String(value).length;\n\n  useTextareaCharacterCount(currentLength, maxLength);\n\n  return (\n    <textarea\n      ref={reference}\n      className={clsx(className, inputClassNameBase(), 'np-text-area')}\n      maxLength={maxLength}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","maxLength","restProps","reference","inputAttributes","useInputAttributes","value","defaultValue","currentLength","length","String","useTextareaCharacterCount","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;;;MAcaA,QAAQ,gBAAGC,gBAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAiB,EACrDC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,2BAAkB,EAAE;EAC5C,MAAMC,KAAK,GAAGJ,SAAS,CAACI,KAAK,IAAIJ,SAAS,CAACK,YAAY,IAAI,EAAE;AAC7D,EAAA,MAAMC,aAAa,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACG,MAAM,GAAGC,MAAM,CAACJ,KAAK,CAAC,CAACG,MAAM;AAErFE,EAAAA,kCAAyB,CAACH,aAAa,EAAEP,SAAS,CAAC;AAEnD,EAAA,oBACEW,cAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEV,SAAU;IACfH,SAAS,EAAEc,SAAI,CAACd,SAAS,EAAEe,0BAAkB,EAAE,EAAE,cAAc,CAAE;AACjEd,IAAAA,SAAS,EAAEA,SAAU;AAAA,IAAA,GACjBG,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/TextArea.mjs

@@ -1,17 +1,22 @@
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { inputClassNameBase } from './_common.mjs';
-import { useInputAttributes } from './contexts.mjs';
+import { useInputAttributes, useTextareaCharacterCount } from './contexts.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 const TextArea = /*#__PURE__*/forwardRef(function TextArea({
   className,
+  maxLength,
   ...restProps
 }, reference) {
   const inputAttributes = useInputAttributes();
+  const value = restProps.value ?? restProps.defaultValue ?? '';
+  const currentLength = typeof value === 'string' ? value.length : String(value).length;
+  useTextareaCharacterCount(currentLength, maxLength);
   return /*#__PURE__*/jsx("textarea", {
     ref: reference,
     className: clsx(className, inputClassNameBase(), 'np-text-area'),
+    maxLength: maxLength,
     ...inputAttributes,
     ...restProps
   });

package/build/inputs/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n  React.ComponentPropsWithRef<'textarea'>,\n  {\n    'aria-invalid'?: boolean;\n  }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n\n  return (\n    <textarea\n      ref={reference}\n      className={clsx(className, inputClassNameBase(), 'np-text-area')}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","restProps","reference","inputAttributes","useInputAttributes","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;MAcaA,QAAQ,gBAAGC,UAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAE,GAAGC;AAAS,CAAiB,EAC1CC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;AAE5C,EAAA,oBACEC,GAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEJ,SAAU;IACfF,SAAS,EAAEO,IAAI,CAACP,SAAS,EAAEQ,kBAAkB,EAAE,EAAE,cAAc,CAAE;AAAA,IAAA,GAC7DL,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}
+{"version":3,"file":"TextArea.mjs","sources":["../../src/inputs/TextArea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { Merge } from '../utils';\nimport { inputClassNameBase } from './_common';\nimport { useTextareaCharacterCount, useInputAttributes } from './contexts';\n\nexport interface TextAreaProps extends Merge<\n  React.ComponentPropsWithRef<'textarea'>,\n  {\n    'aria-invalid'?: boolean;\n  }\n> {}\n\nexport const TextArea = forwardRef(function TextArea(\n  { className, maxLength, ...restProps }: TextAreaProps,\n  reference: React.ForwardedRef<HTMLTextAreaElement | null>,\n) {\n  const inputAttributes = useInputAttributes();\n  const value = restProps.value ?? restProps.defaultValue ?? '';\n  const currentLength = typeof value === 'string' ? value.length : String(value).length;\n\n  useTextareaCharacterCount(currentLength, maxLength);\n\n  return (\n    <textarea\n      ref={reference}\n      className={clsx(className, inputClassNameBase(), 'np-text-area')}\n      maxLength={maxLength}\n      {...inputAttributes}\n      {...restProps}\n    />\n  );\n});\n"],"names":["TextArea","forwardRef","className","maxLength","restProps","reference","inputAttributes","useInputAttributes","value","defaultValue","currentLength","length","String","useTextareaCharacterCount","_jsx","ref","clsx","inputClassNameBase"],"mappings":";;;;;;MAcaA,QAAQ,gBAAGC,UAAU,CAAC,SAASD,QAAQA,CAClD;EAAEE,SAAS;EAAEC,SAAS;EAAE,GAAGC;AAAS,CAAiB,EACrDC,SAAyD,EAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,kBAAkB,EAAE;EAC5C,MAAMC,KAAK,GAAGJ,SAAS,CAACI,KAAK,IAAIJ,SAAS,CAACK,YAAY,IAAI,EAAE;AAC7D,EAAA,MAAMC,aAAa,GAAG,OAAOF,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACG,MAAM,GAAGC,MAAM,CAACJ,KAAK,CAAC,CAACG,MAAM;AAErFE,EAAAA,yBAAyB,CAACH,aAAa,EAAEP,SAAS,CAAC;AAEnD,EAAA,oBACEW,GAAA,CAAA,UAAA,EAAA;AACEC,IAAAA,GAAG,EAAEV,SAAU;IACfH,SAAS,EAAEc,IAAI,CAACd,SAAS,EAAEe,kBAAkB,EAAE,EAAE,cAAc,CAAE;AACjEd,IAAAA,SAAS,EAAEA,SAAU;AAAA,IAAA,GACjBG,eAAe;IAAA,GACfF;AAAS,GAAC,CACd;AAEN,CAAC;;;;"}

package/build/inputs/contexts.js

@@ -25,6 +25,20 @@ function useInputAttributes({
 function useFieldLabelRef() {
   return React.useContext(FieldLabelContext)?.ref;
 }
+const TextareaCharacterCountContext = /*#__PURE__*/React.createContext(undefined);
+const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+function useTextareaCharacterCount(current, max) {
+  const setCharacterCount = React.useContext(TextareaCharacterCountContext);
+  React.useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({
+        current,
+        max
+      });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
 function withInputAttributes(Component, args) {
   function ComponentWithInputAttributes(props) {
     return /*#__PURE__*/jsxRuntime.jsx(Component, {
@@ -40,7 +54,9 @@ exports.FieldLabelContextProvider = FieldLabelContextProvider;
 exports.InputDescribedByProvider = InputDescribedByProvider;
 exports.InputIdContextProvider = InputIdContextProvider;
 exports.InputInvalidProvider = InputInvalidProvider;
+exports.TextareaCharacterCountProvider = TextareaCharacterCountProvider;
 exports.useFieldLabelRef = useFieldLabelRef;
 exports.useInputAttributes = useInputAttributes;
+exports.useTextareaCharacterCount = useTextareaCharacterCount;
 exports.withInputAttributes = withInputAttributes;
 //# sourceMappingURL=contexts.js.map

package/build/inputs/contexts.js.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.js","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;;;AAOA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,mBAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,mBAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,mBAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,gBAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,gBAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,gBAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,gBAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAMM,SAAUC,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,cAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEb,kBAAkB,CAACS,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;;;;;;;"}
+{"version":3,"file":"contexts.js","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport type TextareaCharacterCountState = { current: number; max: number } | null;\n\nconst TextareaCharacterCountContext = createContext<\n  ((state: TextareaCharacterCountState) => void) | undefined\n>(undefined);\nexport const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;\n\nexport function useTextareaCharacterCount(current: number, max: number | undefined) {\n  const setCharacterCount = useContext(TextareaCharacterCountContext);\n  useEffect(() => {\n    if (setCharacterCount && max != null) {\n      setCharacterCount({ current, max });\n      return () => setCharacterCount(null);\n    }\n  }, [setCharacterCount, current, max]);\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","TextareaCharacterCountContext","TextareaCharacterCountProvider","useTextareaCharacterCount","current","max","setCharacterCount","useEffect","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;;;AAOA,MAAMA,iBAAiB,gBAAGC,mBAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,mBAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,mBAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,mBAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,gBAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,gBAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,gBAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,gBAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAIA,MAAMC,6BAA6B,gBAAGjB,mBAAa,CAEjDC,SAAS,CAAC;AACL,MAAMiB,8BAA8B,GAAGD,6BAA6B,CAACd;AAEtE,SAAUgB,yBAAyBA,CAACC,OAAe,EAAEC,GAAuB,EAAA;AAChF,EAAA,MAAMC,iBAAiB,GAAGT,gBAAU,CAACI,6BAA6B,CAAC;AACnEM,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAID,iBAAiB,IAAID,GAAG,IAAI,IAAI,EAAE;AACpCC,MAAAA,iBAAiB,CAAC;QAAEF,OAAO;AAAEC,QAAAA;AAAG,OAAE,CAAC;AACnC,MAAA,OAAO,MAAMC,iBAAiB,CAAC,IAAI,CAAC;AACtC,IAAA;EACF,CAAC,EAAE,CAACA,iBAAiB,EAAEF,OAAO,EAAEC,GAAG,CAAC,CAAC;AACvC;AAMM,SAAUG,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,cAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEpB,kBAAkB,CAACgB,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;;;;;;;;;"}

package/build/inputs/contexts.mjs

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const FieldLabelContext = /*#__PURE__*/createContext(undefined);
@@ -23,6 +23,20 @@ function useInputAttributes({
 function useFieldLabelRef() {
   return useContext(FieldLabelContext)?.ref;
 }
+const TextareaCharacterCountContext = /*#__PURE__*/createContext(undefined);
+const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;
+function useTextareaCharacterCount(current, max) {
+  const setCharacterCount = useContext(TextareaCharacterCountContext);
+  useEffect(() => {
+    if (setCharacterCount && max != null) {
+      setCharacterCount({
+        current,
+        max
+      });
+      return () => setCharacterCount(null);
+    }
+  }, [setCharacterCount, current, max]);
+}
 function withInputAttributes(Component, args) {
   function ComponentWithInputAttributes(props) {
     return /*#__PURE__*/jsx(Component, {
@@ -34,5 +48,5 @@ function withInputAttributes(Component, args) {
   return ComponentWithInputAttributes;
 }
 
-export { FieldLabelContextProvider, InputDescribedByProvider, InputIdContextProvider, InputInvalidProvider, useFieldLabelRef, useInputAttributes, withInputAttributes };
+export { FieldLabelContextProvider, InputDescribedByProvider, InputIdContextProvider, InputInvalidProvider, TextareaCharacterCountProvider, useFieldLabelRef, useInputAttributes, useTextareaCharacterCount, withInputAttributes };
 //# sourceMappingURL=contexts.mjs.map

package/build/inputs/contexts.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"contexts.mjs","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;AAOA,MAAMA,iBAAiB,gBAAGC,aAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,aAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,aAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,aAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,UAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,UAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,UAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,UAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAMM,SAAUC,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,GAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEb,kBAAkB,CAACS,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;"}
+{"version":3,"file":"contexts.mjs","sources":["../../src/inputs/contexts.tsx"],"sourcesContent":["import { createContext, useContext, useEffect } from 'react';\n\ntype FieldLabelContextType = {\n  id?: string;\n  ref?: React.RefObject<HTMLLabelElement>;\n};\n\nconst FieldLabelContext = createContext<FieldLabelContextType | undefined>(undefined);\nexport const FieldLabelContextProvider = FieldLabelContext.Provider;\n\nconst InputIdContext = createContext<string | undefined>(undefined);\nexport const InputIdContextProvider = InputIdContext.Provider;\n\nconst InputDescribedByContext = createContext<string | undefined>(undefined);\nexport const InputDescribedByProvider = InputDescribedByContext.Provider;\n\nconst InputInvalidContext = createContext<boolean | undefined>(undefined);\nexport const InputInvalidProvider = InputInvalidContext.Provider;\n\ninterface UseInputAttributesArgs {\n  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */\n  nonLabelable?: boolean;\n}\n\nexport function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {\n  const labelId = useContext(FieldLabelContext)?.id;\n  return {\n    id: useContext(InputIdContext),\n    'aria-labelledby': nonLabelable ? labelId : undefined,\n    'aria-describedby': useContext(InputDescribedByContext),\n    'aria-invalid': useContext(InputInvalidContext),\n  } satisfies React.HTMLAttributes<HTMLElement>;\n}\n\nexport function useFieldLabelRef() {\n  return useContext(FieldLabelContext)?.ref;\n}\n\nexport type TextareaCharacterCountState = { current: number; max: number } | null;\n\nconst TextareaCharacterCountContext = createContext<\n  ((state: TextareaCharacterCountState) => void) | undefined\n>(undefined);\nexport const TextareaCharacterCountProvider = TextareaCharacterCountContext.Provider;\n\nexport function useTextareaCharacterCount(current: number, max: number | undefined) {\n  const setCharacterCount = useContext(TextareaCharacterCountContext);\n  useEffect(() => {\n    if (setCharacterCount && max != null) {\n      setCharacterCount({ current, max });\n      return () => setCharacterCount(null);\n    }\n  }, [setCharacterCount, current, max]);\n}\n\nexport interface WithInputAttributesProps {\n  inputAttributes: ReturnType<typeof useInputAttributes>;\n}\n\nexport function withInputAttributes<T extends Partial<WithInputAttributesProps>>(\n  Component: React.ComponentType<T>,\n  args?: UseInputAttributesArgs,\n) {\n  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {\n    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;\n  }\n\n  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;\n\n  return ComponentWithInputAttributes;\n}\n"],"names":["FieldLabelContext","createContext","undefined","FieldLabelContextProvider","Provider","InputIdContext","InputIdContextProvider","InputDescribedByContext","InputDescribedByProvider","InputInvalidContext","InputInvalidProvider","useInputAttributes","nonLabelable","labelId","useContext","id","useFieldLabelRef","ref","TextareaCharacterCountContext","TextareaCharacterCountProvider","useTextareaCharacterCount","current","max","setCharacterCount","useEffect","withInputAttributes","Component","args","ComponentWithInputAttributes","props","_jsx","inputAttributes","displayName","name"],"mappings":";;;AAOA,MAAMA,iBAAiB,gBAAGC,aAAa,CAAoCC,SAAS,CAAC;AAC9E,MAAMC,yBAAyB,GAAGH,iBAAiB,CAACI;AAE3D,MAAMC,cAAc,gBAAGJ,aAAa,CAAqBC,SAAS,CAAC;AAC5D,MAAMI,sBAAsB,GAAGD,cAAc,CAACD;AAErD,MAAMG,uBAAuB,gBAAGN,aAAa,CAAqBC,SAAS,CAAC;AACrE,MAAMM,wBAAwB,GAAGD,uBAAuB,CAACH;AAEhE,MAAMK,mBAAmB,gBAAGR,aAAa,CAAsBC,SAAS,CAAC;AAClE,MAAMQ,oBAAoB,GAAGD,mBAAmB,CAACL;SAOxCO,kBAAkBA,CAAC;AAAEC,EAAAA;IAAyC,EAAE,EAAA;AAC9E,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACd,iBAAiB,CAAC,EAAEe,EAAE;EACjD,OAAO;AACLA,IAAAA,EAAE,EAAED,UAAU,CAACT,cAAc,CAAC;AAC9B,IAAA,iBAAiB,EAAEO,YAAY,GAAGC,OAAO,GAAGX,SAAS;AACrD,IAAA,kBAAkB,EAAEY,UAAU,CAACP,uBAAuB,CAAC;IACvD,cAAc,EAAEO,UAAU,CAACL,mBAAmB;GACH;AAC/C;SAEgBO,gBAAgBA,GAAA;AAC9B,EAAA,OAAOF,UAAU,CAACd,iBAAiB,CAAC,EAAEiB,GAAG;AAC3C;AAIA,MAAMC,6BAA6B,gBAAGjB,aAAa,CAEjDC,SAAS,CAAC;AACL,MAAMiB,8BAA8B,GAAGD,6BAA6B,CAACd;AAEtE,SAAUgB,yBAAyBA,CAACC,OAAe,EAAEC,GAAuB,EAAA;AAChF,EAAA,MAAMC,iBAAiB,GAAGT,UAAU,CAACI,6BAA6B,CAAC;AACnEM,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAID,iBAAiB,IAAID,GAAG,IAAI,IAAI,EAAE;AACpCC,MAAAA,iBAAiB,CAAC;QAAEF,OAAO;AAAEC,QAAAA;AAAG,OAAE,CAAC;AACnC,MAAA,OAAO,MAAMC,iBAAiB,CAAC,IAAI,CAAC;AACtC,IAAA;EACF,CAAC,EAAE,CAACA,iBAAiB,EAAEF,OAAO,EAAEC,GAAG,CAAC,CAAC;AACvC;AAMM,SAAUG,mBAAmBA,CACjCC,SAAiC,EACjCC,IAA6B,EAAA;EAE7B,SAASC,4BAA4BA,CAACC,KAA8C,EAAA;IAClF,oBAAOC,GAAA,CAACJ,SAAS,EAAA;AAACK,MAAAA,eAAe,EAAEpB,kBAAkB,CAACgB,IAAI,CAAE;MAAA,GAAME;AAAW,MAAI;AACnF,EAAA;AAEAD,EAAAA,4BAA4B,CAACI,WAAW,GAAG,CAAA,oBAAA,EAAuBN,SAAS,CAACM,WAAW,IAAIN,SAAS,CAACO,IAAI,IAAI,WAAW,CAAA,CAAA,CAAG;AAE3H,EAAA,OAAOL,4BAA4B;AACrC;;;;"}

package/build/instructionsList/InstructionsList.js

@@ -7,8 +7,8 @@ var clsx = require('clsx');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/instructionsList/InstructionsList.mjs

@@ -3,8 +3,8 @@ import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/link/Link.js

@@ -9,8 +9,8 @@ var PrimitiveButton = require('../primitives/PrimitiveButton/PrimitiveButton.js'
 var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/link/Link.mjs

@@ -5,8 +5,8 @@ import PrimitiveButton from '../primitives/PrimitiveButton/PrimitiveButton.mjs';
 import PrimitiveAnchor from '../primitives/PrimitiveAnchor/PrimitiveAnchor.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js

@@ -6,8 +6,8 @@ var Body = require('../../body/Body.js');
 var Link = require('../../link/Link.js');
 require('../../common/theme.js');
 require('../../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
-require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 var typography = require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs

@@ -4,8 +4,8 @@ import Body from '../../body/Body.mjs';
 import Link from '../../link/Link.mjs';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
-import '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import { Typography } from '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';

package/build/listItem/ListItem.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/listItem/ListItem.mjs

@@ -1,8 +1,8 @@
 import { useId, useState, useMemo, useContext } from 'react';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/listItem/Prompt/ListItemPrompt.js

@@ -3,8 +3,8 @@
 var React = require('react');
 require('../../common/theme.js');
 require('../../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../../common/propsValues/control.js');
-require('../../common/propsValues/breakpoint.js');
 require('../../common/propsValues/size.js');
 require('../../common/propsValues/typography.js');
 require('../../common/propsValues/width.js');

package/build/listItem/Prompt/ListItemPrompt.mjs

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import '../../common/theme.mjs';
 import '../../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../../common/propsValues/control.mjs';
-import '../../common/propsValues/breakpoint.mjs';
 import '../../common/propsValues/size.mjs';
 import '../../common/propsValues/typography.mjs';
 import '../../common/propsValues/width.mjs';

package/build/loader/Loader.js

@@ -8,8 +8,8 @@ var React = require('react');
 var Body = require('../body/Body.js');
 require('../common/theme.js');
 require('../common/direction.js');
+require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
 var size = require('../common/propsValues/size.js');
 var typography = require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');

package/build/loader/Loader.mjs

@@ -4,8 +4,8 @@ import { useState, useEffect } from 'react';
 import Body from '../body/Body.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
 import { Size } from '../common/propsValues/size.mjs';
 import { Typography } from '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';

package/build/logo/Logo.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var logoAssets$1 = require('./logo-assets.js');
 require('../common/theme.js');
 require('../common/direction.js');
+var neptuneTokens = require('@transferwise/neptune-tokens');
 require('../common/propsValues/control.js');
-var breakpoint = require('../common/propsValues/breakpoint.js');
 require('../common/propsValues/size.js');
 require('../common/propsValues/typography.js');
 require('../common/propsValues/width.js');
@@ -64,7 +64,7 @@ const logoAssets = {
 };
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
- * and the full wordmark on ≥576px (small breakpoint and above).
+ * and the full wordmark on ≥600px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */
@@ -76,7 +76,7 @@ function Logo({
   size = 24,
   'aria-label': ariaLabel
 }) {
-  const isScreenSm = !useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
+  const isScreenSm = !useScreenSize.useScreenSize(neptuneTokens.Breakpoint.SMALL);
   const compact = display === 'compact' || display === 'responsive' && isScreenSm;
   const assetName = compact ? 'FastFlag' : getAssetName(type, format);
   const Asset = logoAssets[assetName];

package/build/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  size = 24,\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}
+{"version":3,"file":"Logo.js","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥600px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  size = 24,\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}

package/build/logo/Logo.mjs

@@ -2,8 +2,8 @@ import { clsx } from 'clsx';
 import { logoAssetsDimensions, WisePlatformSecondary, WisePlatformPrimary, WiseBusinessSecondary, WiseBusinessPrimary, WiseLogo, FastFlag } from './logo-assets.mjs';
 import '../common/theme.mjs';
 import '../common/direction.mjs';
+import { Breakpoint } from '@transferwise/neptune-tokens';
 import '../common/propsValues/control.mjs';
-import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
 import '../common/propsValues/size.mjs';
 import '../common/propsValues/typography.mjs';
 import '../common/propsValues/width.mjs';
@@ -60,7 +60,7 @@ const logoAssets = {
 };
 /**
  * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports
- * and the full wordmark on ≥576px (small breakpoint and above).
+ * and the full wordmark on ≥600px (small breakpoint and above).
  *
  * @see {@link https://wise.design/foundations/logo Design Spec}
  */

package/build/logo/Logo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥576px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  size = 24,\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}
+{"version":3,"file":"Logo.mjs","sources":["../../src/logo/Logo.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport {\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n  FastFlag,\n  logoAssetsDimensions,\n} from './logo-assets';\nimport type { LogoAssetName } from './logo-assets';\nimport { Breakpoint } from '../common';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { AriaAttributes } from 'react';\n\nexport enum LogoType {\n  WISE = 'WISE',\n  WISE_BUSINESS = 'WISE_BUSINESS',\n  WISE_PLATFORM = 'WISE_PLATFORM',\n}\n\nexport enum LogoDisplay {\n  RESPONSIVE = 'responsive',\n  COMPACT = 'compact',\n  FULL = 'full',\n}\n\nexport enum LogoFormat {\n  DEFAULT = 'default',\n  PRIMARY_LOCKUP = 'primary-lockup',\n  SECONDARY_LOCKUP = 'secondary-lockup',\n}\n\nexport type LogoSize = 16 | 18 | 20 | 24 | 28 | 36 | '16' | '18' | '20' | '24' | '28' | '36';\n\nexport interface LogoProps {\n  /** Extra classes applied to Logo */\n  className?: string;\n  /**\n   * Renders a light-coloured version suited for dark backgrounds.\n   * @default false\n   * @deprecated dark mode comes out of the box, this property has no effect\n   */\n  inverse?: boolean;\n  /**\n   * What type of logo to display\n   * @default 'WISE'\n   */\n  type?: `${LogoType}`;\n  /**\n   * Controls which logo variant is shown.\n   * - `\"responsive\"` (default): full wordmark on large screens, fast-flag mark on small screens (<600 px).\n   * - `\"compact\"`: always renders the fast-flag mark regardless of screen size.\n   * - `\"full\"`: always renders the full wordmark/lockup regardless of screen size.\n   * @default 'responsive'\n   */\n  display?: `${LogoDisplay}`;\n  /**\n   * Controls the format of the logo.\n   * - `\"default\"`: plain Wise wordmark, no product name.\n   * - `\"primary-lockup\"`: product name shown inline alongside the wordmark.\n   * - `\"secondary-lockup\"`: stacked (two-line) variant with the product name.\n   * @default 'default'\n   */\n  format?: `${LogoFormat}`;\n  /**\n   * Controls the height and width of the logo in pixels.\n   * @default 24\n   */\n  size?: LogoSize;\n  /**\n   * Override default ({@link labelByType}) screen reader messages\n   */\n  'aria-label'?: AriaAttributes['aria-label'];\n}\n\nconst labelByType = {\n  WISE: 'Wise',\n  WISE_BUSINESS: 'Wise Business',\n  WISE_PLATFORM: 'Wise Platform',\n} satisfies Record<`${LogoType}`, string>;\n\nconst logoAssets: Record<LogoAssetName, () => JSX.Element> = {\n  FastFlag,\n  WiseLogo,\n  WiseBusinessPrimary,\n  WiseBusinessSecondary,\n  WisePlatformPrimary,\n  WisePlatformSecondary,\n};\n\n/**\n * Renders the Wise wordmark logo. Responsive — shows the flag-only mark on small viewports\n * and the full wordmark on ≥600px (small breakpoint and above).\n *\n * @see {@link https://wise.design/foundations/logo Design Spec}\n */\nexport default function Logo({\n  className,\n  type = 'WISE',\n  format = 'default',\n  display = 'responsive',\n  size = 24,\n  'aria-label': ariaLabel,\n}: LogoProps) {\n  const isScreenSm = !useScreenSize(Breakpoint.SMALL);\n  const compact = display === 'compact' || (display === 'responsive' && isScreenSm);\n\n  const assetName = compact ? 'FastFlag' : getAssetName(type, format);\n  const Asset = logoAssets[assetName];\n  const sizes = logoAssetsDimensions[assetName];\n  const { width, height } =\n    logoAssetsDimensions[assetName][Number(size) as keyof typeof sizes] ?? sizes[24];\n\n  return (\n    <span\n      className={clsx('np-logo', className)}\n      role=\"img\"\n      aria-label={ariaLabel ?? labelByType[type]}\n      style={\n        {\n          '--wds-logo-width': `${width}px`,\n          '--wds-logo-height': `${height}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Asset />\n    </span>\n  );\n}\n\nfunction getAssetName(type: `${LogoType}`, format: `${LogoFormat}`): LogoAssetName {\n  if (format !== 'default') {\n    if (type === 'WISE_BUSINESS') {\n      return format === 'secondary-lockup' ? 'WiseBusinessSecondary' : 'WiseBusinessPrimary';\n    }\n    if (type === 'WISE_PLATFORM') {\n      return format === 'secondary-lockup' ? 'WisePlatformSecondary' : 'WisePlatformPrimary';\n    }\n  }\n  return 'WiseLogo';\n}\n"],"names":["LogoType","LogoDisplay","LogoFormat","labelByType","WISE","WISE_BUSINESS","WISE_PLATFORM","logoAssets","FastFlag","WiseLogo","WiseBusinessPrimary","WiseBusinessSecondary","WisePlatformPrimary","WisePlatformSecondary","Logo","className","type","format","display","size","ariaLabel","isScreenSm","useScreenSize","Breakpoint","SMALL","compact","assetName","getAssetName","Asset","sizes","logoAssetsDimensions","width","height","Number","_jsx","clsx","role","style","children"],"mappings":"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"}