@uniformdev/design-system 19.159.1-alpha.16 → 19.159.1-alpha.27

package/dist/index.js

@@ -1600,6 +1600,7 @@ __export(src_exports, {
   useIconContext: () => useIconContext,
   useOutsideClick: () => useOutsideClick,
   useParameterShell: () => useParameterShell,
+  usePopoverComponentContext: () => usePopoverComponentContext,
   useShortcut: () => useShortcut,
   utilityColors: () => functionalColors,
   warningIcon: () => warningIcon,
@@ -1616,7 +1617,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "link",
       {
-        href: "https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Quantico:wght@700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap",
+        href: "https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap",
         rel: "stylesheet"
       }
     ),
@@ -1760,7 +1761,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* font family */
           --ff-base: 'DM Sans', sans-serif;
           --ff-heading: 'Quantico', sans-serif;
-          --ff-mono: 'Space Mono', monospace;
+          --ff-mono: 'DM Mono', monospace;
 
           /* max text width */
           --prose: 65ch;
@@ -1786,6 +1787,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --rounded-sm: 0.125rem;   /* 2px */
           --rounded-base: 0.25rem;  /* 4px */
           --rounded-md: 0.375rem;   /* 6px */
+          --rounded-lg: 0.5rem;   /* 8px */
 
           /* anything below here should be removed as its not in our style guide */
           --rounded-xl: 0.75rem;
@@ -13887,15 +13889,18 @@ init_emotion_jsx_shim();
 var import_react32 = require("@emotion/react");
 var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
 var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
-var buttonStyle = import_react32.css`
+var buttonStyle = (bgColor) => import_react32.css`
   border: 0;
-  background-color: white;
+  background-color: ${bgColor};
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
+  transition: background-color var(--duration-fast) var(--timing-ease-out),
+    outline var(--duration-fast) var(--timing-ease-out);
+  outline: 1px solid transparent;
 
   &:hover {
-    outline: 1px solid var(--gray-300);
+    outline-color: var(--gray-300);
     background-color: var(--gray-100);
   }
 
@@ -13903,8 +13908,12 @@ var buttonStyle = import_react32.css`
     color: var(--gray-400);
   }
 `;
-function DropdownStyleMenuTrigger({ children, ...buttonProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...buttonProps, css: buttonStyle, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
+function DropdownStyleMenuTrigger({
+  bgColor = "var(--white)",
+  children,
+  ...buttonProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children }),
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_CgChevronDown2.CgChevronDown, { size: "1rem" })
   ] }) });
