@televet/kibble-ui 4.0.0-beta.84 → 4.0.0-beta.86

package/dist/types/components/Checkbox/checkbox.component.d.ts

@@ -1,12 +1,13 @@
-import { default as React, ForwardedRef } from 'react';
+import { default as React } from 'react';
 import { Checkbox as CCheckbox } from '@chakra-ui/react/checkbox';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 export interface CheckboxProps extends WithFormControlProps, CCheckbox.RootProps {
-    checkboxRef?: ForwardedRef<HTMLLabelElement>;
+    checkboxRef?: React.RefObject<HTMLInputElement | null>;
     indeterminate?: boolean;
+    rootRef?: React.RefObject<HTMLLabelElement | null>;
     size?: FormControlSize;
     withCard?: boolean;
 }
-declare const WrappedCheckbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLLabelElement>>;
+declare const WrappedCheckbox: React.FC<CheckboxProps>;
 export { WrappedCheckbox as Checkbox };

package/dist/types/components/PinInput/pinInput.component.d.ts

@@ -1,10 +1,12 @@
-import { default as React, ForwardedRef } from 'react';
+import { default as React } from 'react';
 import { PinInput as CPinInput } from '@chakra-ui/react/pin-input';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 export interface PinInputProps extends WithFormControlProps, Omit<CPinInput.RootProps, "size"> {
     count?: number;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     onContrast?: boolean;
-    pinInputRef?: ForwardedRef<HTMLDivElement | null>;
+    rootRef?: React.RefObject<HTMLDivElement | null>;
+    size?: "sm" | "md" | "lg";
 }
-declare const WrappedPinInput: React.ForwardRefExoticComponent<PinInputProps & React.RefAttributes<HTMLDivElement | null>>;
+declare const WrappedPinInput: React.FC<PinInputProps>;
 export { WrappedPinInput as PinInput };

package/dist/types/components/Popover/popover.component.d.ts

@@ -25,5 +25,5 @@ interface HoverPopoverProps extends HoverCard.RootProps {
     trigger?: "hover";
 }
 export type PopoverProps = KPopoverProps & (ClickPopoverProps | HoverPopoverProps);
-export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Popover: ({ allowEscape, anchor, children, contentProps, footerProps, headerProps, disabled, portalled, placement, positioning, size, trigger, variant, ...rest }: PopoverProps) => React.ReactNode;
 export {};

package/dist/types/components/RadioGroup/components/Radio/radio.component.d.ts

@@ -1,12 +1,14 @@
-import { default as React, ForwardedRef } from 'react';
+import { default as React } from 'react';
 import { RadioGroup } from '@chakra-ui/react/radio-group';
 import { FormControlSize } from '../../../../hocs/withFormControl/withFormControl.types';
 import { WithFormControlProps } from '../../../../hocs/withFormControl/withFormControl';
 export interface RadioProps extends WithFormControlProps, RadioGroup.ItemProps {
     checked?: boolean;
-    radioRef?: ForwardedRef<HTMLDivElement>;
+    onContrast?: boolean;
+    radioRef?: React.RefObject<HTMLInputElement | null>;
+    rootRef?: React.RefObject<HTMLDivElement | null>;
     size?: FormControlSize;
     withCard?: boolean;
 }
-declare const WrappedRadio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLDivElement>>;
+declare const WrappedRadio: React.FC<RadioProps>;
 export { WrappedRadio as Radio };

package/dist/types/components/RatingDots/ratingDots.component.d.ts

@@ -9,4 +9,5 @@ export interface RatingDotsProps extends WithFormControlProps {
     onChange?: (value: number) => void;
     value?: number;
 }
-export declare const RatingDots: React.FC<RatingDotsProps>;
+declare const WrappedRatingDots: React.FC<RatingDotsProps>;
+export { WrappedRatingDots as RatingDots };

package/dist/types/components/Select/select.component.d.ts

@@ -1,21 +1,23 @@
-import { default as React, ForwardedRef } from 'react';
+import { default as React } from 'react';
 import { Select as CSelect } from '@chakra-ui/react/select';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 import { SelectOption } from './select.types';
