@uniformdev/design-system 19.164.0 → 19.165.1-alpha.0

package/dist/esm/index.js

@@ -21724,7 +21724,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React24 from "react";
+import { forwardRef as forwardRef24 } from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css100 } from "@emotion/react";
@@ -21737,7 +21737,7 @@ var SwitchInputContainer = css100`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css100`
+var SwitchInput = (size) => css100`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -21745,15 +21745,16 @@ var SwitchInput = css100`
   cursor: pointer;
   position: absolute;
   display: block;
-  width: var(--spacing-md);
-  height: var(--spacing-md);
+  width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
+  height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
+  margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
   transition: transform var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     background-image var(--duration-fast) var(--timing-ease-out);
   z-index: var(--z-10);
 
   &:focus {
-    outline: 3px solid var(--gray-800);
+    outline: 2px solid var(--gray-800);
     outline-offset: 2px;
   }
 
@@ -21783,12 +21784,12 @@ var SwitchInputDisabled = css100`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css100`
+var SwitchInputLabel = (size) => css100`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
   line-height: 1.25;
-  padding-inline: var(--spacing-2xl) 0;
+  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 
   &:before {
     border-radius: var(--rounded-full);
@@ -21797,40 +21798,47 @@ var SwitchInputLabel = css100`
     cursor: pointer;
     display: block;
     overflow: hidden;
