@cerberus-design/react 0.6.1 → 0.7.0-next-e86fd39

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 (213) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.ts +336 -4
  2. package/build/legacy/aria-helpers/tabs.aria.js +2 -2
  3. package/build/legacy/aria-helpers/trap-focus.aria.js +7 -0
  4. package/build/legacy/aria-helpers/trap-focus.aria.js.map +1 -0
  5. package/build/legacy/chunk-2F5TB2EV.js +25 -0
  6. package/build/legacy/chunk-2F5TB2EV.js.map +1 -0
  7. package/build/legacy/chunk-4CAT3FHV.js +11 -0
  8. package/build/legacy/chunk-4CAT3FHV.js.map +1 -0
  9. package/build/legacy/chunk-4M3EUP57.js +22 -0
  10. package/build/legacy/chunk-4M3EUP57.js.map +1 -0
  11. package/build/{modern/chunk-X4YQ27D5.js → legacy/chunk-5GEC53G7.js} +5 -5
  12. package/build/legacy/{chunk-YJCWUN33.js → chunk-67S42J4B.js} +5 -16
  13. package/build/legacy/chunk-67S42J4B.js.map +1 -0
  14. package/build/legacy/{chunk-3CBN7U25.js → chunk-6TXQZ3PB.js} +6 -3
  15. package/build/legacy/chunk-6TXQZ3PB.js.map +1 -0
  16. package/build/legacy/{chunk-DQOYTLGB.js → chunk-7KJIZIAU.js} +9 -5
  17. package/build/legacy/chunk-7KJIZIAU.js.map +1 -0
  18. package/build/legacy/chunk-C45DY4VE.js +17 -0
  19. package/build/legacy/chunk-C45DY4VE.js.map +1 -0
  20. package/build/{modern/chunk-HE3HFKYU.js → legacy/chunk-CU7HXAKM.js} +5 -5
  21. package/build/legacy/{chunk-HE3HFKYU.js.map → chunk-CU7HXAKM.js.map} +1 -1
  22. package/build/legacy/chunk-D3ZXZA3U.js +155 -0
  23. package/build/legacy/chunk-D3ZXZA3U.js.map +1 -0
  24. package/build/legacy/chunk-DGPLSWFJ.js +208 -0
  25. package/build/legacy/chunk-DGPLSWFJ.js.map +1 -0
  26. package/build/legacy/{chunk-5XNLWIZO.js → chunk-EVEEQRH6.js} +2 -2
  27. package/build/legacy/chunk-EVEEQRH6.js.map +1 -0
  28. package/build/legacy/chunk-G3JEWPLM.js +29 -0
  29. package/build/legacy/chunk-G3JEWPLM.js.map +1 -0
  30. package/build/legacy/chunk-JI4YTPEJ.js +47 -0
  31. package/build/legacy/chunk-JI4YTPEJ.js.map +1 -0
  32. package/build/legacy/chunk-KESKDLX6.js +30 -0
  33. package/build/legacy/chunk-KESKDLX6.js.map +1 -0
  34. package/build/legacy/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js} +2 -2
  35. package/build/legacy/chunk-OGSAAB6K.js +12 -0
  36. package/build/legacy/chunk-OGSAAB6K.js.map +1 -0
  37. package/build/{modern/chunk-G2QMBSK5.js → legacy/chunk-PMCYXRAH.js} +2 -2
  38. package/build/legacy/chunk-PMCYXRAH.js.map +1 -0
  39. package/build/legacy/{chunk-734PGVLT.js → chunk-TAZI77TP.js} +2 -2
  40. package/build/legacy/chunk-TPFNVGYA.js +21 -0
  41. package/build/legacy/chunk-TPFNVGYA.js.map +1 -0
  42. package/build/legacy/chunk-TZNYJ3G7.js +25 -0
  43. package/build/legacy/chunk-TZNYJ3G7.js.map +1 -0
  44. package/build/legacy/chunk-UPODPCRD.js +12 -0
  45. package/build/legacy/chunk-UPODPCRD.js.map +1 -0
  46. package/build/legacy/chunk-VULPMZUW.js +18 -0
  47. package/build/legacy/chunk-VULPMZUW.js.map +1 -0
  48. package/build/{modern/chunk-5GSXIYD3.js → legacy/chunk-X2JMXTBH.js} +6 -8
  49. package/build/{modern/chunk-5GSXIYD3.js.map → legacy/chunk-X2JMXTBH.js.map} +1 -1
  50. package/build/legacy/components/FeatureFlag.js +10 -0
  51. package/build/legacy/components/FeatureFlag.js.map +1 -0
  52. package/build/legacy/components/Input.js +4 -4
  53. package/build/legacy/components/Label.js +2 -2
  54. package/build/legacy/components/Modal.js +7 -0
  55. package/build/legacy/components/Modal.js.map +1 -0
  56. package/build/legacy/components/ModalDescription.js +7 -0
  57. package/build/legacy/components/ModalDescription.js.map +1 -0
  58. package/build/legacy/components/ModalHeader.js +7 -0
  59. package/build/legacy/components/ModalHeader.js.map +1 -0
  60. package/build/legacy/components/ModalHeading.js +7 -0
  61. package/build/legacy/components/ModalHeading.js.map +1 -0
  62. package/build/legacy/components/ModalIcon.js +7 -0
  63. package/build/legacy/components/ModalIcon.js.map +1 -0
  64. package/build/legacy/components/NavMenuList.js +1 -1
  65. package/build/legacy/components/Portal.js +7 -0
  66. package/build/legacy/components/Portal.js.map +1 -0
  67. package/build/legacy/components/Tab.js +3 -3
  68. package/build/legacy/components/TabList.js +2 -2
  69. package/build/legacy/components/TabPanel.js +2 -2
  70. package/build/legacy/components/Tag.js +1 -1
  71. package/build/legacy/components/Toggle.js +3 -3
  72. package/build/legacy/config/cerbIcons.js +1 -1
  73. package/build/legacy/config/defineIcons.js +2 -2
  74. package/build/legacy/context/confirm-modal.js +22 -0
  75. package/build/legacy/context/confirm-modal.js.map +1 -0
  76. package/build/legacy/context/feature-flags.js +10 -0
  77. package/build/legacy/context/feature-flags.js.map +1 -0
  78. package/build/legacy/context/prompt-modal.js +25 -0
  79. package/build/legacy/context/prompt-modal.js.map +1 -0
  80. package/build/legacy/context/tabs.js +1 -1
  81. package/build/legacy/hooks/useModal.js +8 -0
  82. package/build/legacy/hooks/useModal.js.map +1 -0
  83. package/build/legacy/index.js +89 -35
  84. package/build/modern/_tsup-dts-rollup.d.ts +336 -4
  85. package/build/modern/aria-helpers/tabs.aria.js +2 -2
  86. package/build/modern/aria-helpers/trap-focus.aria.js +7 -0
  87. package/build/modern/aria-helpers/trap-focus.aria.js.map +1 -0
  88. package/build/modern/chunk-2F5TB2EV.js +25 -0
  89. package/build/modern/chunk-2F5TB2EV.js.map +1 -0
  90. package/build/modern/chunk-4CAT3FHV.js +11 -0
  91. package/build/modern/chunk-4CAT3FHV.js.map +1 -0
  92. package/build/modern/chunk-4M3EUP57.js +22 -0
  93. package/build/modern/chunk-4M3EUP57.js.map +1 -0
  94. package/build/{legacy/chunk-X4YQ27D5.js → modern/chunk-5GEC53G7.js} +5 -5
  95. package/build/modern/{chunk-YJCWUN33.js → chunk-67S42J4B.js} +5 -16
  96. package/build/modern/chunk-67S42J4B.js.map +1 -0
  97. package/build/modern/{chunk-3CBN7U25.js → chunk-6TXQZ3PB.js} +6 -3
  98. package/build/modern/chunk-6TXQZ3PB.js.map +1 -0
  99. package/build/modern/{chunk-DQOYTLGB.js → chunk-7KJIZIAU.js} +9 -5
  100. package/build/modern/chunk-7KJIZIAU.js.map +1 -0
  101. package/build/modern/chunk-C45DY4VE.js +17 -0
  102. package/build/modern/chunk-C45DY4VE.js.map +1 -0
  103. package/build/modern/chunk-C5HLLGME.js +23 -0
  104. package/build/modern/chunk-C5HLLGME.js.map +1 -0
  105. package/build/{legacy/chunk-HE3HFKYU.js → modern/chunk-CU7HXAKM.js} +5 -5
  106. package/build/modern/{chunk-HE3HFKYU.js.map → chunk-CU7HXAKM.js.map} +1 -1
  107. package/build/modern/chunk-G3JEWPLM.js +29 -0
  108. package/build/modern/chunk-G3JEWPLM.js.map +1 -0
  109. package/build/modern/chunk-HBEEHHON.js +46 -0
  110. package/build/modern/chunk-HBEEHHON.js.map +1 -0
  111. package/build/modern/chunk-JIZQFTW6.js +29 -0
  112. package/build/modern/chunk-JIZQFTW6.js.map +1 -0
  113. package/build/modern/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js} +2 -2
  114. package/build/modern/chunk-OGSAAB6K.js +12 -0
  115. package/build/modern/chunk-OGSAAB6K.js.map +1 -0
  116. package/build/{legacy/chunk-G2QMBSK5.js → modern/chunk-PMCYXRAH.js} +2 -2
  117. package/build/modern/chunk-PMCYXRAH.js.map +1 -0
  118. package/build/modern/chunk-TAVCJ54A.js +154 -0
  119. package/build/modern/chunk-TAVCJ54A.js.map +1 -0
  120. package/build/modern/{chunk-734PGVLT.js → chunk-TAZI77TP.js} +2 -2
  121. package/build/modern/chunk-TPFNVGYA.js +21 -0
  122. package/build/modern/chunk-TPFNVGYA.js.map +1 -0
  123. package/build/modern/chunk-UPODPCRD.js +12 -0
  124. package/build/modern/chunk-UPODPCRD.js.map +1 -0
  125. package/build/modern/chunk-VULPMZUW.js +18 -0
  126. package/build/modern/chunk-VULPMZUW.js.map +1 -0
  127. package/build/modern/chunk-WWG5QWXY.js +207 -0
  128. package/build/modern/chunk-WWG5QWXY.js.map +1 -0
  129. package/build/{legacy/chunk-5GSXIYD3.js → modern/chunk-X2JMXTBH.js} +6 -8
  130. package/build/{legacy/chunk-5GSXIYD3.js.map → modern/chunk-X2JMXTBH.js.map} +1 -1
  131. package/build/modern/{chunk-SLIOCQBZ.js → chunk-Z6IWNVPN.js} +2 -2
  132. package/build/modern/chunk-Z6IWNVPN.js.map +1 -0
  133. package/build/modern/components/FeatureFlag.js +10 -0
  134. package/build/modern/components/FeatureFlag.js.map +1 -0
  135. package/build/modern/components/Input.js +4 -4
  136. package/build/modern/components/Label.js +2 -2
  137. package/build/modern/components/Modal.js +7 -0
  138. package/build/modern/components/Modal.js.map +1 -0
  139. package/build/modern/components/ModalDescription.js +7 -0
  140. package/build/modern/components/ModalDescription.js.map +1 -0
  141. package/build/modern/components/ModalHeader.js +7 -0
  142. package/build/modern/components/ModalHeader.js.map +1 -0
  143. package/build/modern/components/ModalHeading.js +7 -0
  144. package/build/modern/components/ModalHeading.js.map +1 -0
  145. package/build/modern/components/ModalIcon.js +7 -0
  146. package/build/modern/components/ModalIcon.js.map +1 -0
  147. package/build/modern/components/NavMenuList.js +1 -1
  148. package/build/modern/components/Portal.js +7 -0
  149. package/build/modern/components/Portal.js.map +1 -0
  150. package/build/modern/components/Tab.js +3 -3
  151. package/build/modern/components/TabList.js +2 -2
  152. package/build/modern/components/TabPanel.js +2 -2
  153. package/build/modern/components/Tag.js +1 -1
  154. package/build/modern/components/Toggle.js +3 -3
  155. package/build/modern/config/cerbIcons.js +1 -1
  156. package/build/modern/config/defineIcons.js +2 -2
  157. package/build/modern/context/confirm-modal.js +22 -0
  158. package/build/modern/context/confirm-modal.js.map +1 -0
  159. package/build/modern/context/feature-flags.js +10 -0
  160. package/build/modern/context/feature-flags.js.map +1 -0
  161. package/build/modern/context/prompt-modal.js +25 -0
  162. package/build/modern/context/prompt-modal.js.map +1 -0
  163. package/build/modern/context/tabs.js +1 -1
  164. package/build/modern/hooks/useModal.js +8 -0
  165. package/build/modern/hooks/useModal.js.map +1 -0
  166. package/build/modern/index.js +89 -35
  167. package/package.json +3 -2
  168. package/src/aria-helpers/trap-focus.aria.ts +29 -0
  169. package/src/components/FeatureFlag.tsx +14 -0
  170. package/src/components/Label.tsx +1 -1
  171. package/src/components/Modal.tsx +37 -0
  172. package/src/components/ModalDescription.tsx +23 -0
  173. package/src/components/ModalHeader.tsx +37 -0
  174. package/src/components/ModalHeading.tsx +23 -0
  175. package/src/components/ModalIcon.tsx +28 -0
  176. package/src/components/NavMenuList.tsx +1 -1
  177. package/src/components/Portal.tsx +22 -0
  178. package/src/components/Tab.tsx +3 -84
  179. package/src/components/TabList.tsx +2 -4
  180. package/src/components/TabPanel.tsx +3 -14
  181. package/src/components/Tag.tsx +1 -1
  182. package/src/config/cerbIcons.ts +11 -2
  183. package/src/config/defineIcons.ts +6 -3
  184. package/src/context/confirm-modal.tsx +185 -0
  185. package/src/context/feature-flags.tsx +60 -0
  186. package/src/context/prompt-modal.tsx +232 -0
  187. package/src/context/tabs.tsx +15 -5
  188. package/src/hooks/useModal.ts +34 -0
  189. package/src/index.ts +12 -0
  190. package/build/legacy/chunk-3CBN7U25.js.map +0 -1
  191. package/build/legacy/chunk-5MNCW677.js +0 -11
  192. package/build/legacy/chunk-5MNCW677.js.map +0 -1
  193. package/build/legacy/chunk-5XNLWIZO.js.map +0 -1
  194. package/build/legacy/chunk-DQOYTLGB.js.map +0 -1
  195. package/build/legacy/chunk-G2QMBSK5.js.map +0 -1
  196. package/build/legacy/chunk-YA2UV2AB.js +0 -126
  197. package/build/legacy/chunk-YA2UV2AB.js.map +0 -1
  198. package/build/legacy/chunk-YJCWUN33.js.map +0 -1
  199. package/build/modern/chunk-3CBN7U25.js.map +0 -1
  200. package/build/modern/chunk-5MNCW677.js +0 -11
  201. package/build/modern/chunk-5MNCW677.js.map +0 -1
  202. package/build/modern/chunk-DQOYTLGB.js.map +0 -1
  203. package/build/modern/chunk-G2QMBSK5.js.map +0 -1
  204. package/build/modern/chunk-SLIOCQBZ.js.map +0 -1
  205. package/build/modern/chunk-SUP7U42W.js +0 -125
  206. package/build/modern/chunk-SUP7U42W.js.map +0 -1
  207. package/build/modern/chunk-YJCWUN33.js.map +0 -1
  208. /package/build/legacy/{chunk-X4YQ27D5.js.map → chunk-5GEC53G7.js.map} +0 -0
  209. /package/build/legacy/{chunk-S7HBD2A7.js.map → chunk-KFUXGX33.js.map} +0 -0
  210. /package/build/legacy/{chunk-734PGVLT.js.map → chunk-TAZI77TP.js.map} +0 -0
  211. /package/build/modern/{chunk-X4YQ27D5.js.map → chunk-5GEC53G7.js.map} +0 -0
  212. /package/build/modern/{chunk-S7HBD2A7.js.map → chunk-KFUXGX33.js.map} +0 -0
  213. /package/build/modern/{chunk-734PGVLT.js.map → chunk-TAZI77TP.js.map} +0 -0
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus-design/styled-system/css'\nimport { hstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n actionText: string\n cancelText: string\n}\nexport type ShowResult =\n | ((value: boolean | PromiseLike<boolean>) => void)\n | null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(modalRef)\n const ConfirmIcon = $cerberusIcons.confirmModal\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n close()\n },\n [close],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <Show\n when={palette === 'danger'}\n fallback={\n <ModalIcon palette=\"action\">\n <ConfirmIcon size={24} />\n </ModalIcon>\n }\n >\n <ModalIcon palette=\"danger\">\n <ConfirmIcon size={24} />\n </ModalIcon>\n </Show>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={hstack({\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </Modal>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,WAAW;AACpB,SAAS,cAAc;AA6Gb,SAKQ,KALR;AA9EV,IAAM,sBAAsB,cAAwC,IAAI;AA4BjE,SAAS,aACd,OACA;AACA,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI,SAAS;AAC3C,QAAM,aAAa,OAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyC,IAAI;AAC3E,QAAM,YAAY,UAAU,QAAQ;AACpC,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU;AAAA,IACd,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,IAAI;AAAA,MAC3B;AACA,iBAAW,UAAU,KAAK;AAC1B,YAAM;AAAA,IACR;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAqC;AACpC,aAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,aAAK;AACL,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,oBAAoB,UAApB,EAA6B,OAC3B;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,SAAM,WAAW,WAAW,KAAK,UAChC;AAAA,2BAAC,eACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,YAAY;AAAA,YAClB,UACE,oBAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,YAGF,8BAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,gBAAc,mBAAS,SAAQ;AAAA,QAChC,oBAAC,oBAAkB,mBAAS,aAAY;AAAA,SAC1C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAS;AAAA,gBACT,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT;AAAA,gBACA,OAAM;AAAA,gBAEL,mBAAS;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAM;AAAA,gBACN,OAAM;AAAA,gBAEL,mBAAS;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-ZAU4JVLL.js";
4
4
  import {
5
5
  $cerberusIcons
6
- } from "./chunk-3CBN7U25.js";
6
+ } from "./chunk-6TXQZ3PB.js";
7
7
 
