@wistia/ui 0.14.13 → 0.14.15-beta.6218615.47e3d33

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.13
+ * @license @wistia/ui v0.14.15-beta.6218615.47e3d33
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -76,6 +76,10 @@ __export(index_exports, {
   DataCardHoverArrow: () => DataCardHoverArrow,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
+  DataList: () => DataList,
+  DataListItem: () => DataListItem,
+  DataListItemLabel: () => DataListItemLabel,
+  DataListItemValue: () => DataListItemValue,
   Divider: () => Divider,
   EditableHeading: () => EditableHeading,
   Ellipsis: () => Ellipsis,
@@ -7294,7 +7298,7 @@ var StyledLink = import_styled_components20.default.a`
   ${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
-  font-family: var(--wui-typography-family-default);
+  font-family: inherit;
   color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
   display: inline-flex;
@@ -9013,7 +9017,6 @@ var StyledFormControlLabelDescription = import_styled_components37.default.div`
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
   line-height: var(--wui-typography-body-4-line-height);
-  margin-top: var(--wui-space-01);
 
   ${({ $disabled }) => $disabled && disabledStyle}
 `;
@@ -9072,12 +9075,13 @@ var StyledFormControlLabel = import_styled_components39.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: var(--wui-space-01);
+  gap: var(--wui-space-02);
   width: 100%;
   color: var(--wui-color-tex);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
-  line-height: var(--wui-typography-label-3-line-height);
+  line-height: var(--wui-typography-body-3-line-height);
+
   justify-content: ${({ $align }) => $align === "left" ? "flex-start" : "space-between"};
 
   ${({ $disabled }) => $disabled && disabledStyle2}
@@ -9381,43 +9385,22 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
-        fill: "currentColor"
+        fill: "var(--wui-checkbox-icon-color)"
       }
     )
   }
 );
 var sizeSmall = import_styled_components43.css`
-  width: 14px;
-  height: 14px;
-  min-width: 14px;
-  min-height: 14px;
-
-  svg {
-    width: 7px;
-    height: 7px;
-  }
+  --wui-checkbox-size: 14px;
+  --wui-checkbox-icon-size: 7px;
 `;
 var sizeMedium = import_styled_components43.css`
-  width: 16px;
-  height: 16px;
-  min-width: 16px;
-  min-height: 16px;
-
-  svg {
-    width: 9px;
-    height: 9px;
-  }
+  --wui-checkbox-size: 16px;
+  --wui-checkbox-icon-size: 9px;
 `;
 var sizeLarge = import_styled_components43.css`
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  min-height: 20px;
-
-  svg {
-    width: 11px;
-    height: 11px;
-  }
+  --wui-checkbox-size: 20px;
+  --wui-checkbox-icon-size: 11px;
 `;
 var getSizeCss = (size) => {
   if (size === "sm") return sizeSmall;
@@ -9425,15 +9408,45 @@ var getSizeCss = (size) => {
   return sizeMedium;
 };
 var StyledCheckboxWrapper = import_styled_components43.default.div`
+  --wui-checkbox-background-color: var(--wui-color-bg-surface);
+  --wui-checkbox-border-color: var(--wui-color-border-secondary);
+  --wui-checkbox-icon-color: transparent;
+  --wui-checkbox-outline-color: transparent;
+
+  &:hover {
+    --wui-checkbox-border-color: var(--wui-color-border-secondary-hover);
+  }
+
+  &:has(input:checked) {
+    --wui-checkbox-background-color: var(--wui-color-bg-fill);
+    --wui-checkbox-border-color: transparent;
+    --wui-checkbox-icon-color: var(--wui-color-bg-fill-white);
+  }
+
+  &:has(input:disabled) {
+    --wui-checkbox-background-color: var(--wui-color-bg-surface-disabled);
+    --wui-checkbox-border-color: var(--wui-color-border-disabled);
+    &:has(input:checked) {
+      --wui-checkbox-icon-color: var(--wui-color-icon-disabled);
+    }
+  }
+
+  &:has(input:focus-visible) {
+    [data-wui-faux-input='true'] {
+      --wui-checkbox-outline-color: var(--wui-color-focus-ring);
+    }
+  }
+
   display: flex;
   margin: 0;
 
+  padding: ${({ $hideLabel }) => $hideLabel ? "0" : "var(--wui-space-02)"};
+
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
 var StyledCheckboxInput = import_styled_components43.default.div`
   ${({ $size }) => getSizeCss($size)}
-  line-height: 0;
   margin: 0;
   border-radius: var(--wui-border-radius-01);
   display: grid;
@@ -9441,31 +9454,26 @@ var StyledCheckboxInput = import_styled_components43.default.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
-  background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
+  border-color: var(--wui-checkbox-border-color);
+  background-color: var(--wui-checkbox-background-color);
+  outline-color: var(--wui-checkbox-outline-color);
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 1px;
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  margin-top: calc(calc(1lh - var(--wui-checkbox-size)) / 2);
+  width: var(--wui-checkbox-size);
+  height: var(--wui-checkbox-size);
+  min-width: var(--wui-checkbox-size);
+  min-height: var(--wui-checkbox-size);
 
-  /* checkmark icon */
   svg {
-    display: none;
-
-    path {
-      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill-white)"};
-    }
+    width: var(--wui-checkbox-icon-size);
+    height: var(--wui-checkbox-icon-size);
   }
 `;
 var StyledHiddenCheckboxInput = import_styled_components43.default.input`
   ${visuallyHiddenStyle}
-
-  /* toggles display of faux-input background-color */
-  &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? void 0 : "var(--wui-color-bg-fill)"};
-    background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
-  }
-
-  /* toggles display of CheckIcon */
-  &:checked + label svg {
-    display: block;
-  }
 `;
 var Checkbox = (0, import_react38.forwardRef)(
   ({
@@ -9491,42 +9499,49 @@ var Checkbox = (0, import_react38.forwardRef)(
     const checkboxName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const isChecked = (0, import_type_guards31.isNotUndefined)(value) && contextValue ? contextValue.includes(value) : checked;
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-        StyledHiddenCheckboxInput,
-        {
-          ...props,
-          ref,
-          checked: isChecked,
-          disabled,
-          id: computedId,
-          name: checkboxName,
-          onChange: handleOnChange,
-          required,
-          type: "checkbox",
-          value
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-        FormControlLabel,
-        {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-            StyledCheckboxInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
+      StyledCheckboxWrapper,
+      {
+        $hideLabel: hideLabel,
+        disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+            StyledHiddenCheckboxInput,
             {
-              $disabled: disabled,
-              $size: size,
-              "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(CheckIcon, {})
+              ...props,
+              ref,
+              checked: isChecked,
+              disabled,
+              id: computedId,
+              name: checkboxName,
+              onChange: handleOnChange,
+              required,
+              type: "checkbox",
+              value
             }
           ),
-          description,
-          disabled,
-          hideLabel,
-          htmlFor: computedId,
-          label
-        }
-      )
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+                StyledCheckboxInput,
+                {
+                  $disabled: disabled,
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(CheckIcon, {})
+                }
+              ),
+              description,
+              disabled,
+              hideLabel,
+              htmlFor: computedId,
+              label
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox_UI";
@@ -14757,8 +14772,6 @@ var import_type_guards52 = require("@wistia/type-guards");
 var import_jsx_runtime285 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components92.default.div`
   --progress-bar-height: 8px;
-  --progress-bar-indicator-color: var(--wui-color-bg-fill);
-  --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
 
   display: flex;
   align-items: center;
@@ -14780,7 +14793,8 @@ var ProgressBarLabel = import_styled_components92.default.div`
   flex-shrink: 0;
 `;
 var StyledProgressIndicator = (0, import_styled_components92.default)(import_react_progress.Indicator)`
-  background-color: var(--progress-bar-indicator-color);
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
+  background-color: var(--wui-color-bg-fill);
   width: 100%;
   height: 100%;
   border-top-right-radius: var(--wui-border-radius-rounded);
@@ -14789,9 +14803,10 @@ var StyledProgressIndicator = (0, import_styled_components92.default)(import_rea
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
 var StyledProgressBar = (0, import_styled_components92.default)(import_react_progress.Root)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
-  background: var(--progress-bar-background-color);
+  background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
   width: 100%;
   height: var(--progress-bar-height);
@@ -14805,6 +14820,7 @@ var ProgressBar = ({
   children,
   labelLeft,
   labelRight,
+  colorScheme = "inherit",
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime285.jsxs)(ProgressBarWrapper, { children: [
@@ -14812,12 +14828,14 @@ var ProgressBar = ({
     /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
       StyledProgressBar,
       {
+        $colorScheme: colorScheme,
         max,
         value: progress,
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime285.jsx)(
           StyledProgressIndicator,
           {
+            $colorScheme: colorScheme,
             $max: max,
             $progress: progress
           }
@@ -17028,6 +17046,87 @@ var ContextMenu = ({
     }
   ) : null;
 };
+
+// src/components/DataList/DataList.tsx
+var import_styled_components121 = __toESM(require("styled-components"));
+var import_jsx_runtime317 = require("react/jsx-runtime");
+var StyledDataList = import_styled_components121.default.dl`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--wui-space-02);
+  row-gap: var(--wui-space-04);
+  align-items: baseline;
+  align-content: start;
+
+  dt {
+    margin: 0;
+    padding: 0;
+    font-weight: var(--wui-datalist-label-prominence);
+    width: var(--wui-datalist-label-max-width, auto);
+  }
+
+  dd {
+    margin: 0;
+    padding: 0;
+    text-align: var(--wui-datalist-value-alignment, start);
+  }
+`;
+var DataList = ({
+  children,
+  valueAlignment = "start",
+  labelMaxWith = "auto",
+  labelProminence = "primary",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+    StyledDataList,
+    {
+      role: "list",
+      style: {
+        "--wui-datalist-label-max-width": labelMaxWith,
+        "--wui-datalist-value-alignment": valueAlignment === "end" ? "right" : "left",
+        "--wui-datalist-label-prominence": labelProminence === "secondary" ? "var(--wui-typography-weight-label)" : "var(--wui-typography-weight-label-bold)"
+      },
+      ...props,
+      children
+    }
+  );
+};
+DataList.displayName = "DataList_UI";
+
+// src/components/DataList/DataListItem.tsx
+var DataListItem = ({ children }) => {
+  return children;
+};
+DataListItem.displayName = "DataListItem_UI";
+
+// src/components/DataList/DataListItemLabel.tsx
+var import_jsx_runtime318 = require("react/jsx-runtime");
+var DataListItemLabel = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+    Text,
+    {
+      variant: "label4",
+      ...props,
+      renderAs: "dt"
+    }
+  );
+};
+DataListItemLabel.displayName = "DataListItemLabel_UI";
+
+// src/components/DataList/DataListItemValue.tsx
+var import_jsx_runtime319 = require("react/jsx-runtime");
+var DataListItemValue = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+    Text,
+    {
+      variant: "body3",
+      ...props,
+      renderAs: "dd"
+    }
+  );
+};
+DataListItemValue.displayName = "DataListItemValue_UI";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -17067,6 +17166,10 @@ var ContextMenu = ({
   DataCardHoverArrow,
   DataCardTrend,
   DataCards,
+  DataList,
+  DataListItem,
+  DataListItemLabel,
+  DataListItemValue,
   Divider,
   EditableHeading,
   Ellipsis,