ods-ant 0.2.0 → 0.4.0

package/dist-lib/forms/Checkbox.cjs

@@ -0,0 +1,275 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`./FieldShell.cjs`),n=require(`../fieldProps-CuWfEbFx.cjs`);let r=require(`antd`),i=require(`react`),a=require(`react/jsx-runtime`);var o=`ds-checkbox-styles`,s=({dsSize:s=`md`,dsStatus:c=`default`,className:l=``,fieldLabel:u,fieldRequired:d,fieldDescription:f,fieldError:p,fieldActions:m,containerStyle:h,clear:g,clearable:_=!1,clearLabel:v,clearVisibility:y=`always`,onClear:b,onValueChange:x,clearToValue:S=!1,id:C,checked:w,children:T,...E})=>{(0,i.useEffect)(()=>{if(typeof document<`u`){let t=document.getElementById(o);t||(t=document.createElement(`style`),t.id=o,document.head.appendChild(t));let{checkbox:n}=e.dsSemanticTokens;t.textContent=`
+        .ds-checkbox.ant-checkbox-wrapper {
+          align-items: center;
+        }
+
+        .ds-checkbox .ant-checkbox {
+          top: 0;
+        }
+
+        .ds-checkbox .ant-checkbox .ant-checkbox-inner {
+          border-radius: ${n.radius}px;
+          border-color: ${n.border.default};
+          border-width: ${n.borderWidth.default}px;
+          background-color: ${n.background.default};
+          transition: none !important;
+          animation: none !important;
+        }
+
+        .ds-checkbox .ant-checkbox::after,
+        .ds-checkbox .ant-checkbox .ant-checkbox-inner::after {
+          transition: none !important;
+          animation: none !important;
+        }
+
+        .ds-checkbox .ant-checkbox-input:focus-visible + .ant-checkbox-inner {
+          outline: 2px solid ${n.border.hover};
+          outline-offset: 2px;
+        }
+
+        .ds-checkbox.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          border-color: ${n.border.default};
+          border-width: ${n.borderWidth.default}px;
+          background-color: ${n.background.default};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner {
+          border-color: ${n.border.checked};
+          background-color: ${n.background.checked};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          border-color: ${n.mark.checked};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner {
+          border-color: ${n.border.checked} !important;
+          background-color: ${n.background.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          content: '';
+          position: absolute;
+          inset-inline-start: 50%;
+          top: 50%;
+          margin: 0;
+          background-color: ${n.mark.indeterminate} !important;
+          border: none !important;
+          border-radius: 1px;
+          transform: translate(-50%, -50%) !important;
+          opacity: 1;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          background-color: ${n.mark.indeterminate} !important;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          border-color: ${n.border.error};
+        }
+
+        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          border-color: ${n.border.error};
+          border-width: ${n.borderWidth.default}px;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner {
+          border-color: ${n.border.error};
+          background-color: ${n.background.errorChecked};
+        }
+
+        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked:hover .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate:hover .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked:active .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate:active .ant-checkbox-inner {
+          border-color: ${n.border.error};
+          background-color: ${n.background.errorChecked};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled .ant-checkbox-inner,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox .ant-checkbox-inner {
+          background-color: ${n.background.disabled};
+          border-color: transparent;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after,
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          border-color: ${n.mark.checked};
+          opacity: 0.95;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner::after,
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate::after {
+          border-width: 0 !important;
+          background-color: ${n.mark.indeterminate} !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox .ant-checkbox-inner {
+          width: ${n.size.sm}px;
+          height: ${n.size.sm}px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          width: 5px;
+          height: 9px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          width: ${n.indeterminate.sm.width}px !important;
+          height: ${n.indeterminate.sm.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox .ant-checkbox-inner {
+          width: ${n.size.md}px;
+          height: ${n.size.md}px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          width: 6px;
+          height: 10px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          width: ${n.indeterminate.md.width}px !important;
+          height: ${n.indeterminate.md.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox .ant-checkbox-inner {
+          width: ${n.size.lg}px;
+          height: ${n.size.lg}px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          width: 7px;
+          height: 11px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          width: ${n.indeterminate.lg.width}px !important;
+          height: ${n.indeterminate.lg.height}px !important;
+        }
+
+        /* Ant v6 checkbox visuals are rendered on .ant-checkbox and its ::after */
+        .ds-checkbox .ant-checkbox {
+          width: ${n.size.md}px;
+          height: ${n.size.md}px;
+          --ds-checkbox-mark-width: 6px;
+          --ds-checkbox-mark-height: 10px;
+          --ds-checkbox-mark-stroke: 2px;
+          border-radius: ${n.radius}px;
+          border: ${n.borderWidth.default}px solid ${n.border.default};
+          background-color: ${n.background.default};
+          box-sizing: border-box;
+          transition: none !important;
+          animation: none !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox {
+          width: ${n.size.sm}px;
+          height: ${n.size.sm}px;
+          --ds-checkbox-mark-width: 5px;
+          --ds-checkbox-mark-height: 9px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox {
+          width: ${n.size.lg}px;
+          height: ${n.size.lg}px;
+          --ds-checkbox-mark-width: 7px;
+          --ds-checkbox-mark-height: 11px;
+        }
+
+        .ds-checkbox.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled),
+        .ds-checkbox .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled),
+        .ds-checkbox .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) {
+          border-color: ${n.border.default} !important;
+          border-width: ${n.borderWidth.default}px !important;
+          background-color: ${n.background.default} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate {
+          border-color: ${n.border.checked} !important;
+          background-color: ${n.background.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked {
+          border-color: transparent !important;
+          background-color: ${n.background.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked::after {
+          border-color: ${n.mark.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked::after,
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          content: '' !important;
+          position: absolute !important;
+          left: 50% !important;
+          top: 50% !important;
+          margin: 0 !important;
+          width: var(--ds-checkbox-mark-width) !important;
+          height: var(--ds-checkbox-mark-height) !important;
+          border: solid ${n.mark.checked} !important;
+          border-width: 0 var(--ds-checkbox-mark-stroke) var(--ds-checkbox-mark-stroke) 0 !important;
+          background: transparent !important;
+          transform: translate(-50%, -58%) rotate(45deg) !important;
+          transform-origin: center !important;
+          box-sizing: border-box !important;
+          opacity: 1 !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate::after {
+          content: '' !important;
+          position: absolute !important;
+          left: 50% !important;
+          top: 50% !important;
+          margin: 0 !important;
+          border: 0 !important;
+          border-radius: 1px !important;
+          background: ${n.mark.indeterminate} !important;
+          transform: translate(-50%, -50%) !important;
+          opacity: 1 !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-indeterminate::after {
+          width: ${n.indeterminate.sm.width}px !important;
+          height: ${n.indeterminate.sm.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-indeterminate::after {
+          width: ${n.indeterminate.md.width}px !important;
+          height: ${n.indeterminate.md.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-indeterminate::after {
+          width: ${n.indeterminate.lg.width}px !important;
+          height: ${n.indeterminate.lg.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate {
+          border-color: ${n.border.error} !important;
+          background-color: ${n.background.errorChecked} !important;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked::after {
+          border-color: ${n.mark.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-checked,
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-checked,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-indeterminate {
+          border-color: transparent !important;
+          background-color: ${n.background.disabled} !important;
+        }
+      `}},[]);let D=`ds-checkbox ds-checkbox-size-${s} ds-checkbox-status-${c} ${l}`.trim(),O=!!(u||d||f||p||m||_||g||b),k=C?`${C}-description`:void 0,A=C?`${C}-error`:void 0,j=g?.onClear??b,M=n.t(f?k:void 0,p?A:void 0),N=(0,a.jsx)(r.Checkbox,{...E,id:C,checked:w,className:D,"aria-describedby":M,"aria-invalid":p?!0:void 0,onChange:e=>{E.onChange?.(e),x?.(e.target.checked)},children:T});return O?(0,a.jsx)(t.FieldShell,{label:u,required:d,htmlFor:C,description:f,descriptionId:k,error:p,errorId:A,clear:g,clearable:_,clearLabel:v,clearVisibility:y,clearValue:w,onClear:()=>{j?.(),x?.(S)},extraActions:m,style:h,children:N}):N};s.displayName=`Checkbox`,s.Group=r.Checkbox.Group,exports.Checkbox=s;
+//# sourceMappingURL=Checkbox.cjs.map