@@ -14138,19 +14147,14 @@ var Menu = React7.forwardRef(function Menu2({
         "data-testid": testId != null ? testId : "more-menu",
         hideOnHoverOutside: (event) => {
           var _a;
-          if (!menu.parent)
-            return false;
+          if (!menu.parent) return false;
           const { contentElement, anchorElement } = menu.getState();
           const [target] = event.composedPath();
-          if (!target)
-            return false;
+          if (!target) return false;
           const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
-          if (anchorElement == null ? void 0 : anchorElement.contains(target))
-            return false;
-          if (contentElement == null ? void 0 : contentElement.contains(target))
-            return false;
-          if (activeElement && target.contains(activeElement))
-            return false;
+          if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
+          if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
+          if (activeElement && target.contains(activeElement)) return false;
           return true;
         },
         children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
@@ -14997,8 +15001,7 @@ var InputInlineSelect = ({
             "aria-expanded": menuVisible,
             css: inlineSelectBtn,
             onClick: () => {
-              if (!disabled2)
-                setMenuVisible((prev) => !prev);
+              if (!disabled2) setMenuVisible((prev) => !prev);
             },
             disabled: disabled2,
             ...props,
@@ -15860,6 +15863,7 @@ var container = import_react59.css`
   --calendar-cell-size: 1.8rem;
   width: fit-content;
   max-width: 100%;
+  margin: 0 auto;
 `;
 var header = import_react59.css`
   display: flex;
@@ -16631,6 +16635,7 @@ var ChipMultiline = import_react69.css`
   padding-inline: var(--spacing-sm);
 `;
 var ChipThemeAccentLight = import_react69.css`
+  --outline-color: var(--accent-light);
   background: var(--accent-light);
   color: var(--typography-base);
 
@@ -16656,6 +16661,7 @@ var ChipThemeAccentLight = import_react69.css`
   }
 `;
 var ChipThemeAccentDark = import_react69.css`
+  --outline-color: var(--accent-dark);
   background: var(--accent-dark);
   color: var(--white);
 
@@ -16677,6 +16683,7 @@ var ChipThemeAccentDark = import_react69.css`
   }
 `;
 var ChipAltThemeAccentLight = import_react69.css`
+  --outline-color: var(--accent-alt-light);
   background: var(--accent-alt-light);
   color: var(--typography-base);
 
@@ -16702,6 +16709,7 @@ var ChipAltThemeAccentLight = import_react69.css`
   }
 `;
 var ChipAltThemeAccentDark = import_react69.css`
+  --outline-color: var(--accent-alt-dark);
   background: var(--accent-alt-dark);
   color: var(--white);
 
@@ -16723,6 +16731,7 @@ var ChipAltThemeAccentDark = import_react69.css`
   }
 `;
 var ChipThemeNeutralLight = import_react69.css`
+  --outline-color: var(--gray-300);
   background: var(--gray-100);
   color: var(--typography-base);
   :where([role='button']) {
@@ -16733,6 +16742,7 @@ var ChipThemeNeutralLight = import_react69.css`
   }
 `;
 var ChipThemeNeutralDark = import_react69.css`
+  --outline-color: var(--gray-700);
   background: var(--gray-700);
   color: var(--white);
   :where([role='button']) {
@@ -16752,6 +16762,15 @@ var ChipActionButton = import_react69.css`
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
   padding: 0;
 `;
+var ChipOutlined = import_react69.css`
+  background: var(--white);
+  color: var(--typography-light);
+  box-shadow: inset 0 0 0 1px var(--outline-color);
+
+  > [role='separator'] {
+    border-color: var(--outline-color);
+  }
+`;
 
 // src/components/Chip/Chip.tsx
 var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
@@ -16768,6 +16787,7 @@ var Chip = ({
   text,
   size = "sm",
   theme = "accent-light",
+  variant = "solid",
   chipAction,
   as = "span",
   ...props
@@ -16778,14 +16798,26 @@ var Chip = ({
     md: ChipMedium
   };
   const ElementType = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(ElementType, { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "separator", css: ChipSeparator })
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ChipText, children: text }),
-    chipAction
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    ElementType,
+    {
+      css: [
+        ChipContainer,
+        chipSize[size],
+        chipTheme[theme],
+        variant === "outlined" ? ChipOutlined : void 0
+      ],
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { role: "separator", css: ChipSeparator })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ChipText, children: text }),
+        chipAction
+      ]
+    }
+  );
 };
 var DismissibleChipAction = ({ onDismiss, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -17065,12 +17097,21 @@ var trigger = import_react74.css`
 var popover = import_react74.css`
   padding: var(--spacing-md);
   max-width: none;
-  gap: var(--spacing-md);
-  grid-template-columns: 0.8fr 1fr;
-  grid-template-rows: 1fr 1fr;
+  container-type: inline-size;
+  width: 100%;
+`;
+var popoverInnerContent = import_react74.css`
+  display: grid;
+  gap: var(--spacing-base);
 
-  [data-variant='date'] & {
-    grid-template-rows: 1fr;
+  ${cq("360px")} {
+    grid-template-columns: 0.8fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: var(--spacing-md);
+
+    [data-variant='date'] & {
+      grid-template-rows: 1fr;
+    }
   }
 `;
 var calendarSection = import_react74.css`
@@ -17089,6 +17130,15 @@ var timeSection = import_react74.css`
 var tzSection = import_react74.css`
   align-self: stretch;
 `;
+var datePart = import_react74.css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+var datePartButton = import_react74.css`
+  // this allows the button to be as wide as the text
+  min-width: 0;
+`;
 
 // src/components/DateTimePicker/DateTimePickerSummary.tsx
 init_emotion_jsx_shim();
@@ -17127,10 +17177,10 @@ function DateTimePickerSummary({
       }
     }
   }
-  const datePart = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
+  const datePart2 = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
   const timePart = (value == null ? void 0 : value.datetime) ? timeFormat.format(new Date(value.datetime)) : null;
-  return datePart ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("em", { css: inputLabelFocal, children: datePart }),
+  return datePart2 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { css: datePart, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("em", { css: inputLabelFocal, children: datePart2 }),
     !!timePart && `, ${timePart}`,
     !!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: placeholder });
@@ -17310,7 +17360,7 @@ var DateTimePicker = ({
               import_Popover.PopoverDisclosure,
               {
                 ...popover2,
-                css: inputLabel,
+                css: datePartButton,
                 as: Button,
                 buttonType: "ghostUnimportant",
                 disabled: disabled2,
@@ -17333,36 +17383,48 @@ var DateTimePicker = ({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_Popover.Popover, { ...popover2, css: [Popover, popover], "aria-label": "Pick a date", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: calendarSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-          Calendar,
-          {
-            value: draftDate == null ? void 0 : draftDate.toString(),
-            minValue: parsedMinVisible,
-            maxValue: parseMaxVisible,
-            timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
-            onChange: handleDateChange,
-            "data-testid": `${testId}-calendar`
-          }
-        ) }),
-        variant !== "date" /* Date */ && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: timeSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-          InputTime,
-          {
-            label: "Time",
-            value: draftTime == null ? void 0 : draftTime.toString(),
-            belowInputSlot: belowTimeInputSlot,
-            onChange: handleTimeChange
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: tzSection, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label, { css: labelText, children: "Timezone" }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            InputComboBox,
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: popoverInnerContent, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: calendarSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            Calendar,
             {
-              value: draftTimeZone,
-              options: TIMEZONE_OPTIONS,
-              onChange: handleTimezoneChange
+              value: draftDate == null ? void 0 : draftDate.toString(),
+              minValue: parsedMinVisible,
+              maxValue: parseMaxVisible,
+              timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
+              onChange: handleDateChange,
+              "data-testid": `${testId}-calendar`
             }
-          )
+          ) }),
+          variant !== "date" /* Date */ && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: timeSection, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            InputTime,
+            {
+              label: "Time",
+              value: draftTime == null ? void 0 : draftTime.toString(),
+              belowInputSlot: belowTimeInputSlot,
+              onChange: handleTimeChange
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: tzSection, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Label, { css: labelText, children: "Timezone" }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              InputComboBox,
+              {
+                value: draftTimeZone,
+                options: TIMEZONE_OPTIONS,
+                onChange: handleTimezoneChange,
+                menuPlacement: "auto",
+                styles: {
+                  menu(base) {
+                    return {
+                      ...base,
+                      width: "fit-content",
+                      right: 0
+                    };
+                  }
+                }
+              }
+            )
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(HorizontalRhythm, { gap: "0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
@@ -19620,6 +19682,10 @@ var Popover3 = ({
     /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_react108.Popover, { unmountOnHide: true, css: Popover, ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
+var usePopoverComponentContext = () => {
+  const contextValue = (0, import_react108.usePopoverContext)();
+  return contextValue;
+};
 
 // src/components/MediaCard/MediaCard.styles.ts
 init_emotion_jsx_shim();
@@ -21530,13 +21596,13 @@ CustomCodeNode.importDOM = function() {
 // src/components/ParameterInputs/rich-text/DisableStylesPlugin.ts
 init_emotion_jsx_shim();
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var import_utils2 = require("@lexical/utils");
+var import_utils3 = require("@lexical/utils");
 var import_lexical = require("lexical");
 var import_react135 = require("react");
 function DisableStylesPlugin() {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
   (0, import_react135.useEffect)(() => {
-    return (0, import_utils2.mergeRegister)(
+    return (0, import_utils3.mergeRegister)(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(import_lexical.ParagraphNode, (node) => {
         if (node.getFormatType() !== "") {
@@ -21733,7 +21799,7 @@ init_emotion_jsx_shim();
 var import_react136 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
-var import_utils3 = require("@lexical/utils");
+var import_utils4 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical3 = require("lexical");
 var import_react137 = require("react");
@@ -21754,8 +21820,7 @@ var getElementNodesInSelection = (selection) => {
 };
 var getAncestor = (node, predicate) => {
   let parent = node;
-  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent))
-    ;
+  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent)) ;
   return parent;
 };
 var getSelectedNode = (selection) => {
@@ -21798,7 +21863,7 @@ var guessLinkTypeFromPath = (path) => {
 };
 function convertAnchorElement(domNode) {
   let node = null;
-  if (!(0, import_utils3.isHTMLAnchorElement)(domNode)) {
+  if (!(0, import_utils4.isHTMLAnchorElement)(domNode)) {
     return { node };
   }
   const textContent = domNode.textContent;
@@ -21907,7 +21972,7 @@ var LinkNode = class _LinkNode extends import_lexical3.ElementNode {
         element.setAttribute("href", `mailto:${this.__link.path}`);
       }
     }
-    (0, import_utils3.addClassNamesToElement)(element, config.theme.link);
+    (0, import_utils4.addClassNamesToElement)(element, config.theme.link);
     return element;
   }
   updateDOM(prevNode, a) {
@@ -22094,7 +22159,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
-    return (0, import_utils3.mergeRegister)(
+    return (0, import_utils4.mergeRegister)(
       editor.registerCommand(
         UPSERT_LINK_NODE_COMMAND,
         (payload) => {
@@ -22321,7 +22386,7 @@ var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
 var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
-var import_utils6 = require("@lexical/utils");
+var import_utils7 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
 var import_react140 = require("react");
 var import_jsx_runtime122 = require("@emotion/react/jsx-runtime");
@@ -22440,7 +22505,7 @@ var RichTextToolbar = ({ config, customControls }) => {
     }
     setActiveFormats(newActiveFormats);
     const anchorNode = selection.anchor.getNode();
-    let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils6.$findMatchingParent)(anchorNode, (e) => {
+    let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils7.$findMatchingParent)(anchorNode, (e) => {
       const parent = e.getParent();
       return parent !== null && (0, import_lexical5.$isRootOrShadowRoot)(parent);
     });
@@ -22451,7 +22516,7 @@ var RichTextToolbar = ({ config, customControls }) => {
     const elementDOM = editor.getElementByKey(elementKey);
     if (elementDOM !== null) {
       if ((0, import_list2.$isListNode)(element)) {
-        const parentList = (0, import_utils6.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
+        const parentList = (0, import_utils7.$getNearestNodeOfType)(anchorNode, import_list2.ListNode);
         const type = parentList ? parentList.getListType() : element.getListType();
         setActiveElement(type === "bullet" ? "unorderedList" : "orderedList");
       } else {
@@ -23615,7 +23680,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();
@@ -23629,7 +23694,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);
@@ -23637,15 +23702,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;
   }
 
@@ -23675,12 +23741,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);
@@ -23689,33 +23755,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
     ] });
   }
@@ -23723,12 +23796,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%;
@@ -23748,14 +23821,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);
@@ -23763,37 +23836,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 });
   }
@@ -23801,13 +23874,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;
@@ -23824,7 +23897,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);
@@ -23833,7 +23906,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>");
   }
@@ -23847,13 +23920,12 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = (0, import_react158.useMemo)(() => {
-    if (selectedId)
-      return selectedId;
+  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);
@@ -23864,28 +23936,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
@@ -23893,8 +23965,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);
@@ -23911,33 +23983,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 */
@@ -23950,22 +24022,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);
   }
@@ -24259,6 +24331,7 @@ var StatusBullet = ({
   useIconContext,
   useOutsideClick,
   useParameterShell,
+  usePopoverComponentContext,
   useShortcut,
   utilityColors,
   warningIcon,