8
8
  // src/components/Toggle.tsx
9
9
  import { cx } from "@cerberus-design/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
55
55
  export {
56
56
  Toggle
57
57
  };
58
- //# sourceMappingURL=chunk-734PGVLT.js.map
58
+ //# sourceMappingURL=chunk-TAZI77TP.js.map
@@ -0,0 +1,21 @@
1
+ // src/components/Modal.tsx
2
+ import { cx } from "@cerberus-design/styled-system/css";
3
+ import { modal } from "@cerberus-design/styled-system/recipes";
4
+ import { forwardRef } from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ function ModalEl(props, ref) {
7
+ return /* @__PURE__ */ jsx(
8
+ "dialog",
9
+ {
10
+ ...props,
11
+ className: cx(props.className, modal().dialog),
12
+ ref
13
+ }
14
+ );
15
+ }
16
+ var Modal = forwardRef(ModalEl);
17
+
18
+ export {
19
+ Modal
20
+ };
21
+ //# sourceMappingURL=chunk-TPFNVGYA.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n return (\n <dialog\n {...props}\n className={cx(props.className, modal().dialog)}\n ref={ref}\n />\n )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n * <ModalIcon icon={$cerberusIcons.alert} />\n * <h2>Modal Heading</h2>\n * <p>Modal description</p>\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAeO,IAAM,QAAQ,WAAW,OAAO;","names":[]}
@@ -0,0 +1,12 @@
1
+ // src/components/ModalDescription.tsx
2
+ import { cx } from "@cerberus-design/styled-system/css";
3
+ import { modal } from "@cerberus-design/styled-system/recipes";
4
+ import { jsx } from "react/jsx-runtime";
5
+ function ModalDescription(props) {
6
+ return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().description) });
7
+ }
8
+
9
+ export {
10
+ ModalDescription
11
+ };
12
+ //# sourceMappingURL=chunk-UPODPCRD.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}
@@ -0,0 +1,18 @@
1
+ import {
2
+ useFeatureFlags
3
+ } from "./chunk-4M3EUP57.js";
4
+ import {
5
+ Show
6
+ } from "./chunk-4O4QFF4S.js";
7
+
8
+ // src/components/FeatureFlag.tsx
9
+ import { jsx } from "react/jsx-runtime";
10
+ function FeatureFlag(props) {
11
+ const showContent = useFeatureFlags(props.flag);
12
+ return /* @__PURE__ */ jsx(Show, { when: showContent, children: props.children });
13
+ }
14
+
15
+ export {
16
+ FeatureFlag
17
+ };
18
+ //# sourceMappingURL=chunk-VULPMZUW.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/FeatureFlag.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { useFeatureFlags } from '../context/feature-flags'\nimport { Show } from './Show'\n\nexport interface FeatureFlagProps {\n flag: string\n}\n\nexport function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {\n const showContent = useFeatureFlags(props.flag)\n return <Show when={showContent}>{props.children}</Show>\n}\n"],"mappings":";;;;;;;;AAYS;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,oBAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":[]}
@@ -0,0 +1,207 @@
1
+ import {
2
+ Portal
3
+ } from "./chunk-4CAT3FHV.js";
4
+ import {
5
+ Modal
6
+ } from "./chunk-TPFNVGYA.js";
7
+ import {
8
+ ModalDescription
9
+ } from "./chunk-UPODPCRD.js";
10
+ import {
11
+ ModalHeader
12
+ } from "./chunk-2F5TB2EV.js";
13
+ import {
14
+ ModalHeading
15
+ } from "./chunk-OGSAAB6K.js";
16
+ import {
17
+ ModalIcon
18
+ } from "./chunk-G3JEWPLM.js";
19
+ import {
20
+ Button
21
+ } from "./chunk-2ATICEW3.js";
22
+ import {
23
+ Input
24
+ } from "./chunk-5GEC53G7.js";
25
+ import {
26
+ Label
27
+ } from "./chunk-CU7HXAKM.js";
28
+ import {
29
+ Show
30
+ } from "./chunk-4O4QFF4S.js";
31
+ import {
32
+ Field
33
+ } from "./chunk-ZAU4JVLL.js";
34
+ import {
35
+ trapFocus
36
+ } from "./chunk-JIZQFTW6.js";
37
+ import {
38
+ $cerberusIcons
39
+ } from "./chunk-6TXQZ3PB.js";
40
+ import {
41
+ useModal
42
+ } from "./chunk-C5HLLGME.js";
43
+
44
+ // src/context/prompt-modal.tsx
45
+ import {
46
+ createContext,
47
+ useCallback,
48
+ useContext,
49
+ useMemo,
50
+ useRef,
51
+ useState
52
+ } from "react";
53
+ import { css } from "@cerberus-design/styled-system/css";
54
+ import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
55
+ import { jsx, jsxs } from "react/jsx-runtime";
56
+ var PromptModalContext = createContext(null);
57
+ function PromptModal(props) {
58
+ const { modalRef, show, close } = useModal();
59
+ const resolveRef = useRef(null);
60
+ const [content, setContent] = useState(null);
61
+ const [inputValue, setInputValue] = useState("");
62
+ const focusTrap = trapFocus(modalRef);
63
+ const PromptIcon = $cerberusIcons.promptModal;
64
+ const isValid = useMemo(
65
+ () => inputValue === content?.key,
66
+ [inputValue, content]
67
+ );
68
+ const palette = useMemo(
69
+ () => content?.kind === "destructive" ? "danger" : "action",
70
+ [content]
71
+ );
72
+ const handleChange = useCallback(
73
+ (e) => {
74
+ setInputValue(e.currentTarget.value);
75
+ },
76
+ [content]
77
+ );
78
+ const handleChoice = useCallback(
79
+ (e) => {
80
+ const target = e.currentTarget;
81
+ if (target.value === "true") {
82
+ resolveRef.current?.(inputValue);
83
+ }
84
+ close();
85
+ },
86
+ [inputValue, close]
87
+ );
88
+ const handleShow = useCallback(
89
+ (options) => {
90
+ return new Promise((resolve) => {
91
+ setContent({ ...options, kind: options.kind || "non-destructive" });
92
+ show();
93
+ resolveRef.current = resolve;
94
+ });
95
+ },
96
+ [show]
97
+ );
98
+ const value = useMemo(
99
+ () => ({
100
+ show: handleShow
101
+ }),
102
+ [handleShow]
103
+ );
104
+ return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
105
+ props.children,
106
+ /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
107
+ /* @__PURE__ */ jsxs(ModalHeader, { children: [
108
+ /* @__PURE__ */ jsx(
109
+ Show,
110
+ {
111
+ when: palette === "danger",
112
+ fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) }),
113
+ children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) })
114
+ }
115
+ ),
116
+ /* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
117
+ /* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
118
+ ] }),
119
+ /* @__PURE__ */ jsx(
120
+ "div",
121
+ {
122
+ className: vstack({
123
+ alignItems: "flex-start",
124
+ mt: "4",
125
+ mb: "8"
126
+ }),
127
+ children: /* @__PURE__ */ jsxs(Field, { invalid: !isValid, children: [
128
+ /* @__PURE__ */ jsxs(Label, { htmlFor: "confirm", size: "md", children: [
129
+ "Type",
130
+ /* @__PURE__ */ jsx(
131
+ "strong",
132
+ {
133
+ className: css({
134
+ textTransform: "uppercase"
135
+ }),
136
+ children: content?.key
137
+ }
138
+ ),
139
+ "to confirm"
140
+ ] }),
141
+ /* @__PURE__ */ jsx(
142
+ Input,
143
+ {
144
+ id: "confirm",
145
+ name: "confirm",
146
+ onChange: handleChange,
147
+ type: "text"
148
+ }
149
+ )
150
+ ] })
151
+ }
152
+ ),
153
+ /* @__PURE__ */ jsxs(
154
+ "div",
155
+ {
156
+ className: hstack({
157
+ justifyContent: "stretch",
158
+ gap: "4"
159
+ }),
160
+ children: [
161
+ /* @__PURE__ */ jsx(
162
+ Button,
163
+ {
164
+ autoFocus: true,
165
+ className: css({
166
+ w: "1/2"
167
+ }),
168
+ disabled: !isValid,
169
+ name: "confirm",
170
+ onClick: handleChoice,
171
+ palette,
172
+ value: "true",
173
+ children: content?.actionText
174
+ }
175
+ ),
176
+ /* @__PURE__ */ jsx(
177
+ Button,
178
+ {
179
+ className: css({
180
+ w: "1/2"
181
+ }),
182
+ name: "cancel",
183
+ onClick: handleChoice,
184
+ usage: "outlined",
185
+ value: "false",
186
+ children: content?.cancelText
187
+ }
188
+ )
189
+ ]
190
+ }
191
+ )
192
+ ] }) })
193
+ ] });
194
+ }
195
+ function usePromptModal() {
196
+ const context = useContext(PromptModalContext);
197
+ if (context === null) {
198
+ throw new Error("usePromptModal must be used within a PromptModal Provider");
199
+ }
200
+ return context;
201
+ }
202
+
203
+ export {
204
+ PromptModal,
205
+ usePromptModal
206
+ };
207
+ //# sourceMappingURL=chunk-WWG5QWXY.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module\n */\n\nexport interface ShowPromptModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n key: string\n actionText: string\n cancelText: string\n}\nexport type PromptShowResult =\n | ((value: string | PromiseLike<string>) => void)\n | null\n\nexport interface PromptModalValue {\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/**\n * Provides a prompt modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(modalRef)\n const PromptIcon = $cerberusIcons.promptModal\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(inputValue)\n }\n close()\n },\n [inputValue, close],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <Show\n when={palette === 'danger'}\n fallback={\n <ModalIcon palette=\"action\">\n <PromptIcon size={24} />\n </ModalIcon>\n }\n >\n <ModalIcon palette=\"danger\">\n <PromptIcon size={24} />\n </ModalIcon>\n </Show>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label htmlFor=\"confirm\" size=\"md\">\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </Modal>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useTabsContext
3
- } from "./chunk-DQOYTLGB.js";
3
+ } from "./chunk-7KJIZIAU.js";
4
4
 
