@x15ventures/x15-ui-library 3.16.1 → 3.18.0

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js

@@ -6,7 +6,7 @@ import { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';
 import { FormFieldLabel } from '../../labels/FormFieldLabel';
 import { ValidationMessages } from '../../../../validation/ValidationMessages';
 import { Spinner } from '../../../../../design/spinner/Spinner';
-import { Icon } from '../../../../../design/icons/basicIcon/Icon';
+import { renderIcon } from '../../../../../../helpers/iconHelpers';
 import './inputCheckbox.css';
 export const InputCheckbox = props => /*#__PURE__*/React.createElement(HookFormWrapper, {
   formContext: props.formContext
@@ -64,11 +64,11 @@ const InputCheckboxField = ({
     isRequired,
     customContent
   };
-  const checkedIcon = icons?.checked ?? /*#__PURE__*/React.createElement(Icon, {
-    icon: "checkbox-checked"
+  const checkedIcon = renderIcon(icons?.checked, {
+    fallback: 'checkbox-checked'
   });
-  const uncheckedIcon = icons?.unchecked ?? /*#__PURE__*/React.createElement(Icon, {
-    icon: "checkbox-unchecked"
+  const uncheckedIcon = renderIcon(icons?.unchecked, {
+    fallback: 'checkbox-unchecked'
   });
   const inputProps = {
     type: 'checkbox',

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputCheckbox.js","names":["React","useEffect","useState","useFormContext","HookFormWrapper","FormFieldLabel","ValidationMessages","Spinner","Icon","InputCheckbox","props","createElement","formContext","InputCheckboxField","label","field","id","name","value","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","icons","customCssClasses","customContent","isTouched","setIsTouched","register","getFieldState","setValue","fieldState","shouldValidate","shouldDirty","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","checkedIcon","checked","icon","uncheckedIcon","unchecked","inputProps","type","String","className","labelId","htmlFor","position","CheckboxInput"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../../labels/FormFieldLabel';\nimport { ValidationMessages } from '../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../design/spinner/Spinner';\nimport { Icon } from '../../../../../design/icons/basicIcon/Icon';\n\nimport { InputCheckboxProps } from './inputCheckboxProps';\n\nimport './inputCheckbox.scss';\n\nexport const InputCheckbox: React.FC<InputCheckboxProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <InputCheckboxField { ...props } />\n  </HookFormWrapper>\n);\n\nconst InputCheckboxField: React.FC<InputCheckboxProps> = (\n  {\n    label,\n    field: {\n      id,\n      name,\n      value,\n      defaultChecked,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    icons,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { register, getFieldState, setValue } = useFormContext();\n  const fieldState = getFieldState(name);\n\n  // Initialize the form value with defaultChecked on mount\n  useEffect(() => {\n    if (defaultChecked) {\n      setValue(name, true, { shouldValidate: false, shouldDirty: false });\n    }\n  }, [name, setValue, defaultChecked, value]);\n\n  const wrapperCssClass = `formField checkBoxField ${ customCssClasses?.wrapper || '' } ${ isTouched ? 'touched' : '' }`;\n\n  const inputCssClass = `${ customCssClasses?.input || '' }${ fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const isRequired = validation && typeof validation.required !== 'undefined';\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    setIsTouched(true);\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: id,\n    isRequired,\n    customContent\n  };\n\n  const checkedIcon = icons?.checked ?? <Icon icon=\"checkbox-checked\" />;\n  const uncheckedIcon = icons?.unchecked ?? <Icon icon=\"checkbox-unchecked\" />;\n\n  const inputProps = {\n    type: 'checkbox',\n    id,\n    value: String(value),\n    className: inputCssClass,\n    'aria-required': isRequired,\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        value: defaultChecked ? true : value,\n        ...validation\n      }\n    )\n  };\n\n  return (\n    <div\n      className={ wrapperCssClass }\n    >\n      <label\n        id={ label.labelId || `${ id }_label` }\n        className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' }` }\n        htmlFor={ id }\n      >\n\n        { label.position === 'left'\n          && <FormFieldLabel { ...labelProps } /> }\n\n        <div className=\"inputContainer\">\n          <input { ...inputProps } />\n          { /* The input conveys the checked state, so the icons are decorative. */ }\n          <span className=\"checkboxIcons\" aria-hidden=\"true\">\n            <span className=\"checkboxIcon checkboxIconUnchecked\">{ uncheckedIcon }</span>\n            <span className=\"checkboxIcon checkboxIconChecked\">{ checkedIcon }</span>\n          </span>\n        </div>\n\n        { (!label?.position || label?.position === 'right')\n          && <FormFieldLabel { ...labelProps } /> }\n\n        {\n          showSpinner && <Spinner />\n        }\n\n        <ValidationMessages name={ name } validation={ validation } />\n      </label>\n    </div>\n  );\n};\n\nexport const CheckboxInput: React.FC<InputCheckboxProps> = (props) => <InputCheckbox { ...props } />;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InputCheckbox.js","names":["React","useEffect","useState","useFormContext","HookFormWrapper","FormFieldLabel","ValidationMessages","Spinner","renderIcon","InputCheckbox","props","createElement","formContext","InputCheckboxField","label","field","id","name","value","defaultChecked","onBlur","onChange","onTouched","validation","showSpinner","icons","customCssClasses","customContent","isTouched","setIsTouched","register","getFieldState","setValue","fieldState","shouldValidate","shouldDirty","wrapperCssClass","wrapper","inputCssClass","input","invalid","isRequired","required","HandleOnBlur","event","target","labelProps","inputId","checkedIcon","checked","fallback","uncheckedIcon","unchecked","inputProps","type","String","className","labelId","htmlFor","position","CheckboxInput"],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/InputCheckbox.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../../labels/FormFieldLabel';\nimport { ValidationMessages } from '../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../design/spinner/Spinner';\nimport { renderIcon } from '../../../../../../helpers/iconHelpers';\n\nimport { InputCheckboxProps } from './inputCheckboxProps';\n\nimport './inputCheckbox.scss';\n\nexport const InputCheckbox: React.FC<InputCheckboxProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <InputCheckboxField { ...props } />\n  </HookFormWrapper>\n);\n\nconst InputCheckboxField: React.FC<InputCheckboxProps> = (\n  {\n    label,\n    field: {\n      id,\n      name,\n      value,\n      defaultChecked,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    showSpinner,\n    icons,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { register, getFieldState, setValue } = useFormContext();\n  const fieldState = getFieldState(name);\n\n  // Initialize the form value with defaultChecked on mount\n  useEffect(() => {\n    if (defaultChecked) {\n      setValue(name, true, { shouldValidate: false, shouldDirty: false });\n    }\n  }, [name, setValue, defaultChecked, value]);\n\n  const wrapperCssClass = `formField checkBoxField ${ customCssClasses?.wrapper || '' } ${ isTouched ? 'touched' : '' }`;\n\n  const inputCssClass = `${ customCssClasses?.input || '' }${ fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const isRequired = validation && typeof validation.required !== 'undefined';\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    const { target } = event;\n    setIsTouched(true);\n    if (target) {\n      onTouched();\n      onBlur(event);\n    }\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: id,\n    isRequired,\n    customContent\n  };\n\n  const checkedIcon = renderIcon(icons?.checked, { fallback: 'checkbox-checked' });\n  const uncheckedIcon = renderIcon(icons?.unchecked, { fallback: 'checkbox-unchecked' });\n\n  const inputProps = {\n    type: 'checkbox',\n    id,\n    value: String(value),\n    className: inputCssClass,\n    'aria-required': isRequired,\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        value: defaultChecked ? true : value,\n        ...validation\n      }\n    )\n  };\n\n  return (\n    <div\n      className={ wrapperCssClass }\n    >\n      <label\n        id={ label.labelId || `${ id }_label` }\n        className={ `${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' }` }\n        htmlFor={ id }\n      >\n\n        { label.position === 'left'\n          && <FormFieldLabel { ...labelProps } /> }\n\n        <div className=\"inputContainer\">\n          <input { ...inputProps } />\n          { /* The input conveys the checked state, so the icons are decorative. */ }\n          <span className=\"checkboxIcons\" aria-hidden=\"true\">\n            <span className=\"checkboxIcon checkboxIconUnchecked\">{ uncheckedIcon }</span>\n            <span className=\"checkboxIcon checkboxIconChecked\">{ checkedIcon }</span>\n          </span>\n        </div>\n\n        { (!label?.position || label?.position === 'right')\n          && <FormFieldLabel { ...labelProps } /> }\n\n        {\n          showSpinner && <Spinner />\n        }\n\n        <ValidationMessages name={ name } validation={ validation } />\n      </label>\n    </div>\n  );\n};\n\nexport const CheckboxInput: React.FC<InputCheckboxProps> = (props) => <InputCheckbox { ...props } />;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.js

@@ -0,0 +1,167 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';
+import { FormFieldLabel } from '../../../labels/FormFieldLabel';
+import { ValidationMessages } from '../../../../../validation/ValidationMessages';
+import { Spinner } from '../../../../../../design/spinner/Spinner';
+import { renderIcon } from '../../../../../../../helpers/iconHelpers';
+import { cssClassesArrayToString } from '../../../../../../../helpers/arrayHelpers';
+import { generateButtonClass } from '../../../../../buttons/button.helpers';
+import './checkboxSwitch.css';
+export const DEFAULT_CHECKBOX_SWITCH_STATES = {
+  checked: {
+    label: 'On'
+  },
+  unchecked: {
+    label: 'Off'
+  }
+};
+export const DEFAULT_POWER_BUTTON_STATES = {
+  checked: {
+    label: 'On',
+    icon: 'switch'
+  },
+  unchecked: {
+    label: 'Off',
+    icon: 'switch'
+  }
+};
+export const CheckboxSwitchState = ({
+  state,
+  label,
+  icon,
+  cssClass,
+  buttonStyle,
+  hideLabel
+}) => {
+  const stateClass = state === 'checked' ? 'checkboxSwitchChecked' : 'checkboxSwitchUnchecked';
+  const appearanceClass = buttonStyle ? cssClassesArrayToString('checkboxSwitchButtonState', generateButtonClass({
+    cssClass: cssClass || '',
+    buttonStyle,
+    hideLabel
+  })) : cssClass;
+  return /*#__PURE__*/React.createElement("span", {
+    className: cssClassesArrayToString('checkboxSwitchState', stateClass, appearanceClass)
+  }, renderIcon(icon), !hideLabel && label && /*#__PURE__*/React.createElement("span", {
+    className: "checkboxSwitchStateLabel"
+  }, label));
+};
+export const CheckboxSwitch = props => /*#__PURE__*/React.createElement(HookFormWrapper, {
+  formContext: props.formContext
+}, /*#__PURE__*/React.createElement(CheckboxSwitchField, props));
+const CheckboxSwitchField = ({
+  label,
+  field: {
+    id,
+    name,
+    value,
+    defaultChecked,
+    disabled,
+    onBlur = () => {},
+    onChange = () => {},
+    onTouched = () => {}
+  },
+  validation,
+  variant = 'slide',
+  shape = 'round',
+  size = 'm',
+  states,
+  stateDisplay = 'split',
+  glowTheme = 'dark',
+  hideStateLabels = false,
+  showSpinner,
+  customCssClasses,
+  customContent
+}) => {
+  const [isTouched, setIsTouched] = useState(false);
+  const {
+    register,
+    getFieldState
+  } = useFormContext();
+  const fieldState = getFieldState(name);
+  const requiredRule = validation?.required;
+  const isRequired = typeof requiredRule === 'object' && requiredRule !== null ? requiredRule.value : Boolean(requiredRule);
+  const isSlide = variant === 'slide';
+  const isPowerButton = variant === 'powerButton';
+  // Power buttons are always a single icon-only circle.
+  const effectiveStateDisplay = isPowerButton ? 'single' : stateDisplay;
+  const effectiveHideStateLabels = isPowerButton || hideStateLabels;
+  const defaultStates = isPowerButton ? DEFAULT_POWER_BUTTON_STATES : DEFAULT_CHECKBOX_SWITCH_STATES;
+  // Button styles fight the slide thumb and power button cap, so those variants ignore them.
+  const stripButtonStyle = isSlide || isPowerButton ? {
+    buttonStyle: undefined
+  } : {};
+  const checkedState = {
+    ...defaultStates.checked,
+    ...states?.checked,
+    ...stripButtonStyle
+  };
+  const uncheckedState = {
+    ...defaultStates.unchecked,
+    ...states?.unchecked,
+    ...stripButtonStyle
+  };
+  const wrapperCssClass = ['formField', 'checkboxSwitchField', `checkboxSwitch_${variant}`, `checkboxSwitch_${shape}`, `checkboxSwitch_${size}`, `checkboxSwitch_${effectiveStateDisplay}`, variant === 'glow' && glowTheme === 'light' ? 'checkboxSwitch_glowLight' : '', effectiveHideStateLabels ? 'checkboxSwitch_hiddenStateLabels' : '', isTouched ? 'touched' : '', customCssClasses?.wrapper || ''].filter(Boolean).join(' ');
+  const inputCssClass = `${customCssClasses?.input || ''}${fieldState?.invalid ? ' invalidField' : ''}`;
+  const HandleOnBlur = event => {
+    setIsTouched(true);
+    onTouched();
+    onBlur(event);
+  };
+  const labelProps = {
+    ...label,
+    inputId: id,
+    isRequired,
+    customContent
+  };
+  const inputProps = {
+    type: 'checkbox',
+    role: 'switch',
+    id,
+    className: inputCssClass,
+    defaultChecked,
+    'aria-required': isRequired,
+    'aria-invalid': fieldState.invalid,
+    ...(fieldState.invalid ? {
+      'aria-describedby': `${name}_errors`
+    } : {}),
+    ...(typeof value === 'string' ? {
+      value
+    } : {}),
+    ...register(name, {
+      onChange,
+      onBlur: HandleOnBlur,
+      disabled,
+      ...validation
+    })
+  };
+  const isLabelLeft = label.position === 'left';
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperCssClass
+  }, /*#__PURE__*/React.createElement("label", {
+    id: label.labelId || `${id}_label`,
+    className: `checkboxSwitchLabel ${customCssClasses?.label || ''} ${showSpinner ? 'withSpinner' : ''}`,
+    htmlFor: id
+  }, isLabelLeft && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), /*#__PURE__*/React.createElement("span", {
+    className: "checkboxSwitchControl"
+  }, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("span", {
+    className: "checkboxSwitchTrack",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement(CheckboxSwitchState, _extends({}, checkedState, {
+    state: "checked",
+    hideLabel: effectiveHideStateLabels
+  })), /*#__PURE__*/React.createElement(CheckboxSwitchState, _extends({}, uncheckedState, {
+    state: "unchecked",
+    hideLabel: effectiveHideStateLabels
+  })), isSlide && /*#__PURE__*/React.createElement("span", {
+    className: "checkboxSwitchThumb"
+  }))), !isLabelLeft && /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), showSpinner && /*#__PURE__*/React.createElement(Spinner, null)), /*#__PURE__*/React.createElement(ValidationMessages, {
+    name: name,
+    validation: validation
+  }));
+};
+export default CheckboxSwitch;
+//# sourceMappingURL=CheckboxSwitch.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSwitch.js","names":["_extends","React","useState","useFormContext","HookFormWrapper","FormFieldLabel","ValidationMessages","Spinner","renderIcon","cssClassesArrayToString","generateButtonClass","DEFAULT_CHECKBOX_SWITCH_STATES","checked","label","unchecked","DEFAULT_POWER_BUTTON_STATES","icon","CheckboxSwitchState","state","cssClass","buttonStyle","hideLabel","stateClass","appearanceClass","createElement","className","CheckboxSwitch","props","formContext","CheckboxSwitchField","field","id","name","value","defaultChecked","disabled","onBlur","onChange","onTouched","validation","variant","shape","size","states","stateDisplay","glowTheme","hideStateLabels","showSpinner","customCssClasses","customContent","isTouched","setIsTouched","register","getFieldState","fieldState","requiredRule","required","isRequired","Boolean","isSlide","isPowerButton","effectiveStateDisplay","effectiveHideStateLabels","defaultStates","stripButtonStyle","undefined","checkedState","uncheckedState","wrapperCssClass","wrapper","filter","join","inputCssClass","input","invalid","HandleOnBlur","event","labelProps","inputId","inputProps","type","role","isLabelLeft","position","labelId","htmlFor"],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/CheckboxSwitch.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';\nimport { FormFieldLabel } from '../../../labels/FormFieldLabel';\nimport { ValidationMessages } from '../../../../../validation/ValidationMessages';\nimport { Spinner } from '../../../../../../design/spinner/Spinner';\nimport { renderIcon } from '../../../../../../../helpers/iconHelpers';\nimport { cssClassesArrayToString } from '../../../../../../../helpers/arrayHelpers';\nimport { generateButtonClass } from '../../../../../buttons/button.helpers';\nimport { CheckboxSwitchProps, CheckboxSwitchStateProps } from './checkboxSwitchProps';\n\nimport './checkboxSwitch.scss';\n\nexport const DEFAULT_CHECKBOX_SWITCH_STATES = {\n  checked: { label: 'On' },\n  unchecked: { label: 'Off' }\n};\n\nexport const DEFAULT_POWER_BUTTON_STATES = {\n  checked: { label: 'On', icon: 'switch' },\n  unchecked: { label: 'Off', icon: 'switch' }\n};\n\ninterface CheckboxSwitchStateContentProps extends CheckboxSwitchStateProps {\n  state: 'checked' | 'unchecked';\n  hideLabel: boolean;\n}\n\nexport const CheckboxSwitchState: React.FC<CheckboxSwitchStateContentProps> = (\n  {\n    state,\n    label,\n    icon,\n    cssClass,\n    buttonStyle,\n    hideLabel\n  }\n) => {\n  const stateClass = state === 'checked' ? 'checkboxSwitchChecked' : 'checkboxSwitchUnchecked';\n\n  const appearanceClass = buttonStyle\n    ? cssClassesArrayToString('checkboxSwitchButtonState', generateButtonClass({ cssClass: cssClass || '', buttonStyle, hideLabel }))\n    : cssClass;\n\n  return (\n    <span className={ cssClassesArrayToString('checkboxSwitchState', stateClass, appearanceClass) }>\n      { renderIcon(icon) }\n      { !hideLabel && label && <span className=\"checkboxSwitchStateLabel\">{ label }</span> }\n    </span>\n  );\n};\n\nexport const CheckboxSwitch: React.FC<CheckboxSwitchProps> = (props) => (\n  <HookFormWrapper formContext={ props.formContext }>\n    <CheckboxSwitchField { ...props } />\n  </HookFormWrapper>\n);\n\nconst CheckboxSwitchField: React.FC<CheckboxSwitchProps> = (\n  {\n    label,\n    field: {\n      id,\n      name,\n      value,\n      defaultChecked,\n      disabled,\n      onBlur = () => {},\n      onChange = () => {},\n      onTouched = () => {}\n    },\n    validation,\n    variant = 'slide',\n    shape = 'round',\n    size = 'm',\n    states,\n    stateDisplay = 'split',\n    glowTheme = 'dark',\n    hideStateLabels = false,\n    showSpinner,\n    customCssClasses,\n    customContent\n  }\n) => {\n  const [isTouched, setIsTouched] = useState(false);\n  const { register, getFieldState } = useFormContext();\n  const fieldState = getFieldState(name);\n\n  const requiredRule = validation?.required;\n  const isRequired = typeof requiredRule === 'object' && requiredRule !== null\n    ? requiredRule.value\n    : Boolean(requiredRule);\n\n  const isSlide = variant === 'slide';\n  const isPowerButton = variant === 'powerButton';\n  // Power buttons are always a single icon-only circle.\n  const effectiveStateDisplay = isPowerButton ? 'single' : stateDisplay;\n  const effectiveHideStateLabels = isPowerButton || hideStateLabels;\n  const defaultStates = isPowerButton ? DEFAULT_POWER_BUTTON_STATES : DEFAULT_CHECKBOX_SWITCH_STATES;\n  // Button styles fight the slide thumb and power button cap, so those variants ignore them.\n  const stripButtonStyle = isSlide || isPowerButton ? { buttonStyle: undefined } : {};\n  const checkedState = { ...defaultStates.checked, ...states?.checked, ...stripButtonStyle };\n  const uncheckedState = { ...defaultStates.unchecked, ...states?.unchecked, ...stripButtonStyle };\n\n  const wrapperCssClass = [\n    'formField',\n    'checkboxSwitchField',\n    `checkboxSwitch_${ variant }`,\n    `checkboxSwitch_${ shape }`,\n    `checkboxSwitch_${ size }`,\n    `checkboxSwitch_${ effectiveStateDisplay }`,\n    variant === 'glow' && glowTheme === 'light' ? 'checkboxSwitch_glowLight' : '',\n    effectiveHideStateLabels ? 'checkboxSwitch_hiddenStateLabels' : '',\n    isTouched ? 'touched' : '',\n    customCssClasses?.wrapper || ''\n  ].filter(Boolean).join(' ');\n\n  const inputCssClass = `${ customCssClasses?.input || '' }${ fieldState?.invalid ? ' invalidField' : '' }`;\n\n  const HandleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    setIsTouched(true);\n    onTouched();\n    onBlur(event);\n  };\n\n  const labelProps = {\n    ...label,\n    inputId: id,\n    isRequired,\n    customContent\n  };\n\n  const inputProps = {\n    type: 'checkbox',\n    role: 'switch',\n    id,\n    className: inputCssClass,\n    defaultChecked,\n    'aria-required': isRequired,\n    'aria-invalid': fieldState.invalid,\n    ...(fieldState.invalid ? { 'aria-describedby': `${ name }_errors` } : {}),\n    ...(typeof value === 'string' ? { value } : {}),\n    ...register(\n      name,\n      {\n        onChange,\n        onBlur: HandleOnBlur,\n        disabled,\n        ...validation\n      }\n    )\n  };\n\n  const isLabelLeft = label.position === 'left';\n\n  return (\n    <div className={ wrapperCssClass }>\n      <label\n        id={ label.labelId || `${ id }_label` }\n        className={ `checkboxSwitchLabel ${ customCssClasses?.label || '' } ${ showSpinner ? 'withSpinner' : '' }` }\n        htmlFor={ id }\n      >\n        { isLabelLeft && <FormFieldLabel { ...labelProps } /> }\n\n        <span className=\"checkboxSwitchControl\">\n          <input { ...inputProps } />\n          { /* The input conveys the checked state, so the state spans are decorative. */ }\n          <span className=\"checkboxSwitchTrack\" aria-hidden=\"true\">\n            <CheckboxSwitchState { ...checkedState } state=\"checked\" hideLabel={ effectiveHideStateLabels } />\n            <CheckboxSwitchState { ...uncheckedState } state=\"unchecked\" hideLabel={ effectiveHideStateLabels } />\n            { isSlide && <span className=\"checkboxSwitchThumb\" /> }\n          </span>\n        </span>\n\n        { !isLabelLeft && <FormFieldLabel { ...labelProps } /> }\n\n        { showSpinner && <Spinner /> }\n      </label>\n\n      <ValidationMessages name={ name } validation={ validation } />\n    </div>\n  );\n};\n\nexport default CheckboxSwitch;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitch.css

@@ -0,0 +1,306 @@
+/* Popovers */
+.checkboxSwitchField {
+  --checkboxSwitchHeight: 30px;
+  --checkboxSwitchFontSize: 15px;
+  --checkboxSwitchIconSize: 15px;
+  --checkboxSwitchPaddingInline: 10px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapM, 3px);
+  --checkboxSwitchRadius: calc(var(--checkboxSwitchHeight) / 2);
+}
+.checkboxSwitchField.checkboxSwitch_xs {
+  --checkboxSwitchHeight: 20px;
+  --checkboxSwitchFontSize: 11px;
+  --checkboxSwitchIconSize: 11px;
+  --checkboxSwitchPaddingInline: 5px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapXs, 1px);
+}
+.checkboxSwitchField.checkboxSwitch_s {
+  --checkboxSwitchHeight: 25px;
+  --checkboxSwitchFontSize: 13px;
+  --checkboxSwitchIconSize: 13px;
+  --checkboxSwitchPaddingInline: 5px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapS, 2px);
+}
+.checkboxSwitchField.checkboxSwitch_m {
+  --checkboxSwitchHeight: 30px;
+  --checkboxSwitchFontSize: 15px;
+  --checkboxSwitchIconSize: 15px;
+  --checkboxSwitchPaddingInline: 10px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapM, 3px);
+}
+.checkboxSwitchField.checkboxSwitch_l {
+  --checkboxSwitchHeight: 40px;
+  --checkboxSwitchFontSize: 17px;
+  --checkboxSwitchIconSize: 17px;
+  --checkboxSwitchPaddingInline: 10px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapL, 4px);
+}
+.checkboxSwitchField.checkboxSwitch_xl {
+  --checkboxSwitchHeight: 50px;
+  --checkboxSwitchFontSize: 19px;
+  --checkboxSwitchIconSize: 19px;
+  --checkboxSwitchPaddingInline: 15px;
+  --checkboxSwitchThumbGap: var(--checkboxSwitchThumbGapXl, 5px);
+}
+.checkboxSwitchField.checkboxSwitch_rectangular {
+  --checkboxSwitchRadius: var(--checkboxSwitchRectangularRadius, 5px);
+}
+.checkboxSwitchField .checkboxSwitchLabel {
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.checkboxSwitchField .checkboxSwitchControl {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox] {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0.01;
+  cursor: pointer;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox]:disabled {
+  cursor: not-allowed;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox]:disabled ~ .checkboxSwitchTrack {
+  opacity: var(--checkboxSwitchDisabledOpacity, 0.5);
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox]:focus-visible ~ .checkboxSwitchTrack {
+  outline: var(--inputFocusOutline, 1px dotted);
+  outline-offset: 2px;
+}
+.checkboxSwitchField .checkboxSwitchControl input[type=checkbox].invalidField ~ .checkboxSwitchTrack {
+  border-color: var(--inputErrorBorderColor, #c00);
+}
+.checkboxSwitchField .checkboxSwitchTrack {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  height: var(--checkboxSwitchHeight);
+  border: var(--checkboxSwitchBorder, 1px solid #e5ebef);
+  border-radius: var(--checkboxSwitchRadius);
+  background: var(--checkboxSwitchTrackBg, #e5ebef);
+  color: var(--checkboxSwitchTrackFgColor, #24282b);
+  font-size: var(--checkboxSwitchFontSize);
+  line-height: 1;
+  overflow: hidden;
+  transition: background-color var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField .checkboxSwitchState {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--checkboxSwitchStateGap, 5px);
+  align-items: center;
+  justify-content: center;
+  grid-row: 1;
+  min-width: var(--checkboxSwitchHeight);
+  padding: 0 var(--checkboxSwitchPaddingInline);
+  white-space: nowrap;
+  transition: opacity var(--checkboxSwitchTransition, 0.2s ease), background-color var(--checkboxSwitchTransition, 0.2s ease), transform var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField .checkboxSwitchState .icon {
+  font-size: var(--checkboxSwitchIconSize);
+}
+.checkboxSwitchField .checkboxSwitchState .iconSvg {
+  width: var(--checkboxSwitchIconSize);
+  height: var(--checkboxSwitchIconSize);
+}
+.checkboxSwitchField .checkboxSwitchChecked {
+  grid-column: 1;
+}
+.checkboxSwitchField .checkboxSwitchUnchecked {
+  grid-column: 2;
+}
+.checkboxSwitchField.checkboxSwitch_slide .checkboxSwitchThumb {
+  position: absolute;
+  top: var(--checkboxSwitchThumbGap);
+  left: var(--checkboxSwitchThumbGap);
+  z-index: 1;
+  box-sizing: border-box;
+  width: calc(50% - var(--checkboxSwitchThumbGap));
+  height: calc(100% - var(--checkboxSwitchThumbGap) * 2);
+  border-radius: max(0px, var(--checkboxSwitchRadius) - var(--checkboxSwitchThumbGap));
+  background: var(--checkboxSwitchThumbBg, #fff);
+  box-shadow: var(--checkboxSwitchThumbShadow, 0 1px 3px rgba(0, 0, 0, 0.35));
+  transition: left var(--checkboxSwitchTransition, 0.2s ease), transform var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_slide .checkboxSwitchChecked {
+  opacity: 0;
+  color: var(--checkboxSwitchTrackCheckedFgColor, #fff);
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack {
+  background: var(--checkboxSwitchTrackCheckedBg, #516472);
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchThumb {
+  left: calc(100% - var(--checkboxSwitchThumbGap));
+  transform: translateX(-100%);
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  opacity: 1;
+}
+.checkboxSwitchField.checkboxSwitch_slide input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchUnchecked {
+  opacity: 0;
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchTrack {
+  grid-template-columns: 1fr;
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchState {
+  grid-column: 1;
+  box-sizing: border-box;
+  min-width: calc(var(--checkboxSwitchHeight) * 2);
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchUnchecked {
+  padding-left: calc(var(--checkboxSwitchHeight) + 5px);
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchChecked {
+  padding-right: calc(var(--checkboxSwitchHeight) + 5px);
+}
+.checkboxSwitchField.checkboxSwitch_slide.checkboxSwitch_round .checkboxSwitchThumb {
+  width: auto;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+.checkboxSwitchField.checkboxSwitch_rocker .checkboxSwitchState:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerRaisedBg, linear-gradient(to bottom, #fff 0%, #f6f8fa 60%, #e5ebef 100%));
+  color: var(--checkboxSwitchRockerRaisedFgColor, #384147);
+}
+.checkboxSwitchField.checkboxSwitch_rocker .checkboxSwitchChecked {
+  border-right: var(--checkboxSwitchBorder, 1px solid #e5ebef);
+}
+.checkboxSwitchField.checkboxSwitch_rocker input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchUnchecked:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerPressedBg, linear-gradient(to bottom, #c2d0d9 0%, #d3dee4 35%, #e5ebef 100%));
+  color: var(--checkboxSwitchRockerPressedFgColor, #181a1b);
+}
+.checkboxSwitchField.checkboxSwitch_rocker input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerCheckedPressedBg, linear-gradient(to bottom, #24282b 0%, #384147 35%, #516472 100%));
+  color: var(--checkboxSwitchRockerCheckedPressedFgColor, #fff);
+}
+.checkboxSwitchField.checkboxSwitch_rocker.checkboxSwitch_single input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchUnchecked:not(.checkboxSwitchButtonState) {
+  background: var(--checkboxSwitchRockerRaisedBg, linear-gradient(to bottom, #fff 0%, #f6f8fa 60%, #e5ebef 100%));
+  color: var(--checkboxSwitchRockerRaisedFgColor, #384147);
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_glowLight {
+  --checkboxSwitchGlowTrackBg: var(--checkboxSwitchGlowLightTrackBg, linear-gradient(to bottom, #fff 0%, #eef2f4 100%));
+  --checkboxSwitchGlowInactiveFgColor: var(--checkboxSwitchGlowLightInactiveFgColor, #7e97a7);
+  --checkboxSwitchGlowOffFgColor: var(--checkboxSwitchGlowLightOffFgColor, #24282b);
+  --checkboxSwitchGlowOnFgColor: var(--checkboxSwitchGlowLightOnFgColor, color-mix(in srgb, var(--checkboxSwitchGlowColor, #2bff88) 55%, #000));
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_round.checkboxSwitch_hiddenStateLabels .checkboxSwitchTrack {
+  width: var(--checkboxSwitchHeight);
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_round.checkboxSwitch_hiddenStateLabels .checkboxSwitchState {
+  min-width: 0;
+  padding: 0;
+}
+.checkboxSwitchField.checkboxSwitch_glow.checkboxSwitch_round.checkboxSwitch_hiddenStateLabels.checkboxSwitch_split .checkboxSwitchTrack {
+  width: calc(var(--checkboxSwitchHeight) * 2);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchTrack {
+  background: var(--checkboxSwitchGlowTrackBg, linear-gradient(to bottom, #384147 0%, #24282b 100%));
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchState {
+  transition: color var(--checkboxSwitchTransition, 0.2s ease), text-shadow var(--checkboxSwitchTransition, 0.2s ease), opacity var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchState:not(.checkboxSwitchButtonState) {
+  color: var(--checkboxSwitchGlowInactiveFgColor, #7e97a7);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchState .iconSvg {
+  transition: filter var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_glow .checkboxSwitchChecked {
+  border-right: var(--checkboxSwitchBorder, 1px solid #e5ebef);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchUnchecked:not(.checkboxSwitchButtonState) {
+  color: var(--checkboxSwitchGlowOffFgColor, #e5ebef);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked:not(.checkboxSwitchButtonState) {
+  color: var(--checkboxSwitchGlowOnFgColor, #e8fff2);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  text-shadow: 0 0 var(--checkboxSwitchGlowRadius, 5px) var(--checkboxSwitchGlowColor, #2bff88), 0 0 calc(var(--checkboxSwitchGlowRadius, 5px) * 2) var(--checkboxSwitchGlowColor, #2bff88);
+}
+.checkboxSwitchField.checkboxSwitch_glow input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked .iconSvg {
+  filter: drop-shadow(0 0 calc(var(--checkboxSwitchGlowRadius, 5px) / 2) var(--checkboxSwitchGlowColor, #2bff88)) drop-shadow(0 0 var(--checkboxSwitchGlowRadius, 5px) var(--checkboxSwitchGlowColor, #2bff88));
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchTrack {
+  width: var(--checkboxSwitchHeight);
+  border-radius: 50%;
+  background: var(--checkboxSwitchPowerButtonBezelBg, conic-gradient(from -45deg, #fff 0%, #ddd 50%, #fff 100%));
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchTrack::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: var(--checkboxSwitchPowerButtonCapInset, 15%);
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: var(--checkboxSwitchPowerButtonCapBorder, 1px solid #ddd);
+  background: var(--checkboxSwitchPowerButtonCapBg, radial-gradient(circle at bottom right, #fff 0%, #ddd 50%, #ccc 100%));
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchState {
+  position: relative;
+  z-index: 2;
+  min-width: 0;
+  padding: 0;
+  color: var(--checkboxSwitchPowerButtonOffFgColor, #ccc);
+  text-shadow: var(--checkboxSwitchPowerButtonOffShadow, 0 0 1px #888);
+  transition: color var(--checkboxSwitchTransition, 0.2s ease), text-shadow var(--checkboxSwitchTransition, 0.2s ease);
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchState .icon {
+  font-size: max(11px, var(--checkboxSwitchHeight) * 0.36);
+}
+.checkboxSwitchField.checkboxSwitch_powerButton .checkboxSwitchState .iconSvg {
+  width: max(11px, var(--checkboxSwitchHeight) * 0.36);
+  height: max(11px, var(--checkboxSwitchHeight) * 0.36);
+}
+.checkboxSwitchField.checkboxSwitch_powerButton input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  color: var(--checkboxSwitchPowerButtonOnFgColor, #f00);
+  text-shadow: var(--checkboxSwitchPowerButtonOnShadow, 0 0 1px #030);
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) .checkboxSwitchTrack {
+  grid-template-columns: 1fr;
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) .checkboxSwitchState {
+  grid-column: 1;
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) .checkboxSwitchChecked {
+  border-right: 0;
+}
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchUnchecked,
+.checkboxSwitchField.checkboxSwitch_single:not(.checkboxSwitch_slide) input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchChecked {
+  visibility: hidden;
+}
+.checkboxSwitchField .checkboxSwitchTrack .checkboxSwitchState.checkboxSwitchButtonState {
+  box-sizing: border-box;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  min-width: var(--checkboxSwitchHeight);
+  margin: 0;
+  padding: 0 var(--checkboxSwitchPaddingInline);
+  border-radius: 0;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: inherit;
+}
+.checkboxSwitchField.checkboxSwitch_split:not(.checkboxSwitch_slide) input[type=checkbox]:checked ~ .checkboxSwitchTrack .checkboxSwitchUnchecked.checkboxSwitchButtonState,
+.checkboxSwitchField.checkboxSwitch_split:not(.checkboxSwitch_slide) input[type=checkbox]:not(:checked) ~ .checkboxSwitchTrack .checkboxSwitchChecked.checkboxSwitchButtonState {
+  opacity: var(--checkboxSwitchButtonInactiveOpacity, 0.4);
+}
+@media (prefers-reduced-motion: reduce) {
+  .checkboxSwitchField .checkboxSwitchTrack,
+  .checkboxSwitchField .checkboxSwitchState,
+  .checkboxSwitchField .checkboxSwitchThumb {
+    transition: none;
+  }
+}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkboxSwitchProps.js.map

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxSwitchProps.js","names":[],"sources":["../../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/checkboxSwitch/checkboxSwitchProps.ts"],"sourcesContent":["import { ReactNode } from 'react';\nimport {\n  CustomContentProps,\n  CustomFieldCssClassesProps,\n  FieldProps,\n  FormFieldProps,\n  LabelProps\n} from '../../../../formFieldWrapper/formFieldProps';\nimport { IconSource } from '../../../../../../../helpers/iconHelpers';\nimport { InputCheckboxValidationProps } from '../inputCheckboxProps';\nimport { ButtonStyles } from '../../../../../buttons/button.interface';\n\nexport type CheckboxSwitchSize = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n/** `slide` moves a thumb across a track; `rocker` presses the active half down like a light switch; `glow` lights up the \"on\" content like a power button; `powerButton` is a circular icon-only button with a raised cap. */\nexport type CheckboxSwitchVariant = 'slide' | 'rocker' | 'glow' | 'powerButton';\n\n/** `round` uses a circular slide thumb; `ellipse` stretches the thumb across half the track. Rocker and glow switches treat both as pill shaped. */\nexport type CheckboxSwitchShape = 'round' | 'ellipse' | 'rectangular';\n\n/** `split` shows both states side by side; `single` shows only the current state as one button. Slide switches always show one state. */\nexport type CheckboxSwitchStateDisplay = 'split' | 'single';\n\n/** Only applies to the `glow` variant. */\nexport type CheckboxSwitchGlowTheme = 'dark' | 'light';\n\nexport type CheckboxSwitchButtonStyle = Omit<ButtonStyles, 'size'>;\n\nexport interface CheckboxSwitchLabelProps extends Omit<LabelProps, 'position'> {\n  position?: 'left' | 'right';\n}\n\nexport interface CheckboxSwitchFieldProps extends Pick<FieldProps, 'id' | 'name' | 'disabled' | 'onChange' | 'onBlur' | 'onTouched'> {\n  /** Submitted when checked. When omitted the form value is a boolean. */\n  value?: string;\n  defaultChecked?: boolean;\n}\n\nexport interface CheckboxSwitchStateProps {\n  /** Visible text for this state. */\n  label?: ReactNode;\n  icon?: IconSource;\n  cssClass?: string;\n  /** Library button appearance for this state. Size and shape come from the switch; ignored by the `slide` variant. */\n  buttonStyle?: CheckboxSwitchButtonStyle;\n}\n\nexport interface CheckboxSwitchStatesProps {\n  checked?: CheckboxSwitchStateProps;\n  unchecked?: CheckboxSwitchStateProps;\n}\n\nexport interface CheckboxSwitchProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation' | 'separateLabelAndField'> {\n  label: CheckboxSwitchLabelProps;\n  field: CheckboxSwitchFieldProps;\n  validation?: InputCheckboxValidationProps;\n  variant?: CheckboxSwitchVariant;\n  shape?: CheckboxSwitchShape;\n  size?: CheckboxSwitchSize;\n  states?: CheckboxSwitchStatesProps;\n  stateDisplay?: CheckboxSwitchStateDisplay;\n  glowTheme?: CheckboxSwitchGlowTheme;\n  /** Visually hides the per-state labels while keeping any state icons. */\n  hideStateLabels?: boolean;\n  showSpinner?: boolean;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport {\n  CustomContentProps,\n  CustomFieldCssClassesProps,\n  FieldProps,\n  FormFieldProps,\n  LabelProps,\n  ValidationProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' | 'position'> {\n  position?: 'left' | 'right';\n}\n\nexport interface InputCheckboxIconsProps {\n  checked: string | ReactNode | ReactElement;\n  unchecked: string | ReactNode | ReactElement;\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' | 'placeholder' | 'value' | 'defaultValue' | 'referenceDate' | 'includeEmptyOption' | 'options'> {\n  value: boolean | string;\n  defaultChecked?: boolean;\n  defaultValue?: boolean | string | number | readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<TFieldValue = unknown, TFormValues = unknown>\n  extends Omit<ValidationProps<TFieldValue, TFormValues>, 'validate'> {\n}\n\nexport interface InputCheckboxProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation'> {\n  label: InputCheckboxLabelProps,\n  field: InputCheckboxFieldProps,\n  validation?: InputCheckboxValidationProps;\n  showSpinner?: boolean;\n  icons?: InputCheckboxIconsProps;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"inputCheckboxProps.js","names":[],"sources":["../../../../../../../../src/components/form/formFields/subComponents/inputs/checkbox/inputCheckboxProps.ts"],"sourcesContent":["import { IconSource } from '../../../../../../helpers/iconHelpers';\nimport {\n  CustomContentProps,\n  CustomFieldCssClassesProps,\n  FieldProps,\n  FormFieldProps,\n  LabelProps,\n  ValidationProps\n} from '../../../formFieldWrapper/formFieldProps';\n\nexport interface InputCheckboxLabelProps extends Omit<LabelProps, 'hide' | 'position'> {\n  position?: 'left' | 'right';\n}\n\nexport interface InputCheckboxIconsProps {\n  checked: IconSource;\n  unchecked: IconSource;\n}\n\nexport interface InputCheckboxFieldProps extends Omit<FieldProps, 'type' | 'placeholder' | 'value' | 'defaultValue' | 'referenceDate' | 'includeEmptyOption' | 'options'> {\n  value: boolean | string;\n  defaultChecked?: boolean;\n  defaultValue?: boolean | string | number | readonly string[];\n}\n\nexport interface InputCheckboxValidationProps<TFieldValue = unknown, TFormValues = unknown>\n  extends Omit<ValidationProps<TFieldValue, TFormValues>, 'validate'> {\n}\n\nexport interface InputCheckboxProps extends Omit<FormFieldProps, 'label' | 'field' | 'layout' | 'validation'> {\n  label: InputCheckboxLabelProps,\n  field: InputCheckboxFieldProps,\n  validation?: InputCheckboxValidationProps;\n  showSpinner?: boolean;\n  icons?: InputCheckboxIconsProps;\n  customCssClasses?: CustomFieldCssClassesProps;\n  customContent?: CustomContentProps;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/components/form/formFields/subComponents/inputs/file/dragAndDrop/DragAndDropFileUpload.js

@@ -2,8 +2,8 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { arrowUpFromBracket } from '@x15ventures/x15-ui-library-icons/iconDefinitions';
-import { SvgIcon } from '@x15ventures/x15-ui-library-icons/svgIcon/SvgIcon';
 import { useFormContext } from 'react-hook-form';
+import { renderIcon } from '../../../../../../../helpers/iconHelpers';
 import { HookFormWrapper } from '../../../../../hookFormWrapper/HookFormWrapper';
 import { Spinner } from '../../../../../../design/spinner/Spinner';
 import { FormFieldLabel } from '../../../../subComponents/labels/FormFieldLabel';
@@ -31,9 +31,7 @@ const DragAndDropFileUploadField = ({
     color: 'primary',
     variant: 'outline'
   },
-  labelUploadIcon = /*#__PURE__*/React.createElement(SvgIcon, {
-    svgDefinition: arrowUpFromBracket
-  }),
+  labelUploadIcon = arrowUpFromBracket,
   multiple = false,
   restrictionsTxt = '',
   validFiles = {
@@ -168,7 +166,7 @@ const DragAndDropFileUploadField = ({
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "dragAndDropFileUploadLabel"
-  }, labelUploadIcon || null, /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), restrictionsTxt && /*#__PURE__*/React.createElement("span", {
+  }, renderIcon(labelUploadIcon), /*#__PURE__*/React.createElement(FormFieldLabel, labelProps), restrictionsTxt && /*#__PURE__*/React.createElement("span", {
     className: "fileRestrictionsText"
   }, restrictionsTxt)), /*#__PURE__*/React.createElement("span", {
     className: "inputContainer"