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

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

@@ -1,14 +1,11 @@
 import type { ReactNode } from 'react';
-import type { Color } from '../../theme';
-type Direction = 'horizontal' | 'vertical';
+import type { SeparatorVariants } from './styles.css';
 type SeparatorProps = {
-    direction?: Direction;
     thickness?: number;
-    sentiment?: Color;
     className?: string;
     'data-testid'?: string;
     children?: ReactNode;
-};
+} & SeparatorVariants;
 /**
  * Separator component used to separate content with a horizontal or vertical line.
  */

package/dist/components/Separator/index.js

@@ -1,38 +1,7 @@
 "use client";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const StyledIconWrapper = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["direction", "sentiment"].includes(prop),
-  target: "e1d1zom91"
-} : {
-  shouldForwardProp: (prop) => !["direction", "sentiment"].includes(prop),
-  target: "e1d1zom91",
-  label: "StyledIconWrapper"
-})("display:flex;flex-direction:", ({
-  direction
-}) => direction === "vertical" ? "column" : "row", ";align-items:center;svg{fill:", ({
-  sentiment,
-  theme
-}) => sentiment === "neutral" ? theme.colors.neutral.borderWeak : theme.colors[sentiment].border, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlcGFyYXRvci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZW1CIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlcGFyYXRvci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHR5cGUgeyBDb2xvciB9IGZyb20gJy4uLy4uL3RoZW1lJ1xuXG50eXBlIERpcmVjdGlvbiA9ICdob3Jpem9udGFsJyB8ICd2ZXJ0aWNhbCdcblxudHlwZSBTdHlsZWRJY29uUHJvcHMgPSB7XG4gIGRpcmVjdGlvbjogRGlyZWN0aW9uXG4gIHNlbnRpbWVudDogQ29sb3Jcbn1cblxuY29uc3QgU3R5bGVkSWNvbldyYXBwZXIgPSBzdHlsZWQoJ2RpdicsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnZGlyZWN0aW9uJywgJ3NlbnRpbWVudCddLmluY2x1ZGVzKHByb3ApLFxufSk8U3R5bGVkSWNvblByb3BzPmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246ICR7KHsgZGlyZWN0aW9uIH0pID0+XG4gICAgZGlyZWN0aW9uID09PSAndmVydGljYWwnID8gJ2NvbHVtbicgOiAncm93J307XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cbiAgc3ZnIHtcbiAgICBmaWxsOiAkeyh7IHNlbnRpbWVudCwgdGhlbWUgfSkgPT4gKHNlbnRpbWVudCA9PT0gJ25ldXRyYWwnID8gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyV2VhayA6IHRoZW1lLmNvbG9yc1tzZW50aW1lbnRdLmJvcmRlcil9O1xuICB9XG5gXG5cbnR5cGUgSG9yaXpvbnRhbFNlcGFyYXRvclByb3BzID0gT21pdDxTZXBhcmF0b3JQcm9wcywgJ2NvbG9yJyB8ICdzZW50aW1lbnQnPiAmIHtcbiAgaGFzSWNvbj86IGJvb2xlYW5cbiAgc2VudGltZW50OiBDb2xvclxufVxuXG5jb25zdCBTdHlsZWRIciA9IHN0eWxlZCgnaHInLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+XG4gICAgIVsnZGlyZWN0aW9uJywgJ3RoaWNrbmVzcycsICdoYXNJY29uJywgJ3NlbnRpbWVudCddLmluY2x1ZGVzKHByb3ApLFxufSk8SG9yaXpvbnRhbFNlcGFyYXRvclByb3BzPmBcbiAgbWFyZ2luOiAwO1xuICBib3JkZXI6IDA7XG4gIHdpZHRoOiAkeyh7IGRpcmVjdGlvbiwgdGhpY2tuZXNzID0gMSB9KSA9PlxuICAgIGRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/IGAke3RoaWNrbmVzc31weGAgOiAnYXV0byd9O1xuICBoZWlnaHQ6ICR7KHsgZGlyZWN0aW9uLCB0aGlja25lc3MgPSAxIH0pID0+XG4gICAgZGlyZWN0aW9uID09PSAnaG9yaXpvbnRhbCcgPyBgJHt0aGlja25lc3N9cHhgIDogJ2F1dG8nfTtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUsIHNlbnRpbWVudCB9KSA9PlxuICAgIHNlbnRpbWVudCA9PT0gJ25ldXRyYWwnXG4gICAgICA/IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWtcbiAgICAgIDogdGhlbWUuY29sb3JzW3NlbnRpbWVudF0uYm9yZGVyfTtcbiAgJHsoeyBoYXNJY29uIH0pID0+IGhhc0ljb24gJiYgYGZsZXg6IDE7YH1cbmBcblxudHlwZSBTZXBhcmF0b3JQcm9wcyA9IHtcbiAgZGlyZWN0aW9uPzogRGlyZWN0aW9uXG4gIHRoaWNrbmVzcz86IG51bWJlclxuICBzZW50aW1lbnQ/OiBDb2xvclxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgJ2RhdGEtdGVzdGlkJz86IHN0cmluZ1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxufVxuXG4vKipcbiAqIFNlcGFyYXRvciBjb21wb25lbnQgdXNlZCB0byBzZXBhcmF0ZSBjb250ZW50IHdpdGggYSBob3Jpem9udGFsIG9yIHZlcnRpY2FsIGxpbmUuXG4gKi9cbmV4cG9ydCBjb25zdCBTZXBhcmF0b3IgPSAoe1xuICBkaXJlY3Rpb24gPSAnaG9yaXpvbnRhbCcsXG4gIHRoaWNrbmVzcyA9IDEsXG4gIHNlbnRpbWVudCA9ICduZXV0cmFsJyxcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICBjaGlsZHJlbixcbn06IFNlcGFyYXRvclByb3BzKSA9PlxuICBjaGlsZHJlbiA/IChcbiAgICA8U3R5bGVkSWNvbldyYXBwZXJcbiAgICAgIGFyaWEtb3JpZW50YXRpb249e2RpcmVjdGlvbn1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgICBkaXJlY3Rpb249e2RpcmVjdGlvbn1cbiAgICAgIHJvbGU9XCJzZXBhcmF0b3JcIlxuICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgPlxuICAgICAgPFN0eWxlZEhyXG4gICAgICAgIGRpcmVjdGlvbj17ZGlyZWN0aW9ufVxuICAgICAgICBoYXNJY29uXG4gICAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgICB0aGlja25lc3M9e3RoaWNrbmVzc31cbiAgICAgIC8+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgICA8U3R5bGVkSHJcbiAgICAgICAgZGlyZWN0aW9uPXtkaXJlY3Rpb259XG4gICAgICAgIGhhc0ljb25cbiAgICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgICAgIHRoaWNrbmVzcz17dGhpY2tuZXNzfVxuICAgICAgLz5cbiAgICA8L1N0eWxlZEljb25XcmFwcGVyPlxuICApIDogKFxuICAgIDxTdHlsZWRIclxuICAgICAgYXJpYS1vcmllbnRhdGlvbj17ZGlyZWN0aW9ufVxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIGRpcmVjdGlvbj17ZGlyZWN0aW9ufVxuICAgICAgcm9sZT1cInNlcGFyYXRvclwiXG4gICAgICBzZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgIHRoaWNrbmVzcz17dGhpY2tuZXNzfVxuICAgIC8+XG4gIClcbiJdfQ== */"));
-const StyledHr = /* @__PURE__ */ _styled("hr", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["direction", "thickness", "hasIcon", "sentiment"].includes(prop),
-  target: "e1d1zom90"
-} : {
-  shouldForwardProp: (prop) => !["direction", "thickness", "hasIcon", "sentiment"].includes(prop),
-  target: "e1d1zom90",
-  label: "StyledHr"
-})("margin:0;border:0;width:", ({
-  direction,
-  thickness = 1
-}) => direction === "vertical" ? `${thickness}px` : "auto", ";height:", ({
-  direction,
-  thickness = 1
-}) => direction === "horizontal" ? `${thickness}px` : "auto", ";flex-shrink:0;background-color:", ({
-  theme,
-  sentiment
-}) => sentiment === "neutral" ? theme.colors.neutral.borderWeak : theme.colors[sentiment].border, ";", ({
-  hasIcon
-}) => hasIcon && `flex: 1;`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL1NlcGFyYXRvci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0M0QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9TZXBhcmF0b3IvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgQ29sb3IgfSBmcm9tICcuLi8uLi90aGVtZSdcblxudHlwZSBEaXJlY3Rpb24gPSAnaG9yaXpvbnRhbCcgfCAndmVydGljYWwnXG5cbnR5cGUgU3R5bGVkSWNvblByb3BzID0ge1xuICBkaXJlY3Rpb246IERpcmVjdGlvblxuICBzZW50aW1lbnQ6IENvbG9yXG59XG5cbmNvbnN0IFN0eWxlZEljb25XcmFwcGVyID0gc3R5bGVkKCdkaXYnLCB7XG4gIHNob3VsZEZvcndhcmRQcm9wOiBwcm9wID0+ICFbJ2RpcmVjdGlvbicsICdzZW50aW1lbnQnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPFN0eWxlZEljb25Qcm9wcz5gXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiAkeyh7IGRpcmVjdGlvbiB9KSA9PlxuICAgIGRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/ICdjb2x1bW4nIDogJ3Jvdyd9O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIHN2ZyB7XG4gICAgZmlsbDogJHsoeyBzZW50aW1lbnQsIHRoZW1lIH0pID0+IChzZW50aW1lbnQgPT09ICduZXV0cmFsJyA/IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWsgOiB0aGVtZS5jb2xvcnNbc2VudGltZW50XS5ib3JkZXIpfTtcbiAgfVxuYFxuXG50eXBlIEhvcml6b250YWxTZXBhcmF0b3JQcm9wcyA9IE9taXQ8U2VwYXJhdG9yUHJvcHMsICdjb2xvcicgfCAnc2VudGltZW50Jz4gJiB7XG4gIGhhc0ljb24/OiBib29sZWFuXG4gIHNlbnRpbWVudDogQ29sb3Jcbn1cblxuY29uc3QgU3R5bGVkSHIgPSBzdHlsZWQoJ2hyJywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbJ2RpcmVjdGlvbicsICd0aGlja25lc3MnLCAnaGFzSWNvbicsICdzZW50aW1lbnQnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPEhvcml6b250YWxTZXBhcmF0b3JQcm9wcz5gXG4gIG1hcmdpbjogMDtcbiAgYm9yZGVyOiAwO1xuICB3aWR0aDogJHsoeyBkaXJlY3Rpb24sIHRoaWNrbmVzcyA9IDEgfSkgPT5cbiAgICBkaXJlY3Rpb24gPT09ICd2ZXJ0aWNhbCcgPyBgJHt0aGlja25lc3N9cHhgIDogJ2F1dG8nfTtcbiAgaGVpZ2h0OiAkeyh7IGRpcmVjdGlvbiwgdGhpY2tuZXNzID0gMSB9KSA9PlxuICAgIGRpcmVjdGlvbiA9PT0gJ2hvcml6b250YWwnID8gYCR7dGhpY2tuZXNzfXB4YCA6ICdhdXRvJ307XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lLCBzZW50aW1lbnQgfSkgPT5cbiAgICBzZW50aW1lbnQgPT09ICduZXV0cmFsJ1xuICAgICAgPyB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrXG4gICAgICA6IHRoZW1lLmNvbG9yc1tzZW50aW1lbnRdLmJvcmRlcn07XG4gICR7KHsgaGFzSWNvbiB9KSA9PiBoYXNJY29uICYmIGBmbGV4OiAxO2B9XG5gXG5cbnR5cGUgU2VwYXJhdG9yUHJvcHMgPSB7XG4gIGRpcmVjdGlvbj86IERpcmVjdGlvblxuICB0aGlja25lc3M/OiBudW1iZXJcbiAgc2VudGltZW50PzogQ29sb3JcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGVcbn1cblxuLyoqXG4gKiBTZXBhcmF0b3IgY29tcG9uZW50IHVzZWQgdG8gc2VwYXJhdGUgY29udGVudCB3aXRoIGEgaG9yaXpvbnRhbCBvciB2ZXJ0aWNhbCBsaW5lLlxuICovXG5leHBvcnQgY29uc3QgU2VwYXJhdG9yID0gKHtcbiAgZGlyZWN0aW9uID0gJ2hvcml6b250YWwnLFxuICB0aGlja25lc3MgPSAxLFxuICBzZW50aW1lbnQgPSAnbmV1dHJhbCcsXG4gIGNsYXNzTmFtZSxcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbiAgY2hpbGRyZW4sXG59OiBTZXBhcmF0b3JQcm9wcykgPT5cbiAgY2hpbGRyZW4gPyAoXG4gICAgPFN0eWxlZEljb25XcmFwcGVyXG4gICAgICBhcmlhLW9yaWVudGF0aW9uPXtkaXJlY3Rpb259XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgZGlyZWN0aW9uPXtkaXJlY3Rpb259XG4gICAgICByb2xlPVwic2VwYXJhdG9yXCJcbiAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgID5cbiAgICAgIDxTdHlsZWRIclxuICAgICAgICBkaXJlY3Rpb249e2RpcmVjdGlvbn1cbiAgICAgICAgaGFzSWNvblxuICAgICAgICBzZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgICAgdGhpY2tuZXNzPXt0aGlja25lc3N9XG4gICAgICAvPlxuICAgICAge2NoaWxkcmVufVxuICAgICAgPFN0eWxlZEhyXG4gICAgICAgIGRpcmVjdGlvbj17ZGlyZWN0aW9ufVxuICAgICAgICBoYXNJY29uXG4gICAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgICB0aGlja25lc3M9e3RoaWNrbmVzc31cbiAgICAgIC8+XG4gICAgPC9TdHlsZWRJY29uV3JhcHBlcj5cbiAgKSA6IChcbiAgICA8U3R5bGVkSHJcbiAgICAgIGFyaWEtb3JpZW50YXRpb249e2RpcmVjdGlvbn1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgICBkaXJlY3Rpb249e2RpcmVjdGlvbn1cbiAgICAgIHJvbGU9XCJzZXBhcmF0b3JcIlxuICAgICAgc2VudGltZW50PXtzZW50aW1lbnR9XG4gICAgICB0aGlja25lc3M9e3RoaWNrbmVzc31cbiAgICAvPlxuICApXG4iXX0= */"));
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { iconWraperSeparator, hr, thicknessSeparator } from "./styles.css.js";
 const Separator = ({
   direction = "horizontal",
   thickness = 1,
@@ -40,11 +9,31 @@ const Separator = ({
   className,
   "data-testid": dataTestId,
   children
-}) => children ? /* @__PURE__ */ jsxs(StyledIconWrapper, { "aria-orientation": direction, className, "data-testid": dataTestId, direction, role: "separator", sentiment, children: [
-  /* @__PURE__ */ jsx(StyledHr, { direction, hasIcon: true, sentiment, thickness }),
+}) => children ? /* @__PURE__ */ jsxs("div", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${iconWraperSeparator({
+  direction,
+  sentiment
+})}`, "data-testid": dataTestId, role: "separator", children: [
+  /* @__PURE__ */ jsx("hr", { className: hr({
+    direction,
+    hasIcon: true,
+    sentiment
+  }), style: assignInlineVars({
+    [thicknessSeparator]: `${thickness}px`
+  }) }),
   children,
-  /* @__PURE__ */ jsx(StyledHr, { direction, hasIcon: true, sentiment, thickness })
-] }) : /* @__PURE__ */ jsx(StyledHr, { "aria-orientation": direction, className, "data-testid": dataTestId, direction, role: "separator", sentiment, thickness });
+  /* @__PURE__ */ jsx("hr", { className: hr({
+    direction,
+    hasIcon: true,
+    sentiment
+  }), style: assignInlineVars({
+    [thicknessSeparator]: `${thickness}px`
+  }) })
+] }) : /* @__PURE__ */ jsx("hr", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${hr({
+  direction,
+  sentiment
+})}`, "data-testid": dataTestId, role: "separator", style: assignInlineVars({
+  [thicknessSeparator]: `${thickness}px`
+}) });
 export {
   Separator
 };

package/dist/components/Separator/styles.css.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                            */
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var thicknessSeparator = "var(--uv_bu43fb0)";
+var iconWraperSeparator = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_bu43fb1", variantClassNames: { direction: { horizontal: "uv_bu43fb2", vertical: "uv_bu43fb3" }, sentiment: { danger: "uv_bu43fb4", info: "uv_bu43fb5", neutral: "uv_bu43fb6", primary: "uv_bu43fb7", secondary: "uv_bu43fb8", success: "uv_bu43fb9", warning: "uv_bu43fba" } }, defaultVariants: { direction: "horizontal", sentiment: "neutral" }, compoundVariants: [] });
+var hr = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_bu43fbb", variantClassNames: { direction: { horizontal: "uv_bu43fbc", vertical: "uv_bu43fbd" }, hasIcon: { false: "uv_bu43fbe", true: "uv_bu43fbf" }, sentiment: { danger: "uv_bu43fbg", info: "uv_bu43fbh", neutral: "uv_bu43fbi", primary: "uv_bu43fbj", secondary: "uv_bu43fbk", success: "uv_bu43fbl", warning: "uv_bu43fbm" } }, defaultVariants: {}, compoundVariants: [] });
+exports.hr = hr;
+exports.iconWraperSeparator = iconWraperSeparator;
+exports.thicknessSeparator = thicknessSeparator;

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

@@ -0,0 +1,125 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const thicknessSeparator: `var(--${string})`;
+export declare const iconWraperSeparator: import("@vanilla-extract/recipes").RuntimeFn<{
+    direction: {
+        horizontal: {
+            flexDirection: "row";
+        };
+        vertical: {
+            flexDirection: "column";
+        };
+    };
+    sentiment: {
+        danger: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        info: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        neutral: {
+            color: `var(--${string})`;
+        };
+        primary: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        secondary: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        success: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        warning: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+    };
+}>;
+export declare const hr: import("@vanilla-extract/recipes").RuntimeFn<{
+    direction: {
+        horizontal: {
+            height: `var(--${string})`;
+            width: "auto";
+        };
+        vertical: {
+            height: "auto";
+            width: `var(--${string})`;
+        };
+    };
+    hasIcon: {
+        false: {};
+        true: {
+            flex: number;
+        };
+    };
+    sentiment: {
+        danger: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        info: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        neutral: {
+            backgroundColor: `var(--${string})`;
+        };
+        primary: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        secondary: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        success: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+        warning: {
+            backgroundColor: `var(--${string})`;
+            color?: undefined;
+        } | {
+            color: `var(--${string})`;
+            backgroundColor?: undefined;
+        };
+    };
+}>;
+export type SeparatorVariants = NonNullable<RecipeVariants<typeof iconWraperSeparator>>;

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

@@ -0,0 +1,10 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var thicknessSeparator = "var(--uv_bu43fb0)";
+var iconWraperSeparator = createRuntimeFn({ defaultClassName: "uv_bu43fb1", variantClassNames: { direction: { horizontal: "uv_bu43fb2", vertical: "uv_bu43fb3" }, sentiment: { danger: "uv_bu43fb4", info: "uv_bu43fb5", neutral: "uv_bu43fb6", primary: "uv_bu43fb7", secondary: "uv_bu43fb8", success: "uv_bu43fb9", warning: "uv_bu43fba" } }, defaultVariants: { direction: "horizontal", sentiment: "neutral" }, compoundVariants: [] });
+var hr = createRuntimeFn({ defaultClassName: "uv_bu43fbb", variantClassNames: { direction: { horizontal: "uv_bu43fbc", vertical: "uv_bu43fbd" }, hasIcon: { false: "uv_bu43fbe", true: "uv_bu43fbf" }, sentiment: { danger: "uv_bu43fbg", info: "uv_bu43fbh", neutral: "uv_bu43fbi", primary: "uv_bu43fbj", secondary: "uv_bu43fbk", success: "uv_bu43fbl", warning: "uv_bu43fbm" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  hr,
+  iconWraperSeparator,
+  thicknessSeparator
+};

package/dist/components/Skeleton/Block.cjs

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

package/dist/components/Skeleton/Block.js

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

package/dist/components/Skeleton/Blocks.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}`)) });