@ultraviolet/icons 4.0.4 → 4.1.0-beta.3

package/dist/components/CategoryIcon/Icon.cjs

@@ -2,28 +2,14 @@
 "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 StyledIcon = /* @__PURE__ */ _styled__default.default("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "eqf5g0p0"
-} : {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "eqf5g0p0",
-  label: "StyledIcon"
-})(".fill{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => theme.colors.other.icon.category[variant][disabled ? "fillDisabled" : "fill"], ";}.fillStrong{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => theme.colors.other.icon.category[variant][disabled ? "fillStrongDisabled" : "fillStrong"], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0NhdGVnb3J5SWNvbi9JY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEQiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvaWNvbnMvc3JjL2NvbXBvbmVudHMvQ2F0ZWdvcnlJY29uL0ljb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcblxuY29uc3QgU3R5bGVkSWNvbiA9IHN0eWxlZCgnc3ZnJywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PiAhWyd2YXJpYW50JywgJ2Rpc2FibGVkJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IHZhcmlhbnQ6ICduZXV0cmFsJyB8ICdwcmltYXJ5JzsgZGlzYWJsZWQ/OiBib29sZWFuIH0+YFxuICAuZmlsbCB7XG4gICAgZmlsbDogJHsoeyB0aGVtZSwgdmFyaWFudCwgZGlzYWJsZWQgfSkgPT5cbiAgICAgIHRoZW1lLmNvbG9ycy5vdGhlci5pY29uLmNhdGVnb3J5W3ZhcmlhbnRdW1xuICAgICAgICBkaXNhYmxlZCA/ICdmaWxsRGlzYWJsZWQnIDogJ2ZpbGwnXG4gICAgICBdfTtcbiAgfVxuXG4gIC5maWxsU3Ryb25nIHtcbiAgICBmaWxsOiAkeyh7IHRoZW1lLCB2YXJpYW50LCBkaXNhYmxlZCB9KSA9PlxuICAgICAgdGhlbWUuY29sb3JzLm90aGVyLmljb24uY2F0ZWdvcnlbdmFyaWFudF1bXG4gICAgICAgIGRpc2FibGVkID8gJ2ZpbGxTdHJvbmdEaXNhYmxlZCcgOiAnZmlsbFN0cm9uZydcbiAgICAgIF19O1xuICB9XG5gXG5cbmV4cG9ydCB0eXBlIEljb25Qcm9wcyA9IHtcbiAgdmFyaWFudD86ICdwcmltYXJ5JyB8ICduZXV0cmFsJ1xuICBkaXNhYmxlZD86IGJvb2xlYW5cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG4vKipcbiAqIENhdGVnb3J5SWNvbiBjb21wb25lbnQgaXMgdXNlZCB0byByZW5kZXIgY2F0ZWdvcnkgaWNvbnMsIHRob3NlIGljb25zIGFyZSBtb3JlIGNvbXBsZXggdGhhbiBzeXN0ZW0gaWNvbnNcbiAqIGFzIHRoZXkgaW52b2x2ZSBtdWx0aXBsZSBjb2xvcnMgdGhhdCBjaGFuZ2VzIGRlcGVuZGluZyBvbiB0aGVtZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEljb24gPSAoe1xuICB2YXJpYW50ID0gJ3ByaW1hcnknLFxuICBkaXNhYmxlZCxcbiAgY2hpbGRyZW4sXG59OiBJY29uUHJvcHMpID0+IChcbiAgPFN0eWxlZEljb25cbiAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgaGVpZ2h0PVwiMjBcIlxuICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgdmlld0JveD1cIjAgMCAyMCAyMFwiXG4gICAgd2lkdGg9XCIyMFwiXG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkSWNvbj5cbilcbiJdfQ== */"));
+const style_css = require("./style.css.cjs");
 const Icon = ({
   variant = "primary",
   disabled,
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { disabled, height: "20", variant, viewBox: "0 0 20 20", width: "20", children });
+  children,
+  className
+}) => {
+  const computedVariant = `${variant}${disabled ? "Disabled" : ""}`;
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: `${className ? `${className} ` : ""}${style_css.categoryIcon[computedVariant]}`, height: "20", viewBox: "0 0 20 20", width: "20", children });
+};
 exports.Icon = Icon;

package/dist/components/CategoryIcon/Icon.d.ts

@@ -1,11 +1,13 @@
 import type { ReactNode } from 'react';
+import type { VARIANTS } from './style.css';
 export type IconProps = {
-    variant?: 'primary' | 'neutral';
+    variant?: (typeof VARIANTS)[number];
     disabled?: boolean;
     children: ReactNode;
+    className?: string;
 };
 /**
  * CategoryIcon component is used to render category icons, those icons are more complex than system icons
  * as they involve multiple colors that changes depending on theme.
  */
-export declare const Icon: ({ variant, disabled, children, }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ variant, disabled, children, className, }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CategoryIcon/Icon.js

@@ -1,27 +1,15 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const StyledIcon = /* @__PURE__ */ _styled("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "eqf5g0p0"
-} : {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "eqf5g0p0",
-  label: "StyledIcon"
-})(".fill{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => theme.colors.other.icon.category[variant][disabled ? "fillDisabled" : "fill"], ";}.fillStrong{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => theme.colors.other.icon.category[variant][disabled ? "fillStrongDisabled" : "fillStrong"], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0NhdGVnb3J5SWNvbi9JY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMEQiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvaWNvbnMvc3JjL2NvbXBvbmVudHMvQ2F0ZWdvcnlJY29uL0ljb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcblxuY29uc3QgU3R5bGVkSWNvbiA9IHN0eWxlZCgnc3ZnJywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PiAhWyd2YXJpYW50JywgJ2Rpc2FibGVkJ10uaW5jbHVkZXMocHJvcCksXG59KTx7IHZhcmlhbnQ6ICduZXV0cmFsJyB8ICdwcmltYXJ5JzsgZGlzYWJsZWQ/OiBib29sZWFuIH0+YFxuICAuZmlsbCB7XG4gICAgZmlsbDogJHsoeyB0aGVtZSwgdmFyaWFudCwgZGlzYWJsZWQgfSkgPT5cbiAgICAgIHRoZW1lLmNvbG9ycy5vdGhlci5pY29uLmNhdGVnb3J5W3ZhcmlhbnRdW1xuICAgICAgICBkaXNhYmxlZCA/ICdmaWxsRGlzYWJsZWQnIDogJ2ZpbGwnXG4gICAgICBdfTtcbiAgfVxuXG4gIC5maWxsU3Ryb25nIHtcbiAgICBmaWxsOiAkeyh7IHRoZW1lLCB2YXJpYW50LCBkaXNhYmxlZCB9KSA9PlxuICAgICAgdGhlbWUuY29sb3JzLm90aGVyLmljb24uY2F0ZWdvcnlbdmFyaWFudF1bXG4gICAgICAgIGRpc2FibGVkID8gJ2ZpbGxTdHJvbmdEaXNhYmxlZCcgOiAnZmlsbFN0cm9uZydcbiAgICAgIF19O1xuICB9XG5gXG5cbmV4cG9ydCB0eXBlIEljb25Qcm9wcyA9IHtcbiAgdmFyaWFudD86ICdwcmltYXJ5JyB8ICduZXV0cmFsJ1xuICBkaXNhYmxlZD86IGJvb2xlYW5cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZVxufVxuXG4vKipcbiAqIENhdGVnb3J5SWNvbiBjb21wb25lbnQgaXMgdXNlZCB0byByZW5kZXIgY2F0ZWdvcnkgaWNvbnMsIHRob3NlIGljb25zIGFyZSBtb3JlIGNvbXBsZXggdGhhbiBzeXN0ZW0gaWNvbnNcbiAqIGFzIHRoZXkgaW52b2x2ZSBtdWx0aXBsZSBjb2xvcnMgdGhhdCBjaGFuZ2VzIGRlcGVuZGluZyBvbiB0aGVtZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEljb24gPSAoe1xuICB2YXJpYW50ID0gJ3ByaW1hcnknLFxuICBkaXNhYmxlZCxcbiAgY2hpbGRyZW4sXG59OiBJY29uUHJvcHMpID0+IChcbiAgPFN0eWxlZEljb25cbiAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgaGVpZ2h0PVwiMjBcIlxuICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgdmlld0JveD1cIjAgMCAyMCAyMFwiXG4gICAgd2lkdGg9XCIyMFwiXG4gID5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkSWNvbj5cbilcbiJdfQ== */"));
+import { categoryIcon } from "./style.css.js";
 const Icon = ({
   variant = "primary",
   disabled,
-  children
-}) => /* @__PURE__ */ jsx(StyledIcon, { disabled, height: "20", variant, viewBox: "0 0 20 20", width: "20", children });
+  children,
+  className
+}) => {
+  const computedVariant = `${variant}${disabled ? "Disabled" : ""}`;
+  return /* @__PURE__ */ jsx("svg", { className: `${className ? `${className} ` : ""}${categoryIcon[computedVariant]}`, height: "20", viewBox: "0 0 20 20", width: "20", children });
+};
 export {
   Icon
 };

package/dist/components/CategoryIcon/__generated__/UseCasesCategoryIcon.cjs

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Icon = require("../Icon.cjs");
+const UseCasesCategoryIcon = ({
+  ...props
+}) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  /* @__PURE__ */ jsxRuntime.jsxs(Icon.Icon, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { className: "fillStrong", d: "M14 14C15.1046 14 16 14.8954 16 16C16 17.1046 15.1046 18 14 18C12.8954 18 12 17.1046 12 16C12 14.8954 12.8954 14 14 14Z", fill: "#A060F6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { className: "fillStrong", d: "M14 8C15.1046 8 16 8.89543 16 10C16 11.1046 15.1046 12 14 12C12.8954 12 12 11.1046 12 10C12 8.89543 12.8954 8 14 8Z", fill: "#A060F6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { className: "fillStrong", d: "M14 2C15.1046 2 16 2.89543 16 4C16 5.10457 15.1046 6 14 6C12.8954 6 12 5.10457 12 4C12 2.89543 12.8954 2 14 2Z", fill: "#A060F6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { className: "fill", d: "M11.1738 3C11.0631 3.31306 11 3.649 11 4C11 4.351 11.0631 4.68694 11.1738 5H8.5C7.94772 5 7.5 5.44772 7.5 6V9H11.1738C11.0631 9.31306 11 9.649 11 10C11 10.351 11.0631 10.6869 11.1738 11H7.5V14C7.5 14.5523 7.94772 15 8.5 15H11.1738C11.0631 15.3131 11 15.649 11 16C11 16.351 11.0631 16.6869 11.1738 17H8.5C6.84315 17 5.5 15.6569 5.5 14V11H3.5C2.94772 11 2.5 10.5523 2.5 10C2.5 9.44772 2.94772 9 3.5 9H5.5V6C5.5 4.34315 6.84315 3 8.5 3H11.1738Z", fill: "#521094" })
+  ] })
+);
+exports.UseCasesCategoryIcon = UseCasesCategoryIcon;

package/dist/components/CategoryIcon/__generated__/UseCasesCategoryIcon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from '../Icon';
+export declare const UseCasesCategoryIcon: ({ ...props }: Omit<IconProps, "children">) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/CategoryIcon/__generated__/UseCasesCategoryIcon.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Icon } from "../Icon.js";
+const UseCasesCategoryIcon = ({
+  ...props
+}) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  /* @__PURE__ */ jsxs(Icon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { className: "fillStrong", d: "M14 14C15.1046 14 16 14.8954 16 16C16 17.1046 15.1046 18 14 18C12.8954 18 12 17.1046 12 16C12 14.8954 12.8954 14 14 14Z", fill: "#A060F6" }),
+    /* @__PURE__ */ jsx("path", { className: "fillStrong", d: "M14 8C15.1046 8 16 8.89543 16 10C16 11.1046 15.1046 12 14 12C12.8954 12 12 11.1046 12 10C12 8.89543 12.8954 8 14 8Z", fill: "#A060F6" }),
+    /* @__PURE__ */ jsx("path", { className: "fillStrong", d: "M14 2C15.1046 2 16 2.89543 16 4C16 5.10457 15.1046 6 14 6C12.8954 6 12 5.10457 12 4C12 2.89543 12.8954 2 14 2Z", fill: "#A060F6" }),
+    /* @__PURE__ */ jsx("path", { className: "fill", d: "M11.1738 3C11.0631 3.31306 11 3.649 11 4C11 4.351 11.0631 4.68694 11.1738 5H8.5C7.94772 5 7.5 5.44772 7.5 6V9H11.1738C11.0631 9.31306 11 9.649 11 10C11 10.351 11.0631 10.6869 11.1738 11H7.5V14C7.5 14.5523 7.94772 15 8.5 15H11.1738C11.0631 15.3131 11 15.649 11 16C11 16.351 11.0631 16.6869 11.1738 17H8.5C6.84315 17 5.5 15.6569 5.5 14V11H3.5C2.94772 11 2.5 10.5523 2.5 10C2.5 9.44772 2.94772 9 3.5 9H5.5V6C5.5 4.34315 6.84315 3 8.5 3H11.1738Z", fill: "#521094" })
+  ] })
+);
+export {
+  UseCasesCategoryIcon
+};

package/dist/components/CategoryIcon/__generated__/index.d.ts

@@ -36,6 +36,7 @@ export { SecurityCategoryIcon } from './SecurityCategoryIcon';
 export { ServerlessComputeCategoryIcon } from './ServerlessComputeCategoryIcon';
 export { StorageCategoryIcon } from './StorageCategoryIcon';
 export { UseCaseCategoryIcon } from './UseCaseCategoryIcon';
+export { UseCasesCategoryIcon } from './UseCasesCategoryIcon';
 export { VpcCategoryIcon } from './VpcCategoryIcon';
 export { WebHostingCategoryIcon } from './WebHostingCategoryIcon';
