@wistia/ui 0.3.1 → 0.4.0-beta.030e03ae.416a771

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.3.1
+ * @license @wistia/ui v0.4.0-beta.030e03ae.416a771
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -43,6 +43,8 @@ __export(index_exports, {
   Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
+  Breadcrumb: () => Breadcrumb,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox,
@@ -927,7 +929,7 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-icon: var(--wui-gray-11);
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-text: var(--wui-gray-12);
-  --wui-color-text-high-contrast: var(--wui-gray-12);
+  --wui-color-text-button: var(--wui-gray-12);
   --wui-color-text-link: var(--wui-blue-9);
   --wui-color-text-on-fill: var(--wui-gray-contrast);
   --wui-color-text-secondary: var(--wui-gray-11);
@@ -955,7 +957,7 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-icon-error: var(--wui-error-11);
   --wui-color-icon-on-fill-error: var(--wui-error-contrast);
   --wui-color-text-error: var(--wui-error-11);
-  --wui-color-text-high-contrast-error: var(--wui-error-12);
+  --wui-color-text-button-error: var(--wui-error-11);
   --wui-color-text-link-error: var(--wui-error-11);
   --wui-color-text-on-fill-error: var(--wui-error-contrast);
   --wui-color-text-secondary-error: var(--wui-error-11);
@@ -980,8 +982,8 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-info: var(--wui-blue-11);
   --wui-color-icon-info: var(--wui-blue-11);
   --wui-color-icon-on-fill-info: var(--wui-blue-contrast);
-  --wui-color-text-high-contrast-info: var(--wui-blue-12);
-  --wui-color-text-info: var(--wui-blue-11);
+  --wui-color-text-info: var(--wui-blue-12);
+  --wui-color-text-button-info: var(--wui-blue-11);
   --wui-color-text-link-info: var(--wui-blue-9);
   --wui-color-text-on-fill-info: var(--wui-blue-contrast);
   --wui-color-text-secondary-info: var(--wui-blue-11);
@@ -1006,11 +1008,11 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-success: var(--wui-success-11);
   --wui-color-icon-on-fill-success: var(--wui-success-contrast);
   --wui-color-icon-success: var(--wui-success-11);
-  --wui-color-text-high-contrast-success: var(--wui-success-12);
   --wui-color-text-link-success: var(--wui-success-9);
   --wui-color-text-on-fill-success: var(--wui-success-contrast);
   --wui-color-text-secondary-success: var(--wui-success-11);
-  --wui-color-text-success: var(--wui-success-11);
+  --wui-color-text-success: var(--wui-success-12);
+  --wui-color-text-button-success: var(--wui-success-11);
   --wui-color-focus-ring-success: var(--wui-success-9);
 
   /* Warning */
@@ -1032,11 +1034,11 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-warning: var(--wui-warning-11);
   --wui-color-icon-on-fill-warning: var(--wui-warning-2);
   --wui-color-icon-warning: var(--wui-warning-11);
-  --wui-color-text-high-contrast-warning: var(--wui-warning-12);
   --wui-color-text-link-warning: var(--wui-warning-11);
   --wui-color-text-on-fill-warning: var(--wui-warning-contrast);
   --wui-color-text-secondary-warning: var(--wui-warning-11);
-  --wui-color-text-warning: var(--wui-warning-11);
+  --wui-color-text-button-warning: var(--wui-warning-11);
+  --wui-color-text-warning: var(--wui-warning-12);
   --wui-color-focus-ring-warning: var(--wui-warning-9);
 
   /* --- Accent --- */
@@ -1060,8 +1062,8 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-blue: var(--wui-blue-11);
   --wui-color-icon-blue: var(--wui-blue-11);
   --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);
-  --wui-color-text-blue: var(--wui-blue-11);
-  --wui-color-text-high-contrast-blue: var(--wui-blue-12);
+  --wui-color-text-blue: var(--wui-blue-12);
+  --wui-color-text-button-blue: var(--wui-blue-11);
   --wui-color-text-link-blue: var(--wui-blue-9);
   --wui-color-text-on-fill-blue: var(--wui-blue-2);
   --wui-color-text-secondary-blue: var(--wui-blue-5);
@@ -1086,8 +1088,8 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-green: var(--wui-green-11);
   --wui-color-icon-green: var(--wui-green-11);
   --wui-color-icon-on-fill-green: var(--wui-green-contrast);
-  --wui-color-text-green: var(--wui-green-11);
-  --wui-color-text-high-contrast-green: var(--wui-green-12);
+  --wui-color-text-green: var(--wui-green-12);
+  --wui-color-text-button-green: var(--wui-green-11);
   --wui-color-text-link-green: var(--wui-green-11);
   --wui-color-text-on-fill-green: var(--wui-green-contrast);
   --wui-color-text-secondary-green: var(--wui-green-10);
@@ -1112,10 +1114,10 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-orange: var(--wui-orange-11);
   --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);
   --wui-color-icon-orange: var(--wui-orange-11);
