@cerberus-design/react 0.6.1-next-0345599 → 0.6.1-next-1315bf2

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 (108) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.ts +147 -3
  2. package/build/legacy/aria-helpers/trap-focus.aria.js +7 -0
  3. package/build/legacy/aria-helpers/trap-focus.aria.js.map +1 -0
  4. package/build/legacy/{chunk-3CBN7U25.js → chunk-3TYUA4C7.js} +6 -3
  5. package/build/legacy/chunk-3TYUA4C7.js.map +1 -0
  6. package/build/legacy/chunk-4CAT3FHV.js +11 -0
  7. package/build/legacy/chunk-4CAT3FHV.js.map +1 -0
  8. package/build/legacy/chunk-4M3EUP57.js +22 -0
  9. package/build/legacy/chunk-4M3EUP57.js.map +1 -0
  10. package/build/{modern/chunk-X4YQ27D5.js → legacy/chunk-5RA3ZIXA.js} +2 -2
  11. package/build/legacy/{chunk-5XNLWIZO.js → chunk-EVEEQRH6.js} +2 -2
  12. package/build/legacy/chunk-EVEEQRH6.js.map +1 -0
  13. package/build/{modern/chunk-HE3HFKYU.js → legacy/chunk-JJGZRBIR.js} +2 -2
  14. package/build/legacy/{chunk-HE3HFKYU.js.map → chunk-JJGZRBIR.js.map} +1 -1
  15. package/build/legacy/chunk-KESKDLX6.js +30 -0
  16. package/build/legacy/chunk-KESKDLX6.js.map +1 -0
  17. package/build/{modern/chunk-G2QMBSK5.js → legacy/chunk-PMCYXRAH.js} +2 -2
  18. package/build/legacy/chunk-PMCYXRAH.js.map +1 -0
  19. package/build/legacy/chunk-SCAVVE6E.js +16 -0
  20. package/build/legacy/chunk-SCAVVE6E.js.map +1 -0
  21. package/build/legacy/{chunk-734PGVLT.js → chunk-VLVKNEA5.js} +2 -2
  22. package/build/legacy/chunk-VULPMZUW.js +18 -0
  23. package/build/legacy/chunk-VULPMZUW.js.map +1 -0
  24. package/build/legacy/chunk-YRUUO4AP.js +166 -0
  25. package/build/legacy/chunk-YRUUO4AP.js.map +1 -0
  26. package/build/legacy/components/FeatureFlag.js +10 -0
  27. package/build/legacy/components/FeatureFlag.js.map +1 -0
  28. package/build/legacy/components/Input.js +3 -3
  29. package/build/legacy/components/Label.js +1 -1
  30. package/build/legacy/components/NavMenuList.js +1 -1
  31. package/build/legacy/components/Portal.js +7 -0
  32. package/build/legacy/components/Portal.js.map +1 -0
  33. package/build/legacy/components/Tag.js +1 -1
  34. package/build/legacy/components/Toggle.js +3 -3
  35. package/build/legacy/config/cerbIcons.js +1 -1
  36. package/build/legacy/config/defineIcons.js +2 -2
  37. package/build/legacy/context/confirm-modal.js +16 -0
  38. package/build/legacy/context/confirm-modal.js.map +1 -0
  39. package/build/legacy/context/feature-flags.js +10 -0
  40. package/build/legacy/context/feature-flags.js.map +1 -0
  41. package/build/legacy/index.js +50 -26
  42. package/build/modern/_tsup-dts-rollup.d.ts +147 -3
  43. package/build/modern/aria-helpers/trap-focus.aria.js +7 -0
  44. package/build/modern/aria-helpers/trap-focus.aria.js.map +1 -0
  45. package/build/modern/{chunk-3CBN7U25.js → chunk-3TYUA4C7.js} +6 -3
  46. package/build/modern/chunk-3TYUA4C7.js.map +1 -0
  47. package/build/modern/chunk-4CAT3FHV.js +11 -0
  48. package/build/modern/chunk-4CAT3FHV.js.map +1 -0
  49. package/build/modern/chunk-4M3EUP57.js +22 -0
  50. package/build/modern/chunk-4M3EUP57.js.map +1 -0
  51. package/build/{legacy/chunk-X4YQ27D5.js → modern/chunk-5RA3ZIXA.js} +2 -2
  52. package/build/modern/chunk-BVK6GEDZ.js +164 -0
  53. package/build/modern/chunk-BVK6GEDZ.js.map +1 -0
  54. package/build/modern/chunk-JIZQFTW6.js +29 -0
  55. package/build/modern/chunk-JIZQFTW6.js.map +1 -0
  56. package/build/{legacy/chunk-HE3HFKYU.js → modern/chunk-JJGZRBIR.js} +2 -2
  57. package/build/modern/{chunk-HE3HFKYU.js.map → chunk-JJGZRBIR.js.map} +1 -1
  58. package/build/{legacy/chunk-G2QMBSK5.js → modern/chunk-PMCYXRAH.js} +2 -2
  59. package/build/modern/chunk-PMCYXRAH.js.map +1 -0
  60. package/build/modern/chunk-SCAVVE6E.js +16 -0
  61. package/build/modern/chunk-SCAVVE6E.js.map +1 -0
  62. package/build/modern/{chunk-734PGVLT.js → chunk-VLVKNEA5.js} +2 -2
  63. package/build/modern/chunk-VULPMZUW.js +18 -0
  64. package/build/modern/chunk-VULPMZUW.js.map +1 -0
  65. package/build/modern/{chunk-SLIOCQBZ.js → chunk-Z6IWNVPN.js} +2 -2
  66. package/build/modern/chunk-Z6IWNVPN.js.map +1 -0
  67. package/build/modern/components/FeatureFlag.js +10 -0
  68. package/build/modern/components/FeatureFlag.js.map +1 -0
  69. package/build/modern/components/Input.js +3 -3
  70. package/build/modern/components/Label.js +1 -1
  71. package/build/modern/components/NavMenuList.js +1 -1
  72. package/build/modern/components/Portal.js +7 -0
  73. package/build/modern/components/Portal.js.map +1 -0
  74. package/build/modern/components/Tag.js +1 -1
  75. package/build/modern/components/Toggle.js +3 -3
  76. package/build/modern/config/cerbIcons.js +1 -1
  77. package/build/modern/config/defineIcons.js +2 -2
  78. package/build/modern/context/confirm-modal.js +16 -0
  79. package/build/modern/context/confirm-modal.js.map +1 -0
  80. package/build/modern/context/feature-flags.js +10 -0
  81. package/build/modern/context/feature-flags.js.map +1 -0
  82. package/build/modern/index.js +50 -26
  83. package/package.json +3 -2
  84. package/src/aria-helpers/trap-focus.aria.ts +29 -0
  85. package/src/components/FeatureFlag.tsx +14 -0
  86. package/src/components/Label.tsx +1 -1
  87. package/src/components/NavMenuList.tsx +1 -1
  88. package/src/components/Portal.tsx +22 -0
  89. package/src/components/Tag.tsx +1 -1
  90. package/src/config/cerbIcons.ts +9 -2
  91. package/src/config/defineIcons.ts +6 -3
  92. package/src/context/confirm-modal.tsx +205 -0
  93. package/src/context/feature-flags.tsx +60 -0
  94. package/src/index.ts +5 -0
  95. package/build/legacy/chunk-3CBN7U25.js.map +0 -1
  96. package/build/legacy/chunk-5MNCW677.js +0 -11
  97. package/build/legacy/chunk-5MNCW677.js.map +0 -1
  98. package/build/legacy/chunk-5XNLWIZO.js.map +0 -1
  99. package/build/legacy/chunk-G2QMBSK5.js.map +0 -1
  100. package/build/modern/chunk-3CBN7U25.js.map +0 -1
  101. package/build/modern/chunk-5MNCW677.js +0 -11
  102. package/build/modern/chunk-5MNCW677.js.map +0 -1
  103. package/build/modern/chunk-G2QMBSK5.js.map +0 -1
  104. package/build/modern/chunk-SLIOCQBZ.js.map +0 -1
  105. /package/build/legacy/{chunk-X4YQ27D5.js.map → chunk-5RA3ZIXA.js.map} +0 -0
  106. /package/build/legacy/{chunk-734PGVLT.js.map → chunk-VLVKNEA5.js.map} +0 -0
  107. /package/build/modern/{chunk-X4YQ27D5.js.map → chunk-5RA3ZIXA.js.map} +0 -0
  108. /package/build/modern/{chunk-734PGVLT.js.map → chunk-VLVKNEA5.js.map} +0 -0
