reshaped 2.5.8 → 2.6.0

package/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,7 +1,4 @@
 import React from "react";
 import * as T from "./Breadcrumbs.types";
-declare const Breadcrumbs: {
-    (props: T.Props): React.JSX.Element;
-    Item: (props: T.ItemProps) => React.JSX.Element;
-};
+declare const Breadcrumbs: (props: T.Props) => React.JSX.Element;
 export default Breadcrumbs;

package/components/Breadcrumbs/Breadcrumbs.js

@@ -3,18 +3,10 @@ import React from "react";
 import { classNames } from "../../utilities/helpers.js";
 import View from "../View/index.js";
 import Icon from "../Icon/index.js";
-import Link from "../Link/index.js";
 import Text from "../Text/index.js";
 import Button from "../Button/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
-const BreadcrumbsItem = (props) => {
-    const { children, onClick, href, icon, disabled } = props;
-    if (!href && !onClick && !disabled) {
-        return (React.createElement(Text, { variant: "body-3", weight: "medium", color: "neutral" }, children));
-    }
-    return (React.createElement(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit" }, children));
-};
 const Breadcrumbs = (props) => {
     const { children, separator, color, defaultVisibleItems, ariaLabel, className, attributes } = props;
     const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;
@@ -50,5 +42,4 @@ const Breadcrumbs = (props) => {
                 React.createElement(Text, { variant: "body-3", color: color === "primary" ? "primary" : "neutral-faded" }, itemNode)));
         }))));
 };
-Breadcrumbs.Item = BreadcrumbsItem;
 export default Breadcrumbs;

package/components/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Breadcrumbs.types";
+declare const BreadcrumbsItem: (props: T.ItemProps) => React.JSX.Element;
+export default BreadcrumbsItem;

package/components/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Text from "../Text/index.js";
+import Link from "../Link/index.js";
+const BreadcrumbsItem = (props) => {
+    const { children, onClick, href, icon, disabled } = props;
+    if (!href && !onClick && !disabled) {
+        return (React.createElement(Text, { variant: "body-3", weight: "medium", color: "neutral" }, children));
+    }
+    return (React.createElement(Link, { onClick: onClick, href: href, icon: icon, disabled: disabled, variant: "plain", color: "inherit" }, children));
+};
+export default BreadcrumbsItem;

package/components/Breadcrumbs/index.d.ts

@@ -1,2 +1,8 @@
-export { default } from "./Breadcrumbs";
+import BreadcrumbsItem from "./BreadcrumbsItem";
+type CompoundComponent = typeof Breadcrumbs & {
+    Item: typeof BreadcrumbsItem;
+};
+declare const Breadcrumbs: (props: import("./Breadcrumbs.types").Props) => import("react").JSX.Element;
 export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
+declare const _default: CompoundComponent;
+export default _default;

package/components/Breadcrumbs/index.js

@@ -1 +1,5 @@
-export { default } from "./Breadcrumbs.js";
+import BreadcrumbsInternal from "./Breadcrumbs.js";
+import BreadcrumbsItem from "./BreadcrumbsItem.js";
+const Breadcrumbs = BreadcrumbsInternal;
+Breadcrumbs.Item = BreadcrumbsItem;
+export default Breadcrumbs;

package/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type * as T from "./FileUpload.types";
+declare const FileUpload: {
+    (props: T.Props): React.JSX.Element;
+    Trigger: (props: T.TriggerProps) => React.JSX.Element;
+};
+export default FileUpload;

package/components/FileUpload/FileUpload.js

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import HiddenVisually from "../HiddenVisually/index.js";
+import useToggle from "../../hooks/useToggle.js";
+import s from "./FileUpload.module.css";
+const FileUploadTrigger = (props) => {
+    const { children } = props;
+    return React.createElement("span", { className: s.trigger }, children);
+};
+const FileUpload = (props) => {
+    const { name, children, className, attributes, inputAttributes, onChange } = props;
+    const highlightToggle = useToggle();
+    const rootClassNames = classNames(s.root, highlightToggle.active && s["--highlighted"], className);
+    const handleDragOver = (event) => {
+        var _a;
+        event.preventDefault();
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragOver) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleDragEnter = (event) => {
+        var _a;
+        highlightToggle.activate();
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleDragLeave = (event) => {
+        var _a;
+        // Ignore elements inside the field
+        if (event.currentTarget.contains(event.relatedTarget))
+            return;
+        highlightToggle.deactivate();
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragLeave) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleDrop = (event) => {
+        var _a;
+        event.preventDefault();
+        highlightToggle.deactivate();
+        onChange === null || onChange === void 0 ? void 0 : onChange({ name, value: Array.from(event.dataTransfer.files), event });
+        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDrop) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
+    };
+    const handleChange = (event) => {
+        var _a;
+        const nextValue = event.target.files;
+        if (!nextValue)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ name, event, value: Array.from(nextValue) });
+        (_a = inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onChange) === null || _a === void 0 ? void 0 : _a.call(inputAttributes, event);
+    };
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }),
+        React.createElement(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", textAlign: "center", animated: true },
+            React.createElement(View.Item, null, children),
+            React.createElement(HiddenVisually, null,
+                React.createElement("input", Object.assign({}, inputAttributes, { type: "file", className: s.field, name: name, onChange: handleChange }))))));
+};
+FileUpload.Trigger = FileUploadTrigger;
+export default FileUpload;

