@ultraviolet/ui 3.0.0-beta.3 → 3.0.0-beta.5

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

@@ -0,0 +1,35 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const alert: import("@vanilla-extract/recipes").RuntimeFn<{
+    sentiment: {
+        danger: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderLeft: string;
+        };
+        info: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderLeft: string;
+        };
+        success: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderLeft: string;
+        };
+        warning: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderLeft: string;
+        };
+        neutral: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+            borderLeft: `4px solid var(--${string})`;
+        };
+    };
+}>;
+export declare const wrapAlert: string;
+export declare const textAlert: string;
+export declare const buttonAlert: string;
+export declare const buttonCloseAlert: string;
+export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>;

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

@@ -0,0 +1,14 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var alert = createRuntimeFn({ defaultClassName: "uv_1b838gx0", variantClassNames: { sentiment: { danger: "uv_1b838gx1", info: "uv_1b838gx2", success: "uv_1b838gx3", warning: "uv_1b838gx4", neutral: "uv_1b838gx5" } }, defaultVariants: { sentiment: "danger" }, compoundVariants: [] });
+var wrapAlert = "uv_1b838gx6";
+var textAlert = "uv_1b838gx7";
+var buttonAlert = "uv_1b838gx8";
+var buttonCloseAlert = "uv_1b838gx9";
+export {
+  alert,
+  buttonAlert,
+  buttonCloseAlert,
+  textAlert,
+  wrapAlert
+};

package/dist/components/Alert/type.d.ts

@@ -0,0 +1,2 @@
+export declare const ALERT_SENTIMENTS: readonly ["danger", "info", "success", "warning", "neutral"];
+export type AlertSentiment = (typeof ALERT_SENTIMENTS)[number];

package/dist/components/Badge/constant.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TEXT_VARIANT = {
+  large: "bodySmall",
+  medium: "caption",
+  small: "captionSmall"
+};
+exports.TEXT_VARIANT = TEXT_VARIANT;

package/dist/components/Badge/constant.d.ts

@@ -0,0 +1,14 @@
+export declare const SIZES: {
+    readonly large: "400";
+    readonly medium: "300";
+    readonly small: "200";
+};
+export declare const PROMINENCES: {
+    default: string;
+    strong: string;
+};
+export declare const TEXT_VARIANT: {
+    readonly large: "bodySmall";
+    readonly medium: "caption";
+    readonly small: "captionSmall";
+};

package/dist/components/Badge/constant.js

@@ -0,0 +1,8 @@
+const TEXT_VARIANT = {
+  large: "bodySmall",
+  medium: "caption",
+  small: "captionSmall"
+};
+export {
+  TEXT_VARIANT
+};

package/dist/components/Badge/index.cjs

@@ -2,85 +2,10 @@
 "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("@emotion/react");
