@frontify/fondue 12.0.0-beta.136 → 12.0.0-beta.137
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/components/FieldsetHeader/FieldsetHeader.es.js +6 -6
- package/dist/components/FieldsetHeader/FieldsetHeader.es.js.map +1 -1
- package/dist/components/Switch/Switch.d.ts +1 -2
- package/dist/components/Switch/Switch.es.js +23 -29
- package/dist/components/Switch/Switch.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import { IconSize as d } from "../../foundation/Icon/IconSize.es.js";
|
|
|
6
6
|
import D from "../../foundation/Icon/Generated/IconMinus.es.js";
|
|
7
7
|
import k from "../../foundation/Icon/Generated/IconPlus.es.js";
|
|
8
8
|
import A from "../../foundation/Icon/Generated/IconCaretDown.es.js";
|
|
9
|
-
const
|
|
9
|
+
const M = "accordion-icon-container", g = "addremove-icon-container";
|
|
10
10
|
var v = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Medium = "Medium", t.Large = "Large", t))(v || {});
|
|
11
11
|
const l = {
|
|
12
12
|
Small: {
|
|
@@ -22,7 +22,7 @@ const l = {
|
|
|
22
22
|
Large: {
|
|
23
23
|
icon: d.Size20,
|
|
24
24
|
text: "tw-text-l",
|
|
25
|
-
switch: w.
|
|
25
|
+
switch: w.Medium
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
var O = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Switch = "Switch", t.Accordion = "Accordion", t.AddRemove = "AddRemove", t))(O || {});
|
|
@@ -38,7 +38,7 @@ const R = (t, i, a, n, e) => {
|
|
|
38
38
|
return /* @__PURE__ */ r.createElement("div", { "data-test-id": "fieldset-icon-wrapper" }, /* @__PURE__ */ r.createElement(
|
|
39
39
|
"div",
|
|
40
40
|
{
|
|
41
|
-
"data-test-id":
|
|
41
|
+
"data-test-id": M,
|
|
42
42
|
className: m([
|
|
43
43
|
"tw-transition-transform",
|
|
44
44
|
n && "tw-rotate-180 tw-duration-300",
|
|
@@ -53,7 +53,7 @@ const R = (t, i, a, n, e) => {
|
|
|
53
53
|
return /* @__PURE__ */ r.createElement("div", { "data-test-id": "fieldset-icon-wrapper" }, /* @__PURE__ */ r.createElement(
|
|
54
54
|
"div",
|
|
55
55
|
{
|
|
56
|
-
"data-test-id":
|
|
56
|
+
"data-test-id": g,
|
|
57
57
|
className: m([
|
|
58
58
|
n && !e && "tw-text-black",
|
|
59
59
|
!n && !e && "tw-text-black-80",
|
|
@@ -114,8 +114,8 @@ const R = (t, i, a, n, e) => {
|
|
|
114
114
|
};
|
|
115
115
|
_.displayName = "FondueFieldsetHeader";
|
|
116
116
|
export {
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
M as ACCORDION_ICON_CONTAINER_ID,
|
|
118
|
+
g as ADDREMOVE_ICON_CONTAINER_ID,
|
|
119
119
|
_ as FieldsetHeader,
|
|
120
120
|
v as FieldsetHeaderSize,
|
|
121
121
|
O as FieldsetHeaderType,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon';\n\nexport const ACCORDION_ICON_CONTAINER_ID = 'accordion-icon-container';\n\nexport const ADDREMOVE_ICON_CONTAINER_ID = 'addremove-icon-container';\n\nexport enum FieldsetHeaderSize {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n [FieldsetHeaderSize.Small]: {\n icon: IconSize.Size12,\n text: 'tw-text-s',\n switch: SwitchSize.Small,\n },\n [FieldsetHeaderSize.Medium]: {\n icon: IconSize.Size16,\n text: 'tw-text-m',\n switch: SwitchSize.Medium,\n },\n [FieldsetHeaderSize.Large]: {\n icon: IconSize.Size20,\n text: 'tw-text-l',\n switch: SwitchSize.
|
|
1
|
+
{"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon';\n\nexport const ACCORDION_ICON_CONTAINER_ID = 'accordion-icon-container';\n\nexport const ADDREMOVE_ICON_CONTAINER_ID = 'addremove-icon-container';\n\nexport enum FieldsetHeaderSize {\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n [FieldsetHeaderSize.Small]: {\n icon: IconSize.Size12,\n text: 'tw-text-s',\n switch: SwitchSize.Small,\n },\n [FieldsetHeaderSize.Medium]: {\n icon: IconSize.Size16,\n text: 'tw-text-m',\n switch: SwitchSize.Medium,\n },\n [FieldsetHeaderSize.Large]: {\n icon: IconSize.Size20,\n text: 'tw-text-l',\n switch: SwitchSize.Medium,\n },\n};\n\nexport enum FieldsetHeaderType {\n Default = 'Default',\n Switch = 'Switch',\n Accordion = 'Accordion',\n AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n size?: FieldsetHeaderSize;\n active?: boolean;\n decorator?: ReactNode;\n type?: FieldsetHeaderType;\n disabled?: boolean;\n bold?: boolean;\n children: string;\n onClick?: () => void;\n as?: keyof JSX.IntrinsicElements;\n tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n type: FieldsetHeaderType,\n id: string,\n size: FieldsetHeaderSize,\n active: boolean,\n disabled: boolean,\n) => {\n const props = {\n 'aria-labelledby': id,\n size: sizeMap[size].icon,\n };\n\n switch (type) {\n case FieldsetHeaderType.Switch:\n return (\n <div data-test-id=\"fieldset-icon-wrapper\">\n <Switch {...props} size={sizeMap[size].switch} on={active} disabled={disabled} />\n </div>\n );\n case FieldsetHeaderType.Accordion:\n return (\n <div data-test-id=\"fieldset-icon-wrapper\">\n <div\n data-test-id={ACCORDION_ICON_CONTAINER_ID}\n className={merge([\n 'tw-transition-transform',\n active && 'tw-rotate-180 tw-duration-300',\n !disabled && active && 'tw-text-black',\n !disabled && !active && 'tw-text-black-80',\n disabled && 'tw-text-black-40',\n ])}\n >\n <IconCaretDown {...props} />\n </div>\n </div>\n );\n case FieldsetHeaderType.AddRemove:\n return (\n <div data-test-id=\"fieldset-icon-wrapper\">\n <div\n data-test-id={ADDREMOVE_ICON_CONTAINER_ID}\n className={merge([\n active && !disabled && 'tw-text-black',\n !active && !disabled && 'tw-text-black-80',\n disabled && 'tw-text-black-40',\n ])}\n >\n {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n </div>\n </div>\n );\n }\n\n return null;\n};\n\nexport const FieldsetHeader: FC<FieldsetHeaderProps> = ({\n size = FieldsetHeaderSize.Large,\n active = true,\n decorator,\n type = FieldsetHeaderType.Default,\n disabled = false,\n bold = true,\n children,\n onClick,\n as: Heading = 'label',\n tabIndex = -1,\n}) => {\n const id = useMemoizedId();\n const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n let headingFontWeightClass = 'tw-font-normal';\n if (bold) {\n headingFontWeightClass = 'tw-font-bold';\n } else if (size === FieldsetHeaderSize.Medium) {\n headingFontWeightClass = 'tw-font-medium';\n }\n\n return (\n <header\n data-test-id=\"fieldset-header\"\n role={onClick ? 'button' : undefined}\n onClick={clickOnNotDisabled}\n onKeyPress={clickOnNotDisabled}\n className={merge([\n 'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n ])}\n tabIndex={tabIndex}\n >\n {isValidElement(decorator) && (\n <span className=\"tw-shrink-0\">\n {cloneElement(decorator as ReactElement<IconProps>, {\n size: sizeMap[size].icon,\n })}\n </span>\n )}\n <Heading\n id={id}\n className={merge([\n 'tw-text-left',\n sizeMap[size].text,\n headingFontWeightClass,\n onClick && 'hover:tw-cursor-pointer',\n ])}\n >\n {children}\n </Heading>\n {type !== FieldsetHeaderType.Default && (\n <span data-test-id=\"fieldset-icon-container\" className=\"tw-ml-auto tw-shrink-0\">\n {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n </span>\n )}\n </header>\n );\n};\nFieldsetHeader.displayName = 'FondueFieldsetHeader';\n"],"names":["ACCORDION_ICON_CONTAINER_ID","ADDREMOVE_ICON_CONTAINER_ID","FieldsetHeaderSize","sizeMap","IconSize","SwitchSize","FieldsetHeaderType","renderFieldsetHeaderIconType","type","id","size","active","disabled","props","React","Switch","merge","IconCaretDown","IconMinus","IconPlus","FieldsetHeader","decorator","bold","children","onClick","Heading","tabIndex","useMemoizedId","clickOnNotDisabled","headingFontWeightClass","isValidElement","cloneElement"],"mappings":"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"}
|
|
@@ -3,8 +3,7 @@ import { InputLabelTooltipProps } from '../InputLabel/InputLabel';
|
|
|
3
3
|
export declare const SWITCH_ID = "switch-container";
|
|
4
4
|
export declare enum SwitchSize {
|
|
5
5
|
Small = "Small",
|
|
6
|
-
Medium = "Medium"
|
|
7
|
-
Large = "Large"
|
|
6
|
+
Medium = "Medium"
|
|
8
7
|
}
|
|
9
8
|
export type SwitchProps = {
|
|
10
9
|
id?: string;
|
|
@@ -3,13 +3,12 @@ import { merge as n } from "../../utilities/merge.es.js";
|
|
|
3
3
|
import { useFocusRing as k } from "@react-aria/focus";
|
|
4
4
|
import { FOCUS_STYLE as M } from "../../utilities/focusStyle.es.js";
|
|
5
5
|
import { useMemoizedId as E } from "../../hooks/useMemoizedId.es.js";
|
|
6
|
-
import { InputLabel as
|
|
7
|
-
const
|
|
8
|
-
var
|
|
9
|
-
const
|
|
6
|
+
import { InputLabel as F } from "../InputLabel/InputLabel.es.js";
|
|
7
|
+
const N = "switch-container";
|
|
8
|
+
var T = /* @__PURE__ */ ((a) => (a.Small = "Small", a.Medium = "Medium", a))(T || {});
|
|
9
|
+
const W = {
|
|
10
10
|
Small: "tw-w-[22px] tw-h-3",
|
|
11
|
-
Medium: "tw-w-[30px] tw-h-4"
|
|
12
|
-
Large: "tw-w-[38px] tw-h-5"
|
|
11
|
+
Medium: "tw-w-[30px] tw-h-4"
|
|
13
12
|
}, w = {
|
|
14
13
|
Small: {
|
|
15
14
|
dimensions: "tw-w-3 tw-h-3",
|
|
@@ -20,50 +19,45 @@ const F = {
|
|
|
20
19
|
dimensions: "tw-w-4 tw-h-4",
|
|
21
20
|
activeWidth: "group-active:tw-w-[18px]",
|
|
22
21
|
activeTranslation: "tw-translate-x-[13px]"
|
|
23
|
-
},
|
|
24
|
-
Large: {
|
|
25
|
-
dimensions: "tw-w-5 tw-h-5",
|
|
26
|
-
activeWidth: "group-active:tw-w-[22px]",
|
|
27
|
-
activeTranslation: "tw-translate-x-[17px]"
|
|
28
22
|
}
|
|
29
|
-
},
|
|
30
|
-
id:
|
|
31
|
-
name:
|
|
23
|
+
}, I = ({
|
|
24
|
+
id: a,
|
|
25
|
+
name: p,
|
|
32
26
|
label: c,
|
|
33
|
-
disabled:
|
|
27
|
+
disabled: s,
|
|
34
28
|
onChange: x,
|
|
35
29
|
size: t = "Medium",
|
|
36
30
|
on: e = !1,
|
|
37
31
|
hug: m = !1,
|
|
38
32
|
tooltip: v
|
|
39
33
|
}) => {
|
|
40
|
-
const d = E(
|
|
34
|
+
const d = E(a), { isFocusVisible: u, focusProps: C } = k(), f = i(() => n(["tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors", s ? "tw-bg-box-disabled tw-border-line tw-pointer-events-none" : e ? "tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text" : "tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover", W[t], u && M]), [e, s, t, u]), g = i(() => {
|
|
41
35
|
const o = "tw-relative tw-self-center tw-transition-transform", l = e && w[t].activeTranslation;
|
|
42
36
|
return n([o, w[t].dimensions, l]);
|
|
43
37
|
}, [e, t]), h = i(() => {
|
|
44
|
-
const o = "tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75", l = e ? "tw-right-0" : "tw-left-0 -tw-translate-x-px",
|
|
45
|
-
return n([o, w[t].dimensions, l,
|
|
46
|
-
}, [e,
|
|
47
|
-
return /* @__PURE__ */ r.createElement("div", { className: S, "data-test-id":
|
|
38
|
+
const o = "tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75", l = e ? "tw-right-0" : "tw-left-0 -tw-translate-x-px", b = s ? "tw-border-line-strong" : n(["tw-bg-base tw-border-line-xx-strong", w[t].activeWidth]);
|
|
39
|
+
return n([o, w[t].dimensions, l, b]);
|
|
40
|
+
}, [e, s, t]), S = i(() => n(["tw-gap-2 tw-items-center tw-justify-between", m ? "tw-inline-flex" : "tw-flex"]), [m]);
|
|
41
|
+
return /* @__PURE__ */ r.createElement("div", { className: S, "data-test-id": N }, c && /* @__PURE__ */ r.createElement(F, { clickable: !0, htmlFor: d, disabled: s, tooltip: v }, c), /* @__PURE__ */ r.createElement(
|
|
48
42
|
"button",
|
|
49
43
|
{
|
|
50
|
-
...
|
|
44
|
+
...C,
|
|
51
45
|
id: d,
|
|
52
|
-
disabled:
|
|
53
|
-
name:
|
|
46
|
+
disabled: s,
|
|
47
|
+
name: p,
|
|
54
48
|
"data-test-id": "switch",
|
|
55
|
-
className:
|
|
49
|
+
className: f,
|
|
56
50
|
value: e.toString(),
|
|
57
51
|
onClick: x,
|
|
58
52
|
type: "button"
|
|
59
53
|
},
|
|
60
|
-
/* @__PURE__ */ r.createElement("div", { className:
|
|
54
|
+
/* @__PURE__ */ r.createElement("div", { className: g }, /* @__PURE__ */ r.createElement("div", { className: h }))
|
|
61
55
|
));
|
|
62
56
|
};
|
|
63
|
-
|
|
57
|
+
I.displayName = "FondueSwitch";
|
|
64
58
|
export {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
59
|
+
N as SWITCH_ID,
|
|
60
|
+
I as Switch,
|
|
61
|
+
T as SwitchSize
|
|
68
62
|
};
|
|
69
63
|
//# sourceMappingURL=Switch.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, MouseEvent, useMemo } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\n\nexport const SWITCH_ID = 'switch-container';\n\nexport enum SwitchSize {\n Small = 'Small',\n Medium = 'Medium',\n
|
|
1
|
+
{"version":3,"file":"Switch.es.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, MouseEvent, useMemo } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\n\nexport const SWITCH_ID = 'switch-container';\n\nexport enum SwitchSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nconst trackSizeClasses: Record<SwitchSize, string> = {\n [SwitchSize.Small]: 'tw-w-[22px] tw-h-3',\n [SwitchSize.Medium]: 'tw-w-[30px] tw-h-4',\n};\n\nconst dotSizeClasses: Record<SwitchSize, Record<'dimensions' | 'activeWidth' | 'activeTranslation', string>> = {\n [SwitchSize.Small]: {\n dimensions: 'tw-w-3 tw-h-3',\n activeWidth: 'group-active:tw-w-[14px]',\n activeTranslation: 'tw-translate-x-[9px]',\n },\n [SwitchSize.Medium]: {\n dimensions: 'tw-w-4 tw-h-4',\n activeWidth: 'group-active:tw-w-[18px]',\n activeTranslation: 'tw-translate-x-[13px]',\n },\n};\n\nexport type SwitchProps = {\n id?: string;\n on?: boolean;\n disabled?: boolean;\n label?: string;\n name?: string;\n size?: SwitchSize;\n hug?: boolean;\n tooltip?: InputLabelTooltipProps;\n onChange?: (e: MouseEvent) => void;\n};\n\nexport const Switch: FC<SwitchProps> = ({\n id: propId,\n name,\n label,\n disabled,\n onChange,\n size = SwitchSize.Medium,\n on = false,\n hug = false,\n tooltip,\n}) => {\n const id = useMemoizedId(propId);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n // The track on which the dot moves\n const trackClasses = useMemo(() => {\n const baseClasses = 'tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors';\n\n const valueClasses = on\n ? 'tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text'\n : 'tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover';\n\n const disabledClasses = disabled ? 'tw-bg-box-disabled tw-border-line tw-pointer-events-none' : valueClasses;\n\n return merge([baseClasses, disabledClasses, trackSizeClasses[size], isFocusVisible && FOCUS_STYLE]);\n }, [on, disabled, size, isFocusVisible]);\n\n // Responsible for the left-right translation\n const dotWrapperClasses = useMemo(() => {\n const baseClasses = 'tw-relative tw-self-center tw-transition-transform';\n\n const valueClasses = on && dotSizeClasses[size].activeTranslation;\n\n return merge([baseClasses, dotSizeClasses[size].dimensions, valueClasses]);\n }, [on, size]);\n\n // Responsible for dot styling and width animation on hover\n const dotClasses = useMemo(() => {\n const baseClasses =\n 'tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75';\n\n const valueClasses = on ? 'tw-right-0' : 'tw-left-0 -tw-translate-x-px';\n\n const disabledStateClasses = disabled\n ? 'tw-border-line-strong'\n : merge(['tw-bg-base tw-border-line-xx-strong', dotSizeClasses[size].activeWidth]);\n\n return merge([baseClasses, dotSizeClasses[size].dimensions, valueClasses, disabledStateClasses]);\n }, [on, disabled, size]);\n\n // Wraps the InputLabel instance and switch element\n const containerClasses = useMemo(() => {\n return merge(['tw-gap-2 tw-items-center tw-justify-between', hug ? 'tw-inline-flex' : 'tw-flex']);\n }, [hug]);\n\n return (\n <div className={containerClasses} data-test-id={SWITCH_ID}>\n {label && (\n <InputLabel clickable={true} htmlFor={id} disabled={disabled} tooltip={tooltip}>\n {label}\n </InputLabel>\n )}\n <button\n {...focusProps}\n id={id}\n disabled={disabled}\n name={name}\n data-test-id=\"switch\"\n className={trackClasses}\n value={on.toString()}\n onClick={onChange}\n type=\"button\"\n >\n <div className={dotWrapperClasses}>\n <div className={dotClasses} />\n </div>\n </button>\n </div>\n );\n};\nSwitch.displayName = 'FondueSwitch';\n"],"names":["SWITCH_ID","SwitchSize","trackSizeClasses","dotSizeClasses","Switch","propId","name","label","disabled","onChange","size","on","hug","tooltip","id","useMemoizedId","isFocusVisible","focusProps","useFocusRing","trackClasses","useMemo","merge","FOCUS_STYLE","dotWrapperClasses","baseClasses","valueClasses","dotClasses","disabledStateClasses","containerClasses","React","InputLabel"],"mappings":";;;;;;AASO,MAAMA,IAAY;AAEb,IAAAC,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;AAKZ,MAAMC,IAA+C;AAAA,EAChD,OAAmB;AAAA,EACnB,QAAoB;AACzB,GAEMC,IAAyG;AAAA,EAC1G,OAAmB;AAAA,IAChB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AAAA,EACC,QAAoB;AAAA,IACjB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,mBAAmB;AAAA,EACvB;AACJ,GAcaC,IAA0B,CAAC;AAAA,EACpC,IAAIC;AAAA,EACJ,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,KAAAC,IAAM;AAAA,EACN,SAAAC;AACJ,MAAM;AACI,QAAAC,IAAKC,EAAcV,CAAM,GACzB,EAAE,gBAAAW,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAG9CC,IAAeC,EAAQ,MASlBC,EAAM,CARO,6FAMIb,IAAW,6DAJdG,IACf,8DACA,2EAIsCT,EAAiBQ,CAAI,GAAGM,KAAkBM,CAAW,CAAC,GACnG,CAACX,GAAIH,GAAUE,GAAMM,CAAc,CAAC,GAGjCO,IAAoBH,EAAQ,MAAM;AACpC,UAAMI,IAAc,sDAEdC,IAAed,KAAMR,EAAeO,CAAI,EAAE;AAEzC,WAAAW,EAAM,CAACG,GAAarB,EAAeO,CAAI,EAAE,YAAYe,CAAY,CAAC;AAAA,EAAA,GAC1E,CAACd,GAAID,CAAI,CAAC,GAGPgB,IAAaN,EAAQ,MAAM;AAC7B,UAAMI,IACF,+GAEEC,IAAed,IAAK,eAAe,gCAEnCgB,IAAuBnB,IACvB,0BACAa,EAAM,CAAC,uCAAuClB,EAAeO,CAAI,EAAE,WAAW,CAAC;AAE9E,WAAAW,EAAM,CAACG,GAAarB,EAAeO,CAAI,EAAE,YAAYe,GAAcE,CAAoB,CAAC;AAAA,EAChG,GAAA,CAAChB,GAAIH,GAAUE,CAAI,CAAC,GAGjBkB,IAAmBR,EAAQ,MACtBC,EAAM,CAAC,+CAA+CT,IAAM,mBAAmB,SAAS,CAAC,GACjG,CAACA,CAAG,CAAC;AAER,yCACK,OAAI,EAAA,WAAWgB,GAAkB,gBAAc5B,KAC3CO,KACG,gBAAAsB,EAAA,cAACC,GAAW,EAAA,WAAW,IAAM,SAAShB,GAAI,UAAAN,GAAoB,SAAAK,KACzDN,CACL,GAEJ,gBAAAsB,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGZ;AAAA,MACJ,IAAAH;AAAA,MACA,UAAAN;AAAA,MACA,MAAAF;AAAA,MACA,gBAAa;AAAA,MACb,WAAWa;AAAA,MACX,OAAOR,EAAG,SAAS;AAAA,MACnB,SAASF;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,IAEL,gBAAAoB,EAAA,cAAC,SAAI,WAAWN,EAAA,mCACX,OAAI,EAAA,WAAWG,EAAY,CAAA,CAChC;AAAA,EAAA,CAER;AAER;AACAtB,EAAO,cAAc;"}
|