@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/SelectableCardOptionGroup/index.js

@@ -1,6 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
@@ -8,22 +7,7 @@ import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { Option } from "./components/Option.js";
 import { SelectableCardOptionGroupContext } from "./Provider.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const FieldSet = /* @__PURE__ */ _styled("fieldset", process.env.NODE_ENV === "production" ? {
-  target: "eomr2n30"
-} : {
-  target: "eomr2n30",
-  label: "FieldSet"
-})(process.env.NODE_ENV === "production" ? {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0"
-} : {
-  name: "7o2an9",
-  styles: "border:none;padding:0;margin:0/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXAvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9TZWxlY3RhYmxlQ2FyZE9wdGlvbkdyb3VwL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgQ29tcG9uZW50UHJvcHMsIElucHV0SFRNTEF0dHJpYnV0ZXMsIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgTGFiZWwgfSBmcm9tICcuLi9MYWJlbCdcbmltcG9ydCB7IFJvdyB9IGZyb20gJy4uL1JvdydcbmltcG9ydCB7IFN0YWNrIH0gZnJvbSAnLi4vU3RhY2snXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVGV4dCdcbmltcG9ydCB7IE9wdGlvbiB9IGZyb20gJy4vY29tcG9uZW50cy9PcHRpb24nXG5pbXBvcnQgeyBTZWxlY3RhYmxlQ2FyZE9wdGlvbkdyb3VwQ29udGV4dCB9IGZyb20gJy4vUHJvdmlkZXInXG5pbXBvcnQgdHlwZSB7IFNpemVzIH0gZnJvbSAnLi90eXBlcydcblxuY29uc3QgRmllbGRTZXQgPSBzdHlsZWQuZmllbGRzZXRgXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwO1xuYFxuXG50eXBlIFNlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXBQcm9wcyA9IHtcbiAgbGVnZW5kPzogc3RyaW5nXG4gIGxlZ2VuZERlc2NyaXB0aW9uPzogUmVhY3ROb2RlXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICByZXF1aXJlZD86IGJvb2xlYW5cbiAgY29sdW1ucz86IG51bWJlclxuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIGhlbHBlcj86IFJlYWN0Tm9kZVxuICBlcnJvcj86IFJlYWN0Tm9kZVxuICAvKipcbiAgICogVGhlIHZhbHVlIHRoYXQgaXMgc2VsZWN0ZWQgYW1vbmcgc2VsZWN0YWJsZSBjYXJkIG9wdGlvbnMuXG4gICAqL1xuICB2YWx1ZT86IENvbXBvbmVudFByb3BzPHR5cGVvZiBPcHRpb24+Wyd2YWx1ZSddXG4gIC8qKlxuICAgKiBUaGUgdmFsdWUgdGhhdCBpcyBzZWxlY3RlZCBhbW9uZyBzZWxlY3QgaW5wdXQgb3B0aW9ucy5cbiAgICovXG4gIG9wdGlvblZhbHVlPzogQ29tcG9uZW50UHJvcHM8dHlwZW9mIE9wdGlvbj5bJ29wdGlvblZhbHVlJ11cbiAgb25DaGFuZ2VPcHRpb246ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBzaXplPzogU2l6ZXNcbn0gJiBSZXF1aXJlZDxQaWNrPElucHV0SFRNTEF0dHJpYnV0ZXM8SFRNTElucHV0RWxlbWVudD4sICdvbkNoYW5nZSc+PiAmXG4gIFBpY2s8SW5wdXRIVE1MQXR0cmlidXRlczxIVE1MSW5wdXRFbGVtZW50PiwgJ25hbWUnPlxuXG4vKipcbiAqIFNlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXAgZ2l2ZXMgeW91IGEgZ3JvdXAgb2YgU2VsZWN0SW5wdXQgd2l0aGluIGEgU2VsZWN0YWJsZUNhcmQgY29tcG9uZW50LlxuICogSXQncyBhbiBpbnB1dCB0aGF0IHByb3ZpZGUgdGhlIGNob2ljZSBvZiBvbmUgdmFsdWUgYW5kIHN1YiBvcHRpb25zIHRvIGNob29zZSBmcm9tLlxuICpcbiAqICoqQmUgYXdhcmUgdGhhdCBvbmNlIHlvdSBjbGljayBvbiB0aGUgY29tcG9uZW50LCB0aGUgZmlyc3QgdmFsdWUgb2Ygb3B0aW9ucyB3aWxsIGJlIHNlbGVjdGVkIGJ5IGRlZmF1bHQuKipcbiAqL1xuZXhwb3J0IGNvbnN0IFNlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXAgPSAoe1xuICBsZWdlbmQsXG4gIGxlZ2VuZERlc2NyaXB0aW9uLFxuICBjbGFzc05hbWUsXG4gIHJlcXVpcmVkLFxuICBjb2x1bW5zID0gMyxcbiAgY2hpbGRyZW4sXG4gIGhlbHBlcixcbiAgZXJyb3IsXG4gIG9uQ2hhbmdlLFxuICB2YWx1ZSxcbiAgb3B0aW9uVmFsdWUsXG4gIG9uQ2hhbmdlT3B0aW9uLFxuICBuYW1lLFxuICBkaXNhYmxlZCxcbiAgc2l6ZSA9ICdsYXJnZScsXG59OiBTZWxlY3RhYmxlQ2FyZE9wdGlvbkdyb3VwUHJvcHMpID0+IHtcbiAgY29uc3QgY29udGV4dFZhbHVlID0gdXNlTWVtbyhcbiAgICAoKSA9PiAoe1xuICAgICAgZGlzYWJsZWQsXG4gICAgICBlcnJvcjogISFlcnJvcixcbiAgICAgIGdyb3VwTmFtZTogbmFtZSxcbiAgICAgIGdyb3VwVmFsdWU6IHZhbHVlLFxuICAgICAgb25DaGFuZ2UsXG4gICAgICBvbkNoYW5nZU9wdGlvbixcbiAgICAgIG9wdGlvblZhbHVlLFxuICAgICAgcmVxdWlyZWQsXG4gICAgICBzaXplLFxuICAgIH0pLFxuICAgIFtcbiAgICAgIGRpc2FibGVkLFxuICAgICAgZXJyb3IsXG4gICAgICBuYW1lLFxuICAgICAgb25DaGFuZ2UsXG4gICAgICBvbkNoYW5nZU9wdGlvbixcbiAgICAgIG9wdGlvblZhbHVlLFxuICAgICAgcmVxdWlyZWQsXG4gICAgICB2YWx1ZSxcbiAgICAgIHNpemUsXG4gICAgXSxcbiAgKVxuXG4gIHJldHVybiAoXG4gICAgPFNlbGVjdGFibGVDYXJkT3B0aW9uR3JvdXBDb250ZXh0LlByb3ZpZGVyIHZhbHVlPXtjb250ZXh0VmFsdWV9PlxuICAgICAgPFN0YWNrIGdhcD17MX0+XG4gICAgICAgIDxGaWVsZFNldCBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICAgICAgPFN0YWNrIGdhcD17MS41fT5cbiAgICAgICAgICAgIHtsZWdlbmQgPyAoXG4gICAgICAgICAgICAgIDxMYWJlbFxuICAgICAgICAgICAgICAgIGFzPVwibGVnZW5kXCJcbiAgICAgICAgICAgICAgICBsYWJlbERlc2NyaXB0aW9uPXtsZWdlbmREZXNjcmlwdGlvbn1cbiAgICAgICAgICAgICAgICByZXF1aXJlZD17cmVxdWlyZWR9XG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICB7bGVnZW5kfVxuICAgICAgICAgICAgICA8L0xhYmVsPlxuICAgICAgICAgICAgKSA6IG51bGx9XG4gICAgICAgICAgICA8Um93IGdhcD17Mn0gdGVtcGxhdGVDb2x1bW5zPXtgcmVwZWF0KCR7Y29sdW1uc30sIG1pbm1heCgwLCAxZnIpKWB9PlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1Jvdz5cbiAgICAgICAgICA8L1N0YWNrPlxuICAgICAgICA8L0ZpZWxkU2V0PlxuICAgICAgICB7KGVycm9yICYmIHR5cGVvZiBlcnJvciA9PT0gJ3N0cmluZycpIHx8IGhlbHBlciA/IChcbiAgICAgICAgICA8VGV4dFxuICAgICAgICAgICAgYXM9XCJzcGFuXCJcbiAgICAgICAgICAgIHByb21pbmVuY2U9XCJ3ZWFrXCJcbiAgICAgICAgICAgIHNlbnRpbWVudD17ZXJyb3IgPyAnZGFuZ2VyJyA6ICduZXV0cmFsJ31cbiAgICAgICAgICAgIHZhcmlhbnQ9XCJjYXB0aW9uXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7aGVscGVyIHx8IGVycm9yfVxuICAgICAgICAgIDwvVGV4dD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1N0YWNrPlxuICAgIDwvU2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cENvbnRleHQuUHJvdmlkZXI+XG4gIClcbn1cblxuU2VsZWN0YWJsZUNhcmRPcHRpb25Hcm91cC5PcHRpb24gPSBPcHRpb25cbiJdfQ== */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+import { selectableCardOptionFieldSet } from "./styles.css.js";
 const SelectableCardOptionGroup = ({
   legend,
   legendDescription,
@@ -39,25 +23,62 @@ const SelectableCardOptionGroup = ({
   onChangeOption,
   name,
   disabled,
-  size = "large"
+  size = "large",
+  style
 }) => {
-  const contextValue = useMemo(() => ({
-    disabled,
-    error: !!error,
-    groupName: name,
-    groupValue: value,
-    onChange,
-    onChangeOption,
-    optionValue,
-    required,
-    size
-  }), [disabled, error, name, onChange, onChangeOption, optionValue, required, value, size]);
-  return /* @__PURE__ */ jsx(SelectableCardOptionGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx(FieldSet, { className, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
-      legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-      /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
-    ] }) }),
-    error && typeof error === "string" || helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: error ? "danger" : "neutral", variant: "caption", children: helper || error }) : null
+  const contextValue = useMemo(
+    () => ({
+      disabled,
+      error: !!error,
+      groupName: name,
+      groupValue: value,
+      onChange,
+      onChangeOption,
+      optionValue,
+      required,
+      size
+    }),
+    [
+      disabled,
+      error,
+      name,
+      onChange,
+      onChangeOption,
+      optionValue,
+      required,
+      value,
+      size
+    ]
+  );
+  return /* @__PURE__ */ jsx(SelectableCardOptionGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, style, children: [
+    /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        className: `${className ? `${className} ` : ""}${selectableCardOptionFieldSet}`,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          legend ? /* @__PURE__ */ jsx(
+            Label,
+            {
+              as: "legend",
+              labelDescription: legendDescription,
+              required,
+              children: legend
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
+        ] })
+      }
+    ),
+    error && typeof error === "string" || helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "weak",
+        sentiment: error ? "danger" : "neutral",
+        variant: "caption",
+        children: helper || error
+      }
+    ) : null
   ] }) });
 };
 SelectableCardOptionGroup.Option = Option;

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

