@ultraviolet/ui 3.0.0-beta.2 → 3.0.0-beta.21

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;

package/dist/components/Skeleton/List.js

@@ -1,52 +1,16 @@
 "use client";
 import { 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 StyledItem = /* @__PURE__ */ _styled("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("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("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 */"));
+import { listSkeletonUl, listSkeletonLi, listSkeletonDiv } from "./stylesVariants.css.js";
 const Item = ({
   col = 3
-}) => /* @__PURE__ */ jsx(StyledItem, { children: Array.from({
+}) => /* @__PURE__ */ jsx("li", { className: listSkeletonLi, children: Array.from({
   length: col
-}, (_, i) => /* @__PURE__ */ jsx(StyledLine, { children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)) });
+}, (_, i) => /* @__PURE__ */ jsx("div", { className: listSkeletonDiv, children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)) });
 const List = ({
   length = 3,
   col = 3
-}) => /* @__PURE__ */ jsx(StyledList, { children: Array.from({
+}) => /* @__PURE__ */ jsx("ul", { className: listSkeletonUl, children: Array.from({
   length
 }, (_, i) => /* @__PURE__ */ jsx(Item, { col }, `skeleton-list-${i}`)) });
 export {

package/dist/components/Skeleton/Slider.cjs

@@ -2,42 +2,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-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 StyledContainer = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yrvvrg2"
-} : {
-  target: "e1yrvvrg2",
-  label: "StyledContainer"
-})("height:17.375rem;display:grid;grid-template-columns:repeat(", ({
-  length
-}) => length, ", 1fr);gap:", ({
-  theme
-}) => theme.space["2"], ";overflow:auto;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNEIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8eyBsZW5ndGg6IG51bWJlciB9PmBcbiAgaGVpZ2h0OiAxNy4zNzVyZW07XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7KHsgbGVuZ3RoIH0pID0+IGxlbmd0aH0sIDFmcik7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgb3ZlcmZsb3c6IGF1dG87XG5gXG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQuZGl2YFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICB3aWR0aDogMTQuODc1cmVtO1xuICBoZWlnaHQ6IDE2LjM3NXJlbjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuY29uc3QgU3R5bGVkQmFubmVyID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMzMlO1xuYFxuXG5leHBvcnQgY29uc3QgU2xpZGVyID0gKHsgbGVuZ3RoID0gNCB9OiB7IGxlbmd0aD86IG51bWJlciB9KSA9PiAoXG4gIDxTdHlsZWRDb250YWluZXIgbGVuZ3RoPXtsZW5ndGh9PlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoIH0sIChfLCBpKSA9PiAoXG4gICAgICA8U3R5bGVkQ2FyZCBrZXk9e2Bza2VsZXRvbi1zbGlkZXItY2FyZC0ke2l9YH0+XG4gICAgICAgIDxTdHlsZWRCYW5uZXIgLz5cbiAgICAgIDwvU3R5bGVkQ2FyZD5cbiAgICApKX1cbiAgPC9TdHlsZWRDb250YWluZXI+XG4pXG4iXX0= */"));
-const StyledCard = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yrvvrg1"
-} : {
-  target: "e1yrvvrg1",
-  label: "StyledCard"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";width:14.875rem;height:16.375ren;overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTZCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8eyBsZW5ndGg6IG51bWJlciB9PmBcbiAgaGVpZ2h0OiAxNy4zNzVyZW07XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7KHsgbGVuZ3RoIH0pID0+IGxlbmd0aH0sIDFmcik7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgb3ZlcmZsb3c6IGF1dG87XG5gXG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQuZGl2YFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICB3aWR0aDogMTQuODc1cmVtO1xuICBoZWlnaHQ6IDE2LjM3NXJlbjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuY29uc3QgU3R5bGVkQmFubmVyID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMzMlO1xuYFxuXG5leHBvcnQgY29uc3QgU2xpZGVyID0gKHsgbGVuZ3RoID0gNCB9OiB7IGxlbmd0aD86IG51bWJlciB9KSA9PiAoXG4gIDxTdHlsZWRDb250YWluZXIgbGVuZ3RoPXtsZW5ndGh9PlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoIH0sIChfLCBpKSA9PiAoXG4gICAgICA8U3R5bGVkQ2FyZCBrZXk9e2Bza2VsZXRvbi1zbGlkZXItY2FyZC0ke2l9YH0+XG4gICAgICAgIDxTdHlsZWRCYW5uZXIgLz5cbiAgICAgIDwvU3R5bGVkQ2FyZD5cbiAgICApKX1cbiAgPC9TdHlsZWRDb250YWluZXI+XG4pXG4iXX0= */"));
-const StyledBanner = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yrvvrg0"
-} : {
-  target: "e1yrvvrg0",
-  label: "StyledBanner"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";width:100%;height:33%;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0IrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9TbGlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PHsgbGVuZ3RoOiBudW1iZXIgfT5gXG4gIGhlaWdodDogMTcuMzc1cmVtO1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgkeyh7IGxlbmd0aCB9KSA9PiBsZW5ndGh9LCAxZnIpO1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIG92ZXJmbG93OiBhdXRvO1xuYFxuXG5jb25zdCBTdHlsZWRDYXJkID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgd2lkdGg6IDE0Ljg3NXJlbTtcbiAgaGVpZ2h0OiAxNi4zNzVyZW47XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gXG5cbmNvbnN0IFN0eWxlZEJhbm5lciA9IHN0eWxlZC5kaXZgXG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDMzJTtcbmBcblxuZXhwb3J0IGNvbnN0IFNsaWRlciA9ICh7IGxlbmd0aCA9IDQgfTogeyBsZW5ndGg/OiBudW1iZXIgfSkgPT4gKFxuICA8U3R5bGVkQ29udGFpbmVyIGxlbmd0aD17bGVuZ3RofT5cbiAgICB7QXJyYXkuZnJvbSh7IGxlbmd0aCB9LCAoXywgaSkgPT4gKFxuICAgICAgPFN0eWxlZENhcmQga2V5PXtgc2tlbGV0b24tc2xpZGVyLWNhcmQtJHtpfWB9PlxuICAgICAgICA8U3R5bGVkQmFubmVyIC8+XG4gICAgICA8L1N0eWxlZENhcmQ+XG4gICAgKSl9XG4gIDwvU3R5bGVkQ29udGFpbmVyPlxuKVxuIl19 */"));
+const dynamic = require("@vanilla-extract/dynamic");
+const stylesVariants_css = require("./stylesVariants.css.cjs");
 const Slider = ({
   length = 4
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { length, children: Array.from({
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.sliderSkeletonContainer, style: dynamic.assignInlineVars({
+  [stylesVariants_css.sliderLength]: length.toString()
+}), children: Array.from({
   length
-}, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(StyledCard, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledBanner, {}) }, `skeleton-slider-card-${i}`)) });
+}, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.sliderSkeletonCard, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.sliderSkeletonBanner }) }, `skeleton-slider-card-${i}`)) });
 exports.Slider = Slider;