-  --wui-color-text-high-contrast-orange: var(--wui-orange-12);
   --wui-color-text-link-orange: var(--wui-orange-11);
   --wui-color-text-on-fill-orange: var(--wui-orange-contrast);
-  --wui-color-text-orange: var(--wui-orange-11);
+  --wui-color-text-orange: var(--wui-orange-12);
+  --wui-color-text-button-orange: var(--wui-orange-11);
   --wui-color-text-secondary-orange: var(--wui-orange-10);
   --wui-color-focus-ring-orange: var(--wui-orange-9);
 
@@ -1138,10 +1140,10 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-pink: var(--wui-pink-11);
   --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);
   --wui-color-icon-pink: var(--wui-pink-11);
-  --wui-color-text-high-contrast-pink: var(--wui-pink-12);
   --wui-color-text-link-pink: var(--wui-pink-11);
   --wui-color-text-on-fill-pink: var(--wui-pink-contrast);
-  --wui-color-text-pink: var(--wui-pink-11);
+  --wui-color-text-pink: var(--wui-pink-12);
+  --wui-color-text-button-pink: var(--wui-pink-11);
   --wui-color-text-secondary-pink: var(--wui-pink-10);
   --wui-color-focus-ring-pink: var(--wui-pink-9);
 
@@ -1164,10 +1166,10 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-purple: var(--wui-purple-11);
   --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);
   --wui-color-icon-purple: var(--wui-purple-11);
-  --wui-color-text-high-contrast-purple: var(--wui-purple-12);
   --wui-color-text-link-purple: var(--wui-purple-11);
   --wui-color-text-on-fill-purple: var(--wui-purple-contrast);
-  --wui-color-text-purple: var(--wui-purple-11);
+  --wui-color-text-button-purple: var(--wui-purple-11);
+  --wui-color-text-purple: var(--wui-purple-12);
   --wui-color-text-secondary-purple: var(--wui-purple-11);
   --wui-color-focus-ring-purple: var(--wui-purple-9);
 
@@ -1190,11 +1192,11 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);
   --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);
   --wui-color-icon-yellow: var(--wui-yellow-11);
-  --wui-color-text-high-contrast-yellow: var(--wui-yellow-12);
   --wui-color-text-link-yellow: var(--wui-yellow-11);
   --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);
   --wui-color-text-secondary-yellow: var(--wui-yellow-10);
   --wui-color-text-yellow: var(--wui-yellow-11);
+  --wui-color-text-button-yellow: var(--wui-yellow-12);
   --wui-color-focus-ring-yellow: var(--wui-yellow-9);
 
   /* --- Misc --- */