-export type CategoryIconNames = 'AiCategoryIcon' | 'BaremetalCategoryIcon' | 'BillingCategoryIcon' | 'BusinessDetailsCategoryIcon' | 'ComputeCategoryIcon' | 'ContainersCategoryIcon' | 'CostAndImpactManagementCategoryIcon' | 'DataAndAnalyticsCategoryIcon' | 'DatabaseCategoryIcon' | 'DatacenterCategoryIcon' | 'DedicatedServerCategoryIcon' | 'DevToolsCategoryIcon' | 'DocumentationCategoryIcon' | 'DomainsAndWebHostingCategoryIcon' | 'IntegrationServicesCategoryIcon' | 'InteractiveDemosCategoryIcon' | 'KeyManagerCategoryIcon' | 'LabsCategoryIcon' | 'ManagementAndGovernanceCategoryIcon' | 'MonitoringCategoryIcon' | 'NetworkCategoryIcon' | 'OrganizationDashboardCategoryIcon' | 'OrganizationNotificationsCategoryIcon' | 'OrganizationCategoryIcon' | 'PartnersCategoryIcon' | 'PinCategoryIcon' | 'PrivacyCategoryIcon' | 'ProfileNotificationsCategoryIcon' | 'ProfileCategoryIcon' | 'SecurityCategoryIcon' | 'ServerlessComputeCategoryIcon' | 'StorageCategoryIcon' | 'UseCaseCategoryIcon' | 'VpcCategoryIcon' | 'WebHostingCategoryIcon';
+export type CategoryIconNames = 'AiCategoryIcon' | 'BaremetalCategoryIcon' | 'BillingCategoryIcon' | 'BusinessDetailsCategoryIcon' | 'ComputeCategoryIcon' | 'ContainersCategoryIcon' | 'CostAndImpactManagementCategoryIcon' | 'DataAndAnalyticsCategoryIcon' | 'DatabaseCategoryIcon' | 'DatacenterCategoryIcon' | 'DedicatedServerCategoryIcon' | 'DevToolsCategoryIcon' | 'DocumentationCategoryIcon' | 'DomainsAndWebHostingCategoryIcon' | 'IntegrationServicesCategoryIcon' | 'InteractiveDemosCategoryIcon' | 'KeyManagerCategoryIcon' | 'LabsCategoryIcon' | 'ManagementAndGovernanceCategoryIcon' | 'MonitoringCategoryIcon' | 'NetworkCategoryIcon' | 'OrganizationDashboardCategoryIcon' | 'OrganizationNotificationsCategoryIcon' | 'OrganizationCategoryIcon' | 'PartnersCategoryIcon' | 'PinCategoryIcon' | 'PrivacyCategoryIcon' | 'ProfileNotificationsCategoryIcon' | 'ProfileCategoryIcon' | 'SecurityCategoryIcon' | 'ServerlessComputeCategoryIcon' | 'StorageCategoryIcon' | 'UseCaseCategoryIcon' | 'UseCasesCategoryIcon' | 'VpcCategoryIcon' | 'WebHostingCategoryIcon';

package/dist/components/CategoryIcon/index.cjs

@@ -33,6 +33,7 @@ const SecurityCategoryIcon = require("./__generated__/SecurityCategoryIcon.cjs")
 const ServerlessComputeCategoryIcon = require("./__generated__/ServerlessComputeCategoryIcon.cjs");
 const StorageCategoryIcon = require("./__generated__/StorageCategoryIcon.cjs");
 const UseCaseCategoryIcon = require("./__generated__/UseCaseCategoryIcon.cjs");
+const UseCasesCategoryIcon = require("./__generated__/UseCasesCategoryIcon.cjs");
 const VpcCategoryIcon = require("./__generated__/VpcCategoryIcon.cjs");
 const WebHostingCategoryIcon = require("./__generated__/WebHostingCategoryIcon.cjs");
 exports.AiCategoryIcon = AiCategoryIcon.AiCategoryIcon;
@@ -68,5 +69,6 @@ exports.SecurityCategoryIcon = SecurityCategoryIcon.SecurityCategoryIcon;
 exports.ServerlessComputeCategoryIcon = ServerlessComputeCategoryIcon.ServerlessComputeCategoryIcon;
 exports.StorageCategoryIcon = StorageCategoryIcon.StorageCategoryIcon;
 exports.UseCaseCategoryIcon = UseCaseCategoryIcon.UseCaseCategoryIcon;
+exports.UseCasesCategoryIcon = UseCasesCategoryIcon.UseCasesCategoryIcon;
 exports.VpcCategoryIcon = VpcCategoryIcon.VpcCategoryIcon;
 exports.WebHostingCategoryIcon = WebHostingCategoryIcon.WebHostingCategoryIcon;

package/dist/components/CategoryIcon/index.js

@@ -31,6 +31,7 @@ import { SecurityCategoryIcon } from "./__generated__/SecurityCategoryIcon.js";
 import { ServerlessComputeCategoryIcon } from "./__generated__/ServerlessComputeCategoryIcon.js";
 import { StorageCategoryIcon } from "./__generated__/StorageCategoryIcon.js";
 import { UseCaseCategoryIcon } from "./__generated__/UseCaseCategoryIcon.js";
