@wistia/ui 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.0.13
3
+ * @license @wistia/ui v0.0.15
4
4
  *
5
5
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
6
6
  *
@@ -503,6 +503,48 @@ var lightGlobalTokens = import_styled_components3.css`
503
503
  --gray-alpha-10: #0000117d;
504
504
  --gray-alpha-11: #00000a9c;
505
505
  --gray-alpha-12: #000005de;
506
+ --vendor-hubspot-1: #fefcfb;
507
+ --vendor-hubspot-2: #fff5f2;
508
+ --vendor-hubspot-3: #ffe9e2;
509
+ --vendor-hubspot-4: #ffd7c9;
510
+ --vendor-hubspot-5: #ffc8b7;
511
+ --vendor-hubspot-6: #ffb8a3;
512
+ --vendor-hubspot-7: #ffa48d;
513
+ --vendor-hubspot-8: #f68a70;
514
+ --vendor-hubspot-9: #ff5c36;
515
+ --vendor-hubspot-10: #f24d25;
516
+ --vendor-hubspot-11: #d93a0f;
517
+ --vendor-hubspot-12: #5b2a1e;
518
+ --vendor-hubspot-surface: #fff3efcc;
519
+ --vendor-hubspot-contrast: #ffffff;
520
+ --vendor-marketo-1: #fdfdff;
521
+ --vendor-marketo-2: #f7f8ff;
522
+ --vendor-marketo-3: #eff2ff;
523
+ --vendor-marketo-4: #e3e8ff;
524
+ --vendor-marketo-5: #d5ddff;
525
+ --vendor-marketo-6: #c5cfff;
526
+ --vendor-marketo-7: #b0bcfa;
527
+ --vendor-marketo-8: #93a0f2;
528
+ --vendor-marketo-9: #4c50cc;
529
+ --vendor-marketo-10: #4040bb;
530
+ --vendor-marketo-11: #4f55c7;
531
+ --vendor-marketo-12: #252a62;
532
+ --vendor-marketo-surface: #f5f6ffcc;
533
+ --vendor-marketo-contrast: #ffffff;
534
+ --vendor-pardot-1: #fafdff;
535
+ --vendor-pardot-2: #f3fafe;
536
+ --vendor-pardot-3: #e1f5ff;
537
+ --vendor-pardot-4: #ceeeff;
538
+ --vendor-pardot-5: #bae5ff;
539
+ --vendor-pardot-6: #a4d9fa;
540
+ --vendor-pardot-7: #85c9f1;
541
+ --vendor-pardot-8: #4fb3e8;
542
+ --vendor-pardot-9: #00a1e0;
543
+ --vendor-pardot-10: #0094cf;
544
+ --vendor-pardot-11: #0079b5;
545
+ --vendor-pardot-12: #0c3a51;
546
+ --vendor-pardot-surface: #f0f9fecc;
547
+ --vendor-pardot-contrast: #ffffff;
506
548
  `;
507
549
  var darkGlobalTokens = import_styled_components3.css`
508
550
  --app-background: #101629;
@@ -792,6 +834,48 @@ var darkGlobalTokens = import_styled_components3.css`
792
834
  --gray-alpha-10: #a4bffe96;
793
835
  --gray-alpha-11: #b4caffde;
794
836
  --gray-alpha-12: #e4eeff;
837
+ --vendor-hubspot-1: #1d1513;
838
+ --vendor-hubspot-2: #231815;
839
+ --vendor-hubspot-3: #3b1a12;
840
+ --vendor-hubspot-4: #511609;
841
+ --vendor-hubspot-5: #601d0d;
842
+ --vendor-hubspot-6: #702a1a;
843
+ --vendor-hubspot-7: #883a27;
844
+ --vendor-hubspot-8: #af4a33;
845
+ --vendor-hubspot-9: #ff5c36;
846
+ --vendor-hubspot-10: #f14f28;
847
+ --vendor-hubspot-11: #ff9578;
848
+ --vendor-hubspot-12: #ffd5ca;
849
+ --vendor-hubspot-surface: #361a0280;
850
+ --vendor-hubspot-contrast: #ffffff;
851
+ --vendor-marketo-1: #141621;
852
+ --vendor-marketo-2: #161827;
853
+ --vendor-marketo-3: #1f234a;
854
+ --vendor-marketo-4: #262a66;
855
+ --vendor-marketo-5: #2f3476;
856
+ --vendor-marketo-6: #383f83;
857
+ --vendor-marketo-7: #444c97;
858
+ --vendor-marketo-8: #515ab4;
859
+ --vendor-marketo-9: #4c50cc;
860
+ --vendor-marketo-10: #4040bb;
861
+ --vendor-marketo-11: #9faeff;
862
+ --vendor-marketo-12: #dae1ff;
863
+ --vendor-marketo-surface: #1c1a2680;
864
+ --vendor-marketo-contrast: #ffffff;
865
+ --vendor-pardot-1: #0e191f;
866
+ --vendor-pardot-2: #111d24;
867
+ --vendor-pardot-3: #092c3d;
868
+ --vendor-pardot-4: #003752;
869
+ --vendor-pardot-5: #004463;
870
+ --vendor-pardot-6: #055274;
871
+ --vendor-pardot-7: #15648a;
872
+ --vendor-pardot-8: #197ba9;
873
+ --vendor-pardot-9: #00a1e0;
874
+ --vendor-pardot-10: #0095d3;
875
+ --vendor-pardot-11: #62c3f8;
876
+ --vendor-pardot-12: #bfe7ff;
877
+ --vendor-pardot-surface: #12242080;
878
+ --vendor-pardot-contrast: #ffffff;
795
879
  `;
796
880
 
797
881
  // src/css/designTokens/colorAlias.tsx
@@ -1534,6 +1618,7 @@ var defaultScheme = import_styled_components10.css`
1534
1618
  --color-bg-fill-hover: var(--blue-10);
