@ultraviolet/ui 3.7.1 → 3.8.0

package/dist/components/SelectInput/components/selectBar.css.d.ts

@@ -1,6 +1,6 @@
 export declare const maxWidthTag: `var(--${string})`;
 export declare const minWidthTag: `var(--${string})`;
-export declare const selectbarState: Record<"large" | "small", string>;
+export declare const selectbarState: Record<"small" | "large", string>;
 export declare const selectinputPlaceholder: string;
 export declare const selectBarBase: string;
 export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{

package/dist/components/SelectableCard/IllustrationContainer.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { SelectableCardProps } from './types';
+export declare const IllustrationContainer: ({ children: subChildren, productIcon, illustration, }: {
+    children: ReactNode;
+    productIcon: SelectableCardProps["productIcon"];
+    illustration: SelectableCardProps["illustration"];
+}) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+//# sourceMappingURL=IllustrationContainer.d.ts.map

package/dist/components/SelectableCard/IllustrationContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IllustrationContainer.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/IllustrationContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAElD,eAAO,MAAM,qBAAqB,GAAI,uDAInC;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,WAAW,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAC/C,YAAY,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAA;CAClD,4UAoEA,CAAA"}

package/dist/components/SelectableCard/IllustrationContainer.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as ProductIcon from "@ultraviolet/icons/product";
+import { useTheme } from "@ultraviolet/themes";
+import { useState, useEffect } from "react";
+import { Stack } from "../Stack/index.js";
+import { illustrationSelectableCard, divSelectableCard, imageSelectableCard } from "./styles.css.js";
+const IllustrationContainer = ({
+  children: subChildren,
+  productIcon,
+  illustration
+}) => {
+  const theme = useTheme();
+  const [svgContent, setSvgContent] = useState(null);
+  const ProductIconUsed = productIcon ? (
+    // biome-ignore lint/performance/noDynamicNamespaceImportAccess: to fix
+    ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`]
+  ) : null;
+  useEffect(() => {
+    if (illustration?.endsWith(".svg")) {
+      fetch(illustration).then((response) => response.text()).then((svg) => {
+        const updatedSvg = svg.replace(
+          /fill="[^"]*"/g,
+          `fill="${theme.colors.neutral.backgroundStronger}"`
+        ).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`);
+        setSvgContent(updatedSvg);
+      }).catch(() => null);
+    }
+  });
+  if (ProductIconUsed || illustration) {
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "stretch",
+        direction: "row",
+        flex: 1,
+        justifyContent: "space-between",
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsx(Stack, { className: illustrationSelectableCard, children: subChildren }),
+          /* @__PURE__ */ jsx(Stack, { justifyContent: "center", children: ProductIconUsed ? /* @__PURE__ */ jsx(ProductIconUsed, { size: "large" }) : null }),
+          illustration ? /* @__PURE__ */ jsx("div", { className: divSelectableCard, children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: imageSelectableCard,
+              dangerouslySetInnerHTML: { __html: svgContent }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: "illustration",
+              className: imageSelectableCard,
+              height: 220,
+              src: illustration,
+              width: 220
+            }
+          ) }) : null
+        ]
+      }
+    );
+  }
+  return subChildren;
+};
+export {
+  IllustrationContainer
+};

package/dist/components/SelectableCard/MultiStateInput.d.ts

@@ -0,0 +1,3 @@
+import type { MultiStateProps } from './types';
+export declare const MultiStateInput: ({ checked, disabled, id, label, "aria-label": ariaLabel, innerRef, isError, name, onBlur, onChange, onFocus, type, value, }: MultiStateProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=MultiStateInput.d.ts.map

package/dist/components/SelectableCard/MultiStateInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStateInput.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/MultiStateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9C,eAAO,MAAM,eAAe,GAAI,6HAc7B,eAAe,mDA4EjB,CAAA"}

package/dist/components/SelectableCard/MultiStateInput.js

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "../Checkbox/index.js";
+import { Radio } from "../Radio/index.js";
+import { Toggle } from "../Toggle/index.js";
+import { selectableElementSelectableCard } from "./styles.css.js";
+const MultiStateInput = ({
+  checked,
+  disabled,
+  id,
+  label,
+  "aria-label": ariaLabel,
+  innerRef,
+  isError,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  type,
+  value
+}) => {
+  if (!type) {
+    return null;
+  }
+  if (type === "checkbox") {
+    const labelProps = label ? { "aria-label": void 0, children: label } : { "aria-label": ariaLabel };
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked,
+        className: selectableElementSelectableCard,
+        "data-error": isError,
+        disabled,
+        error: isError,
+        id,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        ref: innerRef,
+        tabIndex: -1,
+        value,
+        ...labelProps
+      }
+    );
+  }
+  if (type === "radio") {
+    const labelProps = label ? { label } : { "aria-label": ariaLabel };
+    return /* @__PURE__ */ jsx(
+      Radio,
+      {
+        checked,
+        className: selectableElementSelectableCard,
+        "data-error": isError,
+        disabled,
+        error: isError,
+        id,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        ref: innerRef,
+        tabIndex: -1,
+        value,
+        ...labelProps
+      }
+    );
+  }
+  if (type === "toggle") {
+    const labelProps = label ? { label } : { "aria-label": ariaLabel };
+    return /* @__PURE__ */ jsx(
+      Toggle,
+      {
+        checked,
+        className: selectableElementSelectableCard,
+        "data-error": isError,
+        disabled,
+        error: isError,
+        id,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        ref: innerRef,
+        tabIndex: -1,
+        value,
+        ...labelProps
+      }
+    );
+  }
+  return null;
+};
+export {
+  MultiStateInput
+};

