@frontify/fondue-components 3.0.3 → 3.2.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.
Files changed (117) hide show
  1. package/dist/fondue-components.js +38 -24
  2. package/dist/fondue-components.js.map +1 -1
  3. package/dist/fondue-components10.js +18 -38
  4. package/dist/fondue-components10.js.map +1 -1
  5. package/dist/fondue-components11.js +64 -40
  6. package/dist/fondue-components11.js.map +1 -1
  7. package/dist/fondue-components12.js +19 -77
  8. package/dist/fondue-components12.js.map +1 -1
  9. package/dist/fondue-components13.js +22 -64
  10. package/dist/fondue-components13.js.map +1 -1
  11. package/dist/fondue-components14.js +39 -46
  12. package/dist/fondue-components14.js.map +1 -1
  13. package/dist/fondue-components15.js +6 -12
  14. package/dist/fondue-components15.js.map +1 -1
  15. package/dist/fondue-components16.js +46 -154
  16. package/dist/fondue-components16.js.map +1 -1
  17. package/dist/fondue-components17.js +54 -117
  18. package/dist/fondue-components17.js.map +1 -1
  19. package/dist/fondue-components18.js +28 -117
  20. package/dist/fondue-components18.js.map +1 -1
  21. package/dist/fondue-components19.js +111 -20
  22. package/dist/fondue-components19.js.map +1 -1
  23. package/dist/fondue-components20.js +65 -14
  24. package/dist/fondue-components20.js.map +1 -1
  25. package/dist/fondue-components21.js +42 -59
  26. package/dist/fondue-components21.js.map +1 -1
  27. package/dist/fondue-components22.js +32 -17
  28. package/dist/fondue-components22.js.map +1 -1
  29. package/dist/fondue-components23.js +5 -17
  30. package/dist/fondue-components23.js.map +1 -1
  31. package/dist/fondue-components24.js +10 -33
  32. package/dist/fondue-components24.js.map +1 -1
  33. package/dist/fondue-components25.js +154 -24
  34. package/dist/fondue-components25.js.map +1 -1
  35. package/dist/fondue-components26.js +118 -9
  36. package/dist/fondue-components26.js.map +1 -1
  37. package/dist/fondue-components27.js +118 -110
  38. package/dist/fondue-components27.js.map +1 -1
  39. package/dist/fondue-components28.js +21 -12
  40. package/dist/fondue-components28.js.map +1 -1
  41. package/dist/fondue-components29.js +28 -39
  42. package/dist/fondue-components29.js.map +1 -1
  43. package/dist/fondue-components3.js +11 -40
  44. package/dist/fondue-components3.js.map +1 -1
  45. package/dist/fondue-components30.js +28 -8
  46. package/dist/fondue-components30.js.map +1 -1
  47. package/dist/fondue-components31.js +129 -20
  48. package/dist/fondue-components31.js.map +1 -1
  49. package/dist/fondue-components32.js +20 -55
  50. package/dist/fondue-components32.js.map +1 -1
  51. package/dist/fondue-components33.js +45 -18
  52. package/dist/fondue-components33.js.map +1 -1
  53. package/dist/fondue-components34.js +15 -15
  54. package/dist/fondue-components34.js.map +1 -1
  55. package/dist/fondue-components35.js +60 -2
  56. package/dist/fondue-components35.js.map +1 -1
  57. package/dist/fondue-components36.js +14 -38
  58. package/dist/fondue-components36.js.map +1 -1
  59. package/dist/fondue-components37.js +22 -0
  60. package/dist/fondue-components37.js.map +1 -0
  61. package/dist/fondue-components38.js +20 -0
  62. package/dist/fondue-components38.js.map +1 -0
  63. package/dist/fondue-components39.js +8 -0
  64. package/dist/fondue-components39.js.map +1 -0
  65. package/dist/fondue-components4.js +39 -45
  66. package/dist/fondue-components4.js.map +1 -1
  67. package/dist/fondue-components40.js +16 -0
  68. package/dist/fondue-components40.js.map +1 -0
  69. package/dist/fondue-components41.js +8 -0
  70. package/dist/fondue-components41.js.map +1 -0
  71. package/dist/fondue-components42.js +38 -0
  72. package/dist/fondue-components42.js.map +1 -0
  73. package/dist/fondue-components43.js +8 -0
  74. package/dist/fondue-components43.js.map +1 -0
  75. package/dist/fondue-components44.js +28 -0
  76. package/dist/fondue-components44.js.map +1 -0
  77. package/dist/fondue-components45.js +20 -0
  78. package/dist/fondue-components45.js.map +1 -0
  79. package/dist/fondue-components46.js +14 -0
  80. package/dist/fondue-components46.js.map +1 -0
  81. package/dist/fondue-components47.js +16 -0
  82. package/dist/fondue-components47.js.map +1 -0
  83. package/dist/fondue-components48.js +133 -0
  84. package/dist/fondue-components48.js.map +1 -0
  85. package/dist/fondue-components49.js +15 -0
  86. package/dist/fondue-components49.js.map +1 -0
  87. package/dist/fondue-components5.js +46 -82
  88. package/dist/fondue-components5.js.map +1 -1
  89. package/dist/fondue-components50.js +46 -0
  90. package/dist/fondue-components50.js.map +1 -0
  91. package/dist/fondue-components51.js +11 -0
  92. package/dist/fondue-components51.js.map +1 -0
  93. package/dist/fondue-components52.js +30 -0
  94. package/dist/fondue-components52.js.map +1 -0
  95. package/dist/fondue-components53.js +52 -0
  96. package/dist/fondue-components53.js.map +1 -0
  97. package/dist/fondue-components54.js +21 -0
  98. package/dist/fondue-components54.js.map +1 -0
  99. package/dist/fondue-components55.js +10 -0
  100. package/dist/fondue-components55.js.map +1 -0
  101. package/dist/fondue-components56.js +5 -0
  102. package/dist/fondue-components56.js.map +1 -0
  103. package/dist/fondue-components57.js +14 -0
  104. package/dist/fondue-components57.js.map +1 -0
  105. package/dist/fondue-components58.js +42 -0
  106. package/dist/fondue-components58.js.map +1 -0
  107. package/dist/fondue-components6.js +48 -30
  108. package/dist/fondue-components6.js.map +1 -1
  109. package/dist/fondue-components7.js +80 -83
  110. package/dist/fondue-components7.js.map +1 -1
  111. package/dist/fondue-components8.js +28 -56
  112. package/dist/fondue-components8.js.map +1 -1
  113. package/dist/fondue-components9.js +101 -22
  114. package/dist/fondue-components9.js.map +1 -1
  115. package/dist/index.d.ts +490 -5
  116. package/dist/style.css +1 -1
  117. package/package.json +5 -3
