@foi/design-system 0.0.11 → 0.0.12

package/dist/{RadioGroup-BL2bdmZx.js → RadioGroup-CdW6yS38.js}

@@ -104,11 +104,11 @@ var g = (e, t) => `
 			]
 		})
 	});
-}, b = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([s.CHECKBOXGROUP], n);
+}, b = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([s.CHECKBOXGROUP], n, r.toUpperCase());
 	return /* @__PURE__ */ t(y, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, x = (e) => m`
   &.--CHECKBOXTREE {
@@ -205,11 +205,11 @@ var g = (e, t) => `
 			})
 		]
 	});
-}, w = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([s.CHECKBOXTREE], n);
+}, w = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([s.CHECKBOXTREE], n, r.toUpperCase());
 	return /* @__PURE__ */ t(C, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, T = (e, t) => `
   .--RADIOGROUP-label {
@@ -310,14 +310,14 @@ var g = (e, t) => `
 			]
 		})
 	});
-}, k = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([s.RADIOGROUP], n);
+}, k = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([s.RADIOGROUP], n, r.toUpperCase());
 	return /* @__PURE__ */ t(O, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 };
 //#endregion
 export { w as n, b as r, k as t };
 
-//# sourceMappingURL=RadioGroup-BL2bdmZx.js.map
+//# sourceMappingURL=RadioGroup-CdW6yS38.js.map

package/dist/RadioGroup-CdW6yS38.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup-CdW6yS38.js","names":[],"sources":["../src/components/molecules/CheckboxGroup/CheckboxGroup.emotion.ts","../src/components/molecules/CheckboxGroup/CheckboxGroup.tsx","../src/components/molecules/CheckboxGroup/index.tsx","../src/components/molecules/CheckboxTree/CheckboxTree.emotion.ts","../src/components/molecules/CheckboxTree/CheckboxTree.tsx","../src/components/molecules/CheckboxTree/index.tsx","../src/components/molecules/RadioGroup/RadioGroup.emotion.ts","../src/components/molecules/RadioGroup/RadioGroup.tsx","../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst labelColor = (theme: Record<string, string>, event: string): string => `\n  .--CHECKBOXGROUP-label {\n    ${getStyle(theme, 'color', `--CHECKBOXGROUP-EVENTS-${event}-COLOR-PRIMARY`)}\n  }\n\n  .--CHECKBOXGROUP-helperText {\n    ${getStyle(theme, 'color', `--CHECKBOXGROUP-EVENTS-${event}-COLOR-SECONDARY`)}\n  }\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--CHECKBOXGROUP {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    // ENABLED\n    ${labelColor(theme, 'ENABLED')};\n\n    // ERROR\n    &.--CHECKBOXGROUP-error {\n      ${labelColor(theme, 'ERROR')};\n    }\n\n    // DISABLED\n    &.--CHECKBOXGROUP-disabled {\n      ${labelColor(theme, 'DISABLED')};\n    }\n\n    .--CHECKBOXGROUP-items {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    &.--CHECKBOXGROUP--horizontal .--CHECKBOXGROUP-items {\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n\n    .--CHECKBOXGROUP-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    .--CHECKBOXGROUP-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","// Component Base\nimport emotion from './CheckboxGroup.emotion';\nimport type { CheckboxGroupProps } from './CheckboxGroup.interface';\nimport { CheckboxGroupContext } from './CheckboxGroup.context';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\n\nconst CLASS = '--CHECKBOXGROUP';\n\n/**\n * CheckboxGroup manages a set of `<Checkbox>` children as a single RHF field.\n * The form value is `string[]` — the `value` props of every checked child.\n *\n * Validation (min, max, custom) is declared on the Zod schema:\n * ```ts\n * z.object({\n *   options: z.array(z.string()).min(1, 'Select at least one').max(3, 'Select at most 3'),\n * })\n * ```\n *\n * @example\n * ```tsx\n * <CheckboxGroup name=\"options\" control={control} label=\"Skills\">\n *   <Checkbox value=\"react\" label=\"React\" />\n *   <Checkbox value=\"vue\" label=\"Vue\" />\n * </CheckboxGroup>\n * ```\n */\nconst CheckboxGroup = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  children,\n  label,\n  helperText,\n  showErrorText = true,\n  disabled,\n  direction = 'vertical',\n  style,\n  className,\n}: CheckboxGroupProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control, name: name as FieldPath<TFieldValues> });\n\n  const checkedValues: string[] = Array.isArray(field.value) ? field.value : [];\n  const errorText = fieldState.error;\n\n  const onChange = (value: string, checked: boolean) => {\n    const next = checked ? [...checkedValues, value] : checkedValues.filter(v => v !== value);\n    field.onChange(next);\n    field.onBlur();\n  };\n\n  return (\n    <CheckboxGroupContext.Provider value={{ checkedValues, onChange, disabled, error: errorText }}>\n      <div\n        className={[\n          CLASS,\n          `${CLASS}--${direction}`,\n          showErrorText && errorText?.message && `${CLASS}-error`,\n          disabled && `${CLASS}-disabled`,\n          className || '',\n        ].join(' ')}\n        css={emotion(style)}\n        data-testid={CLASS}\n      >\n        {label && (\n          <span className={`${CLASS}-label`} data-testid={`${CLASS}-label`}>\n            {label}\n          </span>\n        )}\n\n        <div className={`${CLASS}-items`} data-testid={`${CLASS}-items`}>\n          {children}\n        </div>\n\n        <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n          {helperText && (!errorText || !showErrorText) && helperText}\n          {showErrorText && errorText && errorText.message}\n        </span>\n      </div>\n    </CheckboxGroupContext.Provider>\n  );\n};\n\nexport default CheckboxGroup;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { CheckboxGroupStyleProps } from './CheckboxGroup.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport CheckboxGroupBase from './CheckboxGroup';\n\nconst CheckboxGroup = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  variant = 'default',\n  ...rest\n}: CheckboxGroupStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.CHECKBOXGROUP], theme, variant.toUpperCase());\n\n  return <CheckboxGroupBase {...rest} style={componentStyles} />;\n};\n\nexport default CheckboxGroup;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--CHECKBOXTREE {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    .--CHECKBOXTREE-children {\n      display: flex;\n      flex-direction: column;\n      padding-left: 36px;\n      gap: 16px;\n    }\n\n    .--CHECKBOXTREE-helperText {\n      font-family: ${theme['--FONTFAMILY-PRIMARY']};\n      font-size: 13px;\n      line-height: 16px;\n      margin-left: 14px;\n      ${getStyle(theme, 'color', '--CHECKBOXTREE-EVENTS-ENABLED-COLOR-SECONDARY')}\n\n      &:empty {\n        display: none;\n      }\n    }\n\n    &.--CHECKBOXTREE-error {\n      .--CHECKBOXTREE-helperText {\n        ${getStyle(theme, 'color', '--CHECKBOXTREE-EVENTS-ERROR-COLOR-SECONDARY')}\n      }\n    }\n\n    &.--CHECKBOXTREE-disabled {\n      .--CHECKBOXTREE-helperText {\n        ${getStyle(theme, 'color', '--CHECKBOXTREE-EVENTS-DISABLED-COLOR-SECONDARY')}\n      }\n    }\n  }\n`;\n\nexport default Style;\n","import React, { useRef, useEffect, useMemo } from 'react';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\nimport Icon from '@components/atoms/Icon';\n// Component Base\nimport emotion from './CheckboxTree.emotion';\nimport type { CheckboxTreeProps } from './CheckboxTree.interface';\nimport Checkbox from '@components/atoms/Checkbox';\nimport { CheckboxTreeContext } from './CheckboxTree.context';\n\nconst CLASS = '--CHECKBOXTREE';\n\n/**\n * CheckboxTree renders a parent `<Checkbox>` that controls all of its `<Checkbox>` children.\n *\n * Parent states:\n * - **Checked** — all children are checked.\n * - **Unchecked** — no children are checked.\n * - **Indeterminate** — some (but not all) children are checked.\n *\n * The form value is `string[]` — the `value` props of every checked child.\n * Validation is declared on the Zod schema, the same way as CheckboxGroup.\n *\n * @example\n * ```tsx\n * <CheckboxTree name=\"options\" control={control} label=\"Select all\">\n *   <Checkbox value=\"a\" label=\"Option A\" />\n *   <Checkbox value=\"b\" label=\"Option B\" />\n * </CheckboxTree>\n * ```\n */\nconst CheckboxTree = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  children,\n  label,\n  iconChecked = <Icon name='check' />,\n  iconIndeterminate = <Icon name='remove' />,\n  helperText,\n  showErrorText = true,\n  disabled,\n  style,\n  className,\n}: CheckboxTreeProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control, name: name as FieldPath<TFieldValues> });\n\n  const checkedValues: string[] = Array.isArray(field.value) ? field.value : [];\n  const errorText = fieldState.error;\n\n  const childValues = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .map(child => {\n          const el = child as React.ReactElement<{ value?: string; name?: string }>;\n          return el.props?.value ?? el.props?.name ?? '';\n        })\n        .filter(Boolean),\n    [children],\n  );\n\n  const allChecked = childValues.length > 0 && childValues.every(v => checkedValues.includes(v));\n  const someChecked = !allChecked && childValues.some(v => checkedValues.includes(v));\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const input = rootRef.current?.querySelectorAll<HTMLInputElement>('input[type=\"checkbox\"]')[0];\n    if (input) input.indeterminate = someChecked;\n  }, [someChecked]);\n\n  const onParentChange = (checked: boolean) => {\n    const next = checked ? [...childValues] : [];\n    field.onChange(next);\n    field.onBlur();\n  };\n\n  const onChange = (value: string, checked: boolean) => {\n    const next = checked ? [...checkedValues, value] : checkedValues.filter(v => v !== value);\n    field.onChange(next);\n    field.onBlur();\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      className={[\n        CLASS,\n        showErrorText && errorText?.message ? `${CLASS}-error` : '',\n        disabled ? `${CLASS}-disabled` : '',\n        className || '',\n      ].join(' ')}\n      css={emotion(style)}\n      data-testid={CLASS}\n    >\n      <Checkbox\n        checked={allChecked || someChecked}\n        onChecked={onParentChange}\n        label={label}\n        icon={someChecked ? iconIndeterminate : iconChecked}\n        disabled={disabled}\n        showErrorText={false}\n        helperText={undefined}\n      />\n\n      <CheckboxTreeContext.Provider value={{ checkedValues, onChange, disabled, error: errorText }}>\n        <div className={`${CLASS}-children`} data-testid={`${CLASS}-children`}>\n          {children}\n        </div>\n      </CheckboxTreeContext.Provider>\n\n      <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n        {helperText && (!errorText || !showErrorText) && helperText}\n        {showErrorText && errorText && errorText.message}\n      </span>\n    </div>\n  );\n};\n\nexport default CheckboxTree;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { CheckboxTreeStyleProps } from './CheckboxTree.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport CheckboxTreeBase from './CheckboxTree';\n\nconst CheckboxTree = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  variant = 'default',\n  ...rest\n}: CheckboxTreeStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.CHECKBOXTREE], theme, variant.toUpperCase());\n\n  return <CheckboxTreeBase {...rest} style={componentStyles} />;\n};\n\nexport default CheckboxTree;\n","import { css } from '@emotion/react';\nimport { getStyle } from '@utilities/emotion/styles';\n\nconst labelColor = (theme: Record<string, string>, event: string): string => `\n  .--RADIOGROUP-label {\n    ${getStyle(theme, 'color', `--RADIOGROUP-EVENTS-${event}-COLOR-PRIMARY`)}\n  }\n\n  .--RADIOGROUP-helperText {\n    ${getStyle(theme, 'color', `--RADIOGROUP-EVENTS-${event}-COLOR-SECONDARY`)}\n  }\n`;\n\nconst Style = (theme: Record<string, string>) => css`\n  &.--RADIOGROUP {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: fit-content;\n\n    // ENABLED\n    ${labelColor(theme, 'ENABLED')};\n\n    // ERROR\n    &.--RADIOGROUP-error {\n      ${labelColor(theme, 'ERROR')};\n    }\n\n    // DISABLED\n    &.--RADIOGROUP-disabled {\n      ${labelColor(theme, 'DISABLED')};\n    }\n\n    .--RADIOGROUP-items {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    &.--RADIOGROUP--horizontal .--RADIOGROUP-items {\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n\n    .--RADIOGROUP-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    .--RADIOGROUP-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","// Component Base\nimport emotion from './RadioGroup.emotion';\nimport type { RadioGroupProps } from './RadioGroup.interface';\nimport { RadioGroupContext } from '@components/atoms/Radio/RadioGroup.context';\n// External libraries\nimport { useController, type FieldValues, type FieldPath } from 'react-hook-form';\n\nconst CLASS = '--RADIOGROUP';\n\n/**\n * RadioGroup manages a set of `<Radio>` children as a single RHF field.\n * The form value is a `string` — the `value` prop of the selected Radio.\n *\n * Provides a `RadioGroupContext` that every child `<Radio>` reads its selected state from.\n * Rendering a `<Radio>` outside a RadioGroup throws an error.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"option\" control={control} label=\"Pick one\">\n *   <Radio value=\"a\" label=\"Option A\" />\n *   <Radio value=\"b\" label=\"Option B\" />\n * </RadioGroup>\n * ```\n */\nconst RadioGroup = <TFieldValues extends FieldValues = FieldValues>({\n  name,\n  control,\n  children,\n  label,\n  helperText,\n  showErrorText = true,\n  disabled,\n  direction = 'vertical',\n  style,\n  className,\n}: RadioGroupProps<TFieldValues>) => {\n  const { field, fieldState } = useController({ control, name: name as FieldPath<TFieldValues> });\n\n  const selectedValue: string = typeof field.value === 'string' ? field.value : '';\n  const errorText = fieldState.error;\n\n  const onChange = (value: string) => {\n    field.onChange(value);\n    field.onBlur();\n  };\n\n  return (\n    <RadioGroupContext.Provider value={{ name, selectedValue, onChange, disabled, error: errorText }}>\n      <div\n        className={[\n          CLASS,\n          `${CLASS}--${direction}`,\n          showErrorText && errorText?.message && `${CLASS}-error`,\n          disabled && `${CLASS}-disabled`,\n          className || '',\n        ].join(' ')}\n        css={emotion(style)}\n        data-testid={CLASS}\n      >\n        {label && (\n          <span className={`${CLASS}-label`} data-testid={`${CLASS}-label`}>\n            {label}\n          </span>\n        )}\n\n        <div className={`${CLASS}-items`} data-testid={`${CLASS}-items`}>\n          {children}\n        </div>\n\n        <span className={`${CLASS}-helperText`} data-testid={`${CLASS}-helperText`}>\n          {helperText && (!errorText || !showErrorText) && helperText}\n          {showErrorText && errorText && errorText.message}\n        </span>\n      </div>\n    </RadioGroupContext.Provider>\n  );\n};\n\nexport default RadioGroup;\n","import { useCreateComponentStyles } from '@hocs/ThemeProvider/useThemeProvider.hook';\nimport { Component } from '@hocs/ThemeProvider/interfaces';\nimport type { RadioGroupStyleProps } from './RadioGroup.interface';\nimport type { FieldValues } from 'react-hook-form';\nimport RadioGroupBase from './RadioGroup';\n\nconst RadioGroup = <TFieldValues extends FieldValues = FieldValues>({\n  theme,\n  variant = 'default',\n  ...rest\n}: RadioGroupStyleProps<TFieldValues>) => {\n  const { componentStyles } = useCreateComponentStyles([Component.RADIOGROUP], theme, variant.toUpperCase());\n\n  return <RadioGroupBase {...rest} style={componentStyles} />;\n};\n\nexport default RadioGroup;\n"],"mappings":"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"}

package/dist/{Switch-BS8iwAJ5.js → Switch-C7wjcrjU.js}

@@ -129,11 +129,11 @@ var O = (e, t) => `
 			})
 		]
 	});
-}, A = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.BUTTON], n);
+}, A = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.BUTTON], n, r.toUpperCase());
 	return /* @__PURE__ */ t(de, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, j = (e, t) => `
     ${i(e, "border-color", `--DATEPICKER-EVENTS-${t}-BORDER-COLOR`)};
@@ -649,11 +649,11 @@ var O = (e, t) => `
 			children: r
 		})
 	});
-}, be = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.ICONBUTTON], n);
+}, be = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.ICONBUTTON], n, r.toUpperCase());
 	return /* @__PURE__ */ t(ye, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, I = (e, t) => `  
   // OUTLINE
@@ -1569,11 +1569,11 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			})
 		]
 	});
