@kaizen/components 3.0.7 → 3.0.8
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/cjs/src/FieldMessage/FieldMessage.cjs +1 -1
- package/dist/cjs/src/FieldMessage/FieldMessage.module.css.cjs +13 -0
- package/dist/cjs/src/ProgressBar/ProgressBar.cjs +1 -1
- package/dist/cjs/src/ProgressBar/ProgressBar.module.css.cjs +14 -0
- package/dist/cjs/src/ProgressBar/subcomponents/Label/Label.cjs +1 -1
- package/dist/cjs/src/ProgressBar/subcomponents/Label/Label.module.css.cjs +6 -0
- package/dist/esm/src/FieldMessage/FieldMessage.mjs +4 -4
- package/dist/esm/src/FieldMessage/FieldMessage.module.css.mjs +11 -0
- package/dist/esm/src/ProgressBar/ProgressBar.mjs +4 -4
- package/dist/esm/src/ProgressBar/ProgressBar.module.css.mjs +12 -0
- package/dist/esm/src/ProgressBar/subcomponents/Label/Label.mjs +2 -2
- package/dist/esm/src/ProgressBar/subcomponents/Label/Label.module.css.mjs +4 -0
- package/dist/styles.css +3 -3
- package/package.json +8 -8
- package/src/FieldMessage/FieldMessage.module.css +74 -0
- package/src/FieldMessage/FieldMessage.tsx +1 -1
- package/src/ProgressBar/{ProgressBar.module.scss → ProgressBar.module.css} +11 -16
- package/src/ProgressBar/ProgressBar.tsx +1 -1
- package/src/ProgressBar/subcomponents/Label/Label.module.css +7 -0
- package/src/ProgressBar/subcomponents/Label/Label.tsx +1 -1
- package/dist/cjs/src/FieldMessage/FieldMessage.module.scss.cjs +0 -13
- package/dist/cjs/src/ProgressBar/ProgressBar.module.scss.cjs +0 -14
- package/dist/cjs/src/ProgressBar/subcomponents/Label/Label.module.scss.cjs +0 -6
- package/dist/esm/src/FieldMessage/FieldMessage.module.scss.mjs +0 -11
- package/dist/esm/src/ProgressBar/ProgressBar.module.scss.mjs +0 -12
- package/dist/esm/src/ProgressBar/subcomponents/Label/Label.module.scss.mjs +0 -4
- package/src/FieldMessage/FieldMessage.module.scss +0 -76
- package/src/ProgressBar/subcomponents/Label/Label.module.scss +0 -10
|
@@ -5,7 +5,7 @@ var React = require('react');
|
|
|
5
5
|
var classnames = require('classnames');
|
|
6
6
|
var Icon = require('../Icon/Icon.cjs');
|
|
7
7
|
var Text = require('../Text/Text.cjs');
|
|
8
|
-
var FieldMessage_module = require('./FieldMessage.module.
|
|
8
|
+
var FieldMessage_module = require('./FieldMessage.module.css.cjs');
|
|
9
9
|
function _interopDefault(e) {
|
|
10
10
|
return e && e.__esModule ? e : {
|
|
11
11
|
default: e
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var modules_5a29f07d = {
|
|
4
|
+
"message": "FieldMessage_module_message__f0a00132",
|
|
5
|
+
"default": "FieldMessage_module_default__f0a00132",
|
|
6
|
+
"reversed": "FieldMessage_module_reversed__f0a00132",
|
|
7
|
+
"error": "FieldMessage_module_error__f0a00132",
|
|
8
|
+
"caution": "FieldMessage_module_caution__f0a00132",
|
|
9
|
+
"positionBottom": "FieldMessage_module_positionBottom__f0a00132",
|
|
10
|
+
"positionTop": "FieldMessage_module_positionTop__f0a00132",
|
|
11
|
+
"warningIcon": "FieldMessage_module_warningIcon__f0a00132"
|
|
12
|
+
};
|
|
13
|
+
module.exports = modules_5a29f07d;
|
|
@@ -6,7 +6,7 @@ var classnames = require('classnames');
|
|
|
6
6
|
var Heading = require('../Heading/Heading.cjs');
|
|
7
7
|
var Label = require('./subcomponents/Label/Label.cjs');
|
|
8
8
|
var calculatePercentage = require('./utils/calculatePercentage.cjs');
|
|
9
|
-
var ProgressBar_module = require('./ProgressBar.module.
|
|
9
|
+
var ProgressBar_module = require('./ProgressBar.module.css.cjs');
|
|
10
10
|
function _interopDefault(e) {
|
|
11
11
|
return e && e.__esModule ? e : {
|
|
12
12
|
default: e
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var modules_5b86df9f = {
|
|
4
|
+
"subtext": "ProgressBar_module_subtext__cec41633",
|
|
5
|
+
"progressBackground": "ProgressBar_module_progressBackground__cec41633",
|
|
6
|
+
"progress": "ProgressBar_module_progress__cec41633",
|
|
7
|
+
"blue": "ProgressBar_module_blue__cec41633",
|
|
8
|
+
"green": "ProgressBar_module_green__cec41633",
|
|
9
|
+
"red": "ProgressBar_module_red__cec41633",
|
|
10
|
+
"yellow": "ProgressBar_module_yellow__cec41633",
|
|
11
|
+
"isAnimating": "ProgressBar_module_isAnimating__cec41633",
|
|
12
|
+
"pulse": "ProgressBar_module_pulse__cec41633"
|
|
13
|
+
};
|
|
14
|
+
module.exports = modules_5b86df9f;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var Heading = require('../../../Heading/Heading.cjs');
|
|
5
|
-
var Label_module = require('./Label.module.
|
|
5
|
+
var Label_module = require('./Label.module.css.cjs');
|
|
6
6
|
function _interopDefault(e) {
|
|
7
7
|
return e && e.__esModule ? e : {
|
|
8
8
|
default: e
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Icon } from '../Icon/Icon.mjs';
|
|
5
5
|
import { Text } from '../Text/Text.mjs';
|
|
6
|
-
import
|
|
6
|
+
import modules_5a29f07d from './FieldMessage.module.css.mjs';
|
|
7
7
|
const FieldMessage = /*#__PURE__*/function () {
|
|
8
8
|
const FieldMessage = function (_a) {
|
|
9
9
|
var message = _a.message,
|
|
@@ -17,15 +17,15 @@ const FieldMessage = /*#__PURE__*/function () {
|
|
|
17
17
|
restProps = __rest(_a, ["message", "status", "position", "reversed", "classNameOverride"]);
|
|
18
18
|
var textColor = status === 'default' || status === 'success' ? reversed ? 'white-reduced-opacity' : 'dark-reduced-opacity' : 'dark';
|
|
19
19
|
return /*#__PURE__*/React.createElement("div", __assign({
|
|
20
|
-
className: classnames(
|
|
20
|
+
className: classnames(modules_5a29f07d.message, modules_5a29f07d[status], classNameOverride, reversed && modules_5a29f07d.reversed, position === 'bottom' && modules_5a29f07d.positionBottom, position === 'top' && modules_5a29f07d.positionTop)
|
|
21
21
|
}, restProps), (status === 'error' || status === 'caution') && (/*#__PURE__*/React.createElement("span", {
|
|
22
|
-
className:
|
|
22
|
+
className: modules_5a29f07d.warningIcon
|
|
23
23
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
24
24
|
name: status === 'error' ? 'error' : 'warning',
|
|
25
25
|
isFilled: true,
|
|
26
26
|
alt: "".concat(status, " message")
|
|
27
27
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
28
|
-
className:
|
|
28
|
+
className: modules_5a29f07d.message
|
|
29
29
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
30
30
|
variant: "small",
|
|
31
31
|
tag: typeof message === 'string' ? 'p' : 'div',
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
var modules_5a29f07d = {
|
|
2
|
+
"message": "FieldMessage_module_message__f0a00132",
|
|
3
|
+
"default": "FieldMessage_module_default__f0a00132",
|
|
4
|
+
"reversed": "FieldMessage_module_reversed__f0a00132",
|
|
5
|
+
"error": "FieldMessage_module_error__f0a00132",
|
|
6
|
+
"caution": "FieldMessage_module_caution__f0a00132",
|
|
7
|
+
"positionBottom": "FieldMessage_module_positionBottom__f0a00132",
|
|
8
|
+
"positionTop": "FieldMessage_module_positionTop__f0a00132",
|
|
9
|
+
"warningIcon": "FieldMessage_module_warningIcon__f0a00132"
|
|
10
|
+
};
|
|
11
|
+
export { modules_5a29f07d as default };
|
|
@@ -4,7 +4,7 @@ import classnames from 'classnames';
|
|
|
4
4
|
import { Heading } from '../Heading/Heading.mjs';
|
|
5
5
|
import { Label } from './subcomponents/Label/Label.mjs';
|
|
6
6
|
import { calculatePercentage } from './utils/calculatePercentage.mjs';
|
|
7
|
-
import
|
|
7
|
+
import modules_5b86df9f from './ProgressBar.module.css.mjs';
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896891/Progress+Bar Guidance} |
|
|
@@ -36,14 +36,14 @@ const ProgressBar = /*#__PURE__*/function () {
|
|
|
36
36
|
content: label,
|
|
37
37
|
isReversed: isReversed
|
|
38
38
|
}), /*#__PURE__*/React.createElement("div", {
|
|
39
|
-
className:
|
|
39
|
+
className: modules_5b86df9f.progressBackground
|
|
40
40
|
}, /*#__PURE__*/React.createElement("div", {
|
|
41
|
-
className: classnames(
|
|
41
|
+
className: classnames(modules_5b86df9f.progress, modules_5b86df9f[color], isAnimating && modules_5b86df9f.isAnimating),
|
|
42
42
|
style: {
|
|
43
43
|
transform: "translateX(-".concat(100 - percentage, "%")
|
|
44
44
|
}
|
|
45
45
|
})), subtext && (/*#__PURE__*/React.createElement("div", {
|
|
46
|
-
className:
|
|
46
|
+
className: modules_5b86df9f.subtext
|
|
47
47
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
48
48
|
variant: "heading-6",
|
|
49
49
|
tag: "p",
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
var modules_5b86df9f = {
|
|
2
|
+
"subtext": "ProgressBar_module_subtext__cec41633",
|
|
3
|
+
"progressBackground": "ProgressBar_module_progressBackground__cec41633",
|
|
4
|
+
"progress": "ProgressBar_module_progress__cec41633",
|
|
5
|
+
"blue": "ProgressBar_module_blue__cec41633",
|
|
6
|
+
"green": "ProgressBar_module_green__cec41633",
|
|
7
|
+
"red": "ProgressBar_module_red__cec41633",
|
|
8
|
+
"yellow": "ProgressBar_module_yellow__cec41633",
|
|
9
|
+
"isAnimating": "ProgressBar_module_isAnimating__cec41633",
|
|
10
|
+
"pulse": "ProgressBar_module_pulse__cec41633"
|
|
11
|
+
};
|
|
12
|
+
export { modules_5b86df9f as default };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Heading } from '../../../Heading/Heading.mjs';
|
|
3
|
-
import
|
|
3
|
+
import modules_536e8d56 from './Label.module.css.mjs';
|
|
4
4
|
const Label = /*#__PURE__*/function () {
|
|
5
5
|
const Label = function (_a) {
|
|
6
6
|
var content = _a.content,
|
|
7
7
|
_b = _a.isReversed,
|
|
8
8
|
isReversed = _b === void 0 ? false : _b;
|
|
9
9
|
return /*#__PURE__*/React.createElement("div", {
|
|
10
|
-
className:
|
|
10
|
+
className: modules_536e8d56.label
|
|
11
11
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
12
12
|
variant: "heading-4",
|
|
13
13
|
tag: "p",
|
package/dist/styles.css
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
@layer kz-components{.DateInputDescription_module_dateInputDescription__f9a2e797{display:inline}.DateInputDescription_module_dateInputFormatContainer__f9a2e797{margin-inline-start:var(--spacing-xs,.375rem);white-space:nowrap}.DateInputDescription_module_descriptionInputFormat__f9a2e797{display:inline-flex;white-space:nowrap}.DateInputDescription_module_labelSeparator__f9a2e797{margin-inline-end:var(--spacing-xs,.375rem)}}
|
|
44
44
|
@layer kz-components{.DateInputWithIconButton_module_iconButton__dffd0a18{appearance:none;background:transparent;border:none;border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) transparent;border-radius:var(--border-solid-border-radius,7px);color:inherit;display:inline;display:flex;font:inherit;inset-inline-end:-.35rem;margin:0;padding:0;padding:var(--spacing-6);position:relative;top:-40%}.DateInputWithIconButton_module_iconButton__dffd0a18 :focus{outline:none}.DateInputWithIconButton_module_iconButton__dffd0a18:focus-visible{outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:-2px}.DateInputWithIconButton_module_calendarActive__dffd0a18,.DateInputWithIconButton_module_iconButton__dffd0a18:hover:not([disabled]){background-color:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.DateInputWithIconButton_module_disabled__dffd0a18{opacity:.3}}
|
|
45
45
|
@layer kz-components{.CalendarPopover_module_calendarPopover__65fb3ab2{background-color:var(--color-white,#fff);border-radius:var(--border-borderless-border-radius,7px);box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08));box-sizing:border-box;overflow:auto;padding:var(--spacing-12,.75rem) var(--spacing-8,.5rem);z-index:1010}@media (min-width:768px){.CalendarPopover_module_calendarPopover__65fb3ab2{padding:var(--spacing-24,1.5rem)}}.CalendarPopover_module_calendarPopover__65fb3ab2[popover]:popover-open{inset:unset;margin:0;z-index:unset}}
|
|
46
|
-
@layer kz-components{.
|
|
46
|
+
@layer kz-components{:root{--message-icon-size:1.25rem;--validation-message-padding:0.5625rem;--form-text-color-label:rgb(var(--color-purple-800-rgb),0.7);--form-text-color-label-reversed:rgb(var(--color-white-rgb),0.8)}.FieldMessage_module_message__f0a00132{align-items:center;display:flex;gap:var(--spacing-6);position:relative}.FieldMessage_module_default__f0a00132{color:var(--form-text-color-label);&.FieldMessage_module_reversed__f0a00132{color:var(--form-text-color-label-reversed)}}.FieldMessage_module_caution__f0a00132,.FieldMessage_module_error__f0a00132{border-radius:var(--border-solid-border-radius);color:var(--color-purple-800);padding:var(--validation-message-padding)}.FieldMessage_module_error__f0a00132{background:var(--color-red-100);opacity:1;&.FieldMessage_module_reversed__f0a00132{background:var(--color-red-300)}}.FieldMessage_module_caution__f0a00132{background:var(--color-yellow-100);opacity:1;&.FieldMessage_module_reversed__f0a00132{background:var(--color-yellow-400)}}.FieldMessage_module_positionBottom__f0a00132{margin-top:var(--spacing-6)}.FieldMessage_module_positionTop__f0a00132{margin-bottom:var(--spacing-6)}.FieldMessage_module_warningIcon__f0a00132{align-self:flex-start;display:inline-flex;width:var(--message-icon-size);.FieldMessage_module_error__f0a00132 &{color:var(--color-red-500)}.FieldMessage_module_caution__f0a00132 &{color:var(--color-yellow-700)}.FieldMessage_module_reversed__f0a00132 &{color:var(--color-purple-800)}}}
|
|
47
47
|
@layer kz-components{.DateInputField_module_disabled__e4d317ee{opacity:.3}}
|
|
48
48
|
@layer kz-components{.LegacyCalendarRange_module_nav__a16a0050{color:var(--color-purple-800,#2f2438);display:flex;justify-content:space-between;position:absolute;top:-.25rem;width:100%}.LegacyCalendarRange_module_dayRangeEnd__a16a0050,.LegacyCalendarRange_module_dayRangeStart__a16a0050{background-color:var(--color-blue-500,#0168b3);color:var(--color-white,#fff)}.LegacyCalendarRange_module_dayRangeMiddle__a16a0050{background-color:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.LegacyCalendarRange_module_dayRangeMiddle__a16a0050 [class*=_button_]{color:var(--color-blue-500,#0168b3)}.LegacyCalendarRange_module_chevronIcon__a16a0050{pointer-events:none}}
|
|
49
49
|
@layer kz-components{.DateRangePicker_module_button__a8ccc276{align-items:center;appearance:none;background:transparent;background-clip:padding-box;background-color:var(--color-white,#fff);border:none;border:var(--border-solid-border-width,2px) var(--border-solid-border-style,solid) var(--color-gray-500,#878792);border-radius:var(--border-solid-border-radius,7px);color:inherit;color:var(--color-purple-800,#2f2438);display:inline;display:flex;font:inherit;font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-size:var(--typography-paragraph-body-font-size,1rem);font-weight:var(--typography-paragraph-body-font-weight,400);height:48px;letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);line-height:1.5;margin:0;margin-top:var(--spacing-6,.375rem);padding:0;padding:0 var(--spacing-sm,.75rem);position:relative;text-align:start;width:100%}.DateRangePicker_module_button__a8ccc276:focus-visible:not([disabled]),.DateRangePicker_module_button__a8ccc276:hover:not([disabled]){background-color:var(--color-gray-200,#f4f4f5);border-color:var(--color-gray-600,#524e56);color:var(--color-purple-800,#2f2438)}.DateRangePicker_module_button__a8ccc276:focus-visible:not([disabled]){outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:1px}.DateRangePicker_module_button__a8ccc276 :focus:not([disabled]){outline:none}.DateRangePicker_module_button__a8ccc276.DateRangePicker_module_disabled__a8ccc276{background:var(--color-white,#fff);border-color:rgba(var(--color-gray-500-rgb,135,135,146),.7);color:rgba(var(--color-purple-800-rgb,47,36,56),.7);opacity:.5}.DateRangePicker_module_button__a8ccc276 .DateRangePicker_module_value__a8ccc276{padding-inline:1.75rem var(--spacing-sm,.75rem)}.DateRangePicker_module_startIconAdornment__a8ccc276{margin-top:-1px}.DateRangePicker_module_withStartIconAdornment__a8ccc276 .DateRangePicker_module_startIconAdornment__a8ccc276{color:var(--color-purple-800,#2f2438);height:1.25rem;opacity:.5;position:absolute;top:50%;inset-inline:var(--spacing-sm,.75rem) auto;transform:translateY(-50%)}.DateRangePicker_module_withStartIconAdornment__a8ccc276:focus-within:not(.DateRangePicker_module_disabled__a8ccc276) .DateRangePicker_module_startIconAdornment__a8ccc276,.DateRangePicker_module_withStartIconAdornment__a8ccc276:hover:not(.DateRangePicker_module_disabled__a8ccc276) .DateRangePicker_module_startIconAdornment__a8ccc276{opacity:.7}.DateRangePicker_module_withStartIconAdornment__a8ccc276 .DateRangePicker_module_button__a8ccc276{padding-inline:calc(var(--spacing-md, 1.5rem) + 1.25rem) var(--spacing-sm,.75rem)}}
|
|
@@ -124,8 +124,8 @@
|
|
|
124
124
|
@layer kz-components{.TruncateIndicator_module_truncateIndicatorWrapper__a6a2a3a5{align-items:center;background-color:transparent;color:rgb(var(color-purple-800-rgb),.7);display:flex;justify-content:center;margin:0 var(--spacing-4);width:36px}}
|
|
125
125
|
@layer kz-components{.Pagination_module_container__b254d61d{align-items:center;display:flex;justify-content:center}.Pagination_module_pagesIndicatorWrapper__b254d61d{display:flex;flex-direction:row;justify-content:space-around}.Pagination_module_arrowIconWrapper__b254d61d{align-items:center;background-color:transparent;border:var(--border-focus-ring-border-width,2px) var(--border-focus-ring-border-style,solid) var(--color-blue-300,#73c0e8);border-radius:18px;box-sizing:border-box;color:var(--color-blue-500,#0168b3);display:flex;height:36px;justify-content:center;margin:0 5px;width:36px}.Pagination_module_arrowIconWrapper__b254d61d:disabled{opacity:35%;pointer-events:none}.Pagination_module_arrowIconWrapper__b254d61d:hover{background-color:var(--color-blue-100,#e6f6ff)}.Pagination_module_arrowIconWrapper__b254d61d:focus{background-color:var(--color-blue-200,#bde2f5)}.Pagination_module_arrowIconWrapper__b254d61d:focus:focus-visible{outline:none}.Pagination_module_arrowIconWrapper__b254d61d:focus .Pagination_module_pageIndicatorFocusRing__b254d61d{border:var(--border-focus-ring-border-width,2px) var(--border-focus-ring-border-style,solid) var(--color-blue-500,#0168b3)}}
|
|
126
126
|
@layer kz-components{.Popover_module_root__7bb9dc9f{left:50%;position:absolute;width:220px}.Popover_module_defaultBox__7bb9dc9f{--border-width:var(--border-width-1);background:var(--color-white);border:var(--border-width) var(--border-solid-border-style);border-color:var(--color-gray-500);border-radius:var(--border-solid-border-radius,7px);color:var(--color-purple-800,#2f2438);filter:drop-shadow(0 0 7px rgba(0,0,0,.1));padding-block:calc(var(--spacing-12) - var(--border-width)) calc(var(--spacing-16) - var(--border-width));padding-inline:calc(var(--spacing-16) - var(--border-width));text-align:start}.Popover_module_defaultArrow__7bb9dc9f:after,.Popover_module_defaultArrow__7bb9dc9f:before{border-left:7px solid transparent;border-right:7px solid transparent;content:"";left:0;position:absolute;top:0}.Popover_module_defaultArrow__7bb9dc9f:before{border-top:7px solid var(--color-gray-500)}.Popover_module_defaultArrow__7bb9dc9f:after{border-top:7px solid var(--color-white);margin-top:-1.5px;z-index:1}.Popover_module_header__7bb9dc9f{align-items:center;display:flex;margin-bottom:var(--spacing-6);padding-inline-end:var(--spacing-24);position:relative;white-space:nowrap}.Popover_module_container__7bb9dc9f{position:relative;white-space:pre-line}.Popover_module_close__7bb9dc9f{appearance:none;background:transparent;border:none;color:inherit;color:rgb(var(--color-purple-800-rgb,47,36,56),.7);display:inline;display:inherit;font:inherit;margin:0 0 0 auto;padding:0;position:absolute;right:0}.Popover_module_close__7bb9dc9f:hover{color:var(--color-purple-800,#2f2438)}.Popover_module_close__7bb9dc9f:focus{outline:none}.Popover_module_close__7bb9dc9f:focus-visible{border-radius:var(--border-borderless-border-radius,7px);color:var(--color-purple-800,#2f2438);outline:var(--color-blue-500,#0168b3) var(--border-focus-ring-border-style,solid) var(--border-focus-ring-border-width,2px);outline-offset:calc(var(--border-focus-ring-border-width, 2px)*-1)}.Popover_module_arrowWrapper__7bb9dc9f{height:7px;position:absolute;width:14px}.Popover_module_arrow__7bb9dc9f{height:7px;width:14px}[data-popper-placement^=bottom] .Popover_module_arrowWrapper__7bb9dc9f{bottom:100%;left:50%;margin-top:-9px}[data-popper-placement^=bottom] .Popover_module_arrowWrapper__7bb9dc9f .Popover_module_arrow__7bb9dc9f{transform:rotate(180deg)}[data-popper-placement^=left] .Popover_module_arrowWrapper__7bb9dc9f{margin-right:-10px;right:0}[data-popper-placement^=left] .Popover_module_arrowWrapper__7bb9dc9f .Popover_module_arrow__7bb9dc9f{transform:rotate(270deg)}[data-popper-placement^=right] .Popover_module_arrowWrapper__7bb9dc9f{left:0;margin-left:-10px}[data-popper-placement^=right] .Popover_module_arrowWrapper__7bb9dc9f .Popover_module_arrow__7bb9dc9f{transform:rotate(90deg)}[data-popper-placement^=top] .Popover_module_arrowWrapper__7bb9dc9f{left:50%;top:100%}.Popover_module_large__7bb9dc9f{max-width:450px;width:auto}.Popover_module_singleLine__7bb9dc9f{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
|
|
127
|
-
@layer kz-components{.
|
|
128
|
-
@layer kz-components{.
|
|
127
|
+
@layer kz-components{.Label_module_label__5020ee90{color:var(--color-purple-800);padding-bottom:var(--spacing-6);text-align:center}}
|
|
128
|
+
@layer kz-components{.ProgressBar_module_subtext__cec41633{color:var(--color-purple-800);opacity:.8;padding-top:var(--spacing-6);text-align:center}.ProgressBar_module_progressBackground__cec41633{background:var(--color-gray-300);border-radius:10px;height:10px;overflow:hidden;position:relative;width:100%}.ProgressBar_module_progress__cec41633{background-color:var(--progressbar-background-color);border-radius:10px;inset:0;overflow:hidden;position:absolute;transition:transform .2s ease}.ProgressBar_module_blue__cec41633{--progressbar-background-color:var(--color-blue-400)}.ProgressBar_module_green__cec41633{--progressbar-background-color:var(--color-green-400)}.ProgressBar_module_red__cec41633{--progressbar-background-color:var(--color-red-400)}.ProgressBar_module_yellow__cec41633{--progressbar-background-color:var(--color-yellow-400)}.ProgressBar_module_isAnimating__cec41633{&:after{animation:ProgressBar_module_pulse__cec41633 2s infinite;background:linear-gradient(90deg,transparent,var(--color-white) 75%,transparent);bottom:0;content:"";left:0;opacity:.25;position:absolute;top:0;transition:opacity .2s;width:50%}}}@keyframes ProgressBar_module_pulse__cec41633{0%{transform:translateX(-100%)}to{transform:translateX(200%)}}
|
|
129
129
|
@layer kz-components{.Radio_module_radioInput__42a08aa9{opacity:0;position:absolute;.ideal-sans &{position:absolute}}.Radio_module_icon__42a08aa9{--icon-size:10px;--icon-offset:5px;background:var(--color-gray-600);border-radius:50%;height:var(--icon-size);left:var(--icon-offset);position:absolute;top:var(--icon-offset);width:var(--icon-size);&.Radio_module_reversed__42a08aa9{background:var(--color-white)}@media (forced-colors:active){border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width:var(--icon-offset);border-left-color:transparent;border-left-style:solid;border-left-width:var(--icon-offset);border-right-color:transparent;border-right-style:solid;border-right-width:var(--icon-offset);border-top-color:transparent;border-top-style:solid;border-top-width:var(--icon-offset);height:0;width:0}}.Radio_module_box__42a08aa9{--radio-size:24px;--focus-ring-offset:2px;background:var(--color-white);border:var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);border-radius:50%;box-sizing:border-box;display:block;height:var(--radio-size);position:relative;top:0;width:var(--radio-size);.Radio_module_radioInput__42a08aa9:focus:not([disabled])+&{border-color:var(--color-gray-600);outline:var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) var(--color-blue-500);outline-offset:1px}.Radio_module_radioInput__42a08aa9:not([disabled])+&:hover{background-color:var(--color-gray-200);border-color:var(--color-gray-600)}&.Radio_module_reversed__42a08aa9{background:transparent;border:var(--border-solid-border-width) var(--border-solid-border-style) rgb(var(--color-white-rgb),.65);.Radio_module_radioInput__42a08aa9:focus:not([disabled])+&{border-color:var(--color-white);outline-color:var(--color-blue-300)}.Radio_module_radioInput__42a08aa9:not([disabled])+&:hover{background-color:transparent;border-color:var(--color-white)}}}}
|
|
130
130
|
@layer kz-components{.RadioField_module_container__2c9192c8{margin-bottom:var(--spacing-sm);overflow-wrap:anywhere;position:relative;word-break:normal;label{-webkit-tap-highlight-color:transparent;.ideal-sans &{font-size:var(--typography-paragraph-body-font-size);padding-top:0}}&.RadioField_module_selected__2c9192c8 label{font-family:var(--typography-paragraph-body-font-family);font-size:var(--typography-paragraph-body-font-size);font-weight:var(--typography-paragraph-bold-font-weight);letter-spacing:var(--typography-paragraph-body-letter-spacing);line-height:var(--typography-paragraph-body-line-height);position:static}&:not(.RadioField_module_reversed__2c9192c8) label:hover input:not([disabled])+span{background-color:var(--color-gray-200);border-color:var(--color-gray-600)}&.RadioField_module_reversed__2c9192c8 label:hover input:not([disabled])+span{background-color:transparent;border-color:var(--color-white)}}}
|
|
131
131
|
@layer kz-components{.RadioGroup_module_radioGroupLabel__85bbd39b{margin-bottom:var(--spacing-sm);label{.ideal-sans &{padding-top:0}}&.RadioGroup_module_reversed__85bbd39b{color:var(--color-white)}}.RadioGroup_module_radioGroupContainer__85bbd39b{display:flex;flex-direction:column;margin-bottom:var(--spacing-sm);&.RadioGroup_module_noBottomMargin__85bbd39b{margin-bottom:0}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kaizen/components",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.8",
|
|
4
4
|
"description": "Kaizen component library",
|
|
5
5
|
"author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
|
|
6
6
|
"homepage": "https://cultureamp.design",
|
|
@@ -110,9 +110,9 @@
|
|
|
110
110
|
"prosemirror-schema-basic": "^1.2.4",
|
|
111
111
|
"prosemirror-schema-list": "^1.5.1",
|
|
112
112
|
"prosemirror-state": "^1.4.4",
|
|
113
|
-
"prosemirror-transform": "^1.
|
|
113
|
+
"prosemirror-transform": "^1.12.0",
|
|
114
114
|
"prosemirror-utils": "^1.2.2",
|
|
115
|
-
"prosemirror-view": "^1.41.
|
|
115
|
+
"prosemirror-view": "^1.41.8",
|
|
116
116
|
"react-animate-height": "^3.2.3",
|
|
117
117
|
"react-aria": "^3.41.1",
|
|
118
118
|
"react-aria-components": "^1.10.1",
|
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
"react-popper": "^2.3.0",
|
|
123
123
|
"react-select": "^5.10.2",
|
|
124
124
|
"react-textfit": "^1.1.1",
|
|
125
|
-
"use-debounce": "^10.1.
|
|
125
|
+
"use-debounce": "^10.1.1",
|
|
126
126
|
"uuid": "^13.0.0"
|
|
127
127
|
},
|
|
128
128
|
"dependenciesComments": {
|
|
@@ -130,9 +130,9 @@
|
|
|
130
130
|
},
|
|
131
131
|
"devDependencies": {
|
|
132
132
|
"@cultureamp/frontend-apis": "13.3.0",
|
|
133
|
-
"@cultureamp/i18n-react-intl": "^4.1.
|
|
133
|
+
"@cultureamp/i18n-react-intl": "^4.1.1",
|
|
134
134
|
"@cultureamp/package-bundler": "^4.0.1",
|
|
135
|
-
"cssnano": "^7.1.
|
|
135
|
+
"cssnano": "^7.1.4",
|
|
136
136
|
"@testing-library/dom": "^10.4.1",
|
|
137
137
|
"@types/jest-axe": "^3.5.9",
|
|
138
138
|
"@types/lodash.debounce": "^4.0.9",
|
|
@@ -155,14 +155,14 @@
|
|
|
155
155
|
"react-dom": "^19.2.4",
|
|
156
156
|
"react-highlight": "^0.15.0",
|
|
157
157
|
"react-intl": "^7.1.14",
|
|
158
|
-
"rollup": "^4.
|
|
158
|
+
"rollup": "^4.60.1",
|
|
159
159
|
"sass": "1.79.6",
|
|
160
160
|
"serialize-query-params": "^2.0.4",
|
|
161
161
|
"svgo": "^4.0.1",
|
|
162
162
|
"ts-patch": "^3.3.0",
|
|
163
163
|
"tslib": "^2.8.1",
|
|
164
164
|
"tsx": "^4.21.0",
|
|
165
|
-
"@kaizen/design-tokens": "11.0.
|
|
165
|
+
"@kaizen/design-tokens": "11.0.3"
|
|
166
166
|
},
|
|
167
167
|
"devDependenciesComments": {
|
|
168
168
|
"sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
:root {
|
|
3
|
+
--message-icon-size: 1.25rem;
|
|
4
|
+
--validation-message-padding: 0.5625rem;
|
|
5
|
+
--form-text-color-label: rgb(var(--color-purple-800-rgb), 0.7);
|
|
6
|
+
--form-text-color-label-reversed: rgb(var(--color-white-rgb), 0.8);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.message {
|
|
10
|
+
display: flex;
|
|
11
|
+
position: relative;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--spacing-6);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.default {
|
|
17
|
+
color: var(--form-text-color-label);
|
|
18
|
+
|
|
19
|
+
&.reversed {
|
|
20
|
+
color: var(--form-text-color-label-reversed);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.error,
|
|
25
|
+
.caution {
|
|
26
|
+
border-radius: var(--border-solid-border-radius);
|
|
27
|
+
padding: var(--validation-message-padding);
|
|
28
|
+
color: var(--color-purple-800);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.error {
|
|
32
|
+
background: var(--color-red-100);
|
|
33
|
+
opacity: 1;
|
|
34
|
+
|
|
35
|
+
&.reversed {
|
|
36
|
+
background: var(--color-red-300);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.caution {
|
|
41
|
+
background: var(--color-yellow-100);
|
|
42
|
+
opacity: 1;
|
|
43
|
+
|
|
44
|
+
&.reversed {
|
|
45
|
+
background: var(--color-yellow-400);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.positionBottom {
|
|
50
|
+
margin-top: var(--spacing-6);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.positionTop {
|
|
54
|
+
margin-bottom: var(--spacing-6);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.warningIcon {
|
|
58
|
+
display: inline-flex;
|
|
59
|
+
width: var(--message-icon-size);
|
|
60
|
+
align-self: flex-start;
|
|
61
|
+
|
|
62
|
+
.error & {
|
|
63
|
+
color: var(--color-red-500);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.caution & {
|
|
67
|
+
color: var(--color-yellow-700);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.reversed & {
|
|
71
|
+
color: var(--color-purple-800);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -3,7 +3,7 @@ import classnames from 'classnames'
|
|
|
3
3
|
import { Icon } from '~components/Icon'
|
|
4
4
|
import { Text } from '~components/Text'
|
|
5
5
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
6
|
-
import styles from './FieldMessage.module.
|
|
6
|
+
import styles from './FieldMessage.module.css'
|
|
7
7
|
|
|
8
8
|
export type FieldMessageStatus = 'default' | 'success' | 'error' | 'caution'
|
|
9
9
|
|
|
@@ -1,21 +1,16 @@
|
|
|
1
|
-
@import '~@kaizen/design-tokens/sass/color';
|
|
2
|
-
@import '~@kaizen/design-tokens/sass/spacing';
|
|
3
|
-
|
|
4
1
|
@layer kz-components {
|
|
5
|
-
$height: 10px;
|
|
6
|
-
|
|
7
2
|
.subtext {
|
|
8
|
-
color:
|
|
9
|
-
padding-top:
|
|
3
|
+
color: var(--color-purple-800);
|
|
4
|
+
padding-top: var(--spacing-6);
|
|
10
5
|
text-align: center;
|
|
11
|
-
opacity:
|
|
6
|
+
opacity: 0.8;
|
|
12
7
|
}
|
|
13
8
|
|
|
14
9
|
.progressBackground {
|
|
15
10
|
width: 100%;
|
|
16
|
-
background:
|
|
17
|
-
border-radius:
|
|
18
|
-
height:
|
|
11
|
+
background: var(--color-gray-300);
|
|
12
|
+
border-radius: 10px;
|
|
13
|
+
height: 10px;
|
|
19
14
|
overflow: hidden;
|
|
20
15
|
position: relative;
|
|
21
16
|
}
|
|
@@ -23,15 +18,15 @@
|
|
|
23
18
|
.progress {
|
|
24
19
|
position: absolute;
|
|
25
20
|
inset: 0;
|
|
26
|
-
border-radius:
|
|
21
|
+
border-radius: 10px;
|
|
27
22
|
overflow: hidden;
|
|
28
23
|
transition: transform 200ms ease;
|
|
29
24
|
background-color: var(--progressbar-background-color);
|
|
30
25
|
}
|
|
31
26
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
27
|
+
/* ------------------------------
|
|
28
|
+
Colors
|
|
29
|
+
------------------------------ */
|
|
35
30
|
.blue {
|
|
36
31
|
--progressbar-background-color: var(--color-blue-400);
|
|
37
32
|
}
|
|
@@ -51,7 +46,7 @@
|
|
|
51
46
|
.isAnimating {
|
|
52
47
|
&::after {
|
|
53
48
|
background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
|
|
54
|
-
opacity: 25
|
|
49
|
+
opacity: 0.25;
|
|
55
50
|
content: '';
|
|
56
51
|
position: absolute;
|
|
57
52
|
top: 0;
|
|
@@ -4,7 +4,7 @@ import { Heading } from '~components/Heading'
|
|
|
4
4
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
5
5
|
import { Label } from './subcomponents/Label'
|
|
6
6
|
import { calculatePercentage } from './utils/calculatePercentage'
|
|
7
|
-
import styles from './ProgressBar.module.
|
|
7
|
+
import styles from './ProgressBar.module.css'
|
|
8
8
|
|
|
9
9
|
export type ProgressBarColor = {
|
|
10
10
|
color: 'blue' | 'green' | 'red' | 'yellow'
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var modules_dbd9cdc4 = {
|
|
4
|
-
"message": "FieldMessage_module_message__2f060ca4",
|
|
5
|
-
"default": "FieldMessage_module_default__2f060ca4",
|
|
6
|
-
"reversed": "FieldMessage_module_reversed__2f060ca4",
|
|
7
|
-
"error": "FieldMessage_module_error__2f060ca4",
|
|
8
|
-
"caution": "FieldMessage_module_caution__2f060ca4",
|
|
9
|
-
"positionBottom": "FieldMessage_module_positionBottom__2f060ca4",
|
|
10
|
-
"positionTop": "FieldMessage_module_positionTop__2f060ca4",
|
|
11
|
-
"warningIcon": "FieldMessage_module_warningIcon__2f060ca4"
|
|
12
|
-
};
|
|
13
|
-
module.exports = modules_dbd9cdc4;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var modules_ee15117b = {
|
|
4
|
-
"subtext": "ProgressBar_module_subtext__4a4d0fe0",
|
|
5
|
-
"progressBackground": "ProgressBar_module_progressBackground__4a4d0fe0",
|
|
6
|
-
"progress": "ProgressBar_module_progress__4a4d0fe0",
|
|
7
|
-
"blue": "ProgressBar_module_blue__4a4d0fe0",
|
|
8
|
-
"green": "ProgressBar_module_green__4a4d0fe0",
|
|
9
|
-
"red": "ProgressBar_module_red__4a4d0fe0",
|
|
10
|
-
"yellow": "ProgressBar_module_yellow__4a4d0fe0",
|
|
11
|
-
"isAnimating": "ProgressBar_module_isAnimating__4a4d0fe0",
|
|
12
|
-
"pulse": "ProgressBar_module_pulse__4a4d0fe0"
|
|
13
|
-
};
|
|
14
|
-
module.exports = modules_ee15117b;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
var modules_dbd9cdc4 = {
|
|
2
|
-
"message": "FieldMessage_module_message__2f060ca4",
|
|
3
|
-
"default": "FieldMessage_module_default__2f060ca4",
|
|
4
|
-
"reversed": "FieldMessage_module_reversed__2f060ca4",
|
|
5
|
-
"error": "FieldMessage_module_error__2f060ca4",
|
|
6
|
-
"caution": "FieldMessage_module_caution__2f060ca4",
|
|
7
|
-
"positionBottom": "FieldMessage_module_positionBottom__2f060ca4",
|
|
8
|
-
"positionTop": "FieldMessage_module_positionTop__2f060ca4",
|
|
9
|
-
"warningIcon": "FieldMessage_module_warningIcon__2f060ca4"
|
|
10
|
-
};
|
|
11
|
-
export { modules_dbd9cdc4 as default };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
var modules_ee15117b = {
|
|
2
|
-
"subtext": "ProgressBar_module_subtext__4a4d0fe0",
|
|
3
|
-
"progressBackground": "ProgressBar_module_progressBackground__4a4d0fe0",
|
|
4
|
-
"progress": "ProgressBar_module_progress__4a4d0fe0",
|
|
5
|
-
"blue": "ProgressBar_module_blue__4a4d0fe0",
|
|
6
|
-
"green": "ProgressBar_module_green__4a4d0fe0",
|
|
7
|
-
"red": "ProgressBar_module_red__4a4d0fe0",
|
|
8
|
-
"yellow": "ProgressBar_module_yellow__4a4d0fe0",
|
|
9
|
-
"isAnimating": "ProgressBar_module_isAnimating__4a4d0fe0",
|
|
10
|
-
"pulse": "ProgressBar_module_pulse__4a4d0fe0"
|
|
11
|
-
};
|
|
12
|
-
export { modules_ee15117b as default };
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
@import '~@kaizen/design-tokens/sass/spacing';
|
|
2
|
-
@import '~@kaizen/design-tokens/sass/color';
|
|
3
|
-
@import '~@kaizen/design-tokens/sass/border';
|
|
4
|
-
|
|
5
|
-
@layer kz-components {
|
|
6
|
-
$message-icon-size: 1.25rem;
|
|
7
|
-
$validation-message-padding: 0.5625rem;
|
|
8
|
-
$form-text-color-label: rgba($color-purple-800-rgb, 0.7);
|
|
9
|
-
$form-text-color-label-reversed: rgba($color-white-rgb, 0.8);
|
|
10
|
-
|
|
11
|
-
.message {
|
|
12
|
-
display: flex;
|
|
13
|
-
position: relative;
|
|
14
|
-
align-items: center;
|
|
15
|
-
gap: $spacing-6;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.default {
|
|
19
|
-
color: $form-text-color-label;
|
|
20
|
-
|
|
21
|
-
&.reversed {
|
|
22
|
-
color: $form-text-color-label-reversed;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.error,
|
|
27
|
-
.caution {
|
|
28
|
-
border-radius: $border-solid-border-radius;
|
|
29
|
-
padding: $validation-message-padding;
|
|
30
|
-
color: $color-purple-800;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.error {
|
|
34
|
-
background: $color-red-100;
|
|
35
|
-
opacity: 100%;
|
|
36
|
-
|
|
37
|
-
&.reversed {
|
|
38
|
-
background: $color-red-300;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.caution {
|
|
43
|
-
background: $color-yellow-100;
|
|
44
|
-
opacity: 100%;
|
|
45
|
-
|
|
46
|
-
&.reversed {
|
|
47
|
-
background: $color-yellow-400;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.positionBottom {
|
|
52
|
-
margin-top: $spacing-6;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.positionTop {
|
|
56
|
-
margin-bottom: $spacing-6;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.warningIcon {
|
|
60
|
-
display: inline-flex;
|
|
61
|
-
width: $message-icon-size;
|
|
62
|
-
align-self: flex-start;
|
|
63
|
-
|
|
64
|
-
.error & {
|
|
65
|
-
color: $color-red-500;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.caution & {
|
|
69
|
-
color: var(--color-yellow-700);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.reversed & {
|
|
73
|
-
color: $color-purple-800;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|