@apple-pie/slice 0.1.10 → 0.1.11

package/dist/types/components/DropDown/DropDown.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import type { DropDownOption, DropDownProps } from './_types';
-export type { DropDownOption };
-export declare const DropDown: React.MemoExoticComponent<(props: DropDownProps) => import("react/jsx-runtime").JSX.Element>;
+import type { DropDownProps } from './_types';
+export declare const DropDown: <T = string>(props: DropDownProps<T>) => React.JSX.Element;

package/dist/types/components/DropDown/_types.d.ts

@@ -1,34 +1,40 @@
 import type React from 'react';
-export type DropDownOption = {
+export type DropDownOption<T = string> = {
     label?: string;
-    value?: string;
+    value?: T;
     alt?: string;
 };
-type DropDownBaseProps = {
+type DropDownBaseProps<T = string> = {
     name?: string;
-    options?: DropDownOption[];
+    label?: string;
+    labelColor?: string;
+    options?: DropDownOption<T>[];
     selectedIndex?: number;
-    selectedValue?: string;
+    selectedValue?: T;
+    valueKey?: string;
     placeholder?: boolean;
     borderRadius?: number;
+    borderStyle?: 'bottom' | 'box' | 'none';
     validate?: boolean;
     iconColor?: string;
+    backgroundColor?: string;
     bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    borderSize?: number;
     width?: string;
     height?: string;
     paddingLeft?: number | string;
     paddingRight?: number | string;
-    paddingTops?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
     iconSize?: number;
     disabled?: boolean;
-    unframed?: boolean;
-    focused?: boolean;
+    error?: boolean;
     gap?: number;
-    size?: 'small' | 'medium' | 'large';
-    onChange?: (index: number, option: DropDownOption) => void;
-    onBlur?: (value: string) => void;
-    onValidate?: (state: boolean) => void;
-    onFocus?: () => void;
+    size?: 'xs' | 's' | 'm' | 'l';
+    onChange?: (index: number, option: DropDownOption<T>) => void;
 };
-export type DropDownProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof DropDownBaseProps> & DropDownBaseProps;
+export type DropDownProps<T = string> = Omit<React.HTMLAttributes<HTMLDivElement>, keyof DropDownBaseProps<T>> & DropDownBaseProps<T>;
 export {};

package/dist/types/components/ErrorSummary/ErrorSummary.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import type { ErrorMessage, ErrorSummaryProps } from './_types';
-export type { ErrorMessage };
+import type { ErrorSummaryProps } from './_types';
 export declare const ErrorSummary: React.MemoExoticComponent<(props: ErrorSummaryProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/components/ErrorSummary/_types.d.ts

@@ -1,12 +1,15 @@
 import type React from 'react';
 export type ErrorMessage = {
-    id?: string;
-    title?: string;
-    bullets?: string[];
+    title: string;
+    message?: string | string[];
 };
 type ErrorSummaryBaseProps = {
     entries?: ErrorMessage[];
-    errors?: any[];
+    textColor?: string;
+    autoNumber?: boolean;
+    backgroundColor?: string;
+    bgColor?: string;
+    textSize?: 'xs' | 's' | 'm' | 'l';
 };
 export type ErrorSummaryProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof ErrorSummaryBaseProps> & ErrorSummaryBaseProps;
 export {};

package/dist/types/components/FileList/_types.d.ts

@@ -16,6 +16,7 @@ type FileListBaseProps = {
     padding?: number | string;
     iconSize?: number;
     onChange?: (files: FileItem[]) => void;
+    backgroundColor?: string;
     bgColor?: string;
     canRemove?: boolean;
     onToolTip?: (tip: ToolTip | null) => void;

package/dist/types/components/IconButton/_types.d.ts

@@ -5,6 +5,9 @@ type IconButtonBaseProps = {
     frameSize?: number;
     iconSize?: number;
     icon?: string;
+    iconColor?: string;
+    iconColorOn?: string;
+    iconColorHover?: string;
     tooltip?: string;
     color?: string;
     colorOn?: string;

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

@@ -1,2 +1,2 @@
-import type { LabelProps } from './_types';
+import { type LabelProps } from './_types';
 export declare function Label(props: Readonly<LabelProps>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Label/_types.d.ts

@@ -1,15 +1,25 @@
 import type React from 'react';
+export declare enum LabelBackground {
+    red = "red",
+    yellow = "yellow",
+    green = "green",
+    blue = "blue",
+    grey = "grey",
+    lightGrey = "lightGrey",
+    white = "white"
+}
 type LabelBaseProps = {
     children?: React.ReactNode;
-    state?: 'red' | 'yellow' | 'green' | 'blue' | 'grey' | 'lightgrey' | 'white';
-    noFill?: boolean;
-    round?: boolean;
-    button?: boolean;
-    border?: number;
+    label?: string;
+    backgroundColor?: LabelBackground | string;
+    bgColor?: LabelBackground | string;
+    borderWidth?: number;
+    borderSize?: number;
+    borderColor?: string;
+    borderRadius?: number;
     padding?: number | string;
-    inline?: boolean;
-    color?: string;
-    size?: 's' | 'm' | 'l';
+    textColor?: string;
+    textSize?: 'xs' | 's' | 'm' | 'l';
     onClick?: (e: React.MouseEvent<any>) => void;
 };
 export type LabelProps = Omit<React.HTMLAttributes<HTMLElement>, keyof LabelBaseProps> & LabelBaseProps;

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

@@ -1,2 +1,3 @@
 export { Label } from './Label';
+export { LabelBackground } from './_types';
 export type { LabelProps } from './_types';

package/dist/types/components/RadioButton/RadioButton.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { RadioButtonProps } from './_types';
-export declare const RadioButton: React.MemoExoticComponent<(props: RadioButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const RadioButton: <T = string>(props: RadioButtonProps<T>) => React.JSX.Element;

package/dist/types/components/RadioButton/_types.d.ts

@@ -1,26 +1,27 @@
 import type React from 'react';
-export type RadioButtonOption = {
+export type RadioButtonOption<T = string> = {
     fieldName?: string;
-    title?: string;
-    description?: string;
-    state?: boolean;
-    icon?: string;
+    label?: string;
+    value?: T;
 };
-type RadioButtonBaseProps = {
+type RadioButtonBaseProps<T = string> = {
+    children?: React.ReactNode;
+    label?: string;
+    fieldName?: string;
+    value?: T;
     selected?: boolean;
-    option: RadioButtonOption;
     controlType?: 'radio' | 'checkbox';
     deselect?: boolean;
     tabIndex?: number;
     wrap?: boolean;
     list?: boolean;
     hideRadio?: boolean;
-    toggleIcon?: boolean;
     iconColor?: string;
     noFrame?: boolean;
     gap?: number;
-    checkedIcon?: 'check circle' | 'circle fill';
-    onChange?: (option: RadioButtonOption, state: boolean) => void;
+    icon?: string;
+    checkedIcon?: string;
+    onChange?: (option: RadioButtonOption<T>, selected: boolean) => void;
 };
-export type RadioButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof RadioButtonBaseProps> & RadioButtonBaseProps;
+export type RadioButtonProps<T = string> = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof RadioButtonBaseProps> & RadioButtonBaseProps<T>;
 export {};

package/dist/types/components/RadioButtonList/RadioButtonList.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { RadioButtonListProps } from './_types';
-export declare const RadioButtonList: React.MemoExoticComponent<(props: RadioButtonListProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const RadioButtonList: <T = string>(props: RadioButtonListProps<T>) => React.JSX.Element;

package/dist/types/components/RadioButtonList/_types.d.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
-import type { RadioButtonOption } from '../RadioButton/_types';
-type RadioButtonListBaseProps = {
-    options?: RadioButtonOption[];
+import type { RadioButtonOption } from '../RadioButton';
+type RadioButtonListBaseProps<T = string> = {
+    options?: RadioButtonOption<T>[];
     selectedIndexes?: number[] | null;
     selectedOptions?: string[] | null;
     label?: string | null;
@@ -17,8 +17,10 @@ type RadioButtonListBaseProps = {
     iconColor?: string;
     iconSelectedColor?: string;
     noFrame?: boolean;
-    checkedIcon?: 'check circle' | 'circle fill';
-    onChange?: (options: RadioButtonOption[] | null, indexes: number[] | null) => void;
+    icon?: string;
+    checkedIcon?: string;
+    width?: number | string;
+    onChange?: (options: RadioButtonOption<T>[] | null, indexes: number[] | null) => void;
 };
-export type RadioButtonListProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof RadioButtonListBaseProps> & RadioButtonListBaseProps;
+export type RadioButtonListProps<T = string> = Omit<React.HTMLAttributes<HTMLDivElement>, keyof RadioButtonListBaseProps> & RadioButtonListBaseProps<T>;
 export {};

package/dist/types/components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { SwitchProps } from './_types';
-export declare const Switch: React.MemoExoticComponent<(props: SwitchProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Switch: <T = string>(props: SwitchProps<T>) => React.JSX.Element;

package/dist/types/components/Switch/_types.d.ts

@@ -1,13 +1,17 @@
 import type React from 'react';
-type SwitchBaseProps = {
+type SwitchBaseProps<T = string> = {
+    fieldName?: string;
     state?: boolean;
     height?: number;
     width?: number;
+    backgroundColorOff?: string;
+    backgroundColorOn?: string;
     bgColorOff?: string;
     bgColorOn?: string;
     knobColor?: string;
     padding?: number;
-    onChange?: (state: boolean) => void;
+    value?: T;
+    onChange?: (value: T | undefined, state: boolean) => void;
 };
-export type SwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof SwitchBaseProps> & SwitchBaseProps;
+export type SwitchProps<T = string> = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof SwitchBaseProps> & SwitchBaseProps<T>;
 export {};

package/dist/types/components/TabBar/_types.d.ts

@@ -17,7 +17,7 @@ type TabBarBaseProps = {
     selectedValue?: string;
     height?: number | string;
     width?: number | string;
-    tabWidth?: 'min-content' | 'distribute' | number;
+    tabWidth?: 'compact' | 'fill' | number;
     closeWidth?: number | string;
     padding?: number | string;
     iconSize?: number;
@@ -42,7 +42,7 @@ export interface TabOptionProps {
     iconGap?: number;
     disabled?: boolean;
     count?: number;
-    tabWidth?: 'min-content' | 'distribute' | number;
+    tabWidth?: 'compact' | 'fill' | number;
     underline?: boolean;
     onClick?: (value: number) => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, value: number) => void;

package/dist/types/components/TextArea/_types.d.ts

@@ -3,13 +3,12 @@ type TextAreaBaseProps = {
     value?: string;
     name?: string;
     width?: number | string;
-    height?: number | string;
     minWidth?: number | string;
     rows?: number;
     focused?: boolean;
     placeholder?: string;
     padding?: number | string;
-    validate?: boolean;
+    error?: boolean;
     border?: boolean;
     resizable?: boolean;
     hasSend?: boolean;
@@ -18,17 +17,17 @@ type TextAreaBaseProps = {
         right: number;
     };
     sendSize?: number;
+    backgroundColor?: string;
     bgColor?: string;
     borderRadius?: number;
     returnSubmits?: boolean;
-    textSize?: 's' | 'm' | 'l';
+    textSize?: 'xs' | 's' | 'm' | 'l';
     disabled?: boolean;
     submitClears?: boolean;
     onChange?: (value: string) => void;
     onSubmit?: (value: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onValidate?: (state: boolean) => void;
+    onFocus?: (value: string) => void;
+    onBlur?: (value: string) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
 };
 export type TextAreaProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof TextAreaBaseProps> & TextAreaBaseProps;

package/dist/types/components/Textfield/_types.d.ts

@@ -4,8 +4,8 @@ type TextFieldBaseProps = {
     value?: string;
     name?: string;
     label?: string;
-    labelSize?: 's' | 'm' | 'l';
-    textSize?: 's' | 'm' | 'l';
+    labelSize?: 'xs' | 's' | 'm' | 'l';
+    textSize?: 'xs' | 's' | 'm' | 'l';
     placeholder?: string;
     focused?: boolean;
     editable?: boolean;
@@ -25,26 +25,20 @@ type TextFieldBaseProps = {
         width?: number | string;
         height?: number | string;
     };
-    padding?: string;
+    padding?: string | number;
     borderRadius?: number | string;
     textAlign?: 'left' | 'center';
-    borderColor?: {
-        focused: string;
-        blurred: string;
-        error: string;
-    };
-    backgroundColor?: {
-        focused: string;
-        blurred: string;
-    };
-    color?: {
-        focused: string;
-        blurred: string;
-        error: string;
-        placeholder: string;
-        disabled: string;
-        label: string;
-    };
+    borderColorFocused?: string;
+    borderColorBlurred?: string;
+    borderColorError?: string;
+    backgroundColorFocused?: string;
+    backgroundColorBlurred?: string;
+    textColorFocused?: string;
+    textColorBlurred?: string;
+    textColorError?: string;
+    textColorPlaceholder?: string;
+    textColorDisabled?: string;
+    labelColor?: string;
     validate?: boolean;
     iconLeft?: {
         name?: string;

package/dist/types/components/Tip/_types.d.ts

@@ -10,12 +10,15 @@ export type PosCoords = {
 };
 type ToolTipBaseProps = {
     tip?: ToolTip | null;
-    size?: 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l';
+    backgroundColor?: string;
     bgColor?: string;
+    textColor?: string;
     color?: string;
     border?: boolean;
     borderColor?: string;
     padding?: number | string;
+    borderRadius?: number;
     radius?: number;
     coords?: {
         x: number;

package/dist/types/components/UploadArea/UploadArea.d.ts

@@ -9,14 +9,18 @@ export declare const UploadArea: React.NamedExoticComponent<Omit<React.HTMLAttri
     title?: string;
     message?: string;
     busyMessage?: string;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
     bgColor?: string;
     bgColorHover?: string;
+    borderWidth?: number;
     border?: number;
     borderColor?: string | null;
     borderColorHover?: string | null;
     borderStyle?: string;
-    textSize?: "s" | "m" | "l";
+    textSize?: "xs" | "s" | "m" | "l";
     padding?: number | string;
+    borderRadius?: number | string;
     radius?: number | string;
     acceptedTypes?: string[];
     multiple?: boolean;
@@ -35,14 +39,18 @@ export declare const UploadArea: React.NamedExoticComponent<Omit<React.HTMLAttri
     title?: string;
     message?: string;
     busyMessage?: string;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
     bgColor?: string;
     bgColorHover?: string;
+    borderWidth?: number;
     border?: number;
     borderColor?: string | null;
     borderColorHover?: string | null;
     borderStyle?: string;
-    textSize?: "s" | "m" | "l";
+    textSize?: "xs" | "s" | "m" | "l";
     padding?: number | string;
+    borderRadius?: number | string;
     radius?: number | string;
     acceptedTypes?: string[];
     multiple?: boolean;

package/dist/types/components/UploadArea/_types.d.ts

@@ -25,14 +25,18 @@ type UploadAreaBaseProps = {
     title?: string;
     message?: string;
     busyMessage?: string;
+    backgroundColor?: string;
+    backgroundColorHover?: string;
     bgColor?: string;
     bgColorHover?: string;
+    borderWidth?: number;
     border?: number;
     borderColor?: string | null;
     borderColorHover?: string | null;
     borderStyle?: string;
-    textSize?: 's' | 'm' | 'l';
+    textSize?: 'xs' | 's' | 'm' | 'l';
     padding?: number | string;
+    borderRadius?: number | string;
     radius?: number | string;
     acceptedTypes?: string[];
     multiple?: boolean;

package/dist/types/components/playHelpers.d.ts

@@ -9,7 +9,7 @@ export declare function runDivInputPlay<TArgs>({ args, canvasElement, }: PlayCon
 export declare function runDotPlay<TArgs>({ canvasElement }: PlayContext<TArgs>): Promise<void>;
 export declare function runDraggablePanelPlay<TArgs>({ canvasElement, args, }: PlayContext<TArgs>): Promise<void>;
 export declare function runDropDownPlay<TArgs>({ args, canvasElement, }: PlayContext<TArgs>): Promise<void>;
-export declare function runErrorSummaryPlay<TArgs>({ canvasElement, }: PlayContext<TArgs>): Promise<void>;
+export declare function runErrorSummaryPlay<TArgs>({ args, canvasElement, }: PlayContext<TArgs>): Promise<void>;
 export declare function runFlexDivPlay<TArgs>({ canvasElement, }: PlayContext<TArgs>): Promise<void>;
 export declare function runGrouperPlay<TArgs>({ args, canvasElement, }: PlayContext<TArgs>): Promise<void>;
 export declare function runIconPlay<TArgs>({ args, canvasElement, }: PlayContext<TArgs>): Promise<void>;

package/dist/types/index.d.ts

@@ -68,6 +68,7 @@ export type { IconProps } from './components/Icon/_types';
 export { ButtonBar } from './components/ButtonBar';
 export type { BarButton, ButtonBarProps } from './components/ButtonBar/_types';
 export { Label } from './components/Label';
+export { LabelBackground } from './components/Label';
 export type { LabelProps } from './components/Label';
 export { UploadArea } from './components/UploadArea';
 export type { UploadAreaProps } from './components/UploadArea/_types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.1.10",
+	"version": "0.1.11",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.mjs",
 	"exports": {

package/dist/cjs/chunks/Label-CZvJbATa.js

@@ -1,118 +0,0 @@
-"use strict";
-
-var tslib_es6 = require("./tslib.es6-C8dZW5nY.js"), jsxRuntime = require("react/jsx-runtime"), React = require("react"), hooks_useTheme = require("../hooks/useTheme.js");
-
-require("../theme/colors.js"), require("../hooks/useWindow.js");
-
-var misc = require("./misc-BTF7BCZW.js"), styleInject_es = require("./style-inject.es-CMuL-BfJ.js"), css = {
-    label: "Label-module_label__RaRvM flexBox-module_row__z24tF",
-    button: "Label-module_button__N8bcQ type-module_body-m-regular__LuQBA",
-    s: "Label-module_s__Zh8Gp type-module_body-s-regular__vRHSP",
-    m: "Label-module_m__BJtGL type-module_body-m-regular__LuQBA",
-    l: "Label-module_l__t70tt type-module_body-l-regular__lOYbg",
-    red: "Label-module_red__yqrNW",
-    green: "Label-module_green__R6cDO",
-    yellow: "Label-module_yellow__IoDDg",
-    grey: "Label-module_grey__qIkSh",
-    lightgrey: "Label-module_lightgrey__nZC6N",
-    white: "Label-module_white__OFwCs",
-    blue: "Label-module_blue__lqM0T"
-};
-
-styleInject_es.styleInject(".flexBox-module_row__z24tF {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__5FEvi {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__4tcxS {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__rVdVm {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__ezvMq {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__C7P44 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__PKcrG {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__ERfp7 {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__lLJuc {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.type-module_body-xs-regular__ZAFft {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-medium__s3KvF {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-xs-bold__Lhqqq {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xs);\n\tline-height: 133.33%;\n\ttext-decoration: none;\n\tletter-spacing: 0.25px;\n}.type-module_body-s-regular__vRHSP {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-medium__tjdFc {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-s-bold__Iy-VX {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-s);\n\tline-height: 142.86%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-m-regular__LuQBA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-medium__uW1on {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-m-bold__UBcvQ {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-m);\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_body-l-regular__lOYbg {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-medium__BqRC7 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-l-bold__Fh2dt {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-l);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_body-xl-regular__pF2kC {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-regular);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-medium__BeyrH {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-medium);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.1px;\n}.type-module_body-xl-bold__Ruknj {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: var(--font-weight-bold);\n\tfont-size: var(--font-size-xl);\n\tline-height: 162.5%;\n\ttext-decoration: none;\n\tletter-spacing: 0.15px;\n}.type-module_heading-s-medium__z8L3G {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-s-bold__0O3g6 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 20px;\n\tline-height: 140%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-bold__KXxEB {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-m-medium__cJeEA {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 24px;\n\tline-height: 116.67%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-medium__eRe05 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-l-bold__Xmwtf {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 30px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-medium__5q1m3 {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 500;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}.type-module_heading-xl-bold__k9VFV {\n\tfont-family: var(--font-family), sans-serif;\n\tfont-weight: 600;\n\tfont-size: 36px;\n\tline-height: 128.57%;\n\ttext-decoration: none;\n\tletter-spacing: 0.2px;\n}\n\n.Label-module_label__RaRvM {\n\tdisplay: var(--label-inline) !important;\n\tline-height: 1em;\n\twhite-space: nowrap;\n\tpadding: var(--label-padding) !important;\n\twidth: min-content;\n\tcolor: var(--label-color);\n\tborder-radius: var(--label-border-radius);\n\tborder: var(--label-border-size) solid var(--core-outline-primary);\n\tcursor: var(--label-cursor);\n}\n\n.Label-module_button__N8bcQ {\n\tappearance: none;\n\t-webkit-appearance: none;\n\tbackground-image: none;\n\toutline: none;\n}\n\n.Label-module_s__Zh8Gp {\n}\n\n.Label-module_m__BJtGL {\n}\n\n.Label-module_l__t70tt {\n}\n\n.Label-module_red__yqrNW {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-light);\n\tborder-color: var(--label-border-color-red);\n}\n\n.Label-module_green__R6cDO {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-light);\n\tborder-color: var(--label-border-color-green);\n}\n\n.Label-module_yellow__IoDDg {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-primary);\n\tborder-color: var(--label-border-color-yellow);\n}\n\n.Label-module_grey__qIkSh {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-secondary);\n\tborder-color: var(--label-border-color-grey);\n}\n\n.Label-module_lightgrey__nZC6N {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-disabled);\n\tborder-color: var(--label-border-color-lightgrey);\n}\n\n.Label-module_white__OFwCs {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-primary);\n\tborder-color: var(--label-border-color-white);\n}\n\n.Label-module_blue__lqM0T {\n\tbackground: var(--label-background);\n\tcolor: var(--core-text-light);\n\tborder-color: var(--label-border-color-blue);\n}\n"), 
-exports.Label = function(props) {
-    const theme = hooks_useTheme.useTheme(), {children: children, state: state, noFill: noFill = !1, button: button = !1, round: round = !1, border: border = 1, padding: padding, color: color, inline: inline = !0, size: size = "m", onClick: onClick} = props, divAttributes = tslib_es6.__rest(props, [ "children", "state", "noFill", "button", "round", "border", "padding", "color", "inline", "size", "onClick" ]), {id: divId, className: className, style: style} = divAttributes, rest = tslib_es6.__rest(divAttributes, [ "id", "className", "style" ]), divStyle = null != style ? style : {}, divClass = className ? ` ${className}` : "", isInteractive = Boolean(onClick), handleClick = React.useCallback(e => {
-        isInteractive && (null == onClick || onClick(e));
-    }, [ isInteractive, onClick ]), backgroundColor = React.useMemo(() => {
-        if (noFill) return "var(--core-surface-primary)";
-        switch (state) {
-          case "red":
-          case "green":
-            return theme.current.colors["feedback-warning"];
-
-          case "yellow":
-            return theme.current.colors["array-yellow"];
-
-          case "grey":
-          case "white":
-            return theme.current.colors["core-surface-secondary"];
-
-          case "lightgrey":
-            return theme.current.colors["core-button-disabled"];
-
-          case "blue":
-            return theme.current.colors["core-button-primary"];
-
-          default:
-            return "var(--core-surface-primary)";
-        }
-    }, [ noFill, state, theme ]), borderColors = React.useMemo(() => {
-        const getBorderColor = colorState => {
-            switch (colorState) {
-              case "red":
-                return theme.current.colors["core-button-disabled"];
-
-              case "green":
-                return noFill ? theme.current.colors["feedback-positive"] : theme.current.colors["core-button-disabled"];
-
-              case "yellow":
-                return theme.current.colors["array-yellow-label"];
-
-              case "grey":
-                return noFill ? theme.current.colors["core-text-secondary"] : theme.current.colors["core-button-disabled"];
-
-              case "lightgrey":
-                return noFill ? theme.current.colors["core-outline-primary"] : theme.current.colors["core-button-disabled"];
-
-              case "white":
-                return noFill ? theme.current.colors["core-text-secondary"] : theme.current.colors["core-badge-secondary"];
-
-              case "blue":
-                return noFill ? theme.current.colors["core-text-secondary"] : theme.current.colors["core-button-primary"];
-
-              default:
-                return "var(--core-outline-primary)";
-            }
-        };
-        return {
-            red: getBorderColor("red"),
-            green: getBorderColor("green"),
-            yellow: getBorderColor("yellow"),
-            grey: getBorderColor("grey"),
-            lightgrey: getBorderColor("lightgrey"),
-            white: getBorderColor("white"),
-            blue: getBorderColor("blue")
-        };
-    }, [ noFill, theme ]), setPadding = React.useMemo(() => padding ? misc.setStyle(padding) : button ? "6px 12px" : "4px 6px", [ padding, button ]), cssVars = React.useMemo(() => ({
-        "--label-padding": setPadding,
-        "--label-border-radius": round ? "100px" : "4px",
-        "--label-cursor": button ? "pointer" : "default",
-        "--label-color": null != color ? color : "var(--core-text-primary)",
-        "--label-background": backgroundColor,
-        "--label-border-size": border ? `${border}px` : "0",
-        "--label-border-color-red": borderColors.red,
-        "--label-border-color-green": borderColors.green,
-        "--label-border-color-yellow": borderColors.yellow,
-        "--label-border-color-grey": borderColors.grey,
-        "--label-border-color-lightgrey": borderColors.lightgrey,
-        "--label-border-color-white": borderColors.white,
-        "--label-border-color-blue": borderColors.blue,
-        "--label-inline": inline ? "inline-flex" : "flex"
-    }), [ button, border, round, backgroundColor, borderColors, setPadding, color, inline ]), classNames = [ css.label, button || isInteractive ? css.button : css.regular, state ? css[state] : "" ].filter(Boolean).join(" ");
-    return isInteractive ? jsxRuntime.jsx("button", Object.assign({
-        id: divId,
-        type: "button",
-        className: `${classNames} ${css[size]}${divClass}`,
-        style: Object.assign(Object.assign({}, divStyle), cssVars),
-        "aria-label": "Label button",
-        onClick: e => handleClick(e)
-    }, rest, {
-        children: children
-    })) : jsxRuntime.jsx("span", Object.assign({
-        id: divId,
-        className: `${classNames} ${css[size]}${divClass}`,
-        style: Object.assign(Object.assign({}, divStyle), cssVars)
-    }, rest, {
-        children: children
-    }));
-};