@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

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

@@ -0,0 +1,17 @@
+/* empty css                          */
+var arrowIcon = "uv_jd0jfn0";
+var dropableArea = "uv_jd0jfn1";
+var summaryClass = "uv_jd0jfn2";
+var detailsClass = "uv_jd0jfn3";
+var content = "uv_jd0jfn4";
+var stackClass = "uv_jd0jfn5";
+var dragIconContainer = "uv_jd0jfn6";
+export {
+  arrowIcon,
+  content,
+  detailsClass,
+  dragIconContainer,
+  dropableArea,
+  stackClass,
+  summaryClass
+};

package/dist/components/GlobalAlert/GlobalAlertLink.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Link } from '../Link';
-export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, }: Omit<ComponentProps<typeof Link>, "sentiment" | "prominence" | "size">) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const GlobalAlertLink: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<ComponentProps<typeof Link>, "sentiment" | "prominence" | "size">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/GlobalAlert/GlobalAlertLink.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import { useTheme } from "@emotion/react";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
 import { Link } from "../Link/index.js";
 const GlobalAlertLink = ({
   children,
@@ -12,12 +12,29 @@ const GlobalAlertLink = ({
   onClick,
   "aria-label": ariaLabel,
   oneLine = false,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
-  const {
-    theme
-  } = useTheme();
-  return /* @__PURE__ */ jsx(Link, { "aria-label": ariaLabel, className, "data-testid": dataTestId, download, href, onClick, oneLine, prominence: theme === "light" ? "strong" : "stronger", rel, size: "small", target, variant: "inline", children });
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      "aria-label": ariaLabel,
+      className,
+      "data-testid": dataTestId,
+      download,
+      href,
+      onClick,
+      oneLine,
+      prominence: theme === "light" ? "strong" : "stronger",
+      rel,
+      size: "small",
+      style,
+      target,
+      variant: "inline",
+      children
+    }
+  );
 };
 export {
   GlobalAlertLink

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type GlobalAlertProps = {
     children: ReactNode;
     variant?: 'info' | 'danger' | 'promotional';
@@ -8,13 +8,14 @@ type GlobalAlertProps = {
     'data-testid'?: string;
     buttonText?: string;
     onClickButton?: () => void;
+    style?: CSSProperties;
 };
 /**
  * GlobalAlert is a component that is used to display a global alert message.
  * It has its own internal state and can be closed by clicking on the close button.
  */
 export declare const GlobalAlert: {
-    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, }: GlobalAlertProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
-    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, }: Omit<import("react").ComponentProps<typeof import("..").Link>, "sentiment" | "prominence" | "size">) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, variant, onClose, closable, buttonText, onClickButton, className, "data-testid": dataTestId, style, }: GlobalAlertProps): import("react/jsx-runtime").JSX.Element | null;
+    Link: ({ children, href, target, download, rel, className, onClick, "aria-label": ariaLabel, oneLine, "data-testid": dataTestId, style, }: Omit<import("react").ComponentProps<typeof import("..").Link>, "sentiment" | "prominence" | "size">) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/GlobalAlert/index.js

@@ -1,37 +1,12 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon } from "@ultraviolet/icons";
 import { useReducer } from "react";
 import { Button } from "../Button/index.js";
