@kaizen/components 1.64.1 → 1.64.2

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.
Files changed (12) hide show
  1. package/dist/cjs/utils/useMediaQueries.cjs +5 -3
  2. package/dist/esm/utils/useMediaQueries.mjs +5 -3
  3. package/dist/styles.css +56 -56
  4. package/package.json +1 -1
  5. package/src/Workflow/_docs/ProgressStepper.stories.tsx +1 -1
  6. package/src/Workflow/_docs/Workflow.stories.tsx +1 -1
  7. package/src/Workflow/_docs/WorkflowFooter.stories.tsx +1 -1
  8. package/src/Workflow/_docs/WorkflowHeader.stories.tsx +1 -1
  9. package/src/utils/useMediaQueries.tsx +5 -3
  10. package/dist/types/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.d.ts +0 -16
  11. package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss +0 -111
  12. package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx +0 -143
package/dist/cjs/utils/useMediaQueries.cjs CHANGED
@@ -78,7 +78,7 @@ var useMediaQueries = function (propQueries) {
78
78
  kaizenMatches = _a[0],
79
79
  setKaizenMatches = _a[1];
80
80
  // ---------------------------------------
81
- // Create an event listener based on the medium breakpoint and update state whenever it changes
81
+ // Create an event listener based on the small and large breakpoints and update state whenever one of those changes
82
82
  // ---------------------------------------
83
83
  React.useEffect(function () {
84
84
  if (isLegacyEdge || isUnsupportedSafari) {
@@ -96,9 +96,11 @@ var useMediaQueries = function (propQueries) {
96
96
  isMediumOrLarger: !isSmallAfterUpdate
97
97
  });
98
98
  };
99
- mediumMatchMedia.addEventListener("change", updateMatches, true);
99
+ smallMatchMedia.addEventListener("change", updateMatches, true);
100
+ largeMatchMedia.addEventListener("change", updateMatches, true);
100
101
  return function () {
101
- mediumMatchMedia.removeEventListener("change", updateMatches);
102
+ smallMatchMedia.removeEventListener("change", updateMatches);
103
+ largeMatchMedia.removeEventListener("change", updateMatches);
102
104
  };
103
105
  }, []);
104
106
  // ---------------------------------------
package/dist/esm/utils/useMediaQueries.mjs CHANGED
@@ -70,7 +70,7 @@ var useMediaQueries = function (propQueries) {
70
70
  kaizenMatches = _a[0],
71
71
  setKaizenMatches = _a[1];
72
72
  // ---------------------------------------
73
- // Create an event listener based on the medium breakpoint and update state whenever it changes
73
+ // Create an event listener based on the small and large breakpoints and update state whenever one of those changes
74
74
  // ---------------------------------------
75
75
  useEffect(function () {
76
76
  if (isLegacyEdge || isUnsupportedSafari) {
@@ -88,9 +88,11 @@ var useMediaQueries = function (propQueries) {
88
88
  isMediumOrLarger: !isSmallAfterUpdate
89
89
  });
90
90
  };
91
- mediumMatchMedia.addEventListener("change", updateMatches, true);
91
+ smallMatchMedia.addEventListener("change", updateMatches, true);
92
+ largeMatchMedia.addEventListener("change", updateMatches, true);
92
93
  return function () {
93
- mediumMatchMedia.removeEventListener("change", updateMatches);
94
+ smallMatchMedia.removeEventListener("change", updateMatches);
95
+ largeMatchMedia.removeEventListener("change", updateMatches);
94
96
  };
95
97
  }, []);
96
98
  // ---------------------------------------
