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

package/dist/components/ActionBar/index.cjs

@@ -2,42 +2,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _styled = require("@emotion/styled/base");
+const themes = require("@ultraviolet/themes");
 const reactDom = require("react-dom");
 const index = require("../Stack/index.cjs");
-const animations = require("../../utils/animations.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const StyledDiv = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "enye6lh1"
-} : {
-  target: "enye6lh1",
-  label: "StyledDiv"
-})("background:", ({
-  theme
-}) => theme.colors.other.elevation.background.fixed, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";bottom:", ({
-  rank,
-  theme
-}) => `calc(${theme.sizing["700"]} * ${rank} + ${theme.space["2"]})`, ";box-shadow:", ({
-  theme
-}) => `${theme.shadows.fixed[0]}, ${theme.shadows.fixed[1]}`, ";height:", ({
-  theme
-}) => theme.sizing["700"], ";left:50%;position:fixed;transform:translate(-50%, 0);width:37.5rem;animation:", animations.fadeIn, " 0.2s ease-in-out;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUThDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHsgZmFkZUluIH0gZnJvbSAnLi4vLi4vdXRpbHMnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuXG5jb25zdCBTdHlsZWREaXYgPSBzdHlsZWQuZGl2PHsgcmFuazogbnVtYmVyIH0+YFxuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5vdGhlci5lbGV2YXRpb24uYmFja2dyb3VuZC5maXhlZH07XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIGJvdHRvbTogJHsoeyByYW5rLCB0aGVtZSB9KSA9PiBgY2FsYygke3RoZW1lLnNpemluZ1snNzAwJ119ICogJHtyYW5rfSArICR7dGhlbWUuc3BhY2VbJzInXX0pYH07XG4gIGJveC1zaGFkb3c6ICR7KHsgdGhlbWUgfSkgPT4gYCR7dGhlbWUuc2hhZG93cy5maXhlZFswXX0sICR7dGhlbWUuc2hhZG93cy5maXhlZFsxXX1gfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snNzAwJ119O1xuICBsZWZ0OiA1MCU7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgMCk7XG4gIHdpZHRoOiAzNy41cmVtO1xuICBhbmltYXRpb246ICR7ZmFkZUlufSAwLjJzIGVhc2UtaW4tb3V0O1xuYFxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoU3RhY2spYFxuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxudHlwZSBBY3Rpb25CYXJQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICAvKipcbiAgICogVGhlIHBvc2l0aW9uIG9mIHRoZSBiYXIgKHN0YXJ0IGF0IDApXG4gICAqL1xuICByYW5rPzogbnVtYmVyXG4gIHJvbGU/OiBzdHJpbmdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbn1cblxuLyoqXG4gKiBUaGUgQWN0aW9uQmFyIGlzIGEgZmxvYXRpbmcgYmFyIHRoYXQgYXBwZWFycyBhdCB0aGUgYm90dG9tIG9mIGEgcGFnZS5cbiAqIEl0IGNhbiBiZSB1c2VkIHRvIGRpc3BsYXkgaW1wb3J0YW50IGFjdGlvbnMgb3IgaW5mb3JtYXRpb24gdG8gdGhlIHVzZXIsIGFuZCBjYW4gYmUgY29uZmlndXJlZCB0byBkaXNwbGF5IGEgdmFyaWV0eSBvZiBkaWZmZXJlbnQgY29udGVudCB0eXBlcy5cbiAqXG4gKiAqKk5vdGU6KiogQWN0aW9uQmFyIGlzIGFkZGVkIGludG8gYSBwb3J0YWwgYXQgdGhlIGVuZCBvZiB0aGUgYm9keSBlbGVtZW50LiBUaGlzIG1lYW5zIHRoYXQgaXQgd2lsbCBhbHdheXMgYmUgb24gdG9wIG9mIG90aGVyIGVsZW1lbnRzIHdpdGhvdXQgYHotaW5kZXhgLFxuICogYW5kIHdpbGwgbm90IGJlIGFmZmVjdGVkIGJ5IHRoZSBsYXlvdXQgb2YgdGhlIHBhZ2UgaXQgaXMgb24uXG4gKi9cbmV4cG9ydCBjb25zdCBBY3Rpb25CYXIgPSAoe1xuICBjaGlsZHJlbixcbiAgcm9sZSA9ICdkaWFsb2cnLFxuICByYW5rID0gMCxcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxufTogQWN0aW9uQmFyUHJvcHMpID0+XG4gIGNyZWF0ZVBvcnRhbChcbiAgICA8U3R5bGVkRGl2XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgcmFuaz17cmFua31cbiAgICAgIHJvbGU9e3JvbGV9XG4gICAgPlxuICAgICAgPENvbnRhaW5lciBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+e2NoaWxkcmVufTwvQ29udGFpbmVyPlxuICAgIDwvU3R5bGVkRGl2PixcbiAgICBkb2N1bWVudC5ib2R5LFxuICApXG4iXX0= */"));
-const Container = /* @__PURE__ */ _styled__default.default(index.Stack, process.env.NODE_ENV === "production" ? {
-  target: "enye6lh0"
-} : {
-  target: "enye6lh0",
-  label: "Container"
-})("height:100%;padding:0 ", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUIrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9BY3Rpb25CYXIvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCB7IGZhZGVJbiB9IGZyb20gJy4uLy4uL3V0aWxzJ1xuaW1wb3J0IHsgU3RhY2sgfSBmcm9tICcuLi9TdGFjaydcblxuY29uc3QgU3R5bGVkRGl2ID0gc3R5bGVkLmRpdjx7IHJhbms6IG51bWJlciB9PmBcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMub3RoZXIuZWxldmF0aW9uLmJhY2tncm91bmQuZml4ZWR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICBib3R0b206ICR7KHsgcmFuaywgdGhlbWUgfSkgPT4gYGNhbGMoJHt0aGVtZS5zaXppbmdbJzcwMCddfSAqICR7cmFua30gKyAke3RoZW1lLnNwYWNlWycyJ119KWB9O1xuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNoYWRvd3MuZml4ZWRbMF19LCAke3RoZW1lLnNoYWRvd3MuZml4ZWRbMV19YH07XG4gIGhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbJzcwMCddfTtcbiAgbGVmdDogNTAlO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIDApO1xuICB3aWR0aDogMzcuNXJlbTtcbiAgYW5pbWF0aW9uOiAke2ZhZGVJbn0gMC4ycyBlYXNlLWluLW91dDtcbmBcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKFN0YWNrKWBcbiAgaGVpZ2h0OiAxMDAlO1xuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5gXG5cbnR5cGUgQWN0aW9uQmFyUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgLyoqXG4gICAqIFRoZSBwb3NpdGlvbiBvZiB0aGUgYmFyIChzdGFydCBhdCAwKVxuICAgKi9cbiAgcmFuaz86IG51bWJlclxuICByb2xlPzogc3RyaW5nXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG59XG5cbi8qKlxuICogVGhlIEFjdGlvbkJhciBpcyBhIGZsb2F0aW5nIGJhciB0aGF0IGFwcGVhcnMgYXQgdGhlIGJvdHRvbSBvZiBhIHBhZ2UuXG4gKiBJdCBjYW4gYmUgdXNlZCB0byBkaXNwbGF5IGltcG9ydGFudCBhY3Rpb25zIG9yIGluZm9ybWF0aW9uIHRvIHRoZSB1c2VyLCBhbmQgY2FuIGJlIGNvbmZpZ3VyZWQgdG8gZGlzcGxheSBhIHZhcmlldHkgb2YgZGlmZmVyZW50IGNvbnRlbnQgdHlwZXMuXG4gKlxuICogKipOb3RlOioqIEFjdGlvbkJhciBpcyBhZGRlZCBpbnRvIGEgcG9ydGFsIGF0IHRoZSBlbmQgb2YgdGhlIGJvZHkgZWxlbWVudC4gVGhpcyBtZWFucyB0aGF0IGl0IHdpbGwgYWx3YXlzIGJlIG9uIHRvcCBvZiBvdGhlciBlbGVtZW50cyB3aXRob3V0IGB6LWluZGV4YCxcbiAqIGFuZCB3aWxsIG5vdCBiZSBhZmZlY3RlZCBieSB0aGUgbGF5b3V0IG9mIHRoZSBwYWdlIGl0IGlzIG9uLlxuICovXG5leHBvcnQgY29uc3QgQWN0aW9uQmFyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvbGUgPSAnZGlhbG9nJyxcbiAgcmFuayA9IDAsXG4gIGNsYXNzTmFtZSxcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbn06IEFjdGlvbkJhclByb3BzKSA9PlxuICBjcmVhdGVQb3J0YWwoXG4gICAgPFN0eWxlZERpdlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIHJhbms9e3Jhbmt9XG4gICAgICByb2xlPXtyb2xlfVxuICAgID5cbiAgICAgIDxDb250YWluZXIgYWxpZ25JdGVtcz1cImNlbnRlclwiPntjaGlsZHJlbn08L0NvbnRhaW5lcj5cbiAgICA8L1N0eWxlZERpdj4sXG4gICAgZG9jdW1lbnQuYm9keSxcbiAgKVxuIl19 */"));
+const styles_css = require("./styles.css.cjs");
 const ActionBar = ({
   children,
   role = "dialog",
   rank = 0,
   className,
   "data-testid": dataTestId
-}) => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(StyledDiv, { className, "data-testid": dataTestId, rank, role, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { alignItems: "center", children }) }), document.body);
+}) => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.actionBar}`, "data-testid": dataTestId, role, style: {
+  bottom: `calc(${themes.theme.sizing["700"]} * ${rank} + ${themes.theme.space["2"]})`
+}, children: /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { alignItems: "center", className: styles_css.stackActionBar, children }) }), document.body);
 exports.ActionBar = ActionBar;

package/dist/components/ActionBar/index.js

@@ -1,41 +1,18 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { theme } from "@ultraviolet/themes";
 import { createPortal } from "react-dom";
 import { Stack } from "../Stack/index.js";
-import { fadeIn } from "../../utils/animations.js";
-const StyledDiv = /* @__PURE__ */ _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "enye6lh1"
-} : {
-  target: "enye6lh1",
-  label: "StyledDiv"
-})("background:", ({
-  theme
-}) => theme.colors.other.elevation.background.fixed, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";bottom:", ({
-  rank,
-  theme
-}) => `calc(${theme.sizing["700"]} * ${rank} + ${theme.space["2"]})`, ";box-shadow:", ({
-  theme
-}) => `${theme.shadows.fixed[0]}, ${theme.shadows.fixed[1]}`, ";height:", ({
-  theme
-}) => theme.sizing["700"], ";left:50%;position:fixed;transform:translate(-50%, 0);width:37.5rem;animation:", fadeIn, " 0.2s ease-in-out;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBUThDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3JlYXRlUG9ydGFsIH0gZnJvbSAncmVhY3QtZG9tJ1xuaW1wb3J0IHsgZmFkZUluIH0gZnJvbSAnLi4vLi4vdXRpbHMnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuXG5jb25zdCBTdHlsZWREaXYgPSBzdHlsZWQuZGl2PHsgcmFuazogbnVtYmVyIH0+YFxuICBiYWNrZ3JvdW5kOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5vdGhlci5lbGV2YXRpb24uYmFja2dyb3VuZC5maXhlZH07XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIGJvdHRvbTogJHsoeyByYW5rLCB0aGVtZSB9KSA9PiBgY2FsYygke3RoZW1lLnNpemluZ1snNzAwJ119ICogJHtyYW5rfSArICR7dGhlbWUuc3BhY2VbJzInXX0pYH07XG4gIGJveC1zaGFkb3c6ICR7KHsgdGhlbWUgfSkgPT4gYCR7dGhlbWUuc2hhZG93cy5maXhlZFswXX0sICR7dGhlbWUuc2hhZG93cy5maXhlZFsxXX1gfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snNzAwJ119O1xuICBsZWZ0OiA1MCU7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwgMCk7XG4gIHdpZHRoOiAzNy41cmVtO1xuICBhbmltYXRpb246ICR7ZmFkZUlufSAwLjJzIGVhc2UtaW4tb3V0O1xuYFxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoU3RhY2spYFxuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcbmBcblxudHlwZSBBY3Rpb25CYXJQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxuICAvKipcbiAgICogVGhlIHBvc2l0aW9uIG9mIHRoZSBiYXIgKHN0YXJ0IGF0IDApXG4gICAqL1xuICByYW5rPzogbnVtYmVyXG4gIHJvbGU/OiBzdHJpbmdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbn1cblxuLyoqXG4gKiBUaGUgQWN0aW9uQmFyIGlzIGEgZmxvYXRpbmcgYmFyIHRoYXQgYXBwZWFycyBhdCB0aGUgYm90dG9tIG9mIGEgcGFnZS5cbiAqIEl0IGNhbiBiZSB1c2VkIHRvIGRpc3BsYXkgaW1wb3J0YW50IGFjdGlvbnMgb3IgaW5mb3JtYXRpb24gdG8gdGhlIHVzZXIsIGFuZCBjYW4gYmUgY29uZmlndXJlZCB0byBkaXNwbGF5IGEgdmFyaWV0eSBvZiBkaWZmZXJlbnQgY29udGVudCB0eXBlcy5cbiAqXG4gKiAqKk5vdGU6KiogQWN0aW9uQmFyIGlzIGFkZGVkIGludG8gYSBwb3J0YWwgYXQgdGhlIGVuZCBvZiB0aGUgYm9keSBlbGVtZW50LiBUaGlzIG1lYW5zIHRoYXQgaXQgd2lsbCBhbHdheXMgYmUgb24gdG9wIG9mIG90aGVyIGVsZW1lbnRzIHdpdGhvdXQgYHotaW5kZXhgLFxuICogYW5kIHdpbGwgbm90IGJlIGFmZmVjdGVkIGJ5IHRoZSBsYXlvdXQgb2YgdGhlIHBhZ2UgaXQgaXMgb24uXG4gKi9cbmV4cG9ydCBjb25zdCBBY3Rpb25CYXIgPSAoe1xuICBjaGlsZHJlbixcbiAgcm9sZSA9ICdkaWFsb2cnLFxuICByYW5rID0gMCxcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxufTogQWN0aW9uQmFyUHJvcHMpID0+XG4gIGNyZWF0ZVBvcnRhbChcbiAgICA8U3R5bGVkRGl2XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgcmFuaz17cmFua31cbiAgICAgIHJvbGU9e3JvbGV9XG4gICAgPlxuICAgICAgPENvbnRhaW5lciBhbGlnbkl0ZW1zPVwiY2VudGVyXCI+e2NoaWxkcmVufTwvQ29udGFpbmVyPlxuICAgIDwvU3R5bGVkRGl2PixcbiAgICBkb2N1bWVudC5ib2R5LFxuICApXG4iXX0= */"));
-const Container = /* @__PURE__ */ _styled(Stack, process.env.NODE_ENV === "production" ? {
-  target: "enye6lh0"
-} : {
-  target: "enye6lh0",
-  label: "Container"
-})("height:100%;padding:0 ", ({
-  theme
-}) => theme.space["2"], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0FjdGlvbkJhci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUIrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy91aS9zcmMvY29tcG9uZW50cy9BY3Rpb25CYXIvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gJ3JlYWN0LWRvbSdcbmltcG9ydCB7IGZhZGVJbiB9IGZyb20gJy4uLy4uL3V0aWxzJ1xuaW1wb3J0IHsgU3RhY2sgfSBmcm9tICcuLi9TdGFjaydcblxuY29uc3QgU3R5bGVkRGl2ID0gc3R5bGVkLmRpdjx7IHJhbms6IG51bWJlciB9PmBcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMub3RoZXIuZWxldmF0aW9uLmJhY2tncm91bmQuZml4ZWR9O1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpLmRlZmF1bHR9O1xuICBib3R0b206ICR7KHsgcmFuaywgdGhlbWUgfSkgPT4gYGNhbGMoJHt0aGVtZS5zaXppbmdbJzcwMCddfSAqICR7cmFua30gKyAke3RoZW1lLnNwYWNlWycyJ119KWB9O1xuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNoYWRvd3MuZml4ZWRbMF19LCAke3RoZW1lLnNoYWRvd3MuZml4ZWRbMV19YH07XG4gIGhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbJzcwMCddfTtcbiAgbGVmdDogNTAlO1xuICBwb3NpdGlvbjogZml4ZWQ7XG4gIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIDApO1xuICB3aWR0aDogMzcuNXJlbTtcbiAgYW5pbWF0aW9uOiAke2ZhZGVJbn0gMC4ycyBlYXNlLWluLW91dDtcbmBcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkKFN0YWNrKWBcbiAgaGVpZ2h0OiAxMDAlO1xuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5gXG5cbnR5cGUgQWN0aW9uQmFyUHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgLyoqXG4gICAqIFRoZSBwb3NpdGlvbiBvZiB0aGUgYmFyIChzdGFydCBhdCAwKVxuICAgKi9cbiAgcmFuaz86IG51bWJlclxuICByb2xlPzogc3RyaW5nXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG59XG5cbi8qKlxuICogVGhlIEFjdGlvbkJhciBpcyBhIGZsb2F0aW5nIGJhciB0aGF0IGFwcGVhcnMgYXQgdGhlIGJvdHRvbSBvZiBhIHBhZ2UuXG4gKiBJdCBjYW4gYmUgdXNlZCB0byBkaXNwbGF5IGltcG9ydGFudCBhY3Rpb25zIG9yIGluZm9ybWF0aW9uIHRvIHRoZSB1c2VyLCBhbmQgY2FuIGJlIGNvbmZpZ3VyZWQgdG8gZGlzcGxheSBhIHZhcmlldHkgb2YgZGlmZmVyZW50IGNvbnRlbnQgdHlwZXMuXG4gKlxuICogKipOb3RlOioqIEFjdGlvbkJhciBpcyBhZGRlZCBpbnRvIGEgcG9ydGFsIGF0IHRoZSBlbmQgb2YgdGhlIGJvZHkgZWxlbWVudC4gVGhpcyBtZWFucyB0aGF0IGl0IHdpbGwgYWx3YXlzIGJlIG9uIHRvcCBvZiBvdGhlciBlbGVtZW50cyB3aXRob3V0IGB6LWluZGV4YCxcbiAqIGFuZCB3aWxsIG5vdCBiZSBhZmZlY3RlZCBieSB0aGUgbGF5b3V0IG9mIHRoZSBwYWdlIGl0IGlzIG9uLlxuICovXG5leHBvcnQgY29uc3QgQWN0aW9uQmFyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvbGUgPSAnZGlhbG9nJyxcbiAgcmFuayA9IDAsXG4gIGNsYXNzTmFtZSxcbiAgJ2RhdGEtdGVzdGlkJzogZGF0YVRlc3RJZCxcbn06IEFjdGlvbkJhclByb3BzKSA9PlxuICBjcmVhdGVQb3J0YWwoXG4gICAgPFN0eWxlZERpdlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIHJhbms9e3Jhbmt9XG4gICAgICByb2xlPXtyb2xlfVxuICAgID5cbiAgICAgIDxDb250YWluZXIgYWxpZ25JdGVtcz1cImNlbnRlclwiPntjaGlsZHJlbn08L0NvbnRhaW5lcj5cbiAgICA8L1N0eWxlZERpdj4sXG4gICAgZG9jdW1lbnQuYm9keSxcbiAgKVxuIl19 */"));
+import { actionBar, stackActionBar } from "./styles.css.js";
 const ActionBar = ({
   children,
   role = "dialog",
   rank = 0,
   className,
   "data-testid": dataTestId
-}) => createPortal(/* @__PURE__ */ jsx(StyledDiv, { className, "data-testid": dataTestId, rank, role, children: /* @__PURE__ */ jsx(Container, { alignItems: "center", children }) }), document.body);
+}) => createPortal(/* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${actionBar}`, "data-testid": dataTestId, role, style: {
+  bottom: `calc(${theme.sizing["700"]} * ${rank} + ${theme.space["2"]})`
+}, children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: stackActionBar, children }) }), document.body);
 export {
   ActionBar
 };

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                                       */
+;/* empty css                            */
+var stackActionBar = "uv_1p607tg0";
+var actionBar = "uv_1p607tg1";
+exports.actionBar = actionBar;
+exports.stackActionBar = stackActionBar;

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