package/components/FileUpload/FileUpload.module.css

@@ -0,0 +1 @@
+.root.--highlighted .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),8%);border-color:var(--rs-color-border-primary)}.triggerLayer{border:1px dashed var(--rs-color-border-neutral)}[data-rs-keyboard] .triggerLayer:focus-within{box-shadow:var(--rs-focus-shadow)}.triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),16%)}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}

package/components/FileUpload/FileUpload.types.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    name: string;
+    children?: React.ReactNode;
+    onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+    inputAttributes?: G.Attributes<"input">;
+};
+export type TriggerProps = {
+    children: React.ReactNode;
+};

package/components/FileUpload/FileUpload.types.js

@@ -0,0 +1 @@
+export {};

package/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./FileUpload";
+export type { Props as FileUploadProps } from "./FileUpload.types";

package/components/FileUpload/index.js

@@ -0,0 +1 @@
+export { default } from "./FileUpload.js";

package/components/FileUpload/tests/FileUpload.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;

package/components/FileUpload/tests/FileUpload.stories.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import FileUpload from "../index.js";
+import View from "../../View/index.js";
+import Image from "../../Image/index.js";
+import Link from "../../Link/index.js";
+import Icon from "../../Icon/index.js";
+import IconMic from "../../../icons/Mic.js";
+export default { title: "Components/FileUpload" };
+const Demo = () => {
+    const [files, setFiles] = React.useState([]);
+    return (<View gap={2}>
+			<FileUpload name="file" onChange={(args) => setFiles((prev) => [...prev, ...args.value])}>
+				<View gap={3}>
+					<Icon svg={IconMic} size={8}/>
+					Drop files to attach
+				</View>
+			</FileUpload>
+			<View paddingBottom={20}>
+				<View gap={2} direction="row" position="absolute">
+					{files &&
+            Array.from(files).map((file) => {
+                return (<Image key={file.name} src={URL.createObjectURL(file)} width="60px" height="60px" borderRadius="small"/>);
+            })}
+				</View>
+			</View>
+		</View>);
+};
+export const base = () => (<Example>
+		<Example.Item title="Base upload with previews">
+			<Demo />
+		</Example.Item>
+		<Example.Item title="With trigger">
+			<FileUpload name="file">
+				<div>
+					Drop files to attach, or{" "}
+					<FileUpload.Trigger>
+						<Link variant="plain">browse</Link>
+					</FileUpload.Trigger>
+				</div>
+			</FileUpload>
+		</Example.Item>
+	</Example>);

package/components/FormControl/FormControl.context.d.ts