1535
1619
  --color-bg-fill-active: var(--blue-12);
1536
1620
  --color-text: var(--gray-12);
1621
+ --color-text-high-contrast: var(--gray-12);
1537
1622
  --color-text-link: var(--blue-9);
1538
1623
  --color-text-secondary: var(--gray-11);
1539
1624
  --color-text-on-fill: var(--gray-contrast);
@@ -1574,7 +1659,10 @@ var colorSchemeOptions = [
1574
1659
  "orange",
1575
1660
  "pink",
1576
1661
  "purple",
1577
- "yellow"
1662
+ "yellow",
1663
+ "vendor-hubspot",
1664
+ "vendor-marketo",
1665
+ "vendor-pardot"
1578
1666
  ];
1579
1667
  var StyledColorSchemeWrapper = import_styled_components11.default.div`
1580
1668
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -1770,8 +1858,8 @@ var import_react7 = require("react");
1770
1858
  var import_styled_components14 = __toESM(require("styled-components"));
1771
1859
  var import_type_guards8 = require("@wistia/type-guards");
1772
1860
  var import_jsx_runtime6 = require("react/jsx-runtime");
1773
- var isDev = process.env["NODE_ENV"] === "development";
1774
- var PROPS_FOR_FLEX_CHILDREN = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
1861
+ var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
1862
+ var propsForFlexChildren = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
1775
1863
  var getGapStyle = (gap) => {
1776
1864
  if ((0, import_type_guards8.isNotNil)(gap)) {
1777
1865
  if ((0, import_type_guards8.isRecord)(gap)) {
@@ -1861,7 +1949,7 @@ var Box = ({
1861
1949
  }) => {
1862
1950
  if (isDev && !hasBoxParent) {
1863
1951
  Object.keys(otherProps).forEach((prop) => {
1864
- if (PROPS_FOR_FLEX_CHILDREN.has(prop)) {
1952
+ if (propsForFlexChildren.has(prop)) {
1865
1953
  console.warn(`${prop} only has an effect on <Box> instances that are children of a <Box>`);
1866
1954
  }
1867
1955
  });
@@ -5596,7 +5684,7 @@ var getAlignment = (align) => {
5596
5684
  if (align === "right") {
5597
5685
  return "flex-end";
5598
5686
  }
5599
- return void 0;
5687
+ return "flex-start";
5600
5688
  };
5601
5689
  var ButtonGroupComponent = import_styled_components20.default.div`
5602
5690
  display: flex;
@@ -6015,11 +6103,12 @@ var disabledStyle = import_styled_components26.css`
6015
6103
  `;
6016
6104
  var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
6017
6105
  var StyledLabel = import_styled_components26.default.label`
6018
- display: block;
6106
+ display: inline-block;
6019
6107
  font-size: var(--typography-label-1-size);
6020
6108
  font-weight: var(--typography-label-1-weight);
6021
6109
  line-height: var(--typography-label-1-line-height);
6022
6110
  margin-bottom: ${SPACE_BETWEEN_LABEL_AND_INPUT};
6111
+ cursor: inherit;
6023
6112
  width: 100%;
6024
6113
 
6025
6114
  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
@@ -6049,6 +6138,7 @@ var Label = ({
6049
6138
  StyledLabel,
6050
6139
  {
6051
6140
  disabled,
6141
+ htmlFor,
6052
6142
  required,
6053
6143
  screenReaderOnly,
6054
6144
  ...otherProps,