@ultraviolet/ui 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/components/Separator/index.cjs

@@ -2,41 +2,8 @@
 "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 StyledIconWrapper = /* @__PURE__ */ _styled__default.default("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__default.default("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= */"));
+const dynamic = require("@vanilla-extract/dynamic");
+const styles_css = require("./styles.css.cjs");
 const Separator = ({
   direction = "horizontal",
   thickness = 1,
@@ -44,9 +11,29 @@ const Separator = ({
   className,
   "data-testid": dataTestId,
   children
-}) => children ? /* @__PURE__ */ jsxRuntime.jsxs(StyledIconWrapper, { "aria-orientation": direction, className, "data-testid": dataTestId, direction, role: "separator", sentiment, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(StyledHr, { direction, hasIcon: true, sentiment, thickness }),
+}) => children ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${styles_css.iconWraperSeparator({
+  direction,
+  sentiment
+})}`, "data-testid": dataTestId, role: "separator", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("hr", { className: styles_css.hr({
+    direction,
+    hasIcon: true,
+    sentiment
+  }), style: dynamic.assignInlineVars({
+    [styles_css.thicknessSeparator]: `${thickness}px`
+  }) }),
   children,
-  /* @__PURE__ */ jsxRuntime.jsx(StyledHr, { direction, hasIcon: true, sentiment, thickness })
-] }) : /* @__PURE__ */ jsxRuntime.jsx(StyledHr, { "aria-orientation": direction, className, "data-testid": dataTestId, direction, role: "separator", sentiment, thickness });
+  /* @__PURE__ */ jsxRuntime.jsx("hr", { className: styles_css.hr({
+    direction,
+    hasIcon: true,
+    sentiment
+  }), style: dynamic.assignInlineVars({
+    [styles_css.thicknessSeparator]: `${thickness}px`
+  }) })
+] }) : /* @__PURE__ */ jsxRuntime.jsx("hr", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${styles_css.hr({
+  direction,
+  sentiment
+})}`, "data-testid": dataTestId, role: "separator", style: dynamic.assignInlineVars({
+  [styles_css.thicknessSeparator]: `${thickness}px`
+}) });
 exports.Separator = Separator;

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/Slider/styles.d.ts

@@ -1,22 +1,39 @@
 import type { Theme } from '@emotion/react';
 export declare const SliderContainer: import("@emotion/styled").StyledComponent<{
-    theme?: Theme;
-    as?: React.ElementType;
+    gap?: 0 | "0" | 2 | 1 | "1" | "0.5" | "0.25" | "1.5" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 7 | 10 | 3 | 4 | 5 | 6 | 8 | 9 | 0.5 | 0.25 | 1.5 | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", 0 | "0" | 2 | 1 | "1" | "0.5" | "0.25" | "1.5" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 7 | 10 | 3 | 4 | 5 | 6 | 8 | 9 | 0.5 | 0.25 | 1.5>>;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", "column" | "column-reverse" | "row" | "row-reverse">>;
+    alignItems?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center">>;
+    justifyContent?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start">>;
+    wrap?: boolean | import("csstype").Property.FlexWrap | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", boolean | import("csstype").Property.FlexWrap | undefined>> | undefined;
+    width?: import("react").CSSProperties["width"];
+    maxWidth?: import("react").CSSProperties["maxWidth"];
+    minWidth?: import("react").CSSProperties["minWidth"];
+    flex?: import("react").CSSProperties["flex"];
+    className?: string;
+    children: import("react").ReactNode;
+    'data-testid'?: string;
+    id?: string;
 } & {
-    gap?: keyof import("../..").UltravioletUITheme["space"] | number | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], keyof import("../..").UltravioletUITheme["space"] | number>>;
-    direction?: "row" | "column" | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], "row" | "column">>;
-    alignItems?: import("react").CSSProperties["alignItems"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["alignItems"]>>;
-    justifyContent?: import("react").CSSProperties["justifyContent"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["justifyContent"]>>;
-    wrap?: boolean | import("react").CSSProperties["flexWrap"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], boolean | import("react").CSSProperties["flexWrap"]>>;
-    width?: import("react").CSSProperties["width"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["width"]>>;
-    maxWidth?: import("react").CSSProperties["maxWidth"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["maxWidth"]>>;
-    minWidth?: import("react").CSSProperties["minWidth"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["minWidth"]>>;
-    flex?: import("react").CSSProperties["flex"] | Partial<Record<keyof import("../..").UltravioletUITheme["breakpoints"], import("react").CSSProperties["flex"]>>;
+    as?: import("react").ElementType | undefined;
+    ref?: any;
+} & Omit<Omit<any, "ref">, keyof {
+    as?: E | undefined;
+    ref?: import("react").ComponentPropsWithRef<E>["ref"] | undefined;
+} | keyof {
+    gap?: 0 | "0" | 2 | 1 | "1" | "0.5" | "0.25" | "1.5" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 7 | 10 | 3 | 4 | 5 | 6 | 8 | 9 | 0.5 | 0.25 | 1.5 | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", 0 | "0" | 2 | 1 | "1" | "0.5" | "0.25" | "1.5" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | 7 | 10 | 3 | 4 | 5 | 6 | 8 | 9 | 0.5 | 0.25 | 1.5>>;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", "column" | "column-reverse" | "row" | "row-reverse">>;
+    alignItems?: "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center" | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", "normal" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "self-end" | "self-start" | "first baseline" | "last baseline" | "safe center" | "unsafe center">>;
+    justifyContent?: "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", "normal" | "left" | "right" | "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start">>;
+    wrap?: boolean | import("csstype").Property.FlexWrap | Partial<Record<"small" | "large" | "medium" | "xlarge" | "xsmall" | "xxsmall", boolean | import("csstype").Property.FlexWrap | undefined>> | undefined;
+    width?: import("react").CSSProperties["width"];
+    maxWidth?: import("react").CSSProperties["maxWidth"];
+    minWidth?: import("react").CSSProperties["minWidth"];
+    flex?: import("react").CSSProperties["flex"];
     className?: string;
     children: import("react").ReactNode;
     'data-testid'?: string;
     id?: string;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+}> & {
     theme?: Theme;
 } & {
     'data-options': boolean;
@@ -53,7 +70,7 @@ export declare const StyledTooltip: import("@emotion/styled").StyledComponent<Pi
     disableAnimation?: boolean;
     portalTarget?: HTMLElement;
     dynamicDomRendering?: boolean;
-} & import("react").RefAttributes<HTMLDivElement>, "children" | "className" | "text" | "id" | "tabIndex" | "role" | "maxWidth" | "data-testid" | "containerFullHeight" | "containerFullWidth" | "visible" | "debounceDelay" | "portalTarget" | "innerRef"> & {
+} & import("react").RefAttributes<HTMLDivElement>, "children" | "className" | "text" | "maxWidth" | "visible" | "data-testid" | "id" | "role" | "tabIndex" | "containerFullHeight" | "containerFullWidth" | "debounceDelay" | "portalTarget" | "innerRef"> & {
     placement?: Exclude<import("react").ComponentProps<typeof import("..").Popup>["placement"], "nested-menu">;
 } & import("react").RefAttributes<HTMLDivElement> & {
     theme?: Theme;