@@ -1696,10 +1698,10 @@ var colorSchemeSchema = [
   { token: "bg-fill", step: "9" },
   { token: "bg-fill-hover", step: "10" },
   { token: "bg-fill-active", step: "11" },
-  { token: "text", step: "11" },
-  { token: "text-high-contrast", step: "12" },
+  { token: "text", step: "12" },
   { token: "text-link", step: "9" },
   { token: "text-secondary", step: "11" },
+  { token: "text-button", step: "11" },
   { token: "text-on-fill", step: "contrast" },
   { token: "border", step: "6" },
   { token: "border-hover", step: "8" },
@@ -1723,7 +1725,7 @@ var defaultScheme = import_styled_components12.css`
   --wui-color-bg-fill-hover: var(--wui-blue-10);
   --wui-color-bg-fill-active: var(--wui-blue-11);
   --wui-color-text: var(--wui-gray-12);
-  --wui-color-text-high-contrast: var(--wui-gray-12);
+  --wui-color-text-button: var(--wui-gray-12);
   --wui-color-text-link: var(--wui-blue-9);
   --wui-color-text-secondary: var(--wui-gray-11);
   --wui-color-text-on-fill: var(--wui-gray-contrast);
@@ -1756,11 +1758,11 @@ var navScheme = import_styled_components12.css`
   --wui-color-border-secondary-active: var(--wui-blue-12);
   --wui-color-icon-on-fill: var(--wui-blue-9);
   --wui-color-icon: var(--wui-blue-4);
-  --wui-color-text-high-contrast: var(--wui-blue-1);
   --wui-color-text-link: var(--wui-blue-4);
   --wui-color-text-on-fill: var(--wui-blue-9);
   --wui-color-text-secondary: var(--wui-blue-4);
   --wui-color-text: var(--wui-blue-1);
+  --wui-color-text-button: var(--wui-blue-1);
   --wui-color-focus-ring: var(--wui-blue-1);
 
   /* Nav - Disabled */
@@ -1831,7 +1833,7 @@ var StyledToast = import_styled_components13.default.div`
   border-radius: var(--wui-border-radius-01);
   background-color: var(--wui-color-bg-surface);
   border: 1px solid var(--wui-color-border);
-  color: var(--wui-color-text-high-contrast);
+  color: var(--wui-color-text);
   padding-top: var(--wui-space-02);
   padding-right: 0; /* padding here is on the left/right slots */
   padding-bottom: var(--wui-space-02);
@@ -2020,7 +2022,7 @@ var ghostButtonVariant = import_styled_components15.css`
   --button-color-bg: transparent;
   --button-color-bg-hover: var(--wui-color-bg-surface-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-active);
-  --button-color-text: var(--wui-color-text);
+  --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
 var outlineButtonVariant = import_styled_components15.css`
@@ -2033,7 +2035,7 @@ var softButtonVariant = import_styled_components15.css`
   --button-color-bg: var(--wui-color-bg-surface-secondary);
   --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
-  --button-color-text: var(--wui-color-text);
+  --button-color-text: var(--wui-color-text-button);
   --button-color-icon: var(--wui-color-icon);
 `;
 var solidButtonVariant = import_styled_components15.css`
@@ -5692,8 +5694,7 @@ var StyledLabel = import_styled_components19.default.span`
   font-size: var(--wui-typography-heading-4-size);
   font-weight: var(--wui-typography-heading-4-weight);
   line-height: var(--wui-typography-heading-4-line-height);
-  color: var(--wui-color-text-high-contrast);
-  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-high-contrast)"};
+  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text)"};
   grid-column: 1 / -1;
   grid-row: 2;
   text-align: left;
@@ -5963,7 +5964,6 @@ var import_styled_components23 = __toESM(require("styled-components"));
 var import_type_guards14 = require("@wistia/type-guards");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
-var propsForFlexChildren = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
 var getGapStyle = (gap) => {
   if ((0, import_type_guards14.isNotNil)(gap)) {
     if ((0, import_type_guards14.isRecord)(gap)) {
@@ -6042,35 +6042,39 @@ var wrapChildren = (children) => {
 var Box = ({
   alignContent = "stretch",
   alignItems = "flex-start",
+  alignSelf,
+  basis,
   children,
   direction = "row",
-  hasBoxParent = false,
   fill = false,
   fillViewport = false,
   gap,
+  grow,
+  hasBoxParent = false,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
   inline = false,
   justifyContent = "flex-start",
+  order,
+  shrink,
   wrapItems = false,
   ...otherProps
 }) => {
-  if (isDev && !hasBoxParent) {
-    Object.keys(otherProps).forEach((prop) => {
-      if (propsForFlexChildren.has(prop)) {
-        console.warn(`${prop} only has an effect on <Box> instances that are children of a <Box>`);
-      }
-    });
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
     BoxComponent,
     {
       $alignContent: alignContent,
       $alignItems: alignItems,
+      $alignSelf: alignSelf,
+      $basis: basis,
       $fillBox: fill,
       $fillViewport: fillViewport,
       $flexDirection: direction,
       $gap: gap,
+      $grow: grow,
       $inline: inline,
       $justifyContent: justifyContent,
+      $order: order,
+      $shrink: shrink,
       $wrapItems: wrapItems,
       as: "div",
       ...otherProps,
@@ -6833,31 +6837,29 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components32.css`
-  --text-color: var(--wui-color-text-high-contrast);
-`;
-var vibrantProminenceStyle = import_styled_components32.css`
-  --text-color: var(--wui-color-text);
-`;
-var secondaryProminenceStyle = import_styled_components32.css`
-  --text-color: var(--wui-color-text-secondary);
-`;
-var prominenceMap = {
-  highContrast: highContrastProminenceStyle,
-  vibrant: vibrantProminenceStyle,
-  secondary: secondaryProminenceStyle
-};
 var StyledText = import_styled_components32.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --text-color: ${({ $prominence, $disabled }) => {
+  if ($disabled) {
+    return "var(--wui-color-text-disabled)";
+  }
+  if ($prominence === "secondary") {
+    return "var(--wui-color-text-secondary)";
+  }
+  if ($prominence === "button") {
+    return "var(--wui-color-text-button)";
+  }
+  return "var(--wui-color-text)";
+}};
+
+  color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
-  color: var(--text-color);
   font-style: normal;
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
-  ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
   ${({ $inline }) => $inline && import_styled_components32.css`
       display: inline-block;
@@ -6884,7 +6886,7 @@ var TextComponent = (0, import_react20.forwardRef)(
     ellipsis = false,
     inline = false,
     preventUserSelect = false,
-    prominence = "highContrast",
+    prominence = "primary",
     variant = "body2",
     renderAs,
     ...otherProps
@@ -6971,7 +6973,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 var import_jsx_runtime180 = require("react/jsx-runtime");
 var StyledFormField = import_styled_components34.default.div`
   --form-field-spacing: var(--wui-space-01);
-  --form-field-error-color: var(--wui-color-text-error);
+  --form-field-error-color: var(--wui-color-text-secondary-error);
 
   display: flex;
   flex-direction: column;
@@ -7002,6 +7004,7 @@ var ErrorMessages = ({ errors, id }) => {
     {
       colorScheme: "error",
       id,
+      prominence: "secondary",
       variant: "label4",
       children: errors
     },
@@ -7464,7 +7467,7 @@ var StyledButton3 = (0, import_styled_components39.default)(Button)`
   padding: var(--menu-item-padding);
   border-radius: var(--wui-border-radius-01);
   text-align: left;
-  color: var(--wui-color-text);
+  color: var(--wui-color-text-button);
   font-size: var(--menu-label-font-size);
   font-weight: var(--menu-label-font-weight);
   line-height: var(--menu-label-line-height);
@@ -7480,7 +7483,7 @@ var StyledButton3 = (0, import_styled_components39.default)(Button)`
   }
 
   &[aria-disabled='true'] {
-    --wui-color-text: var(--wui-color-text-disabled);
+    --wui-color-text-button: var(--wui-color-text-disabled);
     --wui-color-text-secondary: var(--wui-color-text-disabled);
     --wui-color-icon: var(--wui-color-icon-disabled);
 
@@ -8226,7 +8229,7 @@ var TagLabel = import_styled_components49.default.a`
   line-height: var(--wui-typography-label-4-line-height);
   border-radius: var(--wui-border-radius-01);
   align-items: center;
-  color: var(--wui-color-text-high-contrast);
+  color: var(--wui-color-text);
   text-decoration: none;
   padding: var(--wui-space-01);
 
@@ -8564,12 +8567,61 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var StyledBreadcrumbs = import_styled_components52.default.nav`
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+
+  > svg:last-of-type {
+    display: none;
+  }
+`;
+var Breadcrumbs = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+    StyledBreadcrumbs,
+    {
+      "aria-label": "Breadcrumbs",
+      ...props,
+      children
+    }
+  );
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/Breadcrumb.tsx
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var Breadcrumb = ({ icon, href, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(import_jsx_runtime204.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+      Button,
+      {
+        href,
+        leftIcon: icon,
+        variant: "ghost",
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+      Icon,
+      {
+        size: "sm",
+        type: "caret-right"
+      }
+    )
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
   Avatar,
   Badge,
   Box,
+  Breadcrumb,
+  Breadcrumbs,
   Button,
   ButtonGroup,
   Checkbox,