@koobiq/react-components 0.0.1-beta.22 → 0.0.1-beta.24

package/dist/components/Alert/Alert.js

@@ -30,12 +30,12 @@ const Alert = polymorphicForwardRef(
     const isCompact = isCompactProp || compact;
     if (process.env.NODE_ENV !== "production" && colored) {
       deprecate(
-        'The "colored" prop is deprecated. Use "isColored" prop to replace it.'
+        'Alert. The "colored" prop is deprecated. Use "isColored" prop to replace it.'
       );
     }
     if (process.env.NODE_ENV !== "production" && compact) {
       deprecate(
-        'The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+        'Alert. The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
       );
     }
     const stringFormatter = useLocalizedStringFormatter(intlMessages);

package/dist/components/Backdrop/Backdrop.js

@@ -22,7 +22,7 @@ const Backdrop = polymorphicForwardRef(
     const domRef = useDOMRef(ref);
     if (process.env.NODE_ENV !== "production" && open) {
       deprecate(
-        'The "open" prop is deprecated. Use "isOpen" prop to replace it.'
+        'Backdrop. The "open" prop is deprecated. Use "isOpen" prop to replace it.'
       );
     }
     const style = {

package/dist/components/Button/Button.js

@@ -24,12 +24,12 @@ const Button = polymorphicForwardRef(
     const isDisabled = isDisabledProp || disabled;
     if (process.env.NODE_ENV !== "production" && progress) {
       deprecate(
-        'The "progress" prop is deprecated. Use "isLoading" prop to replace it.'
+        'Button. The "progress" prop is deprecated. Use "isLoading" prop to replace it.'
       );
     }
     if (process.env.NODE_ENV !== "production" && disabled) {
       deprecate(
-        'The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+        'Button. The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
       );
     }
     const iconOnly = (!children || onlyIcon) && (startIcon || endIcon);

package/dist/components/ButtonToggleGroup/types.d.ts

@@ -25,7 +25,7 @@ export type ButtonToggleGroupBaseProps = {
     /** The initial selected key in the collection (uncontrolled). */
     defaultSelectedKey?: ButtonToggleGroupKey;
     /** Handler that is called when the selection changes. */
-    onSelectionChange?: (keys: ButtonToggleGroupKey) => void;
+    onSelectionChange?: (key: ButtonToggleGroupKey) => void;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** The props used for each slot inside. */

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,19 +1,28 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaCheckboxProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "isIndeterminate" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error" | "readonly" | "indeterminate"> & {
-    error?: boolean;
-    checked?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    indeterminate?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
-} & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
     className?: string;
+    style?: import("react").CSSProperties;
     size?: import("./types").CheckboxPropSize;
-    'data-testid'?: string | number;
     labelPlacement?: import("./types").CheckboxPropLabelPlacement;
+    isInvalid?: boolean;
+    isSelected?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isIndeterminate?: boolean;
+    defaultSelected?: boolean;
+    onChange?: import("./types").CheckboxPropOnChange;
     slotProps?: {
         box?: import("react").ComponentPropsWithRef<"span">;
         label?: import("react").ComponentPropsWithRef<"span">;
     };
+    'data-testid'?: string | number;
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    checked?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    defaultChecked?: boolean;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { deprecate } from "@koobiq/logger";
+import { isNotNil, mergeProps, clsx } from "@koobiq/react-core";
 import { IconCheckS16, IconMinusS16 } from "@koobiq/react-icons";
 import { Checkbox as Checkbox$1 } from "@koobiq/react-primitives";
 import s from "./Checkbox.module.css.js";
@@ -11,45 +12,108 @@ const Checkbox = forwardRef(
     const {
       size = "normal",
       labelPlacement = "end",
+      disabled,
+      isDisabled: isDisabledProp,
+      checked,
+      isSelected: isSelectedProp,
+      error,
+      isInvalid: isInvalidProp,
+      defaultChecked,
+      defaultSelected: defaultSelectedProp,
+      readonly,
+      isReadOnly: isReadOnlyProp,
+      required,
+      isRequired: isRequiredProp,
+      indeterminate,
+      isIndeterminate: isIndeterminateProp,
       children,
       className,
       slotProps,
-      indeterminate,
       ...other
     } = props;
+    const isDisabled = isDisabledProp || disabled;
+    const isSelected = isSelectedProp ?? checked;
+    const isInvalid = isInvalidProp || error;
+    const defaultSelected = defaultSelectedProp ?? defaultChecked;
+    const isReadOnly = isReadOnlyProp || readonly;
+    const isRequired = isRequiredProp || required;
+    const isIndeterminate = isIndeterminateProp || indeterminate;
     const commonProps = {
-      indeterminate,
+      isIndeterminate,
+      isDisabled,
+      isSelected,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      defaultSelected,
       className: ({
-        error,
-        checked,
-        hovered,
-        disabled,
-        focusVisible,
-        indeterminate: indeterminate2
+        isInvalid: isInvalid2,
+        isSelected: isSelected2,
+        isHovered,
+        isDisabled: isDisabled2,
+        isFocusVisible,
+        isIndeterminate: isIndeterminate2
       }) => clsx(
         s.base,
         s[size],
-        error && s.error,
         s[labelPlacement],
-        checked && s.checked,
-        hovered && s.hovered,
-        disabled && s.disabled,
-        focusVisible && s.focusVisible,
-        indeterminate2 && s.indeterminate,
+        isInvalid2 && s.invalid,
+        isHovered && s.hovered,
+        isDisabled2 && s.disabled,
+        isSelected2 && s.selected,
+        isFocusVisible && s.focusVisible,
+        isIndeterminate2 && s.indeterminate,
         className
       ),
       ...other
     };
+    if (process.env.NODE_ENV !== "production" && isNotNil(disabled)) {
+      deprecate(
+        'Checkbox. The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && isNotNil(checked)) {
+      deprecate(
+        'Checkbox. The "checked" prop is deprecated. Use "isSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && isNotNil(error)) {
+      deprecate(
+        'Checkbox. The "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && isNotNil(defaultChecked)) {
+      deprecate(
+        'Checkbox. The "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && isNotNil(readonly)) {
+      deprecate(
+        'Checkbox. The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && isNotNil(required)) {
+      deprecate(
+        'Checkbox. The "required" prop is deprecated. Use "isRequired" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && isNotNil(indeterminate)) {
+      deprecate(
+        'Checkbox. The "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.'
+      );
+    }
     const boxProps = mergeProps({ className: s.checkbox }, slotProps?.box);
     const labelProps = slotProps?.label;
     return /* @__PURE__ */ jsx(
       Checkbox$1,
       {
-        "data-indeterminate": indeterminate,
+        "data-size": size,
+        "data-indeterminate": isIndeterminate,
+        "data-label-placement": labelPlacement,
         ...commonProps,
         ref,
-        children: ({ checked, indeterminate: indeterminate2 }) => {
-          const activeIndex = indeterminate2 ? 1 : Number(Boolean(checked)) - 1;
+        children: ({ isSelected: isSelected2, isIndeterminate: isIndeterminate2 }) => {
+          const activeIndex = isIndeterminate2 ? 1 : Number(Boolean(isSelected2)) - 1;
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { ...boxProps, children: /* @__PURE__ */ jsx(
               AnimatedIcon,

package/dist/components/Checkbox/Checkbox.module.css.js

@@ -3,8 +3,8 @@ const checkbox = "kbq-checkbox-checkbox-dbb3d9";
 const normal = "kbq-checkbox-normal-646719";
 const big = "kbq-checkbox-big-d7d5f1";
 const hovered = "kbq-checkbox-hovered-a8a95e";
-const checked = "kbq-checkbox-checked-e66779";
-const error = "kbq-checkbox-error-3cdabd";
+const selected = "kbq-checkbox-selected-ba10f0";
+const invalid = "kbq-checkbox-invalid-253c35";
 const focusVisible = "kbq-checkbox-focusVisible-c41061";
 const indeterminate = "kbq-checkbox-indeterminate-efed4f";
 const disabled = "kbq-checkbox-disabled-e359aa";
@@ -16,8 +16,8 @@ const s = {
   normal,
   big,
   hovered,
-  checked,
-  error,
+  selected,
+  invalid,
   focusVisible,
   indeterminate,
   disabled,
@@ -28,14 +28,14 @@ export {
   base,
   big,
   checkbox,
-  checked,
   s as default,
   disabled,
   end,
-  error,
   focusVisible,
   hovered,
   indeterminate,
+  invalid,
   normal,
+  selected,
   start
 };

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

@@ -1,27 +1,126 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseCheckboxProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 export declare const checkboxPropSize: readonly ["normal", "big"];
 export type CheckboxPropSize = (typeof checkboxPropSize)[number];
 export declare const checkboxPropLabelPlacement: readonly ["start", "end"];
 export type CheckboxPropLabelPlacement = (typeof checkboxPropLabelPlacement)[number];
-export type CheckboxProps = UseCheckboxProps & {
+export type CheckboxPropOnChange = (selected: boolean) => void;
+type CheckboxDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     *
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+    /**
+     * @deprecated
+     * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
+     *
+     * If `true`, the component will indicate an error.
+     * @default false
+     * */
+    error?: boolean;
+    /**
+     * @deprecated
+     * The "checked" prop is deprecated. Use "isSelected" prop to replace it.
+     *
+     * If `true`, the component is checked.
+     * @default false
+     * */
+    checked?: boolean;
+    /**
+     * @deprecated
+     * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
+     *
+     * It prevents the user from changing the value of the checkbox.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * @deprecated
+     * The "required" prop is deprecated. Use "isRequired" prop to replace it.
+     *
+     * If `true`, the input element is required.
+     * @default false
+     * */
+    required?: boolean;
+    /**
+     * @deprecated
+     * The "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.
+     *
+     * If `true`, the component appears indeterminate.
+     * @default false
+     * */
+    indeterminate?: boolean;
+    /**
+     * @deprecated
+     * The "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.
+     *
+     * The default checked state. Use when the component is not controlled.
+     * @default false
+     * */
+    defaultChecked?: boolean;
+};
+export type CheckboxProps = {
+    /** The content of the component. */
+    children?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * Size.
      * @default normal
      * */
     size?: CheckboxPropSize;
-    /** Unique identifier for testing purposes. */
-    'data-testid'?: string | number;
     /**
      * The position of the label.
      * @default end
      * */
     labelPlacement?: CheckboxPropLabelPlacement;
+    /**
+     * If `true`, the component will indicate an error.
+     * @default false
+     * */
+    isInvalid?: boolean;
+    /**
+     * If `true`, the component is checked.
+     * @default false
+     * */
+    isSelected?: boolean;
+    /** It prevents the user from changing the value of the checkbox.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the input element is required.
+     * @default false
+     * */
+    isRequired?: boolean;
+    /**
+     * If `true`, the component appears indeterminate.
+     * @default false
+     * */
+    isIndeterminate?: boolean;
+    /**
+     * The default checked state. Use when the component is not controlled.
+     * @default false
+     * */
+    defaultSelected?: boolean;
+    /** Callback fired when the state is changed. */
+    onChange?: CheckboxPropOnChange;
     /** The props used for each slot inside. */
     slotProps?: {
         box?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-};
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+} & CheckboxDeprecatedProps;
+export {};

package/dist/components/Container/Container.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Container.module.css.js";
 import { normalizeMargins, normalizeMaxInlineSize, normalizePosition } from "./utils.js";
@@ -12,25 +13,35 @@ const Container = polymorphicForwardRef(
       margins: marginsProp = 0,
       position: positionProp = "center",
       fixed = false,
+      isFixed: isFixedProp = false,
       children,
       className,
       maxInlineSize: maxInlineSizeProp,
       style: styleProp,
       ...other
     } = props;
+    const isFixed = isFixedProp || fixed;
+    if (process.env.NODE_ENV !== "production" && fixed) {
+      deprecate(
+        'Container. The "fixed" prop is deprecated. Use "isFixed" prop to replace it.'
+      );
+    }
     const breakpoints = useMatchedBreakpoints();
     const maxInlineSize = getResponsiveValue(maxInlineSizeProp, breakpoints);
     const position = getResponsiveValue(positionProp, breakpoints);
     const margins = getResponsiveValue(marginsProp, breakpoints);
     const style = {
       ...styleProp,
-      "--container-max-inline-size": fixed ? void 0 : normalizeMaxInlineSize(maxInlineSize),
+      "--container-max-inline-size": isFixed ? void 0 : normalizeMaxInlineSize(maxInlineSize),
       "--container-position": normalizePosition(position),
       "--container-margins": normalizeMargins(margins)
     };
     return /* @__PURE__ */ jsx(
       Tag,
       {
+        "data-fixed": isFixed,
+        "data-margins": margins,
+        "data-position": position,
         className: clsx(s.base, className),
         style,
         ...other,

package/dist/components/Container/types.d.ts

@@ -5,6 +5,16 @@ export type ContainerMarginsProp = (typeof containerMarginsProp)[number];
 export type ContainerMaxInlineSizeProp = CSSProperties['maxInlineSize'];
 export declare const containerPositionProp: readonly ["start", "center", "end"];
 export type ContainerPositionProp = (typeof containerPositionProp)[number];
+type ContainerDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "fixed" prop is deprecated. Use "isFixed" prop to replace it.
+     *
+     * If `true`, doesn't set the max-inline-size of the container.
+     * @default false
+     * */
+    fixed?: boolean;
+};
 export type ContainerBaseProps = {
     /**
      * Container position.
@@ -22,11 +32,12 @@ export type ContainerBaseProps = {
      * If `true`, doesn't set the max-inline-size of the container.
      * @default false
      * */
-    fixed?: boolean;
+    isFixed?: boolean;
     /** The content of the component. */
     children?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles. */
     style?: CSSProperties;
-};
+} & ContainerDeprecatedProps;
+export {};

package/dist/components/Divider/Divider.js

@@ -23,6 +23,9 @@ const Divider = polymorphicForwardRef(
     return /* @__PURE__ */ jsx(
       Tag,
       {
+        "data-flex-item": flexItem,
+        "data-orientation": orientation,
+        "data-disable-paddings": disablePaddings,
         ...separatorProps,
         className: clsx(
           s.base,

package/dist/components/IconButton/IconButton.js

@@ -21,12 +21,12 @@ const IconButton = polymorphicForwardRef(
     const isDisabled = isDisabledProp || disabled;
     if (process.env.NODE_ENV !== "production" && compact) {
       deprecate(
-        'The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
+        'IconButton. The "compact" prop is deprecated. Use "isCompact" prop to replace it.'
       );
     }
     if (process.env.NODE_ENV !== "production" && disabled) {
       deprecate(
-        'The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+        'IconButton. The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
       );
     }
     const classNameFn = ({

package/dist/components/Toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaToggleProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error"> & {
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaToggleProps, "onChange" | "isDisabled" | "isInvalid" | "isSelected" | "isReadOnly" | "isRequired" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error"> & {
     error?: boolean;
     checked?: boolean;
     disabled?: boolean;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useDOMRef, useMultiRef, useBoolean, FocusableProvider, clsx, mergeProps } from "@koobiq/react-core";
+import { useDOMRef, useMultiRef, useBoolean, mergeProps, clsx, FocusableProvider } from "@koobiq/react-core";
 import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import { utilClasses } from "../../styles/utility.js";
@@ -40,7 +40,7 @@ const Tooltip = forwardRef((props, ref) => {
   const domRef = useDOMRef(ref);
   const controlRef = useRef(null);
   const controlRefCallback = useMultiRef([controlRef]);
-  const { triggerProps, tooltipProps } = useTooltipTrigger(
+  const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(
     {
       delay,
       closeDelay,
@@ -66,7 +66,20 @@ const Tooltip = forwardRef((props, ref) => {
     onClose: () => state.close(true),
     targetRef: anchorRef || controlRef
   });
-  const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
+  const { tooltipProps: tooltipCommonProps } = useTooltip(overlayProps, state);
+  const tooltipProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        utilClasses.typography["text-normal"]
+      ),
+      ref: domRef
+    },
+    other,
+    tooltipCommonProps,
+    tooltipTriggerProps
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
       ref: controlRefCallback,
@@ -85,18 +98,11 @@ const Tooltip = forwardRef((props, ref) => {
         children: (transition) => /* @__PURE__ */ jsx(Overlay, { portalContainer, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ...mergeProps(localTooltipProps, tooltipProps),
+            ...tooltipProps,
             "data-arrow": showArrow,
             "data-variant": variant,
             "data-placement": placement,
             "data-transition": transition,
-            className: clsx(
-              s.base,
-              s[variant],
-              utilClasses.typography["text-normal"]
-            ),
-            ...other,
-            ref: domRef,
             children: [
               showArrow && /* @__PURE__ */ jsx(
                 "div",

package/dist/style.css

@@ -1360,7 +1360,7 @@
 
 .kbq-utility-list-item-862731:where([data-disabled="true"]), .kbq-utility-list-item-862731:where([aria-disabled="true"]) {
   --list-item-bg-color: ;
-  cursor: default;
+  cursor: not-allowed;
   opacity: .3;
 }
 
@@ -1494,34 +1494,34 @@
   --checkbox-border-color: var(--kbq-line-contrast-fade);
 }
 
-.kbq-checkbox-checked-e66779 {
+.kbq-checkbox-selected-ba10f0 {
   --checkbox-icon-color: var(--kbq-white-default);
   --checkbox-bg-color: var(--kbq-background-theme);
   --checkbox-border-color: var(--kbq-background-theme);
 }
 
-.kbq-checkbox-checked-e66779:where(.kbq-checkbox-hovered-a8a95e) {
+.kbq-checkbox-selected-ba10f0:where(.kbq-checkbox-hovered-a8a95e) {
   --checkbox-icon-color: var(--kbq-white-default);
   --checkbox-bg-color: var(--kbq-states-background-theme-hover);
   --checkbox-border-color: var(--kbq-states-background-theme-hover);
 }
 
-.kbq-checkbox-error-3cdabd {
+.kbq-checkbox-invalid-253c35 {
   --checkbox-border-color: var(--kbq-line-error);
 }
 
-.kbq-checkbox-error-3cdabd:where(.kbq-checkbox-hovered-a8a95e) {
+.kbq-checkbox-invalid-253c35:where(.kbq-checkbox-hovered-a8a95e) {
   --checkbox-border-color: var(--kbq-line-error);
   --checkbox-bg-color: var(--kbq-states-background-error-fade-hover);
 }
 
-.kbq-checkbox-error-3cdabd:where(.kbq-checkbox-checked-e66779) {
+.kbq-checkbox-invalid-253c35:where(.kbq-checkbox-selected-ba10f0) {
   --checkbox-icon-color: var(--kbq-white-default);
   --checkbox-border-color: var(--kbq-background-error);
   --checkbox-bg-color: var(--kbq-background-error);
 }
 
-.kbq-checkbox-error-3cdabd:where(.kbq-checkbox-checked-e66779.kbq-checkbox-hovered-a8a95e) {
+.kbq-checkbox-invalid-253c35:where(.kbq-checkbox-selected-ba10f0.kbq-checkbox-hovered-a8a95e) {
   --checkbox-icon-color: var(--kbq-white-default);
   --checkbox-border-color: var(--kbq-states-background-error-hover);
   --checkbox-bg-color: var(--kbq-states-background-error-hover);
@@ -1532,7 +1532,7 @@
   --checkbox-outline-color: var(--kbq-states-line-focus-theme);
 }
 
-.kbq-checkbox-focusVisible-c41061:where(.kbq-checkbox-error-3cdabd) {
+.kbq-checkbox-focusVisible-c41061:where(.kbq-checkbox-invalid-253c35) {
   --checkbox-border-color: transparent;
   --checkbox-outline-color: var(--kbq-states-line-focus-error);
 }
@@ -1556,7 +1556,7 @@
   cursor: not-allowed;
 }
 
-.kbq-checkbox-checked-e66779:where(.kbq-checkbox-disabled-e359aa) {
+.kbq-checkbox-selected-ba10f0:where(.kbq-checkbox-disabled-e359aa) {
   --checkbox-icon-color: var(--kbq-states-icon-disabled);
 }
 
@@ -2562,21 +2562,33 @@
   --skeleton-inline-size: ;
   --skeleton-block-size: ;
   --skeleton-loader-width: 100px;
-  --skeleton-bg-color: var(--kbq-background-contrast-fade);
-  --skeleton-wave-color: var(--kbq-background-bg-tertiary);
+  --skeleton-bg-color: var(--kbq-skeleton-background);
+  --skeleton-wave-color: var(--kbq-skeleton-animation-wave-center);
   --skeleton-border-radius: var(--kbq-size-xxs);
   visibility: initial;
   border-radius: var(--skeleton-border-radius);
   background-color: var(--skeleton-bg-color);
-  background-image: linear-gradient(to right, var(--skeleton-bg-color) 0%, var(--skeleton-wave-color) calc(var(--skeleton-loader-width) / 2), var(--skeleton-bg-color) var(--skeleton-loader-width));
+  background-image: linear-gradient(to right, var(--kbq-skeleton-animation-wave-start) 0%, var(--skeleton-wave-color) calc(var(--skeleton-loader-width) / 2), var(--kbq-skeleton-animation-wave-end) var(--skeleton-loader-width));
   inline-size: var(--skeleton-inline-size);
   block-size: var(--skeleton-block-size);
   background-repeat: no-repeat;
   background-attachment: fixed;
-  animation: 2.5s linear infinite kbq-skeletonblock-skeleton-wave-3094a0;
+  animation: 1.5s linear infinite kbq-skeletonblock-skeleton-wave-3094a0;
   display: flex;
 }
 
+@media (min-width: 768px) {
+  .kbq-skeletonblock-e98401 {
+    animation-duration: 2s;
+  }
+}
+
+@media (min-width: 1280px) {
+  .kbq-skeletonblock-e98401 {
+    animation-duration: 2.5s;
+  }
+}
+
 .kbq-skeletonblock-hasChildren-88ab53 {
   max-inline-size: fit-content;
 }
@@ -2587,11 +2599,11 @@
 
 @keyframes kbq-skeletonblock-skeleton-wave-3094a0 {
   0% {
-    background-position: calc(-1 * var(--skeleton-loader-width));
+    background-position: calc(-1 * var(--skeleton-loader-width)) 0%;
   }
 
   100% {
-    background-position: 100vw;
+    background-position: 100vw 0;
   }
 }
 .kbq-skeletontypography-776dae {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.22",
+  "version": "0.0.1-beta.24",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.22",
-    "@koobiq/react-core": "0.0.1-beta.22",
-    "@koobiq/react-icons": "0.0.1-beta.22",
-    "@koobiq/react-primitives": "0.0.1-beta.22"
+    "@koobiq/logger": "0.0.1-beta.24",
+    "@koobiq/react-icons": "0.0.1-beta.24",
+    "@koobiq/react-primitives": "0.0.1-beta.24",
+    "@koobiq/react-core": "0.0.1-beta.24"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",