package/dist/components/Skeleton/Slider.js

@@ -1,41 +1,14 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const StyledContainer = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yrvvrg2"
-} : {
-  target: "e1yrvvrg2",
-  label: "StyledContainer"
-})("height:17.375rem;display:grid;grid-template-columns:repeat(", ({
-  length
-}) => length, ", 1fr);gap:", ({
-  theme
-}) => theme.space["2"], ";overflow:auto;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXNEIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8eyBsZW5ndGg6IG51bWJlciB9PmBcbiAgaGVpZ2h0OiAxNy4zNzVyZW07XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7KHsgbGVuZ3RoIH0pID0+IGxlbmd0aH0sIDFmcik7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgb3ZlcmZsb3c6IGF1dG87XG5gXG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQuZGl2YFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICB3aWR0aDogMTQuODc1cmVtO1xuICBoZWlnaHQ6IDE2LjM3NXJlbjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuY29uc3QgU3R5bGVkQmFubmVyID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMzMlO1xuYFxuXG5leHBvcnQgY29uc3QgU2xpZGVyID0gKHsgbGVuZ3RoID0gNCB9OiB7IGxlbmd0aD86IG51bWJlciB9KSA9PiAoXG4gIDxTdHlsZWRDb250YWluZXIgbGVuZ3RoPXtsZW5ndGh9PlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoIH0sIChfLCBpKSA9PiAoXG4gICAgICA8U3R5bGVkQ2FyZCBrZXk9e2Bza2VsZXRvbi1zbGlkZXItY2FyZC0ke2l9YH0+XG4gICAgICAgIDxTdHlsZWRCYW5uZXIgLz5cbiAgICAgIDwvU3R5bGVkQ2FyZD5cbiAgICApKX1cbiAgPC9TdHlsZWRDb250YWluZXI+XG4pXG4iXX0= */"));
-const StyledCard = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yrvvrg1"
-} : {
-  target: "e1yrvvrg1",
-  label: "StyledCard"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";width:14.875rem;height:16.375ren;overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTZCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXY8eyBsZW5ndGg6IG51bWJlciB9PmBcbiAgaGVpZ2h0OiAxNy4zNzVyZW07XG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KCR7KHsgbGVuZ3RoIH0pID0+IGxlbmd0aH0sIDFmcik7XG4gIGdhcDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbiAgb3ZlcmZsb3c6IGF1dG87XG5gXG5cbmNvbnN0IFN0eWxlZENhcmQgPSBzdHlsZWQuZGl2YFxuICBib3JkZXI6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICB3aWR0aDogMTQuODc1cmVtO1xuICBoZWlnaHQ6IDE2LjM3NXJlbjtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmBcblxuY29uc3QgU3R5bGVkQmFubmVyID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMzMlO1xuYFxuXG5leHBvcnQgY29uc3QgU2xpZGVyID0gKHsgbGVuZ3RoID0gNCB9OiB7IGxlbmd0aD86IG51bWJlciB9KSA9PiAoXG4gIDxTdHlsZWRDb250YWluZXIgbGVuZ3RoPXtsZW5ndGh9PlxuICAgIHtBcnJheS5mcm9tKHsgbGVuZ3RoIH0sIChfLCBpKSA9PiAoXG4gICAgICA8U3R5bGVkQ2FyZCBrZXk9e2Bza2VsZXRvbi1zbGlkZXItY2FyZC0ke2l9YH0+XG4gICAgICAgIDxTdHlsZWRCYW5uZXIgLz5cbiAgICAgIDwvU3R5bGVkQ2FyZD5cbiAgICApKX1cbiAgPC9TdHlsZWRDb250YWluZXI+XG4pXG4iXX0= */"));
-const StyledBanner = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1yrvvrg0"
-} : {
-  target: "e1yrvvrg0",
-  label: "StyledBanner"
-})("border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";width:100%;height:33%;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NsaWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0IrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9TbGlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PHsgbGVuZ3RoOiBudW1iZXIgfT5gXG4gIGhlaWdodDogMTcuMzc1cmVtO1xuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgkeyh7IGxlbmd0aCB9KSA9PiBsZW5ndGh9LCAxZnIpO1xuICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG4gIG92ZXJmbG93OiBhdXRvO1xuYFxuXG5jb25zdCBTdHlsZWRDYXJkID0gc3R5bGVkLmRpdmBcbiAgYm9yZGVyOiAxcHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS5kZWZhdWx0fTtcbiAgd2lkdGg6IDE0Ljg3NXJlbTtcbiAgaGVpZ2h0OiAxNi4zNzVyZW47XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gXG5cbmNvbnN0IFN0eWxlZEJhbm5lciA9IHN0eWxlZC5kaXZgXG4gIGJvcmRlcjogMXB4IHNvbGlkICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDMzJTtcbmBcblxuZXhwb3J0IGNvbnN0IFNsaWRlciA9ICh7IGxlbmd0aCA9IDQgfTogeyBsZW5ndGg/OiBudW1iZXIgfSkgPT4gKFxuICA8U3R5bGVkQ29udGFpbmVyIGxlbmd0aD17bGVuZ3RofT5cbiAgICB7QXJyYXkuZnJvbSh7IGxlbmd0aCB9LCAoXywgaSkgPT4gKFxuICAgICAgPFN0eWxlZENhcmQga2V5PXtgc2tlbGV0b24tc2xpZGVyLWNhcmQtJHtpfWB9PlxuICAgICAgICA8U3R5bGVkQmFubmVyIC8+XG4gICAgICA8L1N0eWxlZENhcmQ+XG4gICAgKSl9XG4gIDwvU3R5bGVkQ29udGFpbmVyPlxuKVxuIl19 */"));
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { sliderSkeletonContainer, sliderSkeletonCard, sliderSkeletonBanner, sliderLength } from "./stylesVariants.css.js";
 const Slider = ({
   length = 4
-}) => /* @__PURE__ */ jsx(StyledContainer, { length, children: Array.from({
+}) => /* @__PURE__ */ jsx("div", { className: sliderSkeletonContainer, style: assignInlineVars({
+  [sliderLength]: length.toString()
+}), children: Array.from({
   length
-}, (_, i) => /* @__PURE__ */ jsx(StyledCard, { children: /* @__PURE__ */ jsx(StyledBanner, {}) }, `skeleton-slider-card-${i}`)) });
+}, (_, i) => /* @__PURE__ */ jsx("div", { className: sliderSkeletonCard, children: /* @__PURE__ */ jsx("div", { className: sliderSkeletonBanner }) }, `skeleton-slider-card-${i}`)) });
 export {
   Slider
 };