-export interface SelectProps extends Omit<CSelect.RootProps, "collection" | "multiple">, WithFormControlProps {
+export interface SelectProps extends WithFormControlProps, Omit<CSelect.RootProps, "collection" | "multiple"> {
     clearable?: boolean;
     emptyPlaceholder?: string;
     loading?: boolean;
+    onContrast?: boolean;
     onSearch?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     options: SelectOption[];
     placeholder?: string;
     placeholderElement?: React.ReactNode;
+    rootRef?: React.RefObject<HTMLDivElement | null>;
     searchable?: boolean;
     searchPlaceholder?: string;
-    selectRef?: ForwardedRef<HTMLSelectElement>;
+    selectRef?: React.RefObject<HTMLSelectElement | null>;
     shouldTruncateText?: boolean;
     size?: FormControlSize;
 }
-declare const WrappedSelect: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const WrappedSelect: React.FC<SelectProps>;
 export { WrappedSelect as Select };

package/dist/types/components/Select/select.types.d.ts

@@ -1,9 +1,10 @@
 import { TypographyVariant } from '../../shared/types/typography';
 export interface SelectOption {
     disabled?: boolean;
-    selected?: boolean;
+    groupLabel?: string;
     label: React.ReactNode;
     leftElement?: React.ReactNode;
+    selected?: boolean;
     value: string;
     valueText?: string;
     variant?: TypographyVariant;

package/dist/types/components/Switch/switch.component.d.ts

@@ -4,8 +4,9 @@ import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 export interface SwitchProps extends WithFormControlProps, Omit<CSwitch.RootProps, "label" | "onChange"> {
     indeterminate?: boolean;
-    switchRef?: ForwardedRef<HTMLLabelElement>;
+    rootRef?: ForwardedRef<HTMLLabelElement>;
     size?: FormControlSize;
+    switchRef?: React.RefObject<HTMLInputElement | null>;
 }
-declare const WrappedSwitch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLLabelElement>>;
+declare const WrappedSwitch: React.FC<SwitchProps>;
 export { WrappedSwitch as Switch };

package/dist/types/components/TextInput/textInput.component.d.ts

@@ -1,13 +1,13 @@
-import { default as React, ForwardedRef } from 'react';
+import { default as React } from 'react';
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 import { InputProps as CInputProps } from '@chakra-ui/react/input';
 import { FormControlSize } from '../../hocs/withFormControl/withFormControl.types';
 export interface TextInputBaseProps extends WithFormControlProps {
     charLimit?: number;
-    inputRef?: ForwardedRef<HTMLInputElement>;
-    onContrast?: boolean;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     leftAddon?: React.ReactNode;
     leftElement?: React.ReactNode;
+    onContrast?: boolean;
     rightAddon?: React.ReactNode;
     rightElement?: React.ReactNode;
     size?: FormControlSize;
@@ -22,5 +22,5 @@ export interface ClearableTextInputProps extends TextInputBaseProps {
 }
 export type KTextInputProps = DefaultTextInputProps | ClearableTextInputProps;
 export type TextInputProps = KTextInputProps & CInputProps;
-declare const WrappedTextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const WrappedTextInput: React.FC<TextInputProps>;
 export { WrappedTextInput as TextInput };

package/dist/types/components/Textarea/textarea.component.d.ts

@@ -4,8 +4,8 @@ import { FormControlSize } from '../../hocs/withFormControl/withFormControl.type
 import { WithFormControlProps } from '../../hocs/withFormControl/withFormControl';
 export interface TextareaProps extends WithFormControlProps, CTextareaProps {
     charLimit?: number;
-    textareaRef?: ForwardedRef<HTMLTextAreaElement>;
+    textareaRef?: ForwardedRef<HTMLTextAreaElement | null>;
     size?: FormControlSize;
 }
-declare const WrappedTextArea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export { WrappedTextArea as Textarea };
+declare const WrappedTextarea: React.FC<TextareaProps>;
+export { WrappedTextarea as Textarea };

package/dist/types/hooks/usePortalContentRef.d.ts

@@ -0,0 +1,6 @@
+interface PortalContextType {
+    contentRef: React.RefObject<HTMLDivElement> | null;
+}
+export declare const PortalContext: import('react').Context<PortalContextType | undefined>;
+export declare const usePortalContentRef: () => PortalContextType;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@televet/kibble-ui",
   "description": "Kibble Design System by Otto",
-  "version": "4.0.0-beta.84",
+  "version": "4.0.0-beta.86",
   "type": "module",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",

package/dist/chunks/checkbox.component-CKLGUOSX.js

@@ -1,2 +0,0 @@
-"use strict";const n=require("./jsx-runtime-BjDatQAs.js"),u=require("react"),$=require("./withFormControl-BcHQTSnc.js"),P=require("./card.component-KNc4HKSh.js"),H=require("./text.component-DwVoyMgc.js"),m=require("./checkbox.records-DI3mqSNf.js"),W=require("./create-slot-recipe-context-IwVIgtBt.js"),f=require("./factory-D6tdBUPG.js"),D=require("./attr-BMs6szZx.js"),T=require("./empty-B5_AO6Pg.js"),Y=require("./use-recipe-DaPWl_pL.js"),i=require("./use-locale-context-D0LByRu9.js"),y=require("./use-field-context-CArmgHPP.js"),b=require("./index-CHIISuTq.js"),B=o=>o&&o.__esModule?o:{default:o},E=B(u),[_,j]=i.createContext({name:"CheckboxContext",hookName:"useCheckboxContext",providerName:"<CheckboxProvider />"}),N=u.forwardRef((o,e)=>{const t=j(),s=b.mergeProps(t.getControlProps(),o);return n.jsxRuntimeExports.jsx(i.ark.div,{...s,ref:e})});N.displayName="CheckboxControl";function U(o){const{value:e,onChange:t,defaultValue:s}=o,[r,a]=u.useState(s),c=e!==void 0,d=c?e:r,x=u.useCallback(h=>(c||a(h),t?.(h)),[c,t]);return[d,x]}function q(o={}){const{defaultValue:e,value:t,onValueChange:s,disabled:r,readOnly:a,name:c,invalid:d}=o,x=!(r||a),h=i.useEvent(s,{sync:!0}),[p,C]=U({value:t,defaultValue:e||[],onChange:h}),k=l=>p.some(R=>String(R)===String(l)),g=l=>{k(l)?O(l):v(l)},v=l=>{x&&(k(l)||C(p.concat(l)))},O=l=>{x&&C(p.filter(R=>String(R)!==String(l)))};return{isChecked:k,value:p,name:c,disabled:!!r,readOnly:!!a,invalid:!!d,setValue:C,addValue:v,toggleValue:g,getItemProps:l=>({checked:l.value!=null?k(l.value):void 0,onCheckedChange(){l.value!=null&&g(l.value)},name:c,disabled:r,readOnly:a,invalid:d})}}const[J,K]=i.createContext({name:"CheckboxGroupContext",hookName:"useCheckboxGroupContext",providerName:"<CheckboxGroupProvider />",strict:!1}),w=u.forwardRef((o,e)=>{const[t,s]=i.createSplitProps()(o,["defaultValue","value","onValueChange","disabled","invalid","readOnly","name"]),r=q(t);return n.jsxRuntimeExports.jsx(J,{value:r,children:n.jsxRuntimeExports.jsx(i.ark.div,{ref:e,role:"group",...s,...m.checkboxAnatomy.build().group.attrs})})});w.displayName="CheckboxGroup";const S=u.forwardRef((o,e)=>{const t=j(),s=b.mergeProps(t.getHiddenInputProps(),o),r=y.useFieldContext();return n.jsxRuntimeExports.jsx(i.ark.input,{"aria-describedby":r?.ariaDescribedby,...s,ref:e})});S.displayName="CheckboxHiddenInput";const V=u.forwardRef((o,e)=>{const t=j(),s=b.mergeProps(t.getLabelProps(),o);return n.jsxRuntimeExports.jsx(i.ark.span,{...s,ref:e})});V.displayName="CheckboxLabel";const Q=(o={})=>{const e=K(),t=y.useFieldContext(),s=u.useMemo(()=>b.mergeProps(o,e?.getItemProps({value:o.value})??{}),[o,e]),r=u.useId(),{getRootNode:a}=i.useEnvironmentContext(),{dir:c}=i.useLocaleContext(),d={id:r,ids:{label:t?.ids.label,hiddenInput:t?.ids.control},dir:c,disabled:t?.disabled,readOnly:t?.readOnly,invalid:t?.invalid,required:t?.required,getRootNode:a,...s},x=i.useMachine(m.machine,d);return m.connect(x,i.normalizeProps)},G=u.forwardRef((o,e)=>{const[t,s]=i.createSplitProps()(o,["checked","defaultChecked","disabled","form","id","ids","invalid","name","onCheckedChange","readOnly","required","value"]),r=Q(t),a=b.mergeProps(r.getRootProps(),s);return n.jsxRuntimeExports.jsx(_,{value:r,children:n.jsxRuntimeExports.jsx(i.ark.label,{...a,ref:e})})});G.displayName="CheckboxRoot";const I=u.forwardRef((o,e)=>{const[{value:t},s]=i.createSplitProps()(o,["value"]),r=b.mergeProps(t.getRootProps(),s);return n.jsxRuntimeExports.jsx(_,{value:t,children:n.jsxRuntimeExports.jsx(i.ark.label,{...r,ref:e})})});I.displayName="CheckboxRootProvider";const X=u.forwardRef(function(e,t){const s=Y.useRecipe({key:"checkmark",recipe:e.recipe}),[r,a]=s.splitVariantProps(e),{checked:c,indeterminate:d,disabled:x,unstyled:h,children:p,...C}=a,k=h?T.EMPTY_STYLES:s(r);return n.jsxRuntimeExports.jsx(f.chakra.svg,{ref:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3px",strokeLinecap:"round",strokeLinejoin:"round","data-state":d?"indeterminate":c?"checked":"unchecked","data-disabled":D.dataAttr(x),css:[k,e.css],...C,children:d?n.jsxRuntimeExports.jsx("path",{d:"M5 12h14"}):c?n.jsxRuntimeExports.jsx("polyline",{points:"20 6 9 17 4 12"}):null})}),{withProvider:L,withContext:A,useStyles:Z}=W.createSlotRecipeContext({key:"checkbox"});L(I,"root",{forwardAsChild:!0});const z=L(G,"root",{forwardAsChild:!0}),ee=A(V,"label",{forwardAsChild:!0}),M=u.forwardRef(function(e,t){const{checked:s,indeterminate:r,...a}=e,c=j(),d=Z();return s&&c.checked?n.jsxRuntimeExports.jsx(f.chakra.svg,{ref:t,asChild:!0,...a,css:[d.indicator,e.css],children:s}):r&&c.indeterminate?n.jsxRuntimeExports.jsx(f.chakra.svg,{ref:t,asChild:!0,...a,css:[d.indicator,e.css],children:r}):n.jsxRuntimeExports.jsx(X,{ref:t,checked:c.checked,indeterminate:c.indeterminate,disabled:c.disabled,unstyled:!0,...a,css:[d.indicator,e.css]})}),te=A(N,"control",{forwardAsChild:!0,defaultProps:{children:n.jsxRuntimeExports.jsx(M,{})}}),oe=f.chakra(w,{base:{display:"flex",flexDirection:"column",gap:"1.5"}},{forwardAsChild:!0}),re=S,se=$.withFormControl(({checkboxRef:o,children:e,indeterminate:t=!1,onContrast:s,size:r="md",withCard:a=!1,...c})=>{const d=s?"onContrast":"default",x=a?({children:h})=>{const p=(m.CheckboxSizeMap[r]+m.CheckboxLabelSpacing[r]+P.CardPaddingMap[r])*4;return n.jsxRuntimeExports.jsx(P.Card,{className:"Checkbox__Card","data-testid":"kibble-checkbox-card",...!c.disabled&&{interactive:!0,active:!!c.checked},onContrast:s,size:r,fullWidth:!0,display:"flex",...typeof h=="string"&&{alignItems:"center"},width:"inherit",pr:`${p}px`,children:h})}:E.default.Fragment;return n.jsxRuntimeExports.jsx(z,{className:"Checkbox","data-testid":"kibble-checkbox",checked:t?"indeterminate":c.checked,ref:o,variant:d,size:r,...c,children:n.jsxRuntimeExports.jsxs(x,{children:[n.jsxRuntimeExports.jsx(re,{className:"Checkbox__Input","data-testid":"kibble-checkbox-input"}),n.jsxRuntimeExports.jsx(te,{className:"Checkbox__Control","data-testid":"kibble-checkbox-control",children:n.jsxRuntimeExports.jsx(M,{className:"Checkbox__Indicator","data-testid":"kibble-checkbox-indicator"})}),!!e&&n.jsxRuntimeExports.jsx(ee,{className:"Checkbox__Label","data-testid":"kibble-checkbox-label",...a&&typeof e!="string"&&{mt:"-4px"},children:typeof e=="string"?n.jsxRuntimeExports.jsx(H.WrappedText,{size:r,lineHeight:"unset",variant:s?"onContrast":"default",children:e}):e})]})})}),F=E.default.forwardRef((o,e)=>n.jsxRuntimeExports.jsx(se,{checkboxRef:e,...o}));F.displayName="Checkbox";exports.CheckboxGroup=oe;exports.WrappedCheckbox=F;exports.useCheckboxGroup=q;
-//# sourceMappingURL=checkbox.component-CKLGUOSX.js.map

package/dist/chunks/checkbox.component-DhXTRoeP.js

@@ -1,310 +0,0 @@
-import { j as s } from "./jsx-runtime-C5mzlN2N.js";
-import j, { forwardRef as h, useState as $, useCallback as E, useMemo as H, useId as q } from "react";
-import { w as F } from "./withFormControl-mCCJK8wX.js";
-import { C as T, a as D } from "./card.component-DNX41NGG.js";
-import { W as Y } from "./text.component-2XEOQ18v.js";
-import { c as B, m as U, a as J, C as K, b as Q } from "./checkbox.records-4j704fMI.js";
-import { c as X } from "./create-slot-recipe-context-BJmsuxih.js";
-import { c as m } from "./factory-Ctbv0Ozn.js";
-import { d as Z } from "./attr-sm10PXOd.js";
-import { a as z } from "./empty-BU2EAux9.js";
-import { u as ee } from "./use-recipe-d63ABaZ3.js";
-import { c as N, f as k, o as oe, a as g, i as te, j as re, k as ce, n as se } from "./use-locale-context-BiiNTYMT.js";
-import { u as V } from "./use-field-context-Cm3grEyV.js";
-import { a1 as C } from "./index-YtNA0Ueo.js";
-const [R, f] = N({
-  name: "CheckboxContext",
-  hookName: "useCheckboxContext",
-  providerName: "<CheckboxProvider />"
-}), I = h((c, e) => {
-  const o = f(), r = C(o.getControlProps(), c);
-  return /* @__PURE__ */ s.jsx(k.div, { ...r, ref: e });
-});
-I.displayName = "CheckboxControl";
-function ae(c) {
-  const { value: e, onChange: o, defaultValue: r } = c, [t, n] = $(r), a = e !== void 0, i = a ? e : t, l = E(
-    (u) => (a || n(u), o?.(u)),
-    [a, o]
-  );
-  return [i, l];
-}
-function ne(c = {}) {
-  const { defaultValue: e, value: o, onValueChange: r, disabled: t, readOnly: n, name: a, invalid: i } = c, l = !(t || n), u = oe(r, { sync: !0 }), [x, p] = ae({
-    value: o,
-    defaultValue: e || [],
-    onChange: u
-  }), b = (d) => x.some((v) => String(v) === String(d)), P = (d) => {
-    b(d) ? W(d) : y(d);
-  }, y = (d) => {
-    l && (b(d) || p(x.concat(d)));
-  }, W = (d) => {
-    l && p(x.filter((v) => String(v) !== String(d)));
-  };
-  return {
-    isChecked: b,
-    value: x,
-    name: a,
-    disabled: !!t,
-    readOnly: !!n,
-    invalid: !!i,
-    setValue: p,
-    addValue: y,
-    toggleValue: P,
-    getItemProps: (d) => ({
-      checked: d.value != null ? b(d.value) : void 0,
-      onCheckedChange() {
-        d.value != null && P(d.value);
-      },
-      name: a,
-      disabled: t,
-      readOnly: n,
-      invalid: i
-    })
-  };
-}
-const [ie, de] = N({
-  name: "CheckboxGroupContext",
-  hookName: "useCheckboxGroupContext",
-  providerName: "<CheckboxGroupProvider />",
-  strict: !1
-}), S = h((c, e) => {
-  const [o, r] = g()(c, [
-    "defaultValue",
-    "value",
-    "onValueChange",
-    "disabled",
-    "invalid",
-    "readOnly",
-    "name"
-  ]), t = ne(o);
-  return /* @__PURE__ */ s.jsx(ie, { value: t, children: /* @__PURE__ */ s.jsx(k.div, { ref: e, role: "group", ...r, ...B.build().group.attrs }) });
-});
-S.displayName = "CheckboxGroup";
-const _ = h((c, e) => {
-  const o = f(), r = C(o.getHiddenInputProps(), c), t = V();
-  return /* @__PURE__ */ s.jsx(k.input, { "aria-describedby": t?.ariaDescribedby, ...r, ref: e });
-});
-_.displayName = "CheckboxHiddenInput";
-const G = h((c, e) => {
-  const o = f(), r = C(o.getLabelProps(), c);
-  return /* @__PURE__ */ s.jsx(k.span, { ...r, ref: e });
-});
-G.displayName = "CheckboxLabel";
-const le = (c = {}) => {
-  const e = de(), o = V(), r = H(() => C(c, e?.getItemProps({ value: c.value }) ?? {}), [c, e]), t = q(), { getRootNode: n } = te(), { dir: a } = re(), i = {
-    id: t,
-    ids: {
-      label: o?.ids.label,
-      hiddenInput: o?.ids.control
-    },
-    dir: a,
-    disabled: o?.disabled,
-    readOnly: o?.readOnly,
-    invalid: o?.invalid,
-    required: o?.required,
-    getRootNode: n,
-    ...r
-  }, l = ce(U, i);
-  return J(l, se);
-}, w = h((c, e) => {
-  const [o, r] = g()(c, [
-    "checked",
-    "defaultChecked",
-    "disabled",
-    "form",
-    "id",
-    "ids",
-    "invalid",
-    "name",
-    "onCheckedChange",
-    "readOnly",
-    "required",
-    "value"
-  ]), t = le(o), n = C(t.getRootProps(), r);
-  return /* @__PURE__ */ s.jsx(R, { value: t, children: /* @__PURE__ */ s.jsx(k.label, { ...n, ref: e }) });
-});
-w.displayName = "CheckboxRoot";
-const L = h((c, e) => {
-  const [{ value: o }, r] = g()(c, ["value"]), t = C(o.getRootProps(), r);
-  return /* @__PURE__ */ s.jsx(R, { value: o, children: /* @__PURE__ */ s.jsx(k.label, { ...t, ref: e }) });
-});
-L.displayName = "CheckboxRootProvider";
-const ue = h(
-  function(e, o) {
-    const r = ee({ key: "checkmark", recipe: e.recipe }), [t, n] = r.splitVariantProps(e), { checked: a, indeterminate: i, disabled: l, unstyled: u, children: x, ...p } = n, b = u ? z : r(t);
-    return /* @__PURE__ */ s.jsx(
-      m.svg,
-      {
-        ref: o,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "3px",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        "data-state": i ? "indeterminate" : a ? "checked" : "unchecked",
-        "data-disabled": Z(l),
-        css: [b, e.css],
-        ...p,
-        children: i ? /* @__PURE__ */ s.jsx("path", { d: "M5 12h14" }) : a ? /* @__PURE__ */ s.jsx("polyline", { points: "20 6 9 17 4 12" }) : null
-      }
-    );
-  }
-), {
-  withProvider: A,
-  withContext: M,
-  useStyles: he
-} = X({ key: "checkbox" });
-A(L, "root", { forwardAsChild: !0 });
-const xe = A(
-  w,
-  "root",
-  { forwardAsChild: !0 }
-), be = M(
-  G,
-  "label",
-  { forwardAsChild: !0 }
-), O = h(function(e, o) {
-  const { checked: r, indeterminate: t, ...n } = e, a = f(), i = he();
-  return r && a.checked ? /* @__PURE__ */ s.jsx(
-    m.svg,
-    {
-      ref: o,
-      asChild: !0,
-      ...n,
-      css: [i.indicator, e.css],
-      children: r
-    }
-  ) : t && a.indeterminate ? /* @__PURE__ */ s.jsx(
-    m.svg,
-    {
-      ref: o,
-      asChild: !0,
-      ...n,
-      css: [i.indicator, e.css],
-      children: t
-    }
-  ) : /* @__PURE__ */ s.jsx(
-    ue,
-    {
-      ref: o,
-      checked: a.checked,
-      indeterminate: a.indeterminate,
-      disabled: a.disabled,
-      unstyled: !0,
-      ...n,
-      css: [i.indicator, e.css]
-    }
-  );
-}), ke = M(
-  I,
-  "control",
-  {
-    forwardAsChild: !0,
-    defaultProps: { children: /* @__PURE__ */ s.jsx(O, {}) }
-  }
-), Ae = m(
-  S,
-  {
-    base: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "1.5"
-    }
-  },
-  { forwardAsChild: !0 }
-), Ce = _, pe = F(
-  ({
-    checkboxRef: c,
-    children: e,
-    indeterminate: o = !1,
-    onContrast: r,
-    size: t = "md",
-    withCard: n = !1,
-    ...a
-  }) => {
-    const i = r ? "onContrast" : "default", l = n ? ({ children: u }) => {
-      const x = (K[t] + Q[t] + D[t]) * 4;
-      return /* @__PURE__ */ s.jsx(
-        T,
-        {
-          className: "Checkbox__Card",
-          "data-testid": "kibble-checkbox-card",
-          ...!a.disabled && {
-            interactive: !0,
-            active: !!a.checked
-          },
-          onContrast: r,
-          size: t,
-          fullWidth: !0,
-          display: "flex",
-          ...typeof u == "string" && { alignItems: "center" },
-          width: "inherit",
-          pr: `${x}px`,
-          children: u
-        }
-      );
-    } : j.Fragment;
-    return /* @__PURE__ */ s.jsx(
-      xe,
-      {
-        className: "Checkbox",
-        "data-testid": "kibble-checkbox",
-        checked: o ? "indeterminate" : a.checked,
-        ref: c,
-        variant: i,
-        size: t,
-        ...a,
-        children: /* @__PURE__ */ s.jsxs(l, { children: [
-          /* @__PURE__ */ s.jsx(
-            Ce,
-            {
-              className: "Checkbox__Input",
-              "data-testid": "kibble-checkbox-input"
-            }
-          ),
-          /* @__PURE__ */ s.jsx(
-            ke,
-            {
-              className: "Checkbox__Control",
-              "data-testid": "kibble-checkbox-control",
-              children: /* @__PURE__ */ s.jsx(
-                O,
-                {
-                  className: "Checkbox__Indicator",
-                  "data-testid": "kibble-checkbox-indicator"
-                }
-              )
-            }
-          ),
-          !!e && /* @__PURE__ */ s.jsx(
-            be,
-            {
-              className: "Checkbox__Label",
-              "data-testid": "kibble-checkbox-label",
-              ...n && typeof e != "string" && { mt: "-4px" },
-              children: typeof e == "string" ? /* @__PURE__ */ s.jsx(
-                Y,
-                {
-                  size: t,
-                  lineHeight: "unset",
-                  variant: r ? "onContrast" : "default",
-                  children: e
-                }
-              ) : e
-            }
-          )
-        ] })
-      }
-    );
-  }
-), me = j.forwardRef(
-  (c, e) => /* @__PURE__ */ s.jsx(pe, { checkboxRef: e, ...c })
-);
-me.displayName = "Checkbox";
-export {
-  Ae as C,
-  me as W,
-  ne as u
-};
-//# sourceMappingURL=checkbox.component-DhXTRoeP.js.map