5
5
  // src/components/TabList.tsx
6
6
  import { cx } from "@cerberus/styled-system/css";
@@ -8,7 +8,7 @@ import { hstack } from "@cerberus/styled-system/patterns";
8
8
  import { jsx } from "react/jsx-runtime";
9
9
  function TabList(props) {
10
10
  const { description, ...nativeProps } = props;
11
- const { id } = useTabsContext();
11
+ const { id, styles } = useTabsContext();
12
12
  return /* @__PURE__ */ jsx(
13
13
  "div",
14
14
  {
@@ -17,11 +17,9 @@ function TabList(props) {
17
17
  className: cx(
18
18
  nativeProps.className,
19
19
  hstack({
20
- borderBottom: "1px solid",
21
- borderBottomColor: "action.border.100",
22
- gap: "0",
23
- w: "full"
24
- })
20
+ gap: "0"
21
+ }),
22
+ styles.tabList
25
23
  ),
26
24
  id: id ?? nativeProps.id
27
25
  }
@@ -31,4 +29,4 @@ function TabList(props) {
31
29
  export {
32
30
  TabList
33
31
  };
34
- //# sourceMappingURL=chunk-5GSXIYD3.js.map
32
+ //# sourceMappingURL=chunk-X2JMXTBH.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n * <Tab id=\"overview\">Overview</Tab>\n * <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n const { description, ...nativeProps } = props\n const { id } = useTabsContext()\n\n return (\n <div\n {...nativeProps}\n aria-describedby={description}\n className={cx(\n nativeProps.className,\n hstack({\n borderBottom: '1px solid',\n borderBottomColor: 'action.border.100',\n gap: '0',\n w: 'full',\n }),\n )}\n id={id ?? nativeProps.id}\n />\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,GAAG,IAAI,eAAe;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,KAAK;AAAA,UACL,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n * <Tab id=\"overview\">Overview</Tab>\n * <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n const { description, ...nativeProps } = props\n const { id, styles } = useTabsContext()\n\n return (\n <div\n {...nativeProps}\n aria-describedby={description}\n className={cx(\n nativeProps.className,\n hstack({\n gap: '0',\n }),\n styles.tabList,\n )}\n id={id ?? nativeProps.id}\n />\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,IAAI,OAAO,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}
@@ -9,7 +9,7 @@ import { iconButton, tag } from "@cerberus/styled-system/recipes";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
  function Tag(props) {
11
11
  const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
12
- const palette = props?.palette ?? "neutral";
12
+ const palette = props?.palette ?? "page";
13
13
  const isClosable = Boolean(onClick);
14
14
  const shape = isClosable ? "pill" : initShape;
15
15
  const closableStyles = isClosable ? closableCss : "";
@@ -55,4 +55,4 @@ var closableCss = css({
55
55
  export {
56
56
  Tag
57
57
  };
58
- //# sourceMappingURL=chunk-SLIOCQBZ.js.map
58
+ //# sourceMappingURL=chunk-Z6IWNVPN.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagRecipeProps & {\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n gradient?: never\n palette?: never\n onClick: () => void\n shape: 'pill'\n usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}
@@ -0,0 +1,10 @@
1
+ "use client";
2
+ import {
3
+ FeatureFlag
4
+ } from "../chunk-VULPMZUW.js";
5
+ import "../chunk-4M3EUP57.js";
6
+ import "../chunk-4O4QFF4S.js";
7
+ export {
8
+ FeatureFlag
9
+ };
10
+ //# sourceMappingURL=FeatureFlag.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,11 +1,11 @@
1
1
  "use client";
2
2
  import {
3
3
  Input
4
- } from "../chunk-X4YQ27D5.js";
5
- import "../chunk-ZAU4JVLL.js";
4
+ } from "../chunk-5GEC53G7.js";
6
5
  import "../chunk-4O4QFF4S.js";
7
- import "../chunk-3CBN7U25.js";
8
- import "../chunk-5MNCW677.js";
6
+ import "../chunk-ZAU4JVLL.js";
7
+ import "../chunk-6TXQZ3PB.js";
8
+ import "../chunk-C45DY4VE.js";
9
9
  export {
10
10
  Input
11
11
  };
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  Label
4
- } from "../chunk-HE3HFKYU.js";
5
- import "../chunk-ZAU4JVLL.js";
4
+ } from "../chunk-CU7HXAKM.js";
6
5
  import "../chunk-4O4QFF4S.js";
6
+ import "../chunk-ZAU4JVLL.js";
7
7
  export {
8
8
  Label
9
9
  };
@@ -0,0 +1,7 @@
1
+ import {
2
+ Modal
3
+ } from "../chunk-TPFNVGYA.js";
4
+ export {
5
+ Modal
6
+ };
7
+ //# sourceMappingURL=Modal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,7 @@
1
+ import {
2
+ ModalDescription
3
+ } from "../chunk-UPODPCRD.js";
4
+ export {
5
+ ModalDescription
6
+ };
7
+ //# sourceMappingURL=ModalDescription.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,7 @@
1
+ import {
2
+ ModalHeader
3
+ } from "../chunk-2F5TB2EV.js";
4
+ export {
5
+ ModalHeader
6
+ };
7
+ //# sourceMappingURL=ModalHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,7 @@
1
+ import {
2
+ ModalHeading
3
+ } from "../chunk-OGSAAB6K.js";
4
+ export {
5
+ ModalHeading
6
+ };
7
+ //# sourceMappingURL=ModalHeading.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,7 @@
1
+ import {
2
+ ModalIcon
3
+ } from "../chunk-G3JEWPLM.js";
4
+ export {
5
+ ModalIcon
6
+ };
7
+ //# sourceMappingURL=ModalIcon.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  NavMenuList,
4
4
  getPosition
5
- } from "../chunk-G2QMBSK5.js";
5
+ } from "../chunk-PMCYXRAH.js";
6
6
  import "../chunk-KJUCHZHV.js";
