@simplybusiness/mobius 10.4.2 → 10.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/components/AddressLookup/AddressLookup.js +39 -36
  3. package/dist/cjs/components/AddressLookup/AddressLookup.js.map +3 -3
  4. package/dist/cjs/components/AddressLookup/index.js +39 -36
  5. package/dist/cjs/components/AddressLookup/index.js.map +3 -3
  6. package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js +3 -7
  7. package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map +2 -2
  8. package/dist/cjs/components/Breadcrumbs/index.js +3 -7
  9. package/dist/cjs/components/Breadcrumbs/index.js.map +2 -2
  10. package/dist/cjs/components/Combobox/Combobox.js +35 -32
  11. package/dist/cjs/components/Combobox/Combobox.js.map +3 -3
  12. package/dist/cjs/components/Combobox/index.js +35 -32
  13. package/dist/cjs/components/Combobox/index.js.map +3 -3
  14. package/dist/cjs/components/DateField/DateField.js +11 -8
  15. package/dist/cjs/components/DateField/DateField.js.map +3 -3
  16. package/dist/cjs/components/DateField/index.js +11 -8
  17. package/dist/cjs/components/DateField/index.js.map +3 -3
  18. package/dist/cjs/components/DropdownMenu/Item.js +3 -6
  19. package/dist/cjs/components/DropdownMenu/Item.js.map +2 -2
  20. package/dist/cjs/components/DropdownMenu/index.js +3 -6
  21. package/dist/cjs/components/DropdownMenu/index.js.map +2 -2
  22. package/dist/cjs/components/MaskedField/MaskedField.js +11 -8
  23. package/dist/cjs/components/MaskedField/MaskedField.js.map +3 -3
  24. package/dist/cjs/components/MaskedField/index.js +13 -10
  25. package/dist/cjs/components/MaskedField/index.js.map +3 -3
  26. package/dist/cjs/components/NumberField/NumberField.js +10 -7
  27. package/dist/cjs/components/NumberField/NumberField.js.map +3 -3
  28. package/dist/cjs/components/NumberField/index.js +10 -7
  29. package/dist/cjs/components/NumberField/index.js.map +3 -3
  30. package/dist/cjs/components/PasswordField/PasswordField.js +9 -6
  31. package/dist/cjs/components/PasswordField/PasswordField.js.map +3 -3
  32. package/dist/cjs/components/PasswordField/index.js +9 -6
  33. package/dist/cjs/components/PasswordField/index.js.map +3 -3
  34. package/dist/cjs/components/Popover/Arrow.js +43 -0
  35. package/dist/cjs/components/Popover/Arrow.js.map +7 -0
  36. package/dist/cjs/components/Popover/Popover.js +258 -83
  37. package/dist/cjs/components/Popover/Popover.js.map +4 -4
  38. package/dist/cjs/components/Popover/index.js +258 -83
  39. package/dist/cjs/components/Popover/index.js.map +4 -4
  40. package/dist/cjs/components/Popover/useAutoUpdate.js +53 -0
  41. package/dist/cjs/components/Popover/useAutoUpdate.js.map +7 -0
  42. package/dist/cjs/components/Popover/useFloatingPosition.js +128 -0
  43. package/dist/cjs/components/Popover/useFloatingPosition.js.map +7 -0
  44. package/dist/cjs/components/Popover/useOutsidePress.js +46 -0
  45. package/dist/cjs/components/Popover/useOutsidePress.js.map +7 -0
  46. package/dist/cjs/components/TextField/TextField.js +6 -3
  47. package/dist/cjs/components/TextField/TextField.js.map +3 -3
  48. package/dist/cjs/components/TextField/adornmentWithClassName.js +3 -2
  49. package/dist/cjs/components/TextField/adornmentWithClassName.js.map +2 -2
  50. package/dist/cjs/components/TextField/index.js +6 -3
  51. package/dist/cjs/components/TextField/index.js.map +3 -3
  52. package/dist/cjs/components/index.js +550 -377
  53. package/dist/cjs/components/index.js.map +4 -4
  54. package/dist/cjs/index.js +550 -377
  55. package/dist/cjs/index.js.map +4 -4
  56. package/dist/cjs/meta.json +490 -121
  57. package/dist/esm/chunk-26KZYRE6.js +108 -0
  58. package/dist/esm/chunk-26KZYRE6.js.map +7 -0
  59. package/dist/esm/{chunk-XNEQHHNV.js → chunk-5QMKPWB4.js} +2 -2
  60. package/dist/esm/{chunk-IQKS662C.js → chunk-6RDK3FM2.js} +5 -3
  61. package/dist/esm/chunk-6RDK3FM2.js.map +7 -0
  62. package/dist/esm/{chunk-4HI2AOBC.js → chunk-6TSYA7CJ.js} +4 -7
  63. package/dist/esm/{chunk-4HI2AOBC.js.map → chunk-6TSYA7CJ.js.map} +2 -2
  64. package/dist/esm/chunk-CAL44W47.js +23 -0
  65. package/dist/esm/chunk-CAL44W47.js.map +7 -0
  66. package/dist/esm/{chunk-PEEQNAIN.js → chunk-DMYDWKKA.js} +4 -4
  67. package/dist/esm/{chunk-IM3I5CZL.js → chunk-I6CFRGID.js} +4 -3
  68. package/dist/esm/{chunk-IM3I5CZL.js.map → chunk-I6CFRGID.js.map} +2 -2
  69. package/dist/esm/chunk-K3ECDAUR.js +33 -0
  70. package/dist/esm/chunk-K3ECDAUR.js.map +7 -0
  71. package/dist/esm/{chunk-GJBH37DH.js → chunk-KFHPI67N.js} +4 -4
  72. package/dist/esm/{chunk-OEDU5ZEA.js → chunk-KUH5AB5T.js} +2 -2
  73. package/dist/esm/{chunk-JFDDW3IV.js → chunk-P7TPNRU4.js} +4 -8
  74. package/dist/esm/{chunk-JFDDW3IV.js.map → chunk-P7TPNRU4.js.map} +2 -2
  75. package/dist/esm/{chunk-F5ELD54X.js → chunk-QNOBB5HT.js} +2 -2
  76. package/dist/esm/{chunk-GV36OVX7.js → chunk-R67C5QTH.js} +2 -2
  77. package/dist/esm/{chunk-S4CU4XRB.js → chunk-VGFVSRWH.js} +2 -2
  78. package/dist/esm/chunk-VZ3IWSK6.js +158 -0
  79. package/dist/esm/chunk-VZ3IWSK6.js.map +7 -0
  80. package/dist/esm/{chunk-X4CMSAET.js → chunk-WSQWMVA2.js} +2 -2
  81. package/dist/esm/chunk-WYJP7HVL.js +26 -0
  82. package/dist/esm/chunk-WYJP7HVL.js.map +7 -0
  83. package/dist/esm/{chunk-OAG5T7NC.js → chunk-XEP6X7JU.js} +5 -5
  84. package/dist/esm/chunk-XEP6X7JU.js.map +7 -0
  85. package/dist/esm/components/AddressLookup/AddressLookup.js +6 -6
  86. package/dist/esm/components/AddressLookup/index.js +8 -8
  87. package/dist/esm/components/Breadcrumbs/Breadcrumbs.js +1 -1
  88. package/dist/esm/components/Breadcrumbs/index.js +3 -3
  89. package/dist/esm/components/Checkbox/index.js +1 -1
  90. package/dist/esm/components/Combobox/Combobox.js +5 -5
  91. package/dist/esm/components/Combobox/index.js +5 -5
  92. package/dist/esm/components/DateField/DateField.js +3 -3
  93. package/dist/esm/components/DateField/index.js +3 -3
  94. package/dist/esm/components/Drawer/index.js +3 -3
  95. package/dist/esm/components/DropdownMenu/Item.js +1 -1
  96. package/dist/esm/components/DropdownMenu/index.js +2 -2
  97. package/dist/esm/components/MaskedField/MaskedField.js +2 -2
  98. package/dist/esm/components/MaskedField/index.js +3 -3
  99. package/dist/esm/components/Modal/index.js +3 -3
  100. package/dist/esm/components/NumberField/NumberField.js +3 -3
  101. package/dist/esm/components/NumberField/index.js +3 -3
  102. package/dist/esm/components/PasswordField/PasswordField.js +3 -3
  103. package/dist/esm/components/PasswordField/index.js +3 -3
  104. package/dist/esm/components/Popover/Arrow.js +8 -0
  105. package/dist/esm/components/Popover/Arrow.js.map +7 -0
  106. package/dist/esm/components/Popover/Popover.js +5 -1
  107. package/dist/esm/components/Popover/index.js +5 -1
  108. package/dist/esm/components/Popover/useAutoUpdate.js +8 -0
  109. package/dist/esm/components/Popover/useAutoUpdate.js.map +7 -0
  110. package/dist/esm/components/Popover/useFloatingPosition.js +8 -0
  111. package/dist/esm/components/Popover/useFloatingPosition.js.map +7 -0
  112. package/dist/esm/components/Popover/useOutsidePress.js +8 -0
  113. package/dist/esm/components/Popover/useOutsidePress.js.map +7 -0
  114. package/dist/esm/components/TextField/TextField.js +2 -2
  115. package/dist/esm/components/TextField/adornmentWithClassName.js +1 -1
  116. package/dist/esm/components/TextField/index.js +2 -2
  117. package/dist/esm/components/index.js +81 -77
  118. package/dist/esm/index.js +81 -77
  119. package/dist/esm/meta.json +3495 -3149
  120. package/dist/tsconfig.build.tsbuildinfo +1 -1
  121. package/dist/types/components/Accordion/Accordion.d.ts +4 -4
  122. package/dist/types/components/Accordion/AccordionList.d.ts +4 -4
  123. package/dist/types/components/AddressLookup/AddressLookup.d.ts +4 -4
  124. package/dist/types/components/AddressLookup/LoqateAddressLookupService.d.ts +1 -1
  125. package/dist/types/components/Alert/Alert.d.ts +4 -4
  126. package/dist/types/components/Box/Box.d.ts +4 -4
  127. package/dist/types/components/Breadcrumbs/BreadcrumbItem.d.ts +4 -4
  128. package/dist/types/components/Breadcrumbs/Breadcrumbs.d.ts +4 -4
  129. package/dist/types/components/Button/Button.d.ts +4 -4
  130. package/dist/types/components/Checkbox/Checkbox.d.ts +4 -4
  131. package/dist/types/components/Checkbox/CheckboxGroup.d.ts +4 -4
  132. package/dist/types/components/Combobox/Combobox.d.ts +2 -5
  133. package/dist/types/components/Combobox/useComboboxOptions.d.ts +1 -1
  134. package/dist/types/components/Container/Container.d.ts +4 -4
  135. package/dist/types/components/DateField/DateField.d.ts +4 -4
  136. package/dist/types/components/Divider/Divider.d.ts +4 -4
  137. package/dist/types/components/Drawer/Content.d.ts +4 -4
  138. package/dist/types/components/Drawer/Drawer.d.ts +4 -4
  139. package/dist/types/components/Drawer/Header.d.ts +4 -4
  140. package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +4 -4
  141. package/dist/types/components/DropdownMenu/Item.d.ts +4 -4
  142. package/dist/types/components/ErrorMessage/ErrorMessage.d.ts +4 -4
  143. package/dist/types/components/ExpandableText/ExpandableText.d.ts +4 -4
  144. package/dist/types/components/Fieldset/Fieldset.d.ts +4 -4
  145. package/dist/types/components/Flex/Flex.d.ts +4 -4
  146. package/dist/types/components/Grid/Grid.d.ts +4 -4
  147. package/dist/types/components/Grid/Item.d.ts +4 -4
  148. package/dist/types/components/Image/Image.d.ts +4 -4
  149. package/dist/types/components/Label/Label.d.ts +4 -4
  150. package/dist/types/components/Link/Link.d.ts +4 -4
  151. package/dist/types/components/List/List.d.ts +4 -4
  152. package/dist/types/components/List/ListItem.d.ts +4 -4
  153. package/dist/types/components/LoadingIndicator/LoadingIndicator.d.ts +4 -4
  154. package/dist/types/components/Logo/Logo.d.ts +4 -4
  155. package/dist/types/components/MaskedField/MaskedField.d.ts +4 -4
  156. package/dist/types/components/Modal/Content.d.ts +4 -4
  157. package/dist/types/components/Modal/Header.d.ts +4 -4
  158. package/dist/types/components/Modal/Modal.d.ts +4 -4
  159. package/dist/types/components/NumberField/NumberField.d.ts +4 -4
  160. package/dist/types/components/Option/Option.d.ts +4 -4
  161. package/dist/types/components/PasswordField/PasswordField.d.ts +4 -4
  162. package/dist/types/components/Popover/Arrow.d.ts +9 -0
  163. package/dist/types/components/Popover/useAutoUpdate.d.ts +9 -0
  164. package/dist/types/components/Popover/useFloatingPosition.d.ts +17 -0
  165. package/dist/types/components/Popover/useOutsidePress.d.ts +9 -0
  166. package/dist/types/components/Progress/Progress.d.ts +4 -4
  167. package/dist/types/components/Radio/Radio.d.ts +4 -4
  168. package/dist/types/components/Radio/RadioGroup.d.ts +4 -4
  169. package/dist/types/components/SVG/SVG.d.ts +4 -4
  170. package/dist/types/components/Segment/Segment.d.ts +4 -4
  171. package/dist/types/components/Segment/SegmentGroup.d.ts +4 -4
  172. package/dist/types/components/Select/Select.d.ts +4 -4
  173. package/dist/types/components/Stack/Stack.d.ts +4 -4
  174. package/dist/types/components/Switch/Switch.d.ts +4 -4
  175. package/dist/types/components/Table/Body.d.ts +4 -4
  176. package/dist/types/components/Table/Cell.d.ts +4 -4
  177. package/dist/types/components/Table/Foot.d.ts +4 -4
  178. package/dist/types/components/Table/Head.d.ts +4 -4
  179. package/dist/types/components/Table/HeaderCell.d.ts +4 -4
  180. package/dist/types/components/Table/Row.d.ts +4 -4
  181. package/dist/types/components/Table/Table.d.ts +4 -4
  182. package/dist/types/components/Text/Text.d.ts +4 -4
  183. package/dist/types/components/TextArea/TextArea.d.ts +4 -4
  184. package/dist/types/components/TextAreaInput/TextAreaInput.d.ts +4 -4
  185. package/dist/types/components/TextField/TextField.d.ts +1 -4
  186. package/dist/types/components/TextField/adornmentWithClassName.d.ts +3 -1
  187. package/dist/types/components/TextOrHTML/TextOrHTML.d.ts +4 -4
  188. package/dist/types/components/Title/Title.d.ts +4 -4
  189. package/dist/types/components/Toast/ToastOptionsDoc.d.ts +4 -8
  190. package/dist/types/components/Toast/Toaster.d.ts +4 -4
  191. package/dist/types/hooks/useButton/useButton.d.ts +5 -5
  192. package/dist/types/hooks/useLabel/useLabel.d.ts +1 -1
  193. package/package.json +11 -11
  194. package/src/components/Box/Box.test.tsx +1 -2
  195. package/src/components/Breadcrumbs/Breadcrumbs.tsx +3 -7
  196. package/src/components/Button/Button.stories.tsx +1 -1
  197. package/src/components/Combobox/Combobox.tsx +2 -4
  198. package/src/components/DropdownMenu/DropdownMenu.stories.tsx +1 -1
  199. package/src/components/DropdownMenu/Item.tsx +3 -6
  200. package/src/components/Grid/Grid.stories.tsx +1 -1
  201. package/src/components/Popover/Arrow.tsx +25 -0
  202. package/src/components/Popover/Popover.characterization.test.tsx +269 -0
  203. package/src/components/Popover/Popover.stories.tsx +40 -3
  204. package/src/components/Popover/Popover.test.tsx +6 -2
  205. package/src/components/Popover/Popover.tsx +87 -81
  206. package/src/components/Popover/useAutoUpdate.ts +43 -0
  207. package/src/components/Popover/useFloatingPosition.ts +177 -0
  208. package/src/components/Popover/useOutsidePress.ts +31 -0
  209. package/src/components/TextField/TextField.tsx +3 -1
  210. package/src/components/TextField/adornmentWithClassName.ts +4 -3
  211. package/src/hooks/useBreakpoint/useBreakpoint.test.tsx +4 -4
  212. package/src/styles.d.ts +2 -0
  213. package/dist/esm/chunk-IQKS662C.js.map +0 -7
  214. package/dist/esm/chunk-O5YEU5TG.js +0 -155
  215. package/dist/esm/chunk-O5YEU5TG.js.map +0 -7
  216. package/dist/esm/chunk-OAG5T7NC.js.map +0 -7
  217. /package/dist/esm/{chunk-XNEQHHNV.js.map → chunk-5QMKPWB4.js.map} +0 -0
  218. /package/dist/esm/{chunk-PEEQNAIN.js.map → chunk-DMYDWKKA.js.map} +0 -0
  219. /package/dist/esm/{chunk-GJBH37DH.js.map → chunk-KFHPI67N.js.map} +0 -0
  220. /package/dist/esm/{chunk-OEDU5ZEA.js.map → chunk-KUH5AB5T.js.map} +0 -0
  221. /package/dist/esm/{chunk-F5ELD54X.js.map → chunk-QNOBB5HT.js.map} +0 -0
  222. /package/dist/esm/{chunk-GV36OVX7.js.map → chunk-R67C5QTH.js.map} +0 -0
  223. /package/dist/esm/{chunk-S4CU4XRB.js.map → chunk-VGFVSRWH.js.map} +0 -0
  224. /package/dist/esm/{chunk-X4CMSAET.js.map → chunk-WSQWMVA2.js.map} +0 -0
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/DropdownMenu/index.tsx", "../../../../src/components/DropdownMenu/DropdownMenu.tsx", "../../../../src/components/Button/Button.tsx", "../../../../src/components/Button/Loading.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/VisuallyHidden/VisuallyHidden.tsx", "../../../../src/hooks/useButton/useButton.tsx", "../../../../src/components/Button/Success.tsx", "../../../../src/components/DropdownMenu/Item.tsx"],
4
- "sourcesContent": ["import { DropdownMenu as DropdownMenuComponent } from \"./DropdownMenu\";\nimport { Item } from \"./Item\";\n\nimport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n} from \"./DropdownMenu\";\nimport type {\n ItemProps as DropdownMenuItemProps,\n ItemRef as DropdownMenuItemRef,\n ItemElementType as DropdownMenuItemElementType,\n} from \"./Item\";\n\nexport interface DropdownMenuCompound extends React.FC<DropdownMenuProps> {\n Item: React.FC<DropdownMenuItemProps>;\n}\n\nconst DropdownMenu: DropdownMenuCompound = Object.assign(\n DropdownMenuComponent,\n {\n Item,\n },\n);\n\nexport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n DropdownMenuItemProps,\n DropdownMenuItemRef,\n DropdownMenuItemElementType,\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { Children, isValidElement, cloneElement, useState } from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport \"./DropdownMenu.css\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n extends DOMProps, RefAttributes<DropdownMenuElementType> {\n children?: ReactNode;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n label?: string;\n trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n onClick?: () => void;\n};\n\nconst DropdownMenu = ({ ref, ...props }: DropdownMenuProps) => {\n const {\n elementType: Element = \"nav\",\n trigger,\n label = \"Menu\",\n children,\n ...otherProps\n } = props;\n const [activeId, setActiveId] = useState<number | null>(null);\n const numberOfItems = Children.count(children);\n const {\n buttonProps,\n itemProps,\n isOpen: open,\n setIsOpen,\n } = useDropdownMenu(numberOfItems);\n\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu\",\n otherProps.className,\n );\n const triggerClasses = classNames(\"mobius\", \"mobius-dropdown-menu__trigger\");\n const listClasses = classNames(\"mobius\", \"mobius-dropdown-menu__list\", {\n \"--is-open\": open,\n });\n\n const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n setActiveId(index);\n setIsOpen(false);\n\n if (onClick) {\n onClick();\n }\n };\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {trigger ? (\n cloneElement(trigger, {\n className: triggerClasses,\n open,\n label,\n ...buttonProps,\n } as Record<string, unknown>)\n ) : (\n <Button className={triggerClasses} {...buttonProps}>\n {label}\n </Button>\n )}\n <ul className={listClasses} role=\"menu\">\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n // DropdownMenu items accept onClick and active props\n return cloneElement(child, {\n onClick: () =>\n handleChildClick(child.props as Record<string, unknown>, index),\n active: index === activeId,\n ...itemProps[index],\n } as {\n onClick?: () => void;\n active?: boolean;\n [key: string]: unknown;\n });\n }\n\n return child;\n })}\n </ul>\n </Element>\n );\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n /** The name of the button when submitted in a form */\n name?: string | undefined;\n /** The value of the button when submitted in a form */\n value?: string | undefined;\n /** Custom class name for setting specific CSS */\n className?: string;\n /** Shortlist of styles */\n variant?: Variant;\n size?: Size;\n /** Display loading spinner */\n isLoading?: boolean;\n /** Display success style */\n isSuccess?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n const {\n children,\n elementType: Component = \"button\" as React.ElementType,\n isDisabled,\n isLoading,\n isSuccess,\n variant = \"primary\",\n size = \"md\",\n\n onPress,\n\n onClick,\n ...otherProps\n } = props;\n const { buttonProps } = useButton(props);\n\n // Reshape class name and apply to outer element\n otherProps.className = classNames(\n \"mobius\",\n \"mobius-button\",\n `--variant-${variant}`,\n `--size-${size}`,\n {\n \"--is-disabled\": isDisabled,\n \"--is-loading\": isLoading,\n \"--is-success\": isSuccess && !isLoading,\n },\n otherProps.className,\n );\n\n return (\n <Component ref={ref} {...buttonProps} {...otherProps}>\n {isLoading ? <Loading>{children}</Loading> : children}\n {isSuccess && !isLoading && <Success />}\n </Component>\n );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n const { children } = props;\n\n return (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={loading} spin size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__loading-text\">\n Loading\n </VisuallyHidden>\n {children}\n </>\n );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n /** The content to visually hide. */\n children?: ReactNode;\n id?: string;\n role?: AriaRole;\n\n className?: string;\n\n /**\n * The element type for the container. Defaults to 'div'\n */\n elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n const {\n className,\n children,\n elementType: Component = \"div\",\n ...otherProps\n } = props;\n\n return (\n <Component\n className={className}\n style={{\n border: 0,\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n width: \"1px\",\n whiteSpace: \"nowrap\",\n }}\n {...otherProps}\n >\n {children}\n </Component>\n );\n}\n", "import type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n elementType?:\n | \"button\"\n | \"a\"\n | \"span\"\n | \"input\"\n | JSXElementConstructor<unknown>\n | undefined;\n type?: \"button\" | \"submit\" | \"reset\";\n isDisabled?: boolean;\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n href?: string;\n target?: string;\n rel?: string;\n role?: string;\n name?: string | undefined;\n value?: string | undefined;\n}\n\nexport function useButton({\n elementType = \"button\",\n type = \"button\",\n isDisabled = false,\n href,\n target,\n rel,\n role,\n name,\n value,\n onClick,\n onPress,\n}: UseButtonProps) {\n const realOnClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n\n onClick?.(event);\n onPress?.(event);\n },\n [isDisabled, onClick, onPress],\n );\n\n function getRole() {\n if (role) {\n return role;\n }\n\n if (elementType === \"a\") {\n return undefined;\n }\n\n return \"button\";\n }\n\n const extraProps =\n elementType === \"button\"\n ? { type }\n : {\n role: getRole(),\n };\n\n return {\n buttonProps: {\n href: elementType === \"a\" ? href : undefined,\n target: elementType === \"a\" ? target : undefined,\n rel: elementType === \"a\" ? rel : undefined,\n tabIndex: isDisabled ? -1 : 0,\n disabled: isDisabled || undefined,\n \"aria-disabled\": isDisabled || undefined,\n name:\n elementType === \"input\" || elementType === \"button\" ? name : undefined,\n value:\n elementType === \"input\" || elementType === \"button\" ? value : undefined,\n ...extraProps,\n onClick: realOnClick,\n },\n };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={tick} size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__success-text\">\n Success\n </VisuallyHidden>\n </>\n);\n\nexport { Success };\n", "import type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { cloneElement, isValidElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n elementType?: React.ElementType;\n /** Custom class name for setting specific CSS */\n className?: string;\n active?: boolean;\n children?: ReactNode;\n onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item = ({ ref, ...props }: ItemProps) => {\n const {\n elementType: Element = \"li\",\n active,\n onClick,\n children,\n ...otherProps\n } = props;\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu__item\",\n { \"--is-active\": active },\n otherProps.className,\n );\n\n return (\n <Element ref={ref} onClick={onClick} {...otherProps}>\n {Children.map(children, child => {\n if (isValidElement(child)) {\n const childClasses = classNames(\n (child.props as { className?: string }).className,\n classes,\n );\n return cloneElement(\n child as ReactElement,\n {\n className: childClasses,\n } as { className: string },\n );\n }\n\n return <span className={classes}>{child}</span>;\n })}\n </Element>\n );\n};\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { DropdownMenu as DropdownMenuComponent } from \"./DropdownMenu\";\nimport { Item } from \"./Item\";\n\nimport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n} from \"./DropdownMenu\";\nimport type {\n ItemProps as DropdownMenuItemProps,\n ItemRef as DropdownMenuItemRef,\n ItemElementType as DropdownMenuItemElementType,\n} from \"./Item\";\n\nexport interface DropdownMenuCompound extends React.FC<DropdownMenuProps> {\n Item: React.FC<DropdownMenuItemProps>;\n}\n\nconst DropdownMenu: DropdownMenuCompound = Object.assign(\n DropdownMenuComponent,\n {\n Item,\n },\n);\n\nexport type {\n DropdownMenuElementType,\n DropdownMenuProps,\n DropdownMenuRef,\n DropdownMenuItemProps,\n DropdownMenuItemRef,\n DropdownMenuItemElementType,\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { Children, isValidElement, cloneElement, useState } from \"react\";\nimport useDropdownMenu from \"react-accessible-dropdown-menu-hook\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nimport { Button } from \"../Button\";\nimport \"./DropdownMenu.css\";\n\nexport type DropdownMenuElementType = HTMLElement;\n\nexport interface DropdownMenuProps\n extends DOMProps, RefAttributes<DropdownMenuElementType> {\n children?: ReactNode;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n label?: string;\n trigger?: ReactElement;\n}\n\nexport type DropdownMenuRef = Ref<DropdownMenuElementType>;\n\ntype ChildClickProps = {\n onClick?: () => void;\n};\n\nconst DropdownMenu = ({ ref, ...props }: DropdownMenuProps) => {\n const {\n elementType: Element = \"nav\",\n trigger,\n label = \"Menu\",\n children,\n ...otherProps\n } = props;\n const [activeId, setActiveId] = useState<number | null>(null);\n const numberOfItems = Children.count(children);\n const {\n buttonProps,\n itemProps,\n isOpen: open,\n setIsOpen,\n } = useDropdownMenu(numberOfItems);\n\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu\",\n otherProps.className,\n );\n const triggerClasses = classNames(\"mobius\", \"mobius-dropdown-menu__trigger\");\n const listClasses = classNames(\"mobius\", \"mobius-dropdown-menu__list\", {\n \"--is-open\": open,\n });\n\n const handleChildClick = ({ onClick }: ChildClickProps, index: number) => {\n setActiveId(index);\n setIsOpen(false);\n\n if (onClick) {\n onClick();\n }\n };\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {trigger ? (\n cloneElement(trigger, {\n className: triggerClasses,\n open,\n label,\n ...buttonProps,\n } as Record<string, unknown>)\n ) : (\n <Button className={triggerClasses} {...buttonProps}>\n {label}\n </Button>\n )}\n <ul className={listClasses} role=\"menu\">\n {Children.map(children, (child, index) => {\n if (isValidElement(child)) {\n // DropdownMenu items accept onClick and active props\n return cloneElement(child, {\n onClick: () =>\n handleChildClick(child.props as Record<string, unknown>, index),\n active: index === activeId,\n ...itemProps[index],\n } as {\n onClick?: () => void;\n active?: boolean;\n [key: string]: unknown;\n });\n }\n\n return child;\n })}\n </ul>\n </Element>\n );\n};\n\nDropdownMenu.displayName = \"DropdownMenu\";\nexport { DropdownMenu };\n", "\"use client\";\n\nimport type { MouseEvent, ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Loading } from \"./Loading\";\nimport type { UseButtonProps } from \"../../hooks/useButton\";\nimport { useButton } from \"../../hooks/useButton\";\nimport { Success } from \"./Success\";\nimport \"./Button.css\";\n\nexport type ButtonElementType = HTMLButtonElement;\n\nexport type Variant = \"primary\" | \"secondary\" | \"ghost\" | \"basic\" | \"link\";\n\nexport type Size = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends UseButtonProps, DOMProps, RefAttributes<ButtonElementType> {\n /** The name of the button when submitted in a form */\n name?: string | undefined;\n /** The value of the button when submitted in a form */\n value?: string | undefined;\n /** Custom class name for setting specific CSS */\n className?: string;\n /** Shortlist of styles */\n variant?: Variant;\n size?: Size;\n /** Display loading spinner */\n isLoading?: boolean;\n /** Display success style */\n isSuccess?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n children?: ReactNode;\n}\n\nconst Button = ({ ref, ...props }: ButtonProps) => {\n const {\n children,\n elementType: Component = \"button\" as React.ElementType,\n isDisabled,\n isLoading,\n isSuccess,\n variant = \"primary\",\n size = \"md\",\n\n onPress,\n\n onClick,\n ...otherProps\n } = props;\n const { buttonProps } = useButton(props);\n\n // Reshape class name and apply to outer element\n otherProps.className = classNames(\n \"mobius\",\n \"mobius-button\",\n `--variant-${variant}`,\n `--size-${size}`,\n {\n \"--is-disabled\": isDisabled,\n \"--is-loading\": isLoading,\n \"--is-success\": isSuccess && !isLoading,\n },\n otherProps.className,\n );\n\n return (\n <Component ref={ref} {...buttonProps} {...otherProps}>\n {isLoading ? <Loading>{children}</Loading> : children}\n {isSuccess && !isLoading && <Success />}\n </Component>\n );\n};\n\nButton.displayName = \"Button\";\nexport { Button };\n", "import type { ReactNode } from \"react\";\nimport { loading } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\ntype LoadingProps = {\n children: ReactNode;\n};\n\nconst Loading = (props: LoadingProps) => {\n const { children } = props;\n\n return (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={loading} spin size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__loading-text\">\n Loading\n </VisuallyHidden>\n {children}\n </>\n );\n};\n\nexport { Loading };\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n /** The content to visually hide. */\n children?: ReactNode;\n id?: string;\n role?: AriaRole;\n\n className?: string;\n\n /**\n * The element type for the container. Defaults to 'div'\n */\n elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n const {\n className,\n children,\n elementType: Component = \"div\",\n ...otherProps\n } = props;\n\n return (\n <Component\n className={className}\n style={{\n border: 0,\n clip: \"rect(0 0 0 0)\",\n clipPath: \"inset(50%)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n width: \"1px\",\n whiteSpace: \"nowrap\",\n }}\n {...otherProps}\n >\n {children}\n </Component>\n );\n}\n", "import type { JSXElementConstructor } from \"react\";\nimport { useCallback } from \"react\";\n\nexport interface UseButtonProps {\n elementType?:\n | \"button\"\n | \"a\"\n | \"span\"\n | \"input\"\n | JSXElementConstructor<unknown>\n | undefined;\n type?: \"button\" | \"submit\" | \"reset\";\n isDisabled?: boolean;\n onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n href?: string;\n target?: string;\n rel?: string;\n role?: string;\n name?: string | undefined;\n value?: string | undefined;\n}\n\nexport function useButton({\n elementType = \"button\",\n type = \"button\",\n isDisabled = false,\n href,\n target,\n rel,\n role,\n name,\n value,\n onClick,\n onPress,\n}: UseButtonProps) {\n const realOnClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (isDisabled) {\n return;\n }\n\n onClick?.(event);\n onPress?.(event);\n },\n [isDisabled, onClick, onPress],\n );\n\n function getRole() {\n if (role) {\n return role;\n }\n\n if (elementType === \"a\") {\n return undefined;\n }\n\n return \"button\";\n }\n\n const extraProps =\n elementType === \"button\"\n ? { type }\n : {\n role: getRole(),\n };\n\n return {\n buttonProps: {\n href: elementType === \"a\" ? href : undefined,\n target: elementType === \"a\" ? target : undefined,\n rel: elementType === \"a\" ? rel : undefined,\n tabIndex: isDisabled ? -1 : 0,\n disabled: isDisabled || undefined,\n \"aria-disabled\": isDisabled || undefined,\n name:\n elementType === \"input\" || elementType === \"button\" ? name : undefined,\n value:\n elementType === \"input\" || elementType === \"button\" ? value : undefined,\n ...extraProps,\n onClick: realOnClick,\n },\n };\n}\n", "import { tick } from \"@simplybusiness/icons\";\nimport { Icon } from \"../Icon\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\n\nconst Success = () => (\n <>\n <div className=\"mobius-button__icon-wrapper\">\n <Icon icon={tick} size=\"md\" />\n </div>\n <VisuallyHidden className=\"mobius-button__success-text\">\n Success\n </VisuallyHidden>\n </>\n);\n\nexport { Success };\n", "import type { Ref, RefAttributes, ReactNode, ReactElement } from \"react\";\nimport { cloneElement, isValidElement, Children } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\n\nexport type ItemElementType = HTMLLIElement;\n\nexport interface ItemProps extends DOMProps, RefAttributes<ItemElementType> {\n elementType?: React.ElementType;\n /** Custom class name for setting specific CSS */\n className?: string;\n active?: boolean;\n children?: ReactNode;\n onClick?: () => void;\n}\n\nexport type ItemRef = Ref<ItemElementType>;\n\nconst Item = ({ ref, ...props }: ItemProps) => {\n const {\n elementType: Element = \"li\",\n active,\n onClick,\n children,\n ...otherProps\n } = props;\n const classes = classNames(\n \"mobius\",\n \"mobius-dropdown-menu__item\",\n { \"--is-active\": active },\n otherProps.className,\n );\n\n return (\n <Element ref={ref} onClick={onClick} {...otherProps}>\n {Children.map(children, child => {\n if (isValidElement(child)) {\n const childClasses = classNames(\n (child.props as { className?: string }).className,\n classes,\n );\n return cloneElement(child as ReactElement<{ className?: string }>, {\n className: childClasses,\n });\n }\n\n return <span className={classes}>{child}</span>;\n })}\n </Element>\n );\n};\n\nItem.displayName = \"DropdownMenu.Item\";\nexport { Item };\n"],
5
+ "mappings": "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",
6
6
  "names": ["DropdownMenu", "import_react", "import_dedupe", "import_dedupe", "classNames", "import_jsx_runtime", "import_jsx_runtime", "import_icons", "import_jsx_runtime", "import_jsx_runtime", "classNames", "import_jsx_runtime", "useDropdownMenu", "classNames", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "DropdownMenu"]
