@ultraviolet/ui 3.0.0-beta.24 → 3.0.0-beta.26

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { TableProviderProps } from './TableContext';
 import type { ColumnProps } from './types';
 export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<TableProviderProps, "columns" | "loading" | "bordered" | "autoCollapse" | "selectable" | "expandButton" | "stripped"> & {
@@ -16,6 +16,7 @@ export declare const BaseTable: import("react").ForwardRefExoticComponent<Omit<T
     autoCollapse?: boolean;
     expandButton?: boolean;
     columns: ColumnProps[];
+    style?: CSSProperties;
 } & import("react").RefAttributes<HTMLTableElement>>;
 /**
  * Table is a component that displays data in a tabular format.
@@ -35,19 +36,21 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
     autoCollapse?: boolean;
     expandButton?: boolean;
     columns: ColumnProps[];
+    style?: CSSProperties;
 } & import("react").RefAttributes<HTMLTableElement>> & {
     Body: ({ children }: {
         children: ReactNode;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Cell: ({ children, className, colSpan, rowSpan, sentiment, align, }: {
+    Cell: ({ children, className, colSpan, rowSpan, sentiment, align, style, }: {
         children?: ReactNode;
         className?: string;
         colSpan?: number;
         rowSpan?: number;
         sentiment?: import("../../theme").Color;
         align?: "left" | "right" | "center";
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, "data-testid": dataTestid, }: {
+    Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, style, "data-testid": dataTestid, }: {
         children: ReactNode;
         expandable?: ReactNode;
         className?: string;
@@ -56,6 +59,7 @@ export declare const Table: import("react").ForwardRefExoticComponent<Omit<Table
         selectDisabled?: boolean | string;
         highlightAnimation?: boolean;
         expanded?: boolean;
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
     SelectBar: <T>({ children, data, idKey, className, }: {
         className?: string;

package/dist/components/Table/index.js

@@ -37,8 +37,9 @@ const BaseTable = forwardRef(({
   bordered = false,
   stripped = false,
   autoCollapse = false,
-  onSelectedChange
-}, ref) => /* @__PURE__ */ jsx(TableProvider, { autoCollapse, bordered, columns, expandButton: expandable, onSelectedChange, selectable, stripped, children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs("table", { className: `${table}${stripped ? ` ${tableStripped}` : ""}${bordered ? ` ${tableBordered}` : ""}`, ref, children: [
+  onSelectedChange,
+  style
+}, ref) => /* @__PURE__ */ jsx(TableProvider, { autoCollapse, bordered, columns, expandButton: expandable, onSelectedChange, selectable, stripped, children: /* @__PURE__ */ jsx(TableContainer, { children: /* @__PURE__ */ jsxs("table", { className: `${table}${stripped ? ` ${tableStripped}` : ""}${bordered ? ` ${tableBordered}` : ""}`, ref, style, children: [
   /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsx(HeaderCell, { align: column.align, info: column.info, isOrdered: column.isOrdered, maxWidth: column.maxWidth, minWidth: column.minWidth, onOrder: column.onOrder, orderDirection: column.orderDirection, width: column.width, children: column.label }, `header-column-${index}`)) }) }),
   loading ? /* @__PURE__ */ jsx(Body, { children: /* @__PURE__ */ jsx(SkeletonRows, { cols: columns.length, rows: 5, selectable }) }) : children
 ] }) }) }));