-    width: var(--spacing-xl);
-    height: var(--spacing-md);
+    width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
+    height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
+    margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
     position: absolute;
     left: 0;
     top: 0;
   }
 `;
-var SwitchText = css100`
+var SwitchText = (size) => css100`
   color: var(--gray-500);
   font-size: var(--fs-sm);
-  padding-inline: var(--spacing-2xl) 0;
+  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 `;
 
 // src/components/Switch/Switch.tsx
 import { Fragment as Fragment21, jsx as jsx131, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
-var Switch = React24.forwardRef(
-  ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
+var Switch = forwardRef24(
+  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
     return /* @__PURE__ */ jsxs87(Fragment21, { children: [
-      /* @__PURE__ */ jsxs87("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel, children: label })
-      ] }),
-      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText, children: additionalText }) : null,
+      /* @__PURE__ */ jsxs87(
+        "label",
+        {
+          css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
+          children: [
+            /* @__PURE__ */ jsx131("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
+            /* @__PURE__ */ jsx131("span", { css: SwitchInputLabel(switchSize), children: label })
+          ]
+        }
+      ),
+      additionalText ? /* @__PURE__ */ jsx131("p", { css: SwitchText(switchSize), children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-import * as React25 from "react";
+import * as React24 from "react";
 
 // src/components/Table/Table.styles.ts
 import { css as css101 } from "@emotion/react";
@@ -21869,37 +21877,37 @@ var tableCellHead = css101`
 
 // src/components/Table/Table.tsx
 import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
-var Table = React25.forwardRef(
+var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React25.forwardRef(
+var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React25.forwardRef(
+var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React25.forwardRef(
+var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React25.forwardRef(
+var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React25.forwardRef(
+var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React25.forwardRef(
+var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx132("td", { ref, ...otherProps, children });
   }

package/dist/index.d.mts

@@ -23420,15 +23420,17 @@ type SkeletonProps = React__default.PropsWithChildren<React__default.HTMLAttribu
  */
 declare const Skeleton: ({ width, height, inline, circle, children, ...otherProps }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+type SwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     /** sets the label value */
-    label: string;
+    label: ReactNode;
     /** (optional) sets information text */
     infoText?: string;
     /** sets the toggle text value */
     toggleText?: string;
     /** sets child elements */
-    children?: React$1.ReactNode;
+    children?: ReactNode;
+    /** the size of the control */
+    switchSize?: 'base' | 'sm';
 };
 /**
  * Uniform Switch Input Component
@@ -23437,13 +23439,15 @@ type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> &
  */
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & {
     /** sets the label value */
-    label: string;
+    label: ReactNode;
     /** (optional) sets information text */
     infoText?: string | undefined;
     /** sets the toggle text value */
     toggleText?: string | undefined;
     /** sets child elements */
-    children?: React$1.ReactNode;
+    children?: ReactNode;
+    /** the size of the control */
+    switchSize?: "base" | "sm" | undefined;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
 type TableProps = {

package/dist/index.d.ts

@@ -23420,15 +23420,17 @@ type SkeletonProps = React__default.PropsWithChildren<React__default.HTMLAttribu
  */
 declare const Skeleton: ({ width, height, inline, circle, children, ...otherProps }: SkeletonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+type SwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     /** sets the label value */
-    label: string;
+    label: ReactNode;
     /** (optional) sets information text */
     infoText?: string;
     /** sets the toggle text value */
     toggleText?: string;
     /** sets child elements */
-    children?: React$1.ReactNode;
+    children?: ReactNode;
+    /** the size of the control */
+    switchSize?: 'base' | 'sm';
 };
 /**
  * Uniform Switch Input Component
@@ -23437,13 +23439,15 @@ type SwitchProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> &
  */
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> & {
     /** sets the label value */
-    label: string;
+    label: ReactNode;
     /** (optional) sets information text */
     infoText?: string | undefined;
     /** sets the toggle text value */
     toggleText?: string | undefined;
     /** sets child elements */
-    children?: React$1.ReactNode;
+    children?: ReactNode;
+    /** the size of the control */
+    switchSize?: "base" | "sm" | undefined;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
 type TableProps = {

package/dist/index.js

@@ -23595,7 +23595,7 @@ var Skeleton = ({
 
 // src/components/Switch/Switch.tsx
 init_emotion_jsx_shim();
-var React24 = __toESM(require("react"));
+var import_react155 = require("react");
 
 // src/components/Switch/Switch.styles.ts
 init_emotion_jsx_shim();
@@ -23609,7 +23609,7 @@ var SwitchInputContainer = import_react154.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react154.css`
+var SwitchInput = (size) => import_react154.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -23617,15 +23617,16 @@ var SwitchInput = import_react154.css`
   cursor: pointer;
   position: absolute;
   display: block;
-  width: var(--spacing-md);
-  height: var(--spacing-md);
+  width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
+  height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
+  margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
   transition: transform var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
     background-image var(--duration-fast) var(--timing-ease-out);
   z-index: var(--z-10);
 
   &:focus {
-    outline: 3px solid var(--gray-800);
+    outline: 2px solid var(--gray-800);
     outline-offset: 2px;
   }
 
@@ -23655,12 +23656,12 @@ var SwitchInputDisabled = import_react154.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react154.css`
+var SwitchInputLabel = (size) => import_react154.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
   line-height: 1.25;
-  padding-inline: var(--spacing-2xl) 0;
+  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 
   &:before {
     border-radius: var(--rounded-full);
@@ -23669,33 +23670,40 @@ var SwitchInputLabel = import_react154.css`
     cursor: pointer;
     display: block;
     overflow: hidden;
-    width: var(--spacing-xl);
-    height: var(--spacing-md);
+    width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
+    height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
+    margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
     position: absolute;
     left: 0;
     top: 0;
   }
 `;
-var SwitchText = import_react154.css`
+var SwitchText = (size) => import_react154.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
-  padding-inline: var(--spacing-2xl) 0;
+  padding-inline: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"} 0;
 `;
 
 // src/components/Switch/Switch.tsx
 var import_jsx_runtime131 = require("@emotion/react/jsx-runtime");
-var Switch = React24.forwardRef(
-  ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
+var Switch = (0, import_react155.forwardRef)(
+  ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_jsx_runtime131.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel, children: label })
-      ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+        "label",
+        {
+          css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "checkbox", css: SwitchInput(switchSize), ...inputProps, ref }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { css: SwitchInputLabel(switchSize), children: label })
+          ]
+        }
+      ),
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { css: SwitchText(switchSize), children: additionalText }) : null,
       children
     ] });
   }