7
7
  }
@@ -34,11 +34,12 @@ __export(MaskedField_exports, {
34
34
  MaskedField: () => MaskedField
35
35
  });
36
36
  module.exports = __toCommonJS(MaskedField_exports);
37
- var import_react5 = require("react");
37
+ var import_react6 = require("react");
38
38
  var import_react_imask = require("react-imask");
39
39
 
40
40
  // src/components/TextField/TextField.tsx
41
41
  var import_dedupe8 = __toESM(require("classnames/dedupe"));
42
+ var import_react5 = require("react");
42
43
 
43
44
  // src/utils/spaceDelimitedList.ts
44
45
  function spaceDelimitedList(list) {
@@ -375,9 +376,10 @@ var import_dedupe7 = __toESM(require("classnames/dedupe"));
375
376
  var import_react4 = require("react");
376
377
  var adornmentWithClassName = (component, validationClasses, className) => {
377
378
  if (!component) return null;
378
- return (0, import_react4.cloneElement)(component, {
379
+ const typedComponent = component;
380
+ return (0, import_react4.cloneElement)(typedComponent, {
379
381
  className: (0, import_dedupe7.default)(
380
- component.props.className,
382
+ typedComponent.props.className,
381
383
  validationClasses,
382
384
  className
383
385
  )
@@ -387,7 +389,7 @@ var adornmentWithClassName = (component, validationClasses, className) => {
387
389
  // src/components/TextField/TextField.tsx
388
390
  var import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
389
391
  var import_jsx_runtime7 = require("react/jsx-runtime");
390
- var TextField = ({ ref, ...props }) => {
392
+ var TextFieldInner = ({ ref, ...props }) => {
391
393
  const {
392
394
  isDisabled,
393
395
  type = "text",
@@ -481,12 +483,13 @@ var TextField = ({ ref, ...props }) => {
481
483
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
482
484
  ] });
483
485
  };
486
+ var TextField = (0, import_react5.memo)(TextFieldInner);
484
487
  TextField.displayName = "TextField";
485
488
 
486
489
  // src/components/MaskedField/MaskedField.tsx
487
490
  var import_jsx_runtime8 = require("react/jsx-runtime");
488
491
  var useAcceptHandler = (onChange, useMaskedValue, name) => {
489
- return (0, import_react5.useCallback)(
492
+ return (0, import_react6.useCallback)(
490
493
  (maskedValue, maskInstance) => {
491
494
  if (!onChange) {
492
495
  return;
@@ -502,7 +505,7 @@ var useAcceptHandler = (onChange, useMaskedValue, name) => {
502
505
  );
503
506
  };
504
507
  var useCombinedRef = (imaskRef, forwardedRef) => {
505
- return (0, import_react5.useCallback)(
508
+ return (0, import_react6.useCallback)(
506
509
  (element) => {
507
510
  imaskRef.current = element;
508
511
  if (typeof forwardedRef === "function") {
@@ -515,7 +518,7 @@ var useCombinedRef = (imaskRef, forwardedRef) => {
515
518
  );
516
519
  };
517
520
  var useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
518
- return (0, import_react5.useCallback)(
521
+ return (0, import_react6.useCallback)(
519
522
  (event) => {
520
523
  if (!onBlur || !maskRef.current) {
521
524
  return;
@@ -545,7 +548,7 @@ var ControlledMaskedField = ({
545
548
  const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
546
549
  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
547
550
  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
548
- (0, import_react5.useEffect)(() => {
551
+ (0, import_react6.useEffect)(() => {
549
552
  if (!maskRef.current) {
550
553
  return;
551
554
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/MaskedField/MaskedField.tsx", "../../../../src/components/TextField/TextField.tsx", "../../../../src/utils/spaceDelimitedList.ts", "../../../../src/hooks/useLabel/useLabel.tsx", "../../../../src/hooks/useTextField/useTextField.tsx", "../../../../src/hooks/useValidationClasses/useValidationClasses.ts", "../../../../src/components/ErrorMessage/ErrorMessage.tsx", "../../../../src/components/Icon/Icon.tsx", "../../../../src/components/TextOrHTML/TextOrHTML.tsx", "../../../../src/components/Text/Text.tsx", "../../../../src/components/Label/Label.tsx", "../../../../src/components/Stack/Stack.tsx", "../../../../src/components/TextField/adornmentWithClassName.ts"],
4
- "sourcesContent": ["\"use client\";\n\nimport type { ChangeEvent, FocusEvent, Ref, RefAttributes } from \"react\";\nimport { useCallback, useEffect } from \"react\";\nimport { useIMask } from \"react-imask\";\nimport type { FactoryOpts, InputMask, InputMaskElement } from \"imask\";\nimport type { TextFieldProps } from \"../TextField\";\nimport { TextField } from \"../TextField\";\n\nexport type MaskedFieldElementType = HTMLInputElement;\n\nexport interface MaskedFieldProps\n extends\n Omit<TextFieldProps, \"type\" | \"ref\">,\n RefAttributes<MaskedFieldElementType> {\n mask: FactoryOpts;\n \"data-testid\"?: string;\n /**\n * If true, onChange and onBlur events will emit the masked (formatted) value.\n * If false (default), events will emit the unmasked (raw) value.\n *\n * @example\n * // TelephoneQuestion uses useMaskedValue={true}\n * // User types: 5551234567\n * // onChange receives: \"(555) 123-4567\" (formatted for display/storage)\n *\n * @example\n * // CurrencyQuestion uses useMaskedValue={false}\n * // User types: 1234\n * // User sees: \"1,234\" (with thousands separator)\n * // onChange receives: \"1234\" (raw number for calculations)\n */\n useMaskedValue?: boolean;\n}\n\nexport type MaskedFieldRef = Ref<MaskedFieldElementType>;\n\n/**\n * Creates an onChange handler for IMask's onAccept callback.\n *\n * IMask calls onAccept every time the user types and the mask accepts the input.\n * This handler converts IMask's callback into a standard React onChange event.\n *\n * @param onChange - The onChange handler from parent component\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion (US) - useMaskedValue=true\n * // User types: \"5551234567\"\n * // Emits: \"(555) 123-4567\" (formatted for display)\n * // Use case: Want to store/display the formatted phone number\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // User types: \"1234.56\"\n * // User sees: \"1,234.56\" (with formatting)\n * // Emits: \"1234.56\" (raw value for calculations)\n * // Use case: Need numeric value for backend/calculations\n */\nconst useAcceptHandler = (\n onChange: MaskedFieldProps[\"onChange\"],\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (maskedValue: string, maskInstance: InputMask<FactoryOpts>) => {\n // Exit early if no onChange handler provided\n if (!onChange) {\n return;\n }\n\n // IMask provides two values:\n // 1. maskedValue: The formatted value user sees (e.g., \"(555) 123-4567\")\n // 2. maskInstance.unmaskedValue: The raw value without formatting (e.g., \"5551234567\")\n const formattedValue = maskedValue;\n const rawValue = maskInstance.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create a synthetic React event that matches the standard onChange signature\n // This allows parent components to handle it like any other input change\n onChange({\n target: { name, value: valueToEmit },\n } as ChangeEvent<HTMLInputElement>);\n },\n [onChange, useMaskedValue, name],\n );\n};\n\n/**\n * Creates a ref callback that forwards the input element to both IMask and the parent component.\n *\n * React allows two ways to pass refs:\n * 1. Ref callback function: (element) => { ... }\n * 2. Ref object: { current: element }\n *\n * This hook handles both cases and also ensures IMask gets the element reference it needs.\n *\n * @param imaskRef - IMask's ref (needs the element to apply masking)\n * @param forwardedRef - Parent component's ref (could be function or object)\n *\n * @example\n * // Parent uses callback ref\n * <MaskedField ref={(el) => console.log(el)} />\n *\n * @example\n * // Parent uses useRef\n * const inputRef = useRef(null);\n * <MaskedField ref={inputRef} />\n */\nconst useCombinedRef = (\n imaskRef: React.MutableRefObject<InputMaskElement | null>,\n forwardedRef?: MaskedFieldRef,\n) => {\n return useCallback(\n (element: HTMLInputElement | null) => {\n // First, give the element to IMask so it can apply masking\n imaskRef.current = element;\n\n // Then forward the element to the parent component's ref\n // Handle both callback refs and ref objects\n\n // Case 1: Parent passed a callback ref function\n if (typeof forwardedRef === \"function\") {\n forwardedRef(element);\n }\n // Case 2: Parent passed a ref object (from useRef)\n else if (forwardedRef) {\n forwardedRef.current = element;\n }\n // Case 3: No ref was forwarded (forwardedRef is null/undefined)\n // Do nothing - this is fine\n },\n [imaskRef, forwardedRef],\n );\n};\n\n/**\n * Creates an onBlur handler that extracts the correct value from IMask.\n *\n * When the user tabs away or clicks outside the input, we need to emit\n * the current value (either formatted or raw) via the onBlur event.\n *\n * @param onBlur - The onBlur handler from parent component\n * @param maskRef - Reference to the IMask instance (provides current values)\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion - useMaskedValue=true\n * // Input displays: \"(555) 123-4567\"\n * // onBlur emits: \"(555) 123-4567\" (formatted)\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // Input displays: \"$1,234.56\"\n * // onBlur emits: \"1234.56\" (raw for validation/submission)\n */\nconst useBlurHandler = (\n onBlur: MaskedFieldProps[\"onBlur\"],\n maskRef: React.MutableRefObject<InputMask<FactoryOpts> | null>,\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (event: FocusEvent<Element>) => {\n // Exit early if no onBlur handler provided or mask isn't initialized\n if (!onBlur || !maskRef.current) {\n return;\n }\n\n // Extract current values from the IMask instance\n // maskRef.current.value: The formatted value (e.g., \"(555) 123-4567\")\n // maskRef.current.unmaskedValue: The raw value (e.g., \"5551234567\")\n const formattedValue = maskRef.current.value;\n const rawValue = maskRef.current.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create an enhanced event that preserves the original event properties\n // but overrides the target to include our extracted value\n onBlur({\n ...event,\n target: { ...event.target, name, value: valueToEmit },\n } as FocusEvent<Element>);\n },\n [onBlur, maskRef, useMaskedValue, name],\n );\n};\n\n/**\n * Controlled MaskedField - for use with value prop.\n * Syncs external value changes to IMask via useEffect.\n *\n * Use this when:\n * - The parent component manages the input state\n * - You need to programmatically update the value\n * - You need validation or transformation on every change\n */\nconst ControlledMaskedField = ({\n mask,\n useMaskedValue = false,\n value,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"defaultValue\"> & {\n value: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n // Sync external value changes to IMask\n useEffect(() => {\n if (!maskRef.current) {\n return;\n }\n\n const stringValue = value.toString();\n const currentMasked = maskRef.current.value;\n const currentUnmasked = maskRef.current.unmaskedValue;\n\n // Only update if value actually changed (prevents infinite loops)\n if (currentMasked !== stringValue && currentUnmasked !== stringValue) {\n setValue(stringValue);\n }\n }, [value, maskRef, setValue, imaskRef]);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n />\n );\n};\n\n/**\n * Uncontrolled MaskedField - for use with defaultValue prop.\n * No value synchronization needed - IMask manages the value internally.\n *\n * Use this when:\n * - You only need the final value on submit\n * - You don't need to react to intermediate changes\n * - You want simpler code without state management\n */\nconst UncontrolledMaskedField = ({\n mask,\n useMaskedValue = false,\n defaultValue,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"value\"> & {\n defaultValue?: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n defaultValue={defaultValue?.toString()}\n />\n );\n};\n\nconst MaskedField = ({ ref: forwardedRef, ...props }: MaskedFieldProps) => {\n const { value, defaultValue, ...rest } = props;\n\n // Check for \"value\" in props (not `value !== undefined`) to maintain consistent\n // controlled/uncontrolled state throughout component lifetime and prevent focus loss.\n // Example: CurrencyQuestion passes value={undefined} initially, then value={5} after typing.\n if (\"value\" in props) {\n return (\n <ControlledMaskedField\n {...rest}\n value={value ?? \"\"}\n forwardedRef={forwardedRef}\n />\n );\n } else {\n return (\n <UncontrolledMaskedField\n {...rest}\n defaultValue={defaultValue}\n forwardedRef={forwardedRef}\n />\n );\n }\n};\n\nMaskedField.displayName = \"MaskedField\";\n\nexport { MaskedField };\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport type {\n HTMLInputTypeAttribute,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n extends\n DOMProps,\n FocusEvents,\n UseTextFieldProps,\n RefAttributes<TextFieldElementType> {\n className?: string;\n errorMessage?: string;\n children?: ReactNode;\n label?: string;\n type?: Exclude<\n HTMLInputTypeAttribute,\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"file\"\n | \"image\"\n | \"month\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"submit\"\n | \"week\"\n >;\n prefixInside?: ReactElement;\n prefixOutside?: ReactElement;\n suffixInside?: ReactElement;\n suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextField = ({ ref, ...props }: TextFieldProps) => {\n const {\n isDisabled,\n type = \"text\",\n isInvalid,\n className,\n label,\n errorMessage,\n children,\n isRequired,\n prefixInside,\n prefixOutside,\n suffixInside,\n suffixOutside,\n autoComplete,\n isReadOnly,\n ...otherProps\n } = props;\n\n const resolvedAutoComplete =\n autoComplete ??\n (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n const { inputProps, labelProps, errorMessageProps } = useTextField({\n ...props,\n autoComplete: resolvedAutoComplete,\n \"aria-errormessage\": errorMessage,\n });\n\n const hidden = type === \"hidden\";\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const textfieldClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n \"--is-hidden\": hidden,\n [className || \"\"]: true,\n };\n\n const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-text-field\",\n sharedClasses,\n );\n\n const inputClasses = classNames(\n \"mobius\",\n \"mobius-text-field__input\",\n sharedClasses,\n );\n\n const inputWrapperClasses = classNames(\n \"mobius-text-field__input-wrapper\",\n sharedClasses,\n );\n\n return (\n <Stack gap=\"xs\" className={containerClasses}>\n {label && !hidden && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className=\"mobius-text-field__inner-container\">\n {adornmentWithClassName(\n prefixOutside,\n labelClasses,\n \"mobius-text-field__prefix-outside\",\n )}\n <div className={inputWrapperClasses}>\n {adornmentWithClassName(\n prefixInside,\n labelClasses,\n \"mobius-text-field__prefix-inside\",\n )}\n <input\n {...otherProps}\n {...inputProps}\n ref={ref}\n type={type}\n className={inputClasses}\n />\n {adornmentWithClassName(\n suffixInside,\n labelClasses,\n \"mobius-text-field__suffix-inside\",\n )}\n </div>\n {adornmentWithClassName(\n suffixOutside,\n labelClasses,\n \"mobius-text-field__suffix-outside\",\n )}\n </div>\n {children && (\n <div className=\"mobius-text-field__children\">{children}</div>\n )}\n\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "export function spaceDelimitedList(\n list: (string | null | undefined)[],\n): string | undefined {\n return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n id?: string | undefined;\n label?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n labelProps: {\n id?: string | undefined;\n } & LabelHTMLAttributes<HTMLLabelElement>;\n fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n id?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n \"aria-describedby\"?: string | undefined;\n \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n id: providedId,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n labelElementType = \"label\",\n}: UseLabelProps) {\n let labelProps: UseLabelReturn[\"labelProps\"] = {};\n let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n const hasWarnedAboutMissingLabels = useRef(false);\n\n const fallbackId = useId();\n const id = providedId || fallbackId;\n const labelId = useId();\n\n if (label) {\n ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n labelProps = {\n id: labelId,\n htmlFor: labelElementType === \"label\" ? id : undefined,\n };\n } else if (\n !ariaLabelledby &&\n !ariaLabel &&\n !hasWarnedAboutMissingLabels.current\n ) {\n hasWarnedAboutMissingLabels.current = true;\n console.warn(\n \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n );\n }\n\n fieldProps = {\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n };\n\n return {\n labelProps,\n fieldProps,\n };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n const {\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n inputElementType = \"input\",\n } = props;\n const { labelProps, fieldProps } = useLabel(props);\n\n const descriptionId = useId();\n const descriptionProps = { id: descriptionId };\n\n const errorMessageId = useId();\n const errorMessageProps = { id: errorMessageId };\n\n const ariaDescribedBy = spaceDelimitedList([\n props.description && descriptionId,\n props.errorMessage && errorMessageId,\n props[\"aria-describedby\"],\n ]);\n\n return {\n descriptionProps,\n errorMessageProps,\n labelProps,\n inputProps: {\n defaultValue: props.defaultValue,\n value: props.value,\n onChange: props.onChange,\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired,\n \"aria-required\": isRequired === true ? true : undefined,\n \"aria-invalid\": props.isInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": props[\"aria-errormessage\"],\n role: props.role,\n\n type: inputElementType === \"input\" ? props.type : undefined,\n pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n autoComplete: props.autoComplete,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n\n // Focus events\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n\n ...fieldProps,\n },\n };\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n const { isInvalid } = props;\n\n if (isInvalid) {\n return \"--is-invalid\";\n }\n\n if (isInvalid === false) {\n return \"--is-valid\";\n }\n\n return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text, getElementType } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.test(text);\nconst containsHTML = (text: string) =>\n /<[a-z/]/i.test(text) || /&(?:#\\d+|#x[\\da-f]+|[a-z]\\w*);/i.test(text); // tag or entity\n\nconst buildTextClasses = (\n textProps: Omit<TextProps, \"children\">,\n htmlClassName?: string,\n) => {\n const { variant, elementType, spacing, className } = textProps;\n const variantType = variant || getElementType(variant, elementType);\n return classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n htmlClassName,\n );\n};\n\nexport interface TextOrHTMLProps\n extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n /** HTML string to be rendered with dangerouslySetInnerHTML */\n text: string;\n /** Custom class name for the dangerous HTML element */\n htmlClassName?: string;\n /** HTML element type for the dangerous HTML element */\n htmlElementType?: HTMLElementType;\n /** If true, wraps the dangerous HTML element inside a Text component */\n textWrapper?: boolean;\n /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n ref,\n text,\n htmlClassName,\n htmlElementType,\n textWrapper = false,\n autoDetect = false,\n ...textProps\n}: TextOrHTMLProps) => {\n const hasBlockContent = autoDetect && containsBlockHTML(text);\n\n // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n // See: https://github.com/facebook/react/issues/31660\n const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n // Non-block text with autoDetect: render directly on a Text-equivalent element,\n // avoiding unnecessary <span> nesting inside <p>.\n if (autoDetect && !hasBlockContent) {\n const { variant, spacing, elementType, className, ...domProps } = textProps;\n const Element = getElementType(variant, elementType);\n const classes = buildTextClasses(textProps, htmlClassName);\n\n return containsHTML(text) ? (\n <Element\n ref={ref}\n {...domProps}\n className={classes}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n ) : (\n <Element ref={ref} {...domProps} className={classes}>\n {text}\n </Element>\n );\n }\n\n const DangerousComponent =\n htmlElementType ?? (hasBlockContent ? \"div\" : \"span\");\n const dangerousElement = (\n <DangerousComponent\n className={htmlClassName}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n );\n\n if (textWrapper) {\n return (\n <Text ref={ref} {...textProps}>\n {dangerousElement}\n </Text>\n );\n }\n\n return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"body\"\n | \"small\"\n | \"legal\"\n | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n /** HTML element for the text */\n elementType?: ElementType;\n /** Specify font size override */\n variant?: TextVariantType;\n /** Specify compact line height override */\n spacing?: \"loose\" | \"tight\";\n /** Custom class name for setting specific CSS */\n className?: string;\n children: ReactNode;\n style?: React.CSSProperties;\n}\n\nexport const getElementType = (\n variant: TextVariantType | undefined,\n elementType: ElementType | undefined,\n): ElementType => {\n // Explicit elementType always wins\n if (elementType) {\n return elementType;\n }\n // Infer element from variant\n if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n return variant as ElementType;\n }\n return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n // Remove non-DOM props from element\n const { variant, className, spacing, ...otherProps } = props;\n\n // If a variant is supplied, set the class name and element type\n const Element: ElementType = getElementType(variant, elementType);\n const variantType = variant || Element;\n const classes = classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n React.JSX.IntrinsicElements[\"label\"],\n \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n children?: ReactNode;\n className?: string;\n elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n otherProps.className = classes;\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {children}\n </Element>\n );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\nimport \"./Stack.css\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n children?: ReactNode;\n /** How big a gap between items */\n gap?: SpacingType;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-stack\",\n {\n [`--gap-${gap}`]: gap,\n },\n otherProps.className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n component?: ReactElement,\n validationClasses?: string,\n className?: string,\n) => {\n if (!component) return null;\n\n return cloneElement(component, {\n className: classNames(\n (component.props as { className?: string }).className,\n validationClasses,\n className,\n ),\n } as { className: string });\n};\n"],
5
- "mappings": "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",
6
- "names": ["import_react", "import_dedupe", "import_react", "import_dedupe", "classNames", "import_dedupe", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_react", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime"]
4
+ "sourcesContent": ["\"use client\";\n\nimport type { ChangeEvent, FocusEvent, Ref, RefAttributes } from \"react\";\nimport { useCallback, useEffect } from \"react\";\nimport { useIMask } from \"react-imask\";\nimport type { FactoryOpts, InputMask, InputMaskElement } from \"imask\";\nimport type { TextFieldProps } from \"../TextField\";\nimport { TextField } from \"../TextField\";\n\nexport type MaskedFieldElementType = HTMLInputElement;\n\nexport interface MaskedFieldProps\n extends\n Omit<TextFieldProps, \"type\" | \"ref\">,\n RefAttributes<MaskedFieldElementType> {\n mask: FactoryOpts;\n \"data-testid\"?: string;\n /**\n * If true, onChange and onBlur events will emit the masked (formatted) value.\n * If false (default), events will emit the unmasked (raw) value.\n *\n * @example\n * // TelephoneQuestion uses useMaskedValue={true}\n * // User types: 5551234567\n * // onChange receives: \"(555) 123-4567\" (formatted for display/storage)\n *\n * @example\n * // CurrencyQuestion uses useMaskedValue={false}\n * // User types: 1234\n * // User sees: \"1,234\" (with thousands separator)\n * // onChange receives: \"1234\" (raw number for calculations)\n */\n useMaskedValue?: boolean;\n}\n\nexport type MaskedFieldRef = Ref<MaskedFieldElementType>;\n\n/**\n * Creates an onChange handler for IMask's onAccept callback.\n *\n * IMask calls onAccept every time the user types and the mask accepts the input.\n * This handler converts IMask's callback into a standard React onChange event.\n *\n * @param onChange - The onChange handler from parent component\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion (US) - useMaskedValue=true\n * // User types: \"5551234567\"\n * // Emits: \"(555) 123-4567\" (formatted for display)\n * // Use case: Want to store/display the formatted phone number\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // User types: \"1234.56\"\n * // User sees: \"1,234.56\" (with formatting)\n * // Emits: \"1234.56\" (raw value for calculations)\n * // Use case: Need numeric value for backend/calculations\n */\nconst useAcceptHandler = (\n onChange: MaskedFieldProps[\"onChange\"],\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (maskedValue: string, maskInstance: InputMask<FactoryOpts>) => {\n // Exit early if no onChange handler provided\n if (!onChange) {\n return;\n }\n\n // IMask provides two values:\n // 1. maskedValue: The formatted value user sees (e.g., \"(555) 123-4567\")\n // 2. maskInstance.unmaskedValue: The raw value without formatting (e.g., \"5551234567\")\n const formattedValue = maskedValue;\n const rawValue = maskInstance.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create a synthetic React event that matches the standard onChange signature\n // This allows parent components to handle it like any other input change\n onChange({\n target: { name, value: valueToEmit },\n } as ChangeEvent<HTMLInputElement>);\n },\n [onChange, useMaskedValue, name],\n );\n};\n\n/**\n * Creates a ref callback that forwards the input element to both IMask and the parent component.\n *\n * React allows two ways to pass refs:\n * 1. Ref callback function: (element) => { ... }\n * 2. Ref object: { current: element }\n *\n * This hook handles both cases and also ensures IMask gets the element reference it needs.\n *\n * @param imaskRef - IMask's ref (needs the element to apply masking)\n * @param forwardedRef - Parent component's ref (could be function or object)\n *\n * @example\n * // Parent uses callback ref\n * <MaskedField ref={(el) => console.log(el)} />\n *\n * @example\n * // Parent uses useRef\n * const inputRef = useRef(null);\n * <MaskedField ref={inputRef} />\n */\nconst useCombinedRef = (\n imaskRef: React.MutableRefObject<InputMaskElement | null>,\n forwardedRef?: MaskedFieldRef,\n) => {\n return useCallback(\n (element: HTMLInputElement | null) => {\n // First, give the element to IMask so it can apply masking\n imaskRef.current = element;\n\n // Then forward the element to the parent component's ref\n // Handle both callback refs and ref objects\n\n // Case 1: Parent passed a callback ref function\n if (typeof forwardedRef === \"function\") {\n forwardedRef(element);\n }\n // Case 2: Parent passed a ref object (from useRef)\n else if (forwardedRef) {\n forwardedRef.current = element;\n }\n // Case 3: No ref was forwarded (forwardedRef is null/undefined)\n // Do nothing - this is fine\n },\n [imaskRef, forwardedRef],\n );\n};\n\n/**\n * Creates an onBlur handler that extracts the correct value from IMask.\n *\n * When the user tabs away or clicks outside the input, we need to emit\n * the current value (either formatted or raw) via the onBlur event.\n *\n * @param onBlur - The onBlur handler from parent component\n * @param maskRef - Reference to the IMask instance (provides current values)\n * @param useMaskedValue - Whether to emit the formatted value or raw value\n * @param name - The input's name attribute (for the synthetic event)\n *\n * @example\n * // TelephoneQuestion - useMaskedValue=true\n * // Input displays: \"(555) 123-4567\"\n * // onBlur emits: \"(555) 123-4567\" (formatted)\n *\n * @example\n * // CurrencyQuestion - useMaskedValue=false\n * // Input displays: \"$1,234.56\"\n * // onBlur emits: \"1234.56\" (raw for validation/submission)\n */\nconst useBlurHandler = (\n onBlur: MaskedFieldProps[\"onBlur\"],\n maskRef: React.MutableRefObject<InputMask<FactoryOpts> | null>,\n useMaskedValue: boolean,\n name?: string,\n) => {\n return useCallback(\n (event: FocusEvent<Element>) => {\n // Exit early if no onBlur handler provided or mask isn't initialized\n if (!onBlur || !maskRef.current) {\n return;\n }\n\n // Extract current values from the IMask instance\n // maskRef.current.value: The formatted value (e.g., \"(555) 123-4567\")\n // maskRef.current.unmaskedValue: The raw value (e.g., \"5551234567\")\n const formattedValue = maskRef.current.value;\n const rawValue = maskRef.current.unmaskedValue;\n\n // Choose which value to emit based on useMaskedValue prop\n const valueToEmit = useMaskedValue ? formattedValue : rawValue;\n\n // Create an enhanced event that preserves the original event properties\n // but overrides the target to include our extracted value\n onBlur({\n ...event,\n target: { ...event.target, name, value: valueToEmit },\n } as FocusEvent<Element>);\n },\n [onBlur, maskRef, useMaskedValue, name],\n );\n};\n\n/**\n * Controlled MaskedField - for use with value prop.\n * Syncs external value changes to IMask via useEffect.\n *\n * Use this when:\n * - The parent component manages the input state\n * - You need to programmatically update the value\n * - You need validation or transformation on every change\n */\nconst ControlledMaskedField = ({\n mask,\n useMaskedValue = false,\n value,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"defaultValue\"> & {\n value: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef, setValue } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n // Sync external value changes to IMask\n useEffect(() => {\n if (!maskRef.current) {\n return;\n }\n\n const stringValue = value.toString();\n const currentMasked = maskRef.current.value;\n const currentUnmasked = maskRef.current.unmaskedValue;\n\n // Only update if value actually changed (prevents infinite loops)\n if (currentMasked !== stringValue && currentUnmasked !== stringValue) {\n setValue(stringValue);\n }\n }, [value, maskRef, setValue, imaskRef]);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n />\n );\n};\n\n/**\n * Uncontrolled MaskedField - for use with defaultValue prop.\n * No value synchronization needed - IMask manages the value internally.\n *\n * Use this when:\n * - You only need the final value on submit\n * - You don't need to react to intermediate changes\n * - You want simpler code without state management\n */\nconst UncontrolledMaskedField = ({\n mask,\n useMaskedValue = false,\n defaultValue,\n onChange,\n onBlur,\n name,\n forwardedRef,\n ...textFieldProps\n}: Omit<MaskedFieldProps, \"value\"> & {\n defaultValue?: string | number;\n forwardedRef?: MaskedFieldRef;\n}) => {\n const onAccept = useAcceptHandler(onChange, useMaskedValue, name);\n const { ref: imaskRef, maskRef } = useIMask(mask, { onAccept });\n\n const combinedRef = useCombinedRef(imaskRef, forwardedRef);\n const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);\n\n return (\n <TextField\n {...textFieldProps}\n ref={combinedRef}\n name={name}\n onBlur={handleBlur}\n defaultValue={defaultValue?.toString()}\n />\n );\n};\n\nconst MaskedField = ({ ref: forwardedRef, ...props }: MaskedFieldProps) => {\n const { value, defaultValue, ...rest } = props;\n\n // Check for \"value\" in props (not `value !== undefined`) to maintain consistent\n // controlled/uncontrolled state throughout component lifetime and prevent focus loss.\n // Example: CurrencyQuestion passes value={undefined} initially, then value={5} after typing.\n if (\"value\" in props) {\n return (\n <ControlledMaskedField\n {...rest}\n value={value ?? \"\"}\n forwardedRef={forwardedRef}\n />\n );\n } else {\n return (\n <UncontrolledMaskedField\n {...rest}\n defaultValue={defaultValue}\n forwardedRef={forwardedRef}\n />\n );\n }\n};\n\nMaskedField.displayName = \"MaskedField\";\n\nexport { MaskedField };\n", "\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { memo } from \"react\";\nimport type {\n HTMLInputTypeAttribute,\n ReactElement,\n ReactNode,\n Ref,\n RefAttributes,\n} from \"react\";\nimport type { UseTextFieldProps } from \"../../hooks\";\nimport { useTextField, useValidationClasses } from \"../../hooks\";\nimport type { DOMProps, FocusEvents } from \"../../types\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\nimport { Stack } from \"../Stack\";\nimport { adornmentWithClassName } from \"./adornmentWithClassName\";\nimport \"./TextField.css\";\n\nexport type TextFieldElementType = HTMLInputElement;\nexport interface TextFieldProps\n extends\n DOMProps,\n FocusEvents,\n UseTextFieldProps,\n RefAttributes<TextFieldElementType> {\n className?: string;\n errorMessage?: string;\n children?: ReactNode;\n label?: string;\n type?: Exclude<\n HTMLInputTypeAttribute,\n | \"button\"\n | \"checkbox\"\n | \"color\"\n | \"date\"\n | \"datetime-local\"\n | \"file\"\n | \"image\"\n | \"month\"\n | \"radio\"\n | \"range\"\n | \"reset\"\n | \"submit\"\n | \"week\"\n >;\n prefixInside?: ReactElement;\n prefixOutside?: ReactElement;\n suffixInside?: ReactElement;\n suffixOutside?: ReactElement;\n}\n\nexport type TextFieldRef = Ref<TextFieldElementType>;\n\nconst TextFieldInner = ({ ref, ...props }: TextFieldProps) => {\n const {\n isDisabled,\n type = \"text\",\n isInvalid,\n className,\n label,\n errorMessage,\n children,\n isRequired,\n prefixInside,\n prefixOutside,\n suffixInside,\n suffixOutside,\n autoComplete,\n isReadOnly,\n ...otherProps\n } = props;\n\n const resolvedAutoComplete =\n autoComplete ??\n (type === \"email\" ? \"email\" : type === \"tel\" ? \"tel\" : undefined);\n\n const { inputProps, labelProps, errorMessageProps } = useTextField({\n ...props,\n autoComplete: resolvedAutoComplete,\n \"aria-errormessage\": errorMessage,\n });\n\n const hidden = type === \"hidden\";\n\n const validationClasses = useValidationClasses({ isInvalid });\n\n const textfieldClasses = {\n \"--is-disabled\": isDisabled,\n \"--is-required\": typeof isRequired === \"boolean\" && isRequired,\n \"--is-optional\": typeof isRequired === \"boolean\" && !isRequired,\n \"--is-hidden\": hidden,\n [className || \"\"]: true,\n };\n\n const sharedClasses = classNames(validationClasses, textfieldClasses);\n\n const labelClasses = classNames(\n {\n \"--is-disabled\": isDisabled,\n },\n validationClasses,\n );\n\n const containerClasses = classNames(\n \"mobius\",\n \"mobius-text-field\",\n sharedClasses,\n );\n\n const inputClasses = classNames(\n \"mobius\",\n \"mobius-text-field__input\",\n sharedClasses,\n );\n\n const inputWrapperClasses = classNames(\n \"mobius-text-field__input-wrapper\",\n sharedClasses,\n );\n\n return (\n <Stack gap=\"xs\" className={containerClasses}>\n {label && !hidden && (\n <Label {...labelProps} className={labelClasses}>\n {label}\n </Label>\n )}\n <div className=\"mobius-text-field__inner-container\">\n {adornmentWithClassName(\n prefixOutside,\n labelClasses,\n \"mobius-text-field__prefix-outside\",\n )}\n <div className={inputWrapperClasses}>\n {adornmentWithClassName(\n prefixInside,\n labelClasses,\n \"mobius-text-field__prefix-inside\",\n )}\n <input\n {...otherProps}\n {...inputProps}\n ref={ref}\n type={type}\n className={inputClasses}\n />\n {adornmentWithClassName(\n suffixInside,\n labelClasses,\n \"mobius-text-field__suffix-inside\",\n )}\n </div>\n {adornmentWithClassName(\n suffixOutside,\n labelClasses,\n \"mobius-text-field__suffix-outside\",\n )}\n </div>\n {children && (\n <div className=\"mobius-text-field__children\">{children}</div>\n )}\n\n <ErrorMessage {...errorMessageProps} errorMessage={errorMessage} />\n </Stack>\n );\n};\n\nconst TextField = memo(TextFieldInner);\nTextField.displayName = \"TextField\";\nexport { TextField };\n", "export function spaceDelimitedList(\n list: (string | null | undefined)[],\n): string | undefined {\n return list.filter(Boolean).join(\" \") || undefined;\n}\n", "import type { LabelHTMLAttributes } from \"react\";\nimport { useId, useRef } from \"react\";\n\nexport type UseLabelProps = {\n id?: string | undefined;\n label?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n labelElementType?: \"label\" | \"span\" | undefined;\n};\n\nexport type UseLabelReturn = {\n labelProps: {\n id?: string | undefined;\n } & LabelHTMLAttributes<HTMLLabelElement>;\n fieldProps: LabellingProps;\n};\n\nexport type LabellingProps = {\n id?: string | undefined;\n \"aria-label\"?: string | undefined;\n \"aria-labelledby\"?: string | undefined;\n \"aria-describedby\"?: string | undefined;\n \"aria-details\"?: string | undefined;\n};\n\nexport function useLabel({\n id: providedId,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n labelElementType = \"label\",\n}: UseLabelProps) {\n let labelProps: UseLabelReturn[\"labelProps\"] = {};\n let fieldProps: UseLabelReturn[\"fieldProps\"] = {};\n\n const hasWarnedAboutMissingLabels = useRef(false);\n\n const fallbackId = useId();\n const id = providedId || fallbackId;\n const labelId = useId();\n\n if (label) {\n ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;\n labelProps = {\n id: labelId,\n htmlFor: labelElementType === \"label\" ? id : undefined,\n };\n } else if (\n !ariaLabelledby &&\n !ariaLabel &&\n !hasWarnedAboutMissingLabels.current\n ) {\n hasWarnedAboutMissingLabels.current = true;\n console.warn(\n \"If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility\",\n );\n }\n\n fieldProps = {\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n };\n\n return {\n labelProps,\n fieldProps,\n };\n}\n", "import { useId } from \"react\";\nimport { spaceDelimitedList } from \"../../utils/spaceDelimitedList\";\nimport { useLabel } from \"../useLabel/useLabel\";\nimport type { UseTextFieldProps, UseTextFieldReturn } from \"./types\";\n\nexport function useTextField(props: UseTextFieldProps): UseTextFieldReturn {\n const {\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n inputElementType = \"input\",\n } = props;\n const { labelProps, fieldProps } = useLabel(props);\n\n const descriptionId = useId();\n const descriptionProps = { id: descriptionId };\n\n const errorMessageId = useId();\n const errorMessageProps = { id: errorMessageId };\n\n const ariaDescribedBy = spaceDelimitedList([\n props.description && descriptionId,\n props.errorMessage && errorMessageId,\n props[\"aria-describedby\"],\n ]);\n\n return {\n descriptionProps,\n errorMessageProps,\n labelProps,\n inputProps: {\n defaultValue: props.defaultValue,\n value: props.value,\n onChange: props.onChange,\n disabled: isDisabled,\n readOnly: isReadOnly,\n required: isRequired,\n \"aria-required\": isRequired === true ? true : undefined,\n \"aria-invalid\": props.isInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-errormessage\": props[\"aria-errormessage\"],\n role: props.role,\n\n type: inputElementType === \"input\" ? props.type : undefined,\n pattern: inputElementType === \"input\" ? props.pattern : undefined,\n\n autoComplete: props.autoComplete,\n maxLength: props.maxLength,\n minLength: props.minLength,\n name: props.name,\n placeholder: props.placeholder,\n inputMode: props.inputMode,\n\n // Clipboard events\n onCopy: props.onCopy,\n onCut: props.onCut,\n onPaste: props.onPaste,\n\n // Composition events\n onCompositionEnd: props.onCompositionEnd,\n onCompositionStart: props.onCompositionStart,\n onCompositionUpdate: props.onCompositionUpdate,\n\n // Selection events\n onSelect: props.onSelect,\n\n // Input events\n onBeforeInput: props.onBeforeInput,\n onInput: props.onInput,\n\n // Focus events\n onFocus: props.onFocus,\n onBlur: props.onBlur,\n\n ...fieldProps,\n },\n };\n}\n", "import type { Validation } from \"../../types\";\n\nexport type GetValidationClassesProps = Pick<Validation, \"isInvalid\">;\n\nexport const useValidationClasses = (props: GetValidationClassesProps) => {\n const { isInvalid } = props;\n\n if (isInvalid) {\n return \"--is-invalid\";\n }\n\n if (isInvalid === false) {\n return \"--is-valid\";\n }\n\n return \"\";\n};\n", "import { error } from \"@simplybusiness/icons\";\nimport classNames from \"classnames/dedupe\";\nimport { Icon } from \"../Icon\";\nimport { TextOrHTML } from \"../TextOrHTML\";\nimport \"./ErrorMessage.css\";\n\nexport interface ErrorMessageProps {\n errorMessage?: string;\n id?: string;\n className?: string;\n}\n\nexport const ErrorMessage = ({\n id,\n errorMessage,\n className,\n}: ErrorMessageProps) => {\n const classes = classNames(\"mobius\", \"mobius-error-message\", className);\n\n if (!errorMessage) return null;\n\n return (\n <div id={id} className={classes} data-testid=\"ErrorMessage\" role=\"alert\">\n <Icon\n icon={error}\n className=\"mobius-error-message__icon\"\n aria-hidden=\"true\"\n />\n <TextOrHTML\n elementType=\"span\"\n className=\"mobius-error-message__text\"\n text={errorMessage}\n />\n </div>\n );\n};\n\nErrorMessage.displayName = \"ErrorMessage\";\n", "import classNames from \"classnames/dedupe\";\nimport type { IconProps } from \"./types\";\nimport \"./Icon.css\";\n\nconst ICON_PREFIX = \"mobius-icon\";\n\nconst capitaliseFirstLetter = (str: string) =>\n str.charAt(0).toUpperCase() + str.slice(1);\n\nexport function Icon({\n ref,\n icon,\n className,\n size = \"xs\",\n color,\n fixedWidth,\n spin,\n spinReverse,\n title,\n ...otherProps\n}: IconProps) {\n if (!icon) {\n throw new Error(\"Must specify icon object\");\n }\n\n const classes = classNames(\n \"mobius\",\n \"mobius-icon\",\n `svg-inline--${ICON_PREFIX}`,\n `--size-${size}`,\n className,\n {\n [`${ICON_PREFIX}-fw`]: fixedWidth,\n [`${ICON_PREFIX}-spin`]: spin || spinReverse,\n [`${ICON_PREFIX}-spin-reverse`]: spinReverse,\n },\n );\n\n const { iconName, width, height, svgPathData } = icon;\n const formattedIconName = iconName.split(\"-\").join(\" \");\n\n const defaultTitle = `${capitaliseFirstLetter(formattedIconName)} icon`;\n const titleText = title || defaultTitle;\n\n return (\n <svg\n ref={ref}\n focusable=\"false\"\n data-icon={iconName}\n className={classes}\n role=\"img\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={`0 0 ${width} ${height}`}\n style={{ color }}\n {...otherProps}\n >\n <title>{titleText}</title>\n <path fill=\"currentColor\" d={svgPathData} />\n </svg>\n );\n}\n", "import classNames from \"classnames/dedupe\";\nimport type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text, getElementType } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\n// Block-level tags that cannot be nested inside <p>.\nconst BLOCK_TAG =\n /<(div|p|ul|ol|li|h[1-6]|table|tr|td|th|blockquote|pre|hr|dl|dt|dd)[\\s>/]/i;\nconst containsBlockHTML = (text: string) => BLOCK_TAG.test(text);\nconst containsHTML = (text: string) =>\n /<[a-z/]/i.test(text) || /&(?:#\\d+|#x[\\da-f]+|[a-z]\\w*);/i.test(text); // tag or entity\n\nconst buildTextClasses = (\n textProps: Omit<TextProps, \"children\">,\n htmlClassName?: string,\n) => {\n const { variant, elementType, spacing, className } = textProps;\n const variantType = variant || getElementType(variant, elementType);\n return classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n htmlClassName,\n );\n};\n\nexport interface TextOrHTMLProps\n extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n /** HTML string to be rendered with dangerouslySetInnerHTML */\n text: string;\n /** Custom class name for the dangerous HTML element */\n htmlClassName?: string;\n /** HTML element type for the dangerous HTML element */\n htmlElementType?: HTMLElementType;\n /** If true, wraps the dangerous HTML element inside a Text component */\n textWrapper?: boolean;\n /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n ref,\n text,\n htmlClassName,\n htmlElementType,\n textWrapper = false,\n autoDetect = false,\n ...textProps\n}: TextOrHTMLProps) => {\n const hasBlockContent = autoDetect && containsBlockHTML(text);\n\n // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n // See: https://github.com/facebook/react/issues/31660\n const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n // Non-block text with autoDetect: render directly on a Text-equivalent element,\n // avoiding unnecessary <span> nesting inside <p>.\n if (autoDetect && !hasBlockContent) {\n const { variant, spacing, elementType, className, ...domProps } = textProps;\n const Element = getElementType(variant, elementType);\n const classes = buildTextClasses(textProps, htmlClassName);\n\n return containsHTML(text) ? (\n <Element\n ref={ref}\n {...domProps}\n className={classes}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n ) : (\n <Element ref={ref} {...domProps} className={classes}>\n {text}\n </Element>\n );\n }\n\n const DangerousComponent =\n htmlElementType ?? (hasBlockContent ? \"div\" : \"span\");\n const dangerousElement = (\n <DangerousComponent\n className={htmlClassName}\n dangerouslySetInnerHTML={dangerousHTML}\n />\n );\n\n if (textWrapper) {\n return (\n <Text ref={ref} {...textProps}>\n {dangerousElement}\n </Text>\n );\n }\n\n return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n", "import type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Text.css\";\n\nexport type TextElementType = HTMLHeadingElement | HTMLParagraphElement;\nexport type TextVariantType =\n | \"h1\"\n | \"h2\"\n | \"h3\"\n | \"h4\"\n | \"body\"\n | \"small\"\n | \"legal\"\n | \"title\";\nexport type ElementType = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"p\" | \"span\";\nexport interface TextProps extends DOMProps, RefAttributes<TextElementType> {\n /** HTML element for the text */\n elementType?: ElementType;\n /** Specify font size override */\n variant?: TextVariantType;\n /** Specify compact line height override */\n spacing?: \"loose\" | \"tight\";\n /** Custom class name for setting specific CSS */\n className?: string;\n children: ReactNode;\n style?: React.CSSProperties;\n}\n\nexport const getElementType = (\n variant: TextVariantType | undefined,\n elementType: ElementType | undefined,\n): ElementType => {\n // Explicit elementType always wins\n if (elementType) {\n return elementType;\n }\n // Infer element from variant\n if (variant && [\"h1\", \"h2\", \"h3\", \"h4\"].includes(variant)) {\n return variant as ElementType;\n }\n return \"p\";\n};\n\nconst Text = ({ ref, elementType, ...props }: TextProps) => {\n // Remove non-DOM props from element\n const { variant, className, spacing, ...otherProps } = props;\n\n // If a variant is supplied, set the class name and element type\n const Element: ElementType = getElementType(variant, elementType);\n const variantType = variant || Element;\n const classes = classNames(\n \"mobius\",\n \"mobius-text\",\n { [`--is-${variantType}`]: variantType },\n { [`--has-line-height-${spacing}`]: spacing },\n className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nText.displayName = \"Text\";\nexport { Text };\n", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n React.JSX.IntrinsicElements[\"label\"],\n \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n children?: ReactNode;\n className?: string;\n elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n otherProps.className = classes;\n\n return (\n <Element ref={ref} {...otherProps} className={classes}>\n {children}\n </Element>\n );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { Ref, RefAttributes, ReactNode } from \"react\";\nimport type React from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport type { SpacingType } from \"../../types\";\nimport \"./Stack.css\";\n\nexport type StackElementType = HTMLDivElement;\n\nexport interface StackProps extends DOMProps, RefAttributes<StackElementType> {\n children?: ReactNode;\n /** How big a gap between items */\n gap?: SpacingType;\n /** Custom class name for setting specific CSS */\n className?: string;\n elementType?: React.ElementType;\n}\n\nexport type StackRef = Ref<StackElementType>;\n\nexport const Stack = ({ ref, ...props }: StackProps) => {\n const { elementType: Element = \"div\", gap, ...otherProps } = props;\n\n const classes = classNames(\n \"mobius\",\n \"mobius-stack\",\n {\n [`--gap-${gap}`]: gap,\n },\n otherProps.className,\n );\n\n return <Element ref={ref} {...otherProps} className={classes} />;\n};\n\nStack.displayName = \"Stack\";\n", "import classNames from \"classnames/dedupe\";\nimport type { ReactElement } from \"react\";\nimport { cloneElement } from \"react\";\n\nexport const adornmentWithClassName = (\n component?: ReactElement,\n validationClasses?: string,\n className?: string,\n) => {\n if (!component) return null;\n\n const typedComponent = component as ReactElement<{ className?: string }>;\n return cloneElement(typedComponent, {\n className: classNames(\n typedComponent.props.className,\n validationClasses,\n className,\n ),\n });\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAAA,gBAAuC;AACvC,yBAAyB;;;ACFzB,IAAAC,iBAAuB;AACvB,IAAAC,gBAAqB;;;ACHd,SAAS,mBACd,MACoB;AACpB,SAAO,KAAK,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAC3C;;;ACHA,mBAA8B;AAyBvB,SAAS,SAAS;AAAA,EACvB,IAAI;AAAA,EACJ;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,mBAAmB;AACrB,GAAkB;AAChB,MAAI,aAA2C,CAAC;AAChD,MAAI,aAA2C,CAAC;AAEhD,QAAM,kCAA8B,qBAAO,KAAK;AAEhD,QAAM,iBAAa,oBAAM;AACzB,QAAM,KAAK,cAAc;AACzB,QAAM,cAAU,oBAAM;AAEtB,MAAI,OAAO;AACT,qBAAiB,iBAAiB,GAAG,OAAO,IAAI,cAAc,KAAK;AACnE,iBAAa;AAAA,MACX,IAAI;AAAA,MACJ,SAAS,qBAAqB,UAAU,KAAK;AAAA,IAC/C;AAAA,EACF,WACE,CAAC,kBACD,CAAC,aACD,CAAC,4BAA4B,SAC7B;AACA,gCAA4B,UAAU;AACtC,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,eAAa;AAAA,IACX;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;ACrEA,IAAAC,gBAAsB;AAKf,SAAS,aAAa,OAA8C;AACzE,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,aAAa;AAAA,IACb,mBAAmB;AAAA,EACrB,IAAI;AACJ,QAAM,EAAE,YAAY,WAAW,IAAI,SAAS,KAAK;AAEjD,QAAM,oBAAgB,qBAAM;AAC5B,QAAM,mBAAmB,EAAE,IAAI,cAAc;AAE7C,QAAM,qBAAiB,qBAAM;AAC7B,QAAM,oBAAoB,EAAE,IAAI,eAAe;AAE/C,QAAM,kBAAkB,mBAAmB;AAAA,IACzC,MAAM,eAAe;AAAA,IACrB,MAAM,gBAAgB;AAAA,IACtB,MAAM,kBAAkB;AAAA,EAC1B,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,iBAAiB,eAAe,OAAO,OAAO;AAAA,MAC9C,gBAAgB,MAAM;AAAA,MACtB,oBAAoB;AAAA,MACpB,qBAAqB,MAAM,mBAAmB;AAAA,MAC9C,MAAM,MAAM;AAAA,MAEZ,MAAM,qBAAqB,UAAU,MAAM,OAAO;AAAA,MAClD,SAAS,qBAAqB,UAAU,MAAM,UAAU;AAAA,MAExD,cAAc,MAAM;AAAA,MACpB,WAAW,MAAM;AAAA,MACjB,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,aAAa,MAAM;AAAA,MACnB,WAAW,MAAM;AAAA;AAAA,MAGjB,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA;AAAA,MAGf,kBAAkB,MAAM;AAAA,MACxB,oBAAoB,MAAM;AAAA,MAC1B,qBAAqB,MAAM;AAAA;AAAA,MAG3B,UAAU,MAAM;AAAA;AAAA,MAGhB,eAAe,MAAM;AAAA,MACrB,SAAS,MAAM;AAAA;AAAA,MAGf,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,MAEd,GAAG;AAAA,IACL;AAAA,EACF;AACF;;;ACzEO,IAAM,uBAAuB,CAAC,UAAqC;AACxE,QAAM,EAAE,UAAU,IAAI;AAEtB,MAAI,WAAW;AACb,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;;;AChBA,mBAAsB;AACtB,IAAAC,iBAAuB;;;ACDvB,oBAAuB;AAEvB,kBAAO;AA2CH;AAzCJ,IAAM,cAAc;AAEpB,IAAM,wBAAwB,CAAC,QAC7B,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAEpC,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,0BAA0B;AAAA,EAC5C;AAEA,QAAM,cAAU,cAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,eAAe,WAAW;AAAA,IAC1B,UAAU,IAAI;AAAA,IACd;AAAA,IACA;AAAA,MACE,CAAC,GAAG,WAAW,KAAK,GAAG;AAAA,MACvB,CAAC,GAAG,WAAW,OAAO,GAAG,QAAQ;AAAA,MACjC,CAAC,GAAG,WAAW,eAAe,GAAG;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,OAAO,QAAQ,YAAY,IAAI;AACjD,QAAM,oBAAoB,SAAS,MAAM,GAAG,EAAE,KAAK,GAAG;AAEtD,QAAM,eAAe,GAAG,sBAAsB,iBAAiB,CAAC;AAChE,QAAM,YAAY,SAAS;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW;AAAA,MACX,MAAK;AAAA,MACL,OAAM;AAAA,MACN,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,MAAM;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,oDAAC,WAAO,qBAAU;AAAA,QAClB,4CAAC,UAAK,MAAK,gBAAe,GAAG,aAAa;AAAA;AAAA;AAAA,EAC5C;AAEJ;;;AC5DA,IAAAC,iBAAuB;AAEvB,IAAAC,gBAAwB;;;ACDxB,IAAAC,iBAAuB;AAEvB,kBAAO;AAwDE,IAAAC,sBAAA;AA9BF,IAAM,iBAAiB,CAC5B,SACA,gBACgB;AAEhB,MAAI,aAAa;AACf,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,CAAC,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,OAAO,GAAG;AACzD,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,IAAM,OAAO,CAAC,EAAE,KAAK,aAAa,GAAG,MAAM,MAAiB;AAE1D,QAAM,EAAE,SAAS,WAAW,SAAS,GAAG,WAAW,IAAI;AAGvD,QAAM,UAAuB,eAAe,SAAS,WAAW;AAChE,QAAM,cAAc,WAAW;AAC/B,QAAM,cAAU,eAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,KAAK,cAAc;;;ADMb,IAAAC,sBAAA;AA3DN,IAAM,YACJ;AACF,IAAM,oBAAoB,CAAC,SAAiB,UAAU,KAAK,IAAI;AAC/D,IAAM,eAAe,CAAC,SACpB,WAAW,KAAK,IAAI,KAAK,kCAAkC,KAAK,IAAI;AAEtE,IAAM,mBAAmB,CACvB,WACA,kBACG;AACH,QAAM,EAAE,SAAS,aAAa,SAAS,UAAU,IAAI;AACrD,QAAM,cAAc,WAAW,eAAe,SAAS,WAAW;AAClE,aAAO,eAAAC;AAAA,IACL;AAAA,IACA;AAAA,IACA,EAAE,CAAC,QAAQ,WAAW,EAAE,GAAG,YAAY;AAAA,IACvC,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,QAAQ;AAAA,IAC5C;AAAA,IACA;AAAA,EACF;AACF;AAgBA,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,QAAM,kBAAkB,cAAc,kBAAkB,IAAI;AAI5D,QAAM,oBAAgB,uBAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAI9D,MAAI,cAAc,CAAC,iBAAiB;AAClC,UAAM,EAAE,SAAS,SAAS,aAAa,WAAW,GAAG,SAAS,IAAI;AAClE,UAAM,UAAU,eAAe,SAAS,WAAW;AACnD,UAAM,UAAU,iBAAiB,WAAW,aAAa;AAEzD,WAAO,aAAa,IAAI,IACtB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,yBAAyB;AAAA;AAAA,IAC3B,IAEA,6CAAC,WAAQ,KAAW,GAAG,UAAU,WAAW,SACzC,gBACH;AAAA,EAEJ;AAEA,QAAM,qBACJ,oBAAoB,kBAAkB,QAAQ;AAChD,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,6CAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;;;AFjGzB,0BAAO;AAkBH,IAAAC,sBAAA;AAVG,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACvB,QAAM,cAAU,eAAAC,SAAW,UAAU,wBAAwB,SAAS;AAEtE,MAAI,CAAC,aAAc,QAAO;AAE1B,SACE,8CAAC,SAAI,IAAQ,WAAW,SAAS,eAAY,gBAAe,MAAK,SAC/D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,QACV,eAAY;AAAA;AAAA,IACd;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,WAAU;AAAA,QACV,MAAM;AAAA;AAAA,IACR;AAAA,KACF;AAEJ;AAEA,aAAa,cAAc;;;AInC3B,IAAAC,iBAAuB;AAEvB,mBAAO;AAsBH,IAAAC,sBAAA;AAPJ,IAAM,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,MAAkB;AAC/C,QAAM,EAAE,aAAa,UAAU,SAAS,UAAU,GAAG,WAAW,IAAI;AAEpE,QAAM,cAAU,eAAAC,SAAW,UAAU,gBAAgB,MAAM,SAAS;AACpE,aAAW,YAAY;AAEvB,SACE,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAC3C,UACH;AAEJ;AAEA,MAAM,cAAc;;;AC9BpB,IAAAC,iBAAuB;AAGvB,mBAAO;AA2BE,IAAAC,sBAAA;AAZF,IAAM,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,MAAkB;AACtD,QAAM,EAAE,aAAa,UAAU,OAAO,KAAK,GAAG,WAAW,IAAI;AAE7D,QAAM,cAAU,eAAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,MACE,CAAC,SAAS,GAAG,EAAE,GAAG;AAAA,IACpB;AAAA,IACA,WAAW;AAAA,EACb;AAEA,SAAO,6CAAC,WAAQ,KAAW,GAAG,YAAY,WAAW,SAAS;AAChE;AAEA,MAAM,cAAc;;;ACnCpB,IAAAC,iBAAuB;AAEvB,IAAAC,gBAA6B;AAEtB,IAAM,yBAAyB,CACpC,WACA,mBACA,cACG;AACH,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,iBAAiB;AACvB,aAAO,4BAAa,gBAAgB;AAAA,IAClC,eAAW,eAAAC;AAAA,MACT,eAAe,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AACH;;;AXDA,uBAAO;AA2GC,IAAAC,sBAAA;AAtER,IAAM,iBAAiB,CAAC,EAAE,KAAK,GAAG,MAAM,MAAsB;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,uBACJ,iBACC,SAAS,UAAU,UAAU,SAAS,QAAQ,QAAQ;AAEzD,QAAM,EAAE,YAAY,YAAY,kBAAkB,IAAI,aAAa;AAAA,IACjE,GAAG;AAAA,IACH,cAAc;AAAA,IACd,qBAAqB;AAAA,EACvB,CAAC;AAED,QAAM,SAAS,SAAS;AAExB,QAAM,oBAAoB,qBAAqB,EAAE,UAAU,CAAC;AAE5D,QAAM,mBAAmB;AAAA,IACvB,iBAAiB;AAAA,IACjB,iBAAiB,OAAO,eAAe,aAAa;AAAA,IACpD,iBAAiB,OAAO,eAAe,aAAa,CAAC;AAAA,IACrD,eAAe;AAAA,IACf,CAAC,aAAa,EAAE,GAAG;AAAA,EACrB;AAEA,QAAM,oBAAgB,eAAAC,SAAW,mBAAmB,gBAAgB;AAEpE,QAAM,mBAAe,eAAAA;AAAA,IACnB;AAAA,MACE,iBAAiB;AAAA,IACnB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,uBAAmB,eAAAA;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAe,eAAAA;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,0BAAsB,eAAAA;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AAEA,SACE,8CAAC,SAAM,KAAI,MAAK,WAAW,kBACxB;AAAA,aAAS,CAAC,UACT,6CAAC,SAAO,GAAG,YAAY,WAAW,cAC/B,iBACH;AAAA,IAEF,8CAAC,SAAI,WAAU,sCACZ;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,8CAAC,SAAI,WAAW,qBACb;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,WAAW;AAAA;AAAA,QACb;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,SACF;AAAA,MACC;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACF;AAAA,IACC,YACC,6CAAC,SAAI,WAAU,+BAA+B,UAAS;AAAA,IAGzD,6CAAC,gBAAc,GAAG,mBAAmB,cAA4B;AAAA,KACnE;AAEJ;AAEA,IAAM,gBAAY,oBAAK,cAAc;AACrC,UAAU,cAAc;;;ADoEpB,IAAAC,sBAAA;AAlLJ,IAAM,mBAAmB,CACvB,UACA,gBACA,SACG;AACH,aAAO;AAAA,IACL,CAAC,aAAqB,iBAAyC;AAE7D,UAAI,CAAC,UAAU;AACb;AAAA,MACF;AAKA,YAAM,iBAAiB;AACvB,YAAM,WAAW,aAAa;AAG9B,YAAM,cAAc,iBAAiB,iBAAiB;AAItD,eAAS;AAAA,QACP,QAAQ,EAAE,MAAM,OAAO,YAAY;AAAA,MACrC,CAAkC;AAAA,IACpC;AAAA,IACA,CAAC,UAAU,gBAAgB,IAAI;AAAA,EACjC;AACF;AAuBA,IAAM,iBAAiB,CACrB,UACA,iBACG;AACH,aAAO;AAAA,IACL,CAAC,YAAqC;AAEpC,eAAS,UAAU;AAMnB,UAAI,OAAO,iBAAiB,YAAY;AACtC,qBAAa,OAAO;AAAA,MACtB,WAES,cAAc;AACrB,qBAAa,UAAU;AAAA,MACzB;AAAA,IAGF;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AACF;AAuBA,IAAM,iBAAiB,CACrB,QACA,SACA,gBACA,SACG;AACH,aAAO;AAAA,IACL,CAAC,UAA+B;AAE9B,UAAI,CAAC,UAAU,CAAC,QAAQ,SAAS;AAC/B;AAAA,MACF;AAKA,YAAM,iBAAiB,QAAQ,QAAQ;AACvC,YAAM,WAAW,QAAQ,QAAQ;AAGjC,YAAM,cAAc,iBAAiB,iBAAiB;AAItD,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ,EAAE,GAAG,MAAM,QAAQ,MAAM,OAAO,YAAY;AAAA,MACtD,CAAwB;AAAA,IAC1B;AAAA,IACA,CAAC,QAAQ,SAAS,gBAAgB,IAAI;AAAA,EACxC;AACF;AAWA,IAAM,wBAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGM;AACJ,QAAM,WAAW,iBAAiB,UAAU,gBAAgB,IAAI;AAChE,QAAM,EAAE,KAAK,UAAU,SAAS,SAAS,QAAI,6BAAS,MAAM,EAAE,SAAS,CAAC;AAExE,QAAM,cAAc,eAAe,UAAU,YAAY;AACzD,QAAM,aAAa,eAAe,QAAQ,SAAS,gBAAgB,IAAI;AAGvE,+BAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS;AACpB;AAAA,IACF;AAEA,UAAM,cAAc,MAAM,SAAS;AACnC,UAAM,gBAAgB,QAAQ,QAAQ;AACtC,UAAM,kBAAkB,QAAQ,QAAQ;AAGxC,QAAI,kBAAkB,eAAe,oBAAoB,aAAa;AACpE,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,QAAQ,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,QAAQ;AAAA;AAAA,EACV;AAEJ;AAWA,IAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAGM;AACJ,QAAM,WAAW,iBAAiB,UAAU,gBAAgB,IAAI;AAChE,QAAM,EAAE,KAAK,UAAU,QAAQ,QAAI,6BAAS,MAAM,EAAE,SAAS,CAAC;AAE9D,QAAM,cAAc,eAAe,UAAU,YAAY;AACzD,QAAM,aAAa,eAAe,QAAQ,SAAS,gBAAgB,IAAI;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR,cAAc,cAAc,SAAS;AAAA;AAAA,EACvC;AAEJ;AAEA,IAAM,cAAc,CAAC,EAAE,KAAK,cAAc,GAAG,MAAM,MAAwB;AACzE,QAAM,EAAE,OAAO,cAAc,GAAG,KAAK,IAAI;AAKzC,MAAI,WAAW,OAAO;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO,SAAS;AAAA,QAChB;AAAA;AAAA,IACF;AAAA,EAEJ,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;",
6
+ "names": ["import_react", "import_dedupe", "import_react", "import_react", "import_dedupe", "classNames", "import_dedupe", "import_react", "import_dedupe", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_jsx_runtime", "classNames", "import_dedupe", "import_react", "classNames", "import_jsx_runtime", "classNames", "import_jsx_runtime"]
7
7
  }
@@ -595,9 +595,10 @@ var init_adornmentWithClassName = __esm({
595
595
  import_react8 = require("react");
596
596
  adornmentWithClassName = (component, validationClasses, className) => {
597
597
  if (!component) return null;
598
- return (0, import_react8.cloneElement)(component, {
598
+ const typedComponent = component;
599
+ return (0, import_react8.cloneElement)(typedComponent, {
599
600
  className: (0, import_dedupe7.default)(
600
- component.props.className,
601
+ typedComponent.props.className,
601
602
  validationClasses,
602
603
  className
603
604
  )
@@ -607,12 +608,13 @@ var init_adornmentWithClassName = __esm({
607
608
  });
608
609
 
609
610
  // src/components/TextField/TextField.tsx
610
- var import_dedupe8, import_TextField, import_jsx_runtime7, TextField;
611
+ var import_dedupe8, import_react9, import_TextField, import_jsx_runtime7, TextFieldInner, TextField;
611
612
  var init_TextField = __esm({
612
613
  "src/components/TextField/TextField.tsx"() {
613
614
  "use strict";
614
615
  "use client";
615
616
  import_dedupe8 = __toESM(require("classnames/dedupe"));
617
+ import_react9 = require("react");
616
618
  init_hooks();
617
619
  init_ErrorMessage2();
618
620
  init_Label2();
@@ -620,7 +622,7 @@ var init_TextField = __esm({
620
622
  init_adornmentWithClassName();
621
623
  import_TextField = require("@simplybusiness/mobius/src/components/TextField/TextField.css");
622
624
  import_jsx_runtime7 = require("react/jsx-runtime");
623
- TextField = ({ ref, ...props }) => {
625
+ TextFieldInner = ({ ref, ...props }) => {
624
626
  const {
625
627
  isDisabled,
626
628
  type = "text",
@@ -714,6 +716,7 @@ var init_TextField = __esm({
714
716
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { ...errorMessageProps, errorMessage })
715
717
  ] });
716
718
  };
719
+ TextField = (0, import_react9.memo)(TextFieldInner);
717
720
  TextField.displayName = "TextField";
718
721
  }
719
722
  });
@@ -731,17 +734,17 @@ var MaskedField_exports = {};
731
734
  __export(MaskedField_exports, {
732
735
  MaskedField: () => MaskedField
733
736
  });
734
- var import_react9, import_react_imask, import_jsx_runtime8, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
737
+ var import_react10, import_react_imask, import_jsx_runtime8, useAcceptHandler, useCombinedRef, useBlurHandler, ControlledMaskedField, UncontrolledMaskedField, MaskedField;
735
738
  var init_MaskedField = __esm({
736
739
  "src/components/MaskedField/MaskedField.tsx"() {
737
740
  "use strict";
738
741
  "use client";
739
- import_react9 = require("react");
742
+ import_react10 = require("react");
740
743
  import_react_imask = require("react-imask");
741
744
  init_TextField2();
742
745
  import_jsx_runtime8 = require("react/jsx-runtime");
743
746
  useAcceptHandler = (onChange, useMaskedValue, name) => {
744
- return (0, import_react9.useCallback)(
747
+ return (0, import_react10.useCallback)(
745
748
  (maskedValue, maskInstance) => {
746
749
  if (!onChange) {
747
750
  return;
@@ -757,7 +760,7 @@ var init_MaskedField = __esm({
757
760
  );
758
761
  };
759
762
  useCombinedRef = (imaskRef, forwardedRef) => {
760
- return (0, import_react9.useCallback)(
763
+ return (0, import_react10.useCallback)(
761
764
  (element) => {
762
765
  imaskRef.current = element;
763
766
  if (typeof forwardedRef === "function") {
@@ -770,7 +773,7 @@ var init_MaskedField = __esm({
770
773
  );
771
774
  };
772
775
  useBlurHandler = (onBlur, maskRef, useMaskedValue, name) => {
773
- return (0, import_react9.useCallback)(
776
+ return (0, import_react10.useCallback)(
774
777
  (event) => {
775
778
  if (!onBlur || !maskRef.current) {
776
779
  return;
@@ -800,7 +803,7 @@ var init_MaskedField = __esm({
800
803
  const { ref: imaskRef, maskRef, setValue } = (0, import_react_imask.useIMask)(mask, { onAccept });
801
804
  const combinedRef = useCombinedRef(imaskRef, forwardedRef);
802
805
  const handleBlur = useBlurHandler(onBlur, maskRef, useMaskedValue, name);
803
- (0, import_react9.useEffect)(() => {
806
+ (0, import_react10.useEffect)(() => {
804
807
  if (!maskRef.current) {
805
808
  return;
806
809
  }