@wistia/ui 0.15.9-beta.b435f6ed.046d7a7 → 0.15.9-beta.b4bf6192.26e9d46

package/dist/index.d.mts

@@ -1566,8 +1566,16 @@ declare const ValueNameOrHexCode: {
     displayName: string;
 };
 
+type ColorSwatchProps = PropsWithChildren<{
+    derivativeIsSelected?: boolean;
+    diameterPx?: number;
+    isSelected?: boolean;
+    value: string;
+}>;
+
+type ValueSwatchProps = Pick<ColorSwatchProps, 'diameterPx'>;
 declare const ValueSwatch: {
-    (): JSX$1.Element;
+    ({ diameterPx, }: ValueSwatchProps): JSX$1.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1566,8 +1566,16 @@ declare const ValueNameOrHexCode: {
     displayName: string;
 };
 
+type ColorSwatchProps = PropsWithChildren<{
+    derivativeIsSelected?: boolean;
+    diameterPx?: number;
+    isSelected?: boolean;
+    value: string;
+}>;
+
+type ValueSwatchProps = Pick<ColorSwatchProps, 'diameterPx'>;
 declare const ValueSwatch: {
-    (): JSX$1.Element;
+    ({ diameterPx, }: ValueSwatchProps): JSX$1.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.9-beta.b435f6ed.046d7a7
+ * @license @wistia/ui v0.15.9-beta.b4bf6192.26e9d46
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10086,6 +10086,7 @@ var TWO_FIFTY_FIVE = 255;
 var DEFAULT_MIN_CONTRAST = 4.5;
 var DEFAULT_COLOR_FOR_COMPARISON = "#ffffff";
 var DEFAULT_OPACITY_FOR_CONTRAST_CALCULATION = 1;
+var DEFAULT_SWATCH_DIAMETER_PX = 24;
 
 // src/components/ColorPicker/contrast-utils.ts
 var CONTRAST_EPSILON = 4e-3;
@@ -10671,7 +10672,7 @@ var DerivativeHalfCircle = styled33.div`
 `;
 var ColorSwatch = ({
   children,
-  diameterPx = 24,
+  diameterPx = DEFAULT_SWATCH_DIAMETER_PX,
   isSelected = false,
   derivativeIsSelected = false,
   value
@@ -11130,9 +11131,17 @@ import styled41 from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
 import { jsx as jsx240 } from "react/jsx-runtime";
-var ValueSwatch = () => {
+var ValueSwatch = ({
+  diameterPx = DEFAULT_SWATCH_DIAMETER_PX
+}) => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx240(ColorSwatch, { value: valueAsHex });
+  return /* @__PURE__ */ jsx240(
+    ColorSwatch,
+    {
+      diameterPx,
+      value: valueAsHex
+    }
+  );
 };
 ValueSwatch.displayName = "ValueSwatch_UI";
 
@@ -11150,7 +11159,7 @@ var StyledPopoverTrigger = styled41(PopoverTrigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
-  padding: 6px;
+  padding: var(--wui-space-01);
   transition: background-color var(--wui-motion-duration-03) var(--wui-motion-ease);
 
   &:hover {
@@ -11162,7 +11171,7 @@ var DefaultTriggerContentContainer = styled41.div`
   display: flex;
   flex-direction: row;
   gap: var(--wui-space-02);
-  padding-right: var(--wui-space-01);
+  padding-right: var(--wui-space-02);
 `;
 var DefaultTriggerContent = () => {
   return /* @__PURE__ */ jsxs26(DefaultTriggerContentContainer, { children: [