-import { SIZE_HEIGHT } from "../Button/constants.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { GlobalAlertLink } from "./GlobalAlertLink.js";
-const CloseButton = /* @__PURE__ */ _styled(Button, process.env.NODE_ENV === "production" ? {
-  target: "ewvyccp1"
-} : {
-  target: "ewvyccp1",
-  label: "CloseButton"
-})("background:none;position:absolute;right:", ({
-  theme
-}) => theme.sizing[SIZE_HEIGHT.large], ";&:hover,&:focus,&:active{background:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0dsb2JhbEFsZXJ0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZa0MiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvdWx0cmF2aW9sZXQvdWx0cmF2aW9sZXQvcGFja2FnZXMvdWkvc3JjL2NvbXBvbmVudHMvR2xvYmFsQWxlcnQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgQ2xvc2VJY29uIH0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZVJlZHVjZXIgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IEJ1dHRvbiB9IGZyb20gJy4uL0J1dHRvbidcbmltcG9ydCB7IFNJWkVfSEVJR0hUIH0gZnJvbSAnLi4vQnV0dG9uL2NvbnN0YW50cydcbmltcG9ydCB7IFN0YWNrIH0gZnJvbSAnLi4vU3RhY2snXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVGV4dCdcbmltcG9ydCB7IEdsb2JhbEFsZXJ0TGluayB9IGZyb20gJy4vR2xvYmFsQWxlcnRMaW5rJ1xuXG5jb25zdCBDbG9zZUJ1dHRvbiA9IHN0eWxlZChCdXR0b24pYFxuICBiYWNrZ3JvdW5kOiBub25lO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIHJpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1tTSVpFX0hFSUdIVC5sYXJnZV19O1xuXG4gICY6aG92ZXIsXG4gICY6Zm9jdXMsXG4gICY6YWN0aXZlIHtcbiAgICBiYWNrZ3JvdW5kOiBub25lO1xuICB9XG5gXG5cbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZChTdGFjaylgXG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nWyc3MDAnXX07XG4gIHBhZGRpbmc6IDAgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zcGFjZVsnMiddfTtcblxuICAmW2RhdGEtdmFyaWFudD0naW5mbyddIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5pbmZvLmJhY2tncm91bmRTdHJvbmd9O1xuICB9XG5cbiAgJltkYXRhLXZhcmlhbnQ9J2RhbmdlciddIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5kYW5nZXIuYmFja2dyb3VuZFN0cm9uZ307XG4gIH1cblxuICAmW2RhdGEtdmFyaWFudD0ncHJvbW90aW9uYWwnXSB7XG4gICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PlxuICAgICAgdGhlbWUuY29sb3JzLm90aGVyLmdyYWRpZW50cy5iYWNrZ3JvdW5kLmxpbmVhci5hcXVhfTtcbiAgfVxuYFxuXG50eXBlIEdsb2JhbEFsZXJ0UHJvcHMgPSB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGVcbiAgdmFyaWFudD86ICdpbmZvJyB8ICdkYW5nZXInIHwgJ3Byb21vdGlvbmFsJ1xuICBvbkNsb3NlPzogKCkgPT4gdm9pZFxuICBjbG9zYWJsZT86IGJvb2xlYW5cbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbiAgYnV0dG9uVGV4dD86IHN0cmluZ1xuICBvbkNsaWNrQnV0dG9uPzogKCkgPT4gdm9pZFxufVxuXG4vKipcbiAqIEdsb2JhbEFsZXJ0IGlzIGEgY29tcG9uZW50IHRoYXQgaXMgdXNlZCB0byBkaXNwbGF5IGEgZ2xvYmFsIGFsZXJ0IG1lc3NhZ2UuXG4gKiBJdCBoYXMgaXRzIG93biBpbnRlcm5hbCBzdGF0ZSBhbmQgY2FuIGJlIGNsb3NlZCBieSBjbGlja2luZyBvbiB0aGUgY2xvc2UgYnV0dG9uLlxuICovXG5leHBvcnQgY29uc3QgR2xvYmFsQWxlcnQgPSAoe1xuICBjaGlsZHJlbixcbiAgdmFyaWFudCA9ICdpbmZvJyxcbiAgb25DbG9zZSxcbiAgY2xvc2FibGUgPSB0cnVlLFxuICBidXR0b25UZXh0LFxuICBvbkNsaWNrQnV0dG9uLFxuICBjbGFzc05hbWUsXG4gICdkYXRhLXRlc3RpZCc6IGRhdGFUZXN0SWQsXG59OiBHbG9iYWxBbGVydFByb3BzKSA9PiB7XG4gIGNvbnN0IFtvcGVuZWQsIHRvZ2dsZU9wZW5lZF0gPSB1c2VSZWR1Y2VyKHZhbHVlID0+ICF2YWx1ZSwgdHJ1ZSlcblxuICBpZiAoIW9wZW5lZCkge1xuICAgIHJldHVybiBudWxsXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxDb250YWluZXJcbiAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICBkYXRhLXRlc3RpZD17ZGF0YVRlc3RJZH1cbiAgICAgIGRhdGEtdmFyaWFudD17dmFyaWFudH1cbiAgICAgIGRpcmVjdGlvbj1cInJvd1wiXG4gICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgPlxuICAgICAgPFN0YWNrXG4gICAgICAgIGFsaWduSXRlbXM9XCJjZW50ZXJcIlxuICAgICAgICBkaXJlY3Rpb249XCJyb3dcIlxuICAgICAgICBnYXA9ezJ9XG4gICAgICAgIGp1c3RpZnlDb250ZW50PVwiY2VudGVyXCJcbiAgICAgID5cbiAgICAgICAgPFRleHQgYXM9XCJwXCIgc2VudGltZW50PVwid2hpdGVcIiB2YXJpYW50PVwiYm9keVNtYWxsXCI+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1RleHQ+XG4gICAgICAgIHtvbkNsaWNrQnV0dG9uICYmIGJ1dHRvblRleHQgPyAoXG4gICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgb25DbGljaz17b25DbGlja0J1dHRvbn1cbiAgICAgICAgICAgIHNlbnRpbWVudD1cIndoaXRlXCJcbiAgICAgICAgICAgIHNpemU9XCJzbWFsbFwiXG4gICAgICAgICAgICB2YXJpYW50PVwiZmlsbGVkXCJcbiAgICAgICAgICA+XG4gICAgICAgICAgICB7YnV0dG9uVGV4dH1cbiAgICAgICAgICA8L0J1dHRvbj5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICA8L1N0YWNrPlxuICAgICAge2Nsb3NhYmxlID8gKFxuICAgICAgICA8Q2xvc2VCdXR0b25cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICB0b2dnbGVPcGVuZWQoKVxuICAgICAgICAgICAgb25DbG9zZT8uKClcbiAgICAgICAgICB9fVxuICAgICAgICAgIHNlbnRpbWVudD1cInByaW1hcnlcIlxuICAgICAgICAgIHNpemU9XCJ4c21hbGxcIlxuICAgICAgICAgIHZhcmlhbnQ9XCJmaWxsZWRcIlxuICAgICAgICA+XG4gICAgICAgICAgPENsb3NlSWNvbiAvPlxuICAgICAgICA8L0Nsb3NlQnV0dG9uPlxuICAgICAgKSA6IG51bGx9XG4gICAgPC9Db250YWluZXI+XG4gIClcbn1cblxuR2xvYmFsQWxlcnQuTGluayA9IEdsb2JhbEFsZXJ0TGlua1xuIl19 */"));
-const Container = /* @__PURE__ */ _styled(Stack, process.env.NODE_ENV === "production" ? {
-  target: "ewvyccp0"
-} : {
-  target: "ewvyccp0",
-  label: "Container"
-})("width:100%;height:", ({
-  theme
-}) => theme.sizing["700"], ";padding:0 ", ({
-  theme
-}) => theme.space["2"], ";&[data-variant='info']{background-color:", ({
-  theme
-}) => theme.colors.info.backgroundStrong, ";}&[data-variant='danger']{background-color:", ({
-  theme
-}) => theme.colors.danger.backgroundStrong, ";}&[data-variant='promotional']{background:", ({
-  theme
-}) => theme.colors.other.gradients.background.linear.aqua, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0dsb2JhbEFsZXJ0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QitCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0dsb2JhbEFsZXJ0L2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0B1bHRyYXZpb2xldC9pY29ucydcbmltcG9ydCB0eXBlIHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VSZWR1Y2VyIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBCdXR0b24gfSBmcm9tICcuLi9CdXR0b24nXG5pbXBvcnQgeyBTSVpFX0hFSUdIVCB9IGZyb20gJy4uL0J1dHRvbi9jb25zdGFudHMnXG5pbXBvcnQgeyBTdGFjayB9IGZyb20gJy4uL1N0YWNrJ1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4uL1RleHQnXG5pbXBvcnQgeyBHbG9iYWxBbGVydExpbmsgfSBmcm9tICcuL0dsb2JhbEFsZXJ0TGluaydcblxuY29uc3QgQ2xvc2VCdXR0b24gPSBzdHlsZWQoQnV0dG9uKWBcbiAgYmFja2dyb3VuZDogbm9uZTtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICByaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbU0laRV9IRUlHSFQubGFyZ2VdfTtcblxuICAmOmhvdmVyLFxuICAmOmZvY3VzLFxuICAmOmFjdGl2ZSB7XG4gICAgYmFja2dyb3VuZDogbm9uZTtcbiAgfVxuYFxuXG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQoU3RhY2spYFxuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snNzAwJ119O1xuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbJzInXX07XG5cbiAgJltkYXRhLXZhcmlhbnQ9J2luZm8nXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMuaW5mby5iYWNrZ3JvdW5kU3Ryb25nfTtcbiAgfVxuXG4gICZbZGF0YS12YXJpYW50PSdkYW5nZXInXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMuZGFuZ2VyLmJhY2tncm91bmRTdHJvbmd9O1xuICB9XG5cbiAgJltkYXRhLXZhcmlhbnQ9J3Byb21vdGlvbmFsJ10ge1xuICAgIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT5cbiAgICAgIHRoZW1lLmNvbG9ycy5vdGhlci5ncmFkaWVudHMuYmFja2dyb3VuZC5saW5lYXIuYXF1YX07XG4gIH1cbmBcblxudHlwZSBHbG9iYWxBbGVydFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlXG4gIHZhcmlhbnQ/OiAnaW5mbycgfCAnZGFuZ2VyJyB8ICdwcm9tb3Rpb25hbCdcbiAgb25DbG9zZT86ICgpID0+IHZvaWRcbiAgY2xvc2FibGU/OiBib29sZWFuXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAnZGF0YS10ZXN0aWQnPzogc3RyaW5nXG4gIGJ1dHRvblRleHQ/OiBzdHJpbmdcbiAgb25DbGlja0J1dHRvbj86ICgpID0+IHZvaWRcbn1cblxuLyoqXG4gKiBHbG9iYWxBbGVydCBpcyBhIGNvbXBvbmVudCB0aGF0IGlzIHVzZWQgdG8gZGlzcGxheSBhIGdsb2JhbCBhbGVydCBtZXNzYWdlLlxuICogSXQgaGFzIGl0cyBvd24gaW50ZXJuYWwgc3RhdGUgYW5kIGNhbiBiZSBjbG9zZWQgYnkgY2xpY2tpbmcgb24gdGhlIGNsb3NlIGJ1dHRvbi5cbiAqL1xuZXhwb3J0IGNvbnN0IEdsb2JhbEFsZXJ0ID0gKHtcbiAgY2hpbGRyZW4sXG4gIHZhcmlhbnQgPSAnaW5mbycsXG4gIG9uQ2xvc2UsXG4gIGNsb3NhYmxlID0gdHJ1ZSxcbiAgYnV0dG9uVGV4dCxcbiAgb25DbGlja0J1dHRvbixcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxufTogR2xvYmFsQWxlcnRQcm9wcykgPT4ge1xuICBjb25zdCBbb3BlbmVkLCB0b2dnbGVPcGVuZWRdID0gdXNlUmVkdWNlcih2YWx1ZSA9PiAhdmFsdWUsIHRydWUpXG5cbiAgaWYgKCFvcGVuZWQpIHtcbiAgICByZXR1cm4gbnVsbFxuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8Q29udGFpbmVyXG4gICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgZGF0YS10ZXN0aWQ9e2RhdGFUZXN0SWR9XG4gICAgICBkYXRhLXZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICBkaXJlY3Rpb249XCJyb3dcIlxuICAgICAganVzdGlmeUNvbnRlbnQ9XCJjZW50ZXJcIlxuICAgID5cbiAgICAgIDxTdGFja1xuICAgICAgICBhbGlnbkl0ZW1zPVwiY2VudGVyXCJcbiAgICAgICAgZGlyZWN0aW9uPVwicm93XCJcbiAgICAgICAgZ2FwPXsyfVxuICAgICAgICBqdXN0aWZ5Q29udGVudD1cImNlbnRlclwiXG4gICAgICA+XG4gICAgICAgIDxUZXh0IGFzPVwicFwiIHNlbnRpbWVudD1cIndoaXRlXCIgdmFyaWFudD1cImJvZHlTbWFsbFwiPlxuICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgPC9UZXh0PlxuICAgICAgICB7b25DbGlja0J1dHRvbiAmJiBidXR0b25UZXh0ID8gKFxuICAgICAgICAgIDxCdXR0b25cbiAgICAgICAgICAgIG9uQ2xpY2s9e29uQ2xpY2tCdXR0b259XG4gICAgICAgICAgICBzZW50aW1lbnQ9XCJ3aGl0ZVwiXG4gICAgICAgICAgICBzaXplPVwic21hbGxcIlxuICAgICAgICAgICAgdmFyaWFudD1cImZpbGxlZFwiXG4gICAgICAgICAgPlxuICAgICAgICAgICAge2J1dHRvblRleHR9XG4gICAgICAgICAgPC9CdXR0b24+XG4gICAgICAgICkgOiBudWxsfVxuICAgICAgPC9TdGFjaz5cbiAgICAgIHtjbG9zYWJsZSA/IChcbiAgICAgICAgPENsb3NlQnV0dG9uXG4gICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgdG9nZ2xlT3BlbmVkKClcbiAgICAgICAgICAgIG9uQ2xvc2U/LigpXG4gICAgICAgICAgfX1cbiAgICAgICAgICBzZW50aW1lbnQ9XCJwcmltYXJ5XCJcbiAgICAgICAgICBzaXplPVwieHNtYWxsXCJcbiAgICAgICAgICB2YXJpYW50PVwiZmlsbGVkXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxDbG9zZUljb24gLz5cbiAgICAgICAgPC9DbG9zZUJ1dHRvbj5cbiAgICAgICkgOiBudWxsfVxuICAgIDwvQ29udGFpbmVyPlxuICApXG59XG5cbkdsb2JhbEFsZXJ0LkxpbmsgPSBHbG9iYWxBbGVydExpbmtcbiJdfQ== */"));
+import { container, closeButton } from "./styles.css.js";
 const GlobalAlert = ({
   children,
   variant = "info",
@@ -40,22 +15,63 @@ const GlobalAlert = ({
   buttonText,
   onClickButton,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const [opened, toggleOpened] = useReducer((value) => !value, true);
   if (!opened) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Container, { alignItems: "center", className, "data-testid": dataTestId, "data-variant": variant, direction: "row", justifyContent: "center", children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 2, justifyContent: "center", children: [
-      /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
-      onClickButton && buttonText ? /* @__PURE__ */ jsx(Button, { onClick: onClickButton, sentiment: "white", size: "small", variant: "filled", children: buttonText }) : null
-    ] }),
-    closable ? /* @__PURE__ */ jsx(CloseButton, { onClick: () => {
-      toggleOpened();
-      onClose?.();
-    }, sentiment: "primary", size: "xsmall", variant: "filled", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      alignItems: "center",
+      className: `${className ? `${className} ` : ""}${container[variant]}`,
+      "data-testid": dataTestId,
+      "data-variant": variant,
+      direction: "row",
+      justifyContent: "center",
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: "center",
+            direction: "row",
+            gap: 2,
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "white", variant: "bodySmall", children }),
+              onClickButton && buttonText ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: onClickButton,
+                  sentiment: "white",
+                  size: "small",
+                  variant: "filled",
+                  children: buttonText
+                }
+              ) : null
+            ]
+          }
+        ),
+        closable ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: closeButton,
+            onClick: () => {
+              toggleOpened();
+              onClose?.();
+            },
+            sentiment: "primary",
+            size: "xsmall",
+            variant: "filled",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : null
+      ]
+    }
+  );
 };
 GlobalAlert.Link = GlobalAlertLink;
 export {

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

@@ -0,0 +1,2 @@
+export declare const closeButton: string;
+export declare const container: Record<"danger" | "info" | "promotional", string>;

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

@@ -0,0 +1,7 @@
+/* empty css                          */
+var closeButton = "uv_1dgk2tq0";
+var container = { info: "uv_1dgk2tq2 uv_1dgk2tq1", danger: "uv_1dgk2tq3 uv_1dgk2tq1", promotional: "uv_1dgk2tq4 uv_1dgk2tq1" };
+export {
+  closeButton,
+  container
+};

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

@@ -1,4 +1,4 @@
-import type { ElementType, ReactNode, RefObject } from 'react';
+import type { CSSProperties, ElementType, ReactNode, RefObject } from 'react';
 type InfiniteScrollProps = {
     className?: string;
     'data-testid'?: string;
@@ -28,11 +28,12 @@ type InfiniteScrollProps = {
      * The distance from the bottom of the scrollable container where the `onLoadMore` function will be called.
      */
     heightThreshold?: number;
+    style?: CSSProperties;
 };
 /**
  * InfiniteScroll is a component that allows you to create a scrollable area with hidden pagination.
  * You can add it at the end of a list of items and it will call the `onLoadMore` function when the user scrolls to the bottom of the list.
  * The component will take the first parent that has as the scroll to listen on it. In some rare cases, if you need to change the scroll listener, you can use the `scrollParentRef` prop.
  */
-export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const InfiniteScroll: ({ className, "data-testid": dataTestId, onLoadMore, scrollParentRef, height, loader, id, as: Component, hasMore, heightThreshold, style, }: InfiniteScrollProps) => string | number | bigint | true | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InfiniteScroll/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { Loader } from "../Loader/index.js";
 const HEIGHT_THRESHOLD = 100;
@@ -13,7 +13,8 @@ const InfiniteScroll = ({
   id,
   as: Component = "div",
   hasMore = true,
-  heightThreshold = HEIGHT_THRESHOLD
+  heightThreshold = HEIGHT_THRESHOLD,
+  style
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const containerRef = useRef(null);
@@ -28,40 +29,37 @@ const InfiniteScroll = ({
       }, delay);
     };
   }, []);
-  const handleScroll = useCallback((scrollableContainer) => {
-    if (!containerRef.current) {
-      return;
-    }
-    if (!onLoadMore) {
-      return;
-    }
-    const {
-      scrollTop,
-      scrollHeight,
-      clientHeight
-    } = scrollableContainer;
-    if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
-      setIsLoading(true);
-      const result = onLoadMore();
-      if (result instanceof Promise) {
-        result.then(() => {
-          setIsLoading(false);
-        }).catch((error) => {
-          setIsLoading(false);
-          throw error;
-        });
+  const handleScroll = useCallback(
+    (scrollableContainer) => {
+      if (!containerRef.current) {
+        return;
       }
-    }
-  }, [onLoadMore, heightThreshold]);
+      if (!onLoadMore) {
+        return;
+      }
+      const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+      if (scrollTop + clientHeight >= scrollHeight - heightThreshold) {
+        setIsLoading(true);
+        const result = onLoadMore();
+        if (result instanceof Promise) {
+          result.then(() => {
+            setIsLoading(false);
+          }).catch((error) => {
+            setIsLoading(false);
+            throw error;
+          });
+        }
+      }
+    },
+    [onLoadMore, heightThreshold]
+  );
   useEffect(() => {
     if (!hasMore) {
       return;
     }
     let scrollableContainer = scrollParentRef?.current || containerRef.current?.parentElement;
     while (scrollableContainer && scrollableContainer !== document.body) {
-      const {
-        overflowY
-      } = window.getComputedStyle(scrollableContainer);
+      const { overflowY } = window.getComputedStyle(scrollableContainer);
       if (overflowY === "auto" || overflowY === "scroll") {
         break;
       }
@@ -70,7 +68,10 @@ const InfiniteScroll = ({
     if (!scrollableContainer) {
       return;
     }
-    const debouncedHandleScroll = debounce(() => handleScroll(scrollableContainer), 100);
+    const debouncedHandleScroll = debounce(
+      () => handleScroll(scrollableContainer),
+      100
+    );
     scrollableContainer.addEventListener("scroll", debouncedHandleScroll);
     return () => {
       scrollableContainer.removeEventListener("scroll", debouncedHandleScroll);
@@ -80,9 +81,17 @@ const InfiniteScroll = ({
   if (isLoading) {
     return localLoader;
   }
-  return /* @__PURE__ */ jsx(Component, { className, "data-testid": dataTestId, id, ref: containerRef, role: "feed", style: {
-    height
-  } });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className,
+      "data-testid": dataTestId,
+      id,
+      ref: containerRef,
+      role: "feed",
+      style: { height, ...style }
+    }
+  );
 };
 export {
   InfiniteScroll

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

@@ -0,0 +1,8 @@
+export declare const KEYS_MATCH: {
+    readonly backspace: "⌫";
+    readonly command: "⌘";
+    readonly control: "⌃";
+    readonly enter: "↵";
+    readonly option: "⌥";
+    readonly shift: "⇧";
+};

package/dist/components/Key/constants.js

@@ -0,0 +1,11 @@
+const KEYS_MATCH = {
+  backspace: "⌫",
+  command: "⌘",
+  control: "⌃",
+  enter: "↵",
+  option: "⌥",
+  shift: "⇧"
+};
+export {
+  KEYS_MATCH
+};

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

@@ -1,11 +1,4 @@
-export declare const KEYS_MATCH: {
-    readonly backspace: "⌫";
-    readonly command: "⌘";
-    readonly control: "⌃";
-    readonly enter: "↵";
-    readonly option: "⌥";
-    readonly shift: "⇧";
-};
+import type { CSSProperties } from 'react';
 type KeyProps = {
     children: string;
     prominence?: 'strong' | 'default';
@@ -15,9 +8,10 @@ type KeyProps = {
     id?: string;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * Key is a visual component used to display keyboard shortcuts.
  */
-export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, }: KeyProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Key: ({ children, prominence, disabled, size, sentiment, id, className, "data-testid": dataTestId, style, }: KeyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Key/index.js

@@ -1,60 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
-import _styled from "@emotion/styled/base";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Text } from "../Text/index.js";
-const KEYS_MATCH = {
-  backspace: "⌫",
-  command: "⌘",
-  control: "⌃",
-  enter: "↵",
-  option: "⌥",
-  shift: "⇧"
-};
-const KeyContainer = /* @__PURE__ */ _styled("kbd", process.env.NODE_ENV === "production" ? {
-  target: "eufi4n90"
-} : {
-  target: "eufi4n90",
-  label: "KeyContainer"
-})("cursor:default;background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";border:0.5px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";min-width:", ({
-  theme
-}) => theme.sizing["300"], ";height:", ({
-  theme
-}) => theme.sizing["300"], ";display:flex;justify-content:center;align-items:center;&[data-prominence='strong']{background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundStronger, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.border, ';&[data-disabled="true"]{background-color:', ({
-  theme
-}) => theme.colors.neutral.backgroundStrongerDisabled, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";}}&[data-disabled='true']{background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakDisabled, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderWeakDisabled, ';cursor:not-allowed;}&[data-sentiment="primary"]{background-color:', ({
-  theme
-}) => theme.colors.primary.background, ";border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";&[data-prominence='strong']{background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundStrong, ';&[data-disabled="true"]{background-color:', ({
-  theme
-}) => theme.colors.primary.backgroundStrongDisabled, ";}}&[data-disabled='true']{background:", ({
-  theme
-}) => theme.colors.primary.backgroundDisabled, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ';cursor:not-allowed;}}&[data-size="small"]{min-width:', ({
-  theme
-}) => theme.sizing["250"], ";height:", ({
-  theme
-}) => theme.sizing["250"], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0tleS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZStCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3VpL3NyYy9jb21wb25lbnRzL0tleS9pbmRleC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcblxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi4vVGV4dCdcblxuZXhwb3J0IGNvbnN0IEtFWVNfTUFUQ0ggPSB7XG4gIGJhY2tzcGFjZTogJ+KMqycsXG4gIGNvbW1hbmQ6ICfijJgnLFxuICBjb250cm9sOiAn4oyDJyxcbiAgZW50ZXI6ICfihrUnLFxuICBvcHRpb246ICfijKUnLFxuICBzaGlmdDogJ+KHpycsXG59IGFzIGNvbnN0XG5cbmNvbnN0IEtleUNvbnRhaW5lciA9IHN0eWxlZC5rYmRgXG4gIGN1cnNvcjogZGVmYXVsdDtcbiAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kV2Vha307XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucmFkaWkuZGVmYXVsdH07XG4gIGJvcmRlcjogMC41cHggc29saWQgJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJXZWFrfTtcbiAgbWluLXdpZHRoOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snMzAwJ119O1xuICBoZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6aW5nWyczMDAnXX07XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuXG4gIC8qKiBOZXV0cmFsIHN0eWxlICovXG4gICZbZGF0YS1wcm9taW5lbmNlPSdzdHJvbmcnXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5iYWNrZ3JvdW5kU3Ryb25nZXJ9O1xuICAgIGJvcmRlci1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJ9O1xuXG4gICAgJltkYXRhLWRpc2FibGVkPVwidHJ1ZVwiXSB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJhY2tncm91bmRTdHJvbmdlckRpc2FibGVkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMubmV1dHJhbC5ib3JkZXJEaXNhYmxlZH07XG4gICAgfVxuICB9XG5cbiAgJltkYXRhLWRpc2FibGVkPSd0cnVlJ10ge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZFdlYWtEaXNhYmxlZH07XG4gICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWtEaXNhYmxlZH07XG4gICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgfVxuXG4gIC8qKiBQcmltYXJ5IHN0eWxlICovXG4gICZbZGF0YS1zZW50aW1lbnQ9XCJwcmltYXJ5XCJdIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5LmJhY2tncm91bmR9O1xuICAgIGJvcmRlci1jb2xvcjogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS5ib3JkZXJ9O1xuXG4gICAgJltkYXRhLXByb21pbmVuY2U9J3N0cm9uZyddIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLnByaW1hcnkuYmFja2dyb3VuZFN0cm9uZ307XG5cbiAgICAgICZbZGF0YS1kaXNhYmxlZD1cInRydWVcIl0ge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5wcmltYXJ5LmJhY2tncm91bmRTdHJvbmdEaXNhYmxlZH07XG4gICAgICB9XG4gICAgfVxuXG4gICAgJltkYXRhLWRpc2FibGVkPSd0cnVlJ10ge1xuICAgICAgYmFja2dyb3VuZDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5jb2xvcnMucHJpbWFyeS5iYWNrZ3JvdW5kRGlzYWJsZWR9O1xuICAgICAgYm9yZGVyLWNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlckRpc2FibGVkfTtcbiAgICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG4gICAgfVxuICB9XG5cbiAgLyoqIFNpemUgKi9cbiAgJltkYXRhLXNpemU9XCJzbWFsbFwiXSB7XG4gICAgbWluLXdpZHRoOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemluZ1snMjUwJ119O1xuICAgIGhlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5zaXppbmdbJzI1MCddfTtcbiAgfVxuYFxuXG50eXBlIEtleVByb3BzID0ge1xuICBjaGlsZHJlbjogc3RyaW5nXG4gIHByb21pbmVuY2U/OiAnc3Ryb25nJyB8ICdkZWZhdWx0J1xuICBkaXNhYmxlZD86IGJvb2xlYW5cbiAgc2l6ZT86ICdzbWFsbCcgfCAnbWVkaXVtJ1xuICBzZW50aW1lbnQ/OiAnbmV1dHJhbCcgfCAncHJpbWFyeSdcbiAgaWQ/OiBzdHJpbmdcbiAgY2xhc3NOYW1lPzogc3RyaW5nXG4gICdkYXRhLXRlc3RpZCc/OiBzdHJpbmdcbn1cblxuLyoqXG4gKiBLZXkgaXMgYSB2aXN1YWwgY29tcG9uZW50IHVzZWQgdG8gZGlzcGxheSBrZXlib2FyZCBzaG9ydGN1dHMuXG4gKi9cbmV4cG9ydCBjb25zdCBLZXkgPSAoe1xuICBjaGlsZHJlbixcbiAgcHJvbWluZW5jZSA9ICdkZWZhdWx0JyxcbiAgZGlzYWJsZWQsXG4gIHNpemUgPSAnbWVkaXVtJyxcbiAgc2VudGltZW50ID0gJ25ldXRyYWwnLFxuICBpZCxcbiAgY2xhc3NOYW1lLFxuICAnZGF0YS10ZXN0aWQnOiBkYXRhVGVzdElkLFxufTogS2V5UHJvcHMpID0+IHtcbiAgY29uc3Qgc3BlY2lhbEtleSA9IHVzZU1lbW8oXG4gICAgKCkgPT4gT2JqZWN0LmtleXMoS0VZU19NQVRDSCkuZmluZChrZXkgPT4ga2V5ID09PSBjaGlsZHJlbi50b0xvd2VyQ2FzZSgpKSxcbiAgICBbY2hpbGRyZW5dLFxuICApXG4gIGNvbnN0IHRleHRQcm9taW5lbmNlID0gdXNlTWVtbygoKSA9PiB7XG4gICAgaWYgKHByb21pbmVuY2UgPT09ICdkZWZhdWx0Jykge1xuICAgICAgcmV0dXJuICdkZWZhdWx0J1xuICAgIH1cblxuICAgIGlmIChzZW50aW1lbnQgPT09ICdwcmltYXJ5Jykge1xuICAgICAgcmV0dXJuICdzdHJvbmcnXG4gICAgfVxuXG4gICAgcmV0dXJuICdzdHJvbmdlcidcbiAgfSwgW3NlbnRpbWVudCwgcHJvbWluZW5jZV0pXG5cbiAgcmV0dXJuIChcbiAgICA8S2V5Q29udGFpbmVyXG4gICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgIGRhdGEtZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgZGF0YS1wcm9taW5lbmNlPXtwcm9taW5lbmNlfVxuICAgICAgZGF0YS1zZW50aW1lbnQ9e3NlbnRpbWVudH1cbiAgICAgIGRhdGEtc2l6ZT17c2l6ZX1cbiAgICAgIGRhdGEtdGVzdGlkPXtkYXRhVGVzdElkfVxuICAgICAgaWQ9e2lkfVxuICAgID5cbiAgICAgIDxUZXh0XG4gICAgICAgIGFzPVwic3BhblwiXG4gICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgcHJvbWluZW5jZT17dGV4dFByb21pbmVuY2V9XG4gICAgICAgIHNlbnRpbWVudD17c2VudGltZW50fVxuICAgICAgICB2YXJpYW50PXtzaXplID09PSAnbWVkaXVtJyA/ICdjYXB0aW9uJyA6ICdjYXB0aW9uU21hbGwnfVxuICAgICAgPlxuICAgICAgICB7c3BlY2lhbEtleVxuICAgICAgICAgID8gS0VZU19NQVRDSFtzcGVjaWFsS2V5IGFzIGtleW9mIHR5cGVvZiBLRVlTX01BVENIXVxuICAgICAgICAgIDogY2hpbGRyZW59XG4gICAgICA8L1RleHQ+XG4gICAgPC9LZXlDb250YWluZXI+XG4gIClcbn1cbiJdfQ== */"));
+import { KEYS_MATCH } from "./constants.js";
+import { key } from "./styles.css.js";
 const Key = ({
   children,
   prominence = "default",
@@ -63,9 +12,13 @@ const Key = ({
   sentiment = "neutral",
   id,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
-  const specialKey = useMemo(() => Object.keys(KEYS_MATCH).find((key) => key === children.toLowerCase()), [children]);
+  const specialKey = useMemo(
+    () => Object.keys(KEYS_MATCH).find((key2) => key2 === children.toLowerCase()),
+    [children]
+  );
   const textProminence = useMemo(() => {
     if (prominence === "default") {
       return "default";
@@ -75,9 +28,31 @@ const Key = ({
     }
     return "stronger";
   }, [sentiment, prominence]);
-  return /* @__PURE__ */ jsx(KeyContainer, { className, "data-disabled": disabled, "data-prominence": prominence, "data-sentiment": sentiment, "data-size": size, "data-testid": dataTestId, id, children: /* @__PURE__ */ jsx(Text, { as: "span", disabled, prominence: textProminence, sentiment, variant: size === "medium" ? "caption" : "captionSmall", children: specialKey ? KEYS_MATCH[specialKey] : children }) });
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: `${className ? `${className} ` : ""}${key({ disabled, prominence, sentiment, size })}`,
+      "data-disabled": disabled,
+      "data-prominence": prominence,
+      "data-sentiment": sentiment,
+      "data-size": size,
+      "data-testid": dataTestId,
+      id,
+      style,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          disabled,
+          prominence: textProminence,
+          sentiment,
+          variant: size === "medium" ? "caption" : "captionSmall",
+          children: specialKey ? KEYS_MATCH[specialKey] : children
+        }
+      )
+    }
+  );
 };
 export {
-  KEYS_MATCH,
   Key
 };

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

@@ -0,0 +1,29 @@
+export declare const key: import("@vanilla-extract/recipes").RuntimeFn<{
+    prominence: {
+        strong: {};
+        default: {};
+    };
+    disabled: {
+        true: {};
+    };
+    sentiment: {
+        primary: {
+            backgroundColor: `var(--${string})`;
+            borderColor: `var(--${string})`;
+        };
+        neutral: {
+            background: `var(--${string})`;
+            borderColor: `var(--${string})`;
+        };
+    };
+    size: {
+        small: {
+            minWidth: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+        medium: {
+            minWidth: `var(--${string})`;
+            height: `var(--${string})`;
+        };
+    };
+}>;

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

@@ -0,0 +1,6 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var key = createRuntimeFn({ defaultClassName: "uv_1g4bp0q0", variantClassNames: { prominence: { strong: "uv_1g4bp0q1", "default": "uv_1g4bp0q2" }, disabled: { true: "uv_1g4bp0q3" }, sentiment: { primary: "uv_1g4bp0q4", neutral: "uv_1g4bp0q5" }, size: { small: "uv_1g4bp0q6", medium: "uv_1g4bp0q7" } }, defaultVariants: { prominence: "default", disabled: false, size: "medium", sentiment: "neutral" }, compoundVariants: [[{ prominence: "strong", sentiment: "neutral" }, "uv_1g4bp0q8"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_1g4bp0q9"], [{ disabled: true, sentiment: "neutral" }, "uv_1g4bp0qa"], [{ sentiment: "primary", prominence: "strong" }, "uv_1g4bp0qb"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_1g4bp0qc"], [{ disabled: true, sentiment: "primary" }, "uv_1g4bp0qd"]] });
+export {
+  key
+};

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Text } from '../Text';
 type LabelProps = {
     /**
@@ -13,9 +13,10 @@ type LabelProps = {
     id?: string;
     sentiment?: ComponentProps<typeof Text>['sentiment'];
     disabled?: boolean;
+    style?: CSSProperties;
 };
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
-export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, }: LabelProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};