@kaizen/components 1.44.0 → 1.45.0

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 (8) hide show
  1. package/dist/cjs/Button/IconButton/IconButton.cjs +5 -3
  2. package/dist/cjs/index.css +2 -2
  3. package/dist/esm/Button/IconButton/IconButton.mjs +6 -4
  4. package/dist/esm/index.css +2 -2
  5. package/dist/styles.css +1 -1
  6. package/dist/types/Button/IconButton/IconButton.d.ts +3 -13
  7. package/package.json +3 -3
  8. package/src/Button/IconButton/IconButton.tsx +6 -3
package/dist/cjs/Button/IconButton/IconButton.cjs CHANGED
@@ -14,11 +14,13 @@ var React__default = /*#__PURE__*/_interopDefault(React);
14
14
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
15
15
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
16
16
  */
17
- var IconButton = function (props) {
17
+ var IconButton = React.forwardRef(function (props, ref) {
18
18
  return React__default.default.createElement(GenericButton.GenericButton, tslib.__assign({
19
19
  iconButton: true
20
- }, props));
21
- };
20
+ }, props, {
21
+ ref: ref
22
+ }));
23
+ });
22
24
  IconButton.defaultProps = {
23
25
  primary: false,
24
26
  destructive: false,
package/dist/cjs/index.css CHANGED
@@ -2,10 +2,10 @@
2
2
  .Main-module_main__hMyB1{z-index:0}
3
3
  .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
4
4
  .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
5
+ .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
5
6
  .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
6
- .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
7
7
  .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
8
- .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
8
+ .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
9
9
  .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
10
10
  .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
11
11
  .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}
package/dist/esm/Button/IconButton/IconButton.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __assign } from 'tslib';
2
- import React from 'react';
2
+ import React, { forwardRef } from 'react';
3
3
  import { GenericButton } from '../GenericButton/GenericButton.mjs';
4
4
 
5
5
  /**
@@ -7,11 +7,13 @@ import { GenericButton } from '../GenericButton/GenericButton.mjs';
7
7
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
8
8
  */
9
9
  const IconButton = /*#__PURE__*/function () {
10
- const IconButton = function (props) {
10
+ const IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
11
11
  return /*#__PURE__*/React.createElement(GenericButton, __assign({
12
12
  iconButton: true
13
- }, props));
14
- };
13
+ }, props, {
14
+ ref: ref
15
+ }));
16
+ });
15
17
  IconButton.defaultProps = {
16
18
  primary: false,
17
19
  destructive: false,
package/dist/esm/index.css CHANGED
@@ -2,10 +2,10 @@
2
2
  .Main-module_main__hMyB1{z-index:0}
3
3
  .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
4
4
  .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
5
+ .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
5
6
  .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
6
- .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
7
7
  .Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
8
- .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
8
+ .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
9
9
  .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
10
10
  .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}
11
11
  .SVG-module_icon__8J5Ev{display:inline-block;height:20px;width:20px}.SVG-module_icon__8J5Ev>use{pointer-events:none}@media screen and (-ms-high-contrast:active){.SVG-module_icon__8J5Ev{color:#000}}@media screen and (-ms-high-contrast:white-on-black){.SVG-module_icon__8J5Ev{color:#fff}}@media screen and (-ms-high-contrast:black-on-white){.SVG-module_icon__8J5Ev{color:#000}}.SVG-module_inheritSize__Q8iam{display:block;height:inherit;width:inherit}