@@ -23703,12 +23711,12 @@ var Switch = React24.forwardRef(
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
-var React25 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
 init_emotion_jsx_shim();
-var import_react155 = require("@emotion/react");
-var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react155.css`
+var import_react156 = require("@emotion/react");
+var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_react156.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -23728,14 +23736,14 @@ var table = ({ cellPadding = "var(--spacing-sm) var(--spacing-md)" }) => import_
     background-color: var(--gray-50);
   }
 `;
-var tableHead = import_react155.css`
+var tableHead = import_react156.css`
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = import_react155.css`
+var tableRow = import_react156.css`
   border-bottom: 1px solid var(--gray-100);
 `;
-var tableCellHead = import_react155.css`
+var tableCellHead = import_react156.css`
   font-size: var(--fs-sm);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
@@ -23743,37 +23751,37 @@ var tableCellHead = import_react155.css`
 
 // src/components/Table/Table.tsx
 var import_jsx_runtime132 = require("@emotion/react/jsx-runtime");
-var Table = React25.forwardRef(
+var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React25.forwardRef(
+var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React25.forwardRef(
+var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React25.forwardRef(
+var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React25.forwardRef(
+var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React25.forwardRef(
+var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React25.forwardRef(
+var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("td", { ref, ...otherProps, children });
   }
@@ -23781,13 +23789,13 @@ var TableCellData = React25.forwardRef(
 
 // src/components/Tabs/Tabs.tsx
 init_emotion_jsx_shim();
-var import_react157 = require("@ariakit/react");
-var import_react158 = require("react");
+var import_react158 = require("@ariakit/react");
+var import_react159 = require("react");
 
 // src/components/Tabs/Tabs.styles.ts
 init_emotion_jsx_shim();
-var import_react156 = require("@emotion/react");
-var tabButtonStyles = import_react156.css`
+var import_react157 = require("@emotion/react");
+var tabButtonStyles = import_react157.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -23804,7 +23812,7 @@ var tabButtonStyles = import_react156.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react156.css`
+var tabButtonGroupStyles = import_react157.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
@@ -23813,7 +23821,7 @@ var tabButtonGroupStyles = import_react156.css`
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime133 = require("@emotion/react/jsx-runtime");
 var useCurrentTab = () => {
-  const context = (0, import_react157.useTabStore)();
+  const context = (0, import_react158.useTabStore)();
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -23827,13 +23835,13 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react158.useMemo)(() => {
+  const selected = (0, import_react159.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const tab = (0, import_react157.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
-  const onTabSelect = (0, import_react158.useCallback)(
+  const tab = (0, import_react158.useTabStore)({ ...props, selectOnMove: !manual, selectedId: selected });
+  const onTabSelect = (0, import_react159.useCallback)(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -23844,28 +23852,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  (0, import_react158.useEffect)(() => {
+  (0, import_react159.useEffect)(() => {
     if (selected && selected !== tab.getState().activeId) {
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.TabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.Tab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react157.TabPanel, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react158.TabPanel, { ...props, children });
 };
 
 // src/components/Validation/StatusBullet.tsx
@@ -23873,8 +23881,8 @@ init_emotion_jsx_shim();
 
 // src/components/Validation/StatusBullet.styles.ts
 init_emotion_jsx_shim();
-var import_react159 = require("@emotion/react");
-var StatusBulletContainer = import_react159.css`
+var import_react160 = require("@emotion/react");
+var StatusBulletContainer = import_react160.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -23891,33 +23899,33 @@ var StatusBulletContainer = import_react159.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react159.css`
+var StatusBulletBase = import_react160.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react159.css`
+var StatusBulletSmall = import_react160.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react159.css`
+var StatusDraft = import_react160.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusModified = import_react159.css`
+var StatusModified = import_react160.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusError = import_react159.css`
+var StatusError = import_react160.css`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -23930,22 +23938,22 @@ var StatusError = import_react159.css`
     );
   }
 `;
-var StatusPublished = import_react159.css`
+var StatusPublished = import_react160.css`
   &:before {
     background: var(--accent-dark);
   }
 `;
-var StatusOrphan = import_react159.css`
+var StatusOrphan = import_react160.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = import_react159.css`
+var StatusUnknown = import_react160.css`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = import_react159.css`
+var StatusDeleted = import_react160.css`
   &:before {
     background: var(--error);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.164.0",
+  "version": "19.165.1-alpha.0+f8f7ef22e4",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "8.0.10",
     "@types/react": "18.2.40",
     "@types/react-dom": "18.2.17",
-    "@uniformdev/canvas": "^19.164.0",
-    "@uniformdev/richtext": "^19.164.0",
+    "@uniformdev/canvas": "^19.165.1-alpha.0+f8f7ef22e4",
+    "@uniformdev/richtext": "^19.165.1-alpha.0+f8f7ef22e4",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "016e3b85373592ca9beb19593aa120247b638c06"
+  "gitHead": "f8f7ef22e4180653122a8f30f8c184acc8e5b25b"
 }