@foi/design-system 0.0.4 → 0.0.7

package/dist/RadioGroup.context-zJGC5Sjc.js

@@ -0,0 +1,395 @@
+import { i as e, n as t, r as n } from "./emotion-react-jsx-runtime.browser.esm-BFNmScj4.js";
+import { r } from "./theme-DEqiATmv.js";
+import i, { createContext as a, useContext as o, useState as s } from "react";
+import { css as c } from "@emotion/react";
+import { useController as l } from "react-hook-form";
+import u from "@mui/icons-material/CheckOutlined";
+//#region src/hocs/ThemeProvider/interfaces/Components.interface.ts
+var d = /* @__PURE__ */ function(e) {
+	return e.BUTTON = "BUTTON", e.ICONBUTTON = "ICONBUTTON", e.INPUT = "INPUT", e.CHECKBOX = "CHECKBOX", e.SELECT = "SELECT", e.SELECTMENU = "SELECTMENU", e.SWITCH = "SWITCH", e.SLIDER = "SLIDER", e.DATEPICKER = "DATEPICKER", e.DATEPICKERMENU = "DATEPICKERMENU", e.CHECKBOXGROUP = "CHECKBOXGROUP", e.CHECKBOXTREE = "CHECKBOXTREE", e.RADIOGROUP = "RADIOGROUP", e.RADIO = "RADIO", e;
+}({}), f = (e, t) => `
+  // BACKGROUNDS  
+  ${r(e, "background-color", `--CHECKBOX-EVENTS-${t}-BACKGROUND-COLOR`)}
+`, p = (e, t) => `
+  // BORDERS
+  ${r(e, "border-color", `--CHECKBOX-EVENTS-${t}-BORDER-COLOR`)}
+  ${r(e, "border-width", `--CHECKBOX-EVENTS-${t}-BORDER-WIDTH`)}
+  ${r(e, "border-style", `--CHECKBOX-EVENTS-${t}-BORDER-STYLE`)}
+`, m = (e, t) => `  
+  // OUTLINE
+  ${r(e, "outline-color", `--CHECKBOX-EVENTS-${t}-OUTLINE-COLOR`)}
+  ${r(e, "outline-width", `--CHECKBOX-EVENTS-${t}-OUTLINE-WIDTH`)}
+  ${r(e, "outline-style", `--CHECKBOX-EVENTS-${t}-OUTLINE-STYLE`)}
+  ${r(e, "outline-offset", `--CHECKBOX-EVENTS-${t}-OUTLINE-OFFSET`)}
+`, h = (e, t) => `  
+  // SHADOW
+  ${r(e, "background-color", `--CHECKBOX-EVENTS-${t}-SHADOW-COLOR`)}
+`, g = (e, t) => `
+  // UTILS
+  > svg > path {
+    ${r(e, "fill", `--CHECKBOX-EVENTS-${t}-ICON-COLOR`)};
+  }
+`, _ = (e, t) => `
+  // TYPOGRAPHY
+  .--CHECKBOX-label {
+    ${r(e, "color", `--CHECKBOX-EVENTS-${t}-COLOR-PRIMARY`)}
+  }
+
+  ~ .--CHECKBOX-helperText {
+    ${r(e, "color", `--CHECKBOX-EVENTS-${t}-COLOR-SECONDARY`)}
+  }
+`, v = (e) => c`
+  &.--CHECKBOX {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+
+    .--CHECKBOX-container {
+      display: flex;
+      flex-direction: row;
+      gap: 12px;
+      align-items: center;
+      cursor: pointer;
+
+      // ENABLED
+      ${_(e, "ENABLED")};
+
+      // VALUE
+      &:has(.--CHECKBOX-inputField:checked) {
+        ${_(e, "VALUE")};
+      }
+
+      // HOVER
+      &:hover {
+        ${_(e, "HOVER")};
+
+        .--CHECKBOX-checkbox .--CHECKBOX-span {
+          &:before {
+            opacity: 1;
+            ${h(e, "HOVER")};
+          }
+        }
+      }
+
+      // ACTIVE
+      &:has(.--CHECKBOX-inputField.--CHECKBOX-active, .--CHECKBOX-inputField:active) {
+        ${_(e, "ACTIVE")};
+      }
+
+      // FOCUS-VISIBLE
+      &:has(.--CHECKBOX-inputField:focus-visible) {
+        ${_(e, "FOCUS")};
+      }
+
+      // ERROR
+      &:has(.--CHECKBOX-inputField.--CHECKBOX-error) {
+        ${_(e, "ERROR")};
+      }
+
+      // ERROR + VALUE
+      &:has(.--CHECKBOX-inputField.--CHECKBOX-error:checked) {
+        ${_(e, "ERROR_VALUE")};
+      }
+
+      // ERROR + HOVER
+      &:hover:has(.--CHECKBOX-inputField.--CHECKBOX-error) {
+        ${_(e, "ERROR_HOVER")};
+
+        .--CHECKBOX-checkbox .--CHECKBOX-span {
+          &:before {
+            opacity: 1;
+            ${h(e, "ERROR_HOVER")};
+          }
+        }
+      }
+
+      // ERROR + ACTIVE
+      &:has(.--CHECKBOX-inputField.--CHECKBOX-error:active),
+      &:has(.--CHECKBOX-inputField.--CHECKBOX-error.--CHECKBOX-active) {
+        ${_(e, "ERROR_ACTIVE")};
+      }
+
+      // ERROR + FOCUS
+      &:has(.--CHECKBOX-inputField.--CHECKBOX-error:focus-visible) {
+        ${_(e, "ERROR_FOCUS")};
+      }
+
+      // DISABLED
+      &:has(.--CHECKBOX-inputField:disabled) {
+        pointer-events: none;
+        ${_(e, "DISABLED")};
+      }
+
+      // DISABLED + VALUE
+      &:has(.--CHECKBOX-inputField:disabled:checked) {
+        ${_(e, "DISABLED_VALUE")};
+      }
+
+      .--CHECKBOX-checkbox {
+        position: relative;
+        display: inline-flex;
+        width: 24px;
+        height: 24px;
+        isolation: isolate;
+
+        .--CHECKBOX-inputField {
+          cursor: pointer;
+          position: absolute;
+          opacity: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          margin: 0;
+          -webkit-tap-highlight-color: transparent;
+
+          ~ .--CHECKBOX-span > svg {
+            visibility: hidden;
+          }
+          &:checked ~ .--CHECKBOX-span > svg,
+          &:indeterminate ~ .--CHECKBOX-span > svg {
+            visibility: visible;
+          }
+
+          // ENABLED
+          ~ .--CHECKBOX-span {
+            ${f(e, "ENABLED")};
+            ${p(e, "ENABLED")};
+            ${g(e, "ENABLED")};
+          }
+
+          // VALUE
+          &:checked ~ .--CHECKBOX-span {
+            ${f(e, "VALUE")};
+            ${p(e, "VALUE")};
+            ${g(e, "VALUE")};
+          }
+
+          // INDETERMINATE (same appearance as VALUE)
+          &:indeterminate ~ .--CHECKBOX-span {
+            ${f(e, "VALUE")};
+            ${p(e, "VALUE")};
+            ${g(e, "VALUE")};
+          }
+
+          // HOVER
+          // Is at the container level
+
+          // ACTIVE
+          &.--CHECKBOX-active ~ .--CHECKBOX-span,
+          &:active ~ .--CHECKBOX-span {
+            &:before {
+              opacity: 1;
+              ${h(e, "ACTIVE")};
+            }
+          }
+
+          // FOCUS
+          &:focus-visible ~ .--CHECKBOX-span {
+            outline: none;
+            ${m(e, "FOCUS")};
+            ${g(e, "FOCUS")};
+          }
+
+          // ERROR
+          &.--CHECKBOX-error ~ .--CHECKBOX-span {
+            ${f(e, "ERROR")};
+            ${p(e, "ERROR")};
+            ${g(e, "ERROR")};
+          }
+
+          // ERROR + VALUE
+          &.--CHECKBOX-error:checked ~ .--CHECKBOX-span {
+            ${f(e, "ERROR_VALUE")};
+            ${p(e, "ERROR_VALUE")};
+            ${g(e, "ERROR_VALUE")};
+          }
+
+          // ERROR + VALUE
+          // Is at the container level
+
+          // ERROR + ACTIVE
+          &.--CHECKBOX-error:active ~ .--CHECKBOX-span,
+          &.--CHECKBOX-error.--CHECKBOX-active ~ .--CHECKBOX-span {
+            &:before {
+              opacity: 1;
+              ${h(e, "ERROR_ACTIVE")};
+            }
+          }
+
+          // ERROR + FOCUS
+          &.--CHECKBOX-error:focus-visible ~ .--CHECKBOX-span {
+            ${m(e, "ERROR_FOCUS")};
+            ${g(e, "ERROR_FOCUS")};
+          }
+
+          // DISABLED
+          &:disabled ~ .--CHECKBOX-span {
+            ${f(e, "DISABLED")};
+            ${p(e, "DISABLED")};
+            ${g(e, "DISABLED")};
+          }
+
+          // DISABLED + VALUE
+          &:disabled:checked ~ .--CHECKBOX-span {
+            ${f(e, "DISABLED_VALUE")};
+            ${p(e, "DISABLED_VALUE")};
+            ${g(e, "DISABLED_VALUE")};
+          }
+        }
+
+        .--CHECKBOX-span {
+          width: 24px;
+          height: 24px;
+          ${r(e, "border-radius", "--CHECKBOX-ROOT-BORDER-RADIUS")};
+          position: absolute;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition:
+            background-color 150ms ease-in-out,
+            border-color 150ms ease-in-out;
+
+          > svg {
+            width: 100%;
+            height: auto;
+            z-index: 1;
+          }
+
+          &:before {
+            content: '';
+            position: absolute;
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity 150ms ease-in-out;
+            z-index: -1;
+          }
+        }
+      }
+
+      .--CHECKBOX-label {
+        // FONT
+        font-family: ${e["--FONTFAMILY-PRIMARY"]};
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1;
+      }
+    }
+
+    .--CHECKBOX-helperText {
+      // FONT
+      font-family: ${e["--FONTFAMILY-PRIMARY"]};
+      font-size: 13px;
+      line-height: 16px;
+      margin-left: 14px;
+    }
+  }
+`, y = a(null), b = a(null), x = "--CHECKBOX", S = i.forwardRef(({ label: e, icon: r = /* @__PURE__ */ t(u, {}), helperText: i, showErrorText: a = !0, className: o, style: c = {}, disabled: l, checked: d, onChecked: f, error: p, onKeyDown: m, onKeyUp: h, onBlur: g, ..._ }, y) => {
+	let [b, S] = s(!1);
+	return /* @__PURE__ */ n("div", {
+		className: [
+			x,
+			b ? `${x}-active` : "",
+			o || ""
+		].join(" "),
+		css: v(c),
+		"data-testid": x,
+		children: [/* @__PURE__ */ n("label", {
+			className: `${x}-container`,
+			children: [/* @__PURE__ */ n("div", {
+				className: `${x}-checkbox`,
+				children: [/* @__PURE__ */ t("input", {
+					className: [
+						`${x}-inputField`,
+						b ? `${x}-active` : "",
+						a && p && `${x}-error`
+					].join(" "),
+					type: "checkbox",
+					checked: d,
+					disabled: l,
+					onChange: (e) => f(e.target.checked),
+					onKeyDown: (e) => {
+						(e.key === "Enter" || e.key === "Space") && S(!0), m?.(e);
+					},
+					onKeyUp: (e) => {
+						(e.key === "Enter" || e.key === "Space") && (S(!1), f(!d)), h?.(e);
+					},
+					onBlur: () => {
+						S(!1), g?.({});
+					},
+					ref: y,
+					"data-testid": `${x}-inputField`,
+					..._
+				}), /* @__PURE__ */ t("span", {
+					className: `${x}-span`,
+					"data-testid": `${x}-icon`,
+					children: r
+				})]
+			}), /* @__PURE__ */ t("span", {
+				className: `${x}-label`,
+				"data-testid": `${x}-label`,
+				children: e
+			})]
+		}), (i || a) && /* @__PURE__ */ n("span", {
+			className: `${x}-helperText`,
+			"data-testid": `${x}-helperText`,
+			children: [i && (!p || !a) && i, a && p && p.message]
+		})]
+	});
+});
+S.displayName = "CheckboxBase";
+var C = ({ name: e, control: n, ...r }) => {
+	let { field: i, fieldState: a } = l({
+		control: n,
+		name: e
+	}), [o, c] = s(i.value || !1), u = a.error, d = (e) => {
+		i.onChange(e), c(e), u && i.onBlur();
+	};
+	return /* @__PURE__ */ t(S, {
+		...r,
+		name: e,
+		checked: o,
+		onChecked: d,
+		onBlur: () => i.onBlur(),
+		error: u
+	});
+}, w = (e) => {
+	let n = o(y), r = o(b), i = n ?? r;
+	if (typeof e.checked == "boolean" && !e.control) {
+		let { checked: n, onChecked: r, name: i, control: a, ...o } = e;
+		return /* @__PURE__ */ t(S, {
+			...o,
+			name: i,
+			checked: n,
+			onChecked: r ?? (() => {})
+		});
+	}
+	if (i) {
+		let { value: n, name: r, control: a, ...o } = e, s = n ?? r ?? "", c = i.checkedValues.includes(s);
+		return /* @__PURE__ */ t(S, {
+			...o,
+			name: r,
+			value: s,
+			checked: c,
+			onChecked: (e) => i.onChange(s, e),
+			disabled: o.disabled ?? i.disabled,
+			error: i.error,
+			showErrorText: !1,
+			helperText: void 0
+		});
+	}
+	return /* @__PURE__ */ t(C, { ...e });
+}, T = ({ theme: n, ...r }) => {
+	let { componentStyles: i } = e([d.CHECKBOX], n);
+	return /* @__PURE__ */ t(w, {
+		...r,
+		style: i
+	});
+}, E = a(null);
+//#endregion
+export { d as a, y as i, T as n, b as r, E as t };
+
+//# sourceMappingURL=RadioGroup.context-zJGC5Sjc.js.map

