@wistia/ui 0.14.1-beta.5005d2fc.7ab4439 → 0.14.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.1-beta.5005d2fc.7ab4439
+ * @license @wistia/ui v0.14.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10174,24 +10174,15 @@ var useColorPickerState = () => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 var import_jsx_runtime226 = require("react/jsx-runtime");
-var Container = import_styled_components47.default.div`
-  display: grid;
-  gap: var(--wui-space-01);
-  grid-template-columns: minmax(0, 1fr);
-  padding: var(--wui-space-02);
-`;
-var LabelContainer = import_styled_components47.default.div`
-  padding-top: var(--wui-space-01);
-`;
-var ItemsContainer = (0, import_styled_components47.default)(import_react_radio_group.Root)`
+var Container = (0, import_styled_components47.default)(import_react_radio_group.Root)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: start;
-  padding: var(--wui-space-01) 6px;
+  padding: var(--wui-space-02) 14px;
   gap: var(--wui-space-02);
 `;
-var ColorGrid = ({ children, label }) => {
+var ColorGrid = ({ children }) => {
   const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
@@ -10200,25 +10191,14 @@ var ColorGrid = ({ children, label }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(Container, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(LabelContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-      Text,
-      {
-        prominence: "secondary",
-        renderAs: "p",
-        variant: "label4",
-        children: label
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
-      ItemsContainer,
-      {
-        onValueChange,
-        value: valueAsHex,
-        children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+    Container,
+    {
+      onValueChange,
+      value: valueAsHex,
+      children
+    }
+  );
 };
 ColorGrid.displayName = "ColorGrid_UI";
 
@@ -10514,35 +10494,27 @@ ColorList.displayName = "ColorList_UI";
 // src/components/ColorPicker/ColorListGroup.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
 var import_jsx_runtime231 = require("react/jsx-runtime");
-var Container4 = import_styled_components52.default.div`
-  display: grid;
-  gap: var(--wui-space-01);
-  grid-template-columns: minmax(0, 1fr);
-`;
-var ItemsContainer2 = import_styled_components52.default.div`
+var ItemsContainer = import_styled_components52.default.div`
   display: flex;
   flex-direction: column;
 `;
-var LabelContainer2 = import_styled_components52.default.div`
-  padding-top: var(--wui-space-01);
-`;
 var ColorListGroup = ({ label, children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
-    Container4,
+    "div",
     {
       "aria-label": label,
       role: "group",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(LabelContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
           Text,
           {
             prominence: "secondary",
-            renderAs: "p",
+            renderAs: "span",
             variant: "label4",
             children: label
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(ItemsContainer2, { children })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(ItemsContainer, { children })
       ]
     }
   );
@@ -10589,7 +10561,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_jsx_runtime233 = require("react/jsx-runtime");
-var Container5 = (0, import_styled_components53.default)(import_react_toggle_group2.Item)`
+var Container4 = (0, import_styled_components53.default)(import_react_toggle_group2.Item)`
   border: none;
   appearance: none;
   outline: none;
@@ -10617,7 +10589,7 @@ var ColorListOption = ({ value, name }) => {
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
   return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
-    Container5,
+    Container4,
     {
       "aria-label": value,
       "aria-selected": valueAsHex === value,
@@ -10704,11 +10676,11 @@ ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 // src/components/ColorPicker/ColorPickerSection.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
 var import_jsx_runtime236 = require("react/jsx-runtime");
-var Container6 = import_styled_components55.default.div`
+var Container5 = import_styled_components55.default.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container6, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container5, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
 };
 ColorPickerSection.displayName = "ColorPickerSection_UI";
 
@@ -10776,7 +10748,7 @@ ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 // src/components/ColorPicker/ContrastIndicator.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
 var import_jsx_runtime240 = require("react/jsx-runtime");
-var Container7 = import_styled_components57.default.div`
+var Container6 = import_styled_components57.default.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -10810,7 +10782,7 @@ var ContrastIndicator = () => {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Container7, { children: isContrastSufficient ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Container6, { children: isContrastSufficient ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
     Badge,
     {
       colorScheme: "success",
@@ -11484,7 +11456,7 @@ var HSVHueCanvas = ({ hsv }) => {
 // src/components/ColorPicker/HueSlider.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var TWENTY_FOUR = 24;
-var Container8 = import_styled_components62.default.div`
+var Container7 = import_styled_components62.default.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
   height: ${TWENTY_FOUR}px;
@@ -11549,7 +11521,7 @@ var HueSlider = () => {
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Container8, { style: containerStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Container7, { style: containerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
       Root,
       {
@@ -11727,7 +11699,7 @@ var HSVSaturationValueCanvas = ({
 var import_jsx_runtime250 = require("react/jsx-runtime");
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
-var Container9 = import_styled_components64.default.div`
+var Container8 = import_styled_components64.default.div`
   border-radius: var(--wui-border-radius-02);
   box-shadow: 0 0 0 1px var(--wui-color-border);
   overflow: hidden;
@@ -11894,7 +11866,7 @@ var SaturationAndValuePicker = ({
   return (
     // eslint-disable-next-line styled-components-a11y/no-static-element-interactions
     /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
-      Container9,
+      Container8,
       {
         ref: containerRef,
         "data-testid": dataTestId,