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

package/dist/index.cjs

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