package/dist/components/SelectableCard/SelectableCard.d.ts

@@ -0,0 +1,7 @@
+import type { SelectableCardProps } from './types';
+/**
+ * SelectableCard is a component that can be used to create a radio or checkbox card.
+ * It can be used to create a list of selectable items or a single selectable item.
+ */
+export declare const SelectableCard: import("react").ForwardRefExoticComponent<SelectableCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SelectableCard.d.ts.map

package/dist/components/SelectableCard/SelectableCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlD;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAyL1B,CAAA"}

package/dist/components/SelectableCard/SelectableCard.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { forwardRef, useRef, useMemo, useCallback } from "react";
+import { Stack } from "../Stack/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { IllustrationContainer } from "./IllustrationContainer.js";
+import { MultiStateInput } from "./MultiStateInput.js";
+import { stackSelectableCard, indentedCard, containerSelectableCard, labelContainerSelectableCardLabel, labelContainerSelectableCardNoLabel } from "./styles.css.js";
+import { widthSelectable, labelDisplay, inputDisplay } from "./variables.css.js";
+const SelectableCard = forwardRef(
+  ({
+    name,
+    value,
+    onChange,
+    showTick = false,
+    type = "radio",
+    checked = false,
+    disabled = false,
+    children,
+    className,
+    isError,
+    onFocus,
+    onBlur,
+    tooltip,
+    id,
+    label,
+    "data-testid": dataTestId,
+    productIcon,
+    illustration,
+    "aria-label": ariaLabel,
+    style,
+    indented = true
+  }, ref) => {
+    const innerRef = useRef(null);
+    const childrenRef = useRef(null);
+    const image = useMemo(() => {
+      if (illustration) {
+        return "illustration";
+      }
+      if (productIcon) {
+        return "icon";
+      }
+      return "none";
+    }, [illustration, productIcon]);
+    const ParentContainer = useCallback(
+      ({ children: subChildren }) => {
+        if (tooltip) {
+          return /* @__PURE__ */ jsx(Stack, { flex: 1, children: /* @__PURE__ */ jsx(Tooltip, { containerFullHeight: true, text: tooltip, children: subChildren }) });
+        }
+        return /* @__PURE__ */ jsx(Tooltip, { children: subChildren });
+      },
+      [tooltip]
+    );
+    const onKeyDown = useCallback(
+      (event) => {
+        if (event.key === " " && innerRef?.current) {
+          event.preventDefault();
+          innerRef.current.click();
+        }
+      },
+      [innerRef]
+    );
+    const isComplexChildren = ["function", "array", "object"].includes(
+      typeof children
+    );
+    const onClickContainer = useCallback(
+      (event) => {
+        if (innerRef.current && !disabled) {
+          const inputElement = innerRef.current;
+          const labelElement = document.querySelector(
+            `label[for="${inputElement.id}"]`
+          );
+          const targetNode = event.target;
+          if (!(inputElement.contains(targetNode) || labelElement?.contains(targetNode))) {
+            inputElement.click();
+          }
+        }
+      },
+      [disabled]
+    );
+    return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(
+      Stack,
+      {
+        alignItems: "flex-start",
+        className: cn(
+          className,
+          containerSelectableCard({
+            cursor: (type === "checkbox" || type === "toggle") && isComplexChildren ? "default" : "custom",
+            image
+          }),
+          label ? labelContainerSelectableCardLabel : labelContainerSelectableCardNoLabel
+        ),
+        "data-checked": checked,
+        "data-disabled": disabled,
+        "data-error": isError,
+        "data-testid": dataTestId,
+        "data-type": type,
+        direction: label ? "column" : "row",
+        flex: 1,
+        gap: 0.5,
+        onClick: (type === "checkbox" || type === "toggle") && isComplexChildren ? void 0 : onClickContainer,
+        onKeyDown,
+        ref,
+        role: "button",
+        style: {
+          ...assignInlineVars({
+            [inputDisplay]: showTick ? "inline" : "none",
+            [labelDisplay]: showTick || label ? "inline" : "none",
+            [widthSelectable]: label ? "100%" : "auto"
+          }),
+          ...style
+        },
+        tabIndex: disabled ? void 0 : 0,
+        children: /* @__PURE__ */ jsxs(
+          IllustrationContainer,
+          {
+            illustration,
+            productIcon,
+            children: [
+              /* @__PURE__ */ jsx(
+                MultiStateInput,
+                {
+                  "aria-label": ariaLabel,
+                  checked,
+                  "data-error": isError,
+                  disabled,
+                  id,
+                  innerRef,
+                  isError,
+                  label,
+                  name,
+                  onBlur,
+                  onChange,
+                  onFocus,
+                  type,
+                  value
+                }
+              ),
+              children ? /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  className: cn(
+                    stackSelectableCard,
+                    !!label && showTick && indented ? indentedCard : void 0
+                  ),
+                  "data-has-default-cursor": (type === "checkbox" || type === "toggle") && isComplexChildren,
+                  "data-has-label": !!label && showTick,
+                  onKeyDown: (event) => event.stopPropagation(),
+                  ref: childrenRef,
+                  width: "100%",
+                  children: typeof children === "function" ? children({ checked, disabled }) : children
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+export {
+  SelectableCard
+};

package/dist/components/SelectableCard/index.d.ts

@@ -1,34 +1,2 @@
-import * as ProductIcon from '@ultraviolet/icons/product';
-import type { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode } from 'react';
-import type { LabelProp, PascalToCamelCaseWithoutSuffix } from '../../types';
-export type SelectableCardProps = {
-    name?: string;
-    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
-    value: string | number;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-    showTick?: boolean;
-    type?: 'radio' | 'checkbox';
-    disabled?: boolean;
-    checked?: boolean;
-    className?: string;
-    isError?: boolean;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    id?: string;
-    tooltip?: string;
-    'data-testid'?: string;
-    style?: CSSProperties;
-    indented?: boolean;
-} & ({
-    illustration?: string;
-    productIcon?: never;
-} | {
-    productIcon?: PascalToCamelCaseWithoutSuffix<keyof typeof ProductIcon, 'ProductIcon'>;
-    illustration?: never;
-}) & LabelProp;
-/**
- * SelectableCard is a component that can be used to create a radio or checkbox card.
- * It can be used to create a list of selectable items or a single selectable item.
- */
-export declare const SelectableCard: import("react").ForwardRefExoticComponent<SelectableCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export { SelectableCard } from './SelectableCard';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/SelectableCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAIzD,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EAIjB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,OAAO,KAAK,EAAE,SAAS,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAkB5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EACL,CAAC,CAAC,EACA,QAAQ,EACR,OAAO,GACR,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,KAAK,SAAS,CAAC,GACnE,SAAS,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CACA;IACE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,GACD;IACE,WAAW,CAAC,EAAE,8BAA8B,CAC1C,MAAM,OAAO,WAAW,EACxB,aAAa,CACd,CAAA;IACD,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CACJ,GACC,SAAS,CAAA;AAEX;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAkR1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}

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

@@ -0,0 +1,32 @@
+import type * as ProductIcon from '@ultraviolet/icons/product';
+import type { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode, RefObject } from 'react';
+import type { LabelProp, PascalToCamelCaseWithoutSuffix } from '../../types';
+export type SelectableCardProps = {
+    name?: string;
+    children?: (({ disabled, checked, }: Pick<SelectableCardProps, 'checked' | 'disabled'>) => ReactNode) | ReactNode;
+    value: string | number;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    showTick?: boolean;
+    type?: 'radio' | 'checkbox' | 'toggle';
+    disabled?: boolean;
+    checked?: boolean;
+    className?: string;
+    isError?: boolean;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    id?: string;
+    tooltip?: string;
+    'data-testid'?: string;
+    style?: CSSProperties;
+    indented?: boolean;
+} & ({
+    illustration?: string;
+    productIcon?: never;
+} | {
+    productIcon?: PascalToCamelCaseWithoutSuffix<keyof typeof ProductIcon, 'ProductIcon'>;
+    illustration?: never;
+}) & LabelProp;
+export type MultiStateProps = Pick<SelectableCardProps, 'type' | 'checked' | 'isError' | 'id' | 'disabled' | 'onFocus' | 'label' | 'aria-label' | 'onChange' | 'name' | 'showTick' | 'onBlur' | 'value'> & {
+    innerRef: RefObject<HTMLInputElement | null>;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/SelectableCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAC9D,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,SAAS,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAE5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EACL,CAAC,CAAC,EACA,QAAQ,EACR,OAAO,GACR,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,KAAK,SAAS,CAAC,GACnE,SAAS,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CACA;IACE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,GACD;IACE,WAAW,CAAC,EAAE,8BAA8B,CAC1C,MAAM,OAAO,WAAW,EACxB,aAAa,CACd,CAAA;IACD,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CACJ,GACC,SAAS,CAAA;AAEX,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,mBAAmB,EACjB,MAAM,GACN,SAAS,GACT,SAAS,GACT,IAAI,GACJ,UAAU,GACV,SAAS,GACT,OAAO,GACP,YAAY,GACZ,UAAU,GACV,MAAM,GACN,UAAU,GACV,QAAQ,GACR,OAAO,CACV,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAC7C,CAAA"}

package/dist/components/SelectableCardGroup/index.js

@@ -4,10 +4,10 @@ import { cn } from "@ultraviolet/utils";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
-import { SelectableCard } from "../SelectableCard/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { selectableCardGroupFieldSet } from "./styles.css.js";
+import { SelectableCard } from "../SelectableCard/SelectableCard.js";
 const SelectableCardGroupContext = createContext(void 0);
 const CardSelectableCard = ({
   value,

package/dist/components/SelectableCardOptionGroup/components/Option.js

@@ -3,12 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
 import { useId } from "react";
 import { Label } from "../../Label/index.js";
-import { SelectableCard } from "../../SelectableCard/index.js";
 import { SelectInput } from "../../SelectInput/index.js";
 import { Stack } from "../../Stack/index.js";
 import { useSelectableCardOptionGroup } from "../Provider.js";
 import { optionFullHeight, optionPadded, optionSelectInput, optionSelectInputDisabled, optionSelectInputError, selectableCard } from "../styles.css.js";
 import { Image } from "./Image.js";
+import { SelectableCard } from "../../SelectableCard/SelectableCard.js";
 const Option = ({
   value,
   label,

package/dist/components/Separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,iBAAiB,CAAA;AAErB;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,6FAQvB,cAAc,4CAkCd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,iBAAiB,CAAA;AAErB;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,6FAQvB,cAAc,4CAmCd,CAAA"}

package/dist/components/Separator/index.js

@@ -13,6 +13,7 @@ const Separator = ({
   style
 }) => children ? (
   // biome-ignore  lint/a11y/useFocusableInteractive: to fix
+  // biome-ignore lint/a11y/useSemanticElements: cannot have a separator inside a separator
   /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/components/Skeleton/Donut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Donut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,+CAyBjB,CAAA"}
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Donut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,+CA0BjB,CAAA"}

package/dist/components/Skeleton/Donut.js

@@ -3,15 +3,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Line } from "./Line.js";
 import { donutSkeletonContainer, donutSkeletonSvg, donutSkeletonCircle, CIRCLE_SIZE, donutSkeletonLineList } from "./stylesVariants.css.js";
 const Donut = () => /* @__PURE__ */ jsxs("div", { className: donutSkeletonContainer, children: [
-  /* @__PURE__ */ jsx("svg", { className: donutSkeletonSvg, children: /* @__PURE__ */ jsx(
-    "circle",
-    {
-      className: donutSkeletonCircle,
-      cx: `${CIRCLE_SIZE / 2}rem`,
-      cy: `${CIRCLE_SIZE / 2}rem`,
-      r: "90"
-    }
-  ) }),
+  /* @__PURE__ */ jsxs("svg", { className: donutSkeletonSvg, children: [
+    /* @__PURE__ */ jsx("title", { children: "donut skeleton" }),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: donutSkeletonCircle,
+        cx: `${CIRCLE_SIZE / 2}rem`,
+        cy: `${CIRCLE_SIZE / 2}rem`,
+        r: "90"
+      }
+    )
+  ] }),
   /* @__PURE__ */ jsxs("ul", { className: donutSkeletonLineList, children: [
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),

package/dist/components/Slider/styles.css.d.ts

@@ -94,7 +94,7 @@ export declare const sliderThumbStyle: import("@vanilla-extract/recipes").Runtim
 export declare const sliderDoubleText: import("@vanilla-extract/recipes").RuntimeFn<{
     isDouble: {
         false: {
-            alignSelf: "end";
+            alignSelf: "flex-end";
         };
         true: {
             alignSelf: "center";