@frontify/fondue 12.0.0-beta.125 → 12.0.0-beta.126
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.
|
@@ -6,19 +6,19 @@ import { useFocusRing as Y } from "@react-aria/focus";
|
|
|
6
6
|
import { mergeProps as _ } from "@react-aria/utils";
|
|
7
7
|
import { useToggleState as z } from "@react-stately/toggle";
|
|
8
8
|
import { FOCUS_STYLE as A } from "../../utilities/focusStyle.es.js";
|
|
9
|
-
import { merge as
|
|
9
|
+
import { merge as s } from "../../utilities/merge.es.js";
|
|
10
10
|
import { useForwardedRef as B } from "../../utilities/useForwardedRef.es.js";
|
|
11
11
|
import G from "../../foundation/Icon/Generated/IconCheckMark.es.js";
|
|
12
12
|
import H from "../../foundation/Icon/Generated/IconMinus.es.js";
|
|
13
13
|
var J = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(J || {}), Q = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e))(Q || {}), V = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e))(V || {});
|
|
14
14
|
const n = (e) => e === "Checked" || e === "Mixed", X = ({
|
|
15
15
|
id: e,
|
|
16
|
-
emphasis:
|
|
16
|
+
emphasis: d = "Default",
|
|
17
17
|
size: C = "Default",
|
|
18
|
-
disabled:
|
|
19
|
-
required:
|
|
18
|
+
disabled: a,
|
|
19
|
+
required: l,
|
|
20
20
|
label: i,
|
|
21
|
-
hideLabel:
|
|
21
|
+
hideLabel: w,
|
|
22
22
|
tooltip: F,
|
|
23
23
|
helperText: m,
|
|
24
24
|
"aria-label": x = "Checkbox",
|
|
@@ -28,23 +28,23 @@ const n = (e) => e === "Checked" || e === "Mixed", X = ({
|
|
|
28
28
|
state: o = "Unchecked"
|
|
29
29
|
/* Unchecked */
|
|
30
30
|
}, M) => {
|
|
31
|
-
const
|
|
32
|
-
onChange:
|
|
31
|
+
const u = T(e), t = B(M), { focusProps: y } = Y(), I = z({
|
|
32
|
+
onChange: a ? void 0 : L,
|
|
33
33
|
isSelected: o === "Checked"
|
|
34
34
|
/* Checked */
|
|
35
|
-
}), [S,
|
|
36
|
-
|
|
35
|
+
}), [S, b] = E(), [f, U] = E(), g = (c) => {
|
|
36
|
+
c.key === "Tab" && b(!0);
|
|
37
37
|
}, h = () => {
|
|
38
|
-
|
|
38
|
+
b(!1);
|
|
39
39
|
};
|
|
40
40
|
K(() => {
|
|
41
|
-
var
|
|
42
|
-
f || ((
|
|
41
|
+
var c, v, k, p;
|
|
42
|
+
f || ((c = t == null ? void 0 : t.current) == null || c.removeEventListener("keyup", g), (v = t == null ? void 0 : t.current) == null || v.addEventListener("keyup", g), (k = t == null ? void 0 : t.current) == null || k.removeEventListener("blur", h), (p = t == null ? void 0 : t.current) == null || p.addEventListener("blur", h), U(!0));
|
|
43
43
|
}, [f, t]);
|
|
44
44
|
const { inputProps: P } = j(
|
|
45
45
|
{
|
|
46
|
-
isDisabled:
|
|
47
|
-
isRequired:
|
|
46
|
+
isDisabled: a,
|
|
47
|
+
isRequired: l,
|
|
48
48
|
isIndeterminate: o === "Mixed",
|
|
49
49
|
"aria-label": x || i,
|
|
50
50
|
value: N
|
|
@@ -52,66 +52,65 @@ const n = (e) => e === "Checked" || e === "Mixed", X = ({
|
|
|
52
52
|
I,
|
|
53
53
|
t
|
|
54
54
|
);
|
|
55
|
-
return /* @__PURE__ */ r.createElement("div", { className: "tw-
|
|
55
|
+
return /* @__PURE__ */ r.createElement("div", { className: "tw-gap-1 tw-transition-colors", "data-test-id": "checkbox" }, /* @__PURE__ */ r.createElement("div", { className: s(["tw-inline-flex tw-flex-row tw-rounded", S ? A : ""]) }, /* @__PURE__ */ r.createElement(
|
|
56
56
|
O,
|
|
57
57
|
{
|
|
58
|
-
disabled:
|
|
58
|
+
disabled: a,
|
|
59
59
|
clickable: !0,
|
|
60
|
-
htmlFor:
|
|
60
|
+
htmlFor: u,
|
|
61
61
|
tooltip: F ?? void 0,
|
|
62
|
-
required:
|
|
62
|
+
required: l,
|
|
63
63
|
bold: n(o)
|
|
64
64
|
},
|
|
65
65
|
/* @__PURE__ */ r.createElement("span", { className: "tw-flex tw-items-center" }, /* @__PURE__ */ r.createElement("span", { className: "tw-inline-flex tw-mr-1.5" }, /* @__PURE__ */ r.createElement(
|
|
66
66
|
"input",
|
|
67
67
|
{
|
|
68
68
|
..._(D || P, y),
|
|
69
|
-
id:
|
|
69
|
+
id: u,
|
|
70
70
|
ref: t,
|
|
71
71
|
className: "tw-sr-only",
|
|
72
72
|
"data-test-id": "checkbox-input",
|
|
73
73
|
"aria-label": x,
|
|
74
|
-
required:
|
|
74
|
+
required: l
|
|
75
75
|
}
|
|
76
76
|
), /* @__PURE__ */ r.createElement(
|
|
77
77
|
"span",
|
|
78
78
|
{
|
|
79
79
|
"data-test-id": "checkbox-icon-box",
|
|
80
80
|
"aria-hidden": "true",
|
|
81
|
-
className:
|
|
81
|
+
className: s([
|
|
82
82
|
"tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none",
|
|
83
83
|
C === "Default" ? "tw-h-4 tw-w-4" : "tw-h-5 tw-w-5",
|
|
84
|
-
|
|
85
|
-
s ? a([
|
|
84
|
+
a ? s([
|
|
86
85
|
"tw-bg-box-disabled tw-pointer-events-none",
|
|
87
86
|
!n(o) && "tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong",
|
|
88
87
|
n(o) && "tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong"
|
|
89
|
-
]) :
|
|
88
|
+
]) : s([
|
|
90
89
|
!n(o) && "tw-bg-base tw-border-line-xx-strong hover:tw-bg-box-neutral",
|
|
91
|
-
n(o) &&
|
|
92
|
-
n(o) &&
|
|
90
|
+
n(o) && d === "Weak" && "tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover",
|
|
91
|
+
n(o) && d === "Default" && "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover"
|
|
93
92
|
])
|
|
94
93
|
])
|
|
95
94
|
},
|
|
96
95
|
o === "Checked" && /* @__PURE__ */ r.createElement(G, null),
|
|
97
96
|
o === "Mixed" && /* @__PURE__ */ r.createElement(H, null)
|
|
98
|
-
)), /* @__PURE__ */ r.createElement("span", { className: "tw-inline-flex tw-flex-col" }, i && !
|
|
97
|
+
)), /* @__PURE__ */ r.createElement("span", { className: "tw-inline-flex tw-flex-col" }, i && !w && /* @__PURE__ */ r.createElement(
|
|
99
98
|
"span",
|
|
100
99
|
{
|
|
101
100
|
"data-test-id": "checkbox-label",
|
|
102
|
-
className:
|
|
101
|
+
className: s([
|
|
103
102
|
"tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white",
|
|
104
103
|
n(o) ? "tw-font-medium" : ""
|
|
105
104
|
])
|
|
106
105
|
},
|
|
107
106
|
i
|
|
108
|
-
), m && !
|
|
107
|
+
), m && !w && /* @__PURE__ */ r.createElement(
|
|
109
108
|
"span",
|
|
110
109
|
{
|
|
111
110
|
"data-test-id": "checkbox-helper-text",
|
|
112
|
-
className:
|
|
111
|
+
className: s([
|
|
113
112
|
"tw-font-sans tw-text-xs tw-font-normal",
|
|
114
|
-
|
|
113
|
+
a ? "text-disabled" : "tw-text-text-x-weak"
|
|
115
114
|
])
|
|
116
115
|
},
|
|
117
116
|
m
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { IconCheckMark, IconMinus } from '@foundation/Icon/Generated';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react';\n\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\nexport enum CheckboxEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport enum CheckboxSize {\n Default = 'Default',\n Large = 'Large',\n}\n\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n emphasis?: CheckboxEmphasis;\n size?: CheckboxSize;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n hideLabel?: boolean;\n tooltip?: InputLabelTooltipProps;\n helperText?: string;\n 'aria-label'?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n emphasis = CheckboxEmphasis.Default,\n size = CheckboxSize.Default,\n disabled,\n required,\n label,\n hideLabel,\n tooltip,\n helperText,\n 'aria-label': ariaLabel = 'Checkbox',\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n if (!listeningForKeyboardEvents) {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n setListeningForKeyboardEvents(true);\n }\n }, [listeningForKeyboardEvents, inputRef]);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel || label,\n value,\n },\n toggleState,\n inputRef,\n );\n\n return (\n <div className=\"tw-flex tw-flex-col tw-gap-1 tw-transition-colors\" data-test-id=\"checkbox\">\n <div className=\"tw-inline-flex tw-flex-row\">\n <InputLabel\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip ?? undefined}\n required={required}\n bold={isCheckedOrMixed(state)}\n >\n <span className=\"tw-flex tw-items-center\">\n <span className=\"tw-inline-flex tw-mr-1.5\">\n <input\n {...mergeProps(groupInputProps || inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id=\"checkbox-input\"\n aria-label={ariaLabel}\n required={required}\n />\n <span\n data-test-id=\"checkbox-icon-box\"\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none',\n size === 'Default' ? 'tw-h-4 tw-w-4' : 'tw-h-5 tw-w-5',\n showFocus ? FOCUS_STYLE : '',\n disabled\n ? merge([\n 'tw-bg-box-disabled tw-pointer-events-none',\n !isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n ])\n : merge([\n !isCheckedOrMixed(state) &&\n 'tw-bg-base tw-border-line-xx-strong hover:tw-bg-box-neutral',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Weak &&\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Default &&\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover',\n ]),\n ])}\n >\n {state === CheckboxState.Checked && <IconCheckMark />}\n {state === CheckboxState.Mixed && <IconMinus />}\n </span>\n </span>\n <span className=\"tw-inline-flex tw-flex-col\">\n {label && !hideLabel && (\n <span\n data-test-id=\"checkbox-label\"\n className={merge([\n 'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n isCheckedOrMixed(state) ? 'tw-font-medium' : '',\n ])}\n >\n {label}\n </span>\n )}\n {helperText && !hideLabel && (\n <span\n data-test-id=\"checkbox-helper-text\"\n className={merge([\n 'tw-font-sans tw-text-xs tw-font-normal',\n disabled ? 'text-disabled' : 'tw-text-text-x-weak',\n ])}\n >\n {helperText}\n </span>\n )}\n </span>\n </span>\n </InputLabel>\n </div>\n </div>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","React","InputLabel","mergeProps","merge","FOCUS_STYLE","IconCheckMark","IconMinus","Checkbox","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport { IconCheckMark, IconMinus } from '@foundation/Icon/Generated';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport React, { ForwardRefRenderFunction, HTMLAttributes, forwardRef } from 'react';\n\nexport enum CheckboxState {\n Checked = 'Checked',\n Unchecked = 'Unchecked',\n Mixed = 'Mixed',\n}\n\nexport enum CheckboxEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport enum CheckboxSize {\n Default = 'Default',\n Large = 'Large',\n}\n\nexport type CheckboxProps = {\n id?: string;\n state?: CheckboxState;\n emphasis?: CheckboxEmphasis;\n size?: CheckboxSize;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onChange?: (isChecked: boolean) => void;\n label?: string;\n hideLabel?: boolean;\n tooltip?: InputLabelTooltipProps;\n helperText?: string;\n 'aria-label'?: string;\n groupInputProps?: HTMLAttributes<HTMLElement>;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n {\n id: propId,\n emphasis = CheckboxEmphasis.Default,\n size = CheckboxSize.Default,\n disabled,\n required,\n label,\n hideLabel,\n tooltip,\n helperText,\n 'aria-label': ariaLabel = 'Checkbox',\n value,\n groupInputProps,\n onChange,\n state = CheckboxState.Unchecked,\n },\n ref,\n) => {\n const id = useMemoizedId(propId);\n const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n const { focusProps } = useFocusRing();\n const toggleState = useToggleState({\n onChange: disabled ? undefined : onChange,\n isSelected: state === CheckboxState.Checked,\n });\n const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n\n const tabFocusListener = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n setShowFocus(true);\n }\n };\n\n const blurListener = () => {\n setShowFocus(false);\n };\n\n useEffect(() => {\n if (!listeningForKeyboardEvents) {\n inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n inputRef?.current?.addEventListener('keyup', tabFocusListener);\n inputRef?.current?.removeEventListener('blur', blurListener);\n inputRef?.current?.addEventListener('blur', blurListener);\n\n setListeningForKeyboardEvents(true);\n }\n }, [listeningForKeyboardEvents, inputRef]);\n\n const { inputProps } = useCheckbox(\n {\n isDisabled: disabled,\n isRequired: required,\n isIndeterminate: state === CheckboxState.Mixed,\n 'aria-label': ariaLabel || label,\n value,\n },\n toggleState,\n inputRef,\n );\n\n return (\n <div className=\"tw-gap-1 tw-transition-colors\" data-test-id=\"checkbox\">\n <div className={merge(['tw-inline-flex tw-flex-row tw-rounded', showFocus ? FOCUS_STYLE : ''])}>\n <InputLabel\n disabled={disabled}\n clickable\n htmlFor={id}\n tooltip={tooltip ?? undefined}\n required={required}\n bold={isCheckedOrMixed(state)}\n >\n <span className=\"tw-flex tw-items-center\">\n <span className=\"tw-inline-flex tw-mr-1.5\">\n <input\n {...mergeProps(groupInputProps || inputProps, focusProps)}\n id={id}\n ref={inputRef}\n className=\"tw-sr-only\"\n data-test-id=\"checkbox-input\"\n aria-label={ariaLabel}\n required={required}\n />\n <span\n data-test-id=\"checkbox-icon-box\"\n aria-hidden=\"true\"\n className={merge([\n 'tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-border tw-shrink-0 tw-flex-none',\n size === 'Default' ? 'tw-h-4 tw-w-4' : 'tw-h-5 tw-w-5',\n disabled\n ? merge([\n 'tw-bg-box-disabled tw-pointer-events-none',\n !isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n isCheckedOrMixed(state) &&\n 'tw-bg-box-disabled tw-text-box-disabled-inverse tw-border-line-strong',\n ])\n : merge([\n !isCheckedOrMixed(state) &&\n 'tw-bg-base tw-border-line-xx-strong hover:tw-bg-box-neutral',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Weak &&\n 'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n isCheckedOrMixed(state) &&\n emphasis === CheckboxEmphasis.Default &&\n 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover',\n ]),\n ])}\n >\n {state === CheckboxState.Checked && <IconCheckMark />}\n {state === CheckboxState.Mixed && <IconMinus />}\n </span>\n </span>\n <span className=\"tw-inline-flex tw-flex-col\">\n {label && !hideLabel && (\n <span\n data-test-id=\"checkbox-label\"\n className={merge([\n 'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n isCheckedOrMixed(state) ? 'tw-font-medium' : '',\n ])}\n >\n {label}\n </span>\n )}\n {helperText && !hideLabel && (\n <span\n data-test-id=\"checkbox-helper-text\"\n className={merge([\n 'tw-font-sans tw-text-xs tw-font-normal',\n disabled ? 'text-disabled' : 'tw-text-text-x-weak',\n ])}\n >\n {helperText}\n </span>\n )}\n </span>\n </span>\n </InputLabel>\n </div>\n </div>\n );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","React","merge","FOCUS_STYLE","InputLabel","mergeProps","IconCheckMark","IconMinus","Checkbox","forwardRef"],"mappings":"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"}
|