-const react$1 = require("react");
-const index = require("../../theme/index.cjs");
-const capitalize = require("../../utils/capitalize.cjs");
-const index$1 = require("../Text/index.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const SIZES = {
-  large: "400",
-  // sizing token from theme
-  medium: "300",
-  small: "200"
-};
-const PROMINENCES = {
-  strong: "strong"
-};
-const TEXT_VARIANT = {
-  large: "bodySmall",
-  medium: "caption",
-  small: "captionSmall"
-};
-const generateStyles = ({
-  prominence,
-  theme
-}) => {
-  const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : "";
-  const text = `text${definedProminence}`;
-  const background = `background${definedProminence}`;
-  return {
-    ...index.SENTIMENTS_WITHOUT_NEUTRAL.reduce((reducer, sentiment) => ({
-      ...reducer,
-      [sentiment]: `
-      color: ${theme.colors[sentiment][text]};
-      background: ${theme.colors[sentiment][background]};
-      border: 1px solid ${theme.colors[sentiment][background]};
-    `
-    }), {}),
-    disabled: `
-      color: ${theme.colors.neutral.textWeak};
-      background: ${theme.colors.neutral.backgroundStrong};
-      border: none;
-    `,
-    neutral: `
-      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral.textStronger : theme.colors.neutral.text};
-      background: ${prominence === PROMINENCES.strong ? theme.colors.neutral.backgroundStronger : theme.colors.neutral.backgroundWeak};
-      border: 1px solid ${prominence === PROMINENCES.strong ? theme.colors.neutral.borderStronger : theme.colors.neutral.border};
-    `
-  };
-};
-const StyledSpan = /* @__PURE__ */ _styled__default.default(index$1.Text, process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["sentimentStyles", "size", "fontSize"].includes(prop),
-  target: "ej33bna0"
-} : {
-  shouldForwardProp: (prop) => !["sentimentStyles", "size", "fontSize"].includes(prop),
-  target: "ej33bna0",
-  label: "StyledSpan"
-})("display:inline-flex;align-items:center;justify-content:center;border-radius:", ({
-  theme
-}) => theme.radii.xlarge, ";padding:0 ", ({
-  theme,
-  size
-}) => {
-  if (size === "small") {
-    return theme.space["1"];
-  }
-  if (size === "large") {
-    return theme.space["2"];
-  }
-  return theme.space["1.5"];
-}, ";gap:", ({
-  theme,
-  size
-}) => size === "small" ? theme.space["0.5"] : theme.space["1"], ";width:fit-content;height:", ({
-  size,
-  theme
-}) => theme.sizing[SIZES[size]], ";text-transform:uppercase;", ({
-  sentimentStyles
-}) => sentimentStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0JhZGdlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RkUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQmFkZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgdHlwZSB7IENvbG9yIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5pbXBvcnQgeyBTRU5USU1FTlRTX1dJVEhPVVRfTkVVVFJBTCB9IGZyb20gJy4uLy4uL3RoZW1lJ1xuaW1wb3J0IGNhcGl0YWxpemUgZnJvbSAnLi4vLi4vdXRpbHMvY2FwaXRhbGl6ZSdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UZXh0J1xuXG5leHBvcnQgY29uc3QgU0laRVMgPSB7XG4gIGxhcmdlOiAnNDAwJywgLy8gc2l6aW5nIHRva2VuIGZyb20gdGhlbWVcbiAgbWVkaXVtOiAnMzAwJyxcbiAgc21hbGw6ICcyMDAnLFxufSBhcyBjb25zdFxuXG5leHBvcnQgY29uc3QgUFJPTUlORU5DRVMgPSB7XG4gIGRlZmF1bHQ6ICdkZWZhdWx0JyxcbiAgc3Ryb25nOiAnc3Ryb25nJyxcbn1cblxuZXhwb3J0IGNvbnN0IFRFWFRfVkFSSUFOVCA9IHtcbiAgbGFyZ2U6ICdib2R5U21hbGwnLFxuICBtZWRpdW06ICdjYXB0aW9uJyxcbiAgc21hbGw6ICdjYXB0aW9uU21hbGwnLFxufSBhcyBjb25zdFxuXG4vKipcbiAqIEdlbmVyYXRlIGFsbCBzdHlsZXMgYXZhaWxhYmxlIGZvciBiYWRnZSBiYXNlZCBvbiBwcm9taW5lbmNlIGFuZCBzZW50aW1lbnRzXG4gKi9cbmNvbnN0IGdlbmVyYXRlU3R5bGVzID0gKHtcbiAgcHJvbWluZW5jZSxcbiAgdGhlbWUsXG59OiB7XG4gIHByb21pbmVuY2U6IHN0cmluZ1xuICB0aGVtZTogVGhlbWVcbn0pOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0+IHtcbiAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZyA/IGNhcGl0YWxpemUoUFJPTUlORU5DRVMuc3Ryb25nKSA6ICcnXG5cbiAgY29uc3QgdGV4dCA9IGB0ZXh0JHtkZWZpbmVkUHJvbWluZW5jZX1gXG4gIGNvbnN0IGJhY2tncm91bmQgPSBgYmFja2dyb3VuZCR7ZGVmaW5lZFByb21pbmVuY2V9YFxuXG4gIHJldHVybiB7XG4gICAgLi4uU0VOVElNRU5UU19XSVRIT1VUX05FVVRSQUwucmVkdWNlKFxuICAgICAgKHJlZHVjZXIsIHNlbnRpbWVudCkgPT4gKHtcbiAgICAgICAgLi4ucmVkdWNlcixcbiAgICAgICAgW3NlbnRpbWVudF06IGBcbiAgICAgIGNvbG9yOiAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVt0ZXh0IGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgICBiYWNrZ3JvdW5kOiAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVtiYWNrZ3JvdW5kIGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVtiYWNrZ3JvdW5kIGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgYCxcbiAgICAgIH0pLFxuICAgICAge30sXG4gICAgKSxcbiAgICBkaXNhYmxlZDogYFxuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLm5ldXRyYWwudGV4dFdlYWt9O1xuICAgICAgYmFja2dyb3VuZDogJHt0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kU3Ryb25nfTtcbiAgICAgIGJvcmRlcjogbm9uZTtcbiAgICBgLFxuICAgIG5ldXRyYWw6IGBcbiAgICAgIGNvbG9yOiAke1xuICAgICAgICBwcm9taW5lbmNlID09PSBQUk9NSU5FTkNFUy5zdHJvbmdcbiAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5uZXV0cmFsLnRleHRTdHJvbmdlclxuICAgICAgICAgIDogdGhlbWUuY29sb3JzLm5ldXRyYWwudGV4dFxuICAgICAgfTtcbiAgICAgIGJhY2tncm91bmQ6ICR7XG4gICAgICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZ1xuICAgICAgICAgID8gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFN0cm9uZ2VyXG4gICAgICAgICAgOiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kV2Vha1xuICAgICAgfTtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7XG4gICAgICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZ1xuICAgICAgICAgID8gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyU3Ryb25nZXJcbiAgICAgICAgICA6IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlclxuICAgICAgfTtcbiAgICBgLFxuICB9XG59XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQoVGV4dCwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbJ3NlbnRpbWVudFN0eWxlcycsICdzaXplJywgJ2ZvbnRTaXplJ10uaW5jbHVkZXMocHJvcCksXG59KTx7XG4gIHNpemU6IGtleW9mIHR5cGVvZiBTSVpFU1xuICBzZW50aW1lbnRTdHlsZXM6IHN0cmluZ1xufT5gXG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS54bGFyZ2V9O1xuICBwYWRkaW5nOiAwXG4gICAgJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB7XG4gICAgICBpZiAoc2l6ZSA9PT0gJ3NtYWxsJykge1xuICAgICAgICByZXR1cm4gdGhlbWUuc3BhY2VbJzEnXVxuICAgICAgfVxuICAgICAgaWYgKHNpemUgPT09ICdsYXJnZScpIHtcbiAgICAgICAgcmV0dXJuIHRoZW1lLnNwYWNlWycyJ11cbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHRoZW1lLnNwYWNlWycxLjUnXVxuICAgIH19O1xuICBnYXA6ICR7KHsgdGhlbWUsIHNpemUgfSkgPT5cbiAgICBzaXplID09PSAnc21hbGwnID8gdGhlbWUuc3BhY2VbJzAuNSddIDogdGhlbWUuc3BhY2VbJzEnXX07XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgaGVpZ2h0OiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAkeyh7IHNlbnRpbWVudFN0eWxlcyB9KSA9PiBzZW50aW1lbnRTdHlsZXN9XG5gXG5cbnR5cGUgQmFkZ2VQcm9wcyA9IHtcbiAgc2VudGltZW50PzogQ29sb3JcbiAgc2l6ZT86IGtleW9mIHR5cGVvZiBTSVpFU1xuICBwcm9taW5lbmNlPzoga2V5b2YgdHlwZW9mIFBST01JTkVOQ0VTXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG59XG5cbi8qKlxuICogQmFkZ2UgY29tcG9uZW50IGlzIHVzZWQgdG8gZGlzcGxheSBhIHN0YXR1cyBvciBhIGxhYmVsIGluIGEgc21hbGwgY29udGFpbmVyLlxuICovXG5leHBvcnQgY29uc3QgQmFkZ2UgPSAoe1xuICBzZW50aW1lbnQgPSAnbmV1dHJhbCcsXG4gIHNpemUgPSAnbWVkaXVtJyxcbiAgcHJvbWluZW5jZSA9ICdkZWZhdWx0JyxcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgY2xhc3NOYW1lLFxuICBjaGlsZHJlbixcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbn06IEJhZGdlUHJvcHMpID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpXG5cbiAgLyoqXG4gICAqIEJhZGdlIHNob3VsZCBkaXNwbGF5IGFuIGFyaWEtbGFiZWwgaWYgdGhlIHN0YXR1cyBpcyBub3QgbmV1dHJhbCBvciBwcmltYXJ5XG4gICAqL1xuICBjb25zdCBhcmlhTGFiZWwgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBbJ25ldXRyYWwnLCAncHJpbWFyeSddLnNvbWUoYmFzZVNlbnRpbWVudCA9PiBiYXNlU2VudGltZW50ID09PSBzZW50aW1lbnQpXG4gICAgICAgID8gdW5kZWZpbmVkXG4gICAgICAgIDogc2VudGltZW50LFxuICAgIFtzZW50aW1lbnRdLFxuICApXG5cbiAgY29uc3QgZ2VuZXJhdGVkU3R5bGVzID0gdXNlTWVtbyhcbiAgICAoKSA9PiBnZW5lcmF0ZVN0eWxlcyh7IHByb21pbmVuY2UsIHRoZW1lIH0pLFxuICAgIFtwcm9taW5lbmNlLCB0aGVtZV0sXG4gIClcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRTcGFuXG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICBhcz1cInNwYW5cIlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIHByb21pbmVuY2U9e2Rpc2FibGVkID8gJ3dlYWsnIDogJ2RlZmF1bHQnfVxuICAgICAgc2VudGltZW50U3R5bGVzPXtcbiAgICAgICAgZGlzYWJsZWQgPyBnZW5lcmF0ZWRTdHlsZXNbJ2Rpc2FibGVkJ10gOiBnZW5lcmF0ZWRTdHlsZXNbc2VudGltZW50XVxuICAgICAgfVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgIHZhcmlhbnQ9e1RFWFRfVkFSSUFOVFtzaXplXX1cbiAgICAgIHdoaXRlU3BhY2U9XCJub3dyYXBcIlxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZFNwYW4+XG4gIClcbn1cbiJdfQ== */"));
+const react = require("react");
+const index = require("../Text/index.cjs");
+const constant = require("./constant.cjs");
+const styles_css = require("./styles.css.cjs");
 const Badge = ({
   sentiment = "neutral",
   size = "medium",
@@ -90,15 +15,12 @@ const Badge = ({
   children,
   "data-testid": dataTestId
 }) => {
-  const theme = react.useTheme();
-  const ariaLabel = react$1.useMemo(() => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment, [sentiment]);
-  const generatedStyles = react$1.useMemo(() => generateStyles({
+  const ariaLabel = react.useMemo(() => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment, [sentiment]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Text, { "aria-label": ariaLabel, as: "span", className: `${className ? `${className} ` : ""}${styles_css.badge({
+    disabled,
     prominence,
-    theme
-  }), [prominence, theme]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpan, { "aria-label": ariaLabel, as: "span", className, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", sentimentStyles: disabled ? generatedStyles["disabled"] : generatedStyles[sentiment], size, variant: TEXT_VARIANT[size], whiteSpace: "nowrap", children });
+    sentiment,
+    size
+  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", variant: constant.TEXT_VARIANT[size], whiteSpace: "nowrap", children });
 };
 exports.Badge = Badge;
-exports.PROMINENCES = PROMINENCES;
-exports.SIZES = SIZES;
-exports.TEXT_VARIANT = TEXT_VARIANT;

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

@@ -1,28 +1,10 @@
 import type { ReactNode } from 'react';
-import type { Color } from '../../theme';
-export declare const SIZES: {
-    readonly large: "400";
-    readonly medium: "300";
-    readonly small: "200";
-};
-export declare const PROMINENCES: {
-    default: string;
-    strong: string;
-};
-export declare const TEXT_VARIANT: {
-    readonly large: "bodySmall";
-    readonly medium: "caption";
-    readonly small: "captionSmall";
-};
+import type { BadgeVariants } from './styles.css';
 type BadgeProps = {
-    sentiment?: Color;
-    size?: keyof typeof SIZES;
-    prominence?: keyof typeof PROMINENCES;
-    disabled?: boolean;
     className?: string;
     children: ReactNode;
     'data-testid'?: string;
-};
+} & BadgeVariants;
 /**
  * Badge component is used to display a status or a label in a small container.
  */

package/dist/components/Badge/index.js

@@ -1,82 +1,9 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-import { useTheme } from "@emotion/react";
 import { useMemo } from "react";
-import { SENTIMENTS_WITHOUT_NEUTRAL } from "../../theme/index.js";
-import capitalize from "../../utils/capitalize.js";
 import { Text } from "../Text/index.js";
-const SIZES = {
-  large: "400",
-  // sizing token from theme
-  medium: "300",
-  small: "200"
-};
-const PROMINENCES = {
-  strong: "strong"
-};
-const TEXT_VARIANT = {
-  large: "bodySmall",
-  medium: "caption",
-  small: "captionSmall"
-};
-const generateStyles = ({
-  prominence,
-  theme
-}) => {
-  const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : "";
-  const text = `text${definedProminence}`;
-  const background = `background${definedProminence}`;
-  return {
-    ...SENTIMENTS_WITHOUT_NEUTRAL.reduce((reducer, sentiment) => ({
-      ...reducer,
-      [sentiment]: `
-      color: ${theme.colors[sentiment][text]};
-      background: ${theme.colors[sentiment][background]};
-      border: 1px solid ${theme.colors[sentiment][background]};
-    `
-    }), {}),
-    disabled: `
-      color: ${theme.colors.neutral.textWeak};
-      background: ${theme.colors.neutral.backgroundStrong};
-      border: none;
-    `,
-    neutral: `
-      color: ${prominence === PROMINENCES.strong ? theme.colors.neutral.textStronger : theme.colors.neutral.text};
-      background: ${prominence === PROMINENCES.strong ? theme.colors.neutral.backgroundStronger : theme.colors.neutral.backgroundWeak};
-      border: 1px solid ${prominence === PROMINENCES.strong ? theme.colors.neutral.borderStronger : theme.colors.neutral.border};
-    `
-  };
-};
-const StyledSpan = /* @__PURE__ */ _styled(Text, process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["sentimentStyles", "size", "fontSize"].includes(prop),
-  target: "ej33bna0"
-} : {
-  shouldForwardProp: (prop) => !["sentimentStyles", "size", "fontSize"].includes(prop),
-  target: "ej33bna0",
-  label: "StyledSpan"
-})("display:inline-flex;align-items:center;justify-content:center;border-radius:", ({
-  theme
-}) => theme.radii.xlarge, ";padding:0 ", ({
-  theme,
-  size
-}) => {
-  if (size === "small") {
-    return theme.space["1"];
-  }
-  if (size === "large") {
-    return theme.space["2"];
-  }
-  return theme.space["1.5"];
-}, ";gap:", ({
-  theme,
-  size
-}) => size === "small" ? theme.space["0.5"] : theme.space["1"], ";width:fit-content;height:", ({
-  size,
-  theme
-}) => theme.sizing[SIZES[size]], ";text-transform:uppercase;", ({
-  sentimentStyles
-}) => sentimentStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0JhZGdlL2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RkUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvQmFkZ2UvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgdHlwZSB7IENvbG9yIH0gZnJvbSAnLi4vLi4vdGhlbWUnXG5pbXBvcnQgeyBTRU5USU1FTlRTX1dJVEhPVVRfTkVVVFJBTCB9IGZyb20gJy4uLy4uL3RoZW1lJ1xuaW1wb3J0IGNhcGl0YWxpemUgZnJvbSAnLi4vLi4vdXRpbHMvY2FwaXRhbGl6ZSdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi9UZXh0J1xuXG5leHBvcnQgY29uc3QgU0laRVMgPSB7XG4gIGxhcmdlOiAnNDAwJywgLy8gc2l6aW5nIHRva2VuIGZyb20gdGhlbWVcbiAgbWVkaXVtOiAnMzAwJyxcbiAgc21hbGw6ICcyMDAnLFxufSBhcyBjb25zdFxuXG5leHBvcnQgY29uc3QgUFJPTUlORU5DRVMgPSB7XG4gIGRlZmF1bHQ6ICdkZWZhdWx0JyxcbiAgc3Ryb25nOiAnc3Ryb25nJyxcbn1cblxuZXhwb3J0IGNvbnN0IFRFWFRfVkFSSUFOVCA9IHtcbiAgbGFyZ2U6ICdib2R5U21hbGwnLFxuICBtZWRpdW06ICdjYXB0aW9uJyxcbiAgc21hbGw6ICdjYXB0aW9uU21hbGwnLFxufSBhcyBjb25zdFxuXG4vKipcbiAqIEdlbmVyYXRlIGFsbCBzdHlsZXMgYXZhaWxhYmxlIGZvciBiYWRnZSBiYXNlZCBvbiBwcm9taW5lbmNlIGFuZCBzZW50aW1lbnRzXG4gKi9cbmNvbnN0IGdlbmVyYXRlU3R5bGVzID0gKHtcbiAgcHJvbWluZW5jZSxcbiAgdGhlbWUsXG59OiB7XG4gIHByb21pbmVuY2U6IHN0cmluZ1xuICB0aGVtZTogVGhlbWVcbn0pOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+ID0+IHtcbiAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZyA/IGNhcGl0YWxpemUoUFJPTUlORU5DRVMuc3Ryb25nKSA6ICcnXG5cbiAgY29uc3QgdGV4dCA9IGB0ZXh0JHtkZWZpbmVkUHJvbWluZW5jZX1gXG4gIGNvbnN0IGJhY2tncm91bmQgPSBgYmFja2dyb3VuZCR7ZGVmaW5lZFByb21pbmVuY2V9YFxuXG4gIHJldHVybiB7XG4gICAgLi4uU0VOVElNRU5UU19XSVRIT1VUX05FVVRSQUwucmVkdWNlKFxuICAgICAgKHJlZHVjZXIsIHNlbnRpbWVudCkgPT4gKHtcbiAgICAgICAgLi4ucmVkdWNlcixcbiAgICAgICAgW3NlbnRpbWVudF06IGBcbiAgICAgIGNvbG9yOiAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVt0ZXh0IGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgICBiYWNrZ3JvdW5kOiAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVtiYWNrZ3JvdW5kIGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgICBib3JkZXI6IDFweCBzb2xpZCAke1xuICAgICAgICB0aGVtZS5jb2xvcnNbc2VudGltZW50XVtiYWNrZ3JvdW5kIGFzIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMucHJpbWFyeV1cbiAgICAgIH07XG4gICAgYCxcbiAgICAgIH0pLFxuICAgICAge30sXG4gICAgKSxcbiAgICBkaXNhYmxlZDogYFxuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLm5ldXRyYWwudGV4dFdlYWt9O1xuICAgICAgYmFja2dyb3VuZDogJHt0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kU3Ryb25nfTtcbiAgICAgIGJvcmRlcjogbm9uZTtcbiAgICBgLFxuICAgIG5ldXRyYWw6IGBcbiAgICAgIGNvbG9yOiAke1xuICAgICAgICBwcm9taW5lbmNlID09PSBQUk9NSU5FTkNFUy5zdHJvbmdcbiAgICAgICAgICA/IHRoZW1lLmNvbG9ycy5uZXV0cmFsLnRleHRTdHJvbmdlclxuICAgICAgICAgIDogdGhlbWUuY29sb3JzLm5ldXRyYWwudGV4dFxuICAgICAgfTtcbiAgICAgIGJhY2tncm91bmQ6ICR7XG4gICAgICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZ1xuICAgICAgICAgID8gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFN0cm9uZ2VyXG4gICAgICAgICAgOiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kV2Vha1xuICAgICAgfTtcbiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICR7XG4gICAgICAgIHByb21pbmVuY2UgPT09IFBST01JTkVOQ0VTLnN0cm9uZ1xuICAgICAgICAgID8gdGhlbWUuY29sb3JzLm5ldXRyYWwuYm9yZGVyU3Ryb25nZXJcbiAgICAgICAgICA6IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlclxuICAgICAgfTtcbiAgICBgLFxuICB9XG59XG5cbmNvbnN0IFN0eWxlZFNwYW4gPSBzdHlsZWQoVGV4dCwge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbJ3NlbnRpbWVudFN0eWxlcycsICdzaXplJywgJ2ZvbnRTaXplJ10uaW5jbHVkZXMocHJvcCksXG59KTx7XG4gIHNpemU6IGtleW9mIHR5cGVvZiBTSVpFU1xuICBzZW50aW1lbnRTdHlsZXM6IHN0cmluZ1xufT5gXG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaS54bGFyZ2V9O1xuICBwYWRkaW5nOiAwXG4gICAgJHsoeyB0aGVtZSwgc2l6ZSB9KSA9PiB7XG4gICAgICBpZiAoc2l6ZSA9PT0gJ3NtYWxsJykge1xuICAgICAgICByZXR1cm4gdGhlbWUuc3BhY2VbJzEnXVxuICAgICAgfVxuICAgICAgaWYgKHNpemUgPT09ICdsYXJnZScpIHtcbiAgICAgICAgcmV0dXJuIHRoZW1lLnNwYWNlWycyJ11cbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHRoZW1lLnNwYWNlWycxLjUnXVxuICAgIH19O1xuICBnYXA6ICR7KHsgdGhlbWUsIHNpemUgfSkgPT5cbiAgICBzaXplID09PSAnc21hbGwnID8gdGhlbWUuc3BhY2VbJzAuNSddIDogdGhlbWUuc3BhY2VbJzEnXX07XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgaGVpZ2h0OiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19O1xuICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAkeyh7IHNlbnRpbWVudFN0eWxlcyB9KSA9PiBzZW50aW1lbnRTdHlsZXN9XG5gXG5cbnR5cGUgQmFkZ2VQcm9wcyA9IHtcbiAgc2VudGltZW50PzogQ29sb3JcbiAgc2l6ZT86IGtleW9mIHR5cGVvZiBTSVpFU1xuICBwcm9taW5lbmNlPzoga2V5b2YgdHlwZW9mIFBST01JTkVOQ0VTXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG59XG5cbi8qKlxuICogQmFkZ2UgY29tcG9uZW50IGlzIHVzZWQgdG8gZGlzcGxheSBhIHN0YXR1cyBvciBhIGxhYmVsIGluIGEgc21hbGwgY29udGFpbmVyLlxuICovXG5leHBvcnQgY29uc3QgQmFkZ2UgPSAoe1xuICBzZW50aW1lbnQgPSAnbmV1dHJhbCcsXG4gIHNpemUgPSAnbWVkaXVtJyxcbiAgcHJvbWluZW5jZSA9ICdkZWZhdWx0JyxcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgY2xhc3NOYW1lLFxuICBjaGlsZHJlbixcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbn06IEJhZGdlUHJvcHMpID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpXG5cbiAgLyoqXG4gICAqIEJhZGdlIHNob3VsZCBkaXNwbGF5IGFuIGFyaWEtbGFiZWwgaWYgdGhlIHN0YXR1cyBpcyBub3QgbmV1dHJhbCBvciBwcmltYXJ5XG4gICAqL1xuICBjb25zdCBhcmlhTGFiZWwgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBbJ25ldXRyYWwnLCAncHJpbWFyeSddLnNvbWUoYmFzZVNlbnRpbWVudCA9PiBiYXNlU2VudGltZW50ID09PSBzZW50aW1lbnQpXG4gICAgICAgID8gdW5kZWZpbmVkXG4gICAgICAgIDogc2VudGltZW50LFxuICAgIFtzZW50aW1lbnRdLFxuICApXG5cbiAgY29uc3QgZ2VuZXJhdGVkU3R5bGVzID0gdXNlTWVtbyhcbiAgICAoKSA9PiBnZW5lcmF0ZVN0eWxlcyh7IHByb21pbmVuY2UsIHRoZW1lIH0pLFxuICAgIFtwcm9taW5lbmNlLCB0aGVtZV0sXG4gIClcblxuICByZXR1cm4gKFxuICAgIDxTdHlsZWRTcGFuXG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICBhcz1cInNwYW5cIlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIHByb21pbmVuY2U9e2Rpc2FibGVkID8gJ3dlYWsnIDogJ2RlZmF1bHQnfVxuICAgICAgc2VudGltZW50U3R5bGVzPXtcbiAgICAgICAgZGlzYWJsZWQgPyBnZW5lcmF0ZWRTdHlsZXNbJ2Rpc2FibGVkJ10gOiBnZW5lcmF0ZWRTdHlsZXNbc2VudGltZW50XVxuICAgICAgfVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgIHZhcmlhbnQ9e1RFWFRfVkFSSUFOVFtzaXplXX1cbiAgICAgIHdoaXRlU3BhY2U9XCJub3dyYXBcIlxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L1N0eWxlZFNwYW4+XG4gIClcbn1cbiJdfQ== */"));
+import { TEXT_VARIANT } from "./constant.js";
+import { badge } from "./styles.css.js";
 const Badge = ({
   sentiment = "neutral",
   size = "medium",
@@ -86,17 +13,14 @@ const Badge = ({
   children,
   "data-testid": dataTestId
 }) => {
-  const theme = useTheme();
   const ariaLabel = useMemo(() => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment, [sentiment]);
-  const generatedStyles = useMemo(() => generateStyles({
+  return /* @__PURE__ */ jsx(Text, { "aria-label": ariaLabel, as: "span", className: `${className ? `${className} ` : ""}${badge({
+    disabled,
     prominence,
-    theme
-  }), [prominence, theme]);
-  return /* @__PURE__ */ jsx(StyledSpan, { "aria-label": ariaLabel, as: "span", className, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", sentimentStyles: disabled ? generatedStyles["disabled"] : generatedStyles[sentiment], size, variant: TEXT_VARIANT[size], whiteSpace: "nowrap", children });
+    sentiment,
+    size
+  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", variant: TEXT_VARIANT[size], whiteSpace: "nowrap", children });
 };
 export {
-  Badge,
-  PROMINENCES,
-  SIZES,
-  TEXT_VARIANT
+  Badge
 };

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                            */
+const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var badge = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1yf71jy0", variantClassNames: { size: { small: "uv_1yf71jy1", medium: "uv_1yf71jy2", large: "uv_1yf71jy3" }, sentiment: { primary: "uv_1yf71jy4", secondary: "uv_1yf71jy5", danger: "uv_1yf71jy6", info: "uv_1yf71jy7", success: "uv_1yf71jy8", warning: "uv_1yf71jy9", neutral: "uv_1yf71jya", black: "uv_1yf71jyb", white: "uv_1yf71jyc" }, prominence: { "default": "uv_1yf71jyd", strong: "uv_1yf71jye" }, disabled: { true: "uv_1yf71jyf" } }, defaultVariants: { size: "medium", prominence: "default", sentiment: "neutral", disabled: false }, compoundVariants: [[{ prominence: "default", sentiment: "primary", disabled: false }, "uv_1yf71jyg"], [{ prominence: "default", sentiment: "secondary", disabled: false }, "uv_1yf71jyh"], [{ prominence: "default", sentiment: "danger", disabled: false }, "uv_1yf71jyi"], [{ prominence: "default", sentiment: "info", disabled: false }, "uv_1yf71jyj"], [{ prominence: "default", sentiment: "success", disabled: false }, "uv_1yf71jyk"], [{ prominence: "default", sentiment: "warning", disabled: false }, "uv_1yf71jyl"], [{ prominence: "default", sentiment: "neutral", disabled: false }, "uv_1yf71jym"], [{ prominence: "strong", sentiment: "primary", disabled: false }, "uv_1yf71jyn"], [{ prominence: "strong", sentiment: "secondary", disabled: false }, "uv_1yf71jyo"], [{ prominence: "strong", sentiment: "danger", disabled: false }, "uv_1yf71jyp"], [{ prominence: "strong", sentiment: "info", disabled: false }, "uv_1yf71jyq"], [{ prominence: "strong", sentiment: "success", disabled: false }, "uv_1yf71jyr"], [{ prominence: "strong", sentiment: "warning", disabled: false }, "uv_1yf71jys"], [{ prominence: "strong", sentiment: "neutral", disabled: false }, "uv_1yf71jyt"]] });
+exports.badge = badge;

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

@@ -0,0 +1,43 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const badge: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        small: {
+            padding: `0 var(--${string})`;
+            gap: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+        medium: {
+            padding: `0 var(--${string})`;
+            gap: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+        large: {
+            padding: `0 var(--${string})`;
+            gap: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+    };
+    sentiment: {
+        primary: {};
+        secondary: {};
+        danger: {};
+        info: {};
+        success: {};
+        warning: {};
+        neutral: {};
+        black: {};
+        white: {};
+    };
+    prominence: {
+        default: {};
+        strong: {};
+    };
+    disabled: {
+        true: {
+            border: "none";
+            color: `var(--${string})`;
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;
+export type BadgeVariants = NonNullable<RecipeVariants<typeof badge>>;

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

@@ -0,0 +1,6 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var badge = createRuntimeFn({ defaultClassName: "uv_1yf71jy0", variantClassNames: { size: { small: "uv_1yf71jy1", medium: "uv_1yf71jy2", large: "uv_1yf71jy3" }, sentiment: { primary: "uv_1yf71jy4", secondary: "uv_1yf71jy5", danger: "uv_1yf71jy6", info: "uv_1yf71jy7", success: "uv_1yf71jy8", warning: "uv_1yf71jy9", neutral: "uv_1yf71jya", black: "uv_1yf71jyb", white: "uv_1yf71jyc" }, prominence: { "default": "uv_1yf71jyd", strong: "uv_1yf71jye" }, disabled: { true: "uv_1yf71jyf" } }, defaultVariants: { size: "medium", prominence: "default", sentiment: "neutral", disabled: false }, compoundVariants: [[{ prominence: "default", sentiment: "primary", disabled: false }, "uv_1yf71jyg"], [{ prominence: "default", sentiment: "secondary", disabled: false }, "uv_1yf71jyh"], [{ prominence: "default", sentiment: "danger", disabled: false }, "uv_1yf71jyi"], [{ prominence: "default", sentiment: "info", disabled: false }, "uv_1yf71jyj"], [{ prominence: "default", sentiment: "success", disabled: false }, "uv_1yf71jyk"], [{ prominence: "default", sentiment: "warning", disabled: false }, "uv_1yf71jyl"], [{ prominence: "default", sentiment: "neutral", disabled: false }, "uv_1yf71jym"], [{ prominence: "strong", sentiment: "primary", disabled: false }, "uv_1yf71jyn"], [{ prominence: "strong", sentiment: "secondary", disabled: false }, "uv_1yf71jyo"], [{ prominence: "strong", sentiment: "danger", disabled: false }, "uv_1yf71jyp"], [{ prominence: "strong", sentiment: "info", disabled: false }, "uv_1yf71jyq"], [{ prominence: "strong", sentiment: "success", disabled: false }, "uv_1yf71jyr"], [{ prominence: "strong", sentiment: "warning", disabled: false }, "uv_1yf71jys"], [{ prominence: "strong", sentiment: "neutral", disabled: false }, "uv_1yf71jyt"]] });
+export {
+  badge
+};