@@ -0,0 +1,8 @@
+export declare const selectableCardOptionFieldSet: string;
+export declare const disabledImage: string;
+export declare const selectableCard: string;
+export declare const optionFullHeight: string;
+export declare const optionSelectInput: string;
+export declare const optionSelectInputDisabled: string;
+export declare const optionSelectInputError: string;
+export declare const optionPadded: string;

package/dist/components/SelectableCardOptionGroup/styles.css.js

@@ -0,0 +1,21 @@
+/* empty css                                 */
+/* empty css                                                     */
+/* empty css                          */
+var selectableCardOptionFieldSet = "uv_12n1yvr0";
+var disabledImage = "uv_12n1yvr1";
+var selectableCard = "uv_12n1yvr2";
+var optionFullHeight = "uv_12n1yvr3";
+var optionSelectInput = "uv_12n1yvr4";
+var optionSelectInputDisabled = "uv_12n1yvr5";
+var optionSelectInputError = "uv_12n1yvr6";
+var optionPadded = "uv_12n1yvr7";
+export {
+  disabledImage,
+  optionFullHeight,
+  optionPadded,
+  optionSelectInput,
+  optionSelectInputDisabled,
+  optionSelectInputError,
+  selectableCard,
+  selectableCardOptionFieldSet
+};

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