@@ -11,7 +11,7 @@ export declare const useFormControl: () => {
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
         className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;

package/components/HiddenVisually/HiddenVisually.module.css

@@ -1 +1 @@
-.root{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;white-space:nowrap;width:1px}
+.root{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}

package/components/TextField/tests/TextField.stories.js

@@ -49,6 +49,10 @@ export const icon = () => (<Example>
 		<Example.Item title="endIcon">
 			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
 		</Example.Item>
+
+		<Example.Item title="width affixes">
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2"/>
+		</Example.Item>
 	</Example>);
 export const size = () => (<Example>
 		<Example.Item title="size: medium">

package/components/View/View.module.css

@@ -1 +1 @@
-.root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));gap:var(--rs-view-gap-value);z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--padding{padding:calc(var(--rs-unit-x1) * var(--rs-view-p-vertical, var(--rs-view-p-top))) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)))}.--padding-top{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top))}.--padding-bottom{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom))}.--padding-start{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start))}.--padding-end{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end))}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color}.--align-text-start{text-align:start}.--align-text-center{text-align:center}.--align-text-end{text-align:end}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--bd{border:1px solid var(--rs-view-border-color)}.--bd-neutral-faded{--rs-view-border-color:var(--rs-color-border-neutral-faded)}.--bd-neutral{--rs-view-border-color:var(--rs-color-border-neutral)}.--bd-positive{--rs-view-border-color:var(--rs-color-border-positive)}.--bd-positive-faded{--rs-view-border-color:var(--rs-color-border-positive-faded)}.--bd-critical{--rs-view-border-color:var(--rs-color-border-critical)}.--bd-critical-faded{--rs-view-border-color:var(--rs-color-border-critical-faded)}.--bd-primary{--rs-view-border-color:var(--rs-color-border-primary)}.--bd-primary-faded{--rs-view-border-color:var(--rs-color-border-primary-faded)}.--bd-disabled{--rs-view-border-color:var(--rs-color-border-disabled)}.--bd-transparent{--rs-view-border-color:transparent}.--overflow-hidden{overflow:hidden}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (min-width:660px){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (min-width:900px){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (min-width:1280px){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (min-width:660px){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (min-width:900px){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (min-width:1280px){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.--padding{--rs-view-p-vertical-s:0;--rs-view-p-vertical-m:var(--rs-view-p-vertical-s);--rs-view-p-vertical-l:var(--rs-view-p-vertical-m);--rs-view-p-vertical-xl:var(--rs-view-p-vertical-l);--rs-view-p-vertical:var(--rs-view-p-vertical-s);--rs-view-p-horizontal-s:0;--rs-view-p-horizontal-m:var(--rs-view-p-horizontal-s);--rs-view-p-horizontal-l:var(--rs-view-p-horizontal-m);--rs-view-p-horizontal-xl:var(--rs-view-p-horizontal-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-s)}.--padding-top{--rs-view-p-top-s:0;--rs-view-p-top-m:var(--rs-view-p-top-s);--rs-view-p-top-l:var(--rs-view-p-top-m);--rs-view-p-top-xl:var(--rs-view-p-top-l);--rs-view-p-top:var(--rs-view-p-top-s)}.--padding-bottom{--rs-view-p-bottom-s:0;--rs-view-p-bottom-m:var(--rs-view-p-bottom-s);--rs-view-p-bottom-l:var(--rs-view-p-bottom-m);--rs-view-p-bottom-xl:var(--rs-view-p-bottom-l);--rs-view-p-bottom:var(--rs-view-p-bottom-s)}.--padding-start{--rs-view-p-start-s:0;--rs-view-p-start-m:var(--rs-view-p-start-s);--rs-view-p-start-l:var(--rs-view-p-start-m);--rs-view-p-start-xl:var(--rs-view-p-start-l);--rs-view-p-start:var(--rs-view-p-start-s)}.--padding-end{--rs-view-p-end-s:0;--rs-view-p-end-m:var(--rs-view-p-end-s);--rs-view-p-end-l:var(--rs-view-p-end-m);--rs-view-p-end-xl:var(--rs-view-p-end-l);--rs-view-p-end:var(--rs-view-p-end-s)}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (min-width:660px){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-m)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-m)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-m)}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (min-width:900px){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-l)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-l)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-l)}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (min-width:1280px){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-xl)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-xl)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-xl)}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}
+.root{--rs-view-gaps-count-multiplier:1;--rs-view-z:auto;--rs-view-gap-value:calc(var(--rs-view-gap) * var(--rs-unit-x1));gap:var(--rs-view-gap-value);z-index:var(--rs-view-z)}.item{--rs-view-item-gap:calc(var(--rs-unit-x1) * var(--rs-view-item-gap-before) - var(--rs-view-gap-value));order:var(--rs-view-item-order)}.--padding{padding:calc(var(--rs-unit-x1) * var(--rs-view-p-vertical, var(--rs-view-p-top))) calc(var(--rs-unit-x1) * var(--rs-view-p-horizontal, var(--rs-view-p-start)))}.--padding-top{padding-top:calc(var(--rs-unit-x1) * var(--rs-view-p-top))}.--padding-bottom{padding-bottom:calc(var(--rs-unit-x1) * var(--rs-view-p-bottom))}.--padding-start{padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-view-p-start))}.--padding-end{padding-inline-end:calc(var(--rs-unit-x1) * var(--rs-view-p-end))}.--animated{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:background-color,color,border-color,box-shadow}.--align-text-start{text-align:start}.--align-text-center{text-align:center}.--align-text-end{text-align:end}.--bg-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.--bg-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.--bg-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.--bg-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.--bg-neutral-faded{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.--bg-positive-faded{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-neutral)}.--bg-critical-faded{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-neutral)}.--bg-primary-faded{background-color:var(--rs-color-background-primary-faded)}.--bg-page,.--bg-primary-faded{color:var(--rs-color-foreground-neutral)}.--bg-page{background-color:var(--rs-color-background-page)}.--bg-page-faded{background-color:var(--rs-color-background-page-faded)}.--bg-disabled,.--bg-page-faded{color:var(--rs-color-foreground-neutral)}.--bg-disabled{background-color:var(--rs-color-background-disabled)}.--bg-disabled-faded{background-color:var(--rs-color-background-disabled-faded);color:var(--rs-color-foreground-neutral)}.--bg-elevation-base{background-color:var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral)}.--bg-elevation-raised{background-color:var(--rs-color-background-elevation-raised);color:var(--rs-color-foreground-neutral)}.--bg-elevation-overlay{background-color:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral)}.--bg-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.--bg-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.--shadow-raised{box-shadow:var(--rs-shadow-raised)}.--shadow-overlay{box-shadow:var(--rs-shadow-overlay)}.--bd{border:1px solid var(--rs-view-border-color)}.--bd-neutral-faded{--rs-view-border-color:var(--rs-color-border-neutral-faded)}.--bd-neutral{--rs-view-border-color:var(--rs-color-border-neutral)}.--bd-positive{--rs-view-border-color:var(--rs-color-border-positive)}.--bd-positive-faded{--rs-view-border-color:var(--rs-color-border-positive-faded)}.--bd-critical{--rs-view-border-color:var(--rs-color-border-critical)}.--bd-critical-faded{--rs-view-border-color:var(--rs-color-border-critical-faded)}.--bd-primary{--rs-view-border-color:var(--rs-color-border-primary)}.--bd-primary-faded{--rs-view-border-color:var(--rs-color-border-primary-faded)}.--bd-disabled{--rs-view-border-color:var(--rs-color-border-disabled)}.--bd-transparent{--rs-view-border-color:transparent}.--overflow-hidden{overflow:hidden}.--divided{--rs-view-gaps-count-multiplier:2}.--flex{display:flex;flex-direction:column;justify-content:flex-start}.--direction-column{flex-direction:column;flex-wrap:nowrap}.--direction-column>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column>.item--gap-auto{margin-top:auto}.--direction-column-reverse{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse>.item--gap-auto{margin-top:auto}.--direction-row{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row>.item--gap-auto{margin-inline-start:auto}.--direction-row>button{width:auto!important}.--direction-row-reverse{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse>button{width:auto!important}.--nowrap{flex-wrap:nowrap}.--nowrap>*{flex-shrink:0}.--wrap{flex-wrap:wrap}@media (min-width:660px){.--nowrap-false--m,.--wrap-true--m{flex-wrap:wrap}.--nowrap-true--m,.--wrap-false--m{flex-wrap:nowrap}}@media (min-width:900px){.--nowrap-false--l,.--wrap-true--l{flex-wrap:wrap}.--nowrap-true--l,.--wrap-false--l{flex-wrap:nowrap}}@media (min-width:1280px){.--nowrap-false--xl,.--wrap-true--xl{flex-wrap:wrap}.--nowrap-true--xl,.--wrap-false--xl{flex-wrap:nowrap}}.--align-start{align-items:flex-start!important}.--align-end{align-items:flex-end!important}.--align-center{align-items:center!important}.--align-stretch{align-items:stretch!important}.--align-baseline{align-items:baseline!important}.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}.divider{align-self:stretch}.item--grow{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--columns{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-1{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-1,.item--columns-2{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-2{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3,.item--columns-4{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-4{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5,.item--columns-6{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-6{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7,.item--columns-8{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-8{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10,.item--columns-9{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-10{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11,.item--columns-12{width:calc((100% - var(--rs-view-gap-value) * var(--rs-view-gaps-count)) / var(--rs-view-columns-count) - var(--rs-view-item-gap, 0px))}.item--columns-12{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto{width:auto}@media (min-width:660px){.item--columns-1--m{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--m{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--m{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--m{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--m{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--m{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--m{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--m{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--m{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--m{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--m{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--m{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--m{width:auto}}@media (min-width:900px){.item--columns-1--l{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--l{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--l{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--l{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--l{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--l{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--l{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--l{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--l{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--l{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--l{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--l{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--l{width:auto}}@media (min-width:1280px){.item--columns-1--xl{--rs-view-columns-count:calc(12 / 1);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-2--xl{--rs-view-columns-count:calc(12 / 2);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-3--xl{--rs-view-columns-count:calc(12 / 3);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-4--xl{--rs-view-columns-count:calc(12 / 4);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-5--xl{--rs-view-columns-count:calc(12 / 5);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-6--xl{--rs-view-columns-count:calc(12 / 6);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-7--xl{--rs-view-columns-count:calc(12 / 7);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-8--xl{--rs-view-columns-count:calc(12 / 8);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-9--xl{--rs-view-columns-count:calc(12 / 9);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-10--xl{--rs-view-columns-count:calc(12 / 10);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-11--xl{--rs-view-columns-count:calc(12 / 11);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-12--xl{--rs-view-columns-count:calc(12 / 12);--rs-view-gaps-count:calc((var(--rs-view-columns-count) - 1) * var(--rs-view-gaps-count-multiplier))}.item--columns-auto--xl{width:auto}}.--padding{--rs-view-p-vertical-s:0;--rs-view-p-vertical-m:var(--rs-view-p-vertical-s);--rs-view-p-vertical-l:var(--rs-view-p-vertical-m);--rs-view-p-vertical-xl:var(--rs-view-p-vertical-l);--rs-view-p-vertical:var(--rs-view-p-vertical-s);--rs-view-p-horizontal-s:0;--rs-view-p-horizontal-m:var(--rs-view-p-horizontal-s);--rs-view-p-horizontal-l:var(--rs-view-p-horizontal-m);--rs-view-p-horizontal-xl:var(--rs-view-p-horizontal-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-s)}.--padding-top{--rs-view-p-top-s:0;--rs-view-p-top-m:var(--rs-view-p-top-s);--rs-view-p-top-l:var(--rs-view-p-top-m);--rs-view-p-top-xl:var(--rs-view-p-top-l);--rs-view-p-top:var(--rs-view-p-top-s)}.--padding-bottom{--rs-view-p-bottom-s:0;--rs-view-p-bottom-m:var(--rs-view-p-bottom-s);--rs-view-p-bottom-l:var(--rs-view-p-bottom-m);--rs-view-p-bottom-xl:var(--rs-view-p-bottom-l);--rs-view-p-bottom:var(--rs-view-p-bottom-s)}.--padding-start{--rs-view-p-start-s:0;--rs-view-p-start-m:var(--rs-view-p-start-s);--rs-view-p-start-l:var(--rs-view-p-start-m);--rs-view-p-start-xl:var(--rs-view-p-start-l);--rs-view-p-start:var(--rs-view-p-start-s)}.--padding-end{--rs-view-p-end-s:0;--rs-view-p-end-m:var(--rs-view-p-end-s);--rs-view-p-end-l:var(--rs-view-p-end-m);--rs-view-p-end-xl:var(--rs-view-p-end-l);--rs-view-p-end:var(--rs-view-p-end-s)}.root{--rs-view-gap-s:0;--rs-view-gap-m:var(--rs-view-gap-s);--rs-view-gap-l:var(--rs-view-gap-m);--rs-view-gap-xl:var(--rs-view-gap-l);--rs-view-gap:var(--rs-view-gap-s)}.root>.item{--rs-view-item-order-s:0;--rs-view-item-order-m:var(--rs-view-item-order-s);--rs-view-item-order-l:var(--rs-view-item-order-m);--rs-view-item-order-xl:var(--rs-view-item-order-l);--rs-view-item-order:var(--rs-view-item-order-s);--rs-view-item-gap-before-s:initial;--rs-view-item-gap-before-m:var(--rs-view-item-gap-before-s);--rs-view-item-gap-before-l:var(--rs-view-item-gap-before-m);--rs-view-item-gap-before-xl:var(--rs-view-item-gap-before-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-s)}@media (min-width:660px){.--direction-column--m{flex-direction:column;flex-wrap:nowrap}.--direction-column--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--m>.item--gap-auto{margin-top:auto}.--direction-column-reverse--m{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--m>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--m>.item--gap-auto{margin-top:auto}.--direction-row--m{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--m>.item--gap-auto{margin-inline-start:auto}.--direction-row--m>button{width:auto!important}.--direction-row-reverse--m{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--m>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--m>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--m>button{width:auto!important}.--align-start--m{align-items:flex-start!important}.--align-end--m{align-items:flex-end!important}.--align-center--m{align-items:center!important}.--align-stretch--m{align-items:stretch!important}.--align-baseline--m{align-items:baseline!important}.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}.item--grow-true--m{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--m{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-m);--rs-view-p-horizontal:var(--rs-view-p-horizontal-m)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-m)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-m)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-m)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-m)}.root{--rs-view-gap:var(--rs-view-gap-m)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-m);--rs-view-item-gap-before:var(--rs-view-item-gap-before-m)}}@media (min-width:900px){.--direction-column--l{flex-direction:column;flex-wrap:nowrap}.--direction-column--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--l>.item--gap-auto{margin-top:auto}.--direction-column-reverse--l{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--l>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--l>.item--gap-auto{margin-top:auto}.--direction-row--l{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--l>.item--gap-auto{margin-inline-start:auto}.--direction-row--l>button{width:auto!important}.--direction-row-reverse--l{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--l>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--l>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--l>button{width:auto!important}.--align-start--l{align-items:flex-start!important}.--align-end--l{align-items:flex-end!important}.--align-center--l{align-items:center!important}.--align-stretch--l{align-items:stretch!important}.--align-baseline--l{align-items:baseline!important}.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}.item--grow-true--l{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--l{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-l);--rs-view-p-horizontal:var(--rs-view-p-horizontal-l)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-l)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-l)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-l)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-l)}.root{--rs-view-gap:var(--rs-view-gap-l)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-l);--rs-view-item-gap-before:var(--rs-view-item-gap-before-l)}}@media (min-width:1280px){.--direction-column--xl{flex-direction:column;flex-wrap:nowrap}.--direction-column--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column--xl>.item--gap-auto{margin-top:auto}.--direction-column-reverse--xl{flex-direction:column-reverse;flex-wrap:nowrap}.--direction-column-reverse--xl>.item--gap-before{margin-top:var(--rs-view-item-gap)}.--direction-column-reverse--xl>.item--gap-auto{margin-top:auto}.--direction-row--xl{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.--direction-row--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row--xl>button{width:auto!important}.--direction-row-reverse--xl{align-items:flex-start;flex-direction:row-reverse;flex-wrap:wrap}.--direction-row-reverse--xl>.item--gap-before{margin-inline-start:var(--rs-view-item-gap)}.--direction-row-reverse--xl>.item--gap-auto{margin-inline-start:auto}.--direction-row-reverse--xl>button{width:auto!important}.--align-start--xl{align-items:flex-start!important}.--align-end--xl{align-items:flex-end!important}.--align-center--xl{align-items:center!important}.--align-stretch--xl{align-items:stretch!important}.--align-baseline--xl{align-items:baseline!important}.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}.item--grow-true--xl{flex-basis:0;flex-grow:1;flex-shrink:1;min-width:0}.item--grow-false--xl{flex-basis:auto;flex-grow:0;flex-shrink:0;min-width:auto}.--padding{--rs-view-p-vertical:var(--rs-view-p-vertical-xl);--rs-view-p-horizontal:var(--rs-view-p-horizontal-xl)}.--padding-top{--rs-view-p-top:var(--rs-view-p-top-xl)}.--padding-bottom{--rs-view-p-bottom:var(--rs-view-p-bottom-xl)}.--padding-start{--rs-view-p-start:var(--rs-view-p-start-xl)}.--padding-end{--rs-view-p-end:var(--rs-view-p-end-xl)}.root{--rs-view-gap:var(--rs-view-gap-xl)}.root>.item{--rs-view-item-order:var(--rs-view-item-order-xl);--rs-view-item-gap-before:var(--rs-view-item-gap-before-xl)}}

package/index.d.ts

@@ -35,6 +35,8 @@ export { default as Divider } from "./components/Divider";
 export type { DividerProps } from "./components/Divider";
 export { default as DropdownMenu } from "./components/DropdownMenu";
 export type { DropdownMenuProps } from "./components/DropdownMenu";
+export { default as FileUpload } from "./components/FileUpload";
+export type { FileUploadProps } from "./components/FileUpload";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
 export { default as Hidden } from "./components/Hidden";

package/index.js

@@ -18,6 +18,7 @@ export { default as Container } from "./components/Container/index.js";
 export { default as Dismissible } from "./components/Dismissible/index.js";
 export { default as Divider } from "./components/Divider/index.js";
 export { default as DropdownMenu } from "./components/DropdownMenu/index.js";
+export { default as FileUpload } from "./components/FileUpload/index.js";
 export { default as FormControl } from "./components/FormControl/index.js";
 export { default as Hidden } from "./components/Hidden/index.js";
 export { default as HiddenVisually } from "./components/HiddenVisually/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.5.8",
+	"version": "2.6.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -23,7 +23,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/formaat-design/reshaped-source"
+		"url": "https://github.com/formaat-design/reshaped"
 	},
 	"main": "./index.js",
 	"module": "./index.js",
@@ -62,7 +62,7 @@
 		"build:storybook": "storybook build -c tools/storybook -o dist/app --disable-telemetry",
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build -c tools/storybook",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
-		"release:lib": "yarn build && npx semantic-release --no-ci",
+		"release:lib": "yarn build && yarn publish",
 		"release:beta": "yarn build && yarn publish --tag beta",
 		"release:test": "yarn build && yarn pack --filename reshaped-test.tgz",
 		"release:source": "sh ./bin/release-source.sh",
@@ -80,32 +80,34 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "18.2.0",
-		"@commitlint/config-conventional": "18.1.0",
-		"@commitlint/types": "18.1.0",
+		"@commitlint/cli": "18.4.2",
+		"@commitlint/config-conventional": "18.4.2",
+		"@commitlint/types": "18.4.0",
+		"@semantic-release/changelog": "6.0.3",
+		"@semantic-release/git": "10.0.1",
 		"@size-limit/preset-big-lib": "9.0.0",
-		"@storybook/addon-a11y": "7.4.6",
-		"@storybook/react": "7.4.6",
-		"@storybook/react-vite": "7.4.6",
+		"@storybook/addon-a11y": "7.5.3",
+		"@storybook/react": "7.5.3",
+		"@storybook/react-vite": "7.5.3",
 		"@testing-library/jest-dom": "6.1.4",
-		"@testing-library/react": "14.0.0",
+		"@testing-library/react": "14.1.2",
 		"@testing-library/user-event": "14.5.1",
-		"@types/events": "3.0.2",
-		"@types/jest": "29.5.7",
-		"@types/node": "20.8.10",
-		"@types/react": "18.2.28",
-		"@types/react-dom": "18.2.13",
-		"@typescript-eslint/eslint-plugin": "6.9.1",
-		"@typescript-eslint/parser": "6.9.1",
-		"@vitejs/plugin-react": "4.1.0",
-		"chromatic": "7.6.0",
+		"@types/events": "3.0.3",
+		"@types/jest": "29.5.8",
+		"@types/node": "20.9.2",
+		"@types/react": "18.2.37",
+		"@types/react-dom": "18.2.15",
+		"@typescript-eslint/eslint-plugin": "6.11.0",
+		"@typescript-eslint/parser": "6.11.0",
+		"@vitejs/plugin-react": "4.2.0",
+		"chromatic": "9.1.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "8.52.0",
+		"eslint": "8.54.0",
 		"eslint-config-airbnb-typescript": "17.1.0",
 		"eslint-config-prettier": "9.0.0",
-		"eslint-plugin-import": "2.28.1",
-		"eslint-plugin-jsx-a11y": "6.7.1",
-		"eslint-plugin-prettier": "5.0.0",
+		"eslint-plugin-import": "2.29.0",
+		"eslint-plugin-jsx-a11y": "6.8.0",
+		"eslint-plugin-prettier": "5.0.1",
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"identity-obj-proxy": "3.0.0",
@@ -118,22 +120,20 @@
 		"postcss-each": "1.1.0",
 		"postcss-import": "15.1.0",
 		"postcss-nested": "6.0.1",
-		"prettier": "3.0.3",
+		"prettier": "3.1.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"resolve-tspaths": "0.8.17",
+		"semantic-release": "22.0.8",
 		"size-limit": "9.0.0",
-		"storybook": "7.4.6",
-		"stylelint": "15.10.3",
+		"storybook": "7.5.3",
+		"stylelint": "15.11.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",
 		"ts-jest": "29.1.1",
 		"typescript": "5.2.2",
-		"vite": "4.5.0",
-		"vite-tsconfig-paths": "4.2.1",
-		"@semantic-release/changelog": "6.0.3",
-		"@semantic-release/git": "10.0.1",
-		"semantic-release": "22.0.6"
+		"vite": "5.0.0",
+		"vite-tsconfig-paths": "4.2.1"
 	},
 	"peerDependencies": {
 		"postcss": "^8.0.0",
@@ -143,7 +143,7 @@
 	"dependencies": {
 		"autoprefixer": "10.4.16",
 		"chalk": "4.1.2",
-		"commander": "11.0.0",
+		"commander": "11.1.0",
 		"cssnano": "6.0.1",
 		"postcss-custom-media": "8.0.2"
 	},

package/themes/_generator/tests/themes.stories.d.ts

@@ -5,3 +5,4 @@ declare const _default: {
 export default _default;
 export declare const base: () => React.JSX.Element;
 export declare const generation: () => React.JSX.Element;
+export declare const onColors: () => React.JSX.Element;

package/themes/_generator/tests/themes.stories.js

@@ -103,3 +103,27 @@ export const generation = () => (<Example>
 			</View>
 		</Example.Item>
 	</Example>);
+const onColorsCss = getThemeCSS("on-color", {
+    color: {
+        backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
+        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
+    },
+}, {
+    onColorValues: {
+        primary: {
+            hexLight: "#d1fae5",
+            hexDark: "#022c22",
+        },
+    },
+});
+export const onColors = () => (<Example>
+		<Example.Item title="custom on color values">
+			<style>{onColorsCss}</style>
+			<Theme name="on-color">
+				<View gap={2} direction="row">
+					<Button color="primary">Primary button</Button>
+					<Button color="critical">Critical button</Button>
+				</View>
+			</Theme>
+		</Example.Item>
+	</Example>);

package/themes/_generator/tokens/types.d.ts

@@ -8,6 +8,7 @@ import type * as TShadow from "./shadow/shadow.types";
 import type * as TUnit from "./unit/unit.types";
 import type * as TViewport from "./viewport/viewport.types";
 export type TokenType = "fontFamily" | "fontWeight" | "unit" | "viewport" | "font" | "color" | "duration" | "easing" | "shadow";
+export type ColorHue = "primary" | "positive" | "critical" | "neutral";
 export type BaseThemeDefinition = {
     viewport: Record<TViewport.Name, TViewport.Token>;
 };

package/themes/_generator/utilities/generateBackgroundColors.js

@@ -24,18 +24,16 @@ const generateBackgroundColors = (definition, themeOptions) => {
         if (!bgToken)
             return;
         if (needsDynamicForeground) {
-            const hex = (0, color_1.getOnColor)({
-                bgHexColor: bgToken.hex,
-                mode: "light",
-                lightHexColor: (_c = (_b = definition === null || definition === void 0 ? void 0 : definition.color) === null || _b === void 0 ? void 0 : _b.white) === null || _c === void 0 ? void 0 : _c.hex,
-                darkHexColor: (_e = (_d = definition === null || definition === void 0 ? void 0 : definition.color) === null || _d === void 0 ? void 0 : _d.black) === null || _e === void 0 ? void 0 : _e.hex,
-            });
-            const hexDark = (0, color_1.getOnColor)({
-                bgHexColor: bgToken.hexDark || bgToken.hex,
-                mode: "dark",
-                lightHexColor: (_g = (_f = definition === null || definition === void 0 ? void 0 : definition.color) === null || _f === void 0 ? void 0 : _f.white) === null || _g === void 0 ? void 0 : _g.hex,
-                darkHexColor: (_j = (_h = definition === null || definition === void 0 ? void 0 : definition.color) === null || _h === void 0 ? void 0 : _h.black) === null || _j === void 0 ? void 0 : _j.hex,
-            });
+            const overrideKeys = (themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues) && Object.keys(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues);
+            const onColorKey = overrideKeys && overrideKeys.find((key) => tokenName.toLowerCase().includes(key));
+            const onColorHexMap = {
+                lightHexColor: (onColorKey && ((_c = (_b = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues) === null || _b === void 0 ? void 0 : _b[onColorKey]) === null || _c === void 0 ? void 0 : _c.hexLight)) ||
+                    ((_e = (_d = definition === null || definition === void 0 ? void 0 : definition.color) === null || _d === void 0 ? void 0 : _d.white) === null || _e === void 0 ? void 0 : _e.hex),
+                darkHexColor: (onColorKey && ((_g = (_f = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.onColorValues) === null || _f === void 0 ? void 0 : _f[onColorKey]) === null || _g === void 0 ? void 0 : _g.hexDark)) ||
+                    ((_j = (_h = definition === null || definition === void 0 ? void 0 : definition.color) === null || _h === void 0 ? void 0 : _h.black) === null || _j === void 0 ? void 0 : _j.hex),
+            };
+            const hex = (0, color_1.getOnColor)(Object.assign({ bgHexColor: bgToken.hex, mode: "light" }, onColorHexMap));
+            const hexDark = (0, color_1.getOnColor)(Object.assign({ bgHexColor: bgToken.hexDark || bgToken.hex, mode: "dark" }, onColorHexMap));
             // eslint-disable-next-line no-param-reassign
             definition.color[generatedForegroundName] = {
                 hex,

package/themes/index.d.ts

@@ -9,4 +9,4 @@ export declare const generateThemeColors: (options: {
 }) => Record<import("./_generator/tokens/color/color.types").Name, import("./_generator/tokens/color/color.types").Token> & {
     [tokenName: string]: import("./_generator/tokens/color/color.types").Token;
 };
-export declare const getThemeCSS: (name: string, definition: T.PartialDeep<FullThemeDefinition>) => string;
+export declare const getThemeCSS: (name: string, definition: T.PartialDeep<FullThemeDefinition>, options?: T.PublicOptions["themeOptions"]) => string;

package/themes/index.js

@@ -14,8 +14,8 @@ const generateThemeColors = (options) => {
     return (0, generateColors_1.default)(options);
 };
 exports.generateThemeColors = generateThemeColors;
-const getThemeCSS = (name, definition) => {
-    const code = (0, transform_1.default)(name, definition, { isFragment: true });
+const getThemeCSS = (name, definition, options) => {
+    const code = (0, transform_1.default)(name, definition, { themeOptions: options, isFragment: true });
     return code.variables;
 };
 exports.getThemeCSS = getThemeCSS;

package/types/config.d.ts

@@ -1,8 +1,14 @@
-import { PartialUserThemeDefinition } from "../themes/_generator/tokens/types";
+import { PartialUserThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
 export type ReshapedConfig = {
     themes?: Record<string, PartialUserThemeDefinition>;
     themeFragments?: Record<string, PartialUserThemeDefinition>;
     themeOptions?: {
         generateOnColorsFor?: string[];
+        onColorValues?: {
+            [key in ColorHue]?: {
+                hexDark: string;
+                hexLight: string;
+            };
+        };
     };
 };