-}, Te = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.DATEPICKER], n);
+}, Te = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.DATEPICKER], n, r.toUpperCase());
 	return /* @__PURE__ */ t(we, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, z = (e, t) => `
     // BORDERS
@@ -2023,11 +2023,11 @@ var R = "--DATEPICKER", we = ({ name: e, label: r, control: i, language: o = ee(
 			children: [p && (!y || !ee) && p, ee && y && y.message]
 		})]
 	});
-}, Ae = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.INPUT], n);
+}, Ae = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.INPUT], n, r.toUpperCase());
 	return /* @__PURE__ */ t(ke, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, je = (e, t) => `
   // BACKGROUNDS  
@@ -2354,11 +2354,11 @@ var Re = (e) => {
 		onSelect: () => n.onChange(r),
 		disabled: i.disabled ?? n.disabled
 	});
-}, ze = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.RADIO], n);
+}, ze = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.RADIO], n, r.toUpperCase());
 	return /* @__PURE__ */ t(Re, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, K = (e, t) => `
     // BORDERS
@@ -3064,11 +3064,11 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 			})
 		]
 	});
-}, Xe = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.SELECT], n);
+}, Xe = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.SELECT], n, r.toUpperCase());
 	return /* @__PURE__ */ t(Ye, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, Ze = (e, t) => `
   ~ .--SLIDER-rail {
@@ -3471,11 +3471,11 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 			}, e))
 		]
 	});
-}, nt = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.SLIDER], n);
+}, nt = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.SLIDER], n, r.toUpperCase());
 	return /* @__PURE__ */ t(tt, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 }, rt = (e, t) => `
   ~ .--SWITCH-span {
@@ -3814,14 +3814,14 @@ var Z = "--SELECT", Je = [], Ye = ({ name: e, label: r, control: i, options: o,
 			children: h ? h.message : c
 		})]
 	});
-}, ut = ({ theme: n, ...r }) => {
-	let { componentStyles: i } = e([o.SWITCH], n);
+}, ut = ({ theme: n, variant: r = "default", ...i }) => {
+	let { componentStyles: a } = e([o.SWITCH], n, r.toUpperCase());
 	return /* @__PURE__ */ t(lt, {
-		...r,
-		style: i
+		...i,
+		style: a
 	});
 };
 //#endregion
 export { Ae as a, A as c, ze as i, nt as n, Te as o, Xe as r, be as s, ut as t };
 
-//# sourceMappingURL=Switch-BS8iwAJ5.js.map
+//# sourceMappingURL=Switch-C7wjcrjU.js.map