package/dist/styles.css CHANGED
@@ -1,4 +1,60 @@
1
1
  @layer tokens, normalize, reset;@layer tokens{:root{--theme-key:heart;--animation-easing-function-ease-in-out:cubic-bezier(0.455,0.03,0.515,0.955);--animation-easing-function-ease-in:cubic-bezier(0.55,0.085,0.68,0.53);--animation-easing-function-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);--animation-easing-function-linear:linear;--animation-easing-function-bounce-in:cubic-bezier(0.485,0.155,0.24,1.245);--animation-easing-function-bounce-out:cubic-bezier(0.485,0.155,0.515,0.845);--animation-easing-function-bounce-in-out:cubic-bezier(0.76,-0.245,0.24,1.245);--animation-duration-instant:0ms;--animation-duration-immediate:100ms;--animation-duration-rapid:200ms;--animation-duration-fast:300ms;--animation-duration-slow:400ms;--animation-duration-deliberate:700ms;--border-solid-border-width:2px;--border-solid-border-radius:7px;--border-solid-border-style:solid;--border-solid-border-color:#e1e2ea;--border-solid-border-color-rgb:225,226,234;--border-dashed-border-width:2px;--border-dashed-border-radius:7px;--border-dashed-border-style:dashed;--border-borderless-border-width:2px;--border-borderless-border-radius:7px;--border-borderless-border-style:solid;--border-borderless-border-color:transparent;--border-borderless-border-color-rgb:0,0,0;--border-focus-ring-border-width:2px;--border-focus-ring-border-radius:10px;--border-focus-ring-border-style:solid;--border-width-1:1px;--color-purple-100:#f4edf8;--color-purple-100-rgb:244,237,248;--color-purple-200:#dfc9ea;--color-purple-200-rgb:223,201,234;--color-purple-300:#c9a5dd;--color-purple-300-rgb:201,165,221;--color-purple-400:#ae67b1;--color-purple-400-rgb:174,103,177;--color-purple-500:#844587;--color-purple-500-rgb:132,69,135;--color-purple-600:#5f3361;--color-purple-600-rgb:95,51,97;--color-purple-700:#4a234d;--color-purple-700-rgb:74,35,77;--color-purple-800:#2f2438;--color-purple-800-rgb:47,36,56;--color-blue-100:#e6f6ff;--color-blue-100-rgb:230,246,255;--color-blue-200:#bde2f5;--color-blue-200-rgb:189,226,245;--color-blue-300:#73c0e8;--color-blue-300-rgb:115,192,232;--color-blue-400:#008bd6;--color-blue-400-rgb:0,139,214;--color-blue-500:#0168b3;--color-blue-500-rgb:1,104,179;--color-blue-600:#004970;--color-blue-600-rgb:0,73,112;--color-blue-700:#003157;--color-blue-700-rgb:0,49,87;--color-green-100:#e8f8f4;--color-green-100-rgb:232,248,244;--color-green-200:#c4ede2;--color-green-200-rgb:196,237,226;--color-green-300:#8fdbc7;--color-green-300-rgb:143,219,199;--color-green-400:#5dcaad;--color-green-400-rgb:93,202,173;--color-green-500:#3f9a86;--color-green-500-rgb:63,154,134;--color-green-600:#2c7d67;--color-green-600-rgb:44,125,103;--color-green-700:#22594a;--color-green-700-rgb:34,89,74;--color-yellow-100:#fff9e4;--color-yellow-100-rgb:255,249,228;--color-yellow-200:#ffeeb3;--color-yellow-200-rgb:255,238,179;--color-yellow-300:#ffe36e;--color-yellow-300-rgb:255,227,110;--color-yellow-400:#ffca4d;--color-yellow-400-rgb:255,202,77;--color-yellow-500:#ffb600;--color-yellow-500-rgb:255,182,0;--color-yellow-600:#c68600;--color-yellow-600-rgb:198,134,0;--color-yellow-700:#876400;--color-yellow-700-rgb:135,100,0;--color-red-100:#fdeaee;--color-red-100-rgb:253,234,238;--color-red-200:#f9c2cb;--color-red-200-rgb:249,194,203;--color-red-300:#f597a8;--color-red-300-rgb:245,151,168;--color-red-400:#e0707d;--color-red-400-rgb:224,112,125;--color-red-500:#c93b55;--color-red-500-rgb:201,59,85;--color-red-600:#a82433;--color-red-600-rgb:168,36,51;--color-red-700:#6c1e20;--color-red-700-rgb:108,30,32;--color-orange-100:#fff0e8;--color-orange-100-rgb:255,240,232;--color-orange-200:#ffd1b9;--color-orange-200-rgb:255,209,185;--color-orange-300:#ffb08a;--color-orange-300-rgb:255,176,138;--color-orange-400:#ff9461;--color-orange-400-rgb:255,148,97;--color-orange-500:#e96c2f;--color-orange-500-rgb:233,108,47;--color-orange-600:#b74302;--color-orange-600-rgb:183,67,2;--color-orange-700:#903c00;--color-orange-700-rgb:144,60,0;--color-gray-100:#f9f9f9;--color-gray-100-rgb:249,249,249;--color-gray-200:#f4f4f5;--color-gray-200-rgb:244,244,245;--color-gray-300:#eaeaec;--color-gray-300-rgb:234,234,236;--color-gray-400:#cdcdd0;--color-gray-400-rgb:205,205,208;--color-gray-500:#878792;--color-gray-500-rgb:135,135,146;--color-gray-600:#524e56;--color-gray-600-rgb:82,78,86;--color-white:#fff;--color-white-rgb:255,255,255;--color-black:#000;--color-black-rgb:0,0,0;--data-viz-favorable:#7dd5bd;--data-viz-favorable-rgb:125,213,189;--data-viz-unfavorable:#e68d97;--data-viz-unfavorable-rgb:230,141,151;--layout-content-max-width:1392px;--layout-content-max-width-with-sidebar:1080px;--layout-content-side-margin:72px;--layout-mobile-actions-drawer-height:60px;--layout-navigation-bar-height:72px;--layout-breakpoints-medium:768px;--layout-breakpoints-large:1080px;--shadow-small-box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06);--shadow-large-box-shadow:0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08);--spacing-0:0;--spacing-1:.0625rem;--spacing-2:.125rem;--spacing-4:.25rem;--spacing-6:.375rem;--spacing-8:.5rem;--spacing-12:.75rem;--spacing-16:1rem;--spacing-20:1.25rem;--spacing-24:1.5rem;--spacing-32:2rem;--spacing-40:2.5rem;--spacing-48:3rem;--spacing-56:3.5rem;--spacing-64:4rem;--spacing-72:4.5rem;--spacing-80:5rem;--spacing-96:6rem;--spacing-112:7rem;--spacing-128:8rem;--spacing-160:10rem;--spacing-200:12.5rem;--spacing-240:15rem;--spacing-280:17.5rem;--spacing-320:20rem;--spacing-xs:0.375rem;--spacing-sm:0.75rem;--spacing-md:1.5rem;--spacing-lg:2.25rem;--spacing-xl:3rem;--spacing-xxl:3.75rem;--spacing-xxxl:4.5rem;--spacing-xxxxl:5.25rem;--spacing-xxxxxl:6rem;--typography-data-large-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-font-weight:700;--typography-data-large-font-size:5.25rem;--typography-data-large-line-height:5.25rem;--typography-data-large-letter-spacing:normal;--typography-data-large-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-large-units-font-weight:700;--typography-data-large-units-font-size:2.625rem;--typography-data-large-units-line-height:5.25rem;--typography-data-large-units-letter-spacing:normal;--typography-data-medium-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-font-weight:700;--typography-data-medium-font-size:3rem;--typography-data-medium-line-height:5rem;--typography-data-medium-letter-spacing:normal;--typography-data-medium-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-medium-units-font-weight:700;--typography-data-medium-units-font-size:1.5rem;--typography-data-medium-units-line-height:5rem;--typography-data-medium-units-letter-spacing:normal;--typography-data-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-font-weight:700;--typography-data-small-font-size:1.5rem;--typography-data-small-line-height:1.5rem;--typography-data-small-letter-spacing:normal;--typography-data-small-units-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-data-small-units-font-weight:700;--typography-data-small-units-font-size:1.125rem;--typography-data-small-units-line-height:1.5rem;--typography-data-small-units-letter-spacing:normal;--typography-display-0-font-family:"Tiempos Headline",Georgia,serif;--typography-display-0-font-weight:800;--typography-display-0-font-size:4.5rem;--typography-display-0-line-height:5.25rem;--typography-display-0-letter-spacing:0em;--typography-heading-1-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-1-font-weight:700;--typography-heading-1-font-size:2.125rem;--typography-heading-1-line-height:2.625rem;--typography-heading-1-letter-spacing:normal;--typography-heading-2-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-2-font-weight:700;--typography-heading-2-font-size:1.75rem;--typography-heading-2-line-height:2.25rem;--typography-heading-2-letter-spacing:normal;--typography-heading-3-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-3-font-weight:700;--typography-heading-3-font-size:1.375rem;--typography-heading-3-line-height:1.875rem;--typography-heading-3-letter-spacing:normal;--typography-heading-4-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-4-font-weight:600;--typography-heading-4-font-size:1.125rem;--typography-heading-4-line-height:1.5rem;--typography-heading-4-letter-spacing:normal;--typography-heading-5-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-5-font-weight:600;--typography-heading-5-font-size:1rem;--typography-heading-5-line-height:1.5rem;--typography-heading-5-letter-spacing:normal;--typography-heading-6-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-heading-6-font-weight:700;--typography-heading-6-font-size:0.875rem;--typography-heading-6-line-height:1.5rem;--typography-heading-6-letter-spacing:normal;--typography-paragraph-intro-lede-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-intro-lede-font-weight:400;--typography-paragraph-intro-lede-font-size:1.25rem;--typography-paragraph-intro-lede-line-height:1.875rem;--typography-paragraph-intro-lede-letter-spacing:0;--typography-paragraph-intro-lede-max-width:975px;--typography-paragraph-body-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-body-font-weight:400;--typography-paragraph-body-font-size:1rem;--typography-paragraph-body-line-height:1.5rem;--typography-paragraph-body-letter-spacing:normal;--typography-paragraph-body-max-width:780px;--typography-paragraph-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-small-font-weight:400;--typography-paragraph-small-font-size:0.875rem;--typography-paragraph-small-line-height:1.125rem;--typography-paragraph-small-letter-spacing:normal;--typography-paragraph-small-max-width:680px;--typography-paragraph-extra-small-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-paragraph-extra-small-font-weight:400;--typography-paragraph-extra-small-font-size:0.75rem;--typography-paragraph-extra-small-line-height:1.125rem;--typography-paragraph-extra-small-letter-spacing:normal;--typography-paragraph-extra-small-max-width:600px;--typography-paragraph-bold-font-weight:600;--typography-button-primary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-primary-font-weight:700;--typography-button-primary-font-size:1.125rem;--typography-button-primary-line-height:1.5rem;--typography-button-primary-letter-spacing:normal;--typography-button-secondary-font-family:"Inter","Noto Sans",Helvetica,Arial,sans-serif;--typography-button-secondary-font-weight:500;--typography-button-secondary-font-size:1rem;--typography-button-secondary-line-height:1.5rem;--typography-button-secondary-letter-spacing:normal}}@layer normalize{html{text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}}@layer reset{@font-face{font-family:Tiempos Headline;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-bold.woff)}@font-face{font-family:Tiempos Headline;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/tiempos/tiempos-headline-medium.woff)}@font-face{font-family:Greycliff CF;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-light.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-regular.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-medium.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-demi-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-bold.woff) format("woff")}@font-face{font-family:Greycliff CF;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/greycliff/greycliff-cf-extra-bold.woff) format("woff")}@font-face{font-family:Inter;font-weight:300;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-light.woff)}@font-face{font-family:Inter;font-weight:400;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-regular.woff)}@font-face{font-family:Inter;font-weight:500;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-medium.woff)}@font-face{font-family:Inter;font-weight:600;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-demi-bold.woff)}@font-face{font-family:Inter;font-weight:700;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-bold.woff)}@font-face{font-family:Inter;font-weight:800;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/inter/inter-extra-bold.woff)}@font-face{font-family:IBM Plex Mono;src:url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff2),url(https://d1e7r7b0lb8p4d.cloudfront.net/fonts/ibm-plex-mono/ibm-plex-mono-regular.woff)}}@layer reset{*,:after,:before{border-color:var(--border-solid-border-color,"currentColor");border-style:solid;border-width:0}}
2
+ /** THIS IS AN AUTOGENERATED FILE **/
3
+ /** THIS IS AN AUTOGENERATED FILE **/
4
+ /** THIS IS AN AUTOGENERATED FILE **/
5
+ /** THIS IS AN AUTOGENERATED FILE **/
6
+ /** THIS IS AN AUTOGENERATED FILE **/
7
+ /** THIS IS AN AUTOGENERATED FILE **/
8
+ .Tooltip-module_tooltip__efL1m {
9
+ max-width: 200px;
10
+ padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
11
+ color: var(--color-white, #ffffff);
12
+ text-align: center;
13
+ font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
14
+ font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
15
+ font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
16
+ letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
17
+ line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
18
+ border-radius: var(--border-solid-border-radius, 7px);
19
+ box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
20
+ background-color: var(--color-purple-800, #2f2438);
21
+ text-wrap: pretty;
22
+ /* fixes FF gap */
23
+ transform: translate3d(0, 0, 0);
24
+ }
25
+ .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
26
+ background-color: var(--color-white, #ffffff);
27
+ color: var(--color-purple-800, #2f2438);
28
+ }
29
+ .Tooltip-module_tooltip__efL1m[data-placement=top] {
30
+ --origin: translateY(4px);
31
+ }
32
+ .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
33
+ --origin: translateY(-4px);
34
+ }
35
+ .Tooltip-module_tooltip__efL1m[data-placement=right] {
36
+ --origin: translateX(-4px);
37
+ }
38
+ .Tooltip-module_tooltip__efL1m[data-placement=left] {
39
+ --origin: translateX(4px);
40
+ }
41
+ .Tooltip-module_tooltip__efL1m[data-entering] {
42
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
43
+ }
44
+ .Tooltip-module_tooltip__efL1m[data-exiting] {
45
+ animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
46
+ }
47
+
48
+ @keyframes Tooltip-module_slide__lFdGA {
49
+ from {
50
+ transform: var(--origin);
51
+ opacity: 0;
52
+ }
53
+ to {
54
+ transform: translateY(0);
55
+ opacity: 1;
56
+ }
57
+ }
2
58
  .MenuItem-module_item__DPerF {
3
59
  font-family: var(--typography-paragraph-body-font-family);
4
60
  font-size: var(--typography-paragraph-body-font-size);
@@ -156,62 +212,6 @@
156
212
  }
157
213
  /** THIS IS AN AUTOGENERATED FILE **/
158
214
  /** THIS IS AN AUTOGENERATED FILE **/
159
- /** THIS IS AN AUTOGENERATED FILE **/
160
- /** THIS IS AN AUTOGENERATED FILE **/
161
- /** THIS IS AN AUTOGENERATED FILE **/
162
- /** THIS IS AN AUTOGENERATED FILE **/
163
- .Tooltip-module_tooltip__efL1m {
164
- max-width: 200px;
165
- padding: var(--spacing-8, 0.5rem) var(--spacing-12, 0.75rem);
166
- color: var(--color-white, #ffffff);
167
- text-align: center;
168
- font-family: var(--typography-paragraph-extra-small-font-family, "Inter", "Noto Sans", Helvetica, Arial, sans-serif);
169
- font-size: var(--typography-paragraph-extra-small-font-size, 0.75rem);
170
- font-weight: var(--typography-paragraph-extra-small-font-weight, 400);
171
- letter-spacing: var(--typography-paragraph-extra-small-letter-spacing, normal);
172
- line-height: var(--typography-paragraph-extra-small-line-height, 1.125rem);
173
- border-radius: var(--border-solid-border-radius, 7px);
174
- box-shadow: var(--shadow-small-box-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 3px 16px 0 rgba(0, 0, 0, 0.06));
175
- background-color: var(--color-purple-800, #2f2438);
176
- text-wrap: pretty;
177
- /* fixes FF gap */
178
- transform: translate3d(0, 0, 0);
179
- }
180
- .Tooltip-module_tooltip__efL1m.Tooltip-module_reversed__NnCbZ {
181
- background-color: var(--color-white, #ffffff);
182
- color: var(--color-purple-800, #2f2438);
183
- }
184
- .Tooltip-module_tooltip__efL1m[data-placement=top] {
185
- --origin: translateY(4px);
186
- }
187
- .Tooltip-module_tooltip__efL1m[data-placement=bottom] {
188
- --origin: translateY(-4px);
189
- }
190
- .Tooltip-module_tooltip__efL1m[data-placement=right] {
191
- --origin: translateX(-4px);
192
- }
193
- .Tooltip-module_tooltip__efL1m[data-placement=left] {
194
- --origin: translateX(4px);
195
- }
196
- .Tooltip-module_tooltip__efL1m[data-entering] {
197
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms);
198
- }
199
- .Tooltip-module_tooltip__efL1m[data-exiting] {
200
- animation: Tooltip-module_slide__lFdGA var(--animation-duration-fast, 300ms) reverse var(--animation-easing-function-ease-in, cubic-bezier(0.55, 0.085, 0.68, 0.53));
201
- }
202
-
203
- @keyframes Tooltip-module_slide__lFdGA {
204
- from {
205
- transform: var(--origin);
206
- opacity: 0;
207
- }
208
- to {
209
- transform: translateY(0);
210
- opacity: 1;
211
- }
212
- }
213
- /** THIS IS AN AUTOGENERATED FILE **/
214
- /** THIS IS AN AUTOGENERATED FILE **/
215
215
  .OverlayArrow-module_overlayArrow__hoDyK {
216
216
  display: flex;
217
217
  padding: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaizen/components",
3
- "version": "1.64.1",
3
+ "version": "1.64.2",
4
4
  "description": "Kaizen component library",
5
5
  "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
6
6
  "homepage": "https://cultureamp.design",
package/src/Workflow/_docs/ProgressStepper.stories.tsx CHANGED
@@ -3,7 +3,7 @@ import { Workflow } from "../"
3
3
  import { WorkflowControls } from "./controls"
4
4
 
5
5
  const meta = {
6
- title: "Layout/Workflow/Workflow/Components/Progress Stepper",
6
+ title: "Layout/Workflow/Components/Progress Stepper",
7
7
  component: Workflow.ProgressStepper,
8
8
  argTypes: {
9
9
  currentStepId: WorkflowControls.currentStepId,
package/src/Workflow/_docs/Workflow.stories.tsx CHANGED
@@ -34,7 +34,7 @@ const MockContent = (): JSX.Element => (
34
34
  )
35
35
 
36
36
  const meta = {
37
- title: "Layout/Workflow/Workflow",
37
+ title: "Layout/Workflow",
38
38
  component: Workflow,
39
39
  argTypes: WorkflowControls,
40
40
  args: {
package/src/Workflow/_docs/WorkflowFooter.stories.tsx CHANGED
@@ -5,7 +5,7 @@ import { Workflow } from "../"
5
5
  import { WorkflowControls } from "./controls"
6
6
 
7
7
  const meta = {
8
- title: "Layout/Workflow/Workflow/Components/Footer",
8
+ title: "Layout/Workflow/Components/Footer",
9
9
  component: Workflow.Footer,
10
10
  argTypes: {
11
11
  ...WorkflowControls.nextAction,
package/src/Workflow/_docs/WorkflowHeader.stories.tsx CHANGED
@@ -7,7 +7,7 @@ import { Workflow } from "../"
7
7
  import { WorkflowControls } from "./controls"
8
8
 
9
9
  const meta = {
10
- title: "Layout/Workflow/Workflow/Components/Header",
10
+ title: "Layout/Workflow/Components/Header",
11
11
  component: Workflow.Header,
12
12
  argTypes: {
13
13
  ...WorkflowControls.headerActions,
package/src/utils/useMediaQueries.tsx CHANGED
@@ -97,7 +97,7 @@ export const useMediaQueries = (
97
97
  })
98
98
 
99
99
  // ---------------------------------------
100
- // Create an event listener based on the medium breakpoint and update state whenever it changes
100
+ // Create an event listener based on the small and large breakpoints and update state whenever one of those changes
101
101
  // ---------------------------------------
102
102
  useEffect(() => {
103
103
  if (isLegacyEdge || isUnsupportedSafari) {
@@ -118,10 +118,12 @@ export const useMediaQueries = (
118
118
  })
119
119
  }
120
120
 
121
- mediumMatchMedia.addEventListener("change", updateMatches, true)
121
+ smallMatchMedia.addEventListener("change", updateMatches, true)
122
+ largeMatchMedia.addEventListener("change", updateMatches, true)
122
123
 
123
124
  return () => {
124
- mediumMatchMedia.removeEventListener("change", updateMatches)
125
+ smallMatchMedia.removeEventListener("change", updateMatches)
126
+ largeMatchMedia.removeEventListener("change", updateMatches)
125
127
  }
126
128
  }, [])
127
129
 
package/dist/types/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.d.ts DELETED
@@ -1,16 +0,0 @@
1
- export type Step = {
2
- id: string;
3
- label: string;
4
- };
5
- export type Steps = [Step, ...Step[]];
6
- export type ProgressStepperProps = {
7
- /** The id reference to within a Step object */
8
- currentStepId: Step["id"];
9
- /** A non-empty array of Steps */
10
- steps: Steps;
11
- isComplete?: boolean;
12
- };
13
- export declare const ProgressStepper: {
14
- ({ currentStepId, steps, isComplete, ...restprops }: ProgressStepperProps): JSX.Element;
15
- displayName: string;
16
- };
package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss DELETED
@@ -1,111 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/border";
3
- @import "~@kaizen/design-tokens/sass/spacing";
4
- @import "~@kaizen/design-tokens/sass/typography";
5
-
6
- $indicator-size: 1.25rem;
7
-
8
- .stepsContainer {
9
- width: 100%;
10
- grid-area: stepper;
11
- }
12
-
13
- .stepList {
14
- display: none;
15
- justify-content: center;
16
- align-items: flex-end;
17
- list-style: none;
18
- margin: 0;
19
- padding: 0;
20
-
21
- @media (min-width: 768px) {
22
- display: flex;
23
- }
24
- }
25
-
26
- .step {
27
- display: flex;
28
- flex-grow: 1;
29
- flex-basis: 100%;
30
- justify-content: center;
31
- max-width: $spacing-96;
32
- overflow-wrap: break-word;
33
- position: relative;
34
- container: step / inline-size;
35
- }
36
-
37
- .stepContent {
38
- display: flex;
39
- align-items: center;
40
- flex-direction: column;
41
- }
42
-
43
- .stepIndicator {
44
- width: $indicator-size;
45
- height: $indicator-size;
46
- position: relative;
47
- }
48
-
49
- .stepName {
50
- display: none;
51
- text-align: center;
52
- margin-bottom: $spacing-12;
53
- font-weight: $typography-paragraph-bold-font-weight;
54
- }
55
-
56
- .stepIcon {
57
- color: $color-white;
58
- position: absolute;
59
- width: $indicator-size;
60
- height: $indicator-size;
61
- left: 50%;
62
- top: 50%;
63
- transform: translate(-50%, -50%);
64
- }
65
-
66
- .stepDivider {
67
- height: 0;
68
- display: flex;
69
- position: absolute;
70
- flex-grow: 1;
71
- min-width: calc(100% - #{$spacing-24});
72
- border: solid $spacing-1 $color-white;
73
- margin: 0;
74
- border-radius: $border-solid-border-radius;
75
- left: 100%;
76
- // sets fron the bottom to the centre of the dot
77
- top: calc(100% - calc(#{$indicator-size}/ 2));
78
- transform: translateX(-50%);
79
-
80
- [dir="rtl"] & {
81
- left: unset;
82
- right: 100%;
83
- transform: translateX(50%);
84
- }
85
- }
86
-
87
- .stepperDescription {
88
- display: flex;
89
- justify-content: center;
90
- color: var(--color-white);
91
- font-family: var(--typography-paragraph-small-font-family);
92
- font-weight: var(--typography-paragraph-small-font-weight);
93
- font-size: var(--typography-paragraph-small-font-size);
94
- line-height: var(--typography-paragraph-small-line-height);
95
- letter-spacing: var(--typography-paragraph-small-letter-spacing);
96
-
97
- @media (width >= 768px) {
98
- /* sr hidden styles */
99
- position: absolute;
100
- width: 0;
101
- height: 0;
102
- overflow: hidden;
103
- }
104
- }
105
-
106
- // Some defensive CSS for many steps on desktop screens
107
- @container step (min-width: 4.5rem) {
108
- .stepName {
109
- display: inline;
110
- }
111
- }
package/src/__layout__/Workflow/v2/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx DELETED
@@ -1,143 +0,0 @@
1
- import React from "react"
2
- import classnames from "classnames"
3
- import {
4
- IndicatorActiveIcon,
5
- IndicatorInactiveIcon,
6
- SuccessIcon,
7
- } from "~components/Icon"
8
- import { Text } from "~components/Text"
9
- import { VisuallyHidden } from "~components/VisuallyHidden"
10
- import styles from "./ProgressStepper.module.scss"
11
-
12
- export type Step = {
13
- id: string
14
- label: string
15
- }
16
-
17
- export type Steps = [Step, ...Step[]]
18
-
19
- export type ProgressStepperProps = {
20
- /** The id reference to within a Step object */
21
- currentStepId: Step["id"]
22
- /** A non-empty array of Steps */
23
- steps: Steps
24
- isComplete?: boolean
25
- }
26
-
27
- const getStepStatus = (
28
- isComplete: boolean,
29
- isCurrentStep: boolean,
30
- step: Step,
31
- index: number
32
- ): {
33
- icon: JSX.Element
34
- accessibleName: string
35
- } => {
36
- if (isComplete) {
37
- return {
38
- icon: (
39
- <SuccessIcon
40
- key={index}
41
- inheritSize
42
- role="presentation"
43
- classNameOverride="success"
44
- />
45
- ),
46
- accessibleName: `Completed: ${step.label}`,
47
- }
48
- }
49
- if (isCurrentStep) {
50
- return {
51
- icon: (
52
- <IndicatorActiveIcon
53
- key={index}
54
- inheritSize
55
- role="presentation"
56
- classNameOverride="active"
57
- />
58
- ),
59
- accessibleName: `Current: ${step.label}`,
60
- }
61
- }
62
- return {
63
- icon: (
64
- <IndicatorInactiveIcon
65
- key={index}
66
- inheritSize
67
- classNameOverride="incomplete"
68
- role="presentation"
69
- />
70
- ),
71
- accessibleName: `Not started: ${step.label}`,
72
- }
73
- }
74
-
75
- export const ProgressStepper = ({
76
- currentStepId,
77
- steps,
78
- isComplete = false,
79
- ...restprops
80
- }: ProgressStepperProps): JSX.Element => {
81
- const currentStepIndex = steps.findIndex(
82
- stepItem => stepItem.id === currentStepId
83
- )
84
-
85
- return (
86
- <div className={styles.stepsContainer}>
87
- <ol
88
- className={styles.stepList}
89
- {...restprops}
90
- aria-labelledby="stepper-description"
91
- >
92
- {steps.map((step, index: number) => {
93
- const isCurrentStep = currentStepIndex === index
94
- const isCompletedStep = index < currentStepIndex || isComplete
95
- const { accessibleName, icon: Icon } = getStepStatus(
96
- isCompletedStep,
97
- isCurrentStep,
98
- step,
99
- index
100
- )
101
- return (
102
- <li
103
- className={styles.step}
104
- key={`${step.id}`}
105
- aria-current={isCurrentStep}
106
- >
107
- <div className={styles.stepContent}>
108
- <VisuallyHidden>
109
- {/* will need to be translated */}
110
- {accessibleName}
111
- </VisuallyHidden>
112
- <Text
113
- classNameOverride={styles.stepName}
114
- variant="small"
115
- color="white"
116
- aria-hidden
117
- >
118
- {step.label}
119
- </Text>
120
- <div className={styles.stepIndicator}>
121
- <span className={styles.stepIcon}>{Icon}</span>
122
- </div>
123
- {index < steps.length - 1 && (
124
- <div
125
- className={classnames([
126
- styles.stepDivider,
127
- isCompletedStep && styles.completedStep,
128
- ])}
129
- />
130
- )}
131
- </div>
132
- </li>
133
- )
134
- })}
135
- </ol>
136
- <span className={styles.stepperDescription} id="stepper-description">
137
- Step {currentStepIndex + 1} of {steps.length}
138
- </span>
139
- </div>
140
- )
141
- }
142
-
143
- ProgressStepper.displayName = "Workflow.ProgressStepper"