package/dist/components/Skeleton/Square.cjs

@@ -1,15 +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 Square = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "e1uz28830"
-} : {
-  target: "e1uz28830",
-  label: "Square"
-})("height:100%;width:100%;max-width:100%;background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NxdWFyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSWdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NxdWFyZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBTcXVhcmUgPSBzdHlsZWQuZGl2YFxuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG5gXG4iXX0= */"));
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const stylesVariants_css = require("./stylesVariants.css.cjs");
+const Square = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: stylesVariants_css.squareSkeleton });
 exports.Square = Square;

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

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

package/dist/components/Skeleton/Square.js

@@ -1,13 +1,7 @@
 "use client";
-import _styled from "@emotion/styled/base";
-const Square = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1uz28830"
-} : {
-  target: "e1uz28830",
-  label: "Square"
-})("height:100%;width:100%;max-width:100%;background-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NxdWFyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSWdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL1NxdWFyZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBTcXVhcmUgPSBzdHlsZWQuZGl2YFxuICBoZWlnaHQ6IDEwMCU7XG4gIHdpZHRoOiAxMDAlO1xuICBtYXgtd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2Vha307XG5gXG4iXX0= */"));
+import { jsx } from "@emotion/react/jsx-runtime";
+import { squareSkeleton } from "./stylesVariants.css.js";
+const Square = () => /* @__PURE__ */ jsx("div", { className: squareSkeleton });
 export {
   Square
 };