package/dist/components/Tabs/Tab.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ElementType, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ElementType, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 type TabProps<T extends ElementType = 'button'> = {
     as?: T;
     badge?: ReactNode;
@@ -11,6 +11,7 @@ type TabProps<T extends ElementType = 'button'> = {
     subtitle?: string;
     tooltip?: string;
     value?: string | number;
+    style?: CSSProperties;
 } & Omit<ComponentProps<T>, 'as' | 'badge' | 'children' | 'className' | 'counter' | 'disabled' | 'value' | 'tooltip' | 'role'>;
 export declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps<ElementType>, "ref"> & import("react").RefAttributes<HTMLElement>>;
 export {};

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

@@ -23,6 +23,7 @@ export declare const Tabs: {
         subtitle?: string;
         tooltip?: string;
         value?: string | number;
+        style?: import("react").CSSProperties;
     } & Omit<any, "tooltip" | "disabled" | "as" | "className" | "children" | "role" | "value" | "badge" | "counter">, "ref"> & import("react").RefAttributes<HTMLElement>>;
     Menu: import("react").ForwardRefExoticComponent<{
         children: ReactNode;
@@ -46,6 +47,7 @@ export declare const Tabs: {
         active?: boolean;
         'data-testid'?: string;
         searchText?: string;
+        style?: import("react").CSSProperties;
     } & import("react").RefAttributes<HTMLElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/TagInput/index.cjs

@@ -42,7 +42,8 @@ const TagInput = ({
   helper,
   readOnly = false,
   tooltip,
-  clearable = false
+  clearable = false,
+  style
 }) => {
   const [tagInputState, setTagInput] = react.useState(convertTagArrayToTagStateArray(value));
   const [input, setInput] = react.useState("");
@@ -148,7 +149,7 @@ const TagInput = ({
           e.stopPropagation();
           deleteTag(tag.index);
         } : void 0, sentiment: "neutral", children: tag.label }, tag.index)),
-        !disabled ? /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-label": ariaLabel, className: styles_css.tagInput, "data-size": size, id: localId, name, onBlur: addTag, onChange: onInputChange, onKeyDown: handleInputKeydown, placeholder: tagInputState.length === 0 ? placeholder : "", readOnly, ref: inputRef, type: "text", value: input }) : null
+        !disabled ? /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-label": ariaLabel, className: styles_css.tagInput, "data-size": size, id: localId, name, onBlur: addTag, onChange: onInputChange, onKeyDown: handleInputKeydown, placeholder: tagInputState.length === 0 ? placeholder : "", readOnly, ref: inputRef, style, type: "text", value: input }) : null
       ] }),
       computedClearable || success || error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_css.tagInputStateContainer, children: [
         computedClearable ? /* @__PURE__ */ jsxRuntime.jsx(index$4.Button, { "aria-label": "clear value", disabled, onClick: clearAll, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.CloseIcon, {}) }) : null,

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { TAGINPUT_SIZE_PADDING } from './styles.css';
 type TagInputSize = keyof typeof TAGINPUT_SIZE_PADDING;
 type TagInputProp = (string | {
@@ -28,9 +28,10 @@ type TagInputProps = {
     readOnly?: boolean;
     tooltip?: string;
     clearable?: boolean;
+    style?: CSSProperties;
 };
 /**
  * TagInput is a component that allows users to input tags.
  */
-export declare const TagInput: ({ disabled, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required, size, error, success, helper, readOnly, tooltip, clearable, }: TagInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TagInput: ({ disabled, id, name, onChange, placeholder, value, className, "data-testid": dataTestId, "aria-label": ariaLabel, label, labelDescription, required, size, error, success, helper, readOnly, tooltip, clearable, style, }: TagInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TagInput/index.js

@@ -40,7 +40,8 @@ const TagInput = ({
   helper,
   readOnly = false,
   tooltip,
-  clearable = false
+  clearable = false,
+  style
 }) => {
   const [tagInputState, setTagInput] = useState(convertTagArrayToTagStateArray(value));
   const [input, setInput] = useState("");
@@ -146,7 +147,7 @@ const TagInput = ({
           e.stopPropagation();
           deleteTag(tag.index);
         } : void 0, sentiment: "neutral", children: tag.label }, tag.index)),
-        !disabled ? /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel, className: tagInput, "data-size": size, id: localId, name, onBlur: addTag, onChange: onInputChange, onKeyDown: handleInputKeydown, placeholder: tagInputState.length === 0 ? placeholder : "", readOnly, ref: inputRef, type: "text", value: input }) : null
+        !disabled ? /* @__PURE__ */ jsx("input", { "aria-label": ariaLabel, className: tagInput, "data-size": size, id: localId, name, onBlur: addTag, onChange: onInputChange, onKeyDown: handleInputKeydown, placeholder: tagInputState.length === 0 ? placeholder : "", readOnly, ref: inputRef, style, type: "text", value: input }) : null
       ] }),
       computedClearable || success || error ? /* @__PURE__ */ jsxs("div", { className: tagInputStateContainer, children: [
         computedClearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", disabled, onClick: clearAll, sentiment: "neutral", size: "xsmall", variant: "ghost", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) : null,

package/dist/components/TagList/index.cjs

@@ -23,7 +23,8 @@ const TagList = ({
   copyText,
   copiedText,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const containerRef = react.useRef(null);
   const measureRef = react.useRef(null);
@@ -35,10 +36,10 @@ const TagList = ({
   const [hiddenTags, setHiddenTags] = react.useState([]);
   const memoizedResult = react.useMemo(() => {
     let tmpThreshold2 = threshold;
-    if (tags.length > 0 && tags.slice(0, tmpThreshold2).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) {
+    while (tmpThreshold2 > 1 && tags.length > 0 && tags.slice(0, tmpThreshold2).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) {
       tmpThreshold2 -= 1;
     }
-    const potentiallyVisibleTagsLength = tags.length > tmpThreshold2 || false ? tmpThreshold2 : tags.length;
+    const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold2 || false ? tmpThreshold2 : tags.length);
     const potentiallyVisibleTags2 = tags.slice(0, potentiallyVisibleTagsLength);
     const surelyHiddenTags2 = tags.slice(potentiallyVisibleTagsLength);
     return {
@@ -127,11 +128,12 @@ const TagList = ({
     `${getTagLabel(tag)}-${index2}`
   ) : /* @__PURE__ */ jsxRuntime.jsx(index$1.Tag, { className: isEllipsis ? "ellipsed" : "", copiable, copiedText, copyText, children: getTagLabel(tag) }, `${getTagLabel(tag)}-${index2}`);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className ? `${className} ` : ""}${styles_css.tagListContainer}`, "data-testid": dataTestId, style: {
-    visibility: isReady ? "visible" : "hidden"
+    visibility: isReady ? "visible" : "hidden",
+    ...style
   }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles_css.tagContainer({
       multiline
-    })} ${visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? styles_css.ellipsisContainer : ""}`, ref: containerRef, style: dynamic.assignInlineVars({
+    })} ${visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? styles_css.ellipsisContainer : ""}`, "data-testid": `${dataTestId ?? "taglist"}-container`, ref: containerRef, style: dynamic.assignInlineVars({
       [styles_css.popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px`
     }), children: visibleTags.map((tag, index2) => renderTag(
       tag,
@@ -145,7 +147,7 @@ const TagList = ({
       whiteSpace: "nowrap"
     }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.tagContainer({
       multiline
-    }), children: potentiallyVisibleTags.map((tag, index2) => renderTag(tag, index2)) }) }),
+    }), "data-testid": `${dataTestId ?? "taglist"}-measure-container`, children: potentiallyVisibleTags.map((tag, index2) => renderTag(tag, index2)) }) }),
     hiddenTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(index.Popover, { content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.tagContainer({
       multiline: true
     }), children: hiddenTags.map((tag, index2) => renderTag(tag, index2)) }), maxHeight: popoverMaxHeight, onClose: () => setIsPopoverVisible(false), placement: popoverPlacement, size: "small", title: popoverTitle, visible: isPopoverVisible, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_css.tagsWrapper, "data-testid": `${dataTestId ?? "taglist"}-open`, onClick: () => setIsPopoverVisible(true), onKeyDown: (event) => {

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Popover } from '../Popover';
 import { Tag } from '../Tag';
 export type TagType = string | {
@@ -35,9 +35,10 @@ type TagListProps = {
     popoverMaxHeight?: ComponentProps<typeof Popover>['maxHeight'];
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 } & Pick<ComponentProps<typeof Tag>, 'copiable' | 'copyText' | 'copiedText'>;
 /**
  * This component is used to display a list of tags with a threshold and a popover when there are too many tags.
  */
-export declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, popoverMaxHeight, copiable, copyText, copiedText, className, "data-testid": dataTestId, }: TagListProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const TagList: ({ maxLength, tags, threshold, multiline, popoverTitle, popoverPlacement, popoverMaxHeight, copiable, copyText, copiedText, className, "data-testid": dataTestId, style, }: TagListProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/TagList/index.js

@@ -21,7 +21,8 @@ const TagList = ({
   copyText,
   copiedText,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const containerRef = useRef(null);
   const measureRef = useRef(null);
@@ -33,10 +34,10 @@ const TagList = ({
   const [hiddenTags, setHiddenTags] = useState([]);
   const memoizedResult = useMemo(() => {
     let tmpThreshold2 = threshold;
-    if (tags.length > 0 && tags.slice(0, tmpThreshold2).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) {
+    while (tmpThreshold2 > 1 && tags.length > 0 && tags.slice(0, tmpThreshold2).reduce((acc, tag) => acc + getTagLabel(tag), "").length > maxLength) {
       tmpThreshold2 -= 1;
     }
-    const potentiallyVisibleTagsLength = tags.length > tmpThreshold2 || false ? tmpThreshold2 : tags.length;
+    const potentiallyVisibleTagsLength = Math.max(1, tags.length > tmpThreshold2 || false ? tmpThreshold2 : tags.length);
     const potentiallyVisibleTags2 = tags.slice(0, potentiallyVisibleTagsLength);
     const surelyHiddenTags2 = tags.slice(potentiallyVisibleTagsLength);
     return {
@@ -125,11 +126,12 @@ const TagList = ({
     `${getTagLabel(tag)}-${index}`
   ) : /* @__PURE__ */ jsx(Tag, { className: isEllipsis ? "ellipsed" : "", copiable, copiedText, copyText, children: getTagLabel(tag) }, `${getTagLabel(tag)}-${index}`);
   return /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${tagListContainer}`, "data-testid": dataTestId, style: {
-    visibility: isReady ? "visible" : "hidden"
+    visibility: isReady ? "visible" : "hidden",
+    ...style
   }, children: [
     /* @__PURE__ */ jsx("div", { className: `${tagContainer({
       multiline
-    })} ${visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? ellipsisContainer : ""}`, ref: containerRef, style: assignInlineVars({
+    })} ${visibleTags.length === 1 && hiddenTags.length === 0 || popoverTriggerWidth ? ellipsisContainer : ""}`, "data-testid": `${dataTestId ?? "taglist"}-container`, ref: containerRef, style: assignInlineVars({
       [popoverTriggerWidthVar]: `${popoverTriggerWidth || 0}px`
     }), children: visibleTags.map((tag, index) => renderTag(
       tag,
@@ -143,7 +145,7 @@ const TagList = ({
       whiteSpace: "nowrap"
     }, children: /* @__PURE__ */ jsx("div", { className: tagContainer({
       multiline
-    }), children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index)) }) }),
+    }), "data-testid": `${dataTestId ?? "taglist"}-measure-container`, children: potentiallyVisibleTags.map((tag, index) => renderTag(tag, index)) }) }),
     hiddenTags.length > 0 && /* @__PURE__ */ jsx(Popover, { content: /* @__PURE__ */ jsx("div", { className: tagContainer({
       multiline: true
     }), children: hiddenTags.map((tag, index) => renderTag(tag, index)) }), maxHeight: popoverMaxHeight, onClose: () => setIsPopoverVisible(false), placement: popoverPlacement, size: "small", title: popoverTitle, visible: isPopoverVisible, children: /* @__PURE__ */ jsxs("span", { className: tagsWrapper, "data-testid": `${dataTestId ?? "taglist"}-open`, onClick: () => setIsPopoverVisible(true), onKeyDown: (event) => {

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

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                               */
 ;/* empty css                           */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var text = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_m4c9ow0", variantClassNames: { strikeThrough: { true: "uv_m4c9ow1", false: "uv_m4c9ow2" }, italic: { true: "uv_m4c9ow3", false: "uv_m4c9ow4" }, underline: { true: "uv_m4c9ow5", false: "uv_m4c9ow6" }, oneLine: { true: "uv_m4c9ow7", false: "uv_m4c9ow8" }, sentiment: { primary: "uv_m4c9ow9", secondary: "uv_m4c9owa", neutral: "uv_m4c9owb", success: "uv_m4c9owc", danger: "uv_m4c9owd", warning: "uv_m4c9owe", info: "uv_m4c9owf", black: "uv_m4c9owg", white: "uv_m4c9owh" }, prominence: { "default": "uv_m4c9owi", strong: "uv_m4c9owj", stronger: "uv_m4c9owk", weak: "uv_m4c9owl" }, variant: { body: "uv_m4c9owm", bodySmall: "uv_m4c9own", bodySmallStrong: "uv_m4c9owo", bodySmallStronger: "uv_m4c9owp", bodyStrong: "uv_m4c9owq", bodyStronger: "uv_m4c9owr", caption: "uv_m4c9ows", captionSmall: "uv_m4c9owt", captionSmallStrong: "uv_m4c9owu", captionSmallStronger: "uv_m4c9owv", captionStrong: "uv_m4c9oww", captionStronger: "uv_m4c9owx", code: "uv_m4c9owy", codeStrong: "uv_m4c9owz", codeStronger: "uv_m4c9ow10", heading: "uv_m4c9ow11", headingLarge: "uv_m4c9ow12", headingLargeStrong: "uv_m4c9ow13", headingLargeStronger: "uv_m4c9ow14", headingSmall: "uv_m4c9ow15", headingSmallStrong: "uv_m4c9ow16", headingSmallStronger: "uv_m4c9ow17", headingStrong: "uv_m4c9ow18", headingStronger: "uv_m4c9ow19" }, disabled: { true: "uv_m4c9ow1a", false: "uv_m4c9ow1b" } }, defaultVariants: { strikeThrough: false, italic: false, underline: false, oneLine: false, sentiment: void 0, prominence: "default", variant: "body", disabled: false }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_m4c9ow1c"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_m4c9ow1d"], [{ sentiment: "primary", prominence: "stronger", disabled: false }, "uv_m4c9ow1e"], [{ sentiment: "primary", prominence: "weak", disabled: false }, "uv_m4c9ow1f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_m4c9ow1g"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_m4c9ow1h"], [{ sentiment: "secondary", prominence: "stronger", disabled: false }, "uv_m4c9ow1i"], [{ sentiment: "secondary", prominence: "weak", disabled: false }, "uv_m4c9ow1j"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_m4c9ow1k"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_m4c9ow1l"], [{ sentiment: "danger", prominence: "stronger", disabled: false }, "uv_m4c9ow1m"], [{ sentiment: "danger", prominence: "weak", disabled: false }, "uv_m4c9ow1n"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_m4c9ow1o"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_m4c9ow1p"], [{ sentiment: "info", prominence: "stronger", disabled: false }, "uv_m4c9ow1q"], [{ sentiment: "info", prominence: "weak", disabled: false }, "uv_m4c9ow1r"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_m4c9ow1s"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_m4c9ow1t"], [{ sentiment: "success", prominence: "stronger", disabled: false }, "uv_m4c9ow1u"], [{ sentiment: "success", prominence: "weak", disabled: false }, "uv_m4c9ow1v"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_m4c9ow1w"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_m4c9ow1x"], [{ sentiment: "warning", prominence: "stronger", disabled: false }, "uv_m4c9ow1y"], [{ sentiment: "warning", prominence: "weak", disabled: false }, "uv_m4c9ow1z"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_m4c9ow20"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_m4c9ow21"], [{ sentiment: "neutral", prominence: "stronger", disabled: false }, "uv_m4c9ow22"], [{ sentiment: "neutral", prominence: "weak", disabled: false }, "uv_m4c9ow23"], [{ sentiment: "black", prominence: "default", disabled: false }, "uv_m4c9ow24"], [{ sentiment: "black", prominence: "strong", disabled: false }, "uv_m4c9ow25"], [{ sentiment: "black", prominence: "stronger", disabled: false }, "uv_m4c9ow26"], [{ sentiment: "black", prominence: "weak", disabled: false }, "uv_m4c9ow27"], [{ sentiment: "white", prominence: "default", disabled: false }, "uv_m4c9ow28"], [{ sentiment: "white", prominence: "strong", disabled: false }, "uv_m4c9ow29"], [{ sentiment: "white", prominence: "stronger", disabled: false }, "uv_m4c9ow2a"], [{ sentiment: "white", prominence: "weak", disabled: false }, "uv_m4c9ow2b"], [{ sentiment: "primary", prominence: "default", disabled: true }, "uv_m4c9ow2c"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_m4c9ow2d"], [{ sentiment: "primary", prominence: "stronger", disabled: true }, "uv_m4c9ow2e"], [{ sentiment: "primary", prominence: "weak", disabled: true }, "uv_m4c9ow2f"], [{ sentiment: "secondary", prominence: "default", disabled: true }, "uv_m4c9ow2g"], [{ sentiment: "secondary", prominence: "strong", disabled: true }, "uv_m4c9ow2h"], [{ sentiment: "secondary", prominence: "stronger", disabled: true }, "uv_m4c9ow2i"], [{ sentiment: "secondary", prominence: "weak", disabled: true }, "uv_m4c9ow2j"], [{ sentiment: "danger", prominence: "default", disabled: true }, "uv_m4c9ow2k"], [{ sentiment: "danger", prominence: "strong", disabled: true }, "uv_m4c9ow2l"], [{ sentiment: "danger", prominence: "stronger", disabled: true }, "uv_m4c9ow2m"], [{ sentiment: "danger", prominence: "weak", disabled: true }, "uv_m4c9ow2n"], [{ sentiment: "info", prominence: "default", disabled: true }, "uv_m4c9ow2o"], [{ sentiment: "info", prominence: "strong", disabled: true }, "uv_m4c9ow2p"], [{ sentiment: "info", prominence: "stronger", disabled: true }, "uv_m4c9ow2q"], [{ sentiment: "info", prominence: "weak", disabled: true }, "uv_m4c9ow2r"], [{ sentiment: "success", prominence: "default", disabled: true }, "uv_m4c9ow2s"], [{ sentiment: "success", prominence: "strong", disabled: true }, "uv_m4c9ow2t"], [{ sentiment: "success", prominence: "stronger", disabled: true }, "uv_m4c9ow2u"], [{ sentiment: "success", prominence: "weak", disabled: true }, "uv_m4c9ow2v"], [{ sentiment: "warning", prominence: "default", disabled: true }, "uv_m4c9ow2w"], [{ sentiment: "warning", prominence: "strong", disabled: true }, "uv_m4c9ow2x"], [{ sentiment: "warning", prominence: "stronger", disabled: true }, "uv_m4c9ow2y"], [{ sentiment: "warning", prominence: "weak", disabled: true }, "uv_m4c9ow2z"], [{ sentiment: "neutral", prominence: "default", disabled: true }, "uv_m4c9ow30"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_m4c9ow31"], [{ sentiment: "neutral", prominence: "stronger", disabled: true }, "uv_m4c9ow32"], [{ sentiment: "neutral", prominence: "weak", disabled: true }, "uv_m4c9ow33"], [{ sentiment: "black", prominence: "default", disabled: true }, "uv_m4c9ow34"], [{ sentiment: "black", prominence: "strong", disabled: true }, "uv_m4c9ow35"], [{ sentiment: "black", prominence: "stronger", disabled: true }, "uv_m4c9ow36"], [{ sentiment: "black", prominence: "weak", disabled: true }, "uv_m4c9ow37"], [{ sentiment: "white", prominence: "default", disabled: true }, "uv_m4c9ow38"], [{ sentiment: "white", prominence: "strong", disabled: true }, "uv_m4c9ow39"], [{ sentiment: "white", prominence: "stronger", disabled: true }, "uv_m4c9ow3a"], [{ sentiment: "white", prominence: "weak", disabled: true }, "uv_m4c9ow3b"], [{ prominence: "default", disabled: false }, "uv_m4c9ow3c"], [{ prominence: "strong", disabled: false }, "uv_m4c9ow3d"], [{ prominence: "stronger", disabled: false }, "uv_m4c9ow3e"], [{ prominence: "weak", disabled: false }, "uv_m4c9ow3f"]] });

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

@@ -1,4 +1,3 @@
-/* empty css                             */
 /* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var text = createRuntimeFn({ defaultClassName: "uv_m4c9ow0", variantClassNames: { strikeThrough: { true: "uv_m4c9ow1", false: "uv_m4c9ow2" }, italic: { true: "uv_m4c9ow3", false: "uv_m4c9ow4" }, underline: { true: "uv_m4c9ow5", false: "uv_m4c9ow6" }, oneLine: { true: "uv_m4c9ow7", false: "uv_m4c9ow8" }, sentiment: { primary: "uv_m4c9ow9", secondary: "uv_m4c9owa", neutral: "uv_m4c9owb", success: "uv_m4c9owc", danger: "uv_m4c9owd", warning: "uv_m4c9owe", info: "uv_m4c9owf", black: "uv_m4c9owg", white: "uv_m4c9owh" }, prominence: { "default": "uv_m4c9owi", strong: "uv_m4c9owj", stronger: "uv_m4c9owk", weak: "uv_m4c9owl" }, variant: { body: "uv_m4c9owm", bodySmall: "uv_m4c9own", bodySmallStrong: "uv_m4c9owo", bodySmallStronger: "uv_m4c9owp", bodyStrong: "uv_m4c9owq", bodyStronger: "uv_m4c9owr", caption: "uv_m4c9ows", captionSmall: "uv_m4c9owt", captionSmallStrong: "uv_m4c9owu", captionSmallStronger: "uv_m4c9owv", captionStrong: "uv_m4c9oww", captionStronger: "uv_m4c9owx", code: "uv_m4c9owy", codeStrong: "uv_m4c9owz", codeStronger: "uv_m4c9ow10", heading: "uv_m4c9ow11", headingLarge: "uv_m4c9ow12", headingLargeStrong: "uv_m4c9ow13", headingLargeStronger: "uv_m4c9ow14", headingSmall: "uv_m4c9ow15", headingSmallStrong: "uv_m4c9ow16", headingSmallStronger: "uv_m4c9ow17", headingStrong: "uv_m4c9ow18", headingStronger: "uv_m4c9ow19" }, disabled: { true: "uv_m4c9ow1a", false: "uv_m4c9ow1b" } }, defaultVariants: { strikeThrough: false, italic: false, underline: false, oneLine: false, sentiment: void 0, prominence: "default", variant: "body", disabled: false }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_m4c9ow1c"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_m4c9ow1d"], [{ sentiment: "primary", prominence: "stronger", disabled: false }, "uv_m4c9ow1e"], [{ sentiment: "primary", prominence: "weak", disabled: false }, "uv_m4c9ow1f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_m4c9ow1g"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_m4c9ow1h"], [{ sentiment: "secondary", prominence: "stronger", disabled: false }, "uv_m4c9ow1i"], [{ sentiment: "secondary", prominence: "weak", disabled: false }, "uv_m4c9ow1j"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_m4c9ow1k"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_m4c9ow1l"], [{ sentiment: "danger", prominence: "stronger", disabled: false }, "uv_m4c9ow1m"], [{ sentiment: "danger", prominence: "weak", disabled: false }, "uv_m4c9ow1n"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_m4c9ow1o"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_m4c9ow1p"], [{ sentiment: "info", prominence: "stronger", disabled: false }, "uv_m4c9ow1q"], [{ sentiment: "info", prominence: "weak", disabled: false }, "uv_m4c9ow1r"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_m4c9ow1s"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_m4c9ow1t"], [{ sentiment: "success", prominence: "stronger", disabled: false }, "uv_m4c9ow1u"], [{ sentiment: "success", prominence: "weak", disabled: false }, "uv_m4c9ow1v"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_m4c9ow1w"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_m4c9ow1x"], [{ sentiment: "warning", prominence: "stronger", disabled: false }, "uv_m4c9ow1y"], [{ sentiment: "warning", prominence: "weak", disabled: false }, "uv_m4c9ow1z"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_m4c9ow20"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_m4c9ow21"], [{ sentiment: "neutral", prominence: "stronger", disabled: false }, "uv_m4c9ow22"], [{ sentiment: "neutral", prominence: "weak", disabled: false }, "uv_m4c9ow23"], [{ sentiment: "black", prominence: "default", disabled: false }, "uv_m4c9ow24"], [{ sentiment: "black", prominence: "strong", disabled: false }, "uv_m4c9ow25"], [{ sentiment: "black", prominence: "stronger", disabled: false }, "uv_m4c9ow26"], [{ sentiment: "black", prominence: "weak", disabled: false }, "uv_m4c9ow27"], [{ sentiment: "white", prominence: "default", disabled: false }, "uv_m4c9ow28"], [{ sentiment: "white", prominence: "strong", disabled: false }, "uv_m4c9ow29"], [{ sentiment: "white", prominence: "stronger", disabled: false }, "uv_m4c9ow2a"], [{ sentiment: "white", prominence: "weak", disabled: false }, "uv_m4c9ow2b"], [{ sentiment: "primary", prominence: "default", disabled: true }, "uv_m4c9ow2c"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_m4c9ow2d"], [{ sentiment: "primary", prominence: "stronger", disabled: true }, "uv_m4c9ow2e"], [{ sentiment: "primary", prominence: "weak", disabled: true }, "uv_m4c9ow2f"], [{ sentiment: "secondary", prominence: "default", disabled: true }, "uv_m4c9ow2g"], [{ sentiment: "secondary", prominence: "strong", disabled: true }, "uv_m4c9ow2h"], [{ sentiment: "secondary", prominence: "stronger", disabled: true }, "uv_m4c9ow2i"], [{ sentiment: "secondary", prominence: "weak", disabled: true }, "uv_m4c9ow2j"], [{ sentiment: "danger", prominence: "default", disabled: true }, "uv_m4c9ow2k"], [{ sentiment: "danger", prominence: "strong", disabled: true }, "uv_m4c9ow2l"], [{ sentiment: "danger", prominence: "stronger", disabled: true }, "uv_m4c9ow2m"], [{ sentiment: "danger", prominence: "weak", disabled: true }, "uv_m4c9ow2n"], [{ sentiment: "info", prominence: "default", disabled: true }, "uv_m4c9ow2o"], [{ sentiment: "info", prominence: "strong", disabled: true }, "uv_m4c9ow2p"], [{ sentiment: "info", prominence: "stronger", disabled: true }, "uv_m4c9ow2q"], [{ sentiment: "info", prominence: "weak", disabled: true }, "uv_m4c9ow2r"], [{ sentiment: "success", prominence: "default", disabled: true }, "uv_m4c9ow2s"], [{ sentiment: "success", prominence: "strong", disabled: true }, "uv_m4c9ow2t"], [{ sentiment: "success", prominence: "stronger", disabled: true }, "uv_m4c9ow2u"], [{ sentiment: "success", prominence: "weak", disabled: true }, "uv_m4c9ow2v"], [{ sentiment: "warning", prominence: "default", disabled: true }, "uv_m4c9ow2w"], [{ sentiment: "warning", prominence: "strong", disabled: true }, "uv_m4c9ow2x"], [{ sentiment: "warning", prominence: "stronger", disabled: true }, "uv_m4c9ow2y"], [{ sentiment: "warning", prominence: "weak", disabled: true }, "uv_m4c9ow2z"], [{ sentiment: "neutral", prominence: "default", disabled: true }, "uv_m4c9ow30"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_m4c9ow31"], [{ sentiment: "neutral", prominence: "stronger", disabled: true }, "uv_m4c9ow32"], [{ sentiment: "neutral", prominence: "weak", disabled: true }, "uv_m4c9ow33"], [{ sentiment: "black", prominence: "default", disabled: true }, "uv_m4c9ow34"], [{ sentiment: "black", prominence: "strong", disabled: true }, "uv_m4c9ow35"], [{ sentiment: "black", prominence: "stronger", disabled: true }, "uv_m4c9ow36"], [{ sentiment: "black", prominence: "weak", disabled: true }, "uv_m4c9ow37"], [{ sentiment: "white", prominence: "default", disabled: true }, "uv_m4c9ow38"], [{ sentiment: "white", prominence: "strong", disabled: true }, "uv_m4c9ow39"], [{ sentiment: "white", prominence: "stronger", disabled: true }, "uv_m4c9ow3a"], [{ sentiment: "white", prominence: "weak", disabled: true }, "uv_m4c9ow3b"], [{ prominence: "default", disabled: false }, "uv_m4c9ow3c"], [{ prominence: "strong", disabled: false }, "uv_m4c9ow3d"], [{ prominence: "stronger", disabled: false }, "uv_m4c9ow3e"], [{ prominence: "weak", disabled: false }, "uv_m4c9ow3f"]] });

package/dist/components/Text/variables.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                               */
 var placementText = "var(--uv_qabug40)";
 var whiteSpaceText = "var(--uv_qabug41)";
 exports.placementText = placementText;

package/dist/components/Text/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var placementText = "var(--uv_qabug40)";
 var whiteSpaceText = "var(--uv_qabug41)";
 export {

package/dist/components/TextArea/index.cjs

@@ -42,7 +42,8 @@ const TextArea = react.forwardRef(({
   onKeyDown,
   clearable = false,
   labelDescription,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  style
 }, ref) => {
   const localId = react.useId();
   const theme = themes.useTheme();
@@ -92,9 +93,12 @@ const TextArea = react.forwardRef(({
         success: !!success
       }), "data-testid": dataTestId, disabled, id: id ?? localId, maxLength, minLength, name, onBlur, onChange: (event) => {
         onChange(event.currentTarget.value);
-      }, onFocus, onKeyDown, placeholder, readOnly: !!readOnly, ref: textAreaRef, rows: rows !== "auto" ? rows : 1, style: dynamic.assignInlineVars({
-        [styles_css.paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${constants.SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
-      }), tabIndex, value }),
+      }, onFocus, onKeyDown, placeholder, readOnly: !!readOnly, ref: textAreaRef, rows: rows !== "auto" ? rows : 1, style: {
+        ...dynamic.assignInlineVars({
+          [styles_css.paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${constants.SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
+        }),
+        ...style
+      }, tabIndex, value }),
       /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", className: styles_css.textAreaClearableContainer, direction: "row", gap: "1", children: [
         computedClearable ? /* @__PURE__ */ jsxRuntime.jsx(index$3.Button, { "aria-label": "clear value", onClick: () => {
           onChange("");

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

@@ -1,4 +1,4 @@
-import type { DOMAttributes, ReactNode } from 'react';
+import type { CSSProperties, DOMAttributes, ReactNode } from 'react';
 type LabelProps = {
     label: string;
     'aria-label'?: never;
@@ -56,6 +56,7 @@ type TextAreaProps = {
     onKeyDown?: DOMAttributes<HTMLTextAreaElement>['onKeyDown'];
     clearable?: boolean;
     labelDescription?: ReactNode;
+    style?: CSSProperties;
 } & LabelProps;
 /**
  * This component offers an extended textarea HTML

package/dist/components/TextArea/index.js

@@ -40,7 +40,8 @@ const TextArea = forwardRef(({
   onKeyDown,
   clearable = false,
   labelDescription,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  style
 }, ref) => {
   const localId = useId();
   const theme = useTheme();
@@ -90,9 +91,12 @@ const TextArea = forwardRef(({
         success: !!success
       }), "data-testid": dataTestId, disabled, id: id ?? localId, maxLength, minLength, name, onBlur, onChange: (event) => {
         onChange(event.currentTarget.value);
-      }, onFocus, onKeyDown, placeholder, readOnly: !!readOnly, ref: textAreaRef, rows: rows !== "auto" ? rows : 1, style: assignInlineVars({
-        [paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
-      }), tabIndex, value }),
+      }, onFocus, onKeyDown, placeholder, readOnly: !!readOnly, ref: textAreaRef, rows: rows !== "auto" ? rows : 1, style: {
+        ...assignInlineVars({
+          [paddingRightVar]: `calc(${theme.space[computedClearable && (!!success || !!error) ? "4" : "3"]} + ${computedClearable ? `${SIZE_HEIGHT.xsmall}px` : "0px"} + ${!!success || !!error ? `${STATE_ICON_SIZE}px` : "0px"})`
+        }),
+        ...style
+      }, tabIndex, value }),
       /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: textAreaClearableContainer, direction: "row", gap: "1", children: [
         computedClearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", onClick: () => {
           onChange("");

package/dist/components/TextInput/index.cjs

@@ -50,7 +50,8 @@ const TextInput = react.forwardRef(({
   role,
   "aria-live": ariaLive,
   "aria-atomic": ariaAtomic,
-  defaultValue
+  defaultValue,
+  style
 }, ref) => {
   const localId = react.useId();
   const [hasFocus, setHasFocus] = react.useState(false);
@@ -85,7 +86,7 @@ const TextInput = react.forwardRef(({
       }, onChange: onChangeCallback, onFocus: (event) => {
         setHasFocus(true);
         onFocus?.(event);
-      }, onKeyDown, onKeyUp, placeholder, readOnly, ref: inputRef, required, tabIndex, type: computedType, value }),
+      }, onKeyDown, onKeyUp, placeholder, readOnly, ref: inputRef, required, style, tabIndex, type: computedType, value }),
       success || error || loading || computedClearable ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", className: styles_css.stateStack, direction: "row", gap: 1, children: [
         computedClearable ? /* @__PURE__ */ jsxRuntime.jsx(index$4.Button, { "aria-label": "clear value", disabled: disabled || !computedValue, onClick: () => {
           if (inputRef?.current) {

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

@@ -26,4 +26,4 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
     value?: string;
     defaultValue?: string;
     onChangeValue?: (value: string) => void;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "name" | "role" | "tabIndex" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "autoComplete" | "autoFocus" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "name" | "role" | "tabIndex" | "aria-atomic" | "aria-label" | "aria-labelledby" | "aria-live" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "autoComplete" | "autoFocus" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/index.js

@@ -48,7 +48,8 @@ const TextInput = forwardRef(({
   role,
   "aria-live": ariaLive,
   "aria-atomic": ariaAtomic,
-  defaultValue
+  defaultValue,
+  style
 }, ref) => {
   const localId = useId();
   const [hasFocus, setHasFocus] = useState(false);
@@ -83,7 +84,7 @@ const TextInput = forwardRef(({
       }, onChange: onChangeCallback, onFocus: (event) => {
         setHasFocus(true);
         onFocus?.(event);
-      }, onKeyDown, onKeyUp, placeholder, readOnly, ref: inputRef, required, tabIndex, type: computedType, value }),
+      }, onKeyDown, onKeyUp, placeholder, readOnly, ref: inputRef, required, style, tabIndex, type: computedType, value }),
       success || error || loading || computedClearable ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: stateStack, direction: "row", gap: 1, children: [
         computedClearable ? /* @__PURE__ */ jsx(Button, { "aria-label": "clear value", disabled: disabled || !computedValue, onClick: () => {
           if (inputRef?.current) {

package/dist/components/TimeInput/index.cjs

@@ -29,6 +29,7 @@ const TimeInput = ({
   className,
   id,
   autoFocus,
+  style,
   "data-testid": dataTestId,
   placeholder = constants.DEFAULT_PLACEHOLDER,
   "aria-label": ariaLabel
@@ -169,7 +170,7 @@ const TimeInput = ({
       refMinutes.current?.focus();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className, gap: 0.5, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className, gap: 0.5, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Label, { htmlFor: id ?? localId, labelDescription, required, size, children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", "aria-label": ariaLabel, "aria-required": required, className: styles_css.timeinputWrapper({
       disabled,

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

@@ -1,4 +1,4 @@
-import type { FocusEvent, ReactNode } from 'react';
+import type { CSSProperties, FocusEvent, ReactNode } from 'react';
 export type Time = {
     h: string;
     m: string;
@@ -27,6 +27,7 @@ type TimeInputProps = {
      * Automatically focus on the element on render. Autofocus is applied to the hour input
      */
     autoFocus?: boolean;
+    style?: CSSProperties;
 } & ({
     label?: string;
     'aria-label'?: never;
@@ -38,5 +39,5 @@ type TimeInputProps = {
  * A time input component that allows users to type a time in a 24 or 12-hour format.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const TimeInput: ({ label, timeFormat, value, clearable, required, labelDescription, helper, size, disabled, readOnly, error, onChange, onBlur, onFocus, className, id, autoFocus, "data-testid": dataTestId, placeholder, "aria-label": ariaLabel, }: TimeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TimeInput: ({ label, timeFormat, value, clearable, required, labelDescription, helper, size, disabled, readOnly, error, onChange, onBlur, onFocus, className, id, autoFocus, style, "data-testid": dataTestId, placeholder, "aria-label": ariaLabel, }: TimeInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TimeInput/index.js

@@ -27,6 +27,7 @@ const TimeInput = ({
   className,
   id,
   autoFocus,
+  style,
   "data-testid": dataTestId,
   placeholder = DEFAULT_PLACEHOLDER,
   "aria-label": ariaLabel
@@ -167,7 +168,7 @@ const TimeInput = ({
       refMinutes.current?.focus();
     }
   };
-  return /* @__PURE__ */ jsxs(Stack, { className, gap: 0.5, children: [
+  return /* @__PURE__ */ jsxs(Stack, { className, gap: 0.5, style, children: [
     label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: id ?? localId, labelDescription, required, size, children: label }) : null,
     /* @__PURE__ */ jsxs(Stack, { alignItems: "center", "aria-label": ariaLabel, "aria-required": required, className: timeinputWrapper({
       disabled,

package/dist/components/Toaster/components/Button.d.ts

@@ -1,3 +1,3 @@
 import type { ComponentProps } from 'react';
 import { Button } from '../../Button';
-export declare const ToastButton: ({ variant, ...props }: ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastButton: ({ variant, className, ...props }: ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Toaster/index.cjs

@@ -40,7 +40,8 @@ const ToastContainer = ({
   "data-testid": dataTestId,
   className,
   autoClose,
-  containerId = "toaster"
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${styles_css.toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, transition: reactToastify.Slide });
+  containerId = "toaster",
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${styles_css.toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, style, transition: reactToastify.Slide });
 exports.ToastContainer = ToastContainer;
 exports.toast = toast;

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { ToastOptions } from 'react-toastify';
 import { Button } from '../Button';
 export declare const toast: {
@@ -30,6 +30,7 @@ type ToastContainerProps = {
      * Set a custom containerId to be able to define multiple ToastContainers
      */
     containerId?: string;
+    style?: CSSProperties;
 };
 /**
  * Display short information about an event that happen in the interface in a floating alert.
@@ -39,9 +40,9 @@ type ToastContainerProps = {
  * Toaster is separated in two parts, first the `ToastContainer` which is where the div of the toast will be rendered,
  * and second the `toast()` function which is used to display the toast.
  */
-export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToastContainer: ({ newestOnTop, limit, position, "data-testid": dataTestId, className, autoClose, containerId, style, }: ToastContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Toast: {
-    Button: ({ variant, ...props }: import("react").ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Button: ({ variant, className, ...props }: import("react").ComponentProps<typeof Button>) => import("@emotion/react/jsx-runtime").JSX.Element;
     Link: ({ ...props }: import("react").ComponentProps<typeof import("..").Link>) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Toaster/index.js

@@ -38,8 +38,9 @@ const ToastContainer = ({
   "data-testid": dataTestId,
   className,
   autoClose,
-  containerId = "toaster"
-}) => /* @__PURE__ */ jsx(ToastContainer$1, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, transition: Slide });
+  containerId = "toaster",
+  style
+}) => /* @__PURE__ */ jsx(ToastContainer$1, { autoClose: autoClose ?? AUTOCLOSE_DELAY, className: `${className ? `${className} ` : ""}${toaster}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, pauseOnFocusLoss: false, pauseOnHover: false, position, stacked: true, style, transition: Slide });
 export {
   ToastContainer,
   toast

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

@@ -1,2 +1,3 @@
 export declare const toaster: string;
 export declare const closeButtonToaster: string;
+export declare const toasterButton: string;

package/dist/components/Toggle/index.cjs

@@ -24,7 +24,8 @@ const Toggle = react.forwardRef(({
   "data-testid": dataTestId,
   value,
   error,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  style
 }, ref) => {
   const uniqueId = react.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${styles_css.label({
@@ -43,7 +44,7 @@ const Toggle = react.forwardRef(({
       disabled,
       error: !!error,
       size
-    }), children: /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: styles_css.checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, type: "checkbox", value }) })
+    }), children: /* @__PURE__ */ jsxRuntime.jsx("input", { "aria-invalid": !!error, "aria-label": ariaLabel, checked, className: styles_css.checkbox, disabled, id: id ?? uniqueId, name, onChange, ref, required, style, type: "checkbox", value }) })
   ] }) });
 });
 exports.Toggle = Toggle;

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

@@ -15,4 +15,4 @@ export declare const Toggle: import("react").ForwardRefExoticComponent<{
     required?: boolean;
     error?: boolean | string;
     'data-testid'?: string;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "value"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "value"> & import("react").RefAttributes<HTMLInputElement>>;