@@ -0,0 +1,2 @@
+export declare const stackActionBar: string;
+export declare const actionBar: string;

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

@@ -0,0 +1,8 @@
+/* empty css                                                     */
+/* empty css                          */
+var stackActionBar = "uv_1p607tg0";
+var actionBar = "uv_1p607tg1";
+export {
+  actionBar,
+  stackActionBar
+};

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
+};

package/dist/components/Button/index.cjs

@@ -71,7 +71,7 @@ const Button = react.forwardRef(({
       variant
     })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, tabIndex, target, type, children: content }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ?? ""} ${styles_css.button({
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${styles_css.button({
     disabled,
     fullWidth,
     sentiment,

package/dist/components/Button/index.js

@@ -69,7 +69,7 @@ const Button = forwardRef(({
       variant
     })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, tabIndex, target, type, children: content }) });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ?? ""} ${button({
+  return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${button({
     disabled,
     fullWidth,
     sentiment,

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

@@ -2,15 +2,15 @@ import type { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
         large: {
+            height: `var(--${string})`;
+            paddingLeft: `var(--${string})`;
+            paddingRight: `var(--${string})`;
+            gap: `var(--${string})`;
             fontSize: `var(--${string})`;
             fontFamily: `var(--${string})`;
             fontWeight: `var(--${string})`;
             letterSpacing: `var(--${string})`;
             lineHeight: `var(--${string})`;
-            height: `var(--${string})`;
-            paddingLeft: `var(--${string})`;
-            paddingRight: `var(--${string})`;
-            gap: `var(--${string})`;
         };
         medium: {
             fontSize: `var(--${string})`;

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

@@ -14,7 +14,7 @@ type ChipType = {
 export declare const Chip: {
     ({ children, size, disabled, active, className, "data-testid": dataTestId, onClick, }: ChipType): import("@emotion/react/jsx-runtime").JSX.Element;
     Icon: ({ name, onClick, "data-testid": dataTestId, }: {
-        name: "search" | "anchor" | "bold" | "sort" | "filter" | "address" | "stop" | "view" | "id" | "arrowLeft" | "cancel" | "close" | "drag" | "play" | "underline" | "italic" | "download" | "upload" | "email" | "addressOutline" | "addressPlay" | "adjustmentsHorizontal" | "adjustmentsHorizontalOutline" | "alertCircle" | "alertCircleOutline" | "arrowDown" | "arrowLeftBottom" | "arrowLeftDouble" | "arrowRightBottom" | "arrowRightDouble" | "arrowRight" | "arrowUp" | "attach" | "autoFix" | "autoFixOutline" | "bookOpenOutline" | "bookOpenOutlineOutline" | "boxEssentials" | "boxEssentialsOutline" | "bullhorn" | "bullhornOutline" | "burger" | "calculator" | "calculatorOutline" | "calendarRange" | "calendarRangeOutline" | "chat" | "chatOutline" | "checkCircle" | "checkCircleOutline" | "check" | "clickhouse" | "lockOutline" | "clockOutline" | "clockOutlineOutline" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "dotsHorizontal" | "dotsVertical" | "earth" | "earthOutline" | "east" | "eastShort" | "emailOutline" | "emailRemove" | "emailRemoveOutline" | "equal" | "escape" | "expand" | "expandMore" | "eye" | "eyeOff" | "eyeOffOutline" | "eyeOutline" | "filterOutline" | "folder" | "folderOutline" | "github" | "helpCircle" | "helpCircleOutline" | "idOutline" | "information" | "informationOutline" | "instagram" | "leaf" | "leafOutline" | "leftRightArrow" | "lightBulb" | "lightBulbOutline" | "linkedin" | "listBullet" | "listNumber" | "lock" | "logout" | "members" | "membersOutline" | "minus" | "moon" | "moonOutline" | "mosaic" | "mosaicOutline" | "north" | "northShort" | "notification" | "notificationOutline" | "openInNew" | "organization" | "partnerSpace" | "pen2" | "pen2Outline" | "pencil" | "pencilOutline" | "pen" | "penOutline" | "phone" | "phoneOutline" | "pin" | "pinOutline" | "playOutline" | "plus" | "privacy" | "privacyOutline" | "profile" | "profileOutline" | "progressCheck" | "rayEndArrow" | "rayStartArrow" | "rayStartEnd" | "rayTopArrow" | "reboot" | "restore" | "revoke" | "rocket" | "rocketOutline" | "rss" | "send" | "sendOutline" | "settings" | "settingsOutline" | "sidebar" | "sidebarOutline" | "slack" | "south" | "southShort" | "sparkles" | "sparklesOutline" | "star" | "starOutline" | "stopOutline" | "sun" | "sunOutline" | "support" | "supportOutline" | "switchOrga" | "thumbsDown" | "thumbsDownOutline" | "thumbsUp" | "thumbsUpOutline" | "twitter" | "unlock" | "unlockOutline" | "unpin" | "unpinOutline" | "weatherNight" | "weatherNightOutline" | "west" | "westShort" | "youtube";
+        name: "search" | "anchor" | "bold" | "sort" | "filter" | "address" | "stop" | "view" | "id" | "italic" | "underline" | "drag" | "arrowLeft" | "cancel" | "close" | "play" | "download" | "upload" | "email" | "addressOutline" | "addressPlay" | "adjustmentsHorizontal" | "adjustmentsHorizontalOutline" | "alertCircle" | "alertCircleOutline" | "arrowDown" | "arrowLeftBottom" | "arrowLeftDouble" | "arrowRightBottom" | "arrowRightDouble" | "arrowRight" | "arrowUp" | "attach" | "autoFix" | "autoFixOutline" | "bookOpenOutline" | "bookOpenOutlineOutline" | "boxEssentials" | "boxEssentialsOutline" | "bullhorn" | "bullhornOutline" | "burger" | "calculator" | "calculatorOutline" | "calendarRange" | "calendarRangeOutline" | "chat" | "chatOutline" | "checkCircle" | "checkCircleOutline" | "check" | "clickhouse" | "lockOutline" | "clockOutline" | "clockOutlineOutline" | "closeCircleOutline" | "console" | "consoleOutline" | "copyContent" | "credential" | "credentialOutline" | "creditCard" | "creditCardOutline" | "database" | "databaseOutline" | "delete" | "deleteOutline" | "detach" | "doc" | "docOutline" | "dotsHorizontal" | "dotsVertical" | "earth" | "earthOutline" | "east" | "eastShort" | "emailOutline" | "emailRemove" | "emailRemoveOutline" | "equal" | "escape" | "expand" | "expandMore" | "eye" | "eyeOff" | "eyeOffOutline" | "eyeOutline" | "filterOutline" | "folder" | "folderOutline" | "github" | "helpCircle" | "helpCircleOutline" | "idOutline" | "information" | "informationOutline" | "instagram" | "leaf" | "leafOutline" | "leftRightArrow" | "lightBulb" | "lightBulbOutline" | "linkedin" | "listBullet" | "listNumber" | "lock" | "logout" | "members" | "membersOutline" | "minus" | "moon" | "moonOutline" | "mosaic" | "mosaicOutline" | "north" | "northShort" | "notification" | "notificationOutline" | "openInNew" | "organization" | "partnerSpace" | "pen2" | "pen2Outline" | "pencil" | "pencilOutline" | "pen" | "penOutline" | "phone" | "phoneOutline" | "pin" | "pinOutline" | "playOutline" | "plus" | "privacy" | "privacyOutline" | "profile" | "profileOutline" | "progressCheck" | "rayEndArrow" | "rayStartArrow" | "rayStartEnd" | "rayTopArrow" | "reboot" | "restore" | "revoke" | "rocket" | "rocketOutline" | "rss" | "send" | "sendOutline" | "settings" | "settingsOutline" | "sidebar" | "sidebarOutline" | "slack" | "south" | "southShort" | "sparkles" | "sparklesOutline" | "star" | "starOutline" | "stopOutline" | "sun" | "sunOutline" | "support" | "supportOutline" | "switchOrga" | "thumbsDown" | "thumbsDownOutline" | "thumbsUp" | "thumbsUpOutline" | "twitter" | "unlock" | "unlockOutline" | "unpin" | "unpinOutline" | "weatherNight" | "weatherNightOutline" | "west" | "westShort" | "youtube";
         onClick?: () => void;
         'data-testid'?: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;