@wistia/ui 0.0.13 → 0.0.15

package/dist/index.d.mts

@@ -89,7 +89,7 @@ declare const Avatar: {
     displayName: string;
 };
 
-declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
 type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
 type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
     /**

package/dist/index.d.ts

@@ -89,7 +89,7 @@ declare const Avatar: {
     displayName: string;
 };
 
-declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
 type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
 type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.13
+ * @license @wistia/ui v0.0.15
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -440,6 +440,48 @@ var lightGlobalTokens = css3`
   --gray-alpha-10: #0000117d;
   --gray-alpha-11: #00000a9c;
   --gray-alpha-12: #000005de;
+  --vendor-hubspot-1: #fefcfb;
+  --vendor-hubspot-2: #fff5f2;
+  --vendor-hubspot-3: #ffe9e2;
+  --vendor-hubspot-4: #ffd7c9;
+  --vendor-hubspot-5: #ffc8b7;
+  --vendor-hubspot-6: #ffb8a3;
+  --vendor-hubspot-7: #ffa48d;
+  --vendor-hubspot-8: #f68a70;
+  --vendor-hubspot-9: #ff5c36;
+  --vendor-hubspot-10: #f24d25;
+  --vendor-hubspot-11: #d93a0f;
+  --vendor-hubspot-12: #5b2a1e;
+  --vendor-hubspot-surface: #fff3efcc;
+  --vendor-hubspot-contrast: #ffffff;
+  --vendor-marketo-1: #fdfdff;
+  --vendor-marketo-2: #f7f8ff;
+  --vendor-marketo-3: #eff2ff;
+  --vendor-marketo-4: #e3e8ff;
+  --vendor-marketo-5: #d5ddff;
+  --vendor-marketo-6: #c5cfff;
+  --vendor-marketo-7: #b0bcfa;
+  --vendor-marketo-8: #93a0f2;
+  --vendor-marketo-9: #4c50cc;
+  --vendor-marketo-10: #4040bb;
+  --vendor-marketo-11: #4f55c7;
+  --vendor-marketo-12: #252a62;
+  --vendor-marketo-surface: #f5f6ffcc;
+  --vendor-marketo-contrast: #ffffff;
+  --vendor-pardot-1: #fafdff;
+  --vendor-pardot-2: #f3fafe;
+  --vendor-pardot-3: #e1f5ff;
+  --vendor-pardot-4: #ceeeff;
+  --vendor-pardot-5: #bae5ff;
+  --vendor-pardot-6: #a4d9fa;
+  --vendor-pardot-7: #85c9f1;
+  --vendor-pardot-8: #4fb3e8;
+  --vendor-pardot-9: #00a1e0;
+  --vendor-pardot-10: #0094cf;
+  --vendor-pardot-11: #0079b5;
+  --vendor-pardot-12: #0c3a51;
+  --vendor-pardot-surface: #f0f9fecc;
+  --vendor-pardot-contrast: #ffffff;
 `;
 var darkGlobalTokens = css3`
   --app-background: #101629;
@@ -729,6 +771,48 @@ var darkGlobalTokens = css3`
   --gray-alpha-10: #a4bffe96;
   --gray-alpha-11: #b4caffde;
   --gray-alpha-12: #e4eeff;
+  --vendor-hubspot-1: #1d1513;
+  --vendor-hubspot-2: #231815;
+  --vendor-hubspot-3: #3b1a12;
+  --vendor-hubspot-4: #511609;
+  --vendor-hubspot-5: #601d0d;
+  --vendor-hubspot-6: #702a1a;
+  --vendor-hubspot-7: #883a27;
+  --vendor-hubspot-8: #af4a33;
+  --vendor-hubspot-9: #ff5c36;
+  --vendor-hubspot-10: #f14f28;
+  --vendor-hubspot-11: #ff9578;
+  --vendor-hubspot-12: #ffd5ca;
+  --vendor-hubspot-surface: #361a0280;
+  --vendor-hubspot-contrast: #ffffff;
+  --vendor-marketo-1: #141621;
+  --vendor-marketo-2: #161827;
+  --vendor-marketo-3: #1f234a;
+  --vendor-marketo-4: #262a66;
+  --vendor-marketo-5: #2f3476;
+  --vendor-marketo-6: #383f83;
+  --vendor-marketo-7: #444c97;
+  --vendor-marketo-8: #515ab4;
+  --vendor-marketo-9: #4c50cc;
+  --vendor-marketo-10: #4040bb;
+  --vendor-marketo-11: #9faeff;
+  --vendor-marketo-12: #dae1ff;
+  --vendor-marketo-surface: #1c1a2680;
+  --vendor-marketo-contrast: #ffffff;
+  --vendor-pardot-1: #0e191f;
+  --vendor-pardot-2: #111d24;
+  --vendor-pardot-3: #092c3d;
+  --vendor-pardot-4: #003752;
+  --vendor-pardot-5: #004463;
+  --vendor-pardot-6: #055274;
+  --vendor-pardot-7: #15648a;
+  --vendor-pardot-8: #197ba9;
+  --vendor-pardot-9: #00a1e0;
+  --vendor-pardot-10: #0095d3;
+  --vendor-pardot-11: #62c3f8;
+  --vendor-pardot-12: #bfe7ff;
+  --vendor-pardot-surface: #12242080;
+  --vendor-pardot-contrast: #ffffff;
 `;
 
 // src/css/designTokens/colorAlias.tsx
@@ -1471,6 +1555,7 @@ var defaultScheme = css9`
   --color-bg-fill-hover: var(--blue-10);
   --color-bg-fill-active: var(--blue-12);
   --color-text: var(--gray-12);
+  --color-text-high-contrast: var(--gray-12);
   --color-text-link: var(--blue-9);
   --color-text-secondary: var(--gray-11);
   --color-text-on-fill: var(--gray-contrast);
@@ -1511,7 +1596,10 @@ var colorSchemeOptions = [
   "orange",
   "pink",
   "purple",
-  "yellow"
+  "yellow",
+  "vendor-hubspot",
+  "vendor-marketo",
+  "vendor-pardot"
 ];
 var StyledColorSchemeWrapper = styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -1707,8 +1795,8 @@ import { Children, cloneElement } from "react";
 import styled4 from "styled-components";
 import { isNotNil as isNotNil2, isNil as isNil5, isRecord } from "@wistia/type-guards";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var isDev = process.env["NODE_ENV"] === "development";
-var PROPS_FOR_FLEX_CHILDREN = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
+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 (isNotNil2(gap)) {
     if (isRecord(gap)) {
@@ -1798,7 +1886,7 @@ var Box = ({
 }) => {
   if (isDev && !hasBoxParent) {
     Object.keys(otherProps).forEach((prop) => {
-      if (PROPS_FOR_FLEX_CHILDREN.has(prop)) {
+      if (propsForFlexChildren.has(prop)) {
         console.warn(`${prop} only has an effect on <Box> instances that are children of a <Box>`);
       }
     });
@@ -5533,7 +5621,7 @@ var getAlignment = (align) => {
   if (align === "right") {
     return "flex-end";
   }
-  return void 0;
+  return "flex-start";
 };
 var ButtonGroupComponent = styled8.div`
   display: flex;
@@ -5958,11 +6046,12 @@ var disabledStyle = css15`
 `;
 var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
 var StyledLabel = styled14.label`
-  display: block;
+  display: inline-block;
   font-size: var(--typography-label-1-size);
   font-weight: var(--typography-label-1-weight);
   line-height: var(--typography-label-1-line-height);
   margin-bottom: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+  cursor: inherit;
   width: 100%;
 
   /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
@@ -5992,6 +6081,7 @@ var Label = ({
   StyledLabel,
   {
     disabled,
+    htmlFor,
     required,
     screenReaderOnly,
     ...otherProps,