@ultraviolet/ui 3.0.0-beta.15 → 3.0.0-beta.17

package/dist/components/Skeleton/Blocks.cjs

@@ -2,39 +2,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
+const dynamic = require("@vanilla-extract/dynamic");
 const IconSkeleton = require("./IconSkeleton.cjs");
 const Line = require("./Line.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const StyledContainer = /* @__PURE__ */ _styled__default.default("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__default.default("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== */"));
+const stylesVariants_css = require("./stylesVariants.css.cjs");
 const Blocks = ({
   col = 4,
   length = 8
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { col, children: Array.from({
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.blocksContainer, style: dynamic.assignInlineVars({
+  [stylesVariants_css.columns]: col.toString()
+}), children: Array.from({
   length
-}, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs(Block, { children: [
+}, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: stylesVariants_css.blocksSkeleton, children: [
   /* @__PURE__ */ jsxRuntime.jsx(IconSkeleton.IconSkeleton, {}),
   /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {})
 ] }, `skeleton-blocks-${i}`)) });

package/dist/components/Skeleton/Blocks.js

@@ -1,36 +1,17 @@
 "use client";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+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({
+}) => /* @__PURE__ */ jsx("div", { className: blocksContainer, style: assignInlineVars({
+  [columns]: col.toString()
+}), children: Array.from({
   length
-}, (_, i) => /* @__PURE__ */ jsxs(Block, { children: [
+}, (_, i) => /* @__PURE__ */ jsxs("div", { className: blocksSkeleton, children: [
   /* @__PURE__ */ jsx(IconSkeleton, {}),
   /* @__PURE__ */ jsx(Line, {})
 ] }, `skeleton-blocks-${i}`)) });

package/dist/components/Skeleton/BoxWithIcon.cjs

@@ -2,37 +2,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
+const dynamic = require("@vanilla-extract/dynamic");
 const IconSkeleton = require("./IconSkeleton.cjs");
 const Line = require("./Line.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const StyledContainer = /* @__PURE__ */ _styled__default.default("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__default.default("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 */"));
+const stylesVariants_css = require("./stylesVariants.css.cjs");
 const BoxWithIcon = ({
   col = 4,
   length = 8
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { col, children: Array.from({
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.blocksContainer, style: dynamic.assignInlineVars({
+  [stylesVariants_css.columns]: col.toString()
+}), children: Array.from({
   length
-}, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs(Block, { children: [
+}, (_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: stylesVariants_css.boxWithIconSkeleton, children: [
   /* @__PURE__ */ jsxRuntime.jsx(IconSkeleton.IconSkeleton, {}),
   /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {})
 ] }, `skeleton-box-${i}`)) });

package/dist/components/Skeleton/BoxWithIcon.js

@@ -1,34 +1,17 @@
 "use client";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+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({
+}) => /* @__PURE__ */ jsx("div", { className: blocksContainer, style: assignInlineVars({
+  [columns]: col.toString()
+}), children: Array.from({
   length
-}, (_, i) => /* @__PURE__ */ jsxs(Block, { children: [
+}, (_, i) => /* @__PURE__ */ jsxs("div", { className: boxWithIconSkeleton, children: [
   /* @__PURE__ */ jsx(IconSkeleton, {}),
   /* @__PURE__ */ jsx(Line, {})
 ] }, `skeleton-box-${i}`)) });

package/dist/components/Skeleton/Donut.cjs

@@ -2,52 +2,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
 const Line = require("./Line.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-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__default.default("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__default.default("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__default.default("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__default.default("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__ */ jsxRuntime.jsxs(StyledContainer, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(StyledSVG, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledCircle, { cx: `${CIRCLE_SIZE / 2}rem`, cy: `${CIRCLE_SIZE / 2}rem`, r: "90" }) }),
-  /* @__PURE__ */ jsxRuntime.jsxs(LineList, { children: [
+const stylesVariants_css = require("./stylesVariants.css.cjs");
+const Donut = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: stylesVariants_css.donutSkeletonContainer, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("svg", { className: stylesVariants_css.donutSkeletonSvg, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { className: stylesVariants_css.donutSkeletonCircle, cx: `${stylesVariants_css.CIRCLE_SIZE / 2}rem`, cy: `${stylesVariants_css.CIRCLE_SIZE / 2}rem`, r: "90" }) }),
+  /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: stylesVariants_css.donutSkeletonLineList, children: [
     /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {}) }),

package/dist/components/Skeleton/Donut.js

@@ -1,49 +1,10 @@
 "use client";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
 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.cjs

@@ -1,25 +1,7 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const IconSkeleton = /* @__PURE__ */ _styled__default.default("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= */"));
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const stylesVariants_css = require("./stylesVariants.css.cjs");
+const IconSkeleton = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.iconSkeleton });
 exports.IconSkeleton = IconSkeleton;

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("@emotion/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 "@emotion/react/jsx-runtime";
+import { iconSkeleton } from "./stylesVariants.css.js";
+const IconSkeleton = () => /* @__PURE__ */ jsx("div", { className: iconSkeleton });
 export {
   IconSkeleton
 };

package/dist/components/Skeleton/Line.cjs

@@ -1,21 +1,12 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const stylesVariants_css = require("./stylesVariants.css.cjs");
 const sizes = ["5rem", "7.5rem", "10rem", "12.5rem"];
 const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
-const Line = /* @__PURE__ */ _styled__default.default("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__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.lineSkeleton, style: dynamic.assignInlineVars({
+  [stylesVariants_css.widthLine]: randomSize()
+}) });
 exports.Line = Line;

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("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Line.js

@@ -1,19 +1,12 @@
 "use client";
-import _styled from "@emotion/styled/base";
+import { jsx } from "@emotion/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.cjs

@@ -2,55 +2,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
 const Line = require("./Line.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-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 StyledItem = /* @__PURE__ */ _styled__default.default("li", process.env.NODE_ENV === "production" ? {
-  target: "e639qnr2"
-} : {
-  target: "e639qnr2",
-  label: "StyledItem"
-})("display:flex;align-items:center;height:", ({
-  theme
-}) => theme.sizing["600"], ";padding:", ({
-  theme
-}) => theme.space["0.5"], " ", ({
-  theme
-}) => theme.space["1"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0xpc3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs0QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9MaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IExpbmUgfSBmcm9tICcuL0xpbmUnXG5cbmNvbnN0IFN0eWxlZEl0ZW0gPSBzdHlsZWQubGlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbJzYwMCddfTtcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMC41J119ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG5gXG5cbmNvbnN0IFN0eWxlZExpbmUgPSBzdHlsZWQuZGl2YFxuICBmbGV4OiAxO1xuYFxuXG5jb25zdCBTdHlsZWRMaXN0ID0gc3R5bGVkLnVsYFxuICBsaXN0LXN0eWxlOiBub25lO1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG5cbiAgPiAke1N0eWxlZEl0ZW19Om50aC1vZi10eXBlKGV2ZW4pIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmREaXNhYmxlZH07XG4gIH1cbmBcblxuY29uc3QgSXRlbSA9ICh7IGNvbCA9IDMgfTogeyBjb2w6IG51bWJlciB9KSA9PiAoXG4gIDxTdHlsZWRJdGVtPlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoOiBjb2wgfSwgKF8sIGkpID0+IChcbiAgICAgIDxTdHlsZWRMaW5lIGtleT17YHNrZWxldG9uLWxpc3QtY29sLSR7aX1gfT5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvU3R5bGVkTGluZT5cbiAgICApKX1cbiAgPC9TdHlsZWRJdGVtPlxuKVxuXG5leHBvcnQgY29uc3QgTGlzdCA9ICh7XG4gIGxlbmd0aCA9IDMsXG4gIGNvbCA9IDMsXG59OiB7XG4gIGxlbmd0aD86IG51bWJlclxuICBjb2w/OiBudW1iZXJcbn0pID0+IChcbiAgPFN0eWxlZExpc3Q+XG4gICAge0FycmF5LmZyb20oeyBsZW5ndGggfSwgKF8sIGkpID0+IChcbiAgICAgIDxJdGVtIGNvbD17Y29sfSBrZXk9e2Bza2VsZXRvbi1saXN0LSR7aX1gfSAvPlxuICAgICkpfVxuICA8L1N0eWxlZExpc3Q+XG4pXG4iXX0= */"));
-const StyledLine = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e639qnr1"
-} : {
-  target: "e639qnr1",
-  label: "StyledLine"
-})(process.env.NODE_ENV === "production" ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : {
-  name: "82a6rk",
-  styles: "flex:1/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0xpc3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVk2QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9MaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IExpbmUgfSBmcm9tICcuL0xpbmUnXG5cbmNvbnN0IFN0eWxlZEl0ZW0gPSBzdHlsZWQubGlgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbJzYwMCddfTtcbiAgcGFkZGluZzogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMC41J119ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzEnXX07XG5gXG5cbmNvbnN0IFN0eWxlZExpbmUgPSBzdHlsZWQuZGl2YFxuICBmbGV4OiAxO1xuYFxuXG5jb25zdCBTdHlsZWRMaXN0ID0gc3R5bGVkLnVsYFxuICBsaXN0LXN0eWxlOiBub25lO1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG5cbiAgPiAke1N0eWxlZEl0ZW19Om50aC1vZi10eXBlKGV2ZW4pIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmREaXNhYmxlZH07XG4gIH1cbmBcblxuY29uc3QgSXRlbSA9ICh7IGNvbCA9IDMgfTogeyBjb2w6IG51bWJlciB9KSA9PiAoXG4gIDxTdHlsZWRJdGVtPlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoOiBjb2wgfSwgKF8sIGkpID0+IChcbiAgICAgIDxTdHlsZWRMaW5lIGtleT17YHNrZWxldG9uLWxpc3QtY29sLSR7aX1gfT5cbiAgICAgICAgPExpbmUgLz5cbiAgICAgIDwvU3R5bGVkTGluZT5cbiAgICApKX1cbiAgPC9TdHlsZWRJdGVtPlxuKVxuXG5leHBvcnQgY29uc3QgTGlzdCA9ICh7XG4gIGxlbmd0aCA9IDMsXG4gIGNvbCA9IDMsXG59OiB7XG4gIGxlbmd0aD86IG51bWJlclxuICBjb2w/OiBudW1iZXJcbn0pID0+IChcbiAgPFN0eWxlZExpc3Q+XG4gICAge0FycmF5LmZyb20oeyBsZW5ndGggfSwgKF8sIGkpID0+IChcbiAgICAgIDxJdGVtIGNvbD17Y29sfSBrZXk9e2Bza2VsZXRvbi1saXN0LSR7aX1gfSAvPlxuICAgICkpfVxuICA8L1N0eWxlZExpc3Q+XG4pXG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledList = /* @__PURE__ */ _styled__default.default("ul", process.env.NODE_ENV === "production" ? {
-  target: "e639qnr0"
-} : {
-  target: "e639qnr0",
-  label: "StyledList"
-})("list-style:none;padding:0;margin:0;>", StyledItem, ":nth-of-type(even){background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL0xpc3QudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdCNEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBMaW5lIH0gZnJvbSAnLi9MaW5lJ1xuXG5jb25zdCBTdHlsZWRJdGVtID0gc3R5bGVkLmxpYFxuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nWyc2MDAnXX07XG4gIHBhZGRpbmc6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzAuNSddfSAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWycxJ119O1xuYFxuXG5jb25zdCBTdHlsZWRMaW5lID0gc3R5bGVkLmRpdmBcbiAgZmxleDogMTtcbmBcblxuY29uc3QgU3R5bGVkTGlzdCA9IHN0eWxlZC51bGBcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwO1xuXG4gID4gJHtTdHlsZWRJdGVtfTpudGgtb2YtdHlwZShldmVuKSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kRGlzYWJsZWR9O1xuICB9XG5gXG5cbmNvbnN0IEl0ZW0gPSAoeyBjb2wgPSAzIH06IHsgY29sOiBudW1iZXIgfSkgPT4gKFxuICA8U3R5bGVkSXRlbT5cbiAgICB7QXJyYXkuZnJvbSh7IGxlbmd0aDogY29sIH0sIChfLCBpKSA9PiAoXG4gICAgICA8U3R5bGVkTGluZSBrZXk9e2Bza2VsZXRvbi1saXN0LWNvbC0ke2l9YH0+XG4gICAgICAgIDxMaW5lIC8+XG4gICAgICA8L1N0eWxlZExpbmU+XG4gICAgKSl9XG4gIDwvU3R5bGVkSXRlbT5cbilcblxuZXhwb3J0IGNvbnN0IExpc3QgPSAoe1xuICBsZW5ndGggPSAzLFxuICBjb2wgPSAzLFxufToge1xuICBsZW5ndGg/OiBudW1iZXJcbiAgY29sPzogbnVtYmVyXG59KSA9PiAoXG4gIDxTdHlsZWRMaXN0PlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoIH0sIChfLCBpKSA9PiAoXG4gICAgICA8SXRlbSBjb2w9e2NvbH0ga2V5PXtgc2tlbGV0b24tbGlzdC0ke2l9YH0gLz5cbiAgICApKX1cbiAgPC9TdHlsZWRMaXN0PlxuKVxuIl19 */"));
+const stylesVariants_css = require("./stylesVariants.css.cjs");
 const Item = ({
   col = 3
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledItem, { children: Array.from({
+}) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: stylesVariants_css.listSkeletonLi, children: Array.from({
   length: col
-}, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(StyledLine, { children: /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {}) }, `skeleton-list-col-${i}`)) });
+}, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.listSkeletonDiv, children: /* @__PURE__ */ jsxRuntime.jsx(Line.Line, {}) }, `skeleton-list-col-${i}`)) });
 const List = ({
   length = 3,
   col = 3
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledList, { children: Array.from({
+}) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: stylesVariants_css.listSkeletonUl, children: Array.from({
   length
 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(Item, { col }, `skeleton-list-${i}`)) });
 exports.List = List;