@@ -1,13 +1,14 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { SeparatorVariants } from './styles.css';
 type SeparatorProps = {
     thickness?: number;
     className?: string;
     'data-testid'?: string;
     children?: ReactNode;
+    style?: CSSProperties;
 } & SeparatorVariants;
 /**
  * Separator component used to separate content with a horizontal or vertical line.
  */
-export declare const Separator: ({ direction, thickness, sentiment, className, "data-testid": dataTestId, children, }: SeparatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Separator: ({ direction, thickness, sentiment, className, "data-testid": dataTestId, children, style, }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Separator/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { iconWraperSeparator, hr, thicknessSeparator } from "./styles.css.js";
 const Separator = ({
@@ -8,32 +8,50 @@ const Separator = ({
   sentiment = "neutral",
   className,
   "data-testid": dataTestId,
-  children
-}) => children ? /* @__PURE__ */ jsxs("div", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${iconWraperSeparator({
-  direction,
-  sentiment
-})}`, "data-testid": dataTestId, role: "separator", children: [
-  /* @__PURE__ */ jsx("hr", { className: hr({
-    direction,
-    hasIcon: true,
-    sentiment
-  }), style: assignInlineVars({
-    [thicknessSeparator]: `${thickness}px`
-  }) }),
   children,
-  /* @__PURE__ */ jsx("hr", { className: hr({
-    direction,
-    hasIcon: true,
-    sentiment
-  }), style: assignInlineVars({
-    [thicknessSeparator]: `${thickness}px`
-  }) })
-] }) : /* @__PURE__ */ jsx("hr", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${hr({
-  direction,
-  sentiment
-})}`, "data-testid": dataTestId, role: "separator", style: assignInlineVars({
-  [thicknessSeparator]: `${thickness}px`
-}) });
+  style
+}) => children ? /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "aria-orientation": direction,
+    className: `${className ? `${className} ` : ""}${iconWraperSeparator({ direction, sentiment })}`,
+    "data-testid": dataTestId,
+    role: "separator",
+    style,
+    children: [
+      /* @__PURE__ */ jsx(
+        "hr",
+        {
+          className: hr({ direction, hasIcon: true, sentiment }),
+          style: assignInlineVars({
+            [thicknessSeparator]: `${thickness}px`
+          })
+        }
+      ),
+      children,
+      /* @__PURE__ */ jsx(
+        "hr",
+        {
+          className: hr({ direction, hasIcon: true, sentiment }),
+          style: assignInlineVars({
+            [thicknessSeparator]: `${thickness}px`
+          })
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ jsx(
+  "hr",
+  {
+    "aria-orientation": direction,
+    className: `${className ? `${className} ` : ""}${hr({ direction, sentiment })}`,
+    "data-testid": dataTestId,
+    role: "separator",
+    style: assignInlineVars({
+      [thicknessSeparator]: `${thickness}px`
+    })
+  }
+);
 export {
   Separator
 };

package/dist/components/Skeleton/Block.d.ts

@@ -1,3 +1,3 @@
 export declare const Block: ({ length }: {
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Block.js

@@ -1,36 +1,10 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
-const StyledLine = /* @__PURE__ */ _styled("li", process.env.NODE_ENV === "production" ? {
-  target: "ez87ex11"
-} : {
-  target: "ez87ex11",
-  label: "StyledLine"
-})("display:flex;align-items:center;padding:", ({
-  theme
-}) => `${theme.space["3"]} ${theme.space["2"]}`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0Jsb2NrLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vQmxvY2sudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEljb25Ta2VsZXRvbiB9IGZyb20gJy4vSWNvblNrZWxldG9uJ1xuaW1wb3J0IHsgTGluZSB9IGZyb20gJy4vTGluZSdcblxuY29uc3QgU3R5bGVkTGluZSA9IHN0eWxlZC5saWBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiBgJHt0aGVtZS5zcGFjZVsnMyddfSAke3RoZW1lLnNwYWNlWycyJ119YH07XG5gXG5cbmNvbnN0IFN0eWxlZExpc3QgPSBzdHlsZWQudWxgXG4gIG1pbi1oZWlnaHQ6IDEyLjVyZW07XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIG1hcmdpbjogMDtcblxuICA+ICR7U3R5bGVkTGluZX06bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyfTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgQmxvY2sgPSAoeyBsZW5ndGggPSAzIH06IHsgbGVuZ3RoPzogbnVtYmVyIH0pID0+IChcbiAgPFN0eWxlZExpc3Q+XG4gICAge0FycmF5LmZyb20oeyBsZW5ndGggfSwgKF8sIGkpID0+IChcbiAgICAgIDxGcmFnbWVudCBrZXk9e2Bza2VsZXRvbi1ibG9jay0ke2l9YH0+XG4gICAgICAgIDxTdHlsZWRMaW5lPlxuICAgICAgICAgIDxJY29uU2tlbGV0b24gLz5cbiAgICAgICAgICA8TGluZSAvPlxuICAgICAgICA8L1N0eWxlZExpbmU+XG4gICAgICA8L0ZyYWdtZW50PlxuICAgICkpfVxuICA8L1N0eWxlZExpc3Q+XG4pXG4iXX0= */"));
-const StyledList = /* @__PURE__ */ _styled("ul", process.env.NODE_ENV === "production" ? {
-  target: "ez87ex10"
-} : {
-  target: "ez87ex10",
-  label: "StyledList"
-})("min-height:12.5rem;width:100%;height:100%;padding:", ({
-  theme
-}) => theme.space["2"], ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";margin:0;>", StyledLine, ":not(:last-child){border-bottom:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0Jsb2NrLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vQmxvY2sudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEljb25Ta2VsZXRvbiB9IGZyb20gJy4vSWNvblNrZWxldG9uJ1xuaW1wb3J0IHsgTGluZSB9IGZyb20gJy4vTGluZSdcblxuY29uc3QgU3R5bGVkTGluZSA9IHN0eWxlZC5saWBcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiBgJHt0aGVtZS5zcGFjZVsnMyddfSAke3RoZW1lLnNwYWNlWycyJ119YH07XG5gXG5cbmNvbnN0IFN0eWxlZExpc3QgPSBzdHlsZWQudWxgXG4gIG1pbi1oZWlnaHQ6IDEyLjVyZW07XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIG1hcmdpbjogMDtcblxuICA+ICR7U3R5bGVkTGluZX06bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyfTtcbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgQmxvY2sgPSAoeyBsZW5ndGggPSAzIH06IHsgbGVuZ3RoPzogbnVtYmVyIH0pID0+IChcbiAgPFN0eWxlZExpc3Q+XG4gICAge0FycmF5LmZyb20oeyBsZW5ndGggfSwgKF8sIGkpID0+IChcbiAgICAgIDxGcmFnbWVudCBrZXk9e2Bza2VsZXRvbi1ibG9jay0ke2l9YH0+XG4gICAgICAgIDxTdHlsZWRMaW5lPlxuICAgICAgICAgIDxJY29uU2tlbGV0b24gLz5cbiAgICAgICAgICA8TGluZSAvPlxuICAgICAgICA8L1N0eWxlZExpbmU+XG4gICAgICA8L0ZyYWdtZW50PlxuICAgICkpfVxuICA8L1N0eWxlZExpc3Q+XG4pXG4iXX0= */"));
-const Block = ({
-  length = 3
-}) => /* @__PURE__ */ jsx(StyledList, { children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(StyledLine, { children: [
+import { blockSkeletonList, blockSkeletonLine } from "./stylesVariants.css.js";
+const Block = ({ length = 3 }) => /* @__PURE__ */ jsx("ul", { className: blockSkeletonList, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: blockSkeletonLine, children: [
   /* @__PURE__ */ jsx(IconSkeleton, {}),
   /* @__PURE__ */ jsx(Line, {})
 ] }) }, `skeleton-block-${i}`)) });

package/dist/components/Skeleton/Blocks.d.ts

@@ -1,4 +1,4 @@
 export declare const Blocks: ({ col, length, }: {
     col?: number;
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Blocks.js

@@ -1,39 +1,25 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "esrnljb1"
-} : {
-  target: "esrnljb1",
-  label: "StyledContainer"
-})("display:grid;grid-template-columns:repeat(", ({
-  col
-}) => col, ", 1fr);gap:", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0Jsb2Nrcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTW1EIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0Jsb2Nrcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJY29uU2tlbGV0b24gfSBmcm9tICcuL0ljb25Ta2VsZXRvbidcbmltcG9ydCB7IExpbmUgfSBmcm9tICcuL0xpbmUnXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8eyBjb2w6IG51bWJlciB9PmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoJHsoeyBjb2wgfSkgPT4gY29sfSwgMWZyKTtcbiAgZ2FwOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycyJ119O1xuYFxuXG5jb25zdCBCbG9jayA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNwYWNlWycxJ119ICR7dGhlbWUuc3BhY2VbJzInXX1gfTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuZXhwb3J0IGNvbnN0IEJsb2NrcyA9ICh7XG4gIGNvbCA9IDQsXG4gIGxlbmd0aCA9IDgsXG59OiB7XG4gIGNvbD86IG51bWJlclxuICBsZW5ndGg/OiBudW1iZXJcbn0pID0+IChcbiAgPFN0eWxlZENvbnRhaW5lciBjb2w9e2NvbH0+XG4gICAge0FycmF5LmZyb20oeyBsZW5ndGggfSwgKF8sIGkpID0+IChcbiAgICAgIDxCbG9jayBrZXk9e2Bza2VsZXRvbi1ibG9ja3MtJHtpfWB9PlxuICAgICAgICA8SWNvblNrZWxldG9uIC8+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L0Jsb2NrPlxuICAgICkpfVxuICA8L1N0eWxlZENvbnRhaW5lcj5cbilcbiJdfQ== */"));
-const Block = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "esrnljb0"
-} : {
-  target: "esrnljb0",
-  label: "Block"
-})("width:100%;display:flex;align-items:center;padding:", ({
-  theme
-}) => `${theme.space["1"]} ${theme.space["2"]}`, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0Jsb2Nrcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWXdCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0Jsb2Nrcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBJY29uU2tlbGV0b24gfSBmcm9tICcuL0ljb25Ta2VsZXRvbidcbmltcG9ydCB7IExpbmUgfSBmcm9tICcuL0xpbmUnXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8eyBjb2w6IG51bWJlciB9PmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoJHsoeyBjb2wgfSkgPT4gY29sfSwgMWZyKTtcbiAgZ2FwOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycyJ119O1xuYFxuXG5jb25zdCBCbG9jayA9IHN0eWxlZC5kaXZgXG4gIHdpZHRoOiAxMDAlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNwYWNlWycxJ119ICR7dGhlbWUuc3BhY2VbJzInXX1gfTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuZXhwb3J0IGNvbnN0IEJsb2NrcyA9ICh7XG4gIGNvbCA9IDQsXG4gIGxlbmd0aCA9IDgsXG59OiB7XG4gIGNvbD86IG51bWJlclxuICBsZW5ndGg/OiBudW1iZXJcbn0pID0+IChcbiAgPFN0eWxlZENvbnRhaW5lciBjb2w9e2NvbH0+XG4gICAge0FycmF5LmZyb20oeyBsZW5ndGggfSwgKF8sIGkpID0+IChcbiAgICAgIDxCbG9jayBrZXk9e2Bza2VsZXRvbi1ibG9ja3MtJHtpfWB9PlxuICAgICAgICA8SWNvblNrZWxldG9uIC8+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L0Jsb2NrPlxuICAgICkpfVxuICA8L1N0eWxlZENvbnRhaW5lcj5cbilcbiJdfQ== */"));
+import { blocksContainer, blocksSkeleton, columns } from "./stylesVariants.css.js";
 const Blocks = ({
   col = 4,
   length = 8
-}) => /* @__PURE__ */ jsx(StyledContainer, { col, children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsxs(Block, { children: [
-  /* @__PURE__ */ jsx(IconSkeleton, {}),
-  /* @__PURE__ */ jsx(Line, {})
-] }, `skeleton-blocks-${i}`)) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: blocksContainer,
+    style: assignInlineVars({
+      [columns]: col.toString()
+    }),
+    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("div", { className: blocksSkeleton, children: [
+      /* @__PURE__ */ jsx(IconSkeleton, {}),
+      /* @__PURE__ */ jsx(Line, {})
+    ] }, `skeleton-blocks-${i}`))
+  }
+);
 export {
   Blocks
 };

package/dist/components/Skeleton/BoxWithIcon.d.ts

@@ -1,4 +1,4 @@
 export declare const BoxWithIcon: ({ col, length, }: {
     col?: number;
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/BoxWithIcon.js

@@ -1,37 +1,25 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e18cng8b1"
-} : {
-  target: "e18cng8b1",
-  label: "StyledContainer"
-})("display:grid;grid-template-columns:repeat(", ({
-  col
-}) => col, ", 1fr);gap:", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0JveFdpdGhJY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNbUQiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vQm94V2l0aEljb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgSWNvblNrZWxldG9uIH0gZnJvbSAnLi9JY29uU2tlbGV0b24nXG5pbXBvcnQgeyBMaW5lIH0gZnJvbSAnLi9MaW5lJ1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PHsgY29sOiBudW1iZXIgfT5gXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7KHsgY29sIH0pID0+IGNvbH0sIDFmcik7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxuY29uc3QgQmxvY2sgPSBzdHlsZWQuZGl2YFxuICBoZWlnaHQ6IDguMTI1cmVtO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWV2ZW5seTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuZXhwb3J0IGNvbnN0IEJveFdpdGhJY29uID0gKHtcbiAgY29sID0gNCxcbiAgbGVuZ3RoID0gOCxcbn06IHtcbiAgY29sPzogbnVtYmVyXG4gIGxlbmd0aD86IG51bWJlclxufSkgPT4gKFxuICA8U3R5bGVkQ29udGFpbmVyIGNvbD17Y29sfT5cbiAgICB7QXJyYXkuZnJvbSh7IGxlbmd0aCB9LCAoXywgaSkgPT4gKFxuICAgICAgPEJsb2NrIGtleT17YHNrZWxldG9uLWJveC0ke2l9YH0+XG4gICAgICAgIDxJY29uU2tlbGV0b24gLz5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvQmxvY2s+XG4gICAgKSl9XG4gIDwvU3R5bGVkQ29udGFpbmVyPlxuKVxuIl19 */"));
-const Block = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e18cng8b0"
-} : {
-  target: "e18cng8b0",
-  label: "Block"
-})("height:8.125rem;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0JveFdpdGhJY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZd0IiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vQm94V2l0aEljb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgSWNvblNrZWxldG9uIH0gZnJvbSAnLi9JY29uU2tlbGV0b24nXG5pbXBvcnQgeyBMaW5lIH0gZnJvbSAnLi9MaW5lJ1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PHsgY29sOiBudW1iZXIgfT5gXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7KHsgY29sIH0pID0+IGNvbH0sIDFmcik7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxuY29uc3QgQmxvY2sgPSBzdHlsZWQuZGl2YFxuICBoZWlnaHQ6IDguMTI1cmVtO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWV2ZW5seTtcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuZXhwb3J0IGNvbnN0IEJveFdpdGhJY29uID0gKHtcbiAgY29sID0gNCxcbiAgbGVuZ3RoID0gOCxcbn06IHtcbiAgY29sPzogbnVtYmVyXG4gIGxlbmd0aD86IG51bWJlclxufSkgPT4gKFxuICA8U3R5bGVkQ29udGFpbmVyIGNvbD17Y29sfT5cbiAgICB7QXJyYXkuZnJvbSh7IGxlbmd0aCB9LCAoXywgaSkgPT4gKFxuICAgICAgPEJsb2NrIGtleT17YHNrZWxldG9uLWJveC0ke2l9YH0+XG4gICAgICAgIDxJY29uU2tlbGV0b24gLz5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvQmxvY2s+XG4gICAgKSl9XG4gIDwvU3R5bGVkQ29udGFpbmVyPlxuKVxuIl19 */"));
+import { blocksContainer, boxWithIconSkeleton, columns } from "./stylesVariants.css.js";
 const BoxWithIcon = ({
   col = 4,
   length = 8
-}) => /* @__PURE__ */ jsx(StyledContainer, { col, children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsxs(Block, { children: [
-  /* @__PURE__ */ jsx(IconSkeleton, {}),
-  /* @__PURE__ */ jsx(Line, {})
-] }, `skeleton-box-${i}`)) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: blocksContainer,
+    style: assignInlineVars({
+      [columns]: col.toString()
+    }),
+    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("div", { className: boxWithIconSkeleton, children: [
+      /* @__PURE__ */ jsx(IconSkeleton, {}),
+      /* @__PURE__ */ jsx(Line, {})
+    ] }, `skeleton-box-${i}`))
+  }
+);
 export {
   BoxWithIcon
 };

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