package/dist/RadioGroup.context-zJGC5Sjc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.context-zJGC5Sjc.js","names":[],"sources":["../src/hocs/ThemeProvider/interfaces/Components.interface.ts","../src/components/atoms/Checkbox/Checkbox.emotion.ts","../src/components/molecules/CheckboxGroup/CheckboxGroup.context.ts","../src/components/molecules/CheckboxTree/CheckboxTree.context.ts","../src/components/atoms/Checkbox/Checkbox.tsx","../src/components/atoms/Checkbox/index.tsx","../src/components/atoms/Radio/RadioGroup.context.ts"],"sourcesContent":["export enum Component {\n  // atoms\n  BUTTON = 'BUTTON',\n  ICONBUTTON = 'ICONBUTTON',\n  INPUT = 'INPUT',\n  CHECKBOX = 'CHECKBOX',\n  SELECT = 'SELECT',\n  SELECTMENU = 'SELECTMENU',\n  SWITCH = 'SWITCH',\n  SLIDER = 'SLIDER',\n  DATEPICKER = 'DATEPICKER',\n  DATEPICKERMENU = 'DATEPICKERMENU',\n\n  // molecules\n  CHECKBOXGROUP = 'CHECKBOXGROUP',\n  CHECKBOXTREE = 'CHECKBOXTREE',\n  RADIOGROUP = 'RADIOGROUP',\n\n  // atoms\n  RADIO = 'RADIO',\n}\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst background = (theme: Record<string, string>, event: string): string => `\n  // BACKGROUNDS  \n  ${getStyle(theme, 'background-color', `--CHECKBOX-EVENTS-${event}-BACKGROUND-COLOR`)}\n`;\n\nconst border = (theme: Record<string, string>, event: string): string => `\n  // BORDERS\n  ${getStyle(theme, 'border-color', `--CHECKBOX-EVENTS-${event}-BORDER-COLOR`)}\n  ${getStyle(theme, 'border-width', `--CHECKBOX-EVENTS-${event}-BORDER-WIDTH`)}\n  ${getStyle(theme, 'border-style', `--CHECKBOX-EVENTS-${event}-BORDER-STYLE`)}\n`;\n\nconst outline = (theme: Record<string, string>, event: string): string => `  \n  // OUTLINE\n  ${getStyle(theme, 'outline-color', `--CHECKBOX-EVENTS-${event}-OUTLINE-COLOR`)}\n  ${getStyle(theme, 'outline-width', `--CHECKBOX-EVENTS-${event}-OUTLINE-WIDTH`)}\n  ${getStyle(theme, 'outline-style', `--CHECKBOX-EVENTS-${event}-OUTLINE-STYLE`)}\n  ${getStyle(theme, 'outline-offset', `--CHECKBOX-EVENTS-${event}-OUTLINE-OFFSET`)}\n`;\n\nconst shadow = (theme: Record<string, string>, event: string): string => `  \n  // SHADOW\n  ${getStyle(theme, 'background-color', `--CHECKBOX-EVENTS-${event}-SHADOW-COLOR`)}\n`;\n\nconst icon = (theme: Record<string, string>, event: string): string => `\n  // UTILS\n  > svg > path {\n    ${getStyle(theme, 'fill', `--CHECKBOX-EVENTS-${event}-ICON-COLOR`)};\n  }\n`;\n\nconst label = (theme: Record<string, string>, event: string): string => `\n  // TYPOGRAPHY\n  .--CHECKBOX-label {\n    ${getStyle(theme, 'color', `--CHECKBOX-EVENTS-${event}-COLOR-PRIMARY`)}\n  }\n\n  ~ .--CHECKBOX-helperText {\n    ${getStyle(theme, 'color', `--CHECKBOX-EVENTS-${event}-COLOR-SECONDARY`)}\n  }\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--CHECKBOX {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    .--CHECKBOX-container {\n      display: flex;\n      flex-direction: row;\n      gap: 12px;\n      align-items: center;\n      cursor: pointer;\n\n      // ENABLED\n      ${label(theme, 'ENABLED')};\n\n      // VALUE\n      &:has(.--CHECKBOX-inputField:checked) {\n        ${label(theme, 'VALUE')};\n      }\n\n      // HOVER\n      &:hover {\n        ${label(theme, 'HOVER')};\n\n        .--CHECKBOX-checkbox .--CHECKBOX-span {\n          &:before {\n            opacity: 1;\n            ${shadow(theme, 'HOVER')};\n          }\n        }\n      }\n\n      // ACTIVE\n      &:has(.--CHECKBOX-inputField.--CHECKBOX-active, .--CHECKBOX-inputField:active) {\n        ${label(theme, 'ACTIVE')};\n      }\n\n      // FOCUS-VISIBLE\n      &:has(.--CHECKBOX-inputField:focus-visible) {\n        ${label(theme, 'FOCUS')};\n      }\n\n      // ERROR\n      &:has(.--CHECKBOX-inputField.--CHECKBOX-error) {\n        ${label(theme, 'ERROR')};\n      }\n\n      // ERROR + VALUE\n      &:has(.--CHECKBOX-inputField.--CHECKBOX-error:checked) {\n        ${label(theme, 'ERROR_VALUE')};\n      }\n\n      // ERROR + HOVER\n      &:hover:has(.--CHECKBOX-inputField.--CHECKBOX-error) {\n        ${label(theme, 'ERROR_HOVER')};\n\n        .--CHECKBOX-checkbox .--CHECKBOX-span {\n          &:before {\n            opacity: 1;\n            ${shadow(theme, 'ERROR_HOVER')};\n          }\n        }\n      }\n\n      // ERROR + ACTIVE\n      &:has(.--CHECKBOX-inputField.--CHECKBOX-error:active),\n      &:has(.--CHECKBOX-inputField.--CHECKBOX-error.--CHECKBOX-active) {\n        ${label(theme, 'ERROR_ACTIVE')};\n      }\n\n      // ERROR + FOCUS\n      &:has(.--CHECKBOX-inputField.--CHECKBOX-error:focus-visible) {\n        ${label(theme, 'ERROR_FOCUS')};\n      }\n\n      // DISABLED\n      &:has(.--CHECKBOX-inputField:disabled) {\n        pointer-events: none;\n        ${label(theme, 'DISABLED')};\n      }\n\n      // DISABLED + VALUE\n      &:has(.--CHECKBOX-inputField:disabled:checked) {\n        ${label(theme, 'DISABLED_VALUE')};\n      }\n\n      .--CHECKBOX-checkbox {\n        position: relative;\n        display: inline-flex;\n        width: 24px;\n        height: 24px;\n        isolation: isolate;\n\n        .--CHECKBOX-inputField {\n          cursor: pointer;\n          position: absolute;\n          opacity: 0;\n          width: 100%;\n          height: 100%;\n          z-index: 2;\n          margin: 0;\n          -webkit-tap-highlight-color: transparent;\n\n          ~ .--CHECKBOX-span > svg {\n            visibility: hidden;\n          }\n          &:checked ~ .--CHECKBOX-span > svg,\n          &:indeterminate ~ .--CHECKBOX-span > svg {\n            visibility: visible;\n          }\n\n          // ENABLED\n          ~ .--CHECKBOX-span {\n            ${background(theme, 'ENABLED')};\n            ${border(theme, 'ENABLED')};\n            ${icon(theme, 'ENABLED')};\n          }\n\n          // VALUE\n          &:checked ~ .--CHECKBOX-span {\n            ${background(theme, 'VALUE')};\n            ${border(theme, 'VALUE')};\n            ${icon(theme, 'VALUE')};\n          }\n\n          // INDETERMINATE (same appearance as VALUE)\n          &:indeterminate ~ .--CHECKBOX-span {\n            ${background(theme, 'VALUE')};\n            ${border(theme, 'VALUE')};\n            ${icon(theme, 'VALUE')};\n          }\n\n          // HOVER\n          // Is at the container level\n\n          // ACTIVE\n          &.--CHECKBOX-active ~ .--CHECKBOX-span,\n          &:active ~ .--CHECKBOX-span {\n            &:before {\n              opacity: 1;\n              ${shadow(theme, 'ACTIVE')};\n            }\n          }\n\n          // FOCUS\n          &:focus-visible ~ .--CHECKBOX-span {\n            outline: none;\n            ${outline(theme, 'FOCUS')};\n            ${icon(theme, 'FOCUS')};\n          }\n\n          // ERROR\n          &.--CHECKBOX-error ~ .--CHECKBOX-span {\n            ${background(theme, 'ERROR')};\n            ${border(theme, 'ERROR')};\n            ${icon(theme, 'ERROR')};\n          }\n\n          // ERROR + VALUE\n          &.--CHECKBOX-error:checked ~ .--CHECKBOX-span {\n            ${background(theme, 'ERROR_VALUE')};\n            ${border(theme, 'ERROR_VALUE')};\n            ${icon(theme, 'ERROR_VALUE')};\n          }\n\n          // ERROR + VALUE\n          // Is at the container level\n\n          // ERROR + ACTIVE\n          &.--CHECKBOX-error:active ~ .--CHECKBOX-span,\n          &.--CHECKBOX-error.--CHECKBOX-active ~ .--CHECKBOX-span {\n            &:before {\n              opacity: 1;\n              ${shadow(theme, 'ERROR_ACTIVE')};\n            }\n          }\n\n          // ERROR + FOCUS\n          &.--CHECKBOX-error:focus-visible ~ .--CHECKBOX-span {\n            ${outline(theme, 'ERROR_FOCUS')};\n            ${icon(theme, 'ERROR_FOCUS')};\n          }\n\n          // DISABLED\n          &:disabled ~ .--CHECKBOX-span {\n            ${background(theme, 'DISABLED')};\n            ${border(theme, 'DISABLED')};\n            ${icon(theme, 'DISABLED')};\n          }\n\n          // DISABLED + VALUE\n          &:disabled:checked ~ .--CHECKBOX-span {\n            ${background(theme, 'DISABLED_VALUE')};\n            ${border(theme, 'DISABLED_VALUE')};\n            ${icon(theme, 'DISABLED_VALUE')};\n          }\n        }\n\n        .--CHECKBOX-span {\n          width: 24px;\n          height: 24px;\n          ${getStyle(theme, 'border-radius', '--CHECKBOX-ROOT-BORDER-RADIUS')};\n          position: absolute;\n          box-sizing: border-box;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          transition:\n            background-color 150ms ease-in-out,\n            border-color 150ms ease-in-out;\n\n          > svg {\n            width: 100%;\n            height: auto;\n            z-index: 1;\n          }\n\n          &:before {\n            content: '';\n            position: absolute;\n            width: 36px;\n            height: 36px;\n            border-radius: 50%;\n            opacity: 0;\n            transition: opacity 150ms ease-in-out;\n            z-index: -1;\n          }\n        }\n      }\n\n      .--CHECKBOX-label {\n        // FONT\n        font-family: ${theme['--FONTFAMILY-PRIMARY']};\n        font-size: 0.875rem;\n        font-weight: 500;\n        line-height: 1;\n      }\n    }\n\n    .--CHECKBOX-helperText {\n      // FONT\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 13px;\n      line-height: 16px;\n      margin-left: 14px;\n    }\n  }\n`;\n\nexport default Style;\n","import { createContext } from 'react';\n\nexport interface CheckboxGroupContextValue {\n  /** Array of currently checked option values */\n  checkedValues: string[];\n  /** Toggle a value in/out of the checked array */\n  onChange: (value: string, checked: boolean) => void;\n  /** Group-level disabled state */\n  disabled?: boolean;\n  /** Group-level validation error */\n  error?: { message?: string };\n}\n\nexport const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(null);\n","import { createContext } from 'react';\n\nexport interface CheckboxTreeContextValue {\n  /** Array of currently checked option values */\n  checkedValues: string[];\n  /** Toggle a value in/out of the checked array */\n  onChange: (value: string, checked: boolean) => void;\n  /** Tree-level disabled state */\n  disabled?: boolean;\n  /** Tree-level validation error */\n  error?: { message?: string };\n}\n\nexport const CheckboxTreeContext = createContext<CheckboxTreeContextValue | null>(null);\n","import React, { useState, useContext } from 'react';\n// Component Base\nimport emotion from './Checkbox.emotion';\nimport type { CheckboxProps, CheckboxBaseProps } from './Checkbox.interface';\nimport { CheckboxGroupContext } from '../../molecules/CheckboxGroup/CheckboxGroup.context';\nimport { CheckboxTreeContext } from '../../molecules/CheckboxTree/CheckboxTree.context';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\n// Custom Components\nimport CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';\n\nconst CLASS = '--CHECKBOX';\n\n/** @internal Headless presentational layer shared by all checkbox variants. */\nexport const CheckboxBase = React.forwardRef<HTMLInputElement, CheckboxBaseProps>(\n  (\n    {\n      label,\n      icon = <CheckOutlinedIcon />,\n      helperText,\n      showErrorText = true,\n      className,\n      style = {},\n      disabled,\n      checked,\n      onChecked,\n      error,\n      onKeyDown,\n      onKeyUp,\n      onBlur,\n      ...rest\n    }: CheckboxBaseProps,\n    ref,\n  ) => {\n    const [isActive, setIsActive] = useState(false);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter' || event.key === 'Space') setIsActive(true);\n      onKeyDown?.(event);\n    };\n\n    const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter' || event.key === 'Space') {\n        setIsActive(false);\n        onChecked(!checked);\n      }\n      onKeyUp?.(event);\n    };\n\n    const handleBlur = () => {\n      setIsActive(false);\n      onBlur?.({} as React.FocusEvent<HTMLInputElement>);\n    };\n\n    return (\n      <div\n        className={[CLASS, isActive ? `${CLASS}-active` : '', className || ''].join(' ')}\n        css={emotion(style)}\n        data-testid={CLASS}\n      >\n        <label className={`${CLASS}-container`}>\n          <div className={`${CLASS}-checkbox`}>\n            <input\n              className={[\n                `${CLASS}-inputField`,\n                isActive ? `${CLASS}-active` : '',\n                showErrorText && error && `${CLASS}-error`,\n              ].join(' ')}\n              type='checkbox'\n              checked={checked}\n              disabled={disabled}\n              onChange={e => onChecked(e.target.checked)}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              onBlur={handleBlur}\n              ref={ref}\n              data-testid={`${CLASS}-inputField`}\n              {...rest}\n            />\n            <span className={`${CLASS}-span`} data-testid={`${CLASS}-icon`}>\n              {icon}\n            </span>\n          </div>\n          <span className={`${CLASS}-label`} data-testid={`${CLASS}-label`}>\n            {label}\n          </span>\n        </label>\n        {(helperText || showErrorText) && (\n          <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n            {helperText && (!error || !showErrorText) && helperText}\n            {showErrorText && error && error.message}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckboxBase.displayName = 'CheckboxBase';\n\nconst CheckboxRHF = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  ...rest\n}: CheckboxProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control: control!, name: name! as FieldPath<TFieldValues> });\n  const [value, setValue] = useState<boolean>(field.value || false);\n  const errorText = fieldState.error;\n\n  const onChecked = (checked: boolean) => {\n    field.onChange(checked);\n    setValue(checked);\n    if (errorText) field.onBlur();\n  };\n\n  return (\n    <CheckboxBase\n      {...rest}\n      name={name}\n      checked={value}\n      onChecked={onChecked}\n      onBlur={() => field.onBlur()}\n      error={errorText}\n    />\n  );\n};\n\nconst Checkbox = <TFieldValues extends FieldValues = FieldValues>(props: CheckboxProps<TFieldValues>) => {\n  const groupCtx = useContext(CheckboxGroupContext);\n  const treeCtx = useContext(CheckboxTreeContext);\n  const ctx = groupCtx ?? treeCtx;\n\n  if (typeof props.checked === 'boolean' && !props.control) {\n    const { checked, onChecked, name, control, ...rest } = props;\n    return <CheckboxBase {...rest} name={name} checked={checked} onChecked={onChecked ?? (() => {})} />;\n  }\n\n  if (ctx) {\n    const { value, name, control, ...rest } = props;\n    const itemValue = (value as string) ?? name ?? '';\n    const checked = ctx.checkedValues.includes(itemValue);\n\n    return (\n      <CheckboxBase\n        {...rest}\n        name={name}\n        value={itemValue}\n        checked={checked}\n        onChecked={c => ctx.onChange(itemValue, c)}\n        disabled={rest.disabled ?? ctx.disabled}\n        error={ctx.error}\n        showErrorText={false}\n        helperText={undefined}\n      />\n    );\n  }\n\n  return <CheckboxRHF {...props} />;\n};\n\nexport default Checkbox;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { CheckboxStyleProps } from './Checkbox.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport CheckboxBase from './Checkbox';\n\nconst Checkbox = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  ...rest\n}: CheckboxStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.CHECKBOX], theme);\n\n  return <CheckboxBase {...rest} style={componentStyles} />;\n};\n\nexport default Checkbox;\n","import { createContext } from 'react';\n\nexport interface RadioGroupContextValue {\n  /** The name attribute shared by all radios in this group */\n  name: string;\n  /** The currently selected value */\n  selectedValue: string;\n  /** Select a value */\n  onChange: (value: string) => void;\n  /** Group-level disabled state */\n  disabled?: boolean;\n  /** Group-level validation error */\n  error?: { message?: string };\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n"],"mappings":";;;;;;;AAAA,IAAY,IAAL,yBAAA,GAAA;QAEL,EAAA,SAAS,UACT,EAAA,aAAa,cACb,EAAA,QAAQ,SACR,EAAA,WAAW,YACX,EAAA,SAAS,UACT,EAAA,aAAa,cACb,EAAA,SAAS,UACT,EAAA,SAAS,UACT,EAAA,aAAa,cACb,EAAA,iBAAiB,kBAGjB,EAAA,gBAAgB,iBAChB,EAAA,eAAe,gBACf,EAAA,aAAa,cAGb,EAAA,QAAQ;KACT,ECjBK,KAAc,GAA+B,MAA0B;;IAEzE,EAAS,GAAO,oBAAoB,qBAAqB,EAAM,mBAAmB,CAAC;GAGjF,KAAU,GAA+B,MAA0B;;IAErE,EAAS,GAAO,gBAAgB,qBAAqB,EAAM,eAAe,CAAC;IAC3E,EAAS,GAAO,gBAAgB,qBAAqB,EAAM,eAAe,CAAC;IAC3E,EAAS,GAAO,gBAAgB,qBAAqB,EAAM,eAAe,CAAC;GAGzE,KAAW,GAA+B,MAA0B;;IAEtE,EAAS,GAAO,iBAAiB,qBAAqB,EAAM,gBAAgB,CAAC;IAC7E,EAAS,GAAO,iBAAiB,qBAAqB,EAAM,gBAAgB,CAAC;IAC7E,EAAS,GAAO,iBAAiB,qBAAqB,EAAM,gBAAgB,CAAC;IAC7E,EAAS,GAAO,kBAAkB,qBAAqB,EAAM,iBAAiB,CAAC;GAG7E,KAAU,GAA+B,MAA0B;;IAErE,EAAS,GAAO,oBAAoB,qBAAqB,EAAM,eAAe,CAAC;GAG7E,KAAQ,GAA+B,MAA0B;;;MAGjE,EAAS,GAAO,QAAQ,qBAAqB,EAAM,aAAa,CAAC;;GAIjE,KAAS,GAA+B,MAA0B;;;MAGlE,EAAS,GAAO,SAAS,qBAAqB,EAAM,gBAAgB,CAAC;;;;MAIrE,EAAS,GAAO,SAAS,qBAAqB,EAAM,kBAAkB,CAAC;;GAIvE,KAAS,MAAkC,CAAG;;;;;;;;;;;;;;;QAe5C,EAAM,GAAO,UAAU,CAAC;;;;UAItB,EAAM,GAAO,QAAQ,CAAC;;;;;UAKtB,EAAM,GAAO,QAAQ,CAAC;;;;;cAKlB,EAAO,GAAO,QAAQ,CAAC;;;;;;;UAO3B,EAAM,GAAO,SAAS,CAAC;;;;;UAKvB,EAAM,GAAO,QAAQ,CAAC;;;;;UAKtB,EAAM,GAAO,QAAQ,CAAC;;;;;UAKtB,EAAM,GAAO,cAAc,CAAC;;;;;UAK5B,EAAM,GAAO,cAAc,CAAC;;;;;cAKxB,EAAO,GAAO,cAAc,CAAC;;;;;;;;UAQjC,EAAM,GAAO,eAAe,CAAC;;;;;UAK7B,EAAM,GAAO,cAAc,CAAC;;;;;;UAM5B,EAAM,GAAO,WAAW,CAAC;;;;;UAKzB,EAAM,GAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8B3B,EAAW,GAAO,UAAU,CAAC;cAC7B,EAAO,GAAO,UAAU,CAAC;cACzB,EAAK,GAAO,UAAU,CAAC;;;;;cAKvB,EAAW,GAAO,QAAQ,CAAC;cAC3B,EAAO,GAAO,QAAQ,CAAC;cACvB,EAAK,GAAO,QAAQ,CAAC;;;;;cAKrB,EAAW,GAAO,QAAQ,CAAC;cAC3B,EAAO,GAAO,QAAQ,CAAC;cACvB,EAAK,GAAO,QAAQ,CAAC;;;;;;;;;;;gBAWnB,EAAO,GAAO,SAAS,CAAC;;;;;;;cAO1B,EAAQ,GAAO,QAAQ,CAAC;cACxB,EAAK,GAAO,QAAQ,CAAC;;;;;cAKrB,EAAW,GAAO,QAAQ,CAAC;cAC3B,EAAO,GAAO,QAAQ,CAAC;cACvB,EAAK,GAAO,QAAQ,CAAC;;;;;cAKrB,EAAW,GAAO,cAAc,CAAC;cACjC,EAAO,GAAO,cAAc,CAAC;cAC7B,EAAK,GAAO,cAAc,CAAC;;;;;;;;;;;gBAWzB,EAAO,GAAO,eAAe,CAAC;;;;;;cAMhC,EAAQ,GAAO,cAAc,CAAC;cAC9B,EAAK,GAAO,cAAc,CAAC;;;;;cAK3B,EAAW,GAAO,WAAW,CAAC;cAC9B,EAAO,GAAO,WAAW,CAAC;cAC1B,EAAK,GAAO,WAAW,CAAC;;;;;cAKxB,EAAW,GAAO,iBAAiB,CAAC;cACpC,EAAO,GAAO,iBAAiB,CAAC;cAChC,EAAK,GAAO,iBAAiB,CAAC;;;;;;;YAOhC,EAAS,GAAO,iBAAiB,gCAAgC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA+BvD,EAAM,wBAAwB;;;;;;;;;qBAShC,EAAM,wBAAwB;;;;;;GCpRtC,IAAuB,EAAgD,KAAK,ECA5E,IAAsB,EAA+C,KAAK,ECFjF,IAAQ,cAGD,IAAe,EAAM,YAE9B,EACE,UACA,UAAO,kBAAC,GAAD,EAAqB,CAAA,EAC5B,eACA,mBAAgB,IAChB,cACA,WAAQ,EAAE,EACV,aACA,YACA,cACA,UACA,cACA,YACA,WACA,GAAG,KAEL,MACG;CACH,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM;CAoB/C,OACE,kBAAC,OAAD;EACE,WAAW;GAAC;GAAO,IAAW,GAAG,EAAM,WAAW;GAAI,KAAa;GAAG,CAAC,KAAK,IAAI;EAChF,KAAK,EAAQ,EAAM;EACnB,eAAa;YAHf,CAKE,kBAAC,SAAD;GAAO,WAAW,GAAG,EAAM;aAA3B,CACE,kBAAC,OAAD;IAAK,WAAW,GAAG,EAAM;cAAzB,CACE,kBAAC,SAAD;KACE,WAAW;MACT,GAAG,EAAM;MACT,IAAW,GAAG,EAAM,WAAW;MAC/B,KAAiB,KAAS,GAAG,EAAM;MACpC,CAAC,KAAK,IAAI;KACX,MAAK;KACI;KACC;KACV,WAAU,MAAK,EAAU,EAAE,OAAO,QAAQ;KAC1C,YApCa,MAAiD;MAEtE,CADI,EAAM,QAAQ,WAAW,EAAM,QAAQ,YAAS,EAAY,GAAK,EACrE,IAAY,EAAM;;KAmCV,UAhCW,MAAiD;MAKpE,CAJI,EAAM,QAAQ,WAAW,EAAM,QAAQ,aACzC,EAAY,GAAM,EAClB,EAAU,CAAC,EAAQ,GAErB,IAAU,EAAM;;KA4BR,cAzBe;MAEvB,AADA,EAAY,GAAM,EAClB,IAAS,EAAE,CAAuC;;KAwBrC;KACL,eAAa,GAAG,EAAM;KACtB,GAAI;KACJ,CAAA,EACF,kBAAC,QAAD;KAAM,WAAW,GAAG,EAAM;KAAQ,eAAa,GAAG,EAAM;eACrD;KACI,CAAA,CACH;OACN,kBAAC,QAAD;IAAM,WAAW,GAAG,EAAM;IAAS,eAAa,GAAG,EAAM;cACtD;IACI,CAAA,CACD;OACN,KAAc,MACd,kBAAC,QAAD;GAAM,WAAW,GAAG,EAAM;GAAc,eAAa,GAAG,EAAM;aAA9D,CACG,MAAe,CAAC,KAAS,CAAC,MAAkB,GAC5C,KAAiB,KAAS,EAAM,QAC5B;KAEL;;EAGX;AAED,EAAa,cAAc;AAE3B,IAAM,KAA+D,EACnE,SACA,YACA,GAAG,QAC8B;CACjC,IAAM,EAAE,UAAO,kBAAe,EAAc;EAAW;EAAgB;EAAkC,CAAC,EACpG,CAAC,GAAO,KAAY,EAAkB,EAAM,SAAS,GAAM,EAC3D,IAAY,EAAW,OAEvB,KAAa,MAAqB;EAGtC,AAFA,EAAM,SAAS,EAAQ,EACvB,EAAS,EAAQ,EACb,KAAW,EAAM,QAAQ;;CAG/B,OACE,kBAAC,GAAD;EACE,GAAI;EACE;EACN,SAAS;EACE;EACX,cAAc,EAAM,QAAQ;EAC5B,OAAO;EACP,CAAA;GAIA,KAA4D,MAAuC;CACvG,IAAM,IAAW,EAAW,EAAqB,EAC3C,IAAU,EAAW,EAAoB,EACzC,IAAM,KAAY;CAExB,IAAI,OAAO,EAAM,WAAY,aAAa,CAAC,EAAM,SAAS;EACxD,IAAM,EAAE,YAAS,cAAW,SAAM,YAAS,GAAG,MAAS;EACvD,OAAO,kBAAC,GAAD;GAAc,GAAI;GAAY;GAAe;GAAS,WAAW,YAAoB;GAAO,CAAA;;CAGrG,IAAI,GAAK;EACP,IAAM,EAAE,UAAO,SAAM,YAAS,GAAG,MAAS,GACpC,IAAa,KAAoB,KAAQ,IACzC,IAAU,EAAI,cAAc,SAAS,EAAU;EAErD,OACE,kBAAC,GAAD;GACE,GAAI;GACE;GACN,OAAO;GACE;GACT,YAAW,MAAK,EAAI,SAAS,GAAW,EAAE;GAC1C,UAAU,EAAK,YAAY,EAAI;GAC/B,OAAO,EAAI;GACX,eAAe;GACf,YAAY,KAAA;GACZ,CAAA;;CAIN,OAAO,kBAAC,GAAD,EAAa,GAAI,GAAS,CAAA;GCvJ7B,KAA4D,EAChE,UACA,GAAG,QACmC;CACtC,IAAM,EAAE,uBAAoB,EAAyB,CAAC,EAAU,SAAS,EAAE,EAAM;CAEjF,OAAO,kBAAC,GAAD;EAAc,GAAI;EAAM,OAAO;EAAmB,CAAA;GCG9C,IAAoB,EAA6C,KAAK"}