@wistia/ui 0.3.2 → 0.4.0-beta.ebd58245.2c65ddd

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.3.2
+ * @license @wistia/ui v0.4.0-beta.ebd58245.2c65ddd
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -841,7 +841,7 @@ var colorAliasTokens = css4`
   --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);
@@ -869,7 +869,7 @@ var colorAliasTokens = css4`
   --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);
@@ -894,8 +894,8 @@ var colorAliasTokens = css4`
   --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);
@@ -920,11 +920,11 @@ var colorAliasTokens = css4`
   --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 */
@@ -946,11 +946,11 @@ var colorAliasTokens = css4`
   --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 --- */
@@ -974,8 +974,8 @@ var colorAliasTokens = css4`
   --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);
@@ -1000,8 +1000,8 @@ var colorAliasTokens = css4`
   --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);
@@ -1026,10 +1026,10 @@ var colorAliasTokens = css4`
   --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);
 
@@ -1052,10 +1052,10 @@ var colorAliasTokens = css4`
   --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);
 
@@ -1078,10 +1078,10 @@ var colorAliasTokens = css4`
   --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);
 
@@ -1104,11 +1104,11 @@ var colorAliasTokens = css4`
   --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 --- */
@@ -1610,10 +1610,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" },
@@ -1637,7 +1637,7 @@ var defaultScheme = css11`
   --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);
@@ -1670,11 +1670,11 @@ var navScheme = css11`
   --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 */
@@ -1745,7 +1745,7 @@ var StyledToast = styled2.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);
@@ -1934,7 +1934,7 @@ var ghostButtonVariant = css13`
   --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 = css13`
@@ -1947,7 +1947,7 @@ var softButtonVariant = css13`
   --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 = css13`
@@ -5606,8 +5606,7 @@ var StyledLabel = styled6.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;
@@ -6750,31 +6749,29 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = css18`
-  --text-color: var(--wui-color-text-high-contrast);
-`;
-var vibrantProminenceStyle = css18`
-  --text-color: var(--wui-color-text);
-`;
-var secondaryProminenceStyle = css18`
-  --text-color: var(--wui-color-text-secondary);
-`;
-var prominenceMap = {
-  highContrast: highContrastProminenceStyle,
-  vibrant: vibrantProminenceStyle,
-  secondary: secondaryProminenceStyle
-};
 var StyledText = styled19.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 && css18`
       display: inline-block;
@@ -6801,7 +6798,7 @@ var TextComponent = forwardRef9(
     ellipsis = false,
     inline = false,
     preventUserSelect = false,
-    prominence = "highContrast",
+    prominence = "primary",
     variant = "body2",
     renderAs,
     ...otherProps
@@ -6888,7 +6885,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 import { jsx as jsx180, jsxs as jsxs11 } from "react/jsx-runtime";
 var StyledFormField = styled21.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;
@@ -6919,6 +6916,7 @@ var ErrorMessages = ({ errors, id }) => {
     {
       colorScheme: "error",
       id,
+      prominence: "secondary",
       variant: "label4",
       children: errors
     },
@@ -7393,7 +7391,7 @@ var StyledButton3 = styled26(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);
@@ -7409,7 +7407,7 @@ var StyledButton3 = styled26(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);
 
@@ -8162,7 +8160,7 @@ var TagLabel = styled36.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);
 
@@ -8506,11 +8504,60 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx202("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+import styled39 from "styled-components";
+import { jsx as jsx203 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled39.nav`
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+
+  > svg:last-of-type {
+    display: none;
+  }
+`;
+var Breadcrumbs = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx203(
+    StyledBreadcrumbs,
+    {
+      "aria-label": "Breadcrumbs",
+      ...props,
+      children
+    }
+  );
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/Breadcrumb.tsx
+import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
+var Breadcrumb = ({ icon, href, children }) => {
+  return /* @__PURE__ */ jsxs24(Fragment3, { children: [
+    /* @__PURE__ */ jsx204(
+      Button,
+      {
+        href,
+        leftIcon: icon,
+        variant: "ghost",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx204(
+      Icon,
+      {
+        size: "sm",
+        type: "caret-right"
+      }
+    )
+  ] });
+};
 export {
   ActionButton,
   Avatar,
   Badge,
   Box,
+  Breadcrumb,
+  Breadcrumbs,
   Button,
   ButtonGroup,
   Checkbox,