package/dist-lib/forms/Checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.cjs","names":[],"sources":["../../src/ds/forms/Checkbox.tsx"],"sourcesContent":["import { Checkbox as AntCheckbox } from 'antd';\nimport type { CheckboxProps as AntCheckboxProps } from 'antd';\nimport type { ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { FieldShell } from './FieldShell';\nimport type { DSFieldShellProps } from './fieldProps';\nimport { joinDescribedByIds } from './fieldProps';\n\nexport type DSCheckboxSize = 'sm' | 'md' | 'lg';\nexport type DSCheckboxStatus = 'default' | 'error';\n\nexport type CheckboxProps = AntCheckboxProps & {\n  dsSize?: DSCheckboxSize;\n  dsStatus?: DSCheckboxStatus;\n} & DSFieldShellProps & {\n  onValueChange?: (nextValue: boolean) => void;\n  clearToValue?: boolean;\n  fieldDescription?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-checkbox-styles';\n\nexport const Checkbox = ({\n  dsSize = 'md',\n  dsStatus = 'default',\n  className = '',\n  fieldLabel,\n  fieldRequired,\n  fieldDescription,\n  fieldError,\n  fieldActions,\n  containerStyle,\n  clear,\n  clearable = false,\n  clearLabel,\n  clearVisibility = 'always',\n  onClear,\n  onValueChange,\n  clearToValue = false,\n  id,\n  checked,\n  children,\n  ...props\n}: CheckboxProps) => {\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n      if (!style) {\n        style = document.createElement('style');\n        style.id = STYLE_ID;\n        document.head.appendChild(style);\n      }\n      const { checkbox } = dsSemanticTokens;\n\n      style.textContent = `\n        .ds-checkbox.ant-checkbox-wrapper {\n          align-items: center;\n        }\n\n        .ds-checkbox .ant-checkbox {\n          top: 0;\n        }\n\n        .ds-checkbox .ant-checkbox .ant-checkbox-inner {\n          border-radius: ${checkbox.radius}px;\n          border-color: ${checkbox.border.default};\n          border-width: ${checkbox.borderWidth.default}px;\n          background-color: ${checkbox.background.default};\n          transition: none !important;\n          animation: none !important;\n        }\n\n        .ds-checkbox .ant-checkbox::after,\n        .ds-checkbox .ant-checkbox .ant-checkbox-inner::after {\n          transition: none !important;\n          animation: none !important;\n        }\n\n        .ds-checkbox .ant-checkbox-input:focus-visible + .ant-checkbox-inner {\n          outline: 2px solid ${checkbox.border.hover};\n          outline-offset: 2px;\n        }\n\n        .ds-checkbox.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,\n        .ds-checkbox .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,\n        .ds-checkbox .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {\n          border-color: ${checkbox.border.default};\n          border-width: ${checkbox.borderWidth.default}px;\n          background-color: ${checkbox.background.default};\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner {\n          border-color: ${checkbox.border.checked};\n          background-color: ${checkbox.background.checked};\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {\n          border-color: ${checkbox.mark.checked};\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner {\n          border-color: ${checkbox.border.checked} !important;\n          background-color: ${checkbox.background.checked} !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {\n          content: '';\n          position: absolute;\n          inset-inline-start: 50%;\n          top: 50%;\n          margin: 0;\n          background-color: ${checkbox.mark.indeterminate} !important;\n          border: none !important;\n          border-radius: 1px;\n          transform: translate(-50%, -50%) !important;\n          opacity: 1;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after,\n        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {\n          background-color: ${checkbox.mark.indeterminate} !important;\n        }\n\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {\n          border-color: ${checkbox.border.error};\n        }\n\n        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {\n          border-color: ${checkbox.border.error};\n          border-width: ${checkbox.borderWidth.default}px;\n        }\n\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner {\n          border-color: ${checkbox.border.error};\n          background-color: ${checkbox.background.errorChecked};\n        }\n\n        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked:hover .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate:hover .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked:active .ant-checkbox-inner,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate:active .ant-checkbox-inner {\n          border-color: ${checkbox.border.error};\n          background-color: ${checkbox.background.errorChecked};\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled .ant-checkbox-inner,\n        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox .ant-checkbox-inner {\n          background-color: ${checkbox.background.disabled};\n          border-color: transparent;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after,\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner::after {\n          border-color: ${checkbox.mark.checked};\n          opacity: 0.95;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner::after,\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate::after {\n          border-width: 0 !important;\n          background-color: ${checkbox.mark.indeterminate} !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox .ant-checkbox-inner {\n          width: ${checkbox.size.sm}px;\n          height: ${checkbox.size.sm}px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {\n          width: 5px;\n          height: 9px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {\n          width: ${checkbox.indeterminate.sm.width}px !important;\n          height: ${checkbox.indeterminate.sm.height}px !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-md .ant-checkbox .ant-checkbox-inner {\n          width: ${checkbox.size.md}px;\n          height: ${checkbox.size.md}px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {\n          width: 6px;\n          height: 10px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {\n          width: ${checkbox.indeterminate.md.width}px !important;\n          height: ${checkbox.indeterminate.md.height}px !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox .ant-checkbox-inner {\n          width: ${checkbox.size.lg}px;\n          height: ${checkbox.size.lg}px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {\n          width: 7px;\n          height: 11px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {\n          width: ${checkbox.indeterminate.lg.width}px !important;\n          height: ${checkbox.indeterminate.lg.height}px !important;\n        }\n\n        /* Ant v6 checkbox visuals are rendered on .ant-checkbox and its ::after */\n        .ds-checkbox .ant-checkbox {\n          width: ${checkbox.size.md}px;\n          height: ${checkbox.size.md}px;\n          --ds-checkbox-mark-width: 6px;\n          --ds-checkbox-mark-height: 10px;\n          --ds-checkbox-mark-stroke: 2px;\n          border-radius: ${checkbox.radius}px;\n          border: ${checkbox.borderWidth.default}px solid ${checkbox.border.default};\n          background-color: ${checkbox.background.default};\n          box-sizing: border-box;\n          transition: none !important;\n          animation: none !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox {\n          width: ${checkbox.size.sm}px;\n          height: ${checkbox.size.sm}px;\n          --ds-checkbox-mark-width: 5px;\n          --ds-checkbox-mark-height: 9px;\n        }\n\n        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox {\n          width: ${checkbox.size.lg}px;\n          height: ${checkbox.size.lg}px;\n          --ds-checkbox-mark-width: 7px;\n          --ds-checkbox-mark-height: 11px;\n        }\n\n        .ds-checkbox.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled),\n        .ds-checkbox .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled),\n        .ds-checkbox .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) {\n          border-color: ${checkbox.border.default} !important;\n          border-width: ${checkbox.borderWidth.default}px !important;\n          background-color: ${checkbox.background.default} !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate {\n          border-color: ${checkbox.border.checked} !important;\n          background-color: ${checkbox.background.checked} !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-checked {\n          border-color: transparent !important;\n          background-color: ${checkbox.background.checked} !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-checked::after {\n          border-color: ${checkbox.mark.checked} !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-checked::after,\n        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {\n          content: '' !important;\n          position: absolute !important;\n          left: 50% !important;\n          top: 50% !important;\n          margin: 0 !important;\n          width: var(--ds-checkbox-mark-width) !important;\n          height: var(--ds-checkbox-mark-height) !important;\n          border: solid ${checkbox.mark.checked} !important;\n          border-width: 0 var(--ds-checkbox-mark-stroke) var(--ds-checkbox-mark-stroke) 0 !important;\n          background: transparent !important;\n          transform: translate(-50%, -58%) rotate(45deg) !important;\n          transform-origin: center !important;\n          box-sizing: border-box !important;\n          opacity: 1 !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate::after {\n          content: '' !important;\n          position: absolute !important;\n          left: 50% !important;\n          top: 50% !important;\n          margin: 0 !important;\n          border: 0 !important;\n          border-radius: 1px !important;\n          background: ${checkbox.mark.indeterminate} !important;\n          transform: translate(-50%, -50%) !important;\n          opacity: 1 !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-indeterminate::after {\n          width: ${checkbox.indeterminate.sm.width}px !important;\n          height: ${checkbox.indeterminate.sm.height}px !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-indeterminate::after {\n          width: ${checkbox.indeterminate.md.width}px !important;\n          height: ${checkbox.indeterminate.md.height}px !important;\n        }\n\n        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-indeterminate::after {\n          width: ${checkbox.indeterminate.lg.width}px !important;\n          height: ${checkbox.indeterminate.lg.height}px !important;\n        }\n\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked,\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate {\n          border-color: ${checkbox.border.error} !important;\n          background-color: ${checkbox.background.errorChecked} !important;\n        }\n\n        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked::after {\n          border-color: ${checkbox.mark.checked} !important;\n        }\n\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-checked,\n        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate,\n        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-checked,\n        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-indeterminate {\n          border-color: transparent !important;\n          background-color: ${checkbox.background.disabled} !important;\n        }\n      `;\n    }\n  }, []);\n\n  const mergedClassName = `ds-checkbox ds-checkbox-size-${dsSize} ds-checkbox-status-${dsStatus} ${className}`.trim();\n  const shouldWrapInFieldShell = Boolean(\n    fieldLabel ||\n      fieldRequired ||\n      fieldDescription ||\n      fieldError ||\n      fieldActions ||\n      clearable ||\n      clear ||\n      onClear,\n  );\n  const descriptionId = id ? `${id}-description` : undefined;\n  const errorId = id ? `${id}-error` : undefined;\n  const clearAction = clear?.onClear ?? onClear;\n  const describedBy = joinDescribedByIds(\n    fieldDescription ? descriptionId : undefined,\n    fieldError ? errorId : undefined,\n  );\n\n  const control = (\n    <AntCheckbox\n      {...props}\n      id={id}\n      checked={checked}\n      className={mergedClassName}\n      aria-describedby={describedBy}\n      aria-invalid={fieldError ? true : undefined}\n      onChange={(event) => {\n        props.onChange?.(event);\n        onValueChange?.(event.target.checked);\n      }}\n    >\n      {children}\n    </AntCheckbox>\n  );\n\n  if (!shouldWrapInFieldShell) {\n    return control;\n  }\n\n  return (\n    <FieldShell\n      label={fieldLabel}\n      required={fieldRequired}\n      htmlFor={id}\n      description={fieldDescription}\n      descriptionId={descriptionId}\n      error={fieldError}\n      errorId={errorId}\n      clear={clear}\n      clearable={clearable}\n      clearLabel={clearLabel}\n      clearVisibility={clearVisibility}\n      clearValue={checked}\n      onClear={() => {\n        clearAction?.();\n        onValueChange?.(clearToValue);\n      }}\n      extraActions={fieldActions}\n      style={containerStyle}\n    >\n      {control}\n    </FieldShell>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = AntCheckbox.Group;"],"mappings":"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"}

package/dist-lib/forms/Checkbox.js

@@ -0,0 +1,327 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { FieldShell as t } from "./FieldShell.js";
+import { t as n } from "../fieldProps-EeYy2kXb.js";
+import { Checkbox as r } from "antd";
+import { useEffect as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/ds/forms/Checkbox.tsx
+var o = "ds-checkbox-styles", s = ({ dsSize: s = "md", dsStatus: c = "default", className: l = "", fieldLabel: u, fieldRequired: d, fieldDescription: f, fieldError: p, fieldActions: m, containerStyle: h, clear: g, clearable: _ = !1, clearLabel: v, clearVisibility: y = "always", onClear: b, onValueChange: x, clearToValue: S = !1, id: C, checked: w, children: T, ...E }) => {
+	i(() => {
+		if (typeof document < "u") {
+			let t = document.getElementById(o);
+			t || (t = document.createElement("style"), t.id = o, document.head.appendChild(t));
+			let { checkbox: n } = e;
+			t.textContent = `
+        .ds-checkbox.ant-checkbox-wrapper {
+          align-items: center;
+        }
+
+        .ds-checkbox .ant-checkbox {
+          top: 0;
+        }
+
+        .ds-checkbox .ant-checkbox .ant-checkbox-inner {
+          border-radius: ${n.radius}px;
+          border-color: ${n.border.default};
+          border-width: ${n.borderWidth.default}px;
+          background-color: ${n.background.default};
+          transition: none !important;
+          animation: none !important;
+        }
+
+        .ds-checkbox .ant-checkbox::after,
+        .ds-checkbox .ant-checkbox .ant-checkbox-inner::after {
+          transition: none !important;
+          animation: none !important;
+        }
+
+        .ds-checkbox .ant-checkbox-input:focus-visible + .ant-checkbox-inner {
+          outline: 2px solid ${n.border.hover};
+          outline-offset: 2px;
+        }
+
+        .ds-checkbox.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          border-color: ${n.border.default};
+          border-width: ${n.borderWidth.default}px;
+          background-color: ${n.background.default};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner {
+          border-color: ${n.border.checked};
+          background-color: ${n.background.checked};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          border-color: ${n.mark.checked};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner {
+          border-color: ${n.border.checked} !important;
+          background-color: ${n.background.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          content: '';
+          position: absolute;
+          inset-inline-start: 50%;
+          top: 50%;
+          margin: 0;
+          background-color: ${n.mark.indeterminate} !important;
+          border: none !important;
+          border-radius: 1px;
+          transform: translate(-50%, -50%) !important;
+          opacity: 1;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner::after,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          background-color: ${n.mark.indeterminate} !important;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          border-color: ${n.border.error};
+        }
+
+        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) .ant-checkbox-inner {
+          border-color: ${n.border.error};
+          border-width: ${n.borderWidth.default}px;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner {
+          border-color: ${n.border.error};
+          background-color: ${n.background.errorChecked};
+        }
+
+        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error.ant-checkbox-wrapper:hover .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked:hover .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate:hover .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked:active .ant-checkbox-inner,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate:active .ant-checkbox-inner {
+          border-color: ${n.border.error};
+          background-color: ${n.background.errorChecked};
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled .ant-checkbox-inner,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox .ant-checkbox-inner {
+          background-color: ${n.background.disabled};
+          border-color: transparent;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after,
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          border-color: ${n.mark.checked};
+          opacity: 0.95;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate .ant-checkbox-inner::after,
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate::after {
+          border-width: 0 !important;
+          background-color: ${n.mark.indeterminate} !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox .ant-checkbox-inner {
+          width: ${n.size.sm}px;
+          height: ${n.size.sm}px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          width: 5px;
+          height: 9px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          width: ${n.indeterminate.sm.width}px !important;
+          height: ${n.indeterminate.sm.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox .ant-checkbox-inner {
+          width: ${n.size.md}px;
+          height: ${n.size.md}px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          width: 6px;
+          height: 10px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          width: ${n.indeterminate.md.width}px !important;
+          height: ${n.indeterminate.md.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox .ant-checkbox-inner {
+          width: ${n.size.lg}px;
+          height: ${n.size.lg}px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          width: 7px;
+          height: 11px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+          width: ${n.indeterminate.lg.width}px !important;
+          height: ${n.indeterminate.lg.height}px !important;
+        }
+
+        /* Ant v6 checkbox visuals are rendered on .ant-checkbox and its ::after */
+        .ds-checkbox .ant-checkbox {
+          width: ${n.size.md}px;
+          height: ${n.size.md}px;
+          --ds-checkbox-mark-width: 6px;
+          --ds-checkbox-mark-height: 10px;
+          --ds-checkbox-mark-stroke: 2px;
+          border-radius: ${n.radius}px;
+          border: ${n.borderWidth.default}px solid ${n.border.default};
+          background-color: ${n.background.default};
+          box-sizing: border-box;
+          transition: none !important;
+          animation: none !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox {
+          width: ${n.size.sm}px;
+          height: ${n.size.sm}px;
+          --ds-checkbox-mark-width: 5px;
+          --ds-checkbox-mark-height: 9px;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox {
+          width: ${n.size.lg}px;
+          height: ${n.size.lg}px;
+          --ds-checkbox-mark-width: 7px;
+          --ds-checkbox-mark-height: 11px;
+        }
+
+        .ds-checkbox.ant-checkbox-wrapper:hover .ant-checkbox:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled),
+        .ds-checkbox .ant-checkbox:hover:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled),
+        .ds-checkbox .ant-checkbox:active:not(.ant-checkbox-checked):not(.ant-checkbox-indeterminate):not(.ant-checkbox-disabled) {
+          border-color: ${n.border.default} !important;
+          border-width: ${n.borderWidth.default}px !important;
+          background-color: ${n.background.default} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate {
+          border-color: ${n.border.checked} !important;
+          background-color: ${n.background.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked {
+          border-color: transparent !important;
+          background-color: ${n.background.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked::after {
+          border-color: ${n.mark.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked::after,
+        .ds-checkbox .ant-checkbox.ant-checkbox-checked .ant-checkbox-inner::after {
+          content: '' !important;
+          position: absolute !important;
+          left: 50% !important;
+          top: 50% !important;
+          margin: 0 !important;
+          width: var(--ds-checkbox-mark-width) !important;
+          height: var(--ds-checkbox-mark-height) !important;
+          border: solid ${n.mark.checked} !important;
+          border-width: 0 var(--ds-checkbox-mark-stroke) var(--ds-checkbox-mark-stroke) 0 !important;
+          background: transparent !important;
+          transform: translate(-50%, -58%) rotate(45deg) !important;
+          transform-origin: center !important;
+          box-sizing: border-box !important;
+          opacity: 1 !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-indeterminate::after {
+          content: '' !important;
+          position: absolute !important;
+          left: 50% !important;
+          top: 50% !important;
+          margin: 0 !important;
+          border: 0 !important;
+          border-radius: 1px !important;
+          background: ${n.mark.indeterminate} !important;
+          transform: translate(-50%, -50%) !important;
+          opacity: 1 !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-sm .ant-checkbox.ant-checkbox-indeterminate::after {
+          width: ${n.indeterminate.sm.width}px !important;
+          height: ${n.indeterminate.sm.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-md .ant-checkbox.ant-checkbox-indeterminate::after {
+          width: ${n.indeterminate.md.width}px !important;
+          height: ${n.indeterminate.md.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-size-lg .ant-checkbox.ant-checkbox-indeterminate::after {
+          width: ${n.indeterminate.lg.width}px !important;
+          height: ${n.indeterminate.lg.height}px !important;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked,
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-indeterminate {
+          border-color: ${n.border.error} !important;
+          background-color: ${n.background.errorChecked} !important;
+        }
+
+        .ds-checkbox.ds-checkbox-status-error .ant-checkbox.ant-checkbox-checked::after {
+          border-color: ${n.mark.checked} !important;
+        }
+
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-checked,
+        .ds-checkbox .ant-checkbox.ant-checkbox-disabled.ant-checkbox-indeterminate,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-checked,
+        .ds-checkbox.ant-checkbox-wrapper-disabled .ant-checkbox.ant-checkbox-indeterminate {
+          border-color: transparent !important;
+          background-color: ${n.background.disabled} !important;
+        }
+      `;
+		}
+	}, []);
+	let D = `ds-checkbox ds-checkbox-size-${s} ds-checkbox-status-${c} ${l}`.trim(), O = !!(u || d || f || p || m || _ || g || b), k = C ? `${C}-description` : void 0, A = C ? `${C}-error` : void 0, j = g?.onClear ?? b, M = n(f ? k : void 0, p ? A : void 0), N = /* @__PURE__ */ a(r, {
+		...E,
+		id: C,
+		checked: w,
+		className: D,
+		"aria-describedby": M,
+		"aria-invalid": p ? !0 : void 0,
+		onChange: (e) => {
+			E.onChange?.(e), x?.(e.target.checked);
+		},
+		children: T
+	});
+	return O ? /* @__PURE__ */ a(t, {
+		label: u,
+		required: d,
+		htmlFor: C,
+		description: f,
+		descriptionId: k,
+		error: p,
+		errorId: A,
+		clear: g,
+		clearable: _,
+		clearLabel: v,
+		clearVisibility: y,
+		clearValue: w,
+		onClear: () => {
+			j?.(), x?.(S);
+		},
+		extraActions: m,
+		style: h,
+		children: N
+	}) : N;
+};
+s.displayName = "Checkbox", s.Group = r.Group;
+//#endregion
+export { s as Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map