@@ -0,0 +1,8 @@
1
+ const o = "_root_1c702_5", t = {
2
+ root: o
3
+ };
4
+ export {
5
+ t as default,
6
+ o as root
7
+ };
8
+ //# sourceMappingURL=fondue-components39.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components39.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
@@ -1,49 +1,43 @@
1
- import { jsx as t, jsxs as s } from "react/jsx-runtime";
2
- import { IconMinus as m, IconCheckMark as h } from "@frontify/fondue-icons";
3
- import * as o from "@radix-ui/react-checkbox";
4
- import { forwardRef as k } from "react";
5
- import { cn as p } from "./fondue-components15.js";
6
- import { checkboxStyles as l, checkboxIndicatorStyles as w } from "./fondue-components19.js";
7
- const f = ({
8
- className: a,
9
- value: c,
10
- onChange: i,
11
- defaultValue: d,
12
- "data-test-id": r = "fondue-checkbox",
13
- ...e
14
- }, n) => /* @__PURE__ */ t(
15
- o.Root,
16
- {
17
- ref: n,
18
- checked: c,
19
- defaultChecked: d,
20
- className: p(l(e), a),
21
- onClick: i,
22
- "data-test-id": r,
23
- ...e,
24
- children: /* @__PURE__ */ s(o.Indicator, { className: w, children: [
25
- /* @__PURE__ */ t(
26
- m,
27
- {
28
- size: 16,
29
- className: 'tw-hidden tw-opacity-0 group-data-[state="indeterminate"]:tw-block group-data-[state="indeterminate"]:tw-opacity-100 tw-transition-opacity',
30
- "data-test-id": "icon-indeterminate"
31
- }
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import { forwardRef as b } from "react";
3
+ import { cn as y } from "./fondue-components24.js";
4
+ import { buttonStyles as r } from "./fondue-components25.js";
5
+ import { iconStyles as x } from "./fondue-components26.js";
6
+ import { textStyles as S } from "./fondue-components27.js";
7
+ const k = b(
8
+ ({
9
+ children: u,
10
+ type: d = "button",
11
+ variant: m,
12
+ size: e = "medium",
13
+ "data-test-id": l = "fondue-button",
14
+ className: c = "",
15
+ onPress: o = () => {
16
+ },
17
+ ...t
18
+ }, n) => /* @__PURE__ */ a(
19
+ "button",
20
+ {
21
+ ref: n,
22
+ type: d,
23
+ "data-test-id": l,
24
+ className: y(
25
+ r({ size: e, variant: m, ...t }),
26
+ S({ variant: m, ...t }),
27
+ x({ variant: m, ...t }),
28
+ c
32
29
  ),
33
- /* @__PURE__ */ t(
34
- h,
35
- {
36
- size: 16,
37
- className: 'tw-hidden tw-opacity-0 group-data-[state="checked"]:tw-block group-data-[state="checked"]:tw-opacity-100 tw-transition-opacity',
38
- "data-test-id": "icon-checked"
39
- }
40
- )
41
- ] })
42
- }
43
- ), x = k(f);
44
- x.displayName = "Checkbox";
30
+ ...t,
31
+ onClick: (i) => {
32
+ var f;
33
+ (f = t.onClick) == null || f.call(t, i), o == null || o(i);
34
+ },
35
+ children: u
36
+ }
37
+ )
38
+ );
39
+ k.displayName = "Button";
45
40
  export {
46
- x as Checkbox,
47
- f as CheckboxComponent
41
+ k as Button
48
42
  };
49
43
  //# sourceMappingURL=fondue-components4.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"fondue-components4.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n id?: string;\n name?: string;\n /**\n * The default value of the checkbox\n * Used for uncontrolled components\n * @default false\n */\n defaultValue?: boolean | 'indeterminate';\n /**\n * The controlled value of the checkbox\n * @default false\n */\n value?: boolean | 'indeterminate';\n /**\n * The size of the checkbox\n * @default \"default\"\n */\n size?: 'default' | 'large';\n /**\n * The emphasis of the checkbox\n * @default \"default\"\n */\n emphasis?: 'default' | 'weak';\n /**\n * Disable the checkbox\n * @default false\n */\n disabled?: boolean;\n /**\n * Make the checkbox required in form\n * @default false\n */\n required?: boolean;\n /**\n * Make the checkbox read-only\n * @default false\n */\n readOnly?: boolean;\n className?: string;\n /**\n * Event handler called when the checkbox value changes\n */\n onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n /**\n * Event handler called when the checkbox is blurred\n */\n onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n /**\n * Event handler called when the checkbox is focused\n */\n onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n 'data-test-id'?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n {\n className,\n value,\n onChange,\n defaultValue,\n 'data-test-id': dataTestId = 'fondue-checkbox',\n ...props\n }: CheckboxProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) => {\n return (\n <CheckboxPrimitive.Root\n ref={ref}\n checked={value}\n defaultChecked={defaultValue}\n className={cn(checkboxStyles(props), className)}\n onClick={onChange}\n data-test-id={dataTestId}\n {...props}\n >\n <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n <IconMinus\n size={16}\n className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n data-test-id=\"icon-indeterminate\"\n />\n\n <IconCheckMark\n size={16}\n className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n data-test-id=\"icon-checked\"\n />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASL;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWM,EAAGC,EAAeL,CAAK,GAAGL,CAAS;AAAA,IAC9C,SAASE;AAAA,IACT,gBAAcE;AAAA,IACb,GAAGC;AAAA,IAEJ,UAAC,gBAAAM,EAAAH,EAAkB,WAAlB,EAA4B,WAAWI,GACpC,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,MAEA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GACJ;AAAA,EAAA;AAAA,GAKCC,IAAWC,EAA6CjB,CAAiB;AACtFgB,EAAS,cAAc;"}
1
+ {"version":3,"file":"fondue-components4.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n /**\n * @default \"button\"\n */\n type?: ButtonType;\n /**\n * @default null\n */\n title?: string;\n /**\n * @default \"default\"\n */\n variant?: ButtonStyle;\n /**\n * @default \"strong\"\n */\n emphasis?: ButtonEmphasis;\n /**\n * @default \"medium\"\n */\n size?: ButtonSize;\n /**\n * @default \"medium\"\n */\n rounding?: ButtonRounding;\n /**\n * @default false\n */\n disabled?: boolean;\n /**\n * @default \"default\"\n */\n aspect?: ButtonAspect;\n /**\n * @default true\n */\n hugWidth?: boolean;\n children?: ReactNode;\n onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n 'aria-label'?: string;\n 'aria-describedby'?: string;\n 'data-test-id'?: string;\n className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n (\n {\n children,\n type = 'button',\n variant,\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-button',\n className = '',\n onPress = () => {},\n ...props\n }: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement | null>,\n ) => {\n return (\n <button\n ref={ref}\n type={type}\n data-test-id={dataTestId}\n className={cn(\n buttonStyles({ size, variant, ...props }),\n textStyles({ variant, ...props }),\n iconStyles({ variant, ...props }),\n className,\n )}\n {...props}\n onClick={(event) => {\n // @ts-expect-error - Allows other components who use Button as a trigger to pass an action\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n props.onClick?.(event);\n onPress?.(event);\n }}\n >\n {children}\n </button>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","type","variant","size","dataTestId","className","onPress","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles","event","_a"],"mappings":";;;;;;AAmEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAP;AAAA,MACA,gBAAcG;AAAA,MACd,WAAWM;AAAA,QACPC,EAAa,EAAE,MAAAR,GAAM,SAAAD,GAAS,GAAGK,GAAO;AAAA,QACxCK,EAAW,EAAE,SAAAV,GAAS,GAAGK,GAAO;AAAA,QAChCM,EAAW,EAAE,SAAAX,GAAS,GAAGK,GAAO;AAAA,QAChCF;AAAA,MACJ;AAAA,MACC,GAAGE;AAAA,MACJ,SAAS,CAACO,MAAU;;AAGhB,SAAAC,IAAAR,EAAM,YAAN,QAAAQ,EAAA,KAAAR,GAAgBO,IAChBR,KAAA,QAAAA,EAAUQ;AAAA,MACd;AAAA,MAEC,UAAAd;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}
@@ -0,0 +1,16 @@
1
+ const o = "_root_1t27u_5", t = "_header_1t27u_48", e = "_body_1t27u_68", _ = "_footer_1t27u_86", s = "_close_1t27u_106", r = {
2
+ root: o,
3
+ header: t,
4
+ body: e,
5
+ footer: _,
6
+ close: s
7
+ };
8
+ export {
9
+ e as body,
10
+ s as close,
11
+ r as default,
12
+ _ as footer,
13
+ t as header,
14
+ o as root
15
+ };
16
+ //# sourceMappingURL=fondue-components40.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components40.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -0,0 +1,8 @@
1
+ const o = "_root_18x5z_5", t = {
2
+ root: o
3
+ };
4
+ export {
5
+ t as default,
6
+ o as root
7
+ };
8
+ //# sourceMappingURL=fondue-components41.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components41.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
@@ -0,0 +1,38 @@
1
+ import { sv as t } from "./fondue-components24.js";
2
+ const i = t({
3
+ base: "tw-relative tw-w-full tw-overflow-hidden",
4
+ variants: {
5
+ rounded: {
6
+ true: "tw-rounded"
7
+ },
8
+ size: {
9
+ small: "tw-h-1",
10
+ medium: "tw-h-2",
11
+ large: "tw-h-3",
12
+ "x-large": "tw-h-4"
13
+ },
14
+ variant: {
15
+ default: "tw-bg-box-selected",
16
+ positive: "tw-bg-box-positive",
17
+ negative: "tw-bg-box-negative"
18
+ }
19
+ }
20
+ }), a = t({
21
+ base: "tw-h-full tw-w-full",
22
+ variants: {
23
+ variant: {
24
+ default: "tw-bg-text-interactive",
25
+ positive: "tw-bg-text-positive",
26
+ negative: "tw-bg-text-negative"
27
+ },
28
+ indeterminateState: {
29
+ true: "tw-animate-loading-bar-infinite tw-origin-left-right",
30
+ false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
31
+ }
32
+ }
33
+ });
34
+ export {
35
+ i as loadingBarContainerStyles,
36
+ a as loadingBarStyles
37
+ };
38
+ //# sourceMappingURL=fondue-components42.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components42.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n base: 'tw-relative tw-w-full tw-overflow-hidden',\n variants: {\n rounded: {\n true: 'tw-rounded',\n },\n size: {\n small: 'tw-h-1',\n medium: 'tw-h-2',\n large: 'tw-h-3',\n 'x-large': 'tw-h-4',\n },\n variant: {\n default: 'tw-bg-box-selected',\n positive: 'tw-bg-box-positive',\n negative: 'tw-bg-box-negative',\n },\n },\n});\n\nexport const loadingBarStyles = sv({\n base: 'tw-h-full tw-w-full',\n variants: {\n variant: {\n default: 'tw-bg-text-interactive',\n positive: 'tw-bg-text-positive',\n negative: 'tw-bg-text-negative',\n },\n indeterminateState: {\n true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n },\n },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}
@@ -0,0 +1,8 @@
1
+ const o = "_root_11d5e_5", t = {
2
+ root: o
3
+ };
4
+ export {
5
+ t as default,
6
+ o as root
7
+ };
8
+ //# sourceMappingURL=fondue-components43.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components43.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
@@ -0,0 +1,28 @@
1
+ import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
2
+ const U = ({
3
+ prop: e,
4
+ defaultProp: n,
5
+ onChange: s = () => {
6
+ }
7
+ }) => {
8
+ const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
9
+ (l) => {
10
+ if (t) {
11
+ const u = typeof l == "function" ? l(e) : l;
12
+ u !== e && r(u);
13
+ } else
14
+ c(l);
15
+ },
16
+ [t, e, c, r]
17
+ );
18
+ return [i, a];
19
+ }, b = ({ defaultProp: e, onChange: n }) => {
20
+ const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
21
+ return m(() => {
22
+ c.current !== o && (t == null || t(o), c.current = o);
23
+ }, [o, c, t]), s;
24
+ };
25
+ export {
26
+ U as useControllableState
27
+ };
28
+ //# sourceMappingURL=fondue-components44.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components44.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n prop?: TValue;\n defaultProp?: TValue;\n onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n prop,\n defaultProp,\n onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n const isControlled = prop !== undefined;\n const value = isControlled ? prop : uncontrolledProp;\n const handleChange = useMemo(() => onChange, [onChange]);\n\n const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n (nextValue) => {\n if (isControlled) {\n const setter = nextValue as SetStateFn<TValue>;\n const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n if (value !== prop) {\n handleChange(value as TValue);\n }\n } else {\n setUncontrolledProp(nextValue);\n }\n },\n [isControlled, prop, setUncontrolledProp, handleChange],\n );\n\n return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n const uncontrolledState = useState<TValue | undefined>(defaultProp);\n const [value] = uncontrolledState;\n const prevValueRef = useRef(value);\n const handleChange = useMemo(() => onChange, [onChange]);\n\n useEffect(() => {\n if (prevValueRef.current !== value) {\n handleChange?.(value as TValue);\n prevValueRef.current = value;\n }\n }, [value, prevValueRef, handleChange]);\n\n return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAGnD,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}
@@ -0,0 +1,20 @@
1
+ const t = "_root_1b6uw_5", e = "_item_1b6uw_25", a = "_itemLabel_1b6uw_45", i = "_itemLabelActive_1b6uw_64", o = "_itemLabelInactive_1b6uw_87", _ = "_activeIndicator_1b6uw_111", c = "_separator_1b6uw_202", b = {
2
+ root: t,
3
+ item: e,
4
+ itemLabel: a,
5
+ itemLabelActive: i,
6
+ itemLabelInactive: o,
7
+ activeIndicator: _,
8
+ separator: c
9
+ };
10
+ export {
11
+ _ as activeIndicator,
12
+ b as default,
13
+ e as item,
14
+ a as itemLabel,
15
+ i as itemLabelActive,
16
+ o as itemLabelInactive,
17
+ t as root,
18
+ c as separator
19
+ };
20
+ //# sourceMappingURL=fondue-components45.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components45.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,14 @@
1
+ const t = "_root_cpzhx_5", c = "_thumb_cpzhx_16", o = "_track_cpzhx_20", _ = "_range_cpzhx_27", r = {
2
+ root: t,
3
+ thumb: c,
4
+ track: o,
5
+ range: _
6
+ };
7
+ export {
8
+ r as default,
9
+ _ as range,
10
+ t as root,
11
+ c as thumb,
12
+ o as track
13
+ };
14
+ //# sourceMappingURL=fondue-components46.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components46.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -0,0 +1,16 @@
1
+ const s = "_root_3rs89_5", t = "_small_3rs89_27", _ = "_medium_3rs89_31", o = "_large_3rs89_35", m = "_thumb_3rs89_49", r = {
2
+ root: s,
3
+ small: t,
4
+ medium: _,
5
+ large: o,
6
+ thumb: m
7
+ };
8
+ export {
9
+ r as default,
10
+ o as large,
11
+ _ as medium,
12
+ s as root,
13
+ t as small,
14
+ m as thumb
15
+ };
16
+ //# sourceMappingURL=fondue-components47.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components47.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
@@ -0,0 +1,133 @@
1
+ import { jsxs as u, jsx as t } from "react/jsx-runtime";
2
+ import { IconCaretDown as z, IconCheckMark as j, IconExclamationMarkTriangle as H } from "@frontify/fondue-icons";
3
+ import * as x from "@radix-ui/react-popover";
4
+ import { Slot as $ } from "@radix-ui/react-slot";
5
+ import { useCombobox as A } from "downshift";
6
+ import { forwardRef as E, useRef as q, useMemo as G } from "react";
7
+ import { SelectMenu as J } from "./fondue-components50.js";
8
+ import o from "./fondue-components52.js";
9
+ import { useSelectData as K } from "./fondue-components53.js";
10
+ const w = ({
11
+ children: I,
12
+ onSelect: m,
13
+ value: N,
14
+ defaultValue: S,
15
+ placeholder: R = "",
16
+ status: a = "neutral",
17
+ disabled: d,
18
+ "aria-label": B,
19
+ "data-test-id": l = "fondue-select-combobox"
20
+ }, M) => {
21
+ const { inputSlots: F, menuSlots: L, items: s, filterText: P, clearButton: p, getItemByValue: f, setFilterText: k } = K(I), {
22
+ getInputProps: n,
23
+ getToggleButtonProps: v,
24
+ getMenuProps: O,
25
+ getItemProps: y,
26
+ reset: g,
27
+ selectedItem: c,
28
+ isOpen: D,
29
+ highlightedIndex: T,
30
+ inputValue: i
31
+ } = A({
32
+ items: s,
33
+ selectedItem: f(N),
34
+ defaultSelectedItem: f(S),
35
+ defaultHighlightedIndex: 0,
36
+ onSelectedItemChange: ({ selectedItem: e }) => {
37
+ m && m(e.value);
38
+ },
39
+ onInputValueChange: ({ inputValue: e }) => {
40
+ k(e);
41
+ },
42
+ itemToString: (e) => e ? e.label : ""
43
+ }), r = q(!1), h = G(
44
+ () => !s.find((e) => e.label.toLowerCase().includes(i.toLowerCase())),
45
+ [i, s]
46
+ ), V = (e) => {
47
+ var b, C;
48
+ e.target.dataset.showFocusRing = "false", r.current = !1, (c == null ? void 0 : c.label.toLocaleLowerCase()) !== i.toLocaleLowerCase() && g(), n().onBlur && ((C = (b = n()).onBlur) == null || C.call(b, e));
49
+ };
50
+ return /* @__PURE__ */ u(x.Root, { open: D, children: [
51
+ /* @__PURE__ */ t(x.Anchor, { asChild: !0, children: /* @__PURE__ */ u("div", { ref: M, className: o.root, "data-status": h ? "error" : a, children: [
52
+ /* @__PURE__ */ t(
53
+ "input",
54
+ {
55
+ ...n({
56
+ "aria-label": B
57
+ }),
58
+ "data-test-id": l,
59
+ placeholder: R,
60
+ className: o.input,
61
+ disabled: d,
62
+ onMouseDown: (e) => {
63
+ r.current = !0, e.currentTarget.dataset.showFocusRing = "false";
64
+ },
65
+ onFocus: (e) => {
66
+ r.current || (e.target.dataset.showFocusRing = "true");
67
+ },
68
+ onBlur: V
69
+ }
70
+ ),
71
+ F,
72
+ p && /* @__PURE__ */ t(
73
+ $,
74
+ {
75
+ onClick: (e) => {
76
+ e.stopPropagation(), g();
77
+ },
78
+ className: o.clear,
79
+ role: "button",
80
+ children: p
81
+ }
82
+ ),
83
+ /* @__PURE__ */ u("div", { className: o.icons, children: [
84
+ /* @__PURE__ */ t(
85
+ "button",
86
+ {
87
+ ...v(),
88
+ type: "button",
89
+ "aria-label": "toggle menu",
90
+ disabled: d,
91
+ onMouseDown: () => {
92
+ r.current = !0;
93
+ },
94
+ children: /* @__PURE__ */ t(z, { size: 16, className: o.caret })
95
+ }
96
+ ),
97
+ a === "success" ? /* @__PURE__ */ t(
98
+ j,
99
+ {
100
+ size: 16,
101
+ className: o.iconSuccess,
102
+ "data-test-id": `${l}-success-icon`
103
+ }
104
+ ) : null,
105
+ h || a === "error" ? /* @__PURE__ */ t(
106
+ H,
107
+ {
108
+ size: 16,
109
+ className: o.iconError,
110
+ "data-test-id": `${l}-error-icon`
111
+ }
112
+ ) : null
113
+ ] })
114
+ ] }) }),
115
+ /* @__PURE__ */ t(
116
+ J,
117
+ {
118
+ highlightedIndex: T,
119
+ filterText: P,
120
+ getMenuProps: O,
121
+ getItemProps: y,
122
+ children: L
123
+ }
124
+ )
125
+ ] });
126
+ };
127
+ w.displayName = "Select.Combobox";
128
+ const oe = E(w);
129
+ export {
130
+ oe as ForwardedRefCombobox,
131
+ w as SelectCombobox
132
+ };
133
+ //# sourceMappingURL=fondue-components48.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components48.js","sources":["../src/components/Select/Combobox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useCombobox } from 'downshift';\nimport { type FocusEvent, forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { SelectMenu } from './SelectMenu';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type ComboboxProps = {\n /**\n * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n */\n children?: ReactNode;\n /**\n * Callback function that is called when an item is selected.\n */\n onSelect?: (selectedValue: string) => void;\n /**\n * The active value in the combobox component. This is used to control the combobox externally.\n */\n value?: string;\n /**\n * The default value of the combobox component. Used for uncontrolled usages.\n */\n defaultValue?: string;\n /**\n * The placeholder in the combobox component.\n */\n placeholder?: string;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error';\n /**\n * Disables the combobox component.\n */\n disabled?: boolean;\n /**\n * The aria label of the combobox component.\n */\n 'aria-label'?: string;\n /**\n * The data test id of the select component.\n */\n 'data-test-id'?: string;\n};\n\nexport const SelectCombobox = (\n {\n children,\n onSelect,\n value,\n defaultValue,\n placeholder = '',\n status = 'neutral',\n disabled,\n 'aria-label': ariaLabel,\n 'data-test-id': dataTestId = 'fondue-select-combobox',\n }: ComboboxProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n const { inputSlots, menuSlots, items, filterText, clearButton, getItemByValue, setFilterText } =\n useSelectData(children);\n\n const {\n getInputProps,\n getToggleButtonProps,\n getMenuProps,\n getItemProps,\n reset,\n selectedItem,\n isOpen,\n highlightedIndex,\n inputValue,\n } = useCombobox({\n items,\n selectedItem: getItemByValue(value),\n defaultSelectedItem: getItemByValue(defaultValue),\n defaultHighlightedIndex: 0,\n onSelectedItemChange: ({ selectedItem }) => {\n onSelect && onSelect(selectedItem.value);\n },\n onInputValueChange: ({ inputValue }) => {\n setFilterText(inputValue);\n },\n itemToString: (item) => (item ? item.label : ''),\n });\n\n const wasClicked = useRef(false);\n\n const valueInvalid = useMemo(\n () => !items.find((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())),\n [inputValue, items],\n );\n\n const onBlurHandler = (blurEvent: FocusEvent<HTMLInputElement, Element>) => {\n blurEvent.target.dataset.showFocusRing = 'false';\n wasClicked.current = false;\n\n const selectedItemNullOrOutdated = selectedItem?.label.toLocaleLowerCase() !== inputValue.toLocaleLowerCase();\n\n if (selectedItemNullOrOutdated) {\n // if there is no selection or\n // the existing selected value is not the same as the input value (old),\n // reset the input\n reset();\n }\n\n if (getInputProps().onBlur) {\n getInputProps().onBlur?.(blurEvent);\n }\n };\n\n return (\n <RadixPopover.Root open={isOpen}>\n <RadixPopover.Anchor asChild>\n <div ref={forwardedRef} className={styles.root} data-status={valueInvalid ? 'error' : status}>\n <input\n {...getInputProps({\n 'aria-label': ariaLabel,\n })}\n data-test-id={dataTestId}\n placeholder={placeholder}\n className={styles.input}\n disabled={disabled}\n onMouseDown={(mouseEvent) => {\n wasClicked.current = true;\n mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n }}\n onFocus={(focusEvent) => {\n if (!wasClicked.current) {\n focusEvent.target.dataset.showFocusRing = 'true';\n }\n }}\n onBlur={onBlurHandler}\n />\n {inputSlots}\n {clearButton && (\n <RadixSlot\n onClick={(event) => {\n event.stopPropagation();\n reset();\n }}\n className={styles.clear}\n role=\"button\"\n >\n {clearButton}\n </RadixSlot>\n )}\n <div className={styles.icons}>\n <button\n {...getToggleButtonProps()}\n type=\"button\"\n aria-label=\"toggle menu\"\n disabled={disabled}\n onMouseDown={() => {\n wasClicked.current = true;\n }}\n >\n <IconCaretDown size={16} className={styles.caret} />\n </button>\n {status === 'success' ? (\n <IconCheckMark\n size={16}\n className={styles.iconSuccess}\n data-test-id={`${dataTestId}-success-icon`}\n />\n ) : null}\n {valueInvalid || status === 'error' ? (\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n />\n ) : null}\n </div>\n </div>\n </RadixPopover.Anchor>\n\n <SelectMenu\n highlightedIndex={highlightedIndex}\n filterText={filterText}\n getMenuProps={getMenuProps}\n getItemProps={getItemProps}\n >\n {menuSlots}\n </SelectMenu>\n </RadixPopover.Root>\n );\n};\nSelectCombobox.displayName = 'Select.Combobox';\n\nexport const ForwardedRefCombobox = forwardRef<HTMLDivElement, ComboboxProps>(SelectCombobox);\n"],"names":["SelectCombobox","children","onSelect","value","defaultValue","placeholder","status","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","filterText","clearButton","getItemByValue","setFilterText","useSelectData","getInputProps","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","inputValue","useCombobox","item","wasClicked","useRef","valueInvalid","useMemo","onBlurHandler","blurEvent","_b","_a","jsxs","RadixPopover","jsx","styles","mouseEvent","focusEvent","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefCombobox","forwardRef"],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ import { jsx as d } from "react/jsx-runtime";
2
+ import { forwardRef as o } from "react";
3
+ import c from "./fondue-components52.js";
4
+ const a = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ d("li", { "data-test-id": t, ref: r, ...e, children: e.children });
5
+ a.displayName = "Select.Item";
6
+ const n = o(a), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ d("div", { "data-test-id": r, className: c.group, ref: s, children: t }, e);
7
+ m.displayName = "Select.Group";
8
+ const p = o(m);
9
+ export {
10
+ n as ForwardedRefSelectItem,
11
+ p as ForwardedRefSelectItemGroup,
12
+ a as SelectItem,
13
+ m as SelectItemGroup
14
+ };
15
+ //# sourceMappingURL=fondue-components49.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fondue-components49.js","sources":["../src/components/Select/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectItemProps = {\n /**\n * The value of the select item.\n */\n value: string;\n /**\n * The data test id of the select item.\n */\n 'data-test-id'?: string;\n} & (\n | {\n /**\n * The label of the select item. Required when the child is not a string.\n */\n label: string;\n /**\n * The children of the select item. This can be a custom component or a string.\n */\n children?: ReactNode;\n }\n | {\n label?: string;\n children: string;\n }\n);\n\nexport const SelectItem = (\n { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n return (\n <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n {props.children}\n </li>\n );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n /**\n * The children of the select item group. This can contain multiple `Select.Item` components.\n */\n children: ReactNode;\n /**\n * The internal group ID of the select item group.\n */\n groupId: string;\n /**\n * The data test id of the select item group.\n */\n 'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n { children, groupId, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n {children}\n </div>\n );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","styles","ForwardedRefSelectItemGroup"],"mappings":";;;AAgCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,MAGI,gBAAAC,EAAC,QAAG,gBAAcH,GAAY,KAAKE,GAAe,GAAGD,GAChD,UAAAA,EAAM,SACX,CAAA;AAGRF,EAAW,cAAc;AAEZ,MAAAK,IAAyBC,EAA2CN,CAAU,GAiB9EO,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBR,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWS,EAAO,OAAO,KAAKP,GACxD,UAAAK,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAI,IAA8BL,EAAiDC,CAAe;"}