@@ -0,0 +1,7 @@
1
+ import {
2
+ trapFocus
3
+ } from "../chunk-JIZQFTW6.js";
4
+ export {
5
+ trapFocus
6
+ };
7
+ //# sourceMappingURL=trap-focus.aria.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  defaultIcons
3
- } from "./chunk-5MNCW677.js";
3
+ } from "./chunk-SCAVVE6E.js";
4
4
 
5
5
  // src/config/defineIcons.ts
6
6
  function _validateIconsProperties(icons) {
@@ -12,7 +12,10 @@ function _validateIconsProperties(icons) {
12
12
  }
13
13
  function defineIcons(icons) {
14
14
  _validateIconsProperties(icons);
15
- $cerberusIcons = icons;
15
+ $cerberusIcons = {
16
+ ...defaultIcons,
17
+ ...icons
18
+ };
16
19
  return $cerberusIcons;
17
20
  }
18
21
  var $cerberusIcons = defaultIcons;
@@ -21,4 +24,4 @@ export {
21
24
  defineIcons,
22
25
  $cerberusIcons
23
26
  };
24
- //# sourceMappingURL=chunk-3CBN7U25.js.map
27
+ //# sourceMappingURL=chunk-3TYUA4C7.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAA6C;AACvE,2BAAyB,KAAK;AAC9B,mBAAiB;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SAAO;AACT;AAIO,IAAI,iBAAiB;","names":[]}
@@ -0,0 +1,11 @@
1
+ // src/components/Portal.tsx
2
+ import { createPortal } from "react-dom";
3
+ function Portal(props) {
4
+ const container = props.container || document.body;
5
+ return createPortal(props.children, container, props.key);
6
+ }
7
+
8
+ export {
9
+ Portal
10
+ };
11
+ //# sourceMappingURL=chunk-4CAT3FHV.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n container?: Element | DocumentFragment\n key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container || document.body\n return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}
@@ -0,0 +1,22 @@
1
+ // src/context/feature-flags.tsx
2
+ import { createContext, useContext } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ var FeatureFlagContext = createContext(null);
5
+ function FeatureFlags(props) {
6
+ return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
7
+ }
8
+ function useFeatureFlags(key) {
9
+ const context = useContext(FeatureFlagContext);
10
+ if (context === null) {
11
+ throw new Error(
12
+ "useFeatureFlag must be used within a FeatureFlags Provider"
13
+ );
14
+ }
15
+ return context[key] ?? false;
16
+ }
17
+
18
+ export {
19
+ FeatureFlags,
20
+ useFeatureFlags
21
+ };
22
+ //# sourceMappingURL=chunk-4M3EUP57.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n * featureOne: true,\n * featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n * <FeatureFlag flag=\"featureOne\">\n * This is visible.\n * </FeatureFlag>\n * <FeatureFlag flag=\"featureTwo\">\n * This is hidden.\n * </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n return (\n <FeatureFlagContext.Provider value={props.flags}>\n {props.children}\n </FeatureFlagContext.Provider>\n )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n const context = useContext(FeatureFlagContext)\n if (context === null) {\n throw new Error(\n 'useFeatureFlag must be used within a FeatureFlags Provider',\n )\n }\n return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}
@@ -6,7 +6,7 @@ import {
6
6
  } from "./chunk-4O4QFF4S.js";
7
7
  import {
8
8
  $cerberusIcons
9
- } from "./chunk-3CBN7U25.js";
9
+ } from "./chunk-3TYUA4C7.js";
10
10
 