7
7
  import "../chunk-4O4QFF4S.js";
8
8
  export {
@@ -0,0 +1,7 @@
1
+ import {
2
+ Portal
3
+ } from "../chunk-4CAT3FHV.js";
4
+ export {
5
+ Portal
6
+ };
7
+ //# sourceMappingURL=Portal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  Tab
4
- } from "../chunk-SUP7U42W.js";
5
- import "../chunk-S7HBD2A7.js";
6
- import "../chunk-DQOYTLGB.js";
4
+ } from "../chunk-HBEEHHON.js";
5
+ import "../chunk-KFUXGX33.js";
6
+ import "../chunk-7KJIZIAU.js";
7
7
  export {
8
8
  Tab
9
9
  };
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  TabList
4
- } from "../chunk-5GSXIYD3.js";
5
- import "../chunk-DQOYTLGB.js";
4
+ } from "../chunk-X2JMXTBH.js";
5
+ import "../chunk-7KJIZIAU.js";
6
6
  export {
7
7
  TabList
8
8
  };
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  TabPanel
4
- } from "../chunk-YJCWUN33.js";
4
+ } from "../chunk-67S42J4B.js";
5
5
  import "../chunk-4O4QFF4S.js";
6
- import "../chunk-DQOYTLGB.js";
6
+ import "../chunk-7KJIZIAU.js";
7
7
  export {
8
8
  TabPanel
9
9
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Tag
3
- } from "../chunk-SLIOCQBZ.js";
3
+ } from "../chunk-Z6IWNVPN.js";
4
4
  import "../chunk-4O4QFF4S.js";
