npm - @nimbus-ds/components - Versions diffs - 1.0.0-rc.1 → 1.0.0-rc.2 - Mend

@nimbus-ds/components 1.0.0-rc.1 → 1.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,261 @@
+import React, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes } from "react";
+type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
+type BoxSizing = "border-box" | "content-box";
+type Cursor = "auto" | "pointer";
+declare const backgroundColorProperties: {
+    "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const borderColorProperties: {
+    "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "primary.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "primary.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "danger.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const borderStyleProperties: BorderStyle[];
+declare const boxSizingProperties: BoxSizing[];
+declare const cursorProperties: Cursor[];
+declare const spaceProperties: {
+    none: string;
+    "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+type CursorProperties = (typeof cursorProperties)[number];
+type BorderColorProperties = keyof typeof borderColorProperties;
+type BackgroundColorProperties = keyof typeof backgroundColorProperties;
+type BorderStyleProperties = (typeof borderStyleProperties)[number];
+type BoxSizingProperties = (typeof boxSizingProperties)[number];
+type SpaceProperties = keyof typeof spaceProperties;
+interface Conditions<T> {
+    xs?: T;
+    md?: T;
+    lg?: T;
+}
+interface BoxSprinkle {
+    width?: string | Conditions<string>;
+    height?: string | Conditions<string>;
+    cursor?: CursorProperties | Conditions<CursorProperties>;
+    backgroundColor?: BackgroundColorProperties | Conditions<BackgroundColorProperties>;
+    borderRadius?: string | Conditions<string>;
+    borderWidth?: string | Conditions<string>;
+    borderColor?: BorderColorProperties | Conditions<BorderColorProperties>;
+    borderStyle?: BorderStyleProperties | Conditions<BorderStyleProperties>;
+    boxSizing?: BoxSizingProperties | Conditions<BoxSizingProperties>;
+    padding?: SpaceProperties | Conditions<SpaceProperties>;
+    paddingTop?: SpaceProperties | Conditions<SpaceProperties>;
+    paddingBottom?: SpaceProperties | Conditions<SpaceProperties>;
+    paddingLeft?: SpaceProperties | Conditions<SpaceProperties>;
+    paddingRight?: SpaceProperties | Conditions<SpaceProperties>;
+    margin?: SpaceProperties | Conditions<SpaceProperties>;
+    marginTop?: SpaceProperties | Conditions<SpaceProperties>;
+    marginBottom?: SpaceProperties | Conditions<SpaceProperties>;
+    marginLeft?: SpaceProperties | Conditions<SpaceProperties>;
+    marginRight?: SpaceProperties | Conditions<SpaceProperties>;
+    paddingX?: SpaceProperties | Conditions<SpaceProperties>;
+    paddingY?: SpaceProperties | Conditions<SpaceProperties>;
+    p?: SpaceProperties | Conditions<SpaceProperties>;
+    pl?: SpaceProperties | Conditions<SpaceProperties>;
+    pr?: SpaceProperties | Conditions<SpaceProperties>;
+    pt?: SpaceProperties | Conditions<SpaceProperties>;
+    pb?: SpaceProperties | Conditions<SpaceProperties>;
+    px?: SpaceProperties | Conditions<SpaceProperties>;
+    py?: SpaceProperties | Conditions<SpaceProperties>;
+    marginX?: SpaceProperties | Conditions<SpaceProperties>;
+    marginY?: SpaceProperties | Conditions<SpaceProperties>;
+    m?: SpaceProperties | Conditions<SpaceProperties>;
+    mr?: SpaceProperties | Conditions<SpaceProperties>;
+    ml?: SpaceProperties | Conditions<SpaceProperties>;
+    mt?: SpaceProperties | Conditions<SpaceProperties>;
+    mb?: SpaceProperties | Conditions<SpaceProperties>;
+    mx?: SpaceProperties | Conditions<SpaceProperties>;
+    my?: SpaceProperties | Conditions<SpaceProperties>;
+}
+declare const text: {
+    style: string;
+    sprinkle: ((props: {
+        color?: "primary.interactive" | "primary.textLow" | "primary.textHigh" | "success.interactive" | "success.textLow" | "success.textHigh" | "warning.interactive" | "warning.textLow" | "warning.textHigh" | "danger.interactive" | "danger.textLow" | "danger.textHigh" | "neutral.background" | "neutral.interactive" | "neutral.textDisabled" | "neutral.textLow" | "neutral.textHigh" | "currentColor" | undefined;
+        lineHeight?: "caption" | "base" | "highlight" | undefined;
+        fontWeight?: "regular" | "bold" | undefined;
+        fontSize?: "caption" | "base" | "highlight" | undefined;
+        textAlign?: "left" | "right" | "center" | "justify" | undefined;
+    }) => string) & {
+        properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
+    };
+    properties: {
+        colors: {
+            currentColor: string;
+            "primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "primary.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "primary.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "success.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "success.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "success.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "warning.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "warning.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "warning.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "danger.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "danger.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "danger.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "neutral.background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "neutral.textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "neutral.textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        textAlign: {
+            readonly left: "left";
+            readonly right: "right";
+            readonly center: "center";
+            readonly justify: "justify";
+        };
+        lineHeight: {
+            caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        fontWeight: {
+            regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        fontSize: {
+            caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+};
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** width alignment in content */
+    width: string;
+    /** height alignment in content */
+    height: string;
+    /** borderRadius alignment in content */
+    borderRadius?: string;
+}
+type _SkeletonProps1 = Pick<TextProps, "fontSize"> & Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
+    "data-testid"?: string;
+};
+declare const Skeleton: React.FC<_SkeletonProps1>;
+interface TextComponents {
+    Skeleton: typeof Skeleton;
+}
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** Element to be rendered inside the Text component */
+    children: ReactNode;
+    /** Type of html tag to create for the Text component */
+    as?: "p" | "span";
+    /** Text size */
+    fontSize?: keyof typeof text.properties.fontSize;
+    /** Bold font for the text component */
+    fontWeight?: keyof typeof text.properties.fontWeight;
+    /** Text line height */
+    lineHeight?: keyof typeof text.properties.lineHeight;
+    /** Text alignment in content */
+    textAlign?: keyof typeof text.properties.textAlign;
+    /** Text color */
+    color?: keyof typeof text.properties.colors;
+}
+export const Text: React.FC<TextProps> & TextComponents;
+type _SkeletonProps2 = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<SkeletonProps, "height">> & {
+    "data-testid"?: string;
+};
+declare const _Skeleton1: React.FC<_SkeletonProps2>;
+interface BadgeComponents {
+    _Skeleton1: typeof _Skeleton1;
+}
+export interface BadgeProps extends HTMLAttributes<HTMLElement> {
+    /** Badge color */
+    appearance?: "primary" | "success" | "warning" | "danger" | "neutral";
+    /** Total items to be displayed without badge */
+    count: number | string;
+    /** Badge appearance color scheme */
+    theme?: "surface" | "light";
+}
+export const Badge: React.FC<BadgeProps> & BadgeComponents;
+type Extends = BoxSprinkle & HTMLAttributes<HTMLDivElement>;
+export interface BoxProps extends Extends {
+    /** Element to be rendered inside the Box component */
+    children?: ReactNode;
+}
+export const Box: React.FC<BoxProps>;
+type _SkeletonProps3 = Partial<Pick<SkeletonProps, "width">> & {
+    "data-testid"?: string;
+};
+declare const _Skeleton2: React.FC<_SkeletonProps3>;
+interface ButtonComponents {
+    _Skeleton2: typeof _Skeleton2;
+}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Text to be displayed on chip */
+    children: ReactNode;
+    /** Button appearance */
+    appearance?: "primary" | "danger" | "neutral";
+    /** Set whether button state is disabled */
+    disabled?: boolean;
+}
+export const Button: React.FC<ButtonProps> & ButtonComponents;
+type _SkeletonProps4 = Partial<Pick<SkeletonProps, "width">> & {
+    "data-testid"?: string;
+};
+declare const _Skeleton3: React.FC<_SkeletonProps4>;
+interface CheckboxComponents {
+    _Skeleton3: typeof _Skeleton3;
+}
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Checkbox name */
+    name: string;
+    /** Checkbox color */
+    appearance?: "primary" | "danger";
+    /** Set whether checkbox state is checked */
+    checked?: boolean;
+    /** Set whether checkbox state is disabled */
+    disabled?: boolean;
+    /** Set whether checkbox state is indeterminate */
+    indeterminate?: boolean;
+    /** Text to be rendered inside the component */
+    label?: string;
+}
+export const Checkbox: React.FC<CheckboxProps> & CheckboxComponents;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"mappings":";AOKA,mBAAmB,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrE,iBAAiB,YAAY,GAAG,aAAa,CAAC;AAC9C,cAAc,MAAM,GAAG,SAAS,CAAC;AAEjC,QAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;CA0BZ,CAAC;AAEF,QAAO,MAAM;;;;;;;;;;;;;;;;CAoBZ,CAAC;AAEF,QAAO,MAAM,uBAAuB,WAAW,EAM9C,CAAC;AAEF,QAAO,MAAM,qBAAqB,SAAS,EAAkC,CAAC;AAE9E,QAAO,MAAM,kBAAkB,MAAM,EAAwB,CAAC;AAE9D,QAAO,MAAM;;;;;;;;;;;;;;;CAeZ,CAAC;AC7EF,wBAAwB,CAAA,uBAAuB,EAAC,MAAM,CAAC,CAAC;AACxD,6BAA6B,MAAM,4BAA4B,CAAC;AAChE,iCAAiC,MAAM,gCAAgC,CAAC;AACxE,6BAA6B,CAAA,4BAA4B,EAAC,MAAM,CAAC,CAAC;AAClE,2BAA2B,CAAA,0BAA0B,EAAC,MAAM,CAAC,CAAC;AAC9D,uBAAuB,MAAM,sBAAsB,CAAC;AAEpD,qBAAqB,CAAC;IACpB,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;CACR;AAED;IACE,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,gBAAgB,GAAG,WAAW,gBAAgB,CAAC,CAAC;IACzD,eAAe,CAAC,EACZ,yBAAyB,GACzB,WAAW,yBAAyB,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC;IAC3C,WAAW,CAAC,EAAE,MAAM,GAAG,WAAW,MAAM,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,qBAAqB,GAAG,WAAW,qBAAqB,CAAC,CAAC;IACxE,WAAW,CAAC,EAAE,qBAAqB,GAAG,WAAW,qBAAqB,CAAC,CAAC;IACxE,SAAS,CAAC,EAAE,mBAAmB,GAAG,WAAW,mBAAmB,CAAC,CAAC;IAClE,OAAO,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC3D,aAAa,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC9D,WAAW,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC5D,YAAY,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC7D,MAAM,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC1D,YAAY,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC7D,UAAU,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC3D,WAAW,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAC5D,QAAQ,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACzD,CAAC,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAClD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACxD,CAAC,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IAClD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;IACnD,EAAE,CAAC,EAAE,eAAe,GAAG,WAAW,eAAe,CAAC,CAAC;CACpD;A+BpDD,QAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUZ,CAAC;A4ClBF,uBAA+B,SAAQ,eAAe,cAAc,CAAC;IACnE,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AGND,uBAA4B,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GACrD,OAAO,CAAC,IAAI,CAAC,aAAiB,EAAE,OAAO,CAAC,CAAC,GACzC,OAAO,CAAC,IAAI,CAAC,aAAiB,EAAE,QAAQ,CAAC,CAAC,GAAG;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AEDJ,QAAA,MAAM,UAAU,MAAM,EAAE,CAAC,eAAa,CAYrC,CAAC;AGbF;IACE,UAAU,eAAe,CAAC;CAC3B;AAED,0BAA2B,SAAQ,eAAe,oBAAoB,CAAC;IACrE,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;IACpB,wDAAwD;IACxD,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAClB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,OAAO,KAAK,UAAU,CAAC,QAAQ,CAAC;IACjD,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,OAAO,KAAK,UAAU,CAAC,UAAU,CAAC;IACrD,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,OAAO,KAAK,UAAU,CAAC,UAAU,CAAC;IACrD,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,OAAO,KAAK,UAAU,CAAC,SAAS,CAAC;IACnD,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,OAAO,KAAK,UAAU,CAAC,MAAM,CAAC;CAC7C;AClBD,OAAA,MAAM,MAAM,MAAM,EAAE,CAAC,SAAS,CAAC,GAAG,cAqBjC,CAAC;AEzBF,uBAA4B,OAAO,CAAC,IAAI,CAAC,aAAiB,EAAE,OAAO,CAAC,CAAC,GACnE,OAAO,CAAC,IAAI,CAAC,aAAiB,EAAE,QAAQ,CAAC,CAAC,GAAG;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;ACAJ,QAAA,MAAM,YAAU,MAAM,EAAE,CAAC,eAAa,CAWrC,CAAC;AGbF;IACE,YAAU,iBAAe,CAAC;CAC3B;AAED,2BAA4B,SAAQ,eAAe,WAAW,CAAC;IAC7D,kBAAkB;IAClB,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACtE,gDAAgD;IAChD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC7B;ACPD,OAAA,MAAM,OAAO,MAAM,EAAE,CAAC,UAAU,CAAC,GAAG,eAWnC,CAAC;AEfF,eAAe,WAAW,GAAG,eAAe,cAAc,CAAC,CAAC;AAE5D,yBAA0B,SAAQ,OAAO;IACvC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;ACHD,OAAA,MAAM,KAAK,MAAM,EAAE,CAAC,QAAQ,CAc3B,CAAC;AEjBF,uBAA4B,OAAO,CAAC,IAAI,CAAC,aAAiB,EAAE,OAAO,CAAC,CAAC,GAAG;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;ACCF,QAAA,MAAM,YAAU,MAAM,EAAE,CAAC,eAAa,CAUrC,CAAC;AGZF;IACE,YAAU,iBAAe,CAAC;CAC3B;AAED,4BAA6B,SAAQ,qBAAqB,iBAAiB,CAAC;IAC1E,mCAAmC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC9C,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;ACRD,OAAA,MAAM,QAAQ,MAAM,EAAE,CAAC,WAAW,CAAC,GAAG,gBAUrC,CAAC;ASdF,uBAA4B,OAAO,CAAC,IAAI,CAAC,aAAiB,EAAE,OAAO,CAAC,CAAC,GAAG;IACtE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;ACEF,QAAA,MAAM,YAAU,MAAM,EAAE,CAAC,eAAa,CAarC,CAAC;AGhBF;IACE,YAAU,iBAAe,CAAC;CAC3B;AAED,8BAA+B,SAAQ,oBAAoB,gBAAgB,CAAC;IAC1E,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAClC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AETD,OAAA,MAAM,UAAU,MAAM,EAAE,CAAC,aAAa,CAAC,GAAG,kBAiFzC,CAAC","sources":["packages/core/styles/src/utils/vars.css.ts","packages/core/styles/src/utils/index.ts","packages/core/styles/src/themes/base.css.ts","packages/core/styles/src/packages/atomic/badge/badge.style.css.ts","packages/core/styles/src/packages/atomic/badge/index.ts","packages/core/styles/src/sprinkles/colors.css.ts","packages/core/styles/src/themes/mediaQueries.ts","packages/core/styles/src/packages/atomic/box/box.sprinkle.css.ts","packages/core/styles/src/packages/atomic/box/box.sprinkle.types.ts","packages/core/styles/src/packages/atomic/box/index.ts","packages/core/styles/src/packages/atomic/button/button.style.css.ts","packages/core/styles/src/packages/atomic/button/index.ts","packages/core/styles/src/packages/atomic/checkbox/checkbox.style.css.ts","packages/core/styles/src/packages/atomic/checkbox/checkbox.sprinkle.css.ts","packages/core/styles/src/packages/atomic/checkbox/index.ts","packages/core/styles/src/packages/atomic/chip/chip.style.css.ts","packages/core/styles/src/packages/atomic/chip/index.ts","packages/core/styles/src/packages/atomic/fileUploader/fileUploader.style.css.ts","packages/core/styles/src/packages/atomic/thumbnail/thumbnail.style.css.ts","packages/core/styles/src/packages/atomic/thumbnail/thumbnail.sprinkle.css.ts","packages/core/styles/src/packages/atomic/thumbnail/index.ts","packages/core/styles/src/packages/atomic/fileUploader/fileUploader.sprinkle.css.ts","packages/core/styles/src/packages/atomic/fileUploader/index.ts","packages/core/styles/src/packages/atomic/icon/icon.style.css.ts","packages/core/styles/src/packages/atomic/icon/icon.sprinkle.css.ts","packages/core/styles/src/packages/atomic/icon/index.ts","packages/core/styles/src/packages/atomic/iconButton/iconButton.style.css.ts","packages/core/styles/src/packages/atomic/iconButton/iconButton.sprinkle.css.ts","packages/core/styles/src/packages/atomic/iconButton/iconButton.sprinkle.types.ts","packages/core/styles/src/packages/atomic/iconButton/index.ts","packages/core/styles/src/packages/atomic/input/input.style.css.ts","packages/core/styles/src/packages/atomic/input/index.ts","packages/core/styles/src/packages/atomic/label/label.style.css.ts","packages/core/styles/src/packages/atomic/label/index.ts","packages/core/styles/src/packages/atomic/tag/tag.style.css.ts","packages/core/styles/src/packages/atomic/tag/index.ts","packages/core/styles/src/packages/atomic/text/text.style.css.ts","packages/core/styles/src/sprinkles/textAlign.css.ts","packages/core/styles/src/packages/atomic/text/text.sprinkle.css.ts","packages/core/styles/src/packages/atomic/text/index.ts","packages/core/styles/src/packages/atomic/title/title.style.css.ts","packages/core/styles/src/packages/atomic/title/title.sprinkle.css.ts","packages/core/styles/src/packages/atomic/title/index.ts","packages/core/styles/src/packages/atomic/toast/toast.style.css.ts","packages/core/styles/src/packages/atomic/toast/index.ts","packages/core/styles/src/packages/atomic/list/list.style.css.ts","packages/core/styles/src/packages/atomic/list/index.ts","packages/core/styles/src/packages/atomic/popover/popover.style.css.ts","packages/core/styles/src/packages/atomic/popover/popover.sprinkle.css.ts","packages/core/styles/src/packages/atomic/popover/index.ts","packages/core/styles/src/packages/atomic/radio/radio.style.css.ts","packages/core/styles/src/packages/atomic/radio/radio.sprinkle.css.ts","packages/core/styles/src/packages/atomic/radio/index.ts","packages/core/styles/src/packages/atomic/select/select.style.css.ts","packages/core/styles/src/packages/atomic/select/index.ts","packages/core/styles/src/packages/atomic/skeleton/skeleton.style.css.ts","packages/core/styles/src/packages/atomic/skeleton/index.ts","packages/core/styles/src/packages/atomic/spinner/spinner.style.css.ts","packages/core/styles/src/packages/atomic/spinner/spinner.sprinkle.css.ts","packages/core/styles/src/packages/atomic/spinner/index.ts","packages/core/styles/src/packages/atomic/stack/stack.sprinkle.css.ts","packages/core/styles/src/packages/atomic/stack/stack.sprinkle.types.ts","packages/core/styles/src/packages/atomic/stack/index.ts","packages/core/styles/src/packages/atomic/toggle/toggle.style.css.ts","packages/core/styles/src/packages/atomic/toggle/index.ts","packages/core/styles/src/packages/atomic/link/link.style.css.ts","packages/core/styles/src/packages/atomic/link/index.ts","packages/core/styles/src/packages/atomic/tooltip/tooltip.style.css.ts","packages/core/styles/src/packages/atomic/tooltip/index.ts","packages/core/styles/src/packages/atomic/textarea/textarea.style.css.ts","packages/core/styles/src/packages/atomic/textarea/index.ts","packages/core/styles/src/packages/composite/alert/alert.style.css.ts","packages/core/styles/src/packages/composite/alert/index.ts","packages/core/styles/src/packages/composite/card/card.style.css.ts","packages/core/styles/src/packages/composite/card/card.sprinkle.css.ts","packages/core/styles/src/packages/composite/card/index.ts","packages/core/styles/src/packages/composite/sidebar/sidebar.style.css.ts","packages/core/styles/src/packages/composite/sidebar/sidebar.sprinkle.css.ts","packages/core/styles/src/packages/composite/sidebar/sidebar.sprinkle.types.ts","packages/core/styles/src/packages/composite/sidebar/index.ts","packages/core/styles/src/packages/composite/tabs/tabs.style.css.ts","packages/core/styles/src/packages/composite/tabs/index.ts","packages/core/styles/src/index.ts","packages/react/atomic/Skeleton/src/skeleton.types.ts","packages/react/atomic/Skeleton/src/Skeleton.tsx","packages/react/atomic/Skeleton/src/index.ts","packages/react/atomic/Text/src/components/Skeleton/skeleton.types.ts","packages/react/atomic/Text/src/components/Skeleton/skeleton.definitions.ts","packages/react/atomic/Text/src/components/Skeleton/Skeleton.tsx","packages/react/atomic/Text/src/components/Skeleton/index.ts","packages/react/atomic/Text/src/components/index.ts","packages/react/atomic/Text/src/text.types.ts","packages/react/atomic/Text/src/Text.tsx","packages/react/atomic/Text/src/index.ts","packages/react/atomic/Badge/src/components/Skeleton/skeleton.types.ts","packages/react/atomic/Badge/src/components/Skeleton/Skeleton.tsx","packages/react/atomic/Badge/src/components/Skeleton/index.ts","packages/react/atomic/Badge/src/components/index.ts","packages/react/atomic/Badge/src/badge.types.ts","packages/react/atomic/Badge/src/Badge.tsx","packages/react/atomic/Badge/src/index.ts","packages/react/atomic/Box/src/box.types.ts","packages/react/atomic/Box/src/Box.tsx","packages/react/atomic/Box/src/index.ts","packages/react/atomic/Button/src/components/Skeleton/skeleton.types.ts","packages/react/atomic/Button/src/components/Skeleton/Skeleton.tsx","packages/react/atomic/Button/src/components/Skeleton/index.ts","packages/react/atomic/Button/src/components/index.ts","packages/react/atomic/Button/src/button.types.ts","packages/react/atomic/Button/src/Button.tsx","packages/react/atomic/Button/src/index.ts","packages/react/atomic/Icon/src/components/Skeleton/skeleton.types.ts","packages/react/atomic/Icon/src/components/Skeleton/Skeleton.tsx","packages/react/atomic/Icon/src/components/Skeleton/index.ts","packages/react/atomic/Icon/src/components/index.ts","packages/react/atomic/Icon/src/icon.types.ts","packages/react/atomic/Icon/src/Icon.tsx","packages/react/atomic/Icon/src/index.ts","packages/react/atomic/Checkbox/src/components/Skeleton/skeleton.types.ts","packages/react/atomic/Checkbox/src/components/Skeleton/Skeleton.tsx","packages/react/atomic/Checkbox/src/components/Skeleton/index.ts","packages/react/atomic/Checkbox/src/components/index.ts","packages/react/atomic/Checkbox/src/checkbox.types.ts","packages/react/atomic/Checkbox/src/checkbox.definitions.ts","packages/react/atomic/Checkbox/src/Checkbox.tsx","packages/react/atomic/Checkbox/src/index.ts","packages/react/index.ts"],"sourcesContent":["import { createVar } from \"@vanilla-extract/css\";\n\nexport const width = createVar();\nexport const height = createVar();\nexport const borderRadius = createVar();\n","import * as vars from \"./vars.css\";\n\nexport const utils = {\n vars,\n};\n","import { createGlobalTheme, createThemeContract } from \"@vanilla-extract/css\";\nimport tokens from \"@nimbus-ds/tokens/dist/js/tokens\";\n\nexport const varsThemeBase = createThemeContract({\n colors: {\n primary: {\n surface: \"primary.surface\",\n surfaceHighlight: \"primary.surfaceHighlight\",\n interactive: \"primary.interactive\",\n interactiveHover: \"primary.interactiveHover\",\n interactivePressed: \"primary.interactivePressed\",\n textLow: \"primary.textLow\",\n textHigh: \"primary.textHigh\",\n },\n success: {\n surface: \"success.surface\",\n surfaceHighlight: \"success.surfaceHighlight\",\n interactive: \"success.interactive\",\n interactiveHover: \"success.interactiveHover\",\n interactivePressed: \"success.interactivePressed\",\n textLow: \"success.textLow\",\n textHigh: \"success.textHigh\",\n },\n warning: {\n surface: \"warning.surface\",\n surfaceHighlight: \"warning.surfaceHighlight\",\n interactive: \"warning.interactive\",\n interactiveHover: \"warning.interactiveHover\",\n interactivePressed: \"warning.interactivePressed\",\n textLow: \"warning.textLow\",\n textHigh: \"warning.textHigh\",\n },\n danger: {\n surface: \"danger.surface\",\n surfaceHighlight: \"danger.surfaceHighlight\",\n interactive: \"danger.interactive\",\n interactiveHover: \"danger.interactiveHover\",\n interactivePressed: \"danger.interactivePressed\",\n textLow: \"danger.textLow\",\n textHigh: \"danger.textHigh\",\n },\n neutral: {\n background: \"neutral.background\",\n surface: \"neutral.surface\",\n surfaceDisabled: \"neutral.surfaceDisabled\",\n surfaceHighlight: \"neutral.surfaceHighlight\",\n interactive: \"neutral.interactive\",\n interactiveHover: \"neutral.interactiveHover\",\n interactivePressed: \"neutral.interactivePressed\",\n textDisabled: \"neutral.textDisabled\",\n textLow: \"neutral.textLow\",\n textHigh: \"neutral.textHigh\",\n },\n },\n fontFamily: {\n centranube: \"fontFamily.centranube\",\n },\n fontSize: {\n body: {\n caption: \"fontSize.body.caption\",\n base: \"fontSize.body.base\",\n highlight: \"fontSize.body.highlight\",\n },\n title: {\n h1: \"fontSize.title.h1\",\n h2: \"fontSize.title.h2\",\n h3: \"fontSize.title.h3\",\n h4: \"fontSize.title.h4\",\n h5: \"fontSize.title.h5\",\n h6: \"fontSize.title.h6\",\n },\n },\n fontWeight: {\n regular: \"fontWeight.regular\",\n medium: \"fontWeight.medium\",\n bold: \"fontWeight.bold\",\n },\n lineWeight: {\n body: {\n caption: \"lineWeight.caption.small\",\n base: \"lineWeight.base.small\",\n highlight: \"lineWeight.body.highlight\",\n },\n title: {\n h1: \"lineWeight.title.h1\",\n h2: \"lineWeight.title.h2\",\n h3: \"lineWeight.title.h3\",\n h4: \"lineWeight.title.h4\",\n h5: \"lineWeight.title.h5\",\n h6: \"lineWeight.title.h6\",\n },\n },\n shadow: {\n card: \"shadow.card\",\n popover: \"shadow.popover\",\n modal: \"shadow.modal\",\n },\n spacing: {\n \"0,5\": \"spacing.0,5\",\n \"1\": \"spacing.1\",\n \"2\": \"spacing.2\",\n \"4\": \"spacing.4\",\n \"6\": \"spacing.6\",\n \"8\": \"spacing.8\",\n \"10\": \"spacing.10\",\n \"12\": \"spacing.12\",\n \"14\": \"spacing.14\",\n \"16\": \"spacing.16\",\n \"18\": \"spacing.18\",\n \"20\": \"spacing.20\",\n },\n sizes: {\n \"0,5\": \"sizes.0,5\",\n \"1\": \"sizes.1\",\n \"1,5\": \"sizes.1,5\",\n \"2\": \"sizes.2\",\n \"2,5\": \"sizes.2,5\",\n \"3\": \"sizes.3\",\n \"3,5\": \"sizes.3,5\",\n \"4\": \"sizes.4\",\n \"4,5\": \"sizes.4,5\",\n \"5\": \"sizes.5\",\n \"6\": \"sizes.6\",\n \"7\": \"sizes.7\",\n \"8\": \"sizes.8\",\n \"9\": \"sizes.9\",\n \"10\": \"sizes.10\",\n \"11\": \"sizes.11\",\n \"12\": \"sizes.12\",\n \"14\": \"sizes.14\",\n \"16\": \"sizes.16\",\n \"18\": \"sizes.18\",\n \"20\": \"sizes.20\",\n },\n motion: {\n speed: {\n base: \"motion.speed.base\",\n fast: \"motion.speed.fast\",\n slow: \"motion.speed.slow\",\n slower: \"motion.speed.slower\",\n },\n },\n breakpoint: {\n xs: \"breakpoint.xs\",\n md: \"breakpoint.md\",\n lg: \"breakpoint.lg\",\n },\n});\n\nconst colors = tokens.color.sys.light;\nconst fontFamily = tokens.font.family;\nconst fontSize = tokens.font.size.sys;\nconst fontWeight = tokens.font.weight;\nconst lineWeight = tokens.line.height.sys;\nconst { motion, spacing, sizes, shadow, breakpoint } = tokens;\n\ncreateGlobalTheme(\":root\", varsThemeBase, {\n colors: {\n primary: {\n surface: colors.primary.surface.value as string,\n surfaceHighlight: colors.primary[\"surface-highlight\"].value as string,\n interactive: colors.primary.interactive.value as string,\n interactiveHover: colors.primary[\"interactive-hover\"].value as string,\n interactivePressed: colors.primary[\"interactive-pressed\"].value as string,\n textLow: colors.primary[\"text-low\"].value as string,\n textHigh: colors.primary[\"text-high\"].value as string,\n },\n success: {\n surface: colors.success.surface.value as string,\n surfaceHighlight: colors.success[\"surface-highlight\"].value as string,\n interactive: colors.success.interactive.value as string,\n interactiveHover: colors.success[\"interactive-hover\"].value as string,\n interactivePressed: colors.success[\"interactive-pressed\"].value as string,\n textLow: colors.success[\"text-low\"].value as string,\n textHigh: colors.success[\"text-high\"].value as string,\n },\n warning: {\n surface: colors.warning.surface.value as string,\n surfaceHighlight: colors.warning[\"surface-highlight\"].value as string,\n interactive: colors.warning.interactive.value as string,\n interactiveHover: colors.warning[\"interactive-hover\"].value as string,\n interactivePressed: colors.warning[\"interactive-pressed\"].value as string,\n textLow: colors.warning[\"text-low\"].value as string,\n textHigh: colors.warning[\"text-high\"].value as string,\n },\n danger: {\n surface: colors.danger.surface.value as string,\n surfaceHighlight: colors.danger[\"surface-highlight\"].value as string,\n interactive: colors.danger.interactive.value as string,\n interactiveHover: colors.danger[\"interactive-hover\"].value as string,\n interactivePressed: colors.danger[\"interactive-pressed\"].value as string,\n textLow: colors.danger[\"text-low\"].value as string,\n textHigh: colors.danger[\"text-high\"].value as string,\n },\n neutral: {\n background: colors.neutral.background.value as string,\n surface: colors.neutral.surface.value as string,\n surfaceDisabled: colors.neutral[\"surface-disabled\"].value as string,\n surfaceHighlight: colors.neutral[\"surface-highlight\"].value as string,\n interactive: colors.neutral.interactive.value as string,\n interactiveHover: colors.neutral[\"interactive-hover\"].value as string,\n interactivePressed: colors.neutral[\"interactive-pressed\"].value as string,\n textDisabled: colors.neutral[\"text-disabled\"].value as string,\n textLow: colors.neutral[\"text-low\"].value as string,\n textHigh: colors.neutral[\"text-high\"].value as string,\n },\n },\n fontFamily: {\n centranube: fontFamily.value as string,\n },\n fontSize: {\n body: {\n caption: fontSize.body.caption.value as string,\n base: fontSize.body.base.value as string,\n highlight: fontSize.body.highlight.value as string,\n },\n title: {\n h1: fontSize.title.h1.value as string,\n h2: fontSize.title.h2.value as string,\n h3: fontSize.title.h3.value as string,\n h4: fontSize.title.h4.value as string,\n h5: fontSize.title.h5.value as string,\n h6: fontSize.title.h6.value as string,\n },\n },\n fontWeight: {\n regular: fontWeight.regular.value as string,\n medium: fontWeight.medium.value as string,\n bold: fontWeight.bold.value as string,\n },\n lineWeight: {\n body: {\n caption: lineWeight.body.caption.value as string,\n base: lineWeight.body.base.value as string,\n highlight: lineWeight.body.highlight.value as string,\n },\n title: {\n h1: lineWeight.title.h1.value as string,\n h2: lineWeight.title.h2.value as string,\n h3: lineWeight.title.h3.value as string,\n h4: lineWeight.title.h4.value as string,\n h5: lineWeight.title.h5.value as string,\n h6: lineWeight.title.h6.value as string,\n },\n },\n shadow: {\n card: shadow.card.value,\n popover: shadow.popover.value,\n modal: shadow.modal.value,\n },\n spacing: {\n \"0,5\": spacing[\"0,5\"].value,\n \"1\": spacing[1].value,\n \"2\": spacing[2].value,\n \"4\": spacing[4].value,\n \"6\": spacing[6].value,\n \"8\": spacing[8].value,\n \"10\": spacing[10].value,\n \"12\": spacing[12].value,\n \"14\": spacing[14].value,\n \"16\": spacing[16].value,\n \"18\": spacing[18].value,\n \"20\": spacing[20].value,\n },\n sizes: {\n \"0,5\": sizes[\"0,5\"].value,\n \"1\": sizes[1].value,\n \"1,5\": sizes[\"1,5\"].value,\n \"2\": sizes[2].value,\n \"2,5\": sizes[\"2,5\"].value,\n \"3\": sizes[3].value,\n \"3,5\": sizes[\"3,5\"].value,\n \"4\": sizes[4].value,\n \"4,5\": sizes[\"4,5\"].value,\n \"5\": sizes[5].value,\n \"6\": sizes[6].value,\n \"7\": sizes[7].value,\n \"8\": sizes[8].value,\n \"9\": sizes[9].value,\n \"10\": sizes[10].value,\n \"11\": sizes[11].value,\n \"12\": sizes[12].value,\n \"14\": sizes[14].value,\n \"16\": sizes[16].value,\n \"18\": sizes[18].value,\n \"20\": sizes[20].value,\n },\n motion: {\n speed: {\n base: motion.speed.base.value as string,\n fast: motion.speed.fast.value as string,\n slow: motion.speed.slow.value as string,\n slower: motion.speed.slower.value as string,\n },\n },\n breakpoint: {\n xs: breakpoint.xs.value,\n md: breakpoint.md.value,\n lg: breakpoint.lg.value,\n },\n});\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nconst base = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n width: \"fit-content\",\n height: \"0.875rem\", // 0.875rem - 14px\n minWidth: \"0.875rem\", // 0.875rem - 14px\n\n padding: `0 ${varsThemeBase.spacing[1]}`,\n boxSizing: \"border-box\",\n borderRadius: \"0.75rem\",\n\n lineHeight: varsThemeBase.lineWeight.body.caption,\n fontSize: varsThemeBase.fontSize.body.caption,\n fontFamily: varsThemeBase.fontFamily.centranube,\n});\n\nexport const surface = styleVariants({\n primary: [\n base,\n {\n backgroundColor: varsThemeBase.colors.primary.surfaceHighlight,\n color: varsThemeBase.colors.primary.textHigh,\n },\n ],\n success: [\n base,\n {\n backgroundColor: varsThemeBase.colors.success.surfaceHighlight,\n color: varsThemeBase.colors.success.textHigh,\n },\n ],\n warning: [\n base,\n {\n backgroundColor: varsThemeBase.colors.warning.surfaceHighlight,\n color: varsThemeBase.colors.warning.textHigh,\n },\n ],\n danger: [\n base,\n {\n backgroundColor: varsThemeBase.colors.danger.surfaceHighlight,\n color: varsThemeBase.colors.danger.textHigh,\n },\n ],\n neutral: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.textLow,\n color: varsThemeBase.colors.neutral.background,\n },\n ],\n});\n\nexport const light = styleVariants({\n primary: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.background,\n color: varsThemeBase.colors.primary.textLow,\n },\n ],\n success: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.background,\n color: varsThemeBase.colors.success.textLow,\n },\n ],\n warning: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.background,\n color: varsThemeBase.colors.warning.textLow,\n },\n ],\n danger: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.background,\n color: varsThemeBase.colors.danger.textLow,\n },\n ],\n neutral: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.background,\n color: varsThemeBase.colors.neutral.textLow,\n },\n ],\n});\n","import * as style from \"./badge.style.css\";\n\nexport const badge = {\n style,\n};\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { varsThemeBase } from \"../themes/base.css\";\n\nexport const properties = {\n \"primary.surface\": varsThemeBase.colors.primary.surface,\n \"primary.surfaceHighlight\": varsThemeBase.colors.primary.surfaceHighlight,\n \"primary.interactive\": varsThemeBase.colors.primary.interactive,\n \"primary.interactiveHover\": varsThemeBase.colors.primary.interactiveHover,\n \"primary.interactivePressed\": varsThemeBase.colors.primary.interactivePressed,\n \"primary.textLow\": varsThemeBase.colors.primary.textLow,\n \"primary.textHigh\": varsThemeBase.colors.primary.textHigh,\n\n \"success.surface\": varsThemeBase.colors.success.surface,\n \"success.surfaceHighlight\": varsThemeBase.colors.success.surfaceHighlight,\n \"success.interactive\": varsThemeBase.colors.success.interactive,\n \"success.interactiveHover\": varsThemeBase.colors.success.interactiveHover,\n \"success.interactivePressed\": varsThemeBase.colors.success.interactivePressed,\n \"success.textLow\": varsThemeBase.colors.success.textLow,\n \"success.textHigh\": varsThemeBase.colors.success.textHigh,\n\n \"warning.surface\": varsThemeBase.colors.warning.surface,\n \"warning.surfaceHighlight\": varsThemeBase.colors.warning.surfaceHighlight,\n \"warning.interactive\": varsThemeBase.colors.warning.interactive,\n \"warning.interactiveHover\": varsThemeBase.colors.warning.interactiveHover,\n \"warning.interactivePressed\": varsThemeBase.colors.warning.interactivePressed,\n \"warning.textLow\": varsThemeBase.colors.warning.textLow,\n \"warning.textHigh\": varsThemeBase.colors.warning.textHigh,\n\n \"danger.surface\": varsThemeBase.colors.danger.surface,\n \"danger.surfaceHighlight\": varsThemeBase.colors.danger.surfaceHighlight,\n \"danger.interactive\": varsThemeBase.colors.danger.interactive,\n \"danger.interactiveHover\": varsThemeBase.colors.danger.interactiveHover,\n \"danger.interactivePressed\": varsThemeBase.colors.danger.interactivePressed,\n \"danger.textLow\": varsThemeBase.colors.danger.textLow,\n \"danger.textHigh\": varsThemeBase.colors.danger.textHigh,\n\n \"neutral.background\": varsThemeBase.colors.neutral.background,\n \"neutral.surface\": varsThemeBase.colors.neutral.surface,\n \"neutral.surfaceDisabled\": varsThemeBase.colors.neutral.surfaceDisabled,\n \"neutral.surfaceHighlight\": varsThemeBase.colors.neutral.surfaceHighlight,\n \"neutral.interactive\": varsThemeBase.colors.neutral.interactive,\n \"neutral.interactiveHover\": varsThemeBase.colors.neutral.interactiveHover,\n \"neutral.interactivePressed\": varsThemeBase.colors.neutral.interactivePressed,\n \"neutral.textDisabled\": varsThemeBase.colors.neutral.textDisabled,\n \"neutral.textLow\": varsThemeBase.colors.neutral.textLow,\n \"neutral.textHigh\": varsThemeBase.colors.neutral.textHigh,\n};\n\nconst sprinkle = createSprinkles(\n defineProperties({\n properties: {\n color: properties,\n backgroundColor: properties,\n },\n })\n);\n\nexport const colors = {\n sprinkle,\n properties,\n};\n","import tokens from \"@nimbus-ds/tokens/dist/js/tokens\";\n\nconst { breakpoint } = tokens;\n\nexport const mediaQueries = {\n xs: () => `screen and (min-width: ${breakpoint.xs.value})`,\n md: () => `screen and (min-width: ${breakpoint.md.value})`,\n lg: () => `screen and (min-width: ${breakpoint.lg.value})`,\n};\n","import { createRainbowSprinkles, defineProperties } from \"rainbow-sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { mediaQueries } from \"../../../themes/mediaQueries\";\n\ntype BorderStyle = \"solid\" | \"none\" | \"hidden\" | \"dashed\" | \"dotted\";\ntype BoxSizing = \"border-box\" | \"content-box\";\ntype Cursor = \"auto\" | \"pointer\";\n\nexport const backgroundColorProperties = {\n \"primary.interactive\": colors[\"primary.interactive\"],\n \"primary.surface\": colors[\"primary.surface\"],\n \"primary.surfaceHighlight\": colors[\"primary.surfaceHighlight\"],\n \"primary.textLow\": colors[\"primary.textLow\"],\n\n \"success.interactive\": colors[\"success.interactive\"],\n \"success.surface\": colors[\"success.surface\"],\n \"success.surfaceHighlight\": colors[\"success.surfaceHighlight\"],\n \"success.textLow\": colors[\"success.textLow\"],\n\n \"warning.interactive\": colors[\"warning.interactive\"],\n \"warning.surface\": colors[\"warning.surface\"],\n \"warning.surfaceHighlight\": colors[\"warning.surfaceHighlight\"],\n \"warning.textLow\": colors[\"warning.textLow\"],\n\n \"danger.interactive\": colors[\"danger.interactive\"],\n \"danger.surface\": colors[\"danger.surface\"],\n \"danger.surfaceHighlight\": colors[\"danger.surfaceHighlight\"],\n \"danger.textLow\": colors[\"danger.textLow\"],\n\n \"neutral.background\": colors[\"neutral.background\"],\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.surface\": colors[\"neutral.surface\"],\n \"neutral.surfaceHighlight\": colors[\"neutral.surfaceHighlight\"],\n \"neutral.textLow\": colors[\"neutral.textLow\"],\n};\n\nexport const borderColorProperties = {\n \"primary.interactive\": colors[\"primary.interactive\"],\n \"primary.surface\": colors[\"primary.surface\"],\n \"primary.surfaceHighlight\": colors[\"primary.surfaceHighlight\"],\n\n \"success.interactive\": colors[\"success.interactive\"],\n \"success.surface\": colors[\"success.surface\"],\n \"success.surfaceHighlight\": colors[\"success.surfaceHighlight\"],\n\n \"warning.interactive\": colors[\"warning.interactive\"],\n \"warning.surface\": colors[\"warning.surface\"],\n \"warning.surfaceHighlight\": colors[\"warning.surfaceHighlight\"],\n\n \"danger.interactive\": colors[\"danger.interactive\"],\n \"danger.surface\": colors[\"danger.surface\"],\n \"danger.surfaceHighlight\": colors[\"danger.surfaceHighlight\"],\n\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.surface\": colors[\"neutral.surface\"],\n \"neutral.surfaceHighlight\": colors[\"neutral.surfaceHighlight\"],\n};\n\nexport const borderStyleProperties: BorderStyle[] = [\n \"solid\",\n \"none\",\n \"hidden\",\n \"dashed\",\n \"dotted\",\n];\n\nexport const boxSizingProperties: BoxSizing[] = [\"border-box\", \"content-box\"];\n\nexport const cursorProperties: Cursor[] = [\"auto\", \"pointer\"];\n\nexport const spaceProperties = {\n none: \"0\",\n \"0,5\": varsThemeBase.spacing[\"0,5\"],\n \"1\": varsThemeBase.spacing[1],\n \"2\": varsThemeBase.spacing[2],\n \"2,5\": varsThemeBase.spacing[2],\n \"4\": varsThemeBase.spacing[4],\n \"6\": varsThemeBase.spacing[6],\n \"8\": varsThemeBase.spacing[8],\n \"10\": varsThemeBase.spacing[10],\n \"12\": varsThemeBase.spacing[12],\n \"14\": varsThemeBase.spacing[14],\n \"16\": varsThemeBase.spacing[16],\n \"18\": varsThemeBase.spacing[18],\n \"20\": varsThemeBase.spacing[20],\n};\n\nconst properties = defineProperties({\n conditions: {\n xs: {\n \"@media\": mediaQueries.xs(),\n },\n md: {\n \"@media\": mediaQueries.md(),\n },\n lg: {\n \"@media\": mediaQueries.lg(),\n },\n },\n defaultCondition: \"xs\",\n dynamicProperties: {\n width: true,\n height: true,\n borderRadius: true,\n borderWidth: true,\n backgroundColor: backgroundColorProperties,\n borderColor: borderColorProperties,\n padding: spaceProperties,\n paddingTop: spaceProperties,\n paddingBottom: spaceProperties,\n paddingLeft: spaceProperties,\n paddingRight: spaceProperties,\n margin: spaceProperties,\n marginTop: spaceProperties,\n marginBottom: spaceProperties,\n marginLeft: spaceProperties,\n marginRight: spaceProperties,\n },\n staticProperties: {\n borderStyle: borderStyleProperties,\n boxSizing: boxSizingProperties,\n cursor: cursorProperties,\n },\n shorthands: {\n padding: [\"paddingTop\", \"paddingBottom\", \"paddingLeft\", \"paddingRight\"],\n paddingX: [\"paddingLeft\", \"paddingRight\"],\n paddingY: [\"paddingTop\", \"paddingBottom\"],\n p: [\"padding\"],\n pl: [\"paddingLeft\"],\n pr: [\"paddingRight\"],\n pt: [\"paddingTop\"],\n pb: [\"paddingBottom\"],\n px: [\"paddingLeft\", \"paddingRight\"],\n py: [\"paddingTop\", \"paddingBottom\"],\n margin: [\"marginTop\", \"marginBottom\", \"marginLeft\", \"marginRight\"],\n marginX: [\"marginLeft\", \"marginRight\"],\n marginY: [\"marginTop\", \"marginBottom\"],\n m: [\"margin\"],\n mr: [\"marginRight\"],\n ml: [\"marginLeft\"],\n mt: [\"marginTop\"],\n mb: [\"marginBottom\"],\n mx: [\"marginLeft\", \"marginRight\"],\n my: [\"marginTop\", \"marginBottom\"],\n },\n});\n\nexport const sprinkle = createRainbowSprinkles(properties);\n","import {\n backgroundColorProperties,\n borderColorProperties,\n borderStyleProperties,\n boxSizingProperties,\n cursorProperties,\n spaceProperties,\n} from \"./box.sprinkle.css\";\n\ntype CursorProperties = typeof cursorProperties[number];\ntype BorderColorProperties = keyof typeof borderColorProperties;\ntype BackgroundColorProperties = keyof typeof backgroundColorProperties;\ntype BorderStyleProperties = typeof borderStyleProperties[number];\ntype BoxSizingProperties = typeof boxSizingProperties[number];\ntype SpaceProperties = keyof typeof spaceProperties;\n\ninterface Conditions<T> {\n xs?: T;\n md?: T;\n lg?: T;\n}\n\nexport interface BoxSprinkle {\n width?: string | Conditions<string>;\n height?: string | Conditions<string>;\n cursor?: CursorProperties | Conditions<CursorProperties>;\n backgroundColor?:\n | BackgroundColorProperties\n | Conditions<BackgroundColorProperties>;\n borderRadius?: string | Conditions<string>;\n borderWidth?: string | Conditions<string>;\n borderColor?: BorderColorProperties | Conditions<BorderColorProperties>;\n borderStyle?: BorderStyleProperties | Conditions<BorderStyleProperties>;\n boxSizing?: BoxSizingProperties | Conditions<BoxSizingProperties>;\n padding?: SpaceProperties | Conditions<SpaceProperties>;\n paddingTop?: SpaceProperties | Conditions<SpaceProperties>;\n paddingBottom?: SpaceProperties | Conditions<SpaceProperties>;\n paddingLeft?: SpaceProperties | Conditions<SpaceProperties>;\n paddingRight?: SpaceProperties | Conditions<SpaceProperties>;\n margin?: SpaceProperties | Conditions<SpaceProperties>;\n marginTop?: SpaceProperties | Conditions<SpaceProperties>;\n marginBottom?: SpaceProperties | Conditions<SpaceProperties>;\n marginLeft?: SpaceProperties | Conditions<SpaceProperties>;\n marginRight?: SpaceProperties | Conditions<SpaceProperties>;\n paddingX?: SpaceProperties | Conditions<SpaceProperties>;\n paddingY?: SpaceProperties | Conditions<SpaceProperties>;\n p?: SpaceProperties | Conditions<SpaceProperties>;\n pl?: SpaceProperties | Conditions<SpaceProperties>;\n pr?: SpaceProperties | Conditions<SpaceProperties>;\n pt?: SpaceProperties | Conditions<SpaceProperties>;\n pb?: SpaceProperties | Conditions<SpaceProperties>;\n px?: SpaceProperties | Conditions<SpaceProperties>;\n py?: SpaceProperties | Conditions<SpaceProperties>;\n marginX?: SpaceProperties | Conditions<SpaceProperties>;\n marginY?: SpaceProperties | Conditions<SpaceProperties>;\n m?: SpaceProperties | Conditions<SpaceProperties>;\n mr?: SpaceProperties | Conditions<SpaceProperties>;\n ml?: SpaceProperties | Conditions<SpaceProperties>;\n mt?: SpaceProperties | Conditions<SpaceProperties>;\n mb?: SpaceProperties | Conditions<SpaceProperties>;\n mx?: SpaceProperties | Conditions<SpaceProperties>;\n my?: SpaceProperties | Conditions<SpaceProperties>;\n}\n","import {\n sprinkle,\n backgroundColorProperties,\n borderColorProperties,\n borderStyleProperties,\n boxSizingProperties,\n spaceProperties,\n cursorProperties,\n} from \"./box.sprinkle.css\";\n\nexport const box = {\n sprinkle,\n properties: {\n backgroundColor: backgroundColorProperties,\n borderColor: borderColorProperties,\n borderStyle: borderStyleProperties,\n boxSizing: boxSizingProperties,\n space: spaceProperties,\n cursor: cursorProperties,\n },\n};\n\nexport type { BoxSprinkle } from \"./box.sprinkle.types\";\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nconst base = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n padding: `${varsThemeBase.spacing[2]} ${varsThemeBase.spacing[4]}`,\n height: \"2.125rem\",\n width: \"fit-content\",\n gap: varsThemeBase.spacing[1],\n\n fontWeight: varsThemeBase.fontWeight.bold,\n lineHeight: varsThemeBase.lineWeight.body.base,\n fontSize: varsThemeBase.fontSize.body.base,\n fontFamily: varsThemeBase.fontFamily.centranube,\n\n color: varsThemeBase.colors.neutral.textLow,\n borderRadius: \"0.5rem\",\n boxSizing: \"border-box\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderColor: varsThemeBase.colors.neutral.interactive,\n\n cursor: \"pointer\",\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n \":disabled\": {\n color: varsThemeBase.colors.neutral.textDisabled,\n cursor: \"auto\",\n },\n});\n\nexport const style = styleVariants({\n primary: [\n base,\n {\n background: varsThemeBase.colors.primary.interactive,\n borderColor: varsThemeBase.colors.primary.interactive,\n color: varsThemeBase.colors.neutral.background,\n \":hover\": {\n background: varsThemeBase.colors.primary.interactiveHover,\n borderColor: varsThemeBase.colors.primary.interactiveHover,\n },\n \":active\": {\n background: varsThemeBase.colors.primary.interactivePressed,\n borderColor: varsThemeBase.colors.primary.interactivePressed,\n },\n \":disabled\": {\n background: varsThemeBase.colors.neutral.surfaceDisabled,\n borderColor: varsThemeBase.colors.primary.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.primary.interactiveHover,\n },\n },\n ],\n danger: [\n base,\n {\n background: varsThemeBase.colors.danger.interactive,\n borderColor: varsThemeBase.colors.danger.interactive,\n color: varsThemeBase.colors.neutral.background,\n \":hover\": {\n background: varsThemeBase.colors.danger.interactiveHover,\n borderColor: varsThemeBase.colors.danger.interactiveHover,\n },\n \":active\": {\n background: varsThemeBase.colors.danger.interactivePressed,\n borderColor: varsThemeBase.colors.danger.interactivePressed,\n },\n \":disabled\": {\n background: varsThemeBase.colors.neutral.surfaceDisabled,\n borderColor: varsThemeBase.colors.danger.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.danger.interactiveHover,\n },\n },\n ],\n neutral: [\n base,\n {\n background: varsThemeBase.colors.neutral.interactive,\n borderColor: varsThemeBase.colors.neutral.interactive,\n color: varsThemeBase.colors.neutral.textLow,\n \":hover\": {\n background: varsThemeBase.colors.neutral.interactiveHover,\n borderColor: varsThemeBase.colors.neutral.interactiveHover,\n },\n \":active\": {\n background: varsThemeBase.colors.neutral.interactivePressed,\n borderColor: varsThemeBase.colors.neutral.interactivePressed,\n },\n \":disabled\": {\n background: varsThemeBase.colors.neutral.surfaceDisabled,\n borderColor: varsThemeBase.colors.neutral.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.neutral.interactiveHover,\n },\n },\n ],\n});\n","import { style } from \"./button.style.css\";\n\nexport const button = {\n style,\n};\n","import { style as vanillaStyle, globalStyle } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = vanillaStyle({\n display: \"flex\",\n alignItems: \"flex-start\",\n width: \"fit-content\",\n gap: varsThemeBase.spacing[1],\n position: \"relative\",\n});\n\nexport const input = vanillaStyle({\n position: \"absolute\",\n overflow: \"hidden\",\n opacity: 0,\n height: 0,\n width: 0,\n});\n\nexport const checkmark = vanillaStyle({\n minWidth: \"0.938rem\",\n minHeight: \"0.938rem\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderRadius: varsThemeBase.spacing[1],\n});\n\nexport const checkicon = vanillaStyle({\n display: \"none\",\n});\n\nexport const checkindeterminate = vanillaStyle({\n display: \"block\",\n});\n\nglobalStyle(`${container} input:checked ~ ${checkmark}`, {\n backgroundColor: varsThemeBase.colors.primary.interactive,\n borderColor: varsThemeBase.colors.primary.interactive,\n});\n\nglobalStyle(`${container} input:disabled ~ ${checkmark}`, {\n backgroundColor: varsThemeBase.colors.neutral.surfaceDisabled,\n borderColor: varsThemeBase.colors.neutral.interactive,\n});\n\nglobalStyle(`${container} input:checked ~ ${checkmark} ${checkicon}`, {\n display: \"block\",\n});\n\nglobalStyle(`${container} input:checked ~ ${checkmark} ${checkindeterminate}`, {\n display: \"none\",\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\n\nexport const borderColorProperties = {\n \"primary.interactive\": colors[\"primary.interactive\"],\n \"danger.interactive\": colors[\"danger.interactive\"],\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n};\n\nexport const cursorProperties = {\n pointer: \"pointer\",\n auto: \"auto\",\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n borderColor: borderColorProperties,\n cursor: cursorProperties,\n },\n })\n);\n","import * as styles from \"./checkbox.style.css\";\nimport {\n sprinkle,\n borderColorProperties,\n cursorProperties,\n} from \"./checkbox.sprinkle.css\";\n\nexport const checkbox = {\n style: styles,\n sprinkle,\n properties: { color: borderColorProperties, cursor: cursorProperties },\n};\n","import { style as vanillaStyle } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const style = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n padding: `${varsThemeBase.spacing[1]} ${varsThemeBase.spacing[2]}`,\n height: \"1.5rem\",\n width: \"fit-content\",\n gap: varsThemeBase.spacing[1],\n\n lineHeight: varsThemeBase.lineWeight.body.caption,\n fontSize: varsThemeBase.fontSize.body.caption,\n fontFamily: varsThemeBase.fontFamily.centranube,\n\n background: varsThemeBase.colors.neutral.interactive,\n color: varsThemeBase.colors.neutral.textLow,\n borderRadius: \"0.25rem\",\n boxSizing: \"border-box\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderColor: varsThemeBase.colors.neutral.interactive,\n\n cursor: \"pointer\",\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n\n \":hover\": {\n background: varsThemeBase.colors.neutral.interactiveHover,\n borderColor: varsThemeBase.colors.neutral.interactiveHover,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.neutral.interactiveHover,\n },\n \":active\": {\n background: varsThemeBase.colors.neutral.interactivePressed,\n borderColor: varsThemeBase.colors.neutral.interactivePressed,\n },\n});\n","import { style } from \"./chip.style.css\";\n\nexport const chip = {\n style,\n};\n","import { style } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { utils } from \"../../../utils\";\n\nexport const container = style({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: varsThemeBase.sizes[1],\n width: utils.vars.width,\n height: utils.vars.height,\n\n background: varsThemeBase.colors.primary.surface,\n borderRadius: varsThemeBase.spacing[2],\n borderWidth: varsThemeBase.sizes[\"0,5\"],\n borderStyle: \"dashed\",\n borderColor: varsThemeBase.colors.primary.interactive,\n cursor: \"pointer\",\n});\n\nexport const disabled = style({\n background: varsThemeBase.colors.neutral.surfaceDisabled,\n borderColor: varsThemeBase.colors.neutral.interactive,\n});\n\nexport const input = style({\n display: \"none\",\n});\n\nexport const skeleton = style({\n display: \"flex\",\n});\n","import { style as vanillaStyle } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { utils } from \"../../../utils\";\n\nexport const container = vanillaStyle({\n display: \"flex\",\n background: varsThemeBase.colors.neutral.surfaceDisabled,\n borderRadius: varsThemeBase.spacing[2],\n width: utils.vars.width,\n overflow: \"hidden\",\n});\n\nexport const image = vanillaStyle({\n width: \"100%\",\n objectFit: \"cover\",\n});\n\nexport const placeholder = vanillaStyle({\n width: \"100%\",\n objectFit: \"cover\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n});\n\nexport const skeleton = vanillaStyle({\n display: \"flex\",\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\n\nexport const aspectRatioProperties = {\n \"1-1\": \"1/1\",\n \"16-9\": \"16/9\",\n \"9-16\": \"9/16\",\n \"4-3\": \"4/3\",\n \"3-4\": \"3/4\",\n \"2-1\": \"2/1\",\n \"1-2\": \"1/2\",\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n aspectRatio: aspectRatioProperties,\n },\n })\n);\n","import * as style from \"./thumbnail.style.css\";\nimport { sprinkle, aspectRatioProperties } from \"./thumbnail.sprinkle.css\";\n\nexport const thumbnail = {\n style,\n sprinkle,\n properties: { aspectRatio: aspectRatioProperties },\n};\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { thumbnail } from \"../thumbnail\";\n\nexport const aspectRatioProperties = {\n none: \"none\",\n ...thumbnail.properties.aspectRatio,\n};\nexport const flexDirectionProperties = {\n row: \"row\",\n column: \"column\",\n} as const;\n\nexport const cursorProperties = {\n pointer: \"pointer\",\n auto: \"auto\",\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n aspectRatio: aspectRatioProperties,\n flexDirection: flexDirectionProperties,\n cursor: cursorProperties,\n },\n })\n);\n","import * as style from \"./fileUploader.style.css\";\nimport {\n sprinkle,\n aspectRatioProperties,\n flexDirectionProperties,\n} from \"./fileUploader.sprinkle.css\";\n\nexport const fileUploader = {\n style,\n sprinkle,\n properties: {\n aspectRatio: aspectRatioProperties,\n flexDirection: flexDirectionProperties,\n },\n};\n","import { style as vanillaStyle } from \"@vanilla-extract/css\";\n\nexport const style = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\n\nexport const colorProperties = {\n \"primary.interactive\": colors[\"primary.interactive\"],\n \"primary.textLow\": colors[\"primary.textLow\"],\n \"primary.textHigh\": colors[\"primary.textHigh\"],\n\n \"success.interactive\": colors[\"success.interactive\"],\n \"success.textLow\": colors[\"success.textLow\"],\n \"success.textHigh\": colors[\"success.textHigh\"],\n\n \"warning.interactive\": colors[\"warning.interactive\"],\n \"warning.textLow\": colors[\"warning.textLow\"],\n \"warning.textHigh\": colors[\"warning.textHigh\"],\n\n \"danger.interactive\": colors[\"danger.interactive\"],\n \"danger.textLow\": colors[\"danger.textLow\"],\n \"danger.textHigh\": colors[\"danger.textHigh\"],\n\n \"neutral.background\": colors[\"neutral.background\"],\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.textLow\": colors[\"neutral.textLow\"],\n \"neutral.textDisabled\": colors[\"neutral.textDisabled\"],\n \"neutral.textHigh\": colors[\"neutral.textHigh\"],\n};\n\nexport const cursorProperties = [\"auto\", \"pointer\"] as const;\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n color: colorProperties,\n cursor: cursorProperties,\n },\n })\n);\n","import { style } from \"./icon.style.css\";\nimport {\n sprinkle,\n cursorProperties,\n colorProperties,\n} from \"./icon.sprinkle.css\";\n\nexport const icon = {\n style,\n sprinkle,\n properties: {\n color: colorProperties,\n cursor: cursorProperties,\n },\n};\n","import { style as vanillaStyle } from \"@vanilla-extract/css\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n borderRadius: \"100%\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n \":active\": {\n backgroundColor: varsThemeBase.colors.neutral.interactivePressed,\n borderColor: varsThemeBase.colors.neutral.interactivePressed,\n },\n});\n","import { createRainbowSprinkles, defineProperties } from \"rainbow-sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\nimport { mediaQueries } from \"../../../themes/mediaQueries\";\n\nexport const backgroundColorProperties = {\n transparent: \"transparent\",\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.surfaceHighlight\": colors[\"neutral.surfaceHighlight\"],\n \"neutral.interactivePressed\": colors[\"neutral.interactivePressed\"],\n};\n\nexport const borderColorProperties = {\n ...backgroundColorProperties,\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.interactiveHover\": colors[\"neutral.interactiveHover\"],\n};\n\nexport const sprinkle = createRainbowSprinkles(\n defineProperties({\n conditions: {\n xs: {\n \"@media\": mediaQueries.xs(),\n },\n md: {\n \"@media\": mediaQueries.md(),\n },\n lg: {\n \"@media\": mediaQueries.lg(),\n },\n active: { selector: \"&:active\" },\n hover: { selector: \"&:hover\" },\n focus: { selector: \"&:focus\" },\n },\n defaultCondition: \"xs\",\n staticProperties: {},\n dynamicProperties: {\n width: true,\n height: true,\n backgroundColor: backgroundColorProperties,\n borderColor: borderColorProperties,\n },\n shorthands: {\n size: [\"width\", \"height\"],\n },\n })\n);\n","import {\n backgroundColorProperties,\n borderColorProperties,\n} from \"./iconButton.sprinkle.css\";\n\ntype BackgroundColorProperties = keyof typeof backgroundColorProperties;\ntype BorderColorProperties = keyof typeof borderColorProperties;\n\ninterface Conditions<T> {\n xs?: T;\n md?: T;\n lg?: T;\n focus?: T;\n active?: T;\n hover?: T;\n}\n\nexport interface IconButtonSprinkle {\n size?: string | Conditions<string>;\n borderColor?: BorderColorProperties | Conditions<BorderColorProperties>;\n backgroundColor?:\n | BackgroundColorProperties\n | Conditions<BackgroundColorProperties>;\n}\n","import * as style from \"./iconButton.style.css\";\nimport {\n backgroundColorProperties,\n borderColorProperties,\n sprinkle,\n} from \"./iconButton.sprinkle.css\";\n\nexport const iconButton = {\n style,\n sprinkle,\n properties: {\n backgroundColor: backgroundColorProperties,\n borderColor: borderColorProperties,\n },\n};\n\nexport type { IconButtonSprinkle } from \"./iconButton.sprinkle.types\";\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n});\n\nexport const baseAppend = vanillaStyle({\n position: \"absolute\",\n});\n\nexport const append = styleVariants({\n start: [baseAppend, { left: \"8px\" }],\n end: [baseAppend, { right: \"8px\" }],\n});\n\nconst baseInput = vanillaStyle({\n padding: varsThemeBase.spacing[2],\n height: \"2rem\",\n width: \"100%\",\n\n fontWeight: varsThemeBase.fontWeight.regular,\n fontSize: varsThemeBase.fontSize.body.base,\n fontFamily: varsThemeBase.fontFamily.centranube,\n\n color: varsThemeBase.colors.neutral.textLow,\n borderRadius: varsThemeBase.sizes[2],\n boxSizing: \"border-box\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderColor: varsThemeBase.colors.neutral.interactive,\n\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n \":focus\": {\n outline: \"none\",\n boxShadow: `0px 0px 0px 3px ${varsThemeBase.colors.primary.surfaceHighlight}`,\n },\n \":disabled\": {\n borderColor: varsThemeBase.colors.neutral.interactive,\n background: varsThemeBase.colors.neutral.surfaceDisabled,\n color: varsThemeBase.colors.neutral.textDisabled,\n },\n});\n\nexport const inputAppearance = styleVariants({\n neutral: [\n baseInput,\n {\n background: varsThemeBase.colors.neutral.background,\n borderColor: varsThemeBase.colors.neutral.interactive,\n \":focus\": {\n borderColor: varsThemeBase.colors.primary.interactiveHover,\n },\n },\n ],\n success: [\n baseInput,\n {\n background: varsThemeBase.colors.success.surface,\n borderColor: varsThemeBase.colors.success.interactive,\n \":focus\": {\n borderColor: varsThemeBase.colors.success.interactiveHover,\n },\n },\n ],\n warning: [\n baseInput,\n {\n background: varsThemeBase.colors.warning.surface,\n borderColor: varsThemeBase.colors.warning.interactive,\n \":focus\": {\n borderColor: varsThemeBase.colors.warning.interactiveHover,\n },\n },\n ],\n danger: [\n baseInput,\n {\n background: varsThemeBase.colors.danger.surface,\n borderColor: varsThemeBase.colors.danger.interactive,\n \":focus\": {\n borderColor: varsThemeBase.colors.danger.interactiveHover,\n },\n },\n ],\n});\n\nexport const inputAppend = styleVariants({\n start: {\n paddingLeft: \"32px\",\n },\n end: {\n paddingRight: \"32px\",\n },\n});\n\nexport const password = vanillaStyle({\n padding: \"0\",\n cursor: \"pointer\",\n background: \"transparent\",\n border: \"none\",\n});\n","import * as style from \"./input.style.css\";\n\nexport const input = {\n style,\n};\n","import { style } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const base = style({\n display: \"flex\",\n alignItems: \"center\",\n gap: varsThemeBase.spacing[1],\n\n lineHeight: varsThemeBase.lineWeight.body.caption,\n fontSize: varsThemeBase.fontSize.body.caption,\n fontFamily: varsThemeBase.fontFamily.centranube,\n\n color: varsThemeBase.colors.neutral.textLow,\n});\n\nexport const hidden = style({\n border: \"0\",\n clip: \"rect(0 0 0 0)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0\",\n position: \"absolute\",\n width: \"1px\",\n});\n","import * as style from \"./label.style.css\";\n\nexport const label = {\n style,\n};\n","import { recipe } from \"@vanilla-extract/recipes\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const style = recipe({\n base: {\n margin: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"fit-content\",\n height: \"1.25rem\",\n gap: varsThemeBase.spacing[1],\n padding: `${varsThemeBase.spacing[\"0,5\"]} ${varsThemeBase.spacing[2]}`,\n boxSizing: \"border-box\",\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderRadius: varsThemeBase.sizes[3],\n lineHeight: varsThemeBase.lineWeight.body.caption,\n fontSize: varsThemeBase.fontSize.body.caption,\n fontFamily: varsThemeBase.fontFamily.centranube,\n },\n variants: {\n appearance: {\n neutral: {\n color: varsThemeBase.colors.neutral.textLow,\n backgroundColor: varsThemeBase.colors.neutral.surface,\n borderColor: varsThemeBase.colors.neutral.surfaceHighlight,\n },\n primary: {\n color: varsThemeBase.colors.primary.textLow,\n backgroundColor: varsThemeBase.colors.primary.surface,\n borderColor: varsThemeBase.colors.primary.surfaceHighlight,\n },\n success: {\n color: varsThemeBase.colors.success.textLow,\n backgroundColor: varsThemeBase.colors.success.surface,\n borderColor: varsThemeBase.colors.success.surfaceHighlight,\n },\n warning: {\n color: varsThemeBase.colors.warning.textLow,\n backgroundColor: varsThemeBase.colors.warning.surface,\n borderColor: varsThemeBase.colors.warning.surfaceHighlight,\n },\n danger: {\n color: varsThemeBase.colors.danger.textLow,\n backgroundColor: varsThemeBase.colors.danger.surface,\n borderColor: varsThemeBase.colors.danger.surfaceHighlight,\n },\n },\n defaultVariants: {\n appearance: \"neutral\",\n },\n },\n});\n","import { style } from \"./tag.style.css\";\n\nexport const tag = {\n style,\n};\n","import { style as vanillaStyle } from \"@vanilla-extract/css\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const style = vanillaStyle({\n fontFamily: varsThemeBase.fontFamily.centranube,\n fontWeight: varsThemeBase.fontWeight.regular,\n margin: 0,\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\n\nexport const properties = {\n left: \"left\",\n right: \"right\",\n center: \"center\",\n justify: \"justify\",\n} as const;\n\nconst sprinkle = createSprinkles(\n defineProperties({\n properties: {\n textAlign: properties,\n },\n })\n);\n\nexport const textAlign = {\n sprinkle,\n properties,\n};\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\nimport { properties as textAlignProperties } from \"../../../sprinkles/textAlign.css\";\n\nconst colorsProperties = {\n currentColor: \"currentColor\",\n\n \"primary.interactive\": colors[\"primary.interactive\"],\n \"primary.textLow\": colors[\"primary.textLow\"],\n \"primary.textHigh\": colors[\"primary.textHigh\"],\n\n \"success.interactive\": colors[\"success.interactive\"],\n \"success.textLow\": colors[\"success.textLow\"],\n \"success.textHigh\": colors[\"success.textHigh\"],\n\n \"warning.interactive\": colors[\"warning.interactive\"],\n \"warning.textLow\": colors[\"warning.textLow\"],\n \"warning.textHigh\": colors[\"warning.textHigh\"],\n\n \"danger.interactive\": colors[\"danger.interactive\"],\n \"danger.textLow\": colors[\"danger.textLow\"],\n \"danger.textHigh\": colors[\"danger.textHigh\"],\n\n \"neutral.background\": colors[\"neutral.background\"],\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.textDisabled\": colors[\"neutral.textDisabled\"],\n \"neutral.textLow\": colors[\"neutral.textLow\"],\n \"neutral.textHigh\": colors[\"neutral.textHigh\"],\n};\n\nconst lineHeightProperties = {\n caption: varsThemeBase.lineWeight.body.caption,\n base: varsThemeBase.lineWeight.body.base,\n highlight: varsThemeBase.lineWeight.body.highlight,\n};\n\nconst fontWeightProperties = {\n regular: varsThemeBase.fontWeight.regular,\n bold: varsThemeBase.fontWeight.bold,\n};\n\nconst fontSizeProperties = {\n caption: varsThemeBase.fontSize.body.caption,\n base: varsThemeBase.fontSize.body.base,\n highlight: varsThemeBase.fontSize.body.highlight,\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n color: colorsProperties,\n lineHeight: lineHeightProperties,\n fontWeight: fontWeightProperties,\n fontSize: fontSizeProperties,\n textAlign: textAlignProperties,\n },\n })\n);\n\nexport {\n textAlignProperties,\n colorsProperties,\n lineHeightProperties,\n fontWeightProperties,\n fontSizeProperties,\n};\n","import { style } from \"./text.style.css\";\nimport {\n sprinkle,\n colorsProperties,\n textAlignProperties,\n lineHeightProperties,\n fontWeightProperties,\n fontSizeProperties,\n} from \"./text.sprinkle.css\";\n\nexport const text = {\n style,\n sprinkle,\n properties: {\n colors: colorsProperties,\n textAlign: textAlignProperties,\n lineHeight: lineHeightProperties,\n fontWeight: fontWeightProperties,\n fontSize: fontSizeProperties,\n },\n};\n","import { recipe } from \"@vanilla-extract/recipes\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const style = recipe({\n base: {\n fontFamily: varsThemeBase.fontFamily.centranube,\n fontWeight: varsThemeBase.fontWeight.bold,\n margin: 0,\n },\n variants: {\n as: {\n h1: {\n fontSize: varsThemeBase.fontSize.title.h1,\n lineHeight: varsThemeBase.lineWeight.title.h1,\n },\n h2: {\n fontSize: varsThemeBase.fontSize.title.h2,\n lineHeight: varsThemeBase.lineWeight.title.h2,\n },\n h3: {\n fontSize: varsThemeBase.fontSize.title.h3,\n lineHeight: varsThemeBase.lineWeight.title.h3,\n },\n h4: {\n fontSize: varsThemeBase.fontSize.title.h4,\n lineHeight: varsThemeBase.lineWeight.title.h4,\n },\n h5: {\n fontSize: varsThemeBase.fontSize.title.h5,\n lineHeight: varsThemeBase.lineWeight.title.h5,\n },\n h6: {\n fontSize: varsThemeBase.fontSize.title.h6,\n lineHeight: varsThemeBase.lineWeight.title.h6,\n },\n },\n defaultVariants: {\n as: \"h1\",\n },\n },\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\n\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\nimport { properties as textAlignProperties } from \"../../../sprinkles/textAlign.css\";\n\nconst colorsProperties = {\n \"primary.textHigh\": colors[\"primary.textHigh\"],\n \"primary.textLow\": colors[\"primary.textLow\"],\n \"success.textHigh\": colors[\"success.textHigh\"],\n \"success.textLow\": colors[\"success.textLow\"],\n \"warning.textHigh\": colors[\"warning.textHigh\"],\n \"warning.textLow\": colors[\"warning.textLow\"],\n \"danger.textHigh\": colors[\"danger.textHigh\"],\n \"danger.textLow\": colors[\"danger.textLow\"],\n \"neutral.textHigh\": colors[\"neutral.textHigh\"],\n \"neutral.textLow\": colors[\"neutral.textLow\"],\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n color: colorsProperties,\n textAlign: textAlignProperties,\n },\n })\n);\n\nexport { textAlignProperties, colorsProperties };\n","import { style } from \"./title.style.css\";\nimport {\n sprinkle,\n colorsProperties,\n textAlignProperties,\n} from \"./title.sprinkle.css\";\n\nexport const title = {\n style,\n sprinkle,\n properties: { colors: colorsProperties, textAlign: textAlignProperties },\n};\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nconst base = vanillaStyle({\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n gap: varsThemeBase.spacing[1],\n\n height: \"2rem\",\n width: \"fit-content\",\n\n padding: varsThemeBase.spacing[1],\n boxSizing: \"border-box\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderRadius: varsThemeBase.spacing[1],\n\n transition: `${varsThemeBase.motion.speed.fast} ease`,\n});\n\nexport const wrapper = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n position: \"fixed\",\n bottom: \"2rem\",\n flexDirection: \"column-reverse\",\n left: 0,\n right: 0,\n});\n\nexport const content = styleVariants({\n primary: [\n base,\n {\n background: varsThemeBase.colors.primary.surface,\n borderColor: varsThemeBase.colors.primary.surfaceHighlight,\n },\n ],\n success: [\n base,\n {\n background: varsThemeBase.colors.success.surface,\n borderColor: varsThemeBase.colors.success.surfaceHighlight,\n },\n ],\n danger: [\n base,\n {\n background: varsThemeBase.colors.danger.surface,\n borderColor: varsThemeBase.colors.danger.surfaceHighlight,\n },\n ],\n progress: [\n base,\n {\n background: varsThemeBase.colors.neutral.surface,\n borderColor: varsThemeBase.colors.neutral.surfaceHighlight,\n },\n ],\n});\n","import { wrapper, content } from \"./toast.style.css\";\n\nexport const toast = {\n style: { wrapper, content },\n};\n","import { style as vanillaStyle } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = vanillaStyle({\n display: \"flex\",\n flexDirection: \"column\",\n gap: varsThemeBase.spacing[1],\n margin: \"0\",\n paddingInlineStart: varsThemeBase.spacing[6],\n});\n\nexport const item = vanillaStyle({\n lineHeight: varsThemeBase.lineWeight.body.base,\n fontSize: varsThemeBase.fontSize.body.base,\n fontFamily: varsThemeBase.fontFamily.centranube,\n\n color: varsThemeBase.colors.neutral.textLow,\n\n position: \"relative\",\n\n selectors: {\n \"&::marker\": {\n color: varsThemeBase.colors.neutral.surfaceHighlight,\n },\n },\n});\n\nexport const skeleton = vanillaStyle({\n display: \"flex\",\n flexDirection: \"column\",\n gap: varsThemeBase.spacing[1],\n});\n","import * as style from \"./list.style.css\";\n\nexport const list = {\n style,\n};\n","import { style, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const content = style({\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n width: \"17.5rem\",\n minHeight: \"2rem\",\n filter: `drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2))`,\n borderRadius: varsThemeBase.spacing[2],\n boxSizing: \"border-box\",\n transition: `opacity ${varsThemeBase.motion.speed.fast} ease`,\n});\n\nexport const baseArrow = style({\n \"::after\": {\n content: \" \",\n position: \"absolute\",\n borderWidth: varsThemeBase.spacing[2],\n borderStyle: \"solid\",\n },\n});\n\nexport const arrow = styleVariants({\n top: [\n baseArrow,\n {\n \"::after\": {\n top: \"100%\",\n borderColor: `currentColor transparent transparent transparent`,\n marginLeft: \"-0.5rem\",\n left: \"50%\",\n },\n },\n ],\n bottom: [\n baseArrow,\n {\n \"::after\": {\n bottom: \"100%\",\n borderColor: `transparent transparent currentColor transparent`,\n marginLeft: \"-0.5rem\",\n left: \"50%\",\n },\n },\n ],\n left: [\n baseArrow,\n {\n \"::after\": {\n bottom: \"100%\",\n borderColor: `transparent transparent transparent currentColor`,\n marginTop: \"-0.5rem\",\n top: \"50%\",\n left: \"100%\",\n },\n },\n ],\n right: [\n baseArrow,\n {\n \"::after\": {\n bottom: \"100%\",\n borderColor: `transparent currentColor transparent transparent`,\n marginTop: \"-0.5rem\",\n top: \"50%\",\n right: \"100%\",\n },\n },\n ],\n});\n\nexport const placement = styleVariants({\n top: {},\n right: {},\n bottom: {},\n left: {},\n \"top-start\": {},\n \"top-end\": {},\n \"right-start\": { \"::after\": { marginTop: 0 } },\n \"right-end\": { \"::after\": { marginTop: \"-1rem\" } },\n \"bottom-start\": {},\n \"bottom-end\": {},\n \"left-start\": { \"::after\": { marginTop: 0 } },\n \"left-end\": { \"::after\": { marginTop: \"-1rem\" } },\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const backgroundColorProperties = {\n primary: colors[\"primary.surfaceHighlight\"],\n success: colors[\"success.surfaceHighlight\"],\n danger: colors[\"danger.surfaceHighlight\"],\n neutral: colors[\"neutral.surfaceHighlight\"],\n warning: colors[\"warning.surfaceHighlight\"],\n light: colors[\"neutral.background\"],\n};\n\nexport const colorProperties = backgroundColorProperties;\n\nexport const paddingProperties = {\n base: varsThemeBase.spacing[4],\n none: 0,\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n backgroundColor: backgroundColorProperties,\n color: colorProperties,\n padding: paddingProperties,\n },\n })\n);\n","import * as style from \"./popover.style.css\";\nimport {\n backgroundColorProperties,\n paddingProperties,\n colorProperties,\n sprinkle,\n} from \"./popover.sprinkle.css\";\n\nexport const popover = {\n style,\n sprinkle,\n properties: {\n backgroundColor: backgroundColorProperties,\n padding: paddingProperties,\n color: colorProperties,\n },\n};\n","import { style, styleVariants, globalStyle } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\n/* -------------------------------------------------------------------------------------------------\n * style as \"base\"\n * -----------------------------------------------------------------------------------------------*/\n\nexport const container = style({\n position: \"relative\",\n display: \"flex\",\n alignItems: \"flex-start\",\n width: \"fit-content\",\n gap: varsThemeBase.spacing[1],\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderColor: \"transparent\",\n borderRadius: varsThemeBase.sizes[1],\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n \":focus\": {\n borderColor: varsThemeBase.colors.neutral.interactiveHover,\n },\n});\n\nconst base = style({\n display: \"flex\",\n padding: `${varsThemeBase.spacing[1]} ${varsThemeBase.sizes[\"1,5\"]}`,\n borderRadius: varsThemeBase.sizes[1],\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n});\n\nexport const content = styleVariants({\n radio: [\n {\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n display: \"flex\",\n color: varsThemeBase.colors.neutral.textLow,\n },\n ],\n button: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.interactive,\n color: varsThemeBase.colors.neutral.textLow,\n \":active\": {\n background: varsThemeBase.colors.neutral.interactivePressed,\n color: varsThemeBase.colors.neutral.textHigh,\n },\n \":hover\": {\n background: varsThemeBase.colors.neutral.interactiveHover,\n },\n },\n ],\n disabled: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.surfaceDisabled,\n color: varsThemeBase.colors.neutral.textDisabled,\n },\n ],\n});\n\nexport const input = style({\n position: \"absolute\",\n overflow: \"hidden\",\n opacity: 0,\n height: 0,\n width: 0,\n});\n\n/* -------------------------------------------------------------------------------------------------\n * style as \"radio\"\n * -----------------------------------------------------------------------------------------------*/\n\nexport const checkmark = style({\n minWidth: \"0.938rem\",\n minHeight: \"0.938rem\",\n\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n\n borderWidth: \"0.063rem\",\n borderStyle: \"solid\",\n borderRadius: varsThemeBase.sizes[3],\n borderColor: varsThemeBase.colors.neutral.interactive,\n});\n\nexport const checkicon = style({\n display: \"none\",\n width: \"0.563rem\",\n height: \"0.563rem\",\n borderRadius: \"0.563rem\",\n});\n\nglobalStyle(`${input}:checked ~ ${checkmark}`, {\n borderColor: varsThemeBase.colors.primary.interactive,\n});\n\nglobalStyle(`${input}:checked ~ ${checkmark} ${checkicon}`, {\n display: \"block\",\n backgroundColor: varsThemeBase.colors.primary.interactive,\n});\n\nglobalStyle(`${input}:disabled ~ ${checkmark}`, {\n backgroundColor: varsThemeBase.colors.neutral.surfaceDisabled,\n borderColor: varsThemeBase.colors.neutral.interactive,\n});\n\nglobalStyle(`${input}:disabled ~ ${checkmark} ${checkicon}`, {\n backgroundColor: varsThemeBase.colors.neutral.textDisabled,\n});\n\n/* -------------------------------------------------------------------------------------------------\n * style as \"button\"\n * -----------------------------------------------------------------------------------------------*/\n\nglobalStyle(`${input}:checked ~ ${content.button}`, {\n backgroundColor: varsThemeBase.colors.primary.interactive,\n color: varsThemeBase.colors.neutral.background,\n});\n\nglobalStyle(`${input}:checked ~ ${content.disabled}`, {\n backgroundColor: varsThemeBase.colors.neutral.textDisabled,\n color: varsThemeBase.colors.neutral.background,\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\n\nexport const cursorProperties = {\n pointer: \"pointer\",\n auto: \"auto\",\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n cursor: cursorProperties,\n },\n })\n);\n","import * as styles from \"./radio.style.css\";\nimport { sprinkle, cursorProperties } from \"./radio.sprinkle.css\";\n\nexport const radio = {\n style: styles,\n sprinkle,\n properties: { cursor: cursorProperties },\n};\n","import { globalStyle, style, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\n/* -------------------------------------------------------------------------------------------------\n * style as \"base\"\n * -----------------------------------------------------------------------------------------------*/\n\nexport const wrapper = style({\n position: \"relative\",\n});\n\nexport const icon = style({\n position: \"absolute\",\n top: \"50%\",\n right: varsThemeBase.spacing[2],\n transform: \"translateY(-50%)\",\n});\n\nconst base = style({\n fontFamily: varsThemeBase.fontFamily.centranube,\n fontSize: varsThemeBase.fontSize.body.base,\n lineHeight: varsThemeBase.lineWeight.body.base,\n textAlign: \"left\",\n\n color: varsThemeBase.colors.neutral.textHigh,\n\n boxSizing: \"border-box\",\n borderRadius: varsThemeBase.sizes[2],\n margin: 0,\n paddingBottom: varsThemeBase.sizes[2],\n paddingLeft: varsThemeBase.sizes[2],\n paddingRight: varsThemeBase.sizes[8],\n paddingTop: varsThemeBase.sizes[2],\n width: \"100%\",\n\n appearance: \"none\",\n outline: \"none\",\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n\n \"::placeholder\": {\n color: varsThemeBase.colors.neutral.textDisabled,\n },\n\n \":disabled\": {\n border: `1px solid ${varsThemeBase.colors.neutral.interactive}`,\n backgroundColor: varsThemeBase.colors.neutral.surfaceDisabled,\n color: varsThemeBase.colors.neutral.textDisabled,\n\n cursor: \"not-allowed\",\n },\n\n \":focus-visible\": {\n boxShadow: `0px 0px 0px 3px ${varsThemeBase.colors.primary.surfaceHighlight}`,\n },\n});\n\nexport const appearance = styleVariants({\n neutral: [\n base,\n {\n border: `1px solid ${varsThemeBase.colors.neutral.interactive}`,\n backgroundColor: varsThemeBase.colors.neutral.background,\n\n \":focus\": {\n borderColor: varsThemeBase.colors.primary.interactivePressed,\n },\n },\n ],\n success: [\n base,\n {\n border: `1px solid ${varsThemeBase.colors.success.interactive}`,\n backgroundColor: varsThemeBase.colors.success.surface,\n\n \":focus\": {\n borderColor: varsThemeBase.colors.success.interactivePressed,\n },\n },\n ],\n warning: [\n base,\n {\n border: `1px solid ${varsThemeBase.colors.warning.interactive}`,\n backgroundColor: varsThemeBase.colors.warning.surface,\n\n \":focus\": {\n borderColor: varsThemeBase.colors.warning.interactivePressed,\n },\n },\n ],\n danger: [\n base,\n {\n border: `1px solid ${varsThemeBase.colors.danger.interactive}`,\n backgroundColor: varsThemeBase.colors.danger.surface,\n\n \":focus\": {\n borderColor: varsThemeBase.colors.danger.interactivePressed,\n },\n },\n ],\n});\n\nglobalStyle(`${base} option`, {\n color: varsThemeBase.colors.neutral.textHigh,\n});\n\nglobalStyle(`${base} option[value=\"\"][disabled]`, {\n color: varsThemeBase.colors.neutral.textDisabled,\n});\n","import { wrapper, icon, appearance } from \"./select.style.css\";\n\nexport const select = {\n style: { wrapper, icon, appearance },\n};\n","import { style as vanillaStyle, keyframes } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { utils } from \"../../../utils\";\n\nconst skeletonAnimation = keyframes({\n \"0%\": {\n left: 0,\n opacity: 0,\n right: \"initial\",\n width: \"0%\",\n },\n \"40%\": {\n left: 0,\n opacity: 0.5,\n right: \"initial\",\n width: \"100%\",\n },\n \"50%\": {\n left: \"initial\",\n right: 0,\n width: \"100%\",\n },\n \"90%\": {\n left: \"initial\",\n opacity: 0,\n right: 0,\n width: \"0%\",\n },\n \"100%\": {\n left: 0,\n right: \"initial\",\n },\n});\n\nexport const style = vanillaStyle({\n backgroundColor: varsThemeBase.colors.neutral.surfaceHighlight,\n position: \"relative\",\n width: utils.vars.width,\n height: utils.vars.height,\n borderRadius: utils.vars.borderRadius,\n \":before\": {\n content: \"\",\n position: \"absolute\",\n height: \"100%\",\n left: \"0\",\n top: \"0\",\n width: \"0%\",\n backgroundColor: varsThemeBase.colors.neutral.surface,\n animationName: skeletonAnimation,\n animationDuration: \"3000ms\",\n animationIterationCount: \"infinite\",\n animationTimingFunction: \"ease\",\n },\n});\n","import { style } from \"./skeleton.style.css\";\n\nexport const skeleton = {\n style,\n};\n","import {\n style as vanillaStyle,\n globalStyle,\n keyframes,\n} from \"@vanilla-extract/css\";\nimport { utils } from \"../../../utils\";\n\nconst rotateAnimation = keyframes({\n \"100%\": {\n transform: \"rotate(360deg)\",\n },\n});\n\nconst dashAnimation = keyframes({\n \"0%\": {\n strokeDasharray: \"1, 150\",\n strokeDashoffset: \"0\",\n },\n \"50%\": {\n strokeDasharray: \"90, 150\",\n strokeDashoffset: \"-35\",\n },\n \"100%\": {\n strokeDasharray: \"90, 150\",\n strokeDashoffset: \"-124\",\n },\n});\n\nexport const style = vanillaStyle({\n animation: `${rotateAnimation} 2s linear infinite`,\n width: utils.vars.width,\n height: utils.vars.height,\n});\n\nglobalStyle(`${style} circle`, {\n stroke: \"currentcolor\",\n animation: `${dashAnimation} 1.5s ease-in-out infinite`,\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\n\nexport const properties = {\n \"primary.interactive\": colors[\"primary.interactive\"],\n \"primary.textLow\": colors[\"primary.textLow\"],\n\n \"success.interactive\": colors[\"success.interactive\"],\n \"success.textLow\": colors[\"success.textLow\"],\n\n \"danger.interactive\": colors[\"danger.interactive\"],\n \"danger.textLow\": colors[\"danger.textLow\"],\n\n \"neutral.background\": colors[\"neutral.background\"],\n \"neutral.interactive\": colors[\"neutral.interactive\"],\n \"neutral.textLow\": colors[\"neutral.textLow\"],\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n color: properties,\n },\n })\n);\n","import { style } from \"./spinner.style.css\";\nimport { sprinkle, properties } from \"./spinner.sprinkle.css\";\n\nexport const spinner = {\n style,\n sprinkle,\n properties,\n};\n","import { createRainbowSprinkles, defineProperties } from \"rainbow-sprinkles\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { mediaQueries } from \"../../../themes/mediaQueries\";\n\ntype Display = \"block\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\";\ntype FlexWrap = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\ntype FlexDirection = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\ntype JustifyContent =\n | \"flex-start\"\n | \"flex-end\"\n | \"center\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\ntype AlignItems = \"stretch\" | \"flex-start\" | \"flex-end\" | \"center\" | \"baseline\";\n\nexport const displayProperties: Display[] = [\n \"block\",\n \"flex\",\n \"inline-flex\",\n \"grid\",\n \"inline-grid\",\n];\n\nexport const flexDirectionProperties: FlexDirection[] = [\n \"row\",\n \"row-reverse\",\n \"column\",\n \"column-reverse\",\n];\n\nexport const flexWrapProperties: FlexWrap[] = [\n \"nowrap\",\n \"wrap\",\n \"wrap-reverse\",\n];\n\nexport const justifyContentProperties: JustifyContent[] = [\n \"flex-start\",\n \"flex-end\",\n \"center\",\n \"space-between\",\n \"space-around\",\n \"space-evenly\",\n];\n\nexport const alignItemsProperties: AlignItems[] = [\n \"stretch\",\n \"flex-start\",\n \"flex-end\",\n \"center\",\n \"baseline\",\n];\n\nexport const spaceProperties = {\n none: \"0\",\n \"0,5\": varsThemeBase.spacing[\"0,5\"],\n \"1\": varsThemeBase.spacing[1],\n \"1,5\": varsThemeBase.sizes[\"1,5\"],\n \"2\": varsThemeBase.spacing[2],\n \"2,5\": varsThemeBase.sizes[\"2,5\"],\n \"4\": varsThemeBase.spacing[4],\n \"6\": varsThemeBase.spacing[6],\n \"8\": varsThemeBase.spacing[8],\n \"10\": varsThemeBase.spacing[10],\n \"12\": varsThemeBase.spacing[12],\n \"14\": varsThemeBase.spacing[14],\n \"16\": varsThemeBase.spacing[16],\n \"18\": varsThemeBase.spacing[18],\n \"20\": varsThemeBase.spacing[20],\n};\n\nconst properties = defineProperties({\n conditions: {\n xs: {\n \"@media\": mediaQueries.xs(),\n },\n md: {\n \"@media\": mediaQueries.md(),\n },\n lg: {\n \"@media\": mediaQueries.lg(),\n },\n },\n defaultCondition: \"xs\",\n dynamicProperties: {\n width: true,\n height: true,\n flex: true,\n gridTemplateAreas: true,\n gridTemplateColumns: true,\n gridTemplateRows: true,\n gap: spaceProperties,\n gridGap: spaceProperties,\n },\n staticProperties: {\n display: displayProperties,\n flexDirection: flexDirectionProperties,\n flexWrap: flexWrapProperties,\n justifyContent: justifyContentProperties,\n alignItems: alignItemsProperties,\n },\n shorthands: {},\n});\n\nexport const sprinkle = createRainbowSprinkles(properties);\n","import {\n spaceProperties,\n displayProperties,\n justifyContentProperties,\n flexDirectionProperties,\n alignItemsProperties,\n flexWrapProperties,\n} from \"./stack.sprinkle.css\";\n\ntype SpaceProperties = keyof typeof spaceProperties;\ntype DisplayProperties = typeof displayProperties[number];\ntype JustifyContentProperties = typeof justifyContentProperties[number];\ntype FlexDirectionProperties = typeof flexDirectionProperties[number];\ntype AlignItemsProperties = typeof alignItemsProperties[number];\ntype FlexWrapProperties = typeof flexWrapProperties[number];\n\ninterface Conditions<T> {\n xs?: T;\n md?: T;\n lg?: T;\n}\n\nexport interface StackSprinkle {\n width?: string | Conditions<string>;\n height?: string | Conditions<string>;\n flex?: string | Conditions<string>;\n gridTemplateColumns?: string | Conditions<string>;\n gridTemplateAreas?: string | Conditions<string>;\n gridTemplateRows?: string | Conditions<string>;\n display?: DisplayProperties | Conditions<DisplayProperties>;\n flexWrap?: FlexWrapProperties | Conditions<FlexWrapProperties>;\n justifyContent?:\n | JustifyContentProperties\n | Conditions<JustifyContentProperties>;\n flexDirection?: FlexDirectionProperties | Conditions<FlexDirectionProperties>;\n alignItems?: AlignItemsProperties | Conditions<AlignItemsProperties>;\n gap?: SpaceProperties | Conditions<SpaceProperties>;\n gridGap?: SpaceProperties | Conditions<SpaceProperties>;\n}\n","import {\n sprinkle,\n displayProperties,\n flexDirectionProperties,\n flexWrapProperties,\n justifyContentProperties,\n alignItemsProperties,\n spaceProperties,\n} from \"./stack.sprinkle.css\";\n\nexport const stack = {\n sprinkle,\n properties: {\n display: displayProperties,\n flexDirection: flexDirectionProperties,\n flexWrap: flexWrapProperties,\n justifyContent: justifyContentProperties,\n alignItems: alignItemsProperties,\n gap: spaceProperties,\n gridGap: spaceProperties,\n },\n};\n\nexport type { StackSprinkle } from \"./stack.sprinkle.types\";\n","import { style as vanillaStyle, globalStyle } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = vanillaStyle({\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n gap: varsThemeBase.spacing[1],\n position: \"relative\",\n cursor: \"pointer\",\n});\n\nexport const input = vanillaStyle({\n position: \"absolute\",\n overflow: \"hidden\",\n opacity: 0,\n height: 0,\n width: 0,\n});\n\nexport const slider = vanillaStyle({\n width: \"2rem\",\n height: \"1rem\",\n display: \"flex\",\n\n alignItems: \"center\",\n justifyContent: \"center\",\n position: \"relative\",\n\n borderRadius: varsThemeBase.sizes[2],\n backgroundColor: varsThemeBase.colors.neutral.interactive,\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n \":before\": {\n content: \"\",\n position: \"absolute\",\n width: \"0.875rem\",\n height: \"0.875rem\",\n\n backgroundColor: varsThemeBase.colors.neutral.background,\n borderRadius: \"50%\",\n left: \"0.063rem\",\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n },\n});\n\nglobalStyle(`${container} input:checked ~ ${slider}`, {\n backgroundColor: varsThemeBase.colors.primary.interactive,\n});\n\nglobalStyle(`${container} input:checked ~ ${slider}:before`, {\n left: \"1.063rem\",\n});\n","import * as styles from \"./toggle.style.css\";\n\nexport const toggle = {\n style: styles,\n};\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nconst base = vanillaStyle({\n alignItems: \"center\",\n appearance: \"none\",\n display: \"inline-flex\",\n gap: varsThemeBase.spacing[1],\n textAlign: \"inherit\",\n\n fontWeight: varsThemeBase.fontWeight.regular,\n borderRadius: varsThemeBase.spacing[1],\n fontFamily: varsThemeBase.fontFamily.centranube,\n cursor: \"pointer\",\n boxSizing: \"border-box\",\n\n transition: `all ${varsThemeBase.motion.speed.fast} ease`,\n});\n\nexport const size = styleVariants({\n caption: {\n fontSize: varsThemeBase.fontSize.body.caption,\n lineHeight: varsThemeBase.lineWeight.body.caption,\n },\n base: {\n fontSize: varsThemeBase.fontSize.body.base,\n lineHeight: varsThemeBase.lineWeight.body.base,\n },\n highlight: {\n fontSize: varsThemeBase.fontSize.body.highlight,\n lineHeight: varsThemeBase.lineWeight.body.highlight,\n },\n});\n\nexport const textDecoration = styleVariants({\n underline: {\n textDecoration: \"underline\",\n },\n none: {},\n});\n\nexport const appearance = styleVariants({\n primary: [\n base,\n {\n color: varsThemeBase.colors.primary.interactive,\n \":hover\": {\n color: varsThemeBase.colors.primary.interactiveHover,\n },\n \":active\": {\n color: varsThemeBase.colors.primary.interactivePressed,\n },\n \":focus\": {\n outline: `${varsThemeBase.colors.primary.interactivePressed} auto 1px`,\n },\n },\n ],\n danger: [\n base,\n {\n color: varsThemeBase.colors.danger.interactive,\n \":hover\": {\n color: varsThemeBase.colors.danger.interactiveHover,\n },\n \":active\": {\n color: varsThemeBase.colors.danger.interactivePressed,\n },\n \":focus\": {\n outline: `${varsThemeBase.colors.danger.interactivePressed} auto 1px`,\n },\n },\n ],\n neutral: [\n base,\n {\n color: varsThemeBase.colors.neutral.textLow,\n \":hover\": {\n color: varsThemeBase.colors.neutral.textDisabled,\n },\n \":active\": {\n color: varsThemeBase.colors.neutral.textHigh,\n },\n \":focus\": {\n outline: `${varsThemeBase.colors.neutral.textHigh} auto 1px`,\n },\n },\n ],\n});\n","import * as style from \"./link.style.css\";\n\nexport const link = {\n style,\n};\n","import { style, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = style({\n width: \"fit-content\",\n});\n\nexport const content = style({\n width: \"fit-content\",\n backgroundColor: varsThemeBase.colors.neutral.textLow,\n padding: varsThemeBase.spacing[1],\n borderRadius: varsThemeBase.spacing[1],\n transition: `opacity ${varsThemeBase.motion.speed.fast} ease`,\n});\n\nexport const base = style({\n \"::after\": {\n content: \" \",\n position: \"absolute\",\n borderWidth: varsThemeBase.spacing[1],\n borderStyle: \"solid\",\n },\n});\n\nexport const arrow = styleVariants({\n top: [\n base,\n {\n \"::after\": {\n top: \"100%\",\n borderColor: `${varsThemeBase.colors.neutral.textLow} transparent transparent transparent`,\n marginLeft: \"-0.25rem\",\n left: \"50%\",\n },\n },\n ],\n bottom: [\n base,\n {\n \"::after\": {\n bottom: \"100%\",\n borderColor: `transparent transparent ${varsThemeBase.colors.neutral.textLow} transparent`,\n marginLeft: \"-0.25rem\",\n left: \"50%\",\n },\n },\n ],\n left: [\n base,\n {\n \"::after\": {\n bottom: \"100%\",\n borderColor: `transparent transparent transparent ${varsThemeBase.colors.neutral.textLow}`,\n marginTop: \"-0.25rem\",\n top: \"50%\",\n left: \"100%\",\n },\n },\n ],\n right: [\n base,\n {\n \"::after\": {\n bottom: \"100%\",\n borderColor: `transparent ${varsThemeBase.colors.neutral.textLow} transparent transparent`,\n marginTop: \"-0.25rem\",\n top: \"50%\",\n right: \"100%\",\n },\n },\n ],\n});\n","import * as style from \"./tooltip.style.css\";\n\nexport const tooltip = {\n style,\n};\n","import { style, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { select as field } from \"../select\";\n\nconst base = style({\n paddingRight: varsThemeBase.spacing[2],\n});\n\nexport const appearance = styleVariants({\n neutral: [base, field.style.appearance.neutral],\n success: [base, field.style.appearance.success],\n warning: [base, field.style.appearance.warning],\n danger: [base, field.style.appearance.danger],\n});\n","import { appearance } from \"./textarea.style.css\";\n\nexport const textarea = {\n style: { appearance },\n};\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nconst base = vanillaStyle({\n display: \"flex\",\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n position: \"relative\",\n\n width: \"100%\",\n\n borderStyle: \"solid\",\n borderWidth: 1,\n\n paddingBottom: varsThemeBase.spacing[4],\n paddingLeft: varsThemeBase.spacing[4],\n paddingRight: varsThemeBase.spacing[12],\n paddingTop: varsThemeBase.spacing[4],\n boxSizing: \"border-box\",\n borderRadius: varsThemeBase.spacing[2],\n gap: varsThemeBase.spacing[4],\n});\n\nexport const appearance = styleVariants({\n primary: [\n base,\n {\n backgroundColor: varsThemeBase.colors.primary.surface,\n borderColor: varsThemeBase.colors.primary.surfaceHighlight,\n color: varsThemeBase.colors.primary.textLow,\n },\n ],\n success: [\n base,\n {\n backgroundColor: varsThemeBase.colors.success.surface,\n borderColor: varsThemeBase.colors.success.surfaceHighlight,\n color: varsThemeBase.colors.success.textLow,\n },\n ],\n warning: [\n base,\n {\n backgroundColor: varsThemeBase.colors.warning.surface,\n borderColor: varsThemeBase.colors.warning.surfaceHighlight,\n color: varsThemeBase.colors.warning.textLow,\n },\n ],\n danger: [\n base,\n {\n backgroundColor: varsThemeBase.colors.danger.surface,\n borderColor: varsThemeBase.colors.danger.surfaceHighlight,\n color: varsThemeBase.colors.danger.textLow,\n },\n ],\n neutral: [\n base,\n {\n backgroundColor: varsThemeBase.colors.neutral.surface,\n borderColor: varsThemeBase.colors.neutral.surfaceHighlight,\n color: varsThemeBase.colors.neutral.textLow,\n },\n ],\n});\n\nexport const body = vanillaStyle({\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n gap: varsThemeBase.spacing[2],\n});\n\nexport const content = vanillaStyle({\n display: \"flex\",\n flexDirection: \"column\",\n gap: varsThemeBase.spacing[4],\n\n lineHeight: varsThemeBase.lineWeight.body.base,\n fontSize: varsThemeBase.fontSize.body.base,\n fontFamily: varsThemeBase.fontFamily.centranube,\n});\n\nexport const close = vanillaStyle({\n appearance: \"none\",\n borderStyle: \"solid\",\n borderColor: \"transparent\",\n borderWidth: 1,\n background: \"transparent\",\n cursor: \"pointer\",\n margin: 0,\n\n position: \"absolute\",\n top: 0,\n right: 0,\n\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n padding: varsThemeBase.spacing[4],\n borderRadius: varsThemeBase.spacing[2],\n\n transition: `all ${varsThemeBase.motion.speed.base}`,\n\n \":focus-visible\": {\n boxShadow: `0px 0px 0px 3px ${varsThemeBase.colors.primary.surfaceHighlight}`,\n },\n});\n\nexport const closeAppearance = styleVariants({\n primary: [\n close,\n {\n \":hover\": {\n backgroundColor: varsThemeBase.colors.primary.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.primary.interactivePressed,\n },\n },\n ],\n success: [\n close,\n {\n \":hover\": {\n backgroundColor: varsThemeBase.colors.success.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.success.interactivePressed,\n },\n },\n ],\n warning: [\n close,\n {\n \":hover\": {\n backgroundColor: varsThemeBase.colors.warning.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.warning.interactivePressed,\n },\n },\n ],\n danger: [\n close,\n {\n \":hover\": {\n backgroundColor: varsThemeBase.colors.danger.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.danger.interactivePressed,\n },\n },\n ],\n neutral: [\n close,\n {\n \":hover\": {\n backgroundColor: varsThemeBase.colors.neutral.surfaceHighlight,\n },\n \":focus\": {\n borderColor: varsThemeBase.colors.neutral.interactivePressed,\n },\n },\n ],\n});\n","import * as style from \"./alert.style.css\";\n\nexport const alert = {\n style,\n};\n","import { style } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = style({\n display: \"flex\",\n flexDirection: \"column\",\n width: \"100%\",\n minHeight: \"1.5rem\",\n justifyContent: \"center\",\n\n borderRadius: varsThemeBase.spacing[2],\n boxShadow: varsThemeBase.shadow.card,\n boxSizing: \"border-box\",\n});\n\nexport const header = style({\n marginBottom: \"1.125rem\",\n});\n\nexport const body = style({\n marginBottom: \"1rem\",\n});\n\nexport const footer = style({\n display: \"flex\",\n gap: varsThemeBase.spacing[2],\n});\n","import { defineProperties, createSprinkles } from \"@vanilla-extract/sprinkles\";\nimport { properties as colors } from \"../../../sprinkles/colors.css\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const backgroundColorProperties = {\n \"primary.surface\": colors[\"primary.surface\"],\n \"primary.surfaceHighlight\": colors[\"primary.surfaceHighlight\"],\n \"success.surface\": colors[\"success.surface\"],\n \"success.surfaceHighlight\": colors[\"success.surfaceHighlight\"],\n \"danger.surface\": colors[\"danger.surface\"],\n \"danger.surfaceHighlight\": colors[\"danger.surfaceHighlight\"],\n \"warning.surface\": colors[\"warning.surface\"],\n \"warning.surfaceHighlight\": colors[\"warning.surfaceHighlight\"],\n \"neutral.background\": colors[\"neutral.background\"],\n \"neutral.surface\": colors[\"neutral.surface\"],\n \"neutral.surfaceHighlight\": colors[\"neutral.surfaceHighlight\"],\n};\n\nexport const paddingProperties = {\n base: varsThemeBase.spacing[4],\n none: 0,\n};\n\nexport const sprinkle = createSprinkles(\n defineProperties({\n properties: {\n backgroundColor: backgroundColorProperties,\n padding: paddingProperties,\n },\n })\n);\n","import * as style from \"./card.style.css\";\nimport {\n sprinkle,\n paddingProperties,\n backgroundColorProperties,\n} from \"./card.sprinkle.css\";\n\nexport const card = {\n style,\n sprinkle,\n properties: {\n padding: paddingProperties,\n backgroundColor: backgroundColorProperties,\n },\n};\n","import { style, styleVariants, keyframes } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nconst overlayAnimation = keyframes({\n \"0%\": {\n opacity: 0,\n },\n \"100%\": {\n opacity: 1,\n },\n});\n\nexport const overlay = style({\n position: \"fixed\",\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n zIndex: 100,\n border: \"none\",\n animation: `${overlayAnimation} 0.5s ease`,\n});\n\nexport const container = style({\n position: \"fixed\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"stretch\",\n backgroundColor: \"#FFFFFF\",\n height: \"100%\",\n minHeight: \"100%\",\n width: \"100%\",\n zIndex: 200,\n top: 0,\n opacity: 0,\n transition: `opacity ${varsThemeBase.motion.speed.base} ease, transform ${varsThemeBase.motion.speed.base} ease`,\n boxSizing: \"border-box\",\n});\n\nexport const positions = styleVariants({\n left: {\n left: 0,\n transform: \"translateX(-100%)\",\n },\n right: {\n right: 0,\n transform: \"translateX(100%)\",\n },\n});\n\nexport const isVisible = style({\n opacity: 1,\n transform: \"translateX(0)\",\n});\n\nexport const header = style({\n marginBottom: \"1rem\",\n boxSizing: \"border-box\",\n});\n\nexport const body = style({\n height: \"100%\",\n boxSizing: \"border-box\",\n});\n\nexport const footer = style({\n width: \"100%\",\n display: \"flex\",\n gap: varsThemeBase.spacing[2],\n marginTop: \"1rem\",\n boxSizing: \"border-box\",\n justifyContent: \"flex-end\",\n});\n","import { createRainbowSprinkles, defineProperties } from \"rainbow-sprinkles\";\nimport { varsThemeBase } from \"../../../themes/base.css\";\nimport { mediaQueries } from \"../../../themes/mediaQueries\";\n\nexport const paddingProperties = {\n base: varsThemeBase.spacing[4],\n none: 0,\n};\n\nexport const sprinkle = createRainbowSprinkles(\n defineProperties({\n conditions: {\n xs: {\n \"@media\": mediaQueries.xs(),\n },\n md: {\n \"@media\": mediaQueries.md(),\n },\n lg: {\n \"@media\": mediaQueries.lg(),\n },\n },\n defaultCondition: \"xs\",\n dynamicProperties: {\n maxWidth: true,\n zIndex: true,\n },\n staticProperties: {\n padding: paddingProperties,\n },\n })\n);\n","import { paddingProperties } from \"./sidebar.sprinkle.css\";\n\ntype PaddingProperties = keyof typeof paddingProperties;\n\ninterface Conditions<T> {\n xs?: T;\n md?: T;\n lg?: T;\n}\n\nexport interface SidebarSprinkle {\n maxWidth?: string | Conditions<string>;\n zIndex?: number | Conditions<number>;\n padding?: PaddingProperties | Conditions<PaddingProperties>;\n}\n","import * as style from \"./sidebar.style.css\";\nimport { paddingProperties, sprinkle } from \"./sidebar.sprinkle.css\";\n\nexport const sidebar = {\n style,\n sprinkle,\n properties: {\n padding: paddingProperties,\n },\n};\n\nexport type { SidebarSprinkle } from \"./sidebar.sprinkle.types\";\n","import { style as vanillaStyle, styleVariants } from \"@vanilla-extract/css\";\n\nimport { varsThemeBase } from \"../../../themes/base.css\";\n\nexport const container = vanillaStyle({\n borderColor: varsThemeBase.colors.neutral.interactive,\n borderStyle: \"none none solid\",\n borderWidth: 2,\n\n margin: 0,\n padding: 0,\n listStyle: \"none\",\n display: \"flex\",\n});\n\nexport const tabElement = styleVariants({\n default: [],\n fullWidth: [\n {\n flex: \"1 1 auto\",\n },\n ],\n});\n\nconst buttonBase = vanillaStyle({\n appearance: \"none\",\n background: \"transparent\",\n cursor: \"pointer\",\n position: \"relative\",\n border: 0,\n\n display: \"block\",\n margin: \"0 auto\",\n borderRadius: varsThemeBase.sizes[1],\n paddingBottom: varsThemeBase.spacing[2],\n paddingLeft: varsThemeBase.spacing[6],\n paddingRight: varsThemeBase.spacing[6],\n paddingTop: varsThemeBase.spacing[2],\n width: \"100%\",\n\n fontFamily: varsThemeBase.fontFamily.centranube,\n fontSize: varsThemeBase.fontSize.body.base,\n fontWeight: varsThemeBase.fontWeight.regular,\n textAlign: \"center\",\n color: varsThemeBase.colors.neutral.textHigh,\n\n transition: varsThemeBase.motion.speed.base,\n\n \":hover\": {\n backgroundColor: varsThemeBase.colors.primary.surface,\n },\n\n \":focus\": {\n boxShadow: `0px 0px 0px 3px ${varsThemeBase.colors.primary.surfaceHighlight}`,\n },\n});\n\nexport const tabButton = styleVariants({\n default: [buttonBase],\n active: [\n buttonBase,\n {\n color: varsThemeBase.colors.primary.interactive,\n fontWeight: varsThemeBase.fontWeight.bold,\n\n \":before\": {\n content: \"\",\n display: \"block\",\n position: \"absolute\",\n bottom: -2,\n left: 0,\n width: \"100%\",\n height: 2,\n backgroundColor: varsThemeBase.colors.primary.interactive,\n },\n },\n ],\n});\n\nexport const panel = vanillaStyle({\n paddingTop: varsThemeBase.spacing[4],\n\n \":focus\": {\n boxShadow: `0px 0px 0px 3px ${varsThemeBase.colors.primary.surfaceHighlight}`,\n },\n});\n","import * as style from \"./tabs.style.css\";\n\nexport const tabs = {\n style,\n};\n","export { utils } from \"./utils\";\n\nexport { badge } from \"./packages/atomic/badge\";\nexport { box } from \"./packages/atomic/box\";\nexport { button } from \"./packages/atomic/button\";\nexport { checkbox } from \"./packages/atomic/checkbox\";\nexport { chip } from \"./packages/atomic/chip\";\nexport { fileUploader } from \"./packages/atomic/fileUploader\";\nexport { icon } from \"./packages/atomic/icon\";\nexport { iconButton } from \"./packages/atomic/iconButton\";\nexport { input } from \"./packages/atomic/input\";\nexport { label } from \"./packages/atomic/label\";\nexport { tag } from \"./packages/atomic/tag\";\nexport { text } from \"./packages/atomic/text\";\nexport { title } from \"./packages/atomic/title\";\nexport { toast } from \"./packages/atomic/toast\";\nexport { list } from \"./packages/atomic/list\";\nexport { popover } from \"./packages/atomic/popover\";\nexport { radio } from \"./packages/atomic/radio\";\nexport { select } from \"./packages/atomic/select\";\nexport { skeleton } from \"./packages/atomic/skeleton\";\nexport { spinner } from \"./packages/atomic/spinner\";\nexport { stack } from \"./packages/atomic/stack\";\nexport { toggle } from \"./packages/atomic/toggle\";\nexport { link } from \"./packages/atomic/link\";\nexport { tooltip } from \"./packages/atomic/tooltip\";\nexport { thumbnail } from \"./packages/atomic/thumbnail\";\nexport { textarea } from \"./packages/atomic/textarea\";\n\nexport { alert } from \"./packages/composite/alert\";\nexport { card } from \"./packages/composite/card\";\nexport { sidebar } from \"./packages/composite/sidebar\";\nexport { tabs } from \"./packages/composite/tabs\";\n\nexport type { BoxSprinkle } from \"./packages/atomic/box\";\nexport type { IconButtonSprinkle } from \"./packages/atomic/iconButton\";\nexport type { StackSprinkle } from \"./packages/atomic/stack\";\n\nexport type { SidebarSprinkle } from \"./packages/composite/sidebar\";\n","import { HTMLAttributes } from \"react\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n /** width alignment in content */\n width: string;\n /** height alignment in content */\n height: string;\n /** borderRadius alignment in content */\n borderRadius?: string;\n}\n","import React from \"react\";\nimport { assignInlineVars } from \"@vanilla-extract/dynamic\";\nimport { skeleton, utils } from \"@nimbus-ds/styles\";\n\nimport { SkeletonProps } from \"./skeleton.types\";\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n className: _className,\n style: _style,\n height,\n width,\n borderRadius = \"0\",\n ...rest\n}) => (\n <div\n className={skeleton.style}\n style={assignInlineVars({\n [utils.vars.width]: width,\n [utils.vars.height]: height,\n [utils.vars.borderRadius]: borderRadius,\n })}\n {...rest}\n />\n);\n\nSkeleton.displayName = \"Skeleton\";\nexport { Skeleton };\n","import { Skeleton } from \"./Skeleton\";\nimport \"@nimbus-ds/styles/packages/atomic/skeleton/index.css\";\n\nexport { Skeleton } from \"./Skeleton\";\nexport type { SkeletonProps } from \"./skeleton.types\";\nexport default Skeleton;\n","import { SkeletonProps as SkeletonBaseProps } from \"@nimbus-ds/skeleton\";\nimport { TextProps } from \"../../text.types\";\n\nexport type SkeletonProps = Pick<TextProps, \"fontSize\"> &\n Partial<Pick<SkeletonBaseProps, \"width\">> &\n Partial<Pick<SkeletonBaseProps, \"height\">> & {\n \"data-testid\"?: string;\n };\n","export const sizes = {\n caption: {\n width: \"2rem\",\n height: \"1rem\",\n },\n base: {\n width: \"2rem\",\n height: \"1.25rem\",\n },\n highlight: {\n width: \"2rem\",\n height: \"1.125rem\",\n },\n};\n","import React from \"react\";\n\nimport { Skeleton as SkeletonBase } from \"@nimbus-ds/skeleton\";\nimport { SkeletonProps } from \"./skeleton.types\";\nimport { sizes } from \"./skeleton.definitions\";\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n fontSize = \"caption\",\n width,\n height,\n \"data-testid\": dataTestId,\n}) => (\n <SkeletonBase\n width={width ?? sizes[fontSize].width}\n height={height ?? sizes[fontSize].height}\n data-testid={dataTestId}\n borderRadius=\"0.25rem\"\n />\n);\n\nSkeleton.displayName = \"Text.Skeleton\";\nexport { Skeleton };\n","import { Skeleton } from \"./Skeleton\";\n\nexport { Skeleton } from \"./Skeleton\";\nexport default Skeleton;\n","export * from \"./Skeleton\";\n","import { ReactNode, HTMLAttributes } from \"react\";\nimport { text } from \"@nimbus-ds/styles\";\n\nimport { Skeleton } from \"./components\";\n\nexport interface TextComponents {\n Skeleton: typeof Skeleton;\n}\n\nexport interface TextProps extends HTMLAttributes<HTMLParagraphElement> {\n /** Element to be rendered inside the Text component */\n children: ReactNode;\n /** Type of html tag to create for the Text component */\n as?: \"p\" | \"span\";\n /** Text size */\n fontSize?: keyof typeof text.properties.fontSize;\n /** Bold font for the text component */\n fontWeight?: keyof typeof text.properties.fontWeight;\n /** Text line height */\n lineHeight?: keyof typeof text.properties.lineHeight;\n /** Text alignment in content */\n textAlign?: keyof typeof text.properties.textAlign;\n /** Text color */\n color?: keyof typeof text.properties.colors;\n}\n","import React from \"react\";\nimport { text } from \"@nimbus-ds/styles\";\n\nimport { TextProps, TextComponents } from \"./text.types\";\nimport { Skeleton } from \"./components\";\n\nconst Text: React.FC<TextProps> & TextComponents = ({\n className: _className,\n style: _style,\n as: As = \"p\",\n color = \"primary.textLow\",\n textAlign = \"left\",\n lineHeight = \"caption\",\n fontWeight = \"regular\",\n fontSize = \"caption\",\n children,\n ...rest\n}: TextProps) => (\n <As\n {...rest}\n className={[\n text.sprinkle({ color, textAlign, lineHeight, fontWeight, fontSize }),\n text.style,\n ].join(\" \")}\n >\n {children}\n </As>\n);\n\nText.Skeleton = Skeleton;\nText.displayName = \"Text\";\nexport { Text };\n","import { Text } from \"./Text\";\nimport \"@nimbus-ds/styles/packages/atomic/text/index.css\";\n\nexport { Text } from \"./Text\";\nexport type { TextProps } from \"./text.types\";\nexport default Text;\n","import { SkeletonProps as SkeletonBaseProps } from \"@nimbus-ds/skeleton\";\n\nexport type SkeletonProps = Partial<Pick<SkeletonBaseProps, \"width\">> &\n Partial<Pick<SkeletonBaseProps, \"height\">> & {\n \"data-testid\"?: string;\n };\n","import React from \"react\";\n\nimport { Skeleton as SkeletonBase } from \"@nimbus-ds/skeleton\";\nimport { SkeletonProps } from \"./skeleton.types\";\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n width,\n height,\n \"data-testid\": dataTestId,\n}) => (\n <SkeletonBase\n width={width ?? \"1.5rem\"}\n height={height ?? \"1.25rem\"}\n borderRadius=\"0.813rem\"\n data-testid={dataTestId}\n />\n);\n\nSkeleton.displayName = \"Badge.Skeleton\";\nexport { Skeleton };\n","import { Skeleton } from \"./Skeleton\";\n\nexport { Skeleton } from \"./Skeleton\";\nexport default Skeleton;\n","export * from \"./Skeleton\";\n","import { HTMLAttributes } from \"react\";\nimport { Skeleton } from \"./components\";\n\nexport interface BadgeComponents {\n Skeleton: typeof Skeleton;\n}\n\nexport interface BadgeProps extends HTMLAttributes<HTMLElement> {\n /** Badge color */\n appearance?: \"primary\" | \"success\" | \"warning\" | \"danger\" | \"neutral\";\n /** Total items to be displayed without badge */\n count: number | string;\n /** Badge appearance color scheme */\n theme?: \"surface\" | \"light\";\n}\n","import React from \"react\";\nimport { badge } from \"@nimbus-ds/styles\";\nimport { Text } from \"@nimbus-ds/text\";\n\nimport { BadgeProps, BadgeComponents } from \"./badge.types\";\nimport { Skeleton } from \"./components\";\n\nconst Badge: React.FC<BadgeProps> & BadgeComponents = ({\n className: _className,\n style: _style,\n appearance = \"neutral\",\n theme = \"surface\",\n count,\n ...rest\n}: BadgeProps) => (\n <div {...rest} className={badge.style[theme][appearance]}>\n <Text color=\"currentColor\">{count}</Text>\n </div>\n);\n\nBadge.Skeleton = Skeleton;\nBadge.displayName = \"Badge\";\n\nexport { Badge };\n","import { Badge } from \"./Badge\";\nimport \"@nimbus-ds/styles/packages/atomic/badge/index.css\";\n\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps } from \"./badge.types\";\nexport default Badge;\n","import { HTMLAttributes, ReactNode } from \"react\";\nimport { BoxSprinkle } from \"@nimbus-ds/styles\";\n\ntype Extends = BoxSprinkle & HTMLAttributes<HTMLDivElement>;\n\nexport interface BoxProps extends Extends {\n /** Element to be rendered inside the Box component */\n children?: ReactNode;\n}\n","import React from \"react\";\nimport { box } from \"@nimbus-ds/styles\";\n\nimport { BoxProps } from \"./box.types\";\n\nconst Box: React.FC<BoxProps> = ({\n className: _className,\n style: _style,\n children,\n ...rest\n}) => {\n const { className, style, otherProps } = box.sprinkle(\n rest as Parameters<typeof box.sprinkle>[0]\n );\n return (\n <div className={className} style={style} {...otherProps}>\n {children}\n </div>\n );\n};\n\nBox.displayName = \"Box\";\nexport { Box };\n","import { Box } from \"./Box\";\nimport \"@nimbus-ds/styles/packages/atomic/box/index.css\";\n\nexport { Box } from \"./Box\";\nexport type { BoxProps } from \"./box.types\";\nexport default Box;\n","import { SkeletonProps as SkeletonBaseProps } from \"@nimbus-ds/skeleton\";\n\nexport type SkeletonProps = Partial<Pick<SkeletonBaseProps, \"width\">> & {\n \"data-testid\"?: string;\n};\n","import React from \"react\";\n\nimport { Skeleton as SkeletonBase } from \"@nimbus-ds/skeleton\";\nimport { SkeletonProps } from \"./skeleton.types\";\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n width,\n \"data-testid\": dataTestId,\n}) => (\n <SkeletonBase\n width={width ?? \"4.75rem\"}\n height=\"2.125rem\"\n borderRadius=\"0.5rem\"\n data-testid={dataTestId}\n />\n);\n\nSkeleton.displayName = \"Button.Skeleton\";\nexport { Skeleton };\n","import { Skeleton } from \"./Skeleton\";\n\nexport { Skeleton } from \"./Skeleton\";\nexport default Skeleton;\n","export * from \"./Skeleton\";\n","import { ReactNode, ButtonHTMLAttributes } from \"react\";\nimport { Skeleton } from \"./components\";\n\nexport interface ButtonComponents {\n Skeleton: typeof Skeleton;\n}\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** Text to be displayed on chip */\n children: ReactNode;\n /** Button appearance */\n appearance?: \"primary\" | \"danger\" | \"neutral\";\n /** Set whether button state is disabled */\n disabled?: boolean;\n}\n","import React from \"react\";\nimport { button } from \"@nimbus-ds/styles\";\n\nimport { ButtonProps, ButtonComponents } from \"./button.types\";\nimport { Skeleton } from \"./components\";\n\nconst Button: React.FC<ButtonProps> & ButtonComponents = ({\n className: _className,\n style: _style,\n appearance = \"neutral\",\n children,\n ...rest\n}: ButtonProps) => (\n <button type=\"button\" {...rest} className={button.style[appearance]}>\n {children}\n </button>\n);\n\nButton.Skeleton = Skeleton;\nButton.displayName = \"Button\";\n\nexport { Button };\n","import { Button } from \"./Button\";\nimport \"@nimbus-ds/styles/packages/atomic/button/index.css\";\n\nexport { Button } from \"./Button\";\nexport type { ButtonProps } from \"./button.types\";\nexport default Button;\n","import { SkeletonProps as SkeletonBaseProps } from \"@nimbus-ds/skeleton\";\n\nexport type SkeletonProps = Partial<Pick<SkeletonBaseProps, \"width\">> &\n Partial<Pick<SkeletonBaseProps, \"height\">> & {\n \"data-testid\"?: string;\n };\n","import React from \"react\";\n\nimport { Skeleton as SkeletonBase } from \"@nimbus-ds/skeleton\";\nimport { SkeletonProps } from \"./skeleton.types\";\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n width,\n height,\n \"data-testid\": dataTestId,\n}) => (\n <SkeletonBase\n width={width ?? \"1rem\"}\n height={height ?? \"1rem\"}\n borderRadius=\"0.25rem\"\n data-testid={dataTestId}\n />\n);\n\nSkeleton.displayName = \"Icon.Skeleton\";\nexport { Skeleton };\n","import { Skeleton } from \"./Skeleton\";\n\nexport { Skeleton } from \"./Skeleton\";\nexport default Skeleton;\n","export * from \"./Skeleton\";\n","import { ReactNode, HTMLAttributes } from \"react\";\n\nimport { icon } from \"@nimbus-ds/styles\";\nimport { Skeleton } from \"./components\";\n\nexport interface IconComponents {\n Skeleton: typeof Skeleton;\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLDivElement> {\n /** Icon SVG */\n source: ReactNode;\n /** Icon color */\n color?: keyof typeof icon.properties.color;\n /** Icon cursor */\n cursor?: typeof icon.properties.cursor[number];\n}\n","import React from \"react\";\nimport { icon } from \"@nimbus-ds/styles\";\n\nimport { IconProps, IconComponents } from \"./icon.types\";\nimport { Skeleton } from \"./components\";\n\nconst Icon: React.FC<IconProps> & IconComponents = ({\n className: _className,\n style: _style,\n color = \"neutral.textLow\",\n cursor = \"auto\",\n source,\n ...rest\n}: IconProps) => (\n <div\n {...rest}\n className={[icon.sprinkle({ color, cursor }), icon.style].join(\" \")}\n >\n {source}\n </div>\n);\n\nIcon.Skeleton = Skeleton;\nIcon.displayName = \"Icon\";\n\nexport { Icon };\n","import { Icon } from \"./Icon\";\nimport \"@nimbus-ds/styles/packages/atomic/icon/index.css\";\n\nexport { Icon } from \"./Icon\";\nexport type { IconProps } from \"./icon.types\";\nexport default Icon;\n","import { SkeletonProps as SkeletonBaseProps } from \"@nimbus-ds/skeleton\";\n\nexport type SkeletonProps = Partial<Pick<SkeletonBaseProps, \"width\">> & {\n \"data-testid\"?: string;\n};\n","import React from \"react\";\nimport { Skeleton as SkeletonBase } from \"@nimbus-ds/skeleton\";\nimport { checkbox } from \"@nimbus-ds/styles\";\n\nimport { SkeletonProps } from \"./skeleton.types\";\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n width,\n \"data-testid\": dataTestId,\n}) => (\n <div className={checkbox.style.container}>\n <SkeletonBase width=\"1rem\" height=\"1rem\" borderRadius=\"0.25rem\" />\n <SkeletonBase\n width={width ?? \"2rem\"}\n height=\"1rem\"\n borderRadius=\"0.25rem\"\n data-testid={dataTestId}\n />\n </div>\n);\n\nSkeleton.displayName = \"Checkbox.Skeleton\";\nexport { Skeleton };\n","import { Skeleton } from \"./Skeleton\";\n\nexport { Skeleton } from \"./Skeleton\";\nexport default Skeleton;\n","export * from \"./Skeleton\";\n","import { InputHTMLAttributes } from \"react\";\nimport { Skeleton } from \"./components\";\n\nexport interface CheckboxComponents {\n Skeleton: typeof Skeleton;\n}\n\nexport interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {\n /** Checkbox name */\n name: string;\n /** Checkbox color */\n appearance?: \"primary\" | \"danger\";\n /** Set whether checkbox state is checked */\n checked?: boolean;\n /** Set whether checkbox state is disabled */\n disabled?: boolean;\n /** Set whether checkbox state is indeterminate */\n indeterminate?: boolean;\n /** Text to be rendered inside the component */\n label?: string;\n}\n","export const borderColors = {\n primary: \"neutral.interactive\",\n danger: \"danger.interactive\",\n indeterminate: \"primary.interactive\",\n} as {\n [key: string]:\n | \"neutral.interactive\"\n | \"danger.interactive\"\n | \"primary.interactive\";\n};\n\nexport const textColors = {\n primary: \"neutral.textLow\",\n danger: \"danger.textLow\",\n indeterminate: \"neutral.textLow\",\n disabled: \"neutral.textDisabled\",\n} as {\n [key: string]:\n | \"neutral.textLow\"\n | \"danger.textLow\"\n | \"neutral.textLow\"\n | \"neutral.textDisabled\";\n};\n","import React, { useMemo } from \"react\";\nimport { Icon } from \"@nimbus-ds/icon\";\nimport { Text } from \"@nimbus-ds/text\";\nimport { checkbox } from \"@nimbus-ds/styles\";\n\nimport CheckIcon from \"./checkbox-check.svg\";\nimport IndeterminateIcon from \"./checkbox-indeterminate.svg\";\nimport { CheckboxProps, CheckboxComponents } from \"./checkbox.types\";\nimport { Skeleton } from \"./components\";\nimport { borderColors, textColors } from \"./checkbox.definitions\";\n\nconst Checkbox: React.FC<CheckboxProps> & CheckboxComponents = ({\n className: _className,\n style: _style,\n appearance = \"primary\",\n indeterminate = false,\n label,\n id,\n name,\n disabled,\n ...rest\n}: CheckboxProps) => {\n const borderColor = useMemo(\n () => borderColors[(indeterminate && \"indeterminate\") || appearance],\n [indeterminate, appearance]\n );\n\n const textColor = useMemo(\n () =>\n textColors[\n (disabled && \"disabled\") ||\n (indeterminate && \"indeterminate\") ||\n appearance\n ],\n [indeterminate, appearance, disabled]\n );\n\n return (\n <label\n htmlFor={id || name}\n className={[\n checkbox.style.container,\n checkbox.sprinkle({\n cursor: disabled ? \"auto\" : \"pointer\",\n }),\n ].join(\" \")}\n >\n <input\n {...rest}\n id={id || name}\n name={name}\n type=\"checkbox\"\n className={checkbox.style.input}\n disabled={disabled}\n />\n <span\n data-testid=\"checkmark\"\n className={[\n checkbox.style.checkmark,\n checkbox.sprinkle({\n borderColor,\n }),\n ].join(\" \")}\n >\n <div className={checkbox.style.checkicon}>\n <Icon\n data-testid=\"icon-check\"\n color={disabled ? \"neutral.textLow\" : \"neutral.background\"}\n source={<CheckIcon />}\n />\n </div>\n {indeterminate && (\n <div className={checkbox.style.checkindeterminate}>\n <Icon\n data-testid=\"icon-indeterminate\"\n source={<IndeterminateIcon />}\n />\n </div>\n )}\n </span>\n {label && (\n <Text\n data-testid=\"text\"\n color={textColor}\n fontSize=\"base\"\n lineHeight=\"base\"\n >\n {label}\n </Text>\n )}\n </label>\n );\n};\n\nCheckbox.Skeleton = Skeleton;\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n","import { Checkbox } from \"./Checkbox\";\nimport \"@nimbus-ds/styles/packages/atomic/checkbox/index.css\";\n\nexport { Checkbox } from \"./Checkbox\";\nexport type { CheckboxProps } from \"./checkbox.types\";\nexport default Checkbox;\n","export * from \"./atomic/Badge/src\";\nexport * from \"./atomic/Box/src\";\nexport * from \"./atomic/Button/src\";\nexport * from \"./atomic/Checkbox/src\";\nexport * from \"./atomic/Text/src\";\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/package.json CHANGED Viewed

@@ -1,21 +1,22 @@
 {
   "name": "@nimbus-ds/components",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "license": "MIT",
   "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist",
     "README.md"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "webpack",
-    "build:types": "tsc --emitDeclarationOnly --declaration true --declarationDir ./dist --baseUrl ./",
+    "build": "yarn build:types && webpack",
+    "build:types": "parcel build index.ts",
     "clean": "rm -rf dist",
     "version": "yarn version"
   },
   "dependencies": {
-    "@nimbus-ds/styles": "5.0.0-rc.1"
+    "@nimbus-ds/styles": "5.0.0-rc.2"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -30,6 +31,7 @@
     "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
   },
   "devDependencies": {
+    "parcel": "^2.8.0",
     "typescript": "^4.9.3",
     "webpack": "^5.75.0"
   },