+import { UseCasesCategoryIcon } from "./__generated__/UseCasesCategoryIcon.js";
 import { VpcCategoryIcon } from "./__generated__/VpcCategoryIcon.js";
 import { WebHostingCategoryIcon } from "./__generated__/WebHostingCategoryIcon.js";
 export {
@@ -67,6 +68,7 @@ export {
   ServerlessComputeCategoryIcon,
   StorageCategoryIcon,
   UseCaseCategoryIcon,
+  UseCasesCategoryIcon,
   VpcCategoryIcon,
   WebHostingCategoryIcon
 };

package/dist/components/CategoryIcon/style.css.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const themes = require("@ultraviolet/themes");
+fileScope.setFileScope("src/components/CategoryIcon/style.css.ts", "@ultraviolet/icons");
+const VARIANTS = ["primary", "neutral"];
+const FILL_CLASSES = ["fill", "fillStrong"];
+const categoryIcon = css.styleVariants({
+  primaryDisabled: {},
+  primary: {},
+  neutralDisabled: {},
+  neutral: {}
+});
+const color = themes.theme.colors.other.icon.category;
+VARIANTS.forEach((variant) => {
+  FILL_CLASSES.forEach((fillClass) => {
+    css.globalStyle(`${categoryIcon[variant]} .${fillClass}`, {
+      fill: color[variant][fillClass]
+    });
+    css.globalStyle(`${categoryIcon[`${variant}Disabled`]} .${fillClass}`, {
+      fill: color[variant][`${fillClass}Disabled`]
+    });
+  });
+});
+fileScope.endFileScope();
+exports.VARIANTS = VARIANTS;
+exports.categoryIcon = categoryIcon;

package/dist/components/CategoryIcon/style.css.d.ts

@@ -0,0 +1,2 @@
+export declare const VARIANTS: readonly ["primary", "neutral"];
+export declare const categoryIcon: Record<"primary" | "neutral" | "primaryDisabled" | "neutralDisabled", string>;

package/dist/components/CategoryIcon/style.css.js

@@ -0,0 +1,28 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { styleVariants, globalStyle } from "@vanilla-extract/css";
+import { theme } from "@ultraviolet/themes";
+setFileScope("src/components/CategoryIcon/style.css.ts", "@ultraviolet/icons");
+const VARIANTS = ["primary", "neutral"];
+const FILL_CLASSES = ["fill", "fillStrong"];
+const categoryIcon = styleVariants({
+  primaryDisabled: {},
+  primary: {},
+  neutralDisabled: {},
+  neutral: {}
+});
+const color = theme.colors.other.icon.category;
+VARIANTS.forEach((variant) => {
+  FILL_CLASSES.forEach((fillClass) => {
+    globalStyle(`${categoryIcon[variant]} .${fillClass}`, {
+      fill: color[variant][fillClass]
+    });
+    globalStyle(`${categoryIcon[`${variant}Disabled`]} .${fillClass}`, {
+      fill: color[variant][`${fillClass}Disabled`]
+    });
+  });
+});
+endFileScope();
+export {
+  VARIANTS,
+  categoryIcon
+};

package/dist/components/Icon/Icon.cjs

@@ -2,64 +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 react$1 = require("@emotion/react");
 const react = require("react");
-const capitalize = require("../../utils/capitalize.cjs");
-const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const SIZES = {
-  large: "300",
-  medium: "250",
-  small: "200",
-  xlarge: "400",
-  xsmall: "150",
-  xxlarge: "700"
-};
-const sizeStyles = ({
-  size,
-  theme
-}) => /* @__PURE__ */ react$1.css("height:", theme.sizing[SIZES[size]], ";width:", theme.sizing[SIZES[size]], ";min-width:", theme.sizing[SIZES[size]], ";min-height:", theme.sizing[SIZES[size]], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:sizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0MrRSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9pY29ucy9zcmMvY29tcG9uZW50cy9JY29uL0ljb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IGNvbnNvbGVMaWdodFRoZW1lIGFzIHRoZW1lIH0gZnJvbSAnQHVsdHJhdmlvbGV0L3RoZW1lcydcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlLCBTVkdQcm9wcyB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IGNhcGl0YWxpemUgZnJvbSAnLi4vLi4vdXRpbHMvY2FwaXRhbGl6ZSdcblxuY29uc3QgU0laRVMgPSB7XG4gIGxhcmdlOiAnMzAwJyxcbiAgbWVkaXVtOiAnMjUwJyxcbiAgc21hbGw6ICcyMDAnLFxuICB4bGFyZ2U6ICc0MDAnLFxuICB4c21hbGw6ICcxNTAnLFxuICB4eGxhcmdlOiAnNzAwJyxcbn0gYXMgY29uc3RcblxudHlwZSBTaXplc1Byb3BzID0ga2V5b2YgdHlwZW9mIFNJWkVTXG5cbnR5cGUgQ29sb3IgPSBFeHRyYWN0PFxuICBrZXlvZiB0eXBlb2YgdGhlbWUuY29sb3JzLFxuICB8ICdwcmltYXJ5J1xuICB8ICdzZWNvbmRhcnknXG4gIHwgJ25ldXRyYWwnXG4gIHwgJ3N1Y2Nlc3MnXG4gIHwgJ2RhbmdlcidcbiAgfCAnd2FybmluZydcbiAgfCAnaW5mbydcbj5cblxuY29uc3Qgc2l6ZVN0eWxlcyA9ICh7IHNpemUsIHRoZW1lIH06IHsgc2l6ZTogU2l6ZXNQcm9wczsgdGhlbWU6IFRoZW1lIH0pID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgd2lkdGg6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgbWluLXdpZHRoOiAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19O1xuICAgIG1pbi1oZWlnaHQ6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgYFxuXG5jb25zdCBQUk9NSU5FTkNFUyA9IHtcbiAgZGVmYXVsdDogJycsXG4gIHN0cm9uZzogJ3N0cm9uZycsXG4gIHN0cm9uZ2VyOiAnc3Ryb25nZXInLFxuICB3ZWFrOiAnd2VhaycsXG59XG5cbnR5cGUgUHJvbWluZW5jZVByb3BzID0ga2V5b2YgdHlwZW9mIFBST01JTkVOQ0VTXG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoJ3N2ZycsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT5cbiAgICAhWydzaXplJywgJ3NlbnRpbWVudCcsICdwcm9taW5lbmNlJywgJ2Rpc2FibGVkJ10uaW5jbHVkZXMocHJvcCksXG59KTx7XG4gIHNlbnRpbWVudD86IENvbG9yXG4gIHNpemU6IFNpemVzUHJvcHNcbiAgcHJvbWluZW5jZTogUHJvbWluZW5jZVByb3BzXG4gIGRpc2FibGVkPzogYm9vbGVhblxufT5gXG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIGZpbGw6ICR7KHsgdGhlbWUsIHNlbnRpbWVudCwgcHJvbWluZW5jZSwgZGlzYWJsZWQgfSkgPT4ge1xuICAgIC8vIHN0cm9uZ2VyIGlzIGF2YWlsYWJsZSBvbmx5IGZvciBuZXV0cmFsIHNlbnRpbWVudFxuICAgIGNvbnN0IGRlZmluZWRQcm9taW5lbmNlID1cbiAgICAgIChzZW50aW1lbnQgIT09ICduZXV0cmFsJyAmJiBwcm9taW5lbmNlID09PSAnc3Ryb25nZXInKSB8fFxuICAgICAgcHJvbWluZW5jZSA9PT0gJ3dlYWsnXG4gICAgICAgID8gY2FwaXRhbGl6ZShQUk9NSU5FTkNFUy5kZWZhdWx0KVxuICAgICAgICA6IGNhcGl0YWxpemUoUFJPTUlORU5DRVNbcHJvbWluZW5jZV0pXG5cbiAgICBpZiAoc2VudGltZW50KSB7XG4gICAgICBjb25zdCB0aGVtZUNvbG9yID0gdGhlbWUuY29sb3JzW3NlbnRpbWVudF1cbiAgICAgIGNvbnN0IGljb24gPSBgaWNvbiR7ZGVmaW5lZFByb21pbmVuY2V9JHtcbiAgICAgICAgZGlzYWJsZWQgPyAnRGlzYWJsZWQnIDogJydcbiAgICAgIH1gIGFzIGtleW9mIHR5cGVvZiB0aGVtZUNvbG9yXG5cbiAgICAgIHJldHVybiB0aGVtZS5jb2xvcnM/LltzZW50aW1lbnRdPy5baWNvbl0gfHwgc2VudGltZW50XG4gICAgfVxuXG4gICAgcmV0dXJuICdjdXJyZW50Q29sb3InXG4gIH19O1xuXG4gIC5maWxsU3Ryb2tlIHtcbiAgICBzdHJva2U6ICR7KHsgdGhlbWUsIHNlbnRpbWVudCwgcHJvbWluZW5jZSwgZGlzYWJsZWQgfSkgPT4ge1xuICAgICAgLy8gc3Ryb25nZXIgaXMgYXZhaWxhYmxlIG9ubHkgZm9yIG5ldXRyYWwgY29sb3JcbiAgICAgIGNvbnN0IGRlZmluZWRQcm9taW5lbmNlID1cbiAgICAgICAgc2VudGltZW50ICE9PSAnbmV1dHJhbCcgJiYgcHJvbWluZW5jZSA9PT0gJ3N0cm9uZ2VyJ1xuICAgICAgICAgID8gY2FwaXRhbGl6ZShQUk9NSU5FTkNFUy5kZWZhdWx0KVxuICAgICAgICAgIDogY2FwaXRhbGl6ZShQUk9NSU5FTkNFU1twcm9taW5lbmNlXSlcblxuICAgICAgaWYgKHNlbnRpbWVudCkge1xuICAgICAgICBjb25zdCB0aGVtZUNvbG9yID0gdGhlbWUuY29sb3JzW3NlbnRpbWVudF1cbiAgICAgICAgY29uc3QgaWNvbiA9IGBpY29uJHtkZWZpbmVkUHJvbWluZW5jZX0ke1xuICAgICAgICAgIGRpc2FibGVkID8gJ0Rpc2FibGVkJyA6ICcnXG4gICAgICAgIH1gIGFzIGtleW9mIHR5cGVvZiB0aGVtZUNvbG9yXG5cbiAgICAgICAgcmV0dXJuIHRoZW1lLmNvbG9ycz8uW3NlbnRpbWVudF0/LltpY29uXSB8fCBzZW50aW1lbnRcbiAgICAgIH1cblxuICAgICAgcmV0dXJuICdjdXJyZW50Q29sb3InXG4gICAgfX07XG4gICAgZmlsbDogbm9uZTtcbiAgfVxuICAke3NpemVTdHlsZXN9XG5gXG5cbmV4cG9ydCB0eXBlIEljb25Qcm9wcyA9IHtcbiAgc2l6ZT86IFNpemVzUHJvcHNcbiAgcHJvbWluZW5jZT86IFByb21pbmVuY2VQcm9wc1xuICBzZW50aW1lbnQ/OiBDb2xvclxuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59ICYgUGljazxcbiAgU1ZHUHJvcHM8U1ZHU1ZHRWxlbWVudD4sXG4gICdjbGFzc05hbWUnIHwgJ3N0cm9rZScgfCAnY3Vyc29yJyB8ICdzdHJva2VXaWR0aCcgfCAnYXJpYS1sYWJlbCdcbj5cblxuLyoqXG4gKiBJY29uIGNvbXBvbmVudCBpcyBvdXIgc2V0IG9mIHN5c3RlbSBpY29ucyBpbiB0aGUgZGVzaWduIHN5c3RlbS4gQWxsIG9mIHRoZW0gYXJlIFNWR3MuXG4gKi9cblxuZXhwb3J0IGNvbnN0IEljb24gPSBmb3J3YXJkUmVmPFNWR1NWR0VsZW1lbnQsIEljb25Qcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICBzZW50aW1lbnQsXG4gICAgICBzaXplID0gJ3NtYWxsJyxcbiAgICAgIHByb21pbmVuY2UgPSAnZGVmYXVsdCcsXG4gICAgICBjbGFzc05hbWUsXG4gICAgICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICAgICAgc3Ryb2tlLFxuICAgICAgY3Vyc29yLFxuICAgICAgc3Ryb2tlV2lkdGgsXG4gICAgICBkaXNhYmxlZCxcbiAgICAgICdhcmlhLWxhYmVsJzogYXJpYUxhYmVsLFxuICAgICAgY2hpbGRyZW4sXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4gKFxuICAgIDxTdHlsZWRJY29uXG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGN1cnNvcj17Y3Vyc29yfVxuICAgICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICBwcm9taW5lbmNlPXtwcm9taW5lbmNlfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBzZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBzdHJva2U9e3N0cm9rZX1cbiAgICAgIHN0cm9rZVdpZHRoPXtzdHJva2VXaWR0aH1cbiAgICAgIHZpZXdCb3g9e1xuICAgICAgICB0eXBlb2Ygc2l6ZSA9PT0gJ3N0cmluZycgJiYgWyd4c21hbGwnLCAnc21hbGwnXS5pbmNsdWRlcyhzaXplKVxuICAgICAgICAgID8gJzAgMCAxNiAxNidcbiAgICAgICAgICA6ICcwIDAgMjAgMjAnXG4gICAgICB9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvU3R5bGVkSWNvbj5cbiAgKSxcbilcbiJdfQ== */");
-const PROMINENCES = {
-  default: "",
-  strong: "strong",
-  stronger: "stronger",
-  weak: "weak"
-};
-const StyledIcon = /* @__PURE__ */ _styled__default.default("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["size", "sentiment", "prominence", "disabled"].includes(prop),
-  target: "elxvigq0"
-} : {
-  shouldForwardProp: (prop) => !["size", "sentiment", "prominence", "disabled"].includes(prop),
-  target: "elxvigq0",
-  label: "StyledIcon"
-})("vertical-align:middle;fill:", ({
-  theme,
-  sentiment,
-  prominence,
-  disabled
-}) => {
-  const definedProminence = sentiment !== "neutral" && prominence === "stronger" || prominence === "weak" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
-  if (sentiment) {
-    theme.colors[sentiment];
-    const icon = `icon${definedProminence}${disabled ? "Disabled" : ""}`;
-    return theme.colors?.[sentiment]?.[icon] || sentiment;
-  }
-  return "currentColor";
-}, ";.fillStroke{stroke:", ({
-  theme,
-  sentiment,
-  prominence,
-  disabled
-}) => {
-  const definedProminence = sentiment !== "neutral" && prominence === "stronger" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
-  if (sentiment) {
-    theme.colors[sentiment];
-    const icon = `icon${definedProminence}${disabled ? "Disabled" : ""}`;
-    return theme.colors?.[sentiment]?.[icon] || sentiment;
-  }
-  return "currentColor";
-}, ";fill:none;}", sizeStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0RFIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgY29uc29sZUxpZ2h0VGhlbWUgYXMgdGhlbWUgfSBmcm9tICdAdWx0cmF2aW9sZXQvdGhlbWVzJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUsIFNWR1Byb3BzIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgY2FwaXRhbGl6ZSBmcm9tICcuLi8uLi91dGlscy9jYXBpdGFsaXplJ1xuXG5jb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICczMDAnLFxuICBtZWRpdW06ICcyNTAnLFxuICBzbWFsbDogJzIwMCcsXG4gIHhsYXJnZTogJzQwMCcsXG4gIHhzbWFsbDogJzE1MCcsXG4gIHh4bGFyZ2U6ICc3MDAnLFxufSBhcyBjb25zdFxuXG50eXBlIFNpemVzUHJvcHMgPSBrZXlvZiB0eXBlb2YgU0laRVNcblxudHlwZSBDb2xvciA9IEV4dHJhY3Q8XG4gIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMsXG4gIHwgJ3ByaW1hcnknXG4gIHwgJ3NlY29uZGFyeSdcbiAgfCAnbmV1dHJhbCdcbiAgfCAnc3VjY2VzcydcbiAgfCAnZGFuZ2VyJ1xuICB8ICd3YXJuaW5nJ1xuICB8ICdpbmZvJ1xuPlxuXG5jb25zdCBzaXplU3R5bGVzID0gKHsgc2l6ZSwgdGhlbWUgfTogeyBzaXplOiBTaXplc1Byb3BzOyB0aGVtZTogVGhlbWUgfSkgPT4gY3NzYFxuICAgIGhlaWdodDogJHt0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgICB3aWR0aDogJHt0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgICBtaW4td2lkdGg6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgbWluLWhlaWdodDogJHt0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgICBgXG5cbmNvbnN0IFBST01JTkVOQ0VTID0ge1xuICBkZWZhdWx0OiAnJyxcbiAgc3Ryb25nOiAnc3Ryb25nJyxcbiAgc3Ryb25nZXI6ICdzdHJvbmdlcicsXG4gIHdlYWs6ICd3ZWFrJyxcbn1cblxudHlwZSBQcm9taW5lbmNlUHJvcHMgPSBrZXlvZiB0eXBlb2YgUFJPTUlORU5DRVNcblxuY29uc3QgU3R5bGVkSWNvbiA9IHN0eWxlZCgnc3ZnJywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbJ3NpemUnLCAnc2VudGltZW50JywgJ3Byb21pbmVuY2UnLCAnZGlzYWJsZWQnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHtcbiAgc2VudGltZW50PzogQ29sb3JcbiAgc2l6ZTogU2l6ZXNQcm9wc1xuICBwcm9taW5lbmNlOiBQcm9taW5lbmNlUHJvcHNcbiAgZGlzYWJsZWQ/OiBib29sZWFuXG59PmBcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgZmlsbDogJHsoeyB0aGVtZSwgc2VudGltZW50LCBwcm9taW5lbmNlLCBkaXNhYmxlZCB9KSA9PiB7XG4gICAgLy8gc3Ryb25nZXIgaXMgYXZhaWxhYmxlIG9ubHkgZm9yIG5ldXRyYWwgc2VudGltZW50XG4gICAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgICAgKHNlbnRpbWVudCAhPT0gJ25ldXRyYWwnICYmIHByb21pbmVuY2UgPT09ICdzdHJvbmdlcicpIHx8XG4gICAgICBwcm9taW5lbmNlID09PSAnd2VhaydcbiAgICAgICAgPyBjYXBpdGFsaXplKFBST01JTkVOQ0VTLmRlZmF1bHQpXG4gICAgICAgIDogY2FwaXRhbGl6ZShQUk9NSU5FTkNFU1twcm9taW5lbmNlXSlcblxuICAgIGlmIChzZW50aW1lbnQpIHtcbiAgICAgIGNvbnN0IHRoZW1lQ29sb3IgPSB0aGVtZS5jb2xvcnNbc2VudGltZW50XVxuICAgICAgY29uc3QgaWNvbiA9IGBpY29uJHtkZWZpbmVkUHJvbWluZW5jZX0ke1xuICAgICAgICBkaXNhYmxlZCA/ICdEaXNhYmxlZCcgOiAnJ1xuICAgICAgfWAgYXMga2V5b2YgdHlwZW9mIHRoZW1lQ29sb3JcblxuICAgICAgcmV0dXJuIHRoZW1lLmNvbG9ycz8uW3NlbnRpbWVudF0/LltpY29uXSB8fCBzZW50aW1lbnRcbiAgICB9XG5cbiAgICByZXR1cm4gJ2N1cnJlbnRDb2xvcidcbiAgfX07XG5cbiAgLmZpbGxTdHJva2Uge1xuICAgIHN0cm9rZTogJHsoeyB0aGVtZSwgc2VudGltZW50LCBwcm9taW5lbmNlLCBkaXNhYmxlZCB9KSA9PiB7XG4gICAgICAvLyBzdHJvbmdlciBpcyBhdmFpbGFibGUgb25seSBmb3IgbmV1dHJhbCBjb2xvclxuICAgICAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgICAgICBzZW50aW1lbnQgIT09ICduZXV0cmFsJyAmJiBwcm9taW5lbmNlID09PSAnc3Ryb25nZXInXG4gICAgICAgICAgPyBjYXBpdGFsaXplKFBST01JTkVOQ0VTLmRlZmF1bHQpXG4gICAgICAgICAgOiBjYXBpdGFsaXplKFBST01JTkVOQ0VTW3Byb21pbmVuY2VdKVxuXG4gICAgICBpZiAoc2VudGltZW50KSB7XG4gICAgICAgIGNvbnN0IHRoZW1lQ29sb3IgPSB0aGVtZS5jb2xvcnNbc2VudGltZW50XVxuICAgICAgICBjb25zdCBpY29uID0gYGljb24ke2RlZmluZWRQcm9taW5lbmNlfSR7XG4gICAgICAgICAgZGlzYWJsZWQgPyAnRGlzYWJsZWQnIDogJydcbiAgICAgICAgfWAgYXMga2V5b2YgdHlwZW9mIHRoZW1lQ29sb3JcblxuICAgICAgICByZXR1cm4gdGhlbWUuY29sb3JzPy5bc2VudGltZW50XT8uW2ljb25dIHx8IHNlbnRpbWVudFxuICAgICAgfVxuXG4gICAgICByZXR1cm4gJ2N1cnJlbnRDb2xvcidcbiAgICB9fTtcbiAgICBmaWxsOiBub25lO1xuICB9XG4gICR7c2l6ZVN0eWxlc31cbmBcblxuZXhwb3J0IHR5cGUgSWNvblByb3BzID0ge1xuICBzaXplPzogU2l6ZXNQcm9wc1xuICBwcm9taW5lbmNlPzogUHJvbWluZW5jZVByb3BzXG4gIHNlbnRpbWVudD86IENvbG9yXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgZGlzYWJsZWQ/OiBib29sZWFuXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn0gJiBQaWNrPFxuICBTVkdQcm9wczxTVkdTVkdFbGVtZW50PixcbiAgJ2NsYXNzTmFtZScgfCAnc3Ryb2tlJyB8ICdjdXJzb3InIHwgJ3N0cm9rZVdpZHRoJyB8ICdhcmlhLWxhYmVsJ1xuPlxuXG4vKipcbiAqIEljb24gY29tcG9uZW50IGlzIG91ciBzZXQgb2Ygc3lzdGVtIGljb25zIGluIHRoZSBkZXNpZ24gc3lzdGVtLiBBbGwgb2YgdGhlbSBhcmUgU1ZHcy5cbiAqL1xuXG5leHBvcnQgY29uc3QgSWNvbiA9IGZvcndhcmRSZWY8U1ZHU1ZHRWxlbWVudCwgSWNvblByb3BzPihcbiAgKFxuICAgIHtcbiAgICAgIHNlbnRpbWVudCxcbiAgICAgIHNpemUgPSAnc21hbGwnLFxuICAgICAgcHJvbWluZW5jZSA9ICdkZWZhdWx0JyxcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gICAgICBzdHJva2UsXG4gICAgICBjdXJzb3IsXG4gICAgICBzdHJva2VXaWR0aCxcbiAgICAgIGRpc2FibGVkLFxuICAgICAgJ2FyaWEtbGFiZWwnOiBhcmlhTGFiZWwsXG4gICAgICBjaGlsZHJlbixcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiAoXG4gICAgPFN0eWxlZEljb25cbiAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgY3Vyc29yPXtjdXJzb3J9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgIHByb21pbmVuY2U9e3Byb21pbmVuY2V9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgIHN0cm9rZT17c3Ryb2tlfVxuICAgICAgc3Ryb2tlV2lkdGg9e3N0cm9rZVdpZHRofVxuICAgICAgdmlld0JveD17XG4gICAgICAgIHR5cGVvZiBzaXplID09PSAnc3RyaW5nJyAmJiBbJ3hzbWFsbCcsICdzbWFsbCddLmluY2x1ZGVzKHNpemUpXG4gICAgICAgICAgPyAnMCAwIDE2IDE2J1xuICAgICAgICAgIDogJzAgMCAyMCAyMCdcbiAgICAgIH1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRJY29uPlxuICApLFxuKVxuIl19 */"));
+const styles_css = require("./styles.css.cjs");
 const Icon = react.forwardRef(({
   sentiment,
   size = "small",
@@ -72,5 +16,10 @@ const Icon = react.forwardRef(({
   disabled,
   "aria-label": ariaLabel,
   children
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { "aria-label": ariaLabel, className, cursor, "data-testid": dataTestId, disabled, prominence, ref, sentiment, size, stroke, strokeWidth, viewBox: typeof size === "string" && ["xsmall", "small"].includes(size) ? "0 0 16 16" : "0 0 20 20", children }));
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-label": ariaLabel, className: `${className ? `${className} ` : ""}${styles_css.icon({
+  disabled,
+  prominence,
+  sentiment,
+  size
+})}`, cursor, "data-testid": dataTestId, ref, stroke, strokeWidth, viewBox: typeof size === "string" && ["xsmall", "small"].includes(size) ? "0 0 16 16" : "0 0 20 20", children }));
 exports.Icon = Icon;

package/dist/components/Icon/Icon.d.ts

@@ -1,21 +1,7 @@
-import type { consoleLightTheme as theme } from '@ultraviolet/themes';
 import type { ReactNode, SVGProps } from 'react';
-declare const SIZES: {
-    readonly large: "300";
-    readonly medium: "250";
-    readonly small: "200";
-    readonly xlarge: "400";
-    readonly xsmall: "150";
-    readonly xxlarge: "700";
-};
+import type { PROMINENCES, SENTIMENTS, SIZES } from './constants';
 type SizesProps = keyof typeof SIZES;
-type Color = Extract<keyof typeof theme.colors, 'primary' | 'secondary' | 'neutral' | 'success' | 'danger' | 'warning' | 'info'>;
-declare const PROMINENCES: {
-    default: string;
-    strong: string;
-    stronger: string;
-    weak: string;
-};
+type Color = (typeof SENTIMENTS)[number];
 type ProminenceProps = keyof typeof PROMINENCES;
 export type IconProps = {
     size?: SizesProps;
@@ -35,5 +21,5 @@ export declare const Icon: import("react").ForwardRefExoticComponent<{
     'data-testid'?: string;
     disabled?: boolean;
     children: ReactNode;
-} & Pick<SVGProps<SVGSVGElement>, "className" | "cursor" | "stroke" | "strokeWidth" | "aria-label"> & import("react").RefAttributes<SVGSVGElement>>;
+} & Pick<SVGProps<SVGSVGElement>, "cursor" | "stroke" | "strokeWidth" | "className" | "aria-label"> & import("react").RefAttributes<SVGSVGElement>>;
 export {};

package/dist/components/Icon/Icon.js

@@ -1,61 +1,7 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-import { css } from "@emotion/react";
 import { forwardRef } from "react";
-import capitalize from "../../utils/capitalize.js";
-const SIZES = {
-  large: "300",
-  medium: "250",
-  small: "200",
-  xlarge: "400",
-  xsmall: "150",
-  xxlarge: "700"
-};
-const sizeStyles = ({
-  size,
-  theme
-}) => /* @__PURE__ */ css("height:", theme.sizing[SIZES[size]], ";width:", theme.sizing[SIZES[size]], ";min-width:", theme.sizing[SIZES[size]], ";min-height:", theme.sizing[SIZES[size]], ";" + (process.env.NODE_ENV === "production" ? "" : ";label:sizeStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0MrRSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9pY29ucy9zcmMvY29tcG9uZW50cy9JY29uL0ljb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB0eXBlIHsgVGhlbWUgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IGNvbnNvbGVMaWdodFRoZW1lIGFzIHRoZW1lIH0gZnJvbSAnQHVsdHJhdmlvbGV0L3RoZW1lcydcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlLCBTVkdQcm9wcyB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IGNhcGl0YWxpemUgZnJvbSAnLi4vLi4vdXRpbHMvY2FwaXRhbGl6ZSdcblxuY29uc3QgU0laRVMgPSB7XG4gIGxhcmdlOiAnMzAwJyxcbiAgbWVkaXVtOiAnMjUwJyxcbiAgc21hbGw6ICcyMDAnLFxuICB4bGFyZ2U6ICc0MDAnLFxuICB4c21hbGw6ICcxNTAnLFxuICB4eGxhcmdlOiAnNzAwJyxcbn0gYXMgY29uc3RcblxudHlwZSBTaXplc1Byb3BzID0ga2V5b2YgdHlwZW9mIFNJWkVTXG5cbnR5cGUgQ29sb3IgPSBFeHRyYWN0PFxuICBrZXlvZiB0eXBlb2YgdGhlbWUuY29sb3JzLFxuICB8ICdwcmltYXJ5J1xuICB8ICdzZWNvbmRhcnknXG4gIHwgJ25ldXRyYWwnXG4gIHwgJ3N1Y2Nlc3MnXG4gIHwgJ2RhbmdlcidcbiAgfCAnd2FybmluZydcbiAgfCAnaW5mbydcbj5cblxuY29uc3Qgc2l6ZVN0eWxlcyA9ICh7IHNpemUsIHRoZW1lIH06IHsgc2l6ZTogU2l6ZXNQcm9wczsgdGhlbWU6IFRoZW1lIH0pID0+IGNzc2BcbiAgICBoZWlnaHQ6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgd2lkdGg6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgbWluLXdpZHRoOiAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19O1xuICAgIG1pbi1oZWlnaHQ6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgYFxuXG5jb25zdCBQUk9NSU5FTkNFUyA9IHtcbiAgZGVmYXVsdDogJycsXG4gIHN0cm9uZzogJ3N0cm9uZycsXG4gIHN0cm9uZ2VyOiAnc3Ryb25nZXInLFxuICB3ZWFrOiAnd2VhaycsXG59XG5cbnR5cGUgUHJvbWluZW5jZVByb3BzID0ga2V5b2YgdHlwZW9mIFBST01JTkVOQ0VTXG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoJ3N2ZycsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT5cbiAgICAhWydzaXplJywgJ3NlbnRpbWVudCcsICdwcm9taW5lbmNlJywgJ2Rpc2FibGVkJ10uaW5jbHVkZXMocHJvcCksXG59KTx7XG4gIHNlbnRpbWVudD86IENvbG9yXG4gIHNpemU6IFNpemVzUHJvcHNcbiAgcHJvbWluZW5jZTogUHJvbWluZW5jZVByb3BzXG4gIGRpc2FibGVkPzogYm9vbGVhblxufT5gXG4gIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gIGZpbGw6ICR7KHsgdGhlbWUsIHNlbnRpbWVudCwgcHJvbWluZW5jZSwgZGlzYWJsZWQgfSkgPT4ge1xuICAgIC8vIHN0cm9uZ2VyIGlzIGF2YWlsYWJsZSBvbmx5IGZvciBuZXV0cmFsIHNlbnRpbWVudFxuICAgIGNvbnN0IGRlZmluZWRQcm9taW5lbmNlID1cbiAgICAgIChzZW50aW1lbnQgIT09ICduZXV0cmFsJyAmJiBwcm9taW5lbmNlID09PSAnc3Ryb25nZXInKSB8fFxuICAgICAgcHJvbWluZW5jZSA9PT0gJ3dlYWsnXG4gICAgICAgID8gY2FwaXRhbGl6ZShQUk9NSU5FTkNFUy5kZWZhdWx0KVxuICAgICAgICA6IGNhcGl0YWxpemUoUFJPTUlORU5DRVNbcHJvbWluZW5jZV0pXG5cbiAgICBpZiAoc2VudGltZW50KSB7XG4gICAgICBjb25zdCB0aGVtZUNvbG9yID0gdGhlbWUuY29sb3JzW3NlbnRpbWVudF1cbiAgICAgIGNvbnN0IGljb24gPSBgaWNvbiR7ZGVmaW5lZFByb21pbmVuY2V9JHtcbiAgICAgICAgZGlzYWJsZWQgPyAnRGlzYWJsZWQnIDogJydcbiAgICAgIH1gIGFzIGtleW9mIHR5cGVvZiB0aGVtZUNvbG9yXG5cbiAgICAgIHJldHVybiB0aGVtZS5jb2xvcnM/LltzZW50aW1lbnRdPy5baWNvbl0gfHwgc2VudGltZW50XG4gICAgfVxuXG4gICAgcmV0dXJuICdjdXJyZW50Q29sb3InXG4gIH19O1xuXG4gIC5maWxsU3Ryb2tlIHtcbiAgICBzdHJva2U6ICR7KHsgdGhlbWUsIHNlbnRpbWVudCwgcHJvbWluZW5jZSwgZGlzYWJsZWQgfSkgPT4ge1xuICAgICAgLy8gc3Ryb25nZXIgaXMgYXZhaWxhYmxlIG9ubHkgZm9yIG5ldXRyYWwgY29sb3JcbiAgICAgIGNvbnN0IGRlZmluZWRQcm9taW5lbmNlID1cbiAgICAgICAgc2VudGltZW50ICE9PSAnbmV1dHJhbCcgJiYgcHJvbWluZW5jZSA9PT0gJ3N0cm9uZ2VyJ1xuICAgICAgICAgID8gY2FwaXRhbGl6ZShQUk9NSU5FTkNFUy5kZWZhdWx0KVxuICAgICAgICAgIDogY2FwaXRhbGl6ZShQUk9NSU5FTkNFU1twcm9taW5lbmNlXSlcblxuICAgICAgaWYgKHNlbnRpbWVudCkge1xuICAgICAgICBjb25zdCB0aGVtZUNvbG9yID0gdGhlbWUuY29sb3JzW3NlbnRpbWVudF1cbiAgICAgICAgY29uc3QgaWNvbiA9IGBpY29uJHtkZWZpbmVkUHJvbWluZW5jZX0ke1xuICAgICAgICAgIGRpc2FibGVkID8gJ0Rpc2FibGVkJyA6ICcnXG4gICAgICAgIH1gIGFzIGtleW9mIHR5cGVvZiB0aGVtZUNvbG9yXG5cbiAgICAgICAgcmV0dXJuIHRoZW1lLmNvbG9ycz8uW3NlbnRpbWVudF0/LltpY29uXSB8fCBzZW50aW1lbnRcbiAgICAgIH1cblxuICAgICAgcmV0dXJuICdjdXJyZW50Q29sb3InXG4gICAgfX07XG4gICAgZmlsbDogbm9uZTtcbiAgfVxuICAke3NpemVTdHlsZXN9XG5gXG5cbmV4cG9ydCB0eXBlIEljb25Qcm9wcyA9IHtcbiAgc2l6ZT86IFNpemVzUHJvcHNcbiAgcHJvbWluZW5jZT86IFByb21pbmVuY2VQcm9wc1xuICBzZW50aW1lbnQ/OiBDb2xvclxuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59ICYgUGljazxcbiAgU1ZHUHJvcHM8U1ZHU1ZHRWxlbWVudD4sXG4gICdjbGFzc05hbWUnIHwgJ3N0cm9rZScgfCAnY3Vyc29yJyB8ICdzdHJva2VXaWR0aCcgfCAnYXJpYS1sYWJlbCdcbj5cblxuLyoqXG4gKiBJY29uIGNvbXBvbmVudCBpcyBvdXIgc2V0IG9mIHN5c3RlbSBpY29ucyBpbiB0aGUgZGVzaWduIHN5c3RlbS4gQWxsIG9mIHRoZW0gYXJlIFNWR3MuXG4gKi9cblxuZXhwb3J0IGNvbnN0IEljb24gPSBmb3J3YXJkUmVmPFNWR1NWR0VsZW1lbnQsIEljb25Qcm9wcz4oXG4gIChcbiAgICB7XG4gICAgICBzZW50aW1lbnQsXG4gICAgICBzaXplID0gJ3NtYWxsJyxcbiAgICAgIHByb21pbmVuY2UgPSAnZGVmYXVsdCcsXG4gICAgICBjbGFzc05hbWUsXG4gICAgICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxuICAgICAgc3Ryb2tlLFxuICAgICAgY3Vyc29yLFxuICAgICAgc3Ryb2tlV2lkdGgsXG4gICAgICBkaXNhYmxlZCxcbiAgICAgICdhcmlhLWxhYmVsJzogYXJpYUxhYmVsLFxuICAgICAgY2hpbGRyZW4sXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4gKFxuICAgIDxTdHlsZWRJY29uXG4gICAgICBhcmlhLWxhYmVsPXthcmlhTGFiZWx9XG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGN1cnNvcj17Y3Vyc29yfVxuICAgICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICBwcm9taW5lbmNlPXtwcm9taW5lbmNlfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBzZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICBzdHJva2U9e3N0cm9rZX1cbiAgICAgIHN0cm9rZVdpZHRoPXtzdHJva2VXaWR0aH1cbiAgICAgIHZpZXdCb3g9e1xuICAgICAgICB0eXBlb2Ygc2l6ZSA9PT0gJ3N0cmluZycgJiYgWyd4c21hbGwnLCAnc21hbGwnXS5pbmNsdWRlcyhzaXplKVxuICAgICAgICAgID8gJzAgMCAxNiAxNidcbiAgICAgICAgICA6ICcwIDAgMjAgMjAnXG4gICAgICB9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvU3R5bGVkSWNvbj5cbiAgKSxcbilcbiJdfQ== */");
-const PROMINENCES = {
-  default: "",
-  strong: "strong",
-  stronger: "stronger",
-  weak: "weak"
-};
-const StyledIcon = /* @__PURE__ */ _styled("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["size", "sentiment", "prominence", "disabled"].includes(prop),
-  target: "elxvigq0"
-} : {
-  shouldForwardProp: (prop) => !["size", "sentiment", "prominence", "disabled"].includes(prop),
-  target: "elxvigq0",
-  label: "StyledIcon"
-})("vertical-align:middle;fill:", ({
-  theme,
-  sentiment,
-  prominence,
-  disabled
-}) => {
-  const definedProminence = sentiment !== "neutral" && prominence === "stronger" || prominence === "weak" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
-  if (sentiment) {
-    theme.colors[sentiment];
-    const icon = `icon${definedProminence}${disabled ? "Disabled" : ""}`;
-    return theme.colors?.[sentiment]?.[icon] || sentiment;
-  }
-  return "currentColor";
-}, ";.fillStroke{stroke:", ({
-  theme,
-  sentiment,
-  prominence,
-  disabled
-}) => {
-  const definedProminence = sentiment !== "neutral" && prominence === "stronger" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
-  if (sentiment) {
-    theme.colors[sentiment];
-    const icon = `icon${definedProminence}${disabled ? "Disabled" : ""}`;
-    return theme.colors?.[sentiment]?.[icon] || sentiment;
-  }
-  return "currentColor";
-}, ";fill:none;}", sizeStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0RFIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB0eXBlIHsgY29uc29sZUxpZ2h0VGhlbWUgYXMgdGhlbWUgfSBmcm9tICdAdWx0cmF2aW9sZXQvdGhlbWVzJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUsIFNWR1Byb3BzIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgY2FwaXRhbGl6ZSBmcm9tICcuLi8uLi91dGlscy9jYXBpdGFsaXplJ1xuXG5jb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICczMDAnLFxuICBtZWRpdW06ICcyNTAnLFxuICBzbWFsbDogJzIwMCcsXG4gIHhsYXJnZTogJzQwMCcsXG4gIHhzbWFsbDogJzE1MCcsXG4gIHh4bGFyZ2U6ICc3MDAnLFxufSBhcyBjb25zdFxuXG50eXBlIFNpemVzUHJvcHMgPSBrZXlvZiB0eXBlb2YgU0laRVNcblxudHlwZSBDb2xvciA9IEV4dHJhY3Q8XG4gIGtleW9mIHR5cGVvZiB0aGVtZS5jb2xvcnMsXG4gIHwgJ3ByaW1hcnknXG4gIHwgJ3NlY29uZGFyeSdcbiAgfCAnbmV1dHJhbCdcbiAgfCAnc3VjY2VzcydcbiAgfCAnZGFuZ2VyJ1xuICB8ICd3YXJuaW5nJ1xuICB8ICdpbmZvJ1xuPlxuXG5jb25zdCBzaXplU3R5bGVzID0gKHsgc2l6ZSwgdGhlbWUgfTogeyBzaXplOiBTaXplc1Byb3BzOyB0aGVtZTogVGhlbWUgfSkgPT4gY3NzYFxuICAgIGhlaWdodDogJHt0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgICB3aWR0aDogJHt0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgICBtaW4td2lkdGg6ICR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX07XG4gICAgbWluLWhlaWdodDogJHt0aGVtZS5zaXppbmdbU0laRVNbc2l6ZV1dfTtcbiAgICBgXG5cbmNvbnN0IFBST01JTkVOQ0VTID0ge1xuICBkZWZhdWx0OiAnJyxcbiAgc3Ryb25nOiAnc3Ryb25nJyxcbiAgc3Ryb25nZXI6ICdzdHJvbmdlcicsXG4gIHdlYWs6ICd3ZWFrJyxcbn1cblxudHlwZSBQcm9taW5lbmNlUHJvcHMgPSBrZXlvZiB0eXBlb2YgUFJPTUlORU5DRVNcblxuY29uc3QgU3R5bGVkSWNvbiA9IHN0eWxlZCgnc3ZnJywge1xuICBzaG91bGRGb3J3YXJkUHJvcDogcHJvcCA9PlxuICAgICFbJ3NpemUnLCAnc2VudGltZW50JywgJ3Byb21pbmVuY2UnLCAnZGlzYWJsZWQnXS5pbmNsdWRlcyhwcm9wKSxcbn0pPHtcbiAgc2VudGltZW50PzogQ29sb3JcbiAgc2l6ZTogU2l6ZXNQcm9wc1xuICBwcm9taW5lbmNlOiBQcm9taW5lbmNlUHJvcHNcbiAgZGlzYWJsZWQ/OiBib29sZWFuXG59PmBcbiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgZmlsbDogJHsoeyB0aGVtZSwgc2VudGltZW50LCBwcm9taW5lbmNlLCBkaXNhYmxlZCB9KSA9PiB7XG4gICAgLy8gc3Ryb25nZXIgaXMgYXZhaWxhYmxlIG9ubHkgZm9yIG5ldXRyYWwgc2VudGltZW50XG4gICAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgICAgKHNlbnRpbWVudCAhPT0gJ25ldXRyYWwnICYmIHByb21pbmVuY2UgPT09ICdzdHJvbmdlcicpIHx8XG4gICAgICBwcm9taW5lbmNlID09PSAnd2VhaydcbiAgICAgICAgPyBjYXBpdGFsaXplKFBST01JTkVOQ0VTLmRlZmF1bHQpXG4gICAgICAgIDogY2FwaXRhbGl6ZShQUk9NSU5FTkNFU1twcm9taW5lbmNlXSlcblxuICAgIGlmIChzZW50aW1lbnQpIHtcbiAgICAgIGNvbnN0IHRoZW1lQ29sb3IgPSB0aGVtZS5jb2xvcnNbc2VudGltZW50XVxuICAgICAgY29uc3QgaWNvbiA9IGBpY29uJHtkZWZpbmVkUHJvbWluZW5jZX0ke1xuICAgICAgICBkaXNhYmxlZCA/ICdEaXNhYmxlZCcgOiAnJ1xuICAgICAgfWAgYXMga2V5b2YgdHlwZW9mIHRoZW1lQ29sb3JcblxuICAgICAgcmV0dXJuIHRoZW1lLmNvbG9ycz8uW3NlbnRpbWVudF0/LltpY29uXSB8fCBzZW50aW1lbnRcbiAgICB9XG5cbiAgICByZXR1cm4gJ2N1cnJlbnRDb2xvcidcbiAgfX07XG5cbiAgLmZpbGxTdHJva2Uge1xuICAgIHN0cm9rZTogJHsoeyB0aGVtZSwgc2VudGltZW50LCBwcm9taW5lbmNlLCBkaXNhYmxlZCB9KSA9PiB7XG4gICAgICAvLyBzdHJvbmdlciBpcyBhdmFpbGFibGUgb25seSBmb3IgbmV1dHJhbCBjb2xvclxuICAgICAgY29uc3QgZGVmaW5lZFByb21pbmVuY2UgPVxuICAgICAgICBzZW50aW1lbnQgIT09ICduZXV0cmFsJyAmJiBwcm9taW5lbmNlID09PSAnc3Ryb25nZXInXG4gICAgICAgICAgPyBjYXBpdGFsaXplKFBST01JTkVOQ0VTLmRlZmF1bHQpXG4gICAgICAgICAgOiBjYXBpdGFsaXplKFBST01JTkVOQ0VTW3Byb21pbmVuY2VdKVxuXG4gICAgICBpZiAoc2VudGltZW50KSB7XG4gICAgICAgIGNvbnN0IHRoZW1lQ29sb3IgPSB0aGVtZS5jb2xvcnNbc2VudGltZW50XVxuICAgICAgICBjb25zdCBpY29uID0gYGljb24ke2RlZmluZWRQcm9taW5lbmNlfSR7XG4gICAgICAgICAgZGlzYWJsZWQgPyAnRGlzYWJsZWQnIDogJydcbiAgICAgICAgfWAgYXMga2V5b2YgdHlwZW9mIHRoZW1lQ29sb3JcblxuICAgICAgICByZXR1cm4gdGhlbWUuY29sb3JzPy5bc2VudGltZW50XT8uW2ljb25dIHx8IHNlbnRpbWVudFxuICAgICAgfVxuXG4gICAgICByZXR1cm4gJ2N1cnJlbnRDb2xvcidcbiAgICB9fTtcbiAgICBmaWxsOiBub25lO1xuICB9XG4gICR7c2l6ZVN0eWxlc31cbmBcblxuZXhwb3J0IHR5cGUgSWNvblByb3BzID0ge1xuICBzaXplPzogU2l6ZXNQcm9wc1xuICBwcm9taW5lbmNlPzogUHJvbWluZW5jZVByb3BzXG4gIHNlbnRpbWVudD86IENvbG9yXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgZGlzYWJsZWQ/OiBib29sZWFuXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn0gJiBQaWNrPFxuICBTVkdQcm9wczxTVkdTVkdFbGVtZW50PixcbiAgJ2NsYXNzTmFtZScgfCAnc3Ryb2tlJyB8ICdjdXJzb3InIHwgJ3N0cm9rZVdpZHRoJyB8ICdhcmlhLWxhYmVsJ1xuPlxuXG4vKipcbiAqIEljb24gY29tcG9uZW50IGlzIG91ciBzZXQgb2Ygc3lzdGVtIGljb25zIGluIHRoZSBkZXNpZ24gc3lzdGVtLiBBbGwgb2YgdGhlbSBhcmUgU1ZHcy5cbiAqL1xuXG5leHBvcnQgY29uc3QgSWNvbiA9IGZvcndhcmRSZWY8U1ZHU1ZHRWxlbWVudCwgSWNvblByb3BzPihcbiAgKFxuICAgIHtcbiAgICAgIHNlbnRpbWVudCxcbiAgICAgIHNpemUgPSAnc21hbGwnLFxuICAgICAgcHJvbWluZW5jZSA9ICdkZWZhdWx0JyxcbiAgICAgIGNsYXNzTmFtZSxcbiAgICAgICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG4gICAgICBzdHJva2UsXG4gICAgICBjdXJzb3IsXG4gICAgICBzdHJva2VXaWR0aCxcbiAgICAgIGRpc2FibGVkLFxuICAgICAgJ2FyaWEtbGFiZWwnOiBhcmlhTGFiZWwsXG4gICAgICBjaGlsZHJlbixcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiAoXG4gICAgPFN0eWxlZEljb25cbiAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbH1cbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgY3Vyc29yPXtjdXJzb3J9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgIHByb21pbmVuY2U9e3Byb21pbmVuY2V9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgIHN0cm9rZT17c3Ryb2tlfVxuICAgICAgc3Ryb2tlV2lkdGg9e3N0cm9rZVdpZHRofVxuICAgICAgdmlld0JveD17XG4gICAgICAgIHR5cGVvZiBzaXplID09PSAnc3RyaW5nJyAmJiBbJ3hzbWFsbCcsICdzbWFsbCddLmluY2x1ZGVzKHNpemUpXG4gICAgICAgICAgPyAnMCAwIDE2IDE2J1xuICAgICAgICAgIDogJzAgMCAyMCAyMCdcbiAgICAgIH1cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9TdHlsZWRJY29uPlxuICApLFxuKVxuIl19 */"));
+import { icon } from "./styles.css.js";
 const Icon = forwardRef(({
   sentiment,
   size = "small",
@@ -68,7 +14,12 @@ const Icon = forwardRef(({
   disabled,
   "aria-label": ariaLabel,
   children
-}, ref) => /* @__PURE__ */ jsx(StyledIcon, { "aria-label": ariaLabel, className, cursor, "data-testid": dataTestId, disabled, prominence, ref, sentiment, size, stroke, strokeWidth, viewBox: typeof size === "string" && ["xsmall", "small"].includes(size) ? "0 0 16 16" : "0 0 20 20", children }));
+}, ref) => /* @__PURE__ */ jsx("svg", { "aria-label": ariaLabel, className: `${className ? `${className} ` : ""}${icon({
+  disabled,
+  prominence,
+  sentiment,
+  size
+})}`, cursor, "data-testid": dataTestId, ref, stroke, strokeWidth, viewBox: typeof size === "string" && ["xsmall", "small"].includes(size) ? "0 0 16 16" : "0 0 20 20", children }));
 export {
   Icon
 };

package/dist/components/Icon/constants.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SIZES = {
+  large: "300",
+  medium: "250",
+  small: "200",
+  xlarge: "400",
+  xsmall: "150",
+  xxlarge: "700"
+};
+const PROMINENCES = {
+  default: "",
+  strong: "strong",
+  stronger: "stronger",
+  weak: "weak"
+};
+const SENTIMENTS = ["primary", "secondary", "neutral", "success", "danger", "warning", "info"];
+exports.PROMINENCES = PROMINENCES;
+exports.SENTIMENTS = SENTIMENTS;
+exports.SIZES = SIZES;

package/dist/components/Icon/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const SIZES: {
+    readonly large: "300";
+    readonly medium: "250";
+    readonly small: "200";
+    readonly xlarge: "400";
+    readonly xsmall: "150";
+    readonly xxlarge: "700";
+};
+export declare const PROMINENCES: {
+    default: string;
+    strong: string;
+    stronger: string;
+    weak: string;
+};
+export declare const SENTIMENTS: readonly ["primary", "secondary", "neutral", "success", "danger", "warning", "info"];

package/dist/components/Icon/constants.js

@@ -0,0 +1,20 @@
+const SIZES = {
+  large: "300",
+  medium: "250",
+  small: "200",
+  xlarge: "400",
+  xsmall: "150",
+  xxlarge: "700"
+};
+const PROMINENCES = {
+  default: "",
+  strong: "strong",
+  stronger: "stronger",
+  weak: "weak"
+};
+const SENTIMENTS = ["primary", "secondary", "neutral", "success", "danger", "warning", "info"];
+export {
+  PROMINENCES,
+  SENTIMENTS,
+  SIZES
+};

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

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const themes = require("@ultraviolet/themes");
+const recipes = require("@vanilla-extract/recipes");
+const constants = require("./constants.cjs");
+const capitalize = require("../../utils/capitalize.cjs");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/Icon/styles.css.ts", "@ultraviolet/icons");
+function generateSizeStyle(size) {
+  return {
+    height: themes.theme.sizing[constants.SIZES[size]],
+    width: themes.theme.sizing[constants.SIZES[size]],
+    minWidth: themes.theme.sizing[constants.SIZES[size]],
+    minHeight: themes.theme.sizing[constants.SIZES[size]]
+  };
+}
+function getIconColor(prominence, sentiment, disabled) {
+  const definedProminence = sentiment !== "neutral" && prominence === "stronger" || prominence === "weak" ? capitalize(constants.PROMINENCES.default) : capitalize(constants.PROMINENCES[prominence]);
+  themes.theme.colors[sentiment];
+  const iconToken = `icon${definedProminence}${""}`;
+  return themes.theme.colors?.[sentiment]?.[iconToken] || sentiment;
+}
+const icon = recipes.recipe({
+  base: {
+    verticalAlign: "middle",
+    fill: "currentcolor"
+  },
+  variants: {
+    sentiment: Object.fromEntries(constants.SENTIMENTS.map((sentiment) => [sentiment, {}])),
+    size: Object.fromEntries(Object.keys(constants.SIZES).map((size) => [size, generateSizeStyle(size)])),
+    disabled: {
+      true: {},
+      false: {}
+    },
+    prominence: Object.fromEntries(Object.keys(constants.PROMINENCES).map((prominence) => [prominence, {}]))
+  },
+  compoundVariants: [...Object.keys(constants.PROMINENCES).flatMap((prominence) => constants.SENTIMENTS.map((sentiment) => ({
+    variants: {
+      sentiment,
+      prominence,
+      disabled: false
+    },
+    style: {
+      fill: getIconColor(prominence, sentiment)
+    }
+  }))), ...Object.keys(constants.PROMINENCES).flatMap((prominence) => constants.SENTIMENTS.map((sentiment) => ({
+    variants: {
+      sentiment,
+      prominence,
+      disabled: true
+    },
+    style: {
+      fill: getIconColor(prominence, sentiment)
+    }
+  })))],
+  defaultVariants: {
+    prominence: "default",
+    disabled: false
+  }
+});
+Object.keys(constants.PROMINENCES).forEach((prominence) => constants.SENTIMENTS.forEach((sentiment) => {
+  css.globalStyle(`${icon({
+    sentiment,
+    prominence
+  })} .fillStroke`, {
+    fill: "none",
+    stroke: getIconColor(prominence, sentiment)
+  });
+}));
+fileScope.endFileScope();
+exports.icon = icon;

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

@@ -0,0 +1,20 @@
+export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
+    sentiment: {
+        [k: string]: {};
+    };
+    size: {
+        [k: string]: {
+            height: `var(--${string})`;
+            width: `var(--${string})`;
+            minWidth: `var(--${string})`;
+            minHeight: `var(--${string})`;
+        };
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+    prominence: {
+        [k: string]: {};
+    };
+}>;

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

@@ -0,0 +1,72 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { theme } from "@ultraviolet/themes";
+import { recipe } from "@vanilla-extract/recipes";
+import { PROMINENCES, SENTIMENTS, SIZES } from "./constants.js";
+import capitalize from "../../utils/capitalize.js";
+import { globalStyle } from "@vanilla-extract/css";
+setFileScope("src/components/Icon/styles.css.ts", "@ultraviolet/icons");
+function generateSizeStyle(size) {
+  return {
+    height: theme.sizing[SIZES[size]],
+    width: theme.sizing[SIZES[size]],
+    minWidth: theme.sizing[SIZES[size]],
+    minHeight: theme.sizing[SIZES[size]]
+  };
+}
+function getIconColor(prominence, sentiment, disabled) {
+  const definedProminence = sentiment !== "neutral" && prominence === "stronger" || prominence === "weak" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
+  theme.colors[sentiment];
+  const iconToken = `icon${definedProminence}${""}`;
+  return theme.colors?.[sentiment]?.[iconToken] || sentiment;
+}
+const icon = recipe({
+  base: {
+    verticalAlign: "middle",
+    fill: "currentcolor"
+  },
+  variants: {
+    sentiment: Object.fromEntries(SENTIMENTS.map((sentiment) => [sentiment, {}])),
+    size: Object.fromEntries(Object.keys(SIZES).map((size) => [size, generateSizeStyle(size)])),
+    disabled: {
+      true: {},
+      false: {}
+    },
+    prominence: Object.fromEntries(Object.keys(PROMINENCES).map((prominence) => [prominence, {}]))
+  },
+  compoundVariants: [...Object.keys(PROMINENCES).flatMap((prominence) => SENTIMENTS.map((sentiment) => ({
+    variants: {
+      sentiment,
+      prominence,
+      disabled: false
+    },
+    style: {
+      fill: getIconColor(prominence, sentiment)
+    }
+  }))), ...Object.keys(PROMINENCES).flatMap((prominence) => SENTIMENTS.map((sentiment) => ({
+    variants: {
+      sentiment,
+      prominence,
+      disabled: true
+    },
+    style: {
+      fill: getIconColor(prominence, sentiment)
+    }
+  })))],
+  defaultVariants: {
+    prominence: "default",
+    disabled: false
+  }
+});
+Object.keys(PROMINENCES).forEach((prominence) => SENTIMENTS.forEach((sentiment) => {
+  globalStyle(`${icon({
+    sentiment,
+    prominence
+  })} .fillStroke`, {
+    fill: "none",
+    stroke: getIconColor(prominence, sentiment)
+  });
+}));
+endFileScope();
+export {
+  icon
+};

package/dist/components/Logo/Icon.cjs

@@ -2,35 +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 _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
-const SIZES = {
-  large: "400",
-  medium: "250",
-  small: "200",
-  xlarge: "700"
-};
-const StyledIcon = /* @__PURE__ */ _styled__default.default("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["size"].includes(prop),
-  target: "e1bc5p840"
-} : {
-  shouldForwardProp: (prop) => !["size"].includes(prop),
-  target: "e1bc5p840",
-  label: "StyledIcon"
-})("&{width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";min-width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";height:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0xvZ28vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY2dDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0xvZ28vSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICc0MDAnLFxuICBtZWRpdW06ICcyNTAnLFxuICBzbWFsbDogJzIwMCcsXG4gIHhsYXJnZTogJzcwMCcsXG59IGFzIGNvbnN0XG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoJ3N2ZycsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnc2l6ZSddLmluY2x1ZGVzKHByb3ApLFxufSk8eyBzaXplOiBrZXlvZiB0eXBlb2YgU0laRVMgfT5gXG4gICYge1xuICAgIHdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07XG4gICAgbWluLXdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07IC8vIFRoaXMgaXMgdG8gYXZvaWQgdGhlIGljb24gdG8gc2hyaW5rIHdoZW4gdGhlIHRleHQgaXMgdG9vIGxvbmdcbiAgICBoZWlnaHQ6ICR7KHsgc2l6ZSwgdGhlbWUgfSkgPT4gYCR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX1gfTtcbiAgfVxuYFxuXG5leHBvcnQgdHlwZSBJY29uUHJvcHMgPSB7XG4gIHNpemU/OiBrZXlvZiB0eXBlb2YgU0laRVNcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuLyoqXG4gKiBMb2dvIGNvbXBvbmVudCBpcyB1c2VkIHRvIHJlbmRlciBhIHNldCBvZiBsb2dvcy4gVGhlaXIgc3R5bGUgY2Fubm90IGJlIGNoYW5nZWRcbiAqL1xuZXhwb3J0IGNvbnN0IEljb24gPSAoeyBzaXplID0gJ3NtYWxsJywgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBJY29uUHJvcHMpID0+IChcbiAgPFN0eWxlZEljb24gY2xhc3NOYW1lPXtjbGFzc05hbWV9IHNpemU9e3NpemV9IHZpZXdCb3g9XCIwIDAgMjAgMjBcIj5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkSWNvbj5cbilcbiJdfQ== */"));
+const style_css = require("./style.css.cjs");
 const Icon = ({
   size = "small",
   className,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { className, size, viewBox: "0 0 20 20", children });
+}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: `${className ? `${className} ` : ""}${style_css.logo[size]}`, viewBox: "0 0 20 20", children });
 exports.Icon = Icon;

package/dist/components/Logo/Icon.d.ts

@@ -1,10 +1,5 @@
 import type { ReactNode } from 'react';
-declare const SIZES: {
-    readonly large: "400";
-    readonly medium: "250";
-    readonly small: "200";
-    readonly xlarge: "700";
-};
+import type { SIZES } from './constant';
 export type IconProps = {
     size?: keyof typeof SIZES;
     className?: string;
@@ -14,4 +9,3 @@ export type IconProps = {
  * Logo component is used to render a set of logos. Their style cannot be changed
  */
 export declare const Icon: ({ size, className, children }: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Logo/Icon.js

@@ -1,34 +1,11 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const SIZES = {
-  large: "400",
-  medium: "250",
-  small: "200",
-  xlarge: "700"
-};
-const StyledIcon = /* @__PURE__ */ _styled("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["size"].includes(prop),
-  target: "e1bc5p840"
-} : {
-  shouldForwardProp: (prop) => !["size"].includes(prop),
-  target: "e1bc5p840",
-  label: "StyledIcon"
-})("&{width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";min-width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";height:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0xvZ28vSWNvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY2dDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL0xvZ28vSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuXG5jb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICc0MDAnLFxuICBtZWRpdW06ICcyNTAnLFxuICBzbWFsbDogJzIwMCcsXG4gIHhsYXJnZTogJzcwMCcsXG59IGFzIGNvbnN0XG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoJ3N2ZycsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsnc2l6ZSddLmluY2x1ZGVzKHByb3ApLFxufSk8eyBzaXplOiBrZXlvZiB0eXBlb2YgU0laRVMgfT5gXG4gICYge1xuICAgIHdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07XG4gICAgbWluLXdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07IC8vIFRoaXMgaXMgdG8gYXZvaWQgdGhlIGljb24gdG8gc2hyaW5rIHdoZW4gdGhlIHRleHQgaXMgdG9vIGxvbmdcbiAgICBoZWlnaHQ6ICR7KHsgc2l6ZSwgdGhlbWUgfSkgPT4gYCR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX1gfTtcbiAgfVxuYFxuXG5leHBvcnQgdHlwZSBJY29uUHJvcHMgPSB7XG4gIHNpemU/OiBrZXlvZiB0eXBlb2YgU0laRVNcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbn1cblxuLyoqXG4gKiBMb2dvIGNvbXBvbmVudCBpcyB1c2VkIHRvIHJlbmRlciBhIHNldCBvZiBsb2dvcy4gVGhlaXIgc3R5bGUgY2Fubm90IGJlIGNoYW5nZWRcbiAqL1xuZXhwb3J0IGNvbnN0IEljb24gPSAoeyBzaXplID0gJ3NtYWxsJywgY2xhc3NOYW1lLCBjaGlsZHJlbiB9OiBJY29uUHJvcHMpID0+IChcbiAgPFN0eWxlZEljb24gY2xhc3NOYW1lPXtjbGFzc05hbWV9IHNpemU9e3NpemV9IHZpZXdCb3g9XCIwIDAgMjAgMjBcIj5cbiAgICB7Y2hpbGRyZW59XG4gIDwvU3R5bGVkSWNvbj5cbilcbiJdfQ== */"));
+import { logo } from "./style.css.js";
 const Icon = ({
   size = "small",
   className,
   children
-}) => /* @__PURE__ */ jsx(StyledIcon, { className, size, viewBox: "0 0 20 20", children });
+}) => /* @__PURE__ */ jsx("svg", { className: `${className ? `${className} ` : ""}${logo[size]}`, viewBox: "0 0 20 20", children });
 export {
   Icon
 };

package/dist/components/Logo/constant.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SIZES = {
+  large: "400",
+  medium: "250",
+  small: "200",
+  xlarge: "700"
+};
+exports.SIZES = SIZES;

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

@@ -0,0 +1,6 @@
+export declare const SIZES: {
+    readonly large: "400";
+    readonly medium: "250";
+    readonly small: "200";
+    readonly xlarge: "700";
+};

package/dist/components/Logo/constant.js

@@ -0,0 +1,9 @@
+const SIZES = {
+  large: "400",
+  medium: "250",
+  small: "200",
+  xlarge: "700"
+};
+export {
+  SIZES
+};

package/dist/components/Logo/style.css.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const constant = require("./constant.cjs");
+const themes = require("@ultraviolet/themes");
+fileScope.setFileScope("src/components/Logo/style.css.ts", "@ultraviolet/icons");
+const logo = css.styleVariants(Object.fromEntries(Object.keys(constant.SIZES).map((size) => [size, {
+  width: themes.theme.sizing[constant.SIZES[size]],
+  minWidth: themes.theme.sizing[constant.SIZES[size]],
+  height: themes.theme.sizing[constant.SIZES[size]]
+}])));
+fileScope.endFileScope();
+exports.logo = logo;

package/dist/components/Logo/style.css.d.ts

@@ -0,0 +1 @@
+export declare const logo: Record<string | number, string>;

package/dist/components/Logo/style.css.js

@@ -0,0 +1,14 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { styleVariants } from "@vanilla-extract/css";
+import { SIZES } from "./constant.js";
+import { theme } from "@ultraviolet/themes";
+setFileScope("src/components/Logo/style.css.ts", "@ultraviolet/icons");
+const logo = styleVariants(Object.fromEntries(Object.keys(SIZES).map((size) => [size, {
+  width: theme.sizing[SIZES[size]],
+  minWidth: theme.sizing[SIZES[size]],
+  height: theme.sizing[SIZES[size]]
+}])));
+endFileScope();
+export {
+  logo
+};

package/dist/components/ProductIcon/Icon.cjs

@@ -2,51 +2,12 @@
 "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 SIZES = {
-  large: "600",
-  medium: "500",
-  small: "400",
-  xlarge: "800",
-  xsmall: "300"
-};
-const StyledIcon = /* @__PURE__ */ _styled__default.default("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "e1igpg8x0"
-} : {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "e1igpg8x0",
-  label: "StyledIcon"
-})("&{width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";min-width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";height:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";}path[fill].fill,g[fill].fill>*,g.fill>*{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => `${theme.colors.other.icon.product[variant][disabled ? "fillDisabled" : "fill"]}`, ";}path[fill].fillStrong,g[fill].fillStrong>*,g.fillStrong>*{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => `${theme.colors.other.icon.product[variant][disabled ? "fillStrongDisabled" : "fillStrong"]}`, ";}path[fill].fillWeak,g[fill].fillWeak>*,g.fillWeak>*{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => `${theme.colors.other.icon.product[variant][disabled ? "fillWeakDisabled" : "fillWeak"]}`, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL1Byb2R1Y3RJY29uL0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCdUUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvaWNvbnMvc3JjL2NvbXBvbmVudHMvUHJvZHVjdEljb24vSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuXG50eXBlIFZhcmlhbnRzID0gJ3ByaW1hcnknIHwgJ2RhbmdlcicgfCAnd2FybmluZycgfCAnb3JpZ2luYWwnXG5cbmV4cG9ydCBjb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICc2MDAnLFxuICBtZWRpdW06ICc1MDAnLFxuICBzbWFsbDogJzQwMCcsXG4gIHhsYXJnZTogJzgwMCcsXG4gIHhzbWFsbDogJzMwMCcsXG59IGFzIGNvbnN0XG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoJ3N2ZycsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsndmFyaWFudCcsICdkaXNhYmxlZCddLmluY2x1ZGVzKHByb3ApLFxufSk8eyB2YXJpYW50OiBWYXJpYW50czsgZGlzYWJsZWQ/OiBib29sZWFuOyBzaXplOiBrZXlvZiB0eXBlb2YgU0laRVMgfT5gXG4gICYge1xuICAgIHdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07XG4gICAgbWluLXdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07IC8vIFRoaXMgaXMgdG8gYXZvaWQgdGhlIGljb24gdG8gc2hyaW5rIHdoZW4gdGhlIHRleHQgaXMgdG9vIGxvbmdcbiAgICBoZWlnaHQ6ICR7KHsgc2l6ZSwgdGhlbWUgfSkgPT4gYCR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX1gfTtcbiAgfVxuXG4gIHBhdGhbZmlsbF0uZmlsbCxcbiAgZ1tmaWxsXS5maWxsID4gKixcbiAgZy5maWxsID4gKiB7XG4gICAgZmlsbDogJHsoeyB0aGVtZSwgdmFyaWFudCwgZGlzYWJsZWQgfSkgPT5cbiAgICAgIGAke1xuICAgICAgICB0aGVtZS5jb2xvcnMub3RoZXIuaWNvbi5wcm9kdWN0W3ZhcmlhbnRdW1xuICAgICAgICAgIGRpc2FibGVkID8gJ2ZpbGxEaXNhYmxlZCcgOiAnZmlsbCdcbiAgICAgICAgXVxuICAgICAgfWB9O1xuICB9XG5cbiAgcGF0aFtmaWxsXS5maWxsU3Ryb25nLFxuICBnW2ZpbGxdLmZpbGxTdHJvbmcgPiAqLFxuICBnLmZpbGxTdHJvbmcgPiAqIHtcbiAgICBmaWxsOiAkeyh7IHRoZW1lLCB2YXJpYW50LCBkaXNhYmxlZCB9KSA9PlxuICAgICAgYCR7XG4gICAgICAgIHRoZW1lLmNvbG9ycy5vdGhlci5pY29uLnByb2R1Y3RbdmFyaWFudF1bXG4gICAgICAgICAgZGlzYWJsZWQgPyAnZmlsbFN0cm9uZ0Rpc2FibGVkJyA6ICdmaWxsU3Ryb25nJ1xuICAgICAgICBdXG4gICAgICB9YH07XG4gIH1cblxuICBwYXRoW2ZpbGxdLmZpbGxXZWFrLFxuICBnW2ZpbGxdLmZpbGxXZWFrID4gKixcbiAgZy5maWxsV2VhayA+ICoge1xuICAgIGZpbGw6ICR7KHsgdGhlbWUsIHZhcmlhbnQsIGRpc2FibGVkIH0pID0+XG4gICAgICBgJHtcbiAgICAgICAgdGhlbWUuY29sb3JzLm90aGVyLmljb24ucHJvZHVjdFt2YXJpYW50XVtcbiAgICAgICAgICBkaXNhYmxlZCA/ICdmaWxsV2Vha0Rpc2FibGVkJyA6ICdmaWxsV2VhaydcbiAgICAgICAgXVxuICAgICAgfWB9O1xuICB9XG5gXG5cbmV4cG9ydCB0eXBlIEljb25Qcm9wcyA9IHtcbiAgdmFyaWFudD86IFZhcmlhbnRzXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBzaXplPzoga2V5b2YgdHlwZW9mIFNJWkVTXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbi8qKlxuICogUHJvZHVjdEljb24gY29tcG9uZW50IGlzIHVzZWQgdG8gcmVuZGVyIGEgc2V0IG9mIGljb25zIHRoYXQgYXJlIGxpbmtlZCB0byBhIHByb2R1Y3Qgb3Igc2VydmljZS5cbiAqIFRob3NlIGljb25zIGFyZSBtYWRlIG9mIG11bHRpcGxlIGNvbG9ycyB0aGF0IGNoYW5nZXMgYXV0b21hdGljYWxseSBiYXNlZCBvbiB0aGUgY3VycmVudCB0aGVtZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEljb24gPSAoe1xuICB2YXJpYW50ID0gJ3ByaW1hcnknLFxuICBkaXNhYmxlZCxcbiAgc2l6ZSA9ICdzbWFsbCcsXG4gIGNsYXNzTmFtZSxcbiAgY2hpbGRyZW4sXG59OiBJY29uUHJvcHMpID0+IChcbiAgPFN0eWxlZEljb25cbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgc2l6ZT17c2l6ZX1cbiAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgIHZpZXdCb3g9XCIwIDAgNjQgNjRcIlxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L1N0eWxlZEljb24+XG4pXG4iXX0= */"));
+const styles_css = require("./styles.css.cjs");
 const Icon = ({
   variant = "primary",
   disabled,
   size = "small",
   className,
   children
-}) => /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { className, disabled, size, variant, viewBox: "0 0 64 64", children });
+}) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: `${className ? `${className} ` : ""}${styles_css.productIconSizes[size]} ${styles_css.productIconVariants[`${variant}${disabled ? "Disabled" : ""}`]}`, viewBox: "0 0 64 64", children });
 exports.Icon = Icon;
-exports.SIZES = SIZES;

package/dist/components/ProductIcon/Icon.d.ts

@@ -1,12 +1,6 @@
 import type { ReactNode } from 'react';
-type Variants = 'primary' | 'danger' | 'warning' | 'original';
-export declare const SIZES: {
-    readonly large: "600";
-    readonly medium: "500";
-    readonly small: "400";
-    readonly xlarge: "800";
-    readonly xsmall: "300";
-};
+import type { SIZES, VARIANTS } from './constants';
+type Variants = (typeof VARIANTS)[number];
 export type IconProps = {
     variant?: Variants;
     disabled?: boolean;

package/dist/components/ProductIcon/Icon.js

@@ -1,50 +1,13 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
-const SIZES = {
-  large: "600",
-  medium: "500",
-  small: "400",
-  xlarge: "800",
-  xsmall: "300"
-};
-const StyledIcon = /* @__PURE__ */ _styled("svg", process.env.NODE_ENV === "production" ? {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "e1igpg8x0"
-} : {
-  shouldForwardProp: (prop) => !["variant", "disabled"].includes(prop),
-  target: "e1igpg8x0",
-  label: "StyledIcon"
-})("&{width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";min-width:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";height:", ({
-  size,
-  theme
-}) => `${theme.sizing[SIZES[size]]}`, ";}path[fill].fill,g[fill].fill>*,g.fill>*{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => `${theme.colors.other.icon.product[variant][disabled ? "fillDisabled" : "fill"]}`, ";}path[fill].fillStrong,g[fill].fillStrong>*,g.fillStrong>*{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => `${theme.colors.other.icon.product[variant][disabled ? "fillStrongDisabled" : "fillStrong"]}`, ";}path[fill].fillWeak,g[fill].fillWeak>*,g.fillWeak>*{fill:", ({
-  theme,
-  variant,
-  disabled
-}) => `${theme.colors.other.icon.product[variant][disabled ? "fillWeakDisabled" : "fillWeak"]}`, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2ljb25zL3NyYy9jb21wb25lbnRzL1Byb2R1Y3RJY29uL0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCdUUiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvaWNvbnMvc3JjL2NvbXBvbmVudHMvUHJvZHVjdEljb24vSWNvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgdHlwZSB7IFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0J1xuXG50eXBlIFZhcmlhbnRzID0gJ3ByaW1hcnknIHwgJ2RhbmdlcicgfCAnd2FybmluZycgfCAnb3JpZ2luYWwnXG5cbmV4cG9ydCBjb25zdCBTSVpFUyA9IHtcbiAgbGFyZ2U6ICc2MDAnLFxuICBtZWRpdW06ICc1MDAnLFxuICBzbWFsbDogJzQwMCcsXG4gIHhsYXJnZTogJzgwMCcsXG4gIHhzbWFsbDogJzMwMCcsXG59IGFzIGNvbnN0XG5cbmNvbnN0IFN0eWxlZEljb24gPSBzdHlsZWQoJ3N2ZycsIHtcbiAgc2hvdWxkRm9yd2FyZFByb3A6IHByb3AgPT4gIVsndmFyaWFudCcsICdkaXNhYmxlZCddLmluY2x1ZGVzKHByb3ApLFxufSk8eyB2YXJpYW50OiBWYXJpYW50czsgZGlzYWJsZWQ/OiBib29sZWFuOyBzaXplOiBrZXlvZiB0eXBlb2YgU0laRVMgfT5gXG4gICYge1xuICAgIHdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07XG4gICAgbWluLXdpZHRoOiAkeyh7IHNpemUsIHRoZW1lIH0pID0+IGAke3RoZW1lLnNpemluZ1tTSVpFU1tzaXplXV19YH07IC8vIFRoaXMgaXMgdG8gYXZvaWQgdGhlIGljb24gdG8gc2hyaW5rIHdoZW4gdGhlIHRleHQgaXMgdG9vIGxvbmdcbiAgICBoZWlnaHQ6ICR7KHsgc2l6ZSwgdGhlbWUgfSkgPT4gYCR7dGhlbWUuc2l6aW5nW1NJWkVTW3NpemVdXX1gfTtcbiAgfVxuXG4gIHBhdGhbZmlsbF0uZmlsbCxcbiAgZ1tmaWxsXS5maWxsID4gKixcbiAgZy5maWxsID4gKiB7XG4gICAgZmlsbDogJHsoeyB0aGVtZSwgdmFyaWFudCwgZGlzYWJsZWQgfSkgPT5cbiAgICAgIGAke1xuICAgICAgICB0aGVtZS5jb2xvcnMub3RoZXIuaWNvbi5wcm9kdWN0W3ZhcmlhbnRdW1xuICAgICAgICAgIGRpc2FibGVkID8gJ2ZpbGxEaXNhYmxlZCcgOiAnZmlsbCdcbiAgICAgICAgXVxuICAgICAgfWB9O1xuICB9XG5cbiAgcGF0aFtmaWxsXS5maWxsU3Ryb25nLFxuICBnW2ZpbGxdLmZpbGxTdHJvbmcgPiAqLFxuICBnLmZpbGxTdHJvbmcgPiAqIHtcbiAgICBmaWxsOiAkeyh7IHRoZW1lLCB2YXJpYW50LCBkaXNhYmxlZCB9KSA9PlxuICAgICAgYCR7XG4gICAgICAgIHRoZW1lLmNvbG9ycy5vdGhlci5pY29uLnByb2R1Y3RbdmFyaWFudF1bXG4gICAgICAgICAgZGlzYWJsZWQgPyAnZmlsbFN0cm9uZ0Rpc2FibGVkJyA6ICdmaWxsU3Ryb25nJ1xuICAgICAgICBdXG4gICAgICB9YH07XG4gIH1cblxuICBwYXRoW2ZpbGxdLmZpbGxXZWFrLFxuICBnW2ZpbGxdLmZpbGxXZWFrID4gKixcbiAgZy5maWxsV2VhayA+ICoge1xuICAgIGZpbGw6ICR7KHsgdGhlbWUsIHZhcmlhbnQsIGRpc2FibGVkIH0pID0+XG4gICAgICBgJHtcbiAgICAgICAgdGhlbWUuY29sb3JzLm90aGVyLmljb24ucHJvZHVjdFt2YXJpYW50XVtcbiAgICAgICAgICBkaXNhYmxlZCA/ICdmaWxsV2Vha0Rpc2FibGVkJyA6ICdmaWxsV2VhaydcbiAgICAgICAgXVxuICAgICAgfWB9O1xuICB9XG5gXG5cbmV4cG9ydCB0eXBlIEljb25Qcm9wcyA9IHtcbiAgdmFyaWFudD86IFZhcmlhbnRzXG4gIGRpc2FibGVkPzogYm9vbGVhblxuICBzaXplPzoga2V5b2YgdHlwZW9mIFNJWkVTXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG59XG5cbi8qKlxuICogUHJvZHVjdEljb24gY29tcG9uZW50IGlzIHVzZWQgdG8gcmVuZGVyIGEgc2V0IG9mIGljb25zIHRoYXQgYXJlIGxpbmtlZCB0byBhIHByb2R1Y3Qgb3Igc2VydmljZS5cbiAqIFRob3NlIGljb25zIGFyZSBtYWRlIG9mIG11bHRpcGxlIGNvbG9ycyB0aGF0IGNoYW5nZXMgYXV0b21hdGljYWxseSBiYXNlZCBvbiB0aGUgY3VycmVudCB0aGVtZS5cbiAqL1xuZXhwb3J0IGNvbnN0IEljb24gPSAoe1xuICB2YXJpYW50ID0gJ3ByaW1hcnknLFxuICBkaXNhYmxlZCxcbiAgc2l6ZSA9ICdzbWFsbCcsXG4gIGNsYXNzTmFtZSxcbiAgY2hpbGRyZW4sXG59OiBJY29uUHJvcHMpID0+IChcbiAgPFN0eWxlZEljb25cbiAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgc2l6ZT17c2l6ZX1cbiAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgIHZpZXdCb3g9XCIwIDAgNjQgNjRcIlxuICA+XG4gICAge2NoaWxkcmVufVxuICA8L1N0eWxlZEljb24+XG4pXG4iXX0= */"));
+import { productIconSizes, productIconVariants } from "./styles.css.js";
 const Icon = ({
   variant = "primary",
   disabled,
   size = "small",
   className,
   children
-}) => /* @__PURE__ */ jsx(StyledIcon, { className, disabled, size, variant, viewBox: "0 0 64 64", children });
+}) => /* @__PURE__ */ jsx("svg", { className: `${className ? `${className} ` : ""}${productIconSizes[size]} ${productIconVariants[`${variant}${disabled ? "Disabled" : ""}`]}`, viewBox: "0 0 64 64", children });
 export {
-  Icon,
-  SIZES
+  Icon
 };

package/dist/components/ProductIcon/__generated__/IconSdkJsProductIcon.cjs

@@ -16,7 +16,7 @@ const IconSdkJsProductIcon = ({
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M50.497 20.103a1 1 0 0 1 1.494.752l.006.114v21.937a1 1 0 0 1-.401.801l-.1.065-18.998 10.969a1 1 0 0 1-1.493-.753l-.007-.113V43.04h2v9.102l16.998-9.813V22.7l-7.32 4.227-1-1.732 8.82-5.092Z" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { className: "fillStrong", clipRule: "evenodd", d: "m21.54 24.884 9.96-5.75a1 1 0 0 1 1 0l9.96 5.75a1 1 0 0 1 .5.866v11.5a1 1 0 0 1-.5.867l-9.96 5.75a1 1 0 0 1-1 0l-9.96-5.75a1 1 0 0 1-.5-.866v-11.5a1 1 0 0 1 .5-.867m19.419 1.444-8.96-5.172-8.96 5.172v10.345L32 41.843l8.96-5.172z", fill: "#A060F6", fillRule: "evenodd" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { className: "JS", clipRule: "evenodd", d: "M33.27 34.82q.59.25 1.32.25.77 0 1.33-.28a2.1 2.1 0 0 0 .85-.77q.29-.48.29-1.04 0-.65-.31-1.05a2 2 0 0 0-.74-.6 8 8 0 0 0-1.11-.4 11 11 0 0 1-.78-.26 1.6 1.6 0 0 1-.46-.3.66.66 0 0 1-.18-.47q0-.4.24-.61.25-.21.66-.21.47 0 .75.24a.78.78 0 0 1 .31.59h1.54q-.07-.94-.75-1.46-.67-.53-1.75-.53-.72 0-1.28.25a1.94 1.94 0 0 0-.87.7q-.31.46-.31 1.08 0 .66.3 1.06.31.39.73.59a9 9 0 0 0 1.11.39q.5.14.78.26.29.11.48.31a.7.7 0 0 1 .19.51q0 .38-.28.62-.28.23-.77.23-.48 0-.76-.25-.27-.25-.3-.68H32q.01.64.35 1.11t.92.72m-2.07-1.9v-4.9h-1.41v4.9q0 .42-.2.66t-.58.24q-.39 0-.6-.25-.201-.25-.21-.7h-1.4q0 1.04.61 1.62.62.58 1.62.58.99 0 1.58-.56.59-.57.59-1.59", fill: "#A060F6", fillRule: "evenodd" })
+      /* @__PURE__ */ jsxRuntime.jsx("path", { className: "fillStrong", clipRule: "evenodd", d: "M33.27 34.82q.59.25 1.32.25.77 0 1.33-.28a2.1 2.1 0 0 0 .85-.77q.29-.48.29-1.04 0-.65-.31-1.05a2 2 0 0 0-.74-.6 8 8 0 0 0-1.11-.4 11 11 0 0 1-.78-.26 1.6 1.6 0 0 1-.46-.3.66.66 0 0 1-.18-.47q0-.4.24-.61.25-.21.66-.21.47 0 .75.24a.78.78 0 0 1 .31.59h1.54q-.07-.94-.75-1.46-.67-.53-1.75-.53-.72 0-1.28.25a1.94 1.94 0 0 0-.87.7q-.31.46-.31 1.08 0 .66.3 1.06.31.39.73.59a9 9 0 0 0 1.11.39q.5.14.78.26.29.11.48.31a.7.7 0 0 1 .19.51q0 .38-.28.62-.28.23-.77.23-.48 0-.76-.25-.27-.25-.3-.68H32q.01.64.35 1.11t.92.72m-2.07-1.9v-4.9h-1.41v4.9q0 .42-.2.66t-.58.24q-.39 0-.6-.25-.201-.25-.21-.7h-1.4q0 1.04.61 1.62.62.58 1.62.58.99 0 1.58-.56.59-.57.59-1.59", fill: "#A060F6", fillRule: "evenodd" })
     ] })
   ] }) })
 );

package/dist/components/ProductIcon/__generated__/IconSdkJsProductIcon.js

@@ -14,7 +14,7 @@ const IconSdkJsProductIcon = ({
         /* @__PURE__ */ jsx("path", { d: "M50.497 20.103a1 1 0 0 1 1.494.752l.006.114v21.937a1 1 0 0 1-.401.801l-.1.065-18.998 10.969a1 1 0 0 1-1.493-.753l-.007-.113V43.04h2v9.102l16.998-9.813V22.7l-7.32 4.227-1-1.732 8.82-5.092Z" })
       ] }),
       /* @__PURE__ */ jsx("path", { className: "fillStrong", clipRule: "evenodd", d: "m21.54 24.884 9.96-5.75a1 1 0 0 1 1 0l9.96 5.75a1 1 0 0 1 .5.866v11.5a1 1 0 0 1-.5.867l-9.96 5.75a1 1 0 0 1-1 0l-9.96-5.75a1 1 0 0 1-.5-.866v-11.5a1 1 0 0 1 .5-.867m19.419 1.444-8.96-5.172-8.96 5.172v10.345L32 41.843l8.96-5.172z", fill: "#A060F6", fillRule: "evenodd" }),
-      /* @__PURE__ */ jsx("path", { className: "JS", clipRule: "evenodd", d: "M33.27 34.82q.59.25 1.32.25.77 0 1.33-.28a2.1 2.1 0 0 0 .85-.77q.29-.48.29-1.04 0-.65-.31-1.05a2 2 0 0 0-.74-.6 8 8 0 0 0-1.11-.4 11 11 0 0 1-.78-.26 1.6 1.6 0 0 1-.46-.3.66.66 0 0 1-.18-.47q0-.4.24-.61.25-.21.66-.21.47 0 .75.24a.78.78 0 0 1 .31.59h1.54q-.07-.94-.75-1.46-.67-.53-1.75-.53-.72 0-1.28.25a1.94 1.94 0 0 0-.87.7q-.31.46-.31 1.08 0 .66.3 1.06.31.39.73.59a9 9 0 0 0 1.11.39q.5.14.78.26.29.11.48.31a.7.7 0 0 1 .19.51q0 .38-.28.62-.28.23-.77.23-.48 0-.76-.25-.27-.25-.3-.68H32q.01.64.35 1.11t.92.72m-2.07-1.9v-4.9h-1.41v4.9q0 .42-.2.66t-.58.24q-.39 0-.6-.25-.201-.25-.21-.7h-1.4q0 1.04.61 1.62.62.58 1.62.58.99 0 1.58-.56.59-.57.59-1.59", fill: "#A060F6", fillRule: "evenodd" })
+      /* @__PURE__ */ jsx("path", { className: "fillStrong", clipRule: "evenodd", d: "M33.27 34.82q.59.25 1.32.25.77 0 1.33-.28a2.1 2.1 0 0 0 .85-.77q.29-.48.29-1.04 0-.65-.31-1.05a2 2 0 0 0-.74-.6 8 8 0 0 0-1.11-.4 11 11 0 0 1-.78-.26 1.6 1.6 0 0 1-.46-.3.66.66 0 0 1-.18-.47q0-.4.24-.61.25-.21.66-.21.47 0 .75.24a.78.78 0 0 1 .31.59h1.54q-.07-.94-.75-1.46-.67-.53-1.75-.53-.72 0-1.28.25a1.94 1.94 0 0 0-.87.7q-.31.46-.31 1.08 0 .66.3 1.06.31.39.73.59a9 9 0 0 0 1.11.39q.5.14.78.26.29.11.48.31a.7.7 0 0 1 .19.51q0 .38-.28.62-.28.23-.77.23-.48 0-.76-.25-.27-.25-.3-.68H32q.01.64.35 1.11t.92.72m-2.07-1.9v-4.9h-1.41v4.9q0 .42-.2.66t-.58.24q-.39 0-.6-.25-.201-.25-.21-.7h-1.4q0 1.04.61 1.62.62.58 1.62.58.99 0 1.58-.56.59-.57.59-1.59", fill: "#A060F6", fillRule: "evenodd" })
     ] })
   ] }) })
 );

package/dist/components/ProductIcon/constants.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SIZES = {
+  large: "600",
+  medium: "500",
+  small: "400",
+  xlarge: "800",
+  xsmall: "300"
+};
+const VARIANTS = ["primary", "danger", "warning", "original"];
+exports.SIZES = SIZES;
+exports.VARIANTS = VARIANTS;

package/dist/components/ProductIcon/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const SIZES: {
+    readonly large: "600";
+    readonly medium: "500";
+    readonly small: "400";
+    readonly xlarge: "800";
+    readonly xsmall: "300";
+};
+export declare const VARIANTS: readonly ["primary", "danger", "warning", "original"];

package/dist/components/ProductIcon/constants.js

@@ -0,0 +1,12 @@
+const SIZES = {
+  large: "600",
+  medium: "500",
+  small: "400",
+  xlarge: "800",
+  xsmall: "300"
+};
+const VARIANTS = ["primary", "danger", "warning", "original"];
+export {
+  SIZES,
+  VARIANTS
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fileScope = require("@vanilla-extract/css/fileScope");
+const themes = require("@ultraviolet/themes");
+const constants = require("./constants.cjs");
+const css = require("@vanilla-extract/css");
+fileScope.setFileScope("src/components/ProductIcon/styles.css.ts", "@ultraviolet/icons");
+const PROMINENCES = ["Weak", "Strong", ""];
+function generateSizeStyle(size) {
+  return {
+    height: themes.theme.sizing[constants.SIZES[size]],
+    width: themes.theme.sizing[constants.SIZES[size]],
+    minWidth: themes.theme.sizing[constants.SIZES[size]]
+  };
+}
+function generateVariantStyle(variant, disabled, prominence) {
+  const fillColor = `fill${prominence}${disabled ? "Disabled" : ""}`;
+  return {
+    fill: themes.theme.colors.other.icon.product[variant][fillColor]
+  };
+}
+const productIconSizes = css.styleVariants(Object.fromEntries(Object.keys(constants.SIZES).map((size) => [size, generateSizeStyle(size)])));
+const productIconVariants = css.styleVariants({
+  ...Object.fromEntries(constants.VARIANTS.map((variant) => [variant, {}])),
+  ...Object.fromEntries(constants.VARIANTS.map((variant) => [`${variant}Disabled`, []]))
+});
+PROMINENCES.forEach((prominence) => {
+  constants.VARIANTS.forEach((variant) => {
+    const variantClass = productIconVariants[variant];
+    const variantClassDisabled = productIconVariants[`${variant}Disabled`];
+    const selectorDefault = (disabled) => `${disabled ? variantClassDisabled : variantClass} .fill${prominence}`;
+    const selectorGfill = (disabled) => `${disabled ? variantClassDisabled : variantClass} g.fill${prominence} > *`;
+    const selectorPathField = (disabled) => `${disabled ? variantClassDisabled : variantClass} path[fill].fill${prominence}`;
+    css.globalStyle(selectorDefault(true), generateVariantStyle(variant, true, prominence));
+    css.globalStyle(selectorGfill(true), generateVariantStyle(variant, true, prominence));
+    css.globalStyle(selectorPathField(true), generateVariantStyle(variant, true, prominence));
+    css.globalStyle(selectorDefault(), generateVariantStyle(variant, false, prominence));
+    css.globalStyle(selectorGfill(), generateVariantStyle(variant, false, prominence));
+    css.globalStyle(selectorPathField(), generateVariantStyle(variant, false, prominence));
+  });
+});
+fileScope.endFileScope();
+exports.productIconSizes = productIconSizes;
+exports.productIconVariants = productIconVariants;

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

@@ -0,0 +1,2 @@
+export declare const productIconSizes: Record<string | number, string>;
+export declare const productIconVariants: Record<string | number, string>;

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

@@ -0,0 +1,44 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { theme } from "@ultraviolet/themes";
+import { SIZES, VARIANTS } from "./constants.js";
+import { styleVariants, globalStyle } from "@vanilla-extract/css";
+setFileScope("src/components/ProductIcon/styles.css.ts", "@ultraviolet/icons");
+const PROMINENCES = ["Weak", "Strong", ""];
+function generateSizeStyle(size) {
+  return {
+    height: theme.sizing[SIZES[size]],
+    width: theme.sizing[SIZES[size]],
+    minWidth: theme.sizing[SIZES[size]]
+  };
+}
+function generateVariantStyle(variant, disabled, prominence) {
+  const fillColor = `fill${prominence}${disabled ? "Disabled" : ""}`;
+  return {
+    fill: theme.colors.other.icon.product[variant][fillColor]
+  };
+}
+const productIconSizes = styleVariants(Object.fromEntries(Object.keys(SIZES).map((size) => [size, generateSizeStyle(size)])));
+const productIconVariants = styleVariants({
+  ...Object.fromEntries(VARIANTS.map((variant) => [variant, {}])),
+  ...Object.fromEntries(VARIANTS.map((variant) => [`${variant}Disabled`, []]))
+});
+PROMINENCES.forEach((prominence) => {
+  VARIANTS.forEach((variant) => {
+    const variantClass = productIconVariants[variant];
+    const variantClassDisabled = productIconVariants[`${variant}Disabled`];
+    const selectorDefault = (disabled) => `${disabled ? variantClassDisabled : variantClass} .fill${prominence}`;
+    const selectorGfill = (disabled) => `${disabled ? variantClassDisabled : variantClass} g.fill${prominence} > *`;
+    const selectorPathField = (disabled) => `${disabled ? variantClassDisabled : variantClass} path[fill].fill${prominence}`;
+    globalStyle(selectorDefault(true), generateVariantStyle(variant, true, prominence));
+    globalStyle(selectorGfill(true), generateVariantStyle(variant, true, prominence));
+    globalStyle(selectorPathField(true), generateVariantStyle(variant, true, prominence));
+    globalStyle(selectorDefault(), generateVariantStyle(variant, false, prominence));
+    globalStyle(selectorGfill(), generateVariantStyle(variant, false, prominence));
+    globalStyle(selectorPathField(), generateVariantStyle(variant, false, prominence));
+  });
+});
+endFileScope();
+export {
+  productIconSizes,
+  productIconVariants
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/icons",
-  "version": "4.0.4",
+  "version": "4.1.0-beta.3",
   "description": "Ultraviolet Icons",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -110,7 +110,10 @@
     "@utils/test": "0.0.1"
   },
   "dependencies": {
-    "@ultraviolet/themes": "2.0.0"
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/dynamic": "2.1.5",
+    "@vanilla-extract/recipes": "0.5.7",
+    "@ultraviolet/themes": "2.1.0-beta.1"
   },
   "scripts": {
     "type:generate": "tsc --declaration -p tsconfig.build.json",