5
5
  export {
6
6
  Tag
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  Toggle
4
- } from "../chunk-734PGVLT.js";
4
+ } from "../chunk-TAZI77TP.js";
5
5
  import "../chunk-ZAU4JVLL.js";
6
- import "../chunk-3CBN7U25.js";
7
- import "../chunk-5MNCW677.js";
6
+ import "../chunk-6TXQZ3PB.js";
7
+ import "../chunk-C45DY4VE.js";
8
8
  export {
9
9
  Toggle
10
10
  };
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defaultIcons
3
- } from "../chunk-5MNCW677.js";
3
+ } from "../chunk-C45DY4VE.js";
4
4
  export {
5
5
  defaultIcons
6
6
  };
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  $cerberusIcons,
3
3
  defineIcons
4
- } from "../chunk-3CBN7U25.js";
5
- import "../chunk-5MNCW677.js";
4
+ } from "../chunk-6TXQZ3PB.js";
5
+ import "../chunk-C45DY4VE.js";
6
6
  export {
7
7
  $cerberusIcons,
8
8
  defineIcons
@@ -0,0 +1,22 @@
1
+ "use client";
2
+ import {
3
+ ConfirmModal,
4
+ useConfirmModal
5
+ } from "../chunk-TAVCJ54A.js";
6
+ import "../chunk-4CAT3FHV.js";
7
+ import "../chunk-TPFNVGYA.js";
8
+ import "../chunk-UPODPCRD.js";
9
+ import "../chunk-2F5TB2EV.js";
10
+ import "../chunk-OGSAAB6K.js";
11
+ import "../chunk-G3JEWPLM.js";
12
+ import "../chunk-2ATICEW3.js";
13
+ import "../chunk-4O4QFF4S.js";
14
+ import "../chunk-JIZQFTW6.js";
15
+ import "../chunk-6TXQZ3PB.js";
16
+ import "../chunk-C45DY4VE.js";
17
+ import "../chunk-C5HLLGME.js";
18
+ export {
19
+ ConfirmModal,
20
+ useConfirmModal
21
+ };
22
+ //# sourceMappingURL=confirm-modal.js.map