@inzumer/ui-library 1.3.0 → 1.4.0
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.
- package/dist/chunk-36CVKI5R.js +79 -0
- package/dist/chunk-36CVKI5R.js.map +1 -0
- package/dist/chunk-TR7XKJCO.js +85 -0
- package/dist/chunk-TR7XKJCO.js.map +1 -0
- package/dist/{chunk-PF5PSCG4.js → chunk-ULLCBART.js} +3 -3
- package/dist/{chunk-PF5PSCG4.js.map → chunk-ULLCBART.js.map} +1 -1
- package/dist/{chunk-NKNSSH2Q.js → chunk-VGLFR5SB.js} +3 -3
- package/dist/{chunk-NKNSSH2Q.js.map → chunk-VGLFR5SB.js.map} +1 -1
- package/dist/{chunk-SMKLV4ET.js → chunk-W3H7DYWX.js} +3 -3
- package/dist/{chunk-SMKLV4ET.js.map → chunk-W3H7DYWX.js.map} +1 -1
- package/dist/components/molecules/BottomSheet/index.js +2 -2
- package/dist/components/molecules/CookieBanner/index.d.ts +46 -0
- package/dist/components/molecules/CookieBanner/index.js +7 -0
- package/dist/components/molecules/CookieBanner/index.js.map +1 -0
- package/dist/components/molecules/CookiePreferences/index.d.ts +34 -0
- package/dist/components/molecules/CookiePreferences/index.js +13 -0
- package/dist/components/molecules/CookiePreferences/index.js.map +1 -0
- package/dist/components/molecules/Drawer/index.js +2 -2
- package/dist/components/molecules/Modal/index.js +2 -2
- package/dist/index.d.ts +2 -0
- package/dist/index.js +9 -7
- package/package.json +9 -1
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { Modal } from './chunk-W3H7DYWX.js';
|
|
2
|
+
import { Switch } from './chunk-ZABQF65Z.js';
|
|
3
|
+
import { Button } from './chunk-KL6I2JFC.js';
|
|
4
|
+
import { RichText } from './chunk-P4CV2EPR.js';
|
|
5
|
+
import { useId } from 'react';
|
|
6
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
// src/components/molecules/CookiePreferences/CookiePreferences.styles.ts
|
|
9
|
+
var cookiePreferencesIntroStyles = "mb-4 text-sm text-[var(--text-secondary)]";
|
|
10
|
+
var cookieCategoryListStyles = "flex flex-col gap-4";
|
|
11
|
+
var cookieCategoryStyles = "flex flex-col gap-2 rounded-lg border border-[var(--border-default)] p-4";
|
|
12
|
+
var cookieCategoryHeaderStyles = "flex items-center justify-between gap-4";
|
|
13
|
+
var cookieCategoryTitleStyles = "font-semibold text-[var(--text-primary)]";
|
|
14
|
+
var cookieCategoryRequiredStyles = "text-xs font-semibold text-[var(--text-secondary)]";
|
|
15
|
+
var cookieCategoryDescriptionStyles = "text-sm text-[var(--text-secondary)]";
|
|
16
|
+
var CookiePreferences = ({
|
|
17
|
+
open,
|
|
18
|
+
onClose,
|
|
19
|
+
title,
|
|
20
|
+
description,
|
|
21
|
+
categories,
|
|
22
|
+
value,
|
|
23
|
+
onChange,
|
|
24
|
+
onSave,
|
|
25
|
+
saveLabel,
|
|
26
|
+
cancelLabel,
|
|
27
|
+
requiredLabel,
|
|
28
|
+
idPrefix
|
|
29
|
+
}) => {
|
|
30
|
+
const baseId = useId();
|
|
31
|
+
const prefix = idPrefix ?? baseId;
|
|
32
|
+
return /* @__PURE__ */ jsxs(
|
|
33
|
+
Modal,
|
|
34
|
+
{
|
|
35
|
+
open,
|
|
36
|
+
onClose,
|
|
37
|
+
title,
|
|
38
|
+
footer: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
39
|
+
/* @__PURE__ */ jsx(Button, { id: `${prefix}-cancel`, type: "button", variant: "ghost", onClick: onClose, children: cancelLabel }),
|
|
40
|
+
/* @__PURE__ */ jsx(Button, { id: `${prefix}-save`, type: "button", onClick: onSave, children: saveLabel })
|
|
41
|
+
] }),
|
|
42
|
+
children: [
|
|
43
|
+
description && /* @__PURE__ */ jsx(RichText, { as: "p", variant: "p3", className: cookiePreferencesIntroStyles, children: description }),
|
|
44
|
+
/* @__PURE__ */ jsx("ul", { className: cookieCategoryListStyles, children: categories.map((category) => {
|
|
45
|
+
const descriptionId = `${prefix}-${category.id}-description`;
|
|
46
|
+
return /* @__PURE__ */ jsxs("li", { className: cookieCategoryStyles, children: [
|
|
47
|
+
/* @__PURE__ */ jsx("div", { className: cookieCategoryHeaderStyles, children: category.required ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsx(RichText, { as: "h3", variant: "p2", className: cookieCategoryTitleStyles, children: category.title }),
|
|
49
|
+
/* @__PURE__ */ jsx(RichText, { as: "span", variant: "p4", className: cookieCategoryRequiredStyles, children: requiredLabel })
|
|
50
|
+
] }) : /* @__PURE__ */ jsx(
|
|
51
|
+
Switch,
|
|
52
|
+
{
|
|
53
|
+
id: `${prefix}-${category.id}`,
|
|
54
|
+
label: category.title,
|
|
55
|
+
checked: value[category.id] === true,
|
|
56
|
+
onCheckedChange: (checked) => onChange(category.id, checked),
|
|
57
|
+
"aria-describedby": descriptionId
|
|
58
|
+
}
|
|
59
|
+
) }),
|
|
60
|
+
/* @__PURE__ */ jsx(
|
|
61
|
+
RichText,
|
|
62
|
+
{
|
|
63
|
+
as: "p",
|
|
64
|
+
id: descriptionId,
|
|
65
|
+
variant: "p3",
|
|
66
|
+
className: cookieCategoryDescriptionStyles,
|
|
67
|
+
children: category.description
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
] }, category.id);
|
|
71
|
+
}) })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export { CookiePreferences };
|
|
78
|
+
//# sourceMappingURL=chunk-36CVKI5R.js.map
|
|
79
|
+
//# sourceMappingURL=chunk-36CVKI5R.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/CookiePreferences/CookiePreferences.styles.ts","../src/components/molecules/CookiePreferences/CookiePreferences.tsx"],"names":[],"mappings":"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","file":"chunk-36CVKI5R.js","sourcesContent":["export const cookiePreferencesIntroStyles = 'mb-4 text-sm text-[var(--text-secondary)]';\n\nexport const cookieCategoryListStyles = 'flex flex-col gap-4';\n\nexport const cookieCategoryStyles =\n 'flex flex-col gap-2 rounded-lg border border-[var(--border-default)] p-4';\n\nexport const cookieCategoryHeaderStyles = 'flex items-center justify-between gap-4';\n\nexport const cookieCategoryTitleStyles = 'font-semibold text-[var(--text-primary)]';\n\nexport const cookieCategoryRequiredStyles = 'text-xs font-semibold text-[var(--text-secondary)]';\n\nexport const cookieCategoryDescriptionStyles = 'text-sm text-[var(--text-secondary)]';\n","import { useId, type ReactNode } from 'react';\nimport { Button, Modal, RichText, Switch } from '@components';\nimport {\n cookieCategoryDescriptionStyles,\n cookieCategoryHeaderStyles,\n cookieCategoryListStyles,\n cookieCategoryRequiredStyles,\n cookieCategoryStyles,\n cookieCategoryTitleStyles,\n cookiePreferencesIntroStyles,\n} from './CookiePreferences.styles';\n\nexport interface CookieCategory {\n id: string;\n title: string;\n description: ReactNode;\n /** Strictly necessary cookies can't be turned off; they show `requiredLabel` instead of a switch. */\n required?: boolean;\n}\n\nexport interface CookiePreferencesProps {\n open: boolean;\n onClose: () => void;\n title: ReactNode;\n description?: ReactNode;\n categories: CookieCategory[];\n /** Enabled state of each optional category, by id. */\n value: Record<string, boolean>;\n onChange: (id: string, enabled: boolean) => void;\n onSave: () => void;\n saveLabel: string;\n cancelLabel: string;\n /** e.g. \"Always on\". */\n requiredLabel: string;\n /** Prefix for stable ids: `<prefix>-<category id>` switches and `<prefix>-save` / `<prefix>-cancel` buttons. */\n idPrefix?: string;\n}\n\n/**\n * Per-category cookie choices in a `Modal` (focus trapped, Escape closes). Controlled: the\n * consumer holds `value` and persists it on `onSave`.\n */\nexport const CookiePreferences = ({\n open,\n onClose,\n title,\n description,\n categories,\n value,\n onChange,\n onSave,\n saveLabel,\n cancelLabel,\n requiredLabel,\n idPrefix,\n}: CookiePreferencesProps) => {\n const baseId = useId();\n const prefix = idPrefix ?? baseId;\n return (\n <Modal\n open={open}\n onClose={onClose}\n title={title}\n footer={\n <>\n <Button id={`${prefix}-cancel`} type=\"button\" variant=\"ghost\" onClick={onClose}>\n {cancelLabel}\n </Button>\n <Button id={`${prefix}-save`} type=\"button\" onClick={onSave}>\n {saveLabel}\n </Button>\n </>\n }\n >\n {description && (\n <RichText as=\"p\" variant=\"p3\" className={cookiePreferencesIntroStyles}>\n {description}\n </RichText>\n )}\n <ul className={cookieCategoryListStyles}>\n {categories.map((category) => {\n const descriptionId = `${prefix}-${category.id}-description`;\n return (\n <li key={category.id} className={cookieCategoryStyles}>\n <div className={cookieCategoryHeaderStyles}>\n {category.required ? (\n <>\n <RichText as=\"h3\" variant=\"p2\" className={cookieCategoryTitleStyles}>\n {category.title}\n </RichText>\n <RichText as=\"span\" variant=\"p4\" className={cookieCategoryRequiredStyles}>\n {requiredLabel}\n </RichText>\n </>\n ) : (\n <Switch\n id={`${prefix}-${category.id}`}\n label={category.title}\n checked={value[category.id] === true}\n onCheckedChange={(checked) => onChange(category.id, checked)}\n aria-describedby={descriptionId}\n />\n )}\n </div>\n <RichText\n as=\"p\"\n id={descriptionId}\n variant=\"p3\"\n className={cookieCategoryDescriptionStyles}\n >\n {category.description}\n </RichText>\n </li>\n );\n })}\n </ul>\n </Modal>\n );\n};\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { Button } from './chunk-KL6I2JFC.js';
|
|
2
|
+
import { RichText } from './chunk-P4CV2EPR.js';
|
|
3
|
+
import { cn } from './chunk-6LLGTBM6.js';
|
|
4
|
+
import { forwardRef, useId } from 'react';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
// src/components/molecules/CookieBanner/CookieBanner.styles.ts
|
|
8
|
+
var cookieBannerStyles = [
|
|
9
|
+
"fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border-default)]",
|
|
10
|
+
"bg-[var(--surface-primary)] shadow-lg"
|
|
11
|
+
].join(" ");
|
|
12
|
+
var cookieBannerContentStyles = "mx-auto flex w-full max-w-5xl flex-col gap-3 px-4 py-4";
|
|
13
|
+
var cookieBannerTitleStyles = "text-lg font-semibold text-[var(--text-primary)]";
|
|
14
|
+
var cookieBannerDescriptionStyles = "text-sm text-[var(--text-secondary)]";
|
|
15
|
+
var cookieBannerActionsStyles = "flex flex-wrap gap-2";
|
|
16
|
+
var cookieBannerButtonStyles = "min-h-11 flex-1";
|
|
17
|
+
var CookieBanner = forwardRef(
|
|
18
|
+
({
|
|
19
|
+
title,
|
|
20
|
+
description,
|
|
21
|
+
acceptLabel,
|
|
22
|
+
rejectLabel,
|
|
23
|
+
customizeLabel,
|
|
24
|
+
onAccept,
|
|
25
|
+
onReject,
|
|
26
|
+
onCustomize,
|
|
27
|
+
buttonIds = {},
|
|
28
|
+
className,
|
|
29
|
+
...props
|
|
30
|
+
}, ref) => {
|
|
31
|
+
const titleId = useId();
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
"section",
|
|
34
|
+
{
|
|
35
|
+
ref,
|
|
36
|
+
"aria-labelledby": titleId,
|
|
37
|
+
className: cn(cookieBannerStyles, className),
|
|
38
|
+
...props,
|
|
39
|
+
children: /* @__PURE__ */ jsxs("div", { className: cookieBannerContentStyles, children: [
|
|
40
|
+
/* @__PURE__ */ jsx(RichText, { as: "h2", id: titleId, variant: "s1", className: cookieBannerTitleStyles, children: title }),
|
|
41
|
+
/* @__PURE__ */ jsx(RichText, { as: "p", variant: "p3", className: cookieBannerDescriptionStyles, children: description }),
|
|
42
|
+
/* @__PURE__ */ jsxs("div", { className: cookieBannerActionsStyles, children: [
|
|
43
|
+
/* @__PURE__ */ jsx(
|
|
44
|
+
Button,
|
|
45
|
+
{
|
|
46
|
+
id: buttonIds.accept,
|
|
47
|
+
type: "button",
|
|
48
|
+
className: cookieBannerButtonStyles,
|
|
49
|
+
onClick: onAccept,
|
|
50
|
+
children: acceptLabel
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsx(
|
|
54
|
+
Button,
|
|
55
|
+
{
|
|
56
|
+
id: buttonIds.reject,
|
|
57
|
+
type: "button",
|
|
58
|
+
variant: "secondary",
|
|
59
|
+
className: cookieBannerButtonStyles,
|
|
60
|
+
onClick: onReject,
|
|
61
|
+
children: rejectLabel
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
onCustomize && customizeLabel && /* @__PURE__ */ jsx(
|
|
65
|
+
Button,
|
|
66
|
+
{
|
|
67
|
+
id: buttonIds.customize,
|
|
68
|
+
type: "button",
|
|
69
|
+
variant: "ghost",
|
|
70
|
+
className: cookieBannerButtonStyles,
|
|
71
|
+
onClick: onCustomize,
|
|
72
|
+
children: customizeLabel
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
] })
|
|
76
|
+
] })
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
CookieBanner.displayName = "CookieBanner";
|
|
82
|
+
|
|
83
|
+
export { CookieBanner };
|
|
84
|
+
//# sourceMappingURL=chunk-TR7XKJCO.js.map
|
|
85
|
+
//# sourceMappingURL=chunk-TR7XKJCO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/CookieBanner/CookieBanner.styles.ts","../src/components/molecules/CookieBanner/CookieBanner.tsx"],"names":[],"mappings":";;;;;;;AAAO,IAAM,kBAAA,GAAqB;AAAA,EAChC,uEAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;AAEH,IAAM,yBAAA,GAA4B,wDAAA;AAElC,IAAM,uBAAA,GAA0B,kDAAA;AAEhC,IAAM,6BAAA,GAAgC,sCAAA;AAEtC,IAAM,yBAAA,GAA4B,sBAAA;AAElC,IAAM,wBAAA,GAA2B,iBAAA;ACmBjC,IAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,KAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAY,EAAC;AAAA,IACb,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,iBAAA,EAAiB,OAAA;AAAA,QACjB,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,SAAS,CAAA;AAAA,QAC1C,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,uBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACA,GAAA,CAAC,YAAS,EAAA,EAAG,GAAA,EAAI,SAAQ,IAAA,EAAK,SAAA,EAAW,+BACtC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,SAAA,CAAU,MAAA;AAAA,gBACd,IAAA,EAAK,QAAA;AAAA,gBACL,SAAA,EAAW,wBAAA;AAAA,gBACX,OAAA,EAAS,QAAA;AAAA,gBAER,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BACA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,SAAA,CAAU,MAAA;AAAA,gBACd,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAQ,WAAA;AAAA,gBACR,SAAA,EAAW,wBAAA;AAAA,gBACX,OAAA,EAAS,QAAA;AAAA,gBAER,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YACC,eAAe,cAAA,oBACd,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,SAAA,CAAU,SAAA;AAAA,gBACd,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAQ,OAAA;AAAA,gBACR,SAAA,EAAW,wBAAA;AAAA,gBACX,OAAA,EAAS,WAAA;AAAA,gBAER,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EAEJ;AAAA,SAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-TR7XKJCO.js","sourcesContent":["export const cookieBannerStyles = [\n 'fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border-default)]',\n 'bg-[var(--surface-primary)] shadow-lg',\n].join(' ');\n\nexport const cookieBannerContentStyles = 'mx-auto flex w-full max-w-5xl flex-col gap-3 px-4 py-4';\n\nexport const cookieBannerTitleStyles = 'text-lg font-semibold text-[var(--text-primary)]';\n\nexport const cookieBannerDescriptionStyles = 'text-sm text-[var(--text-secondary)]';\n\nexport const cookieBannerActionsStyles = 'flex flex-wrap gap-2';\n\nexport const cookieBannerButtonStyles = 'min-h-11 flex-1';\n","import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { Button, RichText } from '@components';\nimport { cn } from '@utils';\nimport {\n cookieBannerActionsStyles,\n cookieBannerButtonStyles,\n cookieBannerContentStyles,\n cookieBannerDescriptionStyles,\n cookieBannerStyles,\n cookieBannerTitleStyles,\n} from './CookieBanner.styles';\n\nexport type CookieBannerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {\n title: ReactNode;\n /** What the cookies are for; usually ends with a link to the privacy policy. */\n description: ReactNode;\n acceptLabel: string;\n rejectLabel: string;\n /** Shown only when `onCustomize` is set (opens the preferences, e.g. `CookiePreferences`). */\n customizeLabel?: string;\n onAccept: () => void;\n onReject: () => void;\n onCustomize?: () => void;\n /** Stable ids for the buttons, e.g. for analytics click triggers. */\n buttonIds?: { accept?: string; reject?: string; customize?: string };\n};\n\n/**\n * Cookie consent bar pinned to the bottom of the page. Presentational: the consumer decides when\n * to show it and stores the answer. Accept and reject weigh the same visually, so rejecting is as\n * easy as accepting. Not modal: the page stays usable.\n */\nexport const CookieBanner = forwardRef<HTMLElement, CookieBannerProps>(\n (\n {\n title,\n description,\n acceptLabel,\n rejectLabel,\n customizeLabel,\n onAccept,\n onReject,\n onCustomize,\n buttonIds = {},\n className,\n ...props\n },\n ref,\n ) => {\n const titleId = useId();\n return (\n <section\n ref={ref}\n aria-labelledby={titleId}\n className={cn(cookieBannerStyles, className)}\n {...props}\n >\n <div className={cookieBannerContentStyles}>\n <RichText as=\"h2\" id={titleId} variant=\"s1\" className={cookieBannerTitleStyles}>\n {title}\n </RichText>\n <RichText as=\"p\" variant=\"p3\" className={cookieBannerDescriptionStyles}>\n {description}\n </RichText>\n <div className={cookieBannerActionsStyles}>\n <Button\n id={buttonIds.accept}\n type=\"button\"\n className={cookieBannerButtonStyles}\n onClick={onAccept}\n >\n {acceptLabel}\n </Button>\n <Button\n id={buttonIds.reject}\n type=\"button\"\n variant=\"secondary\"\n className={cookieBannerButtonStyles}\n onClick={onReject}\n >\n {rejectLabel}\n </Button>\n {onCustomize && customizeLabel && (\n <Button\n id={buttonIds.customize}\n type=\"button\"\n variant=\"ghost\"\n className={cookieBannerButtonStyles}\n onClick={onCustomize}\n >\n {customizeLabel}\n </Button>\n )}\n </div>\n </div>\n </section>\n );\n },\n);\n\nCookieBanner.displayName = 'CookieBanner';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
1
2
|
import { useScrollLock } from './chunk-53YMHM24.js';
|
|
2
3
|
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
3
4
|
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
4
|
-
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
5
5
|
import { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
6
6
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
7
7
|
import { cn } from './chunk-6LLGTBM6.js';
|
|
@@ -83,5 +83,5 @@ var BottomSheet = forwardRef(
|
|
|
83
83
|
BottomSheet.displayName = "BottomSheet";
|
|
84
84
|
|
|
85
85
|
export { BottomSheet };
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
87
|
-
//# sourceMappingURL=chunk-
|
|
86
|
+
//# sourceMappingURL=chunk-ULLCBART.js.map
|
|
87
|
+
//# sourceMappingURL=chunk-ULLCBART.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/molecules/BottomSheet/BottomSheet.styles.ts","../src/components/molecules/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC;AAAA,IACE,8EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,+EAAA;AAAA,IACA,6CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,uBAAA,GACX,gEAAA;AAEK,IAAM,sBAAA,GAAyB,uDAAA;AAE/B,IAAM,uBAAA,GAA0B,0CAAA;AC1BvC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAyB,EAAE,OAAA,EAAS,CAAA,EAClD,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC3D,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,uBAAA,EAAyB,CAAA;AAAA,UACpD,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,sBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAA0B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9D,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/BottomSheet/BottomSheet.styles.ts","../src/components/molecules/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC;AAAA,IACE,8EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,+EAAA;AAAA,IACA,6CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,uBAAA,GACX,gEAAA;AAEK,IAAM,sBAAA,GAAyB,uDAAA;AAE/B,IAAM,uBAAA,GAA0B,0CAAA;AC1BvC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAyB,EAAE,OAAA,EAAS,CAAA,EAClD,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC3D,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,uBAAA,EAAyB,CAAA;AAAA,UACpD,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,sBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAA0B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9D,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-ULLCBART.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const bottomSheetOverlayStyles = cva(\n [\n 'fixed inset-0 z-50 flex items-end justify-center bg-[var(--surface-overlay)]',\n 'transition-opacity duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'opacity-100',\n false: 'opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const bottomSheetPanelStyles = cva(\n [\n 'w-full max-w-md rounded-t-xl border border-b-0 border-[var(--border-default)]',\n 'bg-[var(--surface-secondary)] p-6 shadow-lg',\n 'transition-transform duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'translate-y-0',\n false: 'translate-y-full',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const bottomSheetHandleStyles =\n 'mx-auto mb-4 h-1.5 w-10 rounded-full bg-[var(--border-strong)]';\n\nexport const bottomSheetTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const bottomSheetFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useId, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport {\n useDelayedUnmount,\n useDismissableLayer,\n useFocusTrap,\n useMergedRef,\n useScrollLock,\n} from '@hooks';\nimport { cn } from '@utils';\nimport {\n bottomSheetFooterStyles,\n bottomSheetHandleStyles,\n bottomSheetOverlayStyles,\n bottomSheetPanelStyles,\n bottomSheetTitleStyles,\n} from './BottomSheet.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type BottomSheetProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n open: boolean;\n onClose: () => void;\n title?: ReactNode;\n footer?: ReactNode;\n closeOnBackdropClick?: boolean;\n};\n\nexport const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(\n (\n { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n ref,\n ) => {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const setPanelRef = useMergedRef(ref, panelRef);\n const titleId = useId();\n const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n // The panel mounts one render after `open` flips, so the trap starts once it exists.\n useFocusTrap(open && mounted, panelRef);\n useScrollLock(open);\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div className={bottomSheetOverlayStyles({ visible })}>\n <div\n ref={setPanelRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n tabIndex={-1}\n className={cn(bottomSheetPanelStyles({ visible }), className)}\n {...props}\n >\n <div aria-hidden className={bottomSheetHandleStyles} />\n {title && (\n <RichText as=\"h2\" id={titleId} variant=\"s1\" className={bottomSheetTitleStyles}>\n {title}\n </RichText>\n )}\n {children}\n {footer && <div className={bottomSheetFooterStyles}>{footer}</div>}\n </div>\n </div>\n );\n },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
1
2
|
import { useScrollLock } from './chunk-53YMHM24.js';
|
|
2
3
|
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
3
4
|
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
4
|
-
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
5
5
|
import { Button } from './chunk-KL6I2JFC.js';
|
|
6
6
|
import { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
7
7
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
@@ -138,5 +138,5 @@ var Drawer = forwardRef(
|
|
|
138
138
|
Drawer.displayName = "Drawer";
|
|
139
139
|
|
|
140
140
|
export { Drawer };
|
|
141
|
-
//# sourceMappingURL=chunk-
|
|
142
|
-
//# sourceMappingURL=chunk-
|
|
141
|
+
//# sourceMappingURL=chunk-VGLFR5SB.js.map
|
|
142
|
+
//# sourceMappingURL=chunk-VGLFR5SB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/molecules/Drawer/Drawer.styles.ts","../src/components/molecules/Drawer/Drawer.tsx"],"names":[],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/Drawer/Drawer.styles.ts","../src/components/molecules/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,uFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,iBAAA,GAAoB,GAAA;AAAA,EAC/B;AAAA,IACE,wEAAA;AAAA,IACA,0EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,iBAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,IAAA,EAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,EAAO,WAAW,mBAAA,EAAoB;AAAA,MAC/D,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,KAAA,EAAO,WAAW,kBAAA;AAAmB,KACjE;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,kBAAA,GAAqB,yCAAA;AAE3B,IAAM,iBAAA,GAAoB,kDAAA;AAE1B,IAAM,kBAAA,GAAqB,6BAAA;AC9BlC,IAAM,gBAAA,GAAmB,GAAA;AAqBlB,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CACE;AAAA,IACE,IAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA,GAAuB,IAAA;AAAA,IACvB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,eAAY,MAAA,EAAO,SAAA,EAAW,oBAAoB,EAAE,OAAA,EAAS,CAAA,EAAG,CAAA;AAAA,sBACrE,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,UACnC,QAAA,EAAU,EAAA;AAAA,UACV,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,UAC5D,GAAG,KAAA;AAAA,UAEF,QAAA,EAAA;AAAA,YAAA,CAAA,KAAA,IAAS,UAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,kBAAA,EACb,QAAA,EAAA;AAAA,cAAA,KAAA,oBACC,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,EAAA,EAAI,OAAA;AAAA,kBACJ,OAAA,EAAQ,IAAA;AAAA,kBACR,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,cAAc,CAAA;AAAA,kBAE9C,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cAED,UAAA,oBACC,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAQ,OAAA;AAAA,kBACR,IAAA,EAAK,MAAA;AAAA,kBACL,YAAA,EAAY,UAAA;AAAA,kBACZ,OAAA,EAAS,OAAA;AAAA,kBACT,SAAA,EAAU,iBAAA;AAAA,kBAEV,QAAA,kBAAA,GAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,aAAA,EAAW,IAAA;AAAA,sBACX,OAAA,EAAQ,WAAA;AAAA,sBACR,IAAA,EAAK,MAAA;AAAA,sBACL,MAAA,EAAO,cAAA;AAAA,sBACP,WAAA,EAAa,CAAA;AAAA,sBACb,aAAA,EAAc,OAAA;AAAA,sBACd,SAAA,EAAU,QAAA;AAAA,sBAEV,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB;AAAA;AAAA;AACjC;AAAA;AACF,aAAA,EAEJ,CAAA;AAAA,YAED,QAAA;AAAA,YACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,oBAAqB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA;AACzD,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-VGLFR5SB.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const drawerOverlayStyles = cva(\n 'absolute inset-0 bg-[var(--surface-overlay)] transition-opacity duration-200 ease-out',\n {\n variants: {\n visible: {\n true: 'opacity-100',\n false: 'opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const drawerPanelStyles = cva(\n [\n 'absolute inset-y-0 flex w-full max-w-80 flex-col gap-6 overflow-y-auto',\n 'border-[var(--border-default)] bg-[var(--surface-primary)] p-6 shadow-xl',\n 'transition-transform duration-200 ease-out focus:outline-none',\n ],\n {\n variants: {\n side: {\n left: 'left-0 border-r',\n right: 'right-0 border-l',\n },\n visible: {\n true: 'translate-x-0',\n false: '',\n },\n },\n compoundVariants: [\n { side: 'left', visible: false, className: '-translate-x-full' },\n { side: 'right', visible: false, className: 'translate-x-full' },\n ],\n defaultVariants: {\n side: 'right',\n visible: false,\n },\n },\n);\n\nexport const drawerHeaderStyles = 'flex items-center justify-between gap-4';\n\nexport const drawerTitleStyles = 'text-lg font-semibold text-[var(--text-primary)]';\n\nexport const drawerFooterStyles = 'mt-auto flex flex-col gap-4';\n","import { Button, RichText } from '@components';\nimport {\n useDelayedUnmount,\n useDismissableLayer,\n useFocusTrap,\n useMergedRef,\n useScrollLock,\n} from '@hooks';\nimport { cn } from '@utils';\nimport type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, useId, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport {\n drawerFooterStyles,\n drawerHeaderStyles,\n drawerOverlayStyles,\n drawerPanelStyles,\n drawerTitleStyles,\n} from './Drawer.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type DrawerProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<VariantProps<typeof drawerPanelStyles>, 'side'> & {\n open: boolean;\n onClose: () => void;\n title?: ReactNode;\n /** Extra classes for the title (e.g. a display font). */\n titleClassName?: string;\n /** Accessible name of the close button; the button is only rendered when this is set. */\n closeLabel?: string;\n /** Pinned to the bottom of the panel (preferences, actions). */\n footer?: ReactNode;\n closeOnBackdropClick?: boolean;\n };\n\n/**\n * A side panel (navigation menus, filters, settings) that slides in from the left or right.\n * Modal dialog semantics: focus moves inside and is trapped, Escape and backdrop clicks close it,\n * the page behind doesn't scroll, and focus returns to the trigger when it closes.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n open,\n onClose,\n side,\n title,\n titleClassName,\n closeLabel,\n footer,\n closeOnBackdropClick = true,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const setPanelRef = useMergedRef(ref, panelRef);\n const titleId = useId();\n const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n // The panel mounts one render after `open` flips, so the trap starts once it exists.\n useFocusTrap(open && mounted, panelRef);\n useScrollLock(open);\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div className=\"fixed inset-0 z-50\">\n <div aria-hidden=\"true\" className={drawerOverlayStyles({ visible })} />\n <div\n ref={setPanelRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n tabIndex={-1}\n className={cn(drawerPanelStyles({ side, visible }), className)}\n {...props}\n >\n {(title || closeLabel) && (\n <div className={drawerHeaderStyles}>\n {title && (\n <RichText\n as=\"h2\"\n id={titleId}\n variant=\"s1\"\n className={cn(drawerTitleStyles, titleClassName)}\n >\n {title}\n </RichText>\n )}\n {closeLabel && (\n <Button\n variant=\"ghost\"\n size=\"icon\"\n aria-label={closeLabel}\n onClick={onClose}\n className=\"ml-auto size-11\"\n >\n <svg\n aria-hidden\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n className=\"size-6\"\n >\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </Button>\n )}\n </div>\n )}\n {children}\n {footer && <div className={drawerFooterStyles}>{footer}</div>}\n </div>\n </div>\n );\n },\n);\n\nDrawer.displayName = 'Drawer';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
1
2
|
import { useScrollLock } from './chunk-53YMHM24.js';
|
|
2
3
|
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
3
4
|
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
4
|
-
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
5
5
|
import { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
6
6
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
7
7
|
import { cn } from './chunk-6LLGTBM6.js';
|
|
@@ -80,5 +80,5 @@ var Modal = forwardRef(
|
|
|
80
80
|
Modal.displayName = "Modal";
|
|
81
81
|
|
|
82
82
|
export { Modal };
|
|
83
|
-
//# sourceMappingURL=chunk-
|
|
84
|
-
//# sourceMappingURL=chunk-
|
|
83
|
+
//# sourceMappingURL=chunk-W3H7DYWX.js.map
|
|
84
|
+
//# sourceMappingURL=chunk-W3H7DYWX.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/molecules/Modal/Modal.styles.ts","../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,kBAAA,GAAqB,GAAA;AAAA,EAChC;AAAA,IACE,qFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B;AAAA,IACE,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,uDAAA;AAEzB,IAAM,iBAAA,GAAoB,0CAAA;ACvBjC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,EAAE,OAAA,EAAS,CAAA,EAC5C,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAoB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KACxD,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/Modal/Modal.styles.ts","../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,kBAAA,GAAqB,GAAA;AAAA,EAChC;AAAA,IACE,qFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B;AAAA,IACE,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,uDAAA;AAEzB,IAAM,iBAAA,GAAoB,0CAAA;ACvBjC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,EAAE,OAAA,EAAS,CAAA,EAC5C,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAoB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KACxD,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-W3H7DYWX.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const modalOverlayStyles = cva(\n [\n 'fixed inset-0 z-50 flex items-center justify-center bg-[var(--surface-overlay)] p-4',\n 'transition-opacity duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'opacity-100',\n false: 'opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const modalPanelStyles = cva(\n [\n 'w-full max-w-md rounded-xl border border-[var(--border-default)] bg-[var(--surface-secondary)] p-6 shadow-lg',\n 'transition-all duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'scale-100 opacity-100',\n false: 'scale-95 opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const modalTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const modalFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useId, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport {\n useDelayedUnmount,\n useDismissableLayer,\n useFocusTrap,\n useMergedRef,\n useScrollLock,\n} from '@hooks';\nimport { cn } from '@utils';\nimport {\n modalFooterStyles,\n modalOverlayStyles,\n modalPanelStyles,\n modalTitleStyles,\n} from './Modal.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n open: boolean;\n onClose: () => void;\n title?: ReactNode;\n footer?: ReactNode;\n closeOnBackdropClick?: boolean;\n};\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n ref,\n ) => {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const setPanelRef = useMergedRef(ref, panelRef);\n const titleId = useId();\n const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n // The panel mounts one render after `open` flips, so the trap starts once it exists.\n useFocusTrap(open && mounted, panelRef);\n useScrollLock(open);\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div className={modalOverlayStyles({ visible })}>\n <div\n ref={setPanelRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n tabIndex={-1}\n className={cn(modalPanelStyles({ visible }), className)}\n {...props}\n >\n {title && (\n <RichText as=\"h2\" id={titleId} variant=\"s1\" className={modalTitleStyles}>\n {title}\n </RichText>\n )}\n {children}\n {footer && <div className={modalFooterStyles}>{footer}</div>}\n </div>\n </div>\n );\n },\n);\n\nModal.displayName = 'Modal';\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { BottomSheet } from '../../../chunk-
|
|
1
|
+
export { BottomSheet } from '../../../chunk-ULLCBART.js';
|
|
2
|
+
import '../../../chunk-QT62VC36.js';
|
|
2
3
|
import '../../../chunk-53YMHM24.js';
|
|
3
4
|
import '../../../chunk-BNEEI7S5.js';
|
|
4
5
|
import '../../../chunk-JCJP427C.js';
|
|
5
|
-
import '../../../chunk-QT62VC36.js';
|
|
6
6
|
import '../../../chunk-P4Z7HH66.js';
|
|
7
7
|
import '../../../chunk-P4CV2EPR.js';
|
|
8
8
|
import '../../../chunk-6LLGTBM6.js';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type CookieBannerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
|
|
5
|
+
title: ReactNode;
|
|
6
|
+
/** What the cookies are for; usually ends with a link to the privacy policy. */
|
|
7
|
+
description: ReactNode;
|
|
8
|
+
acceptLabel: string;
|
|
9
|
+
rejectLabel: string;
|
|
10
|
+
/** Shown only when `onCustomize` is set (opens the preferences, e.g. `CookiePreferences`). */
|
|
11
|
+
customizeLabel?: string;
|
|
12
|
+
onAccept: () => void;
|
|
13
|
+
onReject: () => void;
|
|
14
|
+
onCustomize?: () => void;
|
|
15
|
+
/** Stable ids for the buttons, e.g. for analytics click triggers. */
|
|
16
|
+
buttonIds?: {
|
|
17
|
+
accept?: string;
|
|
18
|
+
reject?: string;
|
|
19
|
+
customize?: string;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Cookie consent bar pinned to the bottom of the page. Presentational: the consumer decides when
|
|
24
|
+
* to show it and stores the answer. Accept and reject weigh the same visually, so rejecting is as
|
|
25
|
+
* easy as accepting. Not modal: the page stays usable.
|
|
26
|
+
*/
|
|
27
|
+
declare const CookieBanner: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
|
|
28
|
+
title: ReactNode;
|
|
29
|
+
/** What the cookies are for; usually ends with a link to the privacy policy. */
|
|
30
|
+
description: ReactNode;
|
|
31
|
+
acceptLabel: string;
|
|
32
|
+
rejectLabel: string;
|
|
33
|
+
/** Shown only when `onCustomize` is set (opens the preferences, e.g. `CookiePreferences`). */
|
|
34
|
+
customizeLabel?: string;
|
|
35
|
+
onAccept: () => void;
|
|
36
|
+
onReject: () => void;
|
|
37
|
+
onCustomize?: () => void;
|
|
38
|
+
/** Stable ids for the buttons, e.g. for analytics click triggers. */
|
|
39
|
+
buttonIds?: {
|
|
40
|
+
accept?: string;
|
|
41
|
+
reject?: string;
|
|
42
|
+
customize?: string;
|
|
43
|
+
};
|
|
44
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
45
|
+
|
|
46
|
+
export { CookieBanner, type CookieBannerProps };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { CookieBanner } from '../../../chunk-TR7XKJCO.js';
|
|
2
|
+
import '../../../chunk-KL6I2JFC.js';
|
|
3
|
+
import '../../../chunk-P4Z7HH66.js';
|
|
4
|
+
import '../../../chunk-P4CV2EPR.js';
|
|
5
|
+
import '../../../chunk-6LLGTBM6.js';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface CookieCategory {
|
|
5
|
+
id: string;
|
|
6
|
+
title: string;
|
|
7
|
+
description: ReactNode;
|
|
8
|
+
/** Strictly necessary cookies can't be turned off; they show `requiredLabel` instead of a switch. */
|
|
9
|
+
required?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface CookiePreferencesProps {
|
|
12
|
+
open: boolean;
|
|
13
|
+
onClose: () => void;
|
|
14
|
+
title: ReactNode;
|
|
15
|
+
description?: ReactNode;
|
|
16
|
+
categories: CookieCategory[];
|
|
17
|
+
/** Enabled state of each optional category, by id. */
|
|
18
|
+
value: Record<string, boolean>;
|
|
19
|
+
onChange: (id: string, enabled: boolean) => void;
|
|
20
|
+
onSave: () => void;
|
|
21
|
+
saveLabel: string;
|
|
22
|
+
cancelLabel: string;
|
|
23
|
+
/** e.g. "Always on". */
|
|
24
|
+
requiredLabel: string;
|
|
25
|
+
/** Prefix for stable ids: `<prefix>-<category id>` switches and `<prefix>-save` / `<prefix>-cancel` buttons. */
|
|
26
|
+
idPrefix?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Per-category cookie choices in a `Modal` (focus trapped, Escape closes). Controlled: the
|
|
30
|
+
* consumer holds `value` and persists it on `onSave`.
|
|
31
|
+
*/
|
|
32
|
+
declare const CookiePreferences: ({ open, onClose, title, description, categories, value, onChange, onSave, saveLabel, cancelLabel, requiredLabel, idPrefix, }: CookiePreferencesProps) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
export { type CookieCategory, CookiePreferences, type CookiePreferencesProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { CookiePreferences } from '../../../chunk-36CVKI5R.js';
|
|
2
|
+
import '../../../chunk-W3H7DYWX.js';
|
|
3
|
+
import '../../../chunk-ZABQF65Z.js';
|
|
4
|
+
import '../../../chunk-QT62VC36.js';
|
|
5
|
+
import '../../../chunk-53YMHM24.js';
|
|
6
|
+
import '../../../chunk-BNEEI7S5.js';
|
|
7
|
+
import '../../../chunk-JCJP427C.js';
|
|
8
|
+
import '../../../chunk-KL6I2JFC.js';
|
|
9
|
+
import '../../../chunk-P4Z7HH66.js';
|
|
10
|
+
import '../../../chunk-P4CV2EPR.js';
|
|
11
|
+
import '../../../chunk-6LLGTBM6.js';
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { Drawer } from '../../../chunk-
|
|
1
|
+
export { Drawer } from '../../../chunk-VGLFR5SB.js';
|
|
2
|
+
import '../../../chunk-QT62VC36.js';
|
|
2
3
|
import '../../../chunk-53YMHM24.js';
|
|
3
4
|
import '../../../chunk-BNEEI7S5.js';
|
|
4
5
|
import '../../../chunk-JCJP427C.js';
|
|
5
|
-
import '../../../chunk-QT62VC36.js';
|
|
6
6
|
import '../../../chunk-KL6I2JFC.js';
|
|
7
7
|
import '../../../chunk-P4Z7HH66.js';
|
|
8
8
|
import '../../../chunk-P4CV2EPR.js';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { Modal } from '../../../chunk-
|
|
1
|
+
export { Modal } from '../../../chunk-W3H7DYWX.js';
|
|
2
|
+
import '../../../chunk-QT62VC36.js';
|
|
2
3
|
import '../../../chunk-53YMHM24.js';
|
|
3
4
|
import '../../../chunk-BNEEI7S5.js';
|
|
4
5
|
import '../../../chunk-JCJP427C.js';
|
|
5
|
-
import '../../../chunk-QT62VC36.js';
|
|
6
6
|
import '../../../chunk-P4Z7HH66.js';
|
|
7
7
|
import '../../../chunk-P4CV2EPR.js';
|
|
8
8
|
import '../../../chunk-6LLGTBM6.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,8 @@ export { Accordion, AccordionProps } from './components/molecules/Accordion/inde
|
|
|
11
11
|
export { BottomSheet, BottomSheetProps } from './components/molecules/BottomSheet/index.js';
|
|
12
12
|
export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './components/molecules/Breadcrumbs/index.js';
|
|
13
13
|
export { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from './components/molecules/Card/index.js';
|
|
14
|
+
export { CookieBanner, CookieBannerProps } from './components/molecules/CookieBanner/index.js';
|
|
15
|
+
export { CookieCategory, CookiePreferences, CookiePreferencesProps } from './components/molecules/CookiePreferences/index.js';
|
|
14
16
|
export { Drawer, DrawerProps } from './components/molecules/Drawer/index.js';
|
|
15
17
|
export { Language, LanguageOption, LanguageProps } from './components/molecules/Language/index.js';
|
|
16
18
|
export { Modal, ModalProps } from './components/molecules/Modal/index.js';
|
package/dist/index.js
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { useMediaQuery } from './chunk-2HCMNEIQ.js';
|
|
2
|
+
export { Drawer } from './chunk-VGLFR5SB.js';
|
|
3
|
+
export { Language } from './chunk-2YBZCUME.js';
|
|
2
4
|
export { Snackbar } from './chunk-BKPP4D3Q.js';
|
|
3
5
|
export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-XCUA543I.js';
|
|
4
6
|
export { Timeline } from './chunk-UL33H4AD.js';
|
|
5
|
-
export { useMediaQuery } from './chunk-2HCMNEIQ.js';
|
|
6
|
-
export { Switch } from './chunk-ZABQF65Z.js';
|
|
7
7
|
export { Textarea } from './chunk-3YRDRHO3.js';
|
|
8
8
|
export { Accordion } from './chunk-V3YXRI7M.js';
|
|
9
|
-
export { BottomSheet } from './chunk-
|
|
9
|
+
export { BottomSheet } from './chunk-ULLCBART.js';
|
|
10
10
|
export { Breadcrumbs } from './chunk-PE6XEC7Y.js';
|
|
11
11
|
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-N5CLCKR3.js';
|
|
12
|
-
export {
|
|
12
|
+
export { CookieBanner } from './chunk-TR7XKJCO.js';
|
|
13
|
+
export { CookiePreferences } from './chunk-36CVKI5R.js';
|
|
14
|
+
export { Modal } from './chunk-W3H7DYWX.js';
|
|
15
|
+
export { Switch } from './chunk-ZABQF65Z.js';
|
|
16
|
+
export { useFocusTrap } from './chunk-QT62VC36.js';
|
|
13
17
|
export { useScrollLock } from './chunk-53YMHM24.js';
|
|
14
18
|
export { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
15
19
|
export { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
16
|
-
export { useFocusTrap } from './chunk-QT62VC36.js';
|
|
17
|
-
export { Language } from './chunk-2YBZCUME.js';
|
|
18
20
|
import './chunk-GQMA2AQI.js';
|
|
19
21
|
export { Button, buttonStyles } from './chunk-KL6I2JFC.js';
|
|
20
22
|
export { useMergedRef } from './chunk-P4Z7HH66.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inzumer/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "React UI component library for the Inzumer design system",
|
|
6
6
|
"license": "MIT",
|
|
@@ -84,6 +84,14 @@
|
|
|
84
84
|
"types": "./dist/components/molecules/Card/index.d.ts",
|
|
85
85
|
"import": "./dist/components/molecules/Card/index.js"
|
|
86
86
|
},
|
|
87
|
+
"./cookie-banner": {
|
|
88
|
+
"types": "./dist/components/molecules/CookieBanner/index.d.ts",
|
|
89
|
+
"import": "./dist/components/molecules/CookieBanner/index.js"
|
|
90
|
+
},
|
|
91
|
+
"./cookie-preferences": {
|
|
92
|
+
"types": "./dist/components/molecules/CookiePreferences/index.d.ts",
|
|
93
|
+
"import": "./dist/components/molecules/CookiePreferences/index.js"
|
|
94
|
+
},
|
|
87
95
|
"./drawer": {
|
|
88
96
|
"types": "./dist/components/molecules/Drawer/index.d.ts",
|
|
89
97
|
"import": "./dist/components/molecules/Drawer/index.js"
|