11
11
  // src/components/Input.tsx
12
12
  import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
39
39
  export {
40
40
  Input
41
41
  };
42
- //# sourceMappingURL=chunk-X4YQ27D5.js.map
42
+ //# sourceMappingURL=chunk-5RA3ZIXA.js.map
@@ -0,0 +1,164 @@
1
+ import {
2
+ Portal
3
+ } from "./chunk-4CAT3FHV.js";
4
+ import {
5
+ Button
6
+ } from "./chunk-2ATICEW3.js";
7
+ import {
8
+ Show
9
+ } from "./chunk-4O4QFF4S.js";
10
+ import {
11
+ trapFocus
12
+ } from "./chunk-JIZQFTW6.js";
13
+ import {
14
+ $cerberusIcons
15
+ } from "./chunk-3TYUA4C7.js";
16
+
17
+ // src/context/confirm-modal.tsx
18
+ import {
19
+ createContext,
20
+ useCallback,
21
+ useContext,
22
+ useMemo,
23
+ useRef,
24
+ useState
25
+ } from "react";
26
+ import { css, cx } from "@cerberus-design/styled-system/css";
27
+ import { circle, hstack, vstack } from "@cerberus-design/styled-system/patterns";
28
+ import {
29
+ confirmModal
30
+ } from "@cerberus-design/styled-system/recipes";
31
+ import { jsx, jsxs } from "react/jsx-runtime";
32
+ var ConfirmModalContext = createContext(null);
33
+ function ConfirmModal(props) {
34
+ const dialogRef = useRef(null);
35
+ const resolveRef = useRef(null);
36
+ const [content, setContent] = useState(null);
37
+ const focusTrap = trapFocus(dialogRef);
38
+ const palette = useMemo(
39
+ () => content?.kind === "destructive" ? "danger" : "action",
40
+ [content]
41
+ );
42
+ const styles = confirmModal({ palette });
43
+ const handleChoice = useCallback((e) => {
44
+ const target = e.currentTarget;
45
+ if (target.value === "true") {
46
+ resolveRef.current?.(true);
47
+ }
48
+ resolveRef.current?.(false);
49
+ dialogRef?.current?.close();
50
+ }, []);
51
+ const handleShow = useCallback((options) => {
52
+ return new Promise((resolve) => {
53
+ setContent({ ...options, kind: options.kind || "non-destructive" });
54
+ dialogRef?.current?.showModal();
55
+ resolveRef.current = resolve;
56
+ });
57
+ }, []);
58
+ const value = useMemo(
59
+ () => ({
60
+ show: handleShow
61
+ }),
62
+ [handleShow]
63
+ );
64
+ return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
65
+ props.children,
66
+ /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
67
+ /* @__PURE__ */ jsxs(
68
+ "div",
69
+ {
70
+ className: vstack({
71
+ alignItems: "flex-start",
72
+ gap: "4",
73
+ mb: "8"
74
+ }),
75
+ children: [
76
+ /* @__PURE__ */ jsx(ConfirmModalIcon, { palette }),
77
+ /* @__PURE__ */ jsx("h2", { className: styles.heading, children: content?.heading }),
78
+ /* @__PURE__ */ jsx("p", { className: styles.description, children: content?.description })
79
+ ]
80
+ }
81
+ ),
82
+ /* @__PURE__ */ jsxs(
83
+ "div",
84
+ {
85
+ className: hstack({
86
+ justifyContent: "stretch",
87
+ gap: "4"
88
+ }),
89
+ children: [
90
+ /* @__PURE__ */ jsx(
91
+ Button,
92
+ {
93
+ autoFocus: true,
94
+ className: css({
95
+ w: "1/2"
96
+ }),
97
+ name: "confirm",
98
+ onClick: handleChoice,
99
+ palette,
100
+ value: "true",
101
+ children: content?.actionText
102
+ }
103
+ ),
104
+ /* @__PURE__ */ jsx(
105
+ Button,
106
+ {
107
+ className: css({
108
+ w: "1/2"
109
+ }),
110
+ name: "cancel",
111
+ onClick: handleChoice,
112
+ usage: "outlined",
113
+ value: "false",
114
+ children: content?.cancelText
115
+ }
116
+ )
117
+ ]
118
+ }
119
+ )
120
+ ] }) })
121
+ ] });
122
+ }
123
+ function ConfirmModalIcon(props) {
124
+ const InfoIcon = $cerberusIcons.confirmModal;
125
+ return /* @__PURE__ */ jsx(
126
+ Show,
127
+ {
128
+ when: props.palette === "danger",
129
+ fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
130
+ children: /* @__PURE__ */ jsx(
131
+ "div",
132
+ {
133
+ className: cx(
134
+ confirmModal({
135
+ palette: "danger"
136
+ }).icon,
137
+ circle({
138
+ bgColor: "danger.surface.initial"
139
+ })
140
+ ),
141
+ style: {
142
+ color: "var(--cerberus-colors-danger-text-100)"
143
+ },
144
+ children: /* @__PURE__ */ jsx(InfoIcon, {})
145
+ }
146
+ )
147
+ }
148
+ );
149
+ }
150
+ function useConfirmModal() {
151
+ const context = useContext(ConfirmModalContext);
152
+ if (context === null) {
153
+ throw new Error(
154
+ "useConfirmModal must be used within a ConfirmModal Provider"
155
+ );
156
+ }
157
+ return context;
158
+ }
159
+
160
+ export {
161
+ ConfirmModal,
162
+ useConfirmModal
163
+ };
164
+ //# sourceMappingURL=chunk-BVK6GEDZ.js.map
@@ -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, cx } from '@cerberus-design/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport {\n confirmModal,\n type ConfirmModalVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\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 dialogRef = useRef<HTMLDialogElement>(null)\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(dialogRef)\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n const styles = confirmModal({ palette })\n\n const handleChoice = useCallback((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 dialogRef?.current?.close()\n }, [])\n\n const handleShow = useCallback((options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n dialogRef?.current?.showModal()\n resolveRef.current = resolve\n })\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 <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n })}\n >\n <ConfirmModalIcon palette={palette} />\n <h2 className={styles.heading}>{content?.heading}</h2>\n <p className={styles.description}>{content?.description}</p>\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 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 </dialog>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\n// This is to help show the variant styles for the icon since Panda is\n// not syncing correctly for the danger variant.\nfunction ConfirmModalIcon(props: ConfirmModalVariantProps) {\n const InfoIcon = $cerberusIcons.confirmModal\n return (\n <Show\n when={props.palette === 'danger'}\n fallback={\n <div className={cx(confirmModal().icon, circle())}>\n <InfoIcon />\n </div>\n }\n >\n <div\n className={cx(\n confirmModal({\n palette: 'danger',\n }).icon,\n circle({\n bgColor: 'danger.surface.initial',\n }),\n )}\n style={{\n color: 'var(--cerberus-colors-danger-text-100)',\n }}\n >\n <InfoIcon />\n </div>\n </Show>\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":"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","names":[]}
@@ -0,0 +1,29 @@
1
+ // src/aria-helpers/trap-focus.aria.ts
2
+ function trapFocus(modalRef) {
3
+ const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
4
+ const focusable = Array.from(
5
+ modalRef.current?.querySelectorAll(focusableElements) ?? []
6
+ );
7
+ const firstFocusable = focusable[0];
8
+ const lastFocusable = focusable[focusable.length - 1];
9
+ return function handleKeyDown(event) {
10
+ if (event.key === "Tab") {
11
+ if (event.shiftKey) {
12
+ if (document.activeElement === firstFocusable) {
13
+ lastFocusable.focus();
14
+ event.preventDefault();
15
+ }
16
+ } else {
17
+ if (document.activeElement === lastFocusable) {
18
+ firstFocusable.focus();
19
+ event.preventDefault();
20
+ }
21
+ }
22
+ }
23
+ };
24
+ }
25
+
26
+ export {
27
+ trapFocus
28
+ };
29
+ //# sourceMappingURL=chunk-JIZQFTW6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n"],"mappings":";AAEO,SAAS,UACd,UACyC;AACzC,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,IACtB,SAAS,SAAS,iBAAiB,iBAAiB,KAAK,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
@@ -32,7 +32,7 @@ function Label(props) {
32
32
  "span",
33
33
  {
34
34
  className: css({
35
- color: "neutral.text.100",
35
+ color: "page.text.100",
36
36
  fontSize: "inherit"
37
37
  }),
38
38
  children: "(required)"
@@ -46,4 +46,4 @@ function Label(props) {
46
46
  export {
47
47
  Label
48
48
  };
49
- //# sourceMappingURL=chunk-HE3HFKYU.js.map
49
+ //# sourceMappingURL=chunk-JJGZRBIR.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n htmlFor: string\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n data-disabled={disabled}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'neutral.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n htmlFor: string\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n data-disabled={disabled}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'page.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -32,7 +32,7 @@ function getPosition(position) {
32
32
  }
33
33
  var navListStyles = vstack({
34
34
  alignItems: "flex-start",
35
- bgColor: "neutral.surface.100",
35
+ bgColor: "page.surface.100",
36
36
  boxShadow: "lg",
37
37
  gap: "2",
38
38
  opacity: "0",
@@ -83,4 +83,4 @@ export {
83
83
  getPosition,
84
84
  NavMenuList
85
85
  };
86
- //# sourceMappingURL=chunk-G2QMBSK5.js.map
86
+ //# sourceMappingURL=chunk-PMCYXRAH.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n left: string\n right: string\n top: string\n bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n const defaultPositions = {\n left: 'auto',\n right: 'auto',\n top: 'auto',\n bottom: 'auto',\n }\n switch (position) {\n case 'right':\n return { ...defaultPositions, top: '0%', left: '105%' }\n case 'left':\n return { ...defaultPositions, top: '0%', right: '105%' }\n case 'bottom':\n return { ...defaultPositions, top: '110%' }\n case 'top':\n return { ...defaultPositions, bottom: '110%' }\n default:\n return defaultPositions\n }\n}\n\nconst navListStyles = vstack({\n alignItems: 'flex-start',\n bgColor: 'page.surface.100',\n boxShadow: 'lg',\n gap: '2',\n opacity: '0',\n p: '4',\n position: 'absolute',\n rounded: 'md',\n zIndex: 'dropdown',\n _motionSafe: {\n animationName: 'zoomIn',\n animationDelay: '100ms',\n animationDuration: '150ms',\n animationFillMode: 'both',\n animationTimingFunction: 'ease-in-out',\n },\n _positionBottom: {\n transformOrigin: 'top left',\n },\n _positionTop: {\n transformOrigin: 'bottom left',\n },\n _positionLeft: {\n transformOrigin: 'top right',\n },\n _positionRight: {\n transformOrigin: 'top left',\n },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n id: string\n position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n * <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n const { position, ...nativeProps } = props\n const { menuRef, expanded } = useNavMenuContext()\n const locationStyles = useMemo(\n () => getPosition(position ?? 'bottom'),\n [position],\n )\n\n return (\n <Show when={expanded}>\n <ul\n {...nativeProps}\n data-position={position ?? 'bottom'}\n className={cx(nativeProps.className, navListStyles)}\n ref={menuRef}\n style={locationStyles}\n />\n </Show>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}
@@ -0,0 +1,16 @@
1
+ // src/config/cerbIcons.ts
2
+ import {
3
+ Checkmark,
4
+ Information,
5
+ WarningFilled
6
+ } from "@cerberus/icons";
7
+ var defaultIcons = {
8
+ confirmModal: Information,
9
+ invalid: WarningFilled,
10
+ toggleChecked: Checkmark
11
+ };
12
+
13
+ export {
14
+ defaultIcons
15
+ };
16
+ //# sourceMappingURL=chunk-SCAVVE6E.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n Checkmark,\n Information,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n confirmModal?: CarbonIconType | ElementType\n invalid: CarbonIconType | ElementType\n toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n confirmModal: Information,\n invalid: WarningFilled,\n toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AASA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,SAAS;AAAA,EACT,eAAe;AACjB;","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-3TYUA4C7.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-VLVKNEA5.js.map
@@ -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":[]}
@@ -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";
4
+ } from "../chunk-5RA3ZIXA.js";
5
5
  import "../chunk-ZAU4JVLL.js";
6
6
  import "../chunk-4O4QFF4S.js";
7
- import "../chunk-3CBN7U25.js";
8
- import "../chunk-5MNCW677.js";
7
+ import "../chunk-3TYUA4C7.js";
8
+ import "../chunk-SCAVVE6E.js";
9
9
  export {
10
10
  Input
11
11
  };
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  Label
4
- } from "../chunk-HE3HFKYU.js";
4
+ } from "../chunk-JJGZRBIR.js";
5
5
  import "../chunk-ZAU4JVLL.js";
6
6
  import "../chunk-4O4QFF4S.js";
7
7
  export {
@@ -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,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-VLVKNEA5.js";
5
5
  import "../chunk-ZAU4JVLL.js";
6
- import "../chunk-3CBN7U25.js";
7
- import "../chunk-5MNCW677.js";
6
+ import "../chunk-3TYUA4C7.js";
7
+ import "../chunk-SCAVVE6E.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-SCAVVE6E.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-3TYUA4C7.js";
5
+ import "../chunk-SCAVVE6E.js";
6
6
  export {
7
7
  $cerberusIcons,
8
8
  defineIcons
@@ -0,0 +1,16 @@
1
+ "use client";
2
+ import {
3
+ ConfirmModal,
4
+ useConfirmModal
5
+ } from "../chunk-BVK6GEDZ.js";
6
+ import "../chunk-4CAT3FHV.js";
7
+ import "../chunk-2ATICEW3.js";
8
+ import "../chunk-4O4QFF4S.js";
9
+ import "../chunk-JIZQFTW6.js";
10
+ import "../chunk-3TYUA4C7.js";
11
+ import "../chunk-SCAVVE6E.js";
12
+ export {
13
+ ConfirmModal,
14
+ useConfirmModal
15
+ };
16
+ //# sourceMappingURL=confirm-modal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,10 @@
1
+ "use client";
2
+ import {
3
+ FeatureFlags,
4
+ useFeatureFlags
5
+ } from "../chunk-4M3EUP57.js";
6
+ export {
7
+ FeatureFlags,
8
+ useFeatureFlags
9
+ };
10
+ //# sourceMappingURL=feature-flags.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}