@uniformdev/design-system 20.37.1-alpha.1 → 20.37.1-alpha.11

package/dist/index.js

@@ -1446,6 +1446,7 @@ __export(src_exports, {
   MenuItemIcon: () => MenuItemIcon,
   MenuItemInner: () => MenuItemInner,
   MenuItemSeparator: () => MenuItemSeparator,
+  MenuSelect: () => MenuSelect,
   MenuThreeDots: () => MenuThreeDots,
   Modal: () => Modal,
   ModalDialog: () => ModalDialog,
@@ -1601,6 +1602,7 @@ __export(src_exports, {
   labelText: () => labelText,
   mq: () => mq,
   numberInput: () => numberInput,
+  prefersReducedMotion: () => prefersReducedMotion,
   queryStringIcon: () => queryStringIcon,
   rectangleRoundedIcon: () => rectangleRoundedIcon,
   replaceUnderscoreInString: () => replaceUnderscoreInString,
@@ -1753,11 +1755,12 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --typography-inverted: var(--white);
 
           /* chart colours */
-          --charting-chart-1: #ffa600;
-          --charting-chart-2: #c444b2;
-          --charting-chart-3: #ff5368;
-          --charting-chart-4: #f53d90;
-          --charting-chart-5: #ff7b3d;
+          --charting-chart-1: #0072B2;
+          --charting-chart-2: #D55E00;
+          --charting-chart-3: #009E73;
+          --charting-chart-4: #E41A1C;
+          --charting-chart-5: #F0E442;
+          --charting-chart-6: #56B4E9;
 
           /* utility colours */
           --utility-success: #4ade80;
@@ -2331,6 +2334,7 @@ var useBreakpoint = (0, import_react_use.createBreakpoint)(breakpoints);
 var mq = (size) => `@media (min-width: ${breakpoints[size]}px)`;
 var supports = (cssProp) => `@supports (${cssProp})`;
 var cq = (size) => `@container (min-width: ${size})`;
+var prefersReducedMotion = (cssProp) => `@media (prefers-reduced-motion: ${cssProp})`;
 
 // src/components/Layout/styles/AsideAndSectionLayout.styles.ts
 var AsideAdnSectionLayoutContainer = (withSidebar) => import_react6.css`
@@ -3925,6 +3929,9 @@ var IconColorAccentLight = import_react22.css`
 var IconColorAccentAltDark = import_react22.css`
   color: var(--accent-alt-dark);
 `;
+var IconColorUtilitySuccess = import_react22.css`
+  color: var(--utility-success-icon);
+`;
 
 // src/components/Icons/IconsProvider.tsx
 init_emotion_jsx_shim();
@@ -3969,7 +3976,8 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     currentColor: IconColorCurrent,
     "accent-dark": IconColorAccentDark,
     "accent-light": IconColorAccentLight,
-    "accent-alt-dark": IconColorAccentAltDark
+    "accent-alt-dark": IconColorAccentAltDark,
+    "utility-success": IconColorUtilitySuccess
   };
   if (isIconName && isLoading) {
     return null;
@@ -5492,11 +5500,13 @@ var UniformBadge = ({
       xmlns: "http://www.w3.org/2000/svg",
       "data-testid": "uniform-Badge",
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
+      role: "img",
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "path",
           {
+            role: "presentation",
             d: "M19.3444 4.35168L7 11.484V25.7181L19.3444 18.5858L31.6583 11.484L19.3444 4.35168Z",
             fill: "#84ADFF"
           }
@@ -5504,6 +5514,7 @@ var UniformBadge = ({
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "path",
           {
+            role: "presentation",
             d: "M19.3444 32.8505V18.5858L7 25.7182V39.9523L19.3444 47.0846L31.6583 39.9523V25.7182L19.3444 32.8505Z",
             fill: "#5786FF"
           }
@@ -5511,6 +5522,7 @@ var UniformBadge = ({
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "path",
           {
+            role: "presentation",
             d: "M31.6583 11.484L19.3444 18.5858L31.6583 25.7182V39.9523L44.0027 32.8505V18.5858L31.6583 11.484Z",
             fill: "#EC2924"
           }
@@ -5536,20 +5548,37 @@ var UniformLogo = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
+      role: "img",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "path",
           {
+            role: "presentation",
+            d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z",
+            fill: "#7BB3FF"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "path",
+          {
+            role: "presentation",
             d: "M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",
             fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "path",
           {
+            role: "presentation",
+            d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z",
+            fill: "#E61408"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "path",
+          {
+            role: "presentation",
             d: "M86.45 12.98h-4.076v14.87h4.076V12.98Zm.146-6.843h-4.371v4.076h4.37V6.137Zm5.861 1.993v4.85h-2.736v3.477h2.736V27.85h4.076V16.457h3.27V12.98h-3.27V9.617h3.27v-3.48h-3.896l-3.45 1.992Zm13.503 4.7-3.45 1.993v11.183l3.45 1.992h6.335l3.45-1.992V14.823l-3.45-1.992h-6.335Zm5.71 11.688h-5.087v-8.21h5.087v8.21Zm12.607-10.315-2.119-1.224h-1.954v14.87h4.076V16.457h5.115V12.98h-2.999l-2.119 1.224ZM71.034 12.83l-2.375 1.373-2.379-1.372h-1.6v15.018h4.075V16.31h5.084v11.54h4.076V14.823l-3.45-1.992h-3.431ZM56.145 24.517h-5.087V12.98h-4.073v13.027l3.45 1.992h3.593l2.111-1.22.003.002.003-.003v.003l2.108 1.218h1.965v-15.02h-4.073v11.538Zm93.68-11.687h-2.855l-2.794 1.604-2.767-1.603h-2.854l-2.111 1.218-2.111-1.218h-1.965v15.018h4.076V16.31h4.343v11.54h4.073V16.31h4.343v11.54h4.073V14.823l-3.451-1.992Z",
             fill: "currentColor"
           }
@@ -5567,13 +5596,22 @@ var UniformLogoLarge = ({ ...props }) => {
       viewBox: "0 0 250 64",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("g", { clipPath: "url(#clip0)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M18.3804 0L0 10.6131V31.8393L18.3804 21.2262L36.7654 10.6131L18.3804 0Z", fill: "#7BB3FF" }),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
+              d: "M18.3804 0L0 10.6131V31.8393L18.3804 21.2262L36.7654 10.6131L18.3804 0Z",
+              fill: "#7BB3FF"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "path",
+            {
+              role: "presentation",
               d: "M18.3804 42.4524V21.2262L0 31.8393V53.0655L18.3804 63.6786L36.7654 53.0655V31.8393L18.3804 42.4524Z",
               fill: "#498DFF"
             }
@@ -5581,15 +5619,17 @@ var UniformLogoLarge = ({ ...props }) => {
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M36.7654 10.6132L18.3804 21.2263L36.7654 31.8394V53.0656L55.1458 42.4525V21.2263L36.7654 10.6132Z",
               fill: "#E61408"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M141.257 21.2081H134.598V45.5052H141.257V21.2081Z", fill: "currentColor" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M141.496 10.0277H134.355V16.6874H141.496V10.0277Z", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { role: "presentation", d: "M141.257 21.2081H134.598V45.5052H141.257V21.2081Z", fill: "currentColor" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { role: "presentation", d: "M141.496 10.0277H134.355V16.6874H141.496V10.0277Z", fill: "currentColor" }),
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M151.073 13.2832V21.2082H146.602V26.8907H151.073V45.5053H157.733V26.8907H163.078V21.2082H157.733V15.7147H163.078V10.0277H156.711L151.073 13.2832Z",
               fill: "currentColor"
             }
@@ -5597,6 +5637,7 @@ var UniformLogoLarge = ({ ...props }) => {
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M173.137 20.965L167.5 24.2205V42.4929L173.137 45.7484H183.489L189.127 42.4929V24.2205L183.489 20.965H173.137ZM182.467 40.0613H174.155V26.6475H182.467V40.0613Z",
               fill: "currentColor"
             }
@@ -5604,6 +5645,7 @@ var UniformLogoLarge = ({ ...props }) => {
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M203.067 23.2074L199.605 21.2081H196.412V45.5052H203.072V26.8907H211.429V21.2081H206.53L203.067 23.2074Z",
               fill: "currentColor"
             }
@@ -5611,6 +5653,7 @@ var UniformLogoLarge = ({ ...props }) => {
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M116.069 20.965L112.187 23.2074L108.301 20.965H105.685V45.5052H112.345V26.6475H120.653V45.5052H127.312V24.2205L121.675 20.965H116.069Z",
               fill: "currentColor"
             }
@@ -5618,6 +5661,7 @@ var UniformLogoLarge = ({ ...props }) => {
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M91.7401 40.0614H83.4279V21.2081H76.7728V42.4929L82.4103 45.7484H88.2819L91.7311 43.7537L91.7356 43.7582L91.7401 43.7537V43.7582L95.1847 45.7484H98.3952V21.2081H91.7401V40.0614Z",
               fill: "currentColor"
             }
@@ -5625,12 +5669,13 @@ var UniformLogoLarge = ({ ...props }) => {
           /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "path",
             {
+              role: "presentation",
               d: "M244.813 20.965H240.148L235.582 23.5856L231.061 20.965H226.396L222.947 22.9552L219.498 20.965H216.288V45.5052H222.947V26.6475H230.044V45.5052H236.699V26.6475H243.795V45.5052H250.45V24.2205L244.813 20.965Z",
               fill: "currentColor"
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("clipPath", { id: "clip0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { width: "250", height: "63.6786", fill: "currentColor" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("clipPath", { id: "clip0", "data-testid": "clipPath", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { width: "250", height: "63.6786", fill: "currentColor" }) }) })
       ]
     }
   );
@@ -5647,11 +5692,13 @@ var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
 var import_react31 = require("react");
 var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 var buttonStyle = (bgColor) => import_react30.css`
-  border: 0;
   background-color: ${bgColor};
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
+`;
+var ghostButtonStyle = import_react30.css`
+  border: 0;
   transition:
     background-color var(--duration-fast) var(--timing-ease-out),
     outline var(--duration-fast) var(--timing-ease-out);
@@ -5667,11 +5714,32 @@ var buttonStyle = (bgColor) => import_react30.css`
     color: var(--gray-400);
   }
 `;
+var outlineButtonStyle = import_react30.css`
+  align-items: center;
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-sm);
+  background-color: var(--white);
+  color: var(--typography-light);
+  display: flex;
+  font-size: var(--fs-sm);
+  line-height: 1.5;
+  cursor: pointer;
+  transition: border-color var(--duration-fast) var(--timing-ease-out);
+  padding: var(--spacing-sm);
+  gap: var(--spacing-sm);
+  width: fit-content;
+
+  &:hover,
+  &:focus {
+    border-color: var(--gray-300);
+  }
+`;
 var DropdownStyleMenuTrigger = (0, import_react31.forwardRef)(
-  ({ bgColor = "var(--white)", children, ...buttonProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { ref, ...buttonProps, css: buttonStyle(bgColor), type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
+  ({ bgColor = "var(--white)", variant = "ghost", children, ...buttonProps }, ref) => {
+    const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { ref, ...buttonProps, css: [buttonStyle(bgColor), buttonVariantStyle], type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_CgChevronDown2.CgChevronDown, { size: "1rem" })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_CgChevronDown2.CgChevronDown, { iconColor: "currentColor", size: "1rem" })
     ] }) });
   }
 );
@@ -5916,6 +5984,41 @@ var menuTriggerStyles = import_react35.css`
     outline: 2px solid var(--accent-dark-active);
   }
 `;
+var menuSelectStyles = import_react35.css`
+  align-items: center;
+  color: var(--primary-action-default);
+  display: flex;
+  gap: var(--spacing-xs);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+
+  &:hover,
+  &:focus {
+    outline: none;
+    color: var(--primary-action-hover);
+  }
+
+  &:active {
+    outline: none;
+    color: var(--primary-action-active);
+  }
+`;
+var menuSelectSizeStyles = {
+  xs: import_react35.css`
+    font-size: var(--fs-xs);
+  `,
+  sm: import_react35.css`
+    font-size: var(--fs-sm);
+  `,
+  base: import_react35.css`
+    font-size: var(--fs-base);
+  `,
+  md: import_react35.css`
+    font-size: var(--fs-md);
+  `,
+  lg: import_react35.css`
+    font-size: var(--fs-lg);
+  `
+};
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
@@ -6069,6 +6172,21 @@ var MenuThreeDots = (0, import_react38.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuButton2, { css: menuTriggerStyles, ref, "aria-label": buttonTitle, title: buttonTitle, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon: "more-alt", size: iconSize, iconColor: "currentColor" }) });
   }
 );
+var MenuSelect = (0, import_react38.forwardRef)(
+  ({ children, size = "base", ...props }, ref) => {
+    const iconSize = {
+      xs: "0.85rem",
+      sm: "0.95rem",
+      base: "1rem",
+      md: "1.1rem",
+      lg: "1.25rem"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(MenuButton2, { css: [menuSelectStyles, menuSelectSizeStyles[size]], ref, ...props, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { icon: "chevron-down", size: iconSize[size], iconColor: "currentColor" })
+    ] });
+  }
+);
 
 // src/components/Menu/SearchableMenu.tsx
 init_emotion_jsx_shim();
@@ -6527,7 +6645,7 @@ function inputComboBoxStyles(baseStyles2) {
       var _a;
       return {
         ...base,
-        padding: "12px var(--spacing-base) 12px var(--spacing-sm)",
+        padding: "10px var(--spacing-base) 10px var(--spacing-sm)",
         gap: "2px",
         ...(_a = baseStyles2 == null ? void 0 : baseStyles2.valueContainer) == null ? void 0 : _a.call(baseStyles2, base, sProps)
       };
@@ -6567,6 +6685,9 @@ function inputComboBoxStyles(baseStyles2) {
         minHeight: "48px",
         // matches the min-height of other input fields
         boxShadow: state.isFocused ? "var(--elevation-100)" : "none",
+        ...state.isDisabled ? {
+          background: "var(--gray-50)"
+        } : {},
         "&:hover": {
           boxShadow: "none",
           borderColor: "var(--accent-dark-hover)"
@@ -6626,28 +6747,40 @@ function inputComboBoxStyles(baseStyles2) {
     multiValue: (styles) => {
       return {
         ...styles,
-        background: "var(--gray-100)",
+        background: "transparent",
         borderRadius: "var(--rounded-sm)",
         margin: "0"
       };
     },
-    multiValueLabel: (styles) => {
+    multiValueLabel: (styles, state) => {
+      const isFixed = state.data.isFixed;
       return {
         ...styles,
+        borderRadius: isFixed ? "var(--rounded-full)" : "var(--rounded-full) 0 0 var(--rounded-full)",
         background: "var(--gray-100)",
-        borderRight: "1px solid var(--gray-300)",
+        ...isFixed ? {
+          paddingLeft: "var(--spacing-sm)",
+          paddingRight: "var(--spacing-sm)"
+        } : {
+          paddingLeft: "var(--spacing-sm)"
+        },
         color: "var(--typography-base)"
       };
     },
     multiValueRemove: (styles, state) => {
+      const isFixed = state.data.isFixed;
       return {
         ...styles,
         background: "var(--gray-100)",
+        borderRadius: "0 var(--rounded-full) var(--rounded-full) 0",
         ":hover": {
           color: "var(--white)",
           background: "var(--action-destructive-default)",
           transition: "color var(--duration-fast) var(--timing-ease-out), background-color var(--duration-fast) var(--timing-ease-out)"
         },
+        paddingRight: "var(--spacing-sm)",
+        paddingLeft: "var(--spacing-xs)",
+        ...isFixed && { display: "none" },
         ...state.isDisabled && { display: "none" }
       };
     }
@@ -8701,14 +8834,26 @@ var counterContainer = (bgColor, hasIcon) => import_react69.css`
   background: ${bgColor};
   color: ${bgColor === "var(--accent-dark)" ? "white" : "var(--typography-base)"};
   display: inline-flex;
-  gap: var(--spacing-xs);
-  font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   justify-content: center;
-  padding: 4px;
+  padding: ${hasIcon ? "0 var(--spacing-sm)" : "var(--spacing-sm)"};
   width: ${hasIcon ? "auto" : "var(--spacing-base)"};
-  height: var(--spacing-base);
+  height: ${hasIcon ? "auto" : "var(--spacing-base)"};
 `;
+var counterSize = {
+  sm: import_react69.css`
+    gap: var(--spacing-xs);
+    font-size: var(--fs-xs);
+  `,
+  md: import_react69.css`
+    gap: var(--spacing-xs);
+    font-size: var(--fs-sm);
+  `
+};
+var counterIconSize = {
+  sm: "0.75rem",
+  md: "0.85rem"
+};
 var counterZeroValue = import_react69.css`
   background: var(--gray-800);
   border-radius: var(--rounded-full);
@@ -8719,15 +8864,20 @@ var counterZeroValue = import_react69.css`
 var counterTripleValue = import_react69.css`
   position: relative;
 `;
-var counterIcon = import_react69.css`
-  border-radius: var(--rounded-full);
-  background: var(--white);
-  color: var(--brand-secondary-3);
-  display: block;
-  position: absolute;
-  top: -0.25rem;
-  right: -0.25rem;
-`;
+var counterIcon = {
+  default: import_react69.css`
+    display: block;
+  `,
+  tripleValue: import_react69.css`
+    border-radius: var(--rounded-full);
+    background: var(--white);
+    color: var(--brand-secondary-3);
+    display: block;
+    position: absolute;
+    top: -0.25rem;
+    right: -0.25rem;
+  `
+};
 
 // src/components/Counter/Counter.tsx
 var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
@@ -8736,25 +8886,36 @@ var Counter = ({
   bgColor = "transparent",
   icon,
   iconColor = "auto",
+  size = "sm",
   ...props
 }) => {
+  const sizeStyles = {
+    sm: counterSize.sm,
+    md: counterSize.md
+  };
+  const iconSizeStyles = {
+    sm: counterIconSize.sm,
+    md: counterIconSize.md
+  };
   if (typeof count === "undefined") {
     return null;
   }
   const isTripleDigits = count > 99 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { css: counterTripleValue, title: `${count}`, children: [
     "99",
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.5rem", css: counterIcon.tripleValue })
   ] }) : count;
   const formatCount = count === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: counterZeroValue, title: `${count}` }) : isTripleDigits;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: counterContainer(bgColor, Boolean(icon)), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: [counterContainer(bgColor, Boolean(icon)), sizeStyles[size]], ...props, children: [
     icon ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "span",
       {
+        "data-testid": "icon-container",
         css: [
+          counterIcon.default,
           iconColor ? functionalColors : void 0,
           { color: iconColor ? iconColor === "red" ? "var(--brand-secondary-5)" : iconColor : "inherit" }
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.6rem" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { icon, iconColor: "currentColor", size: iconSizeStyles[size] })
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: formatCount })
@@ -12250,11 +12411,18 @@ var LoadingOverlay = ({
       "aria-busy": isActive && !isPaused,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: loadingOverlayBackground(overlayBackgroundColor) }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { css: loadingOverlayBody, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(LoadingAnimation, { label: "Loading...", isPaused, width: loaderSize }),
-          statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
-        ] }) })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          "div",
+          {
+            "data-testid": "loading-overlay-content",
+            css: { position: "relative", maxWidth: "100%", margin: isTopAligned ? "0" : "auto" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { css: loadingOverlayBody, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(LoadingAnimation, { label: "Loading...", isPaused, width: loaderSize }),
+              statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: loadingOverlayMessage, children: statusMessage }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { css: { width: "100%", marginTop: "var(--spacing-md)" }, children })
+            ] })
+          }
+        )
       ]
     }
   );
@@ -12326,18 +12494,27 @@ var LoadingIcon = ({ height, width, ...props }) => {
       ...props,
       "data-testid": "loading-icon",
       children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
-          "animateTransform",
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("circle", { "data-testid": "loading-icon-circle", strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          "path",
           {
-            attributeName: "transform",
-            type: "rotate",
-            from: "0 18 18",
-            to: "360 18 18",
-            dur: "0.8s",
-            repeatCount: "indefinite"
+            "data-testid": "loading-icon-path",
+            d: "M36 18c0-9.94-8.06-18-18-18",
+            transform: "rotate(166.645 18 18)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              "animateTransform",
+              {
+                attributeName: "transform",
+                type: "rotate",
+                from: "0 18 18",
+                to: "360 18 18",
+                dur: "0.8s",
+                repeatCount: "indefinite",
+                "data-testid": "loading-icon-animateTransform"
+              }
+            )
           }
-        ) })
+        )
       ] }) })
     }
   );
@@ -13064,6 +13241,10 @@ var ObjectListItem = import_react127.css`
   container-type: inline-size;
   grid-template-columns: minmax(0, auto) 1fr auto;
 
+  &[aria-selected='true'] {
+    background: var(--gray-50);
+  }
+
   &:hover,
   &:focus-within,
   &:focus-visible {
@@ -19204,7 +19385,7 @@ var SwitchInputLabel = (size) => import_react179.css`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
-  line-height: 1.25;
+  line-height: ${size === "sm" ? "1.25" : "1.5"};
 
   &:before {
     border-radius: var(--rounded-full);
@@ -19701,6 +19882,7 @@ var StatusBullet = ({
   MenuItemIcon,
   MenuItemInner,
   MenuItemSeparator,
+  MenuSelect,
   MenuThreeDots,
   Modal,
   ModalDialog,
@@ -19856,6 +20038,7 @@ var StatusBullet = ({
   labelText,
   mq,
   numberInput,
+  prefersReducedMotion,
   queryStringIcon,
   rectangleRoundedIcon,
   replaceUnderscoreInString,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.37.1-alpha.1+5ac67f77a7",
+  "version": "20.37.1-alpha.11+f4e46464b5",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -38,8 +38,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.24",
     "@types/react-dom": "18.3.7",
-    "@uniformdev/canvas": "^20.37.1-alpha.1+5ac67f77a7",
-    "@uniformdev/richtext": "^20.37.1-alpha.1+5ac67f77a7",
+    "@uniformdev/canvas": "^20.37.1-alpha.11+f4e46464b5",
+    "@uniformdev/richtext": "^20.37.1-alpha.11+f4e46464b5",
     "@vitest/coverage-v8": "3.2.4",
     "autoprefixer": "10.4.21",
     "hygen": "6.2.11",
@@ -91,5 +91,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ac67f77a77da73d93c76b9ec23d86acbd0a2123"
+  "gitHead": "f4e46464b5578eadab4feec5dcb102446067e053"
 }