@@ -1 +1 @@
-export declare const Donut: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Donut: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Donut.js

@@ -1,49 +1,18 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Line } from "./Line.js";
-function _EMOTION_STRINGIFIED_CSS_ERROR__() {
-  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-}
-const CIRCLE_SIZE = 12.875;
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1bu753f3"
-} : {
-  target: "e1bu753f3",
-  label: "StyledContainer"
-})(process.env.NODE_ENV === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0RvbnV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPa0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vRG9udXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgTGluZSB9IGZyb20gJy4vTGluZSdcblxuY29uc3QgQ0lSQ0xFX1NJWkUgPSAxMi44NzUgLy8gaW4gcmVtXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG5gXG5cbmNvbnN0IFN0eWxlZFNWRyA9IHN0eWxlZC5zdmdgXG4gIGhlaWdodDogJHtDSVJDTEVfU0laRX1yZW07XG4gIHdpZHRoOiAke0NJUkNMRV9TSVpFfXJlbTtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbmBcblxuY29uc3QgU3R5bGVkQ2lyY2xlID0gc3R5bGVkLmNpcmNsZWBcbiAgdHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcbiAgc3Ryb2tlOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBzdHJva2Utd2lkdGg6IDE4O1xuICBzdHJva2UtbGluZWNhcDogYnV0dDtcbiAgZmlsbDogbm9uZTtcbmBcblxuY29uc3QgTGluZUxpc3QgPSBzdHlsZWQudWxgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxuZXhwb3J0IGNvbnN0IERvbnV0ID0gKCkgPT4gKFxuICA8U3R5bGVkQ29udGFpbmVyPlxuICAgIDxTdHlsZWRTVkc+XG4gICAgICA8U3R5bGVkQ2lyY2xlXG4gICAgICAgIGN4PXtgJHtDSVJDTEVfU0laRSAvIDJ9cmVtYH1cbiAgICAgICAgY3k9e2Ake0NJUkNMRV9TSVpFIC8gMn1yZW1gfVxuICAgICAgICByPVwiOTBcIlxuICAgICAgLz5cbiAgICA8L1N0eWxlZFNWRz5cbiAgICA8TGluZUxpc3Q+XG4gICAgICA8bGk+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L2xpPlxuICAgICAgPGxpPlxuICAgICAgICA8TGluZSAvPlxuICAgICAgPC9saT5cbiAgICAgIDxsaT5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvbGk+XG4gICAgICA8bGk+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L2xpPlxuICAgIDwvTGluZUxpc3Q+XG4gIDwvU3R5bGVkQ29udGFpbmVyPlxuKVxuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledSVG = /* @__PURE__ */ _styled("svg", process.env.NODE_ENV === "production" ? {
-  target: "e1bu753f2"
-} : {
-  target: "e1bu753f2",
-  label: "StyledSVG"
-})("height:", CIRCLE_SIZE, "rem;width:", CIRCLE_SIZE, "rem;transform:rotate(-90deg);" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0RvbnV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vRG9udXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgTGluZSB9IGZyb20gJy4vTGluZSdcblxuY29uc3QgQ0lSQ0xFX1NJWkUgPSAxMi44NzUgLy8gaW4gcmVtXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG5gXG5cbmNvbnN0IFN0eWxlZFNWRyA9IHN0eWxlZC5zdmdgXG4gIGhlaWdodDogJHtDSVJDTEVfU0laRX1yZW07XG4gIHdpZHRoOiAke0NJUkNMRV9TSVpFfXJlbTtcbiAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbmBcblxuY29uc3QgU3R5bGVkQ2lyY2xlID0gc3R5bGVkLmNpcmNsZWBcbiAgdHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcbiAgc3Ryb2tlOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBzdHJva2Utd2lkdGg6IDE4O1xuICBzdHJva2UtbGluZWNhcDogYnV0dDtcbiAgZmlsbDogbm9uZTtcbmBcblxuY29uc3QgTGluZUxpc3QgPSBzdHlsZWQudWxgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxuZXhwb3J0IGNvbnN0IERvbnV0ID0gKCkgPT4gKFxuICA8U3R5bGVkQ29udGFpbmVyPlxuICAgIDxTdHlsZWRTVkc+XG4gICAgICA8U3R5bGVkQ2lyY2xlXG4gICAgICAgIGN4PXtgJHtDSVJDTEVfU0laRSAvIDJ9cmVtYH1cbiAgICAgICAgY3k9e2Ake0NJUkNMRV9TSVpFIC8gMn1yZW1gfVxuICAgICAgICByPVwiOTBcIlxuICAgICAgLz5cbiAgICA8L1N0eWxlZFNWRz5cbiAgICA8TGluZUxpc3Q+XG4gICAgICA8bGk+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L2xpPlxuICAgICAgPGxpPlxuICAgICAgICA8TGluZSAvPlxuICAgICAgPC9saT5cbiAgICAgIDxsaT5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvbGk+XG4gICAgICA8bGk+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L2xpPlxuICAgIDwvTGluZUxpc3Q+XG4gIDwvU3R5bGVkQ29udGFpbmVyPlxuKVxuIl19 */"));
-const StyledCircle = /* @__PURE__ */ _styled("circle", process.env.NODE_ENV === "production" ? {
-  target: "e1bu753f1"
-} : {
-  target: "e1bu753f1",
-  label: "StyledCircle"
-})("transform-origin:50% 50%;stroke:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";stroke-width:18;stroke-linecap:butt;fill:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0RvbnV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmtDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0RvbnV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IExpbmUgfSBmcm9tICcuL0xpbmUnXG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMTIuODc1IC8vIGluIHJlbVxuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuYFxuXG5jb25zdCBTdHlsZWRTVkcgPSBzdHlsZWQuc3ZnYFxuICBoZWlnaHQ6ICR7Q0lSQ0xFX1NJWkV9cmVtO1xuICB3aWR0aDogJHtDSVJDTEVfU0laRX1yZW07XG4gIHRyYW5zZm9ybTogcm90YXRlKC05MGRlZyk7XG5gXG5cbmNvbnN0IFN0eWxlZENpcmNsZSA9IHN0eWxlZC5jaXJjbGVgXG4gIHRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7XG4gIHN0cm9rZTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgc3Ryb2tlLXdpZHRoOiAxODtcbiAgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7XG4gIGZpbGw6IG5vbmU7XG5gXG5cbmNvbnN0IExpbmVMaXN0ID0gc3R5bGVkLnVsYFxuICBkaXNwbGF5OiBncmlkO1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5gXG5cbmV4cG9ydCBjb25zdCBEb251dCA9ICgpID0+IChcbiAgPFN0eWxlZENvbnRhaW5lcj5cbiAgICA8U3R5bGVkU1ZHPlxuICAgICAgPFN0eWxlZENpcmNsZVxuICAgICAgICBjeD17YCR7Q0lSQ0xFX1NJWkUgLyAyfXJlbWB9XG4gICAgICAgIGN5PXtgJHtDSVJDTEVfU0laRSAvIDJ9cmVtYH1cbiAgICAgICAgcj1cIjkwXCJcbiAgICAgIC8+XG4gICAgPC9TdHlsZWRTVkc+XG4gICAgPExpbmVMaXN0PlxuICAgICAgPGxpPlxuICAgICAgICA8TGluZSAvPlxuICAgICAgPC9saT5cbiAgICAgIDxsaT5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvbGk+XG4gICAgICA8bGk+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L2xpPlxuICAgICAgPGxpPlxuICAgICAgICA8TGluZSAvPlxuICAgICAgPC9saT5cbiAgICA8L0xpbmVMaXN0PlxuICA8L1N0eWxlZENvbnRhaW5lcj5cbilcbiJdfQ== */"));
-const LineList = /* @__PURE__ */ _styled("ul", process.env.NODE_ENV === "production" ? {
-  target: "e1bu753f0"
-} : {
-  target: "e1bu753f0",
-  label: "LineList"
-})("display:grid;list-style:none;gap:", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0RvbnV0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QjBCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0RvbnV0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IExpbmUgfSBmcm9tICcuL0xpbmUnXG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMTIuODc1IC8vIGluIHJlbVxuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuYFxuXG5jb25zdCBTdHlsZWRTVkcgPSBzdHlsZWQuc3ZnYFxuICBoZWlnaHQ6ICR7Q0lSQ0xFX1NJWkV9cmVtO1xuICB3aWR0aDogJHtDSVJDTEVfU0laRX1yZW07XG4gIHRyYW5zZm9ybTogcm90YXRlKC05MGRlZyk7XG5gXG5cbmNvbnN0IFN0eWxlZENpcmNsZSA9IHN0eWxlZC5jaXJjbGVgXG4gIHRyYW5zZm9ybS1vcmlnaW46IDUwJSA1MCU7XG4gIHN0cm9rZTogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgc3Ryb2tlLXdpZHRoOiAxODtcbiAgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7XG4gIGZpbGw6IG5vbmU7XG5gXG5cbmNvbnN0IExpbmVMaXN0ID0gc3R5bGVkLnVsYFxuICBkaXNwbGF5OiBncmlkO1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5gXG5cbmV4cG9ydCBjb25zdCBEb251dCA9ICgpID0+IChcbiAgPFN0eWxlZENvbnRhaW5lcj5cbiAgICA8U3R5bGVkU1ZHPlxuICAgICAgPFN0eWxlZENpcmNsZVxuICAgICAgICBjeD17YCR7Q0lSQ0xFX1NJWkUgLyAyfXJlbWB9XG4gICAgICAgIGN5PXtgJHtDSVJDTEVfU0laRSAvIDJ9cmVtYH1cbiAgICAgICAgcj1cIjkwXCJcbiAgICAgIC8+XG4gICAgPC9TdHlsZWRTVkc+XG4gICAgPExpbmVMaXN0PlxuICAgICAgPGxpPlxuICAgICAgICA8TGluZSAvPlxuICAgICAgPC9saT5cbiAgICAgIDxsaT5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvbGk+XG4gICAgICA8bGk+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L2xpPlxuICAgICAgPGxpPlxuICAgICAgICA8TGluZSAvPlxuICAgICAgPC9saT5cbiAgICA8L0xpbmVMaXN0PlxuICA8L1N0eWxlZENvbnRhaW5lcj5cbilcbiJdfQ== */"));
-const Donut = () => /* @__PURE__ */ jsxs(StyledContainer, { children: [
-  /* @__PURE__ */ jsx(StyledSVG, { children: /* @__PURE__ */ jsx(StyledCircle, { cx: `${CIRCLE_SIZE / 2}rem`, cy: `${CIRCLE_SIZE / 2}rem`, r: "90" }) }),
-  /* @__PURE__ */ jsxs(LineList, { children: [
+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("ul", { className: donutSkeletonLineList, children: [
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),

package/dist/components/Skeleton/IconSkeleton.d.ts

@@ -1,4 +1 @@
-export declare const IconSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/IconSkeleton.js

@@ -1,23 +1,7 @@
 "use client";
-import _styled from "@emotion/styled/base";
-const IconSkeleton = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1kubpd30"
-} : {
-  target: "e1kubpd30",
-  label: "IconSkeleton"
-})("margin-right:", ({
-  theme
-}) => theme.space["1"], ";width:", ({
-  theme
-}) => theme.space["4"], ";height:", ({
-  theme
-}) => theme.space["4"], ";min-width:", ({
-  theme
-}) => theme.space["4"], ";border-radius:", ({
-  theme
-}) => theme.radii.large, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0ljb25Ta2VsZXRvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0ljb25Ta2VsZXRvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBJY29uU2tlbGV0b24gPSBzdHlsZWQuZGl2YFxuICBtYXJnaW4tcmlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG4gIHdpZHRoOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWyc0J119O1xuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzQnXX07XG4gIG1pbi13aWR0aDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnNCddfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5sYXJnZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG5gXG4iXX0= */"));
+import { jsx } from "react/jsx-runtime";
+import { iconSkeleton } from "./stylesVariants.css.js";
+const IconSkeleton = () => /* @__PURE__ */ jsx("div", { className: iconSkeleton });
 export {
   IconSkeleton
 };

package/dist/components/Skeleton/Line.d.ts

@@ -1,4 +1 @@
-export declare const Line: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Line: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Line.js

@@ -1,19 +1,18 @@
 "use client";
-import _styled from "@emotion/styled/base";
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { lineSkeleton, widthLine } from "./stylesVariants.css.js";
 const sizes = ["5rem", "7.5rem", "10rem", "12.5rem"];
 const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
-const Line = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1denkbe0"
-} : {
-  target: "e1denkbe0",
-  label: "Line"
-})("height:", ({
-  theme
-}) => theme.sizing["150"], ";width:", () => randomSize(), ";max-width:100%;border-radius:", ({
-  theme
-}) => theme.radii.large, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0xpbmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVE4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9MaW5lLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuY29uc3Qgc2l6ZXMgPSBbJzVyZW0nLCAnNy41cmVtJywgJzEwcmVtJywgJzEyLjVyZW0nXVxuXG5jb25zdCByYW5kb21TaXplID0gKCkgPT4gc2l6ZXNbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogc2l6ZXMubGVuZ3RoKV1cblxuZXhwb3J0IGNvbnN0IExpbmUgPSBzdHlsZWQuZGl2YFxuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nWycxNTAnXX07XG4gIHdpZHRoOiAkeygpID0+IHJhbmRvbVNpemUoKX07XG4gIG1heC13aWR0aDogMTAwJTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5sYXJnZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG5gXG4iXX0= */"));
+const Line = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: lineSkeleton,
+    style: assignInlineVars({
+      [widthLine]: randomSize()
+    })
+  }
+);
 export {
   Line
 };

package/dist/components/Skeleton/List.d.ts

@@ -1,4 +1,4 @@
 export declare const List: ({ length, col, }: {
     length?: number;
     col?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;