@kaizen/components 2.4.0 → 3.0.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.
- package/dist/cjs/src/Button/Button.cjs +2 -4
- package/dist/cjs/src/GuidanceBlock/GuidanceBlock.cjs +16 -82
- package/dist/cjs/src/GuidanceBlock/GuidanceBlock.module.css.cjs +0 -1
- package/dist/cjs/src/Heading/Heading.cjs +1 -1
- package/dist/cjs/src/Heading/Heading.module.css.cjs +22 -0
- package/dist/cjs/src/Label/Label.cjs +1 -1
- package/dist/cjs/src/Label/Label.module.css.cjs +16 -0
- package/dist/cjs/src/LabelledMessage/LabelledMessage.cjs +1 -1
- package/dist/cjs/src/LabelledMessage/LabelledMessage.module.css.cjs +7 -0
- package/dist/cjs/src/LinkButton/LinkButton.cjs +2 -4
- package/dist/cjs/src/Modal/ConfirmationModal/ConfirmationModal.cjs +3 -2
- package/dist/cjs/src/Modal/ContextModal/ContextModal.cjs +0 -1
- package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs +2 -2
- package/dist/cjs/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.cjs +3 -6
- package/dist/cjs/src/Notification/InlineNotification/InlineNotification.cjs +1 -1
- package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.cjs +1 -1
- package/dist/cjs/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.cjs → ToastNotificationsList.module.css.cjs} +1 -1
- package/dist/cjs/src/Notification/subcomponents/CancelButton/CancelButton.cjs +1 -1
- package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.cjs +1 -1
- package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.cjs +29 -0
- package/dist/cjs/src/Notification/subcomponents/NotificationHeading/NotificationHeading.cjs +1 -1
- package/dist/cjs/src/Select/Select.cjs +23 -22
- package/dist/cjs/src/Select/Select.module.scss.cjs +0 -1
- package/dist/cjs/src/SingleSelect/SingleSelect.cjs +12 -19
- package/dist/cjs/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.cjs +3 -5
- package/dist/cjs/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss.cjs +0 -1
- package/dist/cjs/src/Text/Text.cjs +1 -1
- package/dist/cjs/src/Text/Text.module.css.cjs +16 -0
- package/dist/cjs/src/TimeField/TimeField.cjs +2 -3
- package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.cjs +1 -1
- package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css.cjs +13 -0
- package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.cjs +1 -1
- package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.cjs +9 -0
- package/dist/cjs/src/Tooltip/OverlayArrow.cjs +1 -1
- package/dist/cjs/src/Tooltip/OverlayArrow.module.css.cjs +7 -0
- package/dist/cjs/src/Tooltip/Tooltip.cjs +1 -1
- package/dist/cjs/src/Tooltip/Tooltip.module.css.cjs +7 -0
- package/dist/esm/src/Button/Button.mjs +2 -4
- package/dist/esm/src/GuidanceBlock/GuidanceBlock.mjs +18 -84
- package/dist/esm/src/GuidanceBlock/GuidanceBlock.module.css.mjs +0 -1
- package/dist/esm/src/Heading/Heading.mjs +1 -1
- package/dist/esm/src/Heading/Heading.module.css.mjs +20 -0
- package/dist/esm/src/Label/Label.mjs +1 -1
- package/dist/esm/src/Label/Label.module.css.mjs +14 -0
- package/dist/esm/src/LabelledMessage/LabelledMessage.mjs +1 -1
- package/dist/esm/src/LabelledMessage/LabelledMessage.module.css.mjs +5 -0
- package/dist/esm/src/LinkButton/LinkButton.mjs +2 -4
- package/dist/esm/src/Modal/ConfirmationModal/ConfirmationModal.mjs +3 -2
- package/dist/esm/src/Modal/ContextModal/ContextModal.mjs +0 -1
- package/dist/esm/src/Modal/GenericModal/GenericModal.mjs +2 -2
- package/dist/esm/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.mjs +3 -6
- package/dist/esm/src/Notification/InlineNotification/InlineNotification.mjs +1 -1
- package/dist/esm/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.mjs +1 -1
- package/dist/esm/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss.mjs → ToastNotificationsList.module.css.mjs} +1 -1
- package/dist/esm/src/Notification/subcomponents/CancelButton/CancelButton.mjs +1 -1
- package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.mjs +1 -1
- package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css.mjs +27 -0
- package/dist/esm/src/Notification/subcomponents/NotificationHeading/NotificationHeading.mjs +1 -1
- package/dist/esm/src/Select/Select.mjs +23 -22
- package/dist/esm/src/Select/Select.module.scss.mjs +0 -1
- package/dist/esm/src/SingleSelect/SingleSelect.mjs +12 -19
- package/dist/esm/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.mjs +3 -5
- package/dist/esm/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss.mjs +0 -1
- package/dist/esm/src/Text/Text.mjs +1 -1
- package/dist/esm/src/Text/Text.module.css.mjs +14 -0
- package/dist/esm/src/TimeField/TimeField.mjs +2 -3
- package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.mjs +1 -1
- package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css.mjs +11 -0
- package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.mjs +1 -1
- package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.css.mjs +7 -0
- package/dist/esm/src/Tooltip/OverlayArrow.mjs +1 -1
- package/dist/esm/src/Tooltip/OverlayArrow.module.css.mjs +5 -0
- package/dist/esm/src/Tooltip/Tooltip.mjs +1 -1
- package/dist/esm/src/Tooltip/Tooltip.module.css.mjs +5 -0
- package/dist/styles.css +725 -613
- package/dist/types/Button/Button.d.ts +0 -5
- package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts +2 -1
- package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts +2 -1
- package/dist/types/Calendar/types.d.ts +1 -0
- package/dist/types/GuidanceBlock/GuidanceBlock.d.ts +1 -26
- package/dist/types/Input/Input/Input.d.ts +1 -6
- package/dist/types/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.d.ts +1 -5
- package/dist/types/Select/Select.d.ts +3 -13
- package/dist/types/SingleSelect/SingleSelect.d.ts +2 -24
- package/dist/types/SingleSelect/subcomponents/SelectToggle/SelectToggle.d.ts +2 -12
- package/dist/types/TextArea/TextArea.d.ts +1 -6
- package/dist/types/TimeField/TimeField.d.ts +1 -1
- package/locales/ar.json +4 -0
- package/locales/bg.json +4 -0
- package/locales/cs.json +4 -0
- package/locales/cy.json +4 -0
- package/locales/da.json +4 -0
- package/locales/de.json +4 -0
- package/locales/el.json +4 -0
- package/locales/en-GB.json +4 -0
- package/locales/en.json +4 -0
- package/locales/es-419.json +4 -0
- package/locales/es.json +4 -0
- package/locales/et.json +4 -0
- package/locales/fi.json +4 -0
- package/locales/fr-CA.json +4 -0
- package/locales/fr.json +4 -0
- package/locales/he.json +4 -0
- package/locales/hi.json +4 -0
- package/locales/ht.json +4 -0
- package/locales/hu.json +4 -0
- package/locales/id.json +4 -0
- package/locales/it.json +4 -0
- package/locales/ja.json +4 -0
- package/locales/km-KH.json +4 -0
- package/locales/ko.json +4 -0
- package/locales/lt.json +4 -0
- package/locales/lv.json +4 -0
- package/locales/mi.json +4 -0
- package/locales/ms.json +4 -0
- package/locales/nb.json +4 -0
- package/locales/nl.json +4 -0
- package/locales/pl.json +4 -0
- package/locales/pt-BR.json +4 -0
- package/locales/pt.json +4 -0
- package/locales/ro.json +4 -0
- package/locales/ru.json +4 -0
- package/locales/si-LK.json +4 -0
- package/locales/sk.json +4 -0
- package/locales/sr.json +4 -0
- package/locales/sv.json +4 -0
- package/locales/th.json +4 -0
- package/locales/tl.json +4 -0
- package/locales/tr.json +4 -0
- package/locales/uk.json +4 -0
- package/locales/vi.json +4 -0
- package/locales/zh-TW.json +4 -0
- package/locales/zh.json +4 -0
- package/package.json +1 -2
- package/src/Button/Button.tsx +1 -8
- package/src/Button/_docs/Button--api-specification.mdx +0 -1
- package/src/Calendar/CalendarRange/CalendarRange.tsx +4 -1
- package/src/Calendar/CalendarSingle/CalendarSingle.tsx +4 -1
- package/src/Calendar/types.ts +18 -0
- package/src/GuidanceBlock/GuidanceBlock.module.css +0 -8
- package/src/GuidanceBlock/GuidanceBlock.spec.tsx +1 -26
- package/src/GuidanceBlock/GuidanceBlock.tsx +2 -112
- package/src/GuidanceBlock/_docs/GuidanceBlock.stories.tsx +0 -90
- package/src/Heading/Heading.module.css +111 -0
- package/src/Heading/Heading.tsx +1 -1
- package/src/Input/Input/Input.module.scss +0 -31
- package/src/Input/Input/Input.tsx +1 -6
- package/src/Label/Label.module.css +97 -0
- package/src/Label/Label.tsx +1 -1
- package/src/Label/_docs/Label.stickersheet.stories.tsx +9 -4
- package/src/LabelledMessage/{LabelledMessage.module.scss → LabelledMessage.module.css} +1 -3
- package/src/LabelledMessage/LabelledMessage.tsx +1 -1
- package/src/LinkButton/LinkButton.tsx +1 -3
- package/src/LinkButton/_docs/LinkButton--api-specification.mdx +0 -1
- package/src/Modal/ConfirmationModal/ConfirmationModal.tsx +7 -6
- package/src/Modal/ContextModal/ContextModal.tsx +0 -1
- package/src/Modal/GenericModal/GenericModal.tsx +3 -4
- package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.tsx +2 -8
- package/src/Notification/InlineNotification/InlineNotification.tsx +1 -1
- package/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx +1 -1
- package/src/Notification/ToastNotification/ToastNotificationsList/{ToastNotificationsList.module.scss → ToastNotificationsList.module.css} +6 -8
- package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx +1 -1
- package/src/Notification/subcomponents/CancelButton/CancelButton.tsx +1 -1
- package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.css +392 -0
- package/src/Notification/subcomponents/GenericNotification/GenericNotification.tsx +1 -1
- package/src/Notification/subcomponents/NotificationHeading/NotificationHeading.tsx +1 -1
- package/src/Select/Select.module.scss +0 -16
- package/src/Select/Select.tsx +24 -25
- package/src/SingleSelect/SingleSelect.tsx +1 -14
- package/src/SingleSelect/_docs/SingleSelect.stories.tsx +5 -2
- package/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.module.scss +0 -8
- package/src/SingleSelect/subcomponents/SelectToggle/SelectToggle.tsx +2 -9
- package/src/Text/Text.module.css +71 -0
- package/src/Text/Text.tsx +1 -1
- package/src/TextArea/TextArea.tsx +1 -6
- package/src/TimeField/TimeField.tsx +2 -9
- package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.css +141 -0
- package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx +1 -1
- package/src/ToggleSwitch/ToggleSwitchField/{ToggleSwitchField.module.scss → ToggleSwitchField.module.css} +1 -3
- package/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.tsx +1 -1
- package/src/Tooltip/OverlayArrow.module.css +45 -0
- package/src/Tooltip/OverlayArrow.tsx +1 -1
- package/src/Tooltip/Tooltip.module.css +62 -0
- package/src/Tooltip/Tooltip.tsx +1 -1
- package/dist/cjs/src/Heading/Heading.module.scss.cjs +0 -22
- package/dist/cjs/src/Label/Label.module.scss.cjs +0 -15
- package/dist/cjs/src/LabelledMessage/LabelledMessage.module.scss.cjs +0 -7
- package/dist/cjs/src/Modal/util/console.cjs +0 -16
- package/dist/cjs/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.cjs +0 -29
- package/dist/cjs/src/Text/Text.module.scss.cjs +0 -16
- package/dist/cjs/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.cjs +0 -13
- package/dist/cjs/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss.cjs +0 -9
- package/dist/cjs/src/Tooltip/OverlayArrow.module.scss.cjs +0 -7
- package/dist/cjs/src/Tooltip/Tooltip.module.scss.cjs +0 -7
- package/dist/esm/src/Heading/Heading.module.scss.mjs +0 -20
- package/dist/esm/src/Label/Label.module.scss.mjs +0 -13
- package/dist/esm/src/LabelledMessage/LabelledMessage.module.scss.mjs +0 -5
- package/dist/esm/src/Modal/util/console.mjs +0 -13
- package/dist/esm/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss.mjs +0 -27
- package/dist/esm/src/Text/Text.module.scss.mjs +0 -14
- package/dist/esm/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss.mjs +0 -11
- package/dist/esm/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss.mjs +0 -7
- package/dist/esm/src/Tooltip/OverlayArrow.module.scss.mjs +0 -5
- package/dist/esm/src/Tooltip/Tooltip.module.scss.mjs +0 -5
- package/dist/types/Modal/util/console.d.ts +0 -5
- package/dist/types/utils/useResizeObserver.d.ts +0 -22
- package/src/Heading/Heading.module.scss +0 -115
- package/src/Label/Label.module.scss +0 -105
- package/src/Modal/util/console.ts +0 -13
- package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss +0 -138
- package/src/Notification/subcomponents/GenericNotification/_mixins.scss +0 -366
- package/src/Text/Text.module.scss +0 -74
- package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss +0 -139
- package/src/Tooltip/OverlayArrow.module.scss +0 -45
- package/src/Tooltip/Tooltip.module.scss +0 -68
- package/src/utils/useResizeObserver.ts +0 -73
|
@@ -13,17 +13,12 @@ export type SelectToggleProps = {
|
|
|
13
13
|
/** Props for the element representing the selected value. */
|
|
14
14
|
valueProps: DOMAttributes<FocusableElement>
|
|
15
15
|
isOpen?: boolean
|
|
16
|
-
/**
|
|
17
|
-
* @deprecated Use of placeholder text goes against our a11y standards.
|
|
18
|
-
* Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
|
|
19
|
-
*/
|
|
20
|
-
placeholder?: string
|
|
21
16
|
/** Updates the styling of the validation. */
|
|
22
17
|
status?: 'error' | 'caution'
|
|
23
18
|
isDisabled?: boolean
|
|
24
19
|
/** Use the `reversed` styles. */
|
|
25
20
|
isReversed?: boolean
|
|
26
|
-
} & OverrideClassName<HTMLAttributes<HTMLButtonElement>>
|
|
21
|
+
} & OverrideClassName<Omit<HTMLAttributes<HTMLButtonElement>, 'placeholder'>>
|
|
27
22
|
|
|
28
23
|
export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProps>(
|
|
29
24
|
(
|
|
@@ -33,7 +28,6 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
|
|
|
33
28
|
value,
|
|
34
29
|
valueProps,
|
|
35
30
|
isOpen,
|
|
36
|
-
placeholder = 'Select',
|
|
37
31
|
status,
|
|
38
32
|
isDisabled,
|
|
39
33
|
isReversed,
|
|
@@ -55,7 +49,6 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
|
|
|
55
49
|
ref={ref}
|
|
56
50
|
className={classnames(
|
|
57
51
|
styles.selectToggle,
|
|
58
|
-
(value === null || value === undefined) && styles.placeholder,
|
|
59
52
|
status === 'error' && styles.error,
|
|
60
53
|
status === 'caution' && styles.caution,
|
|
61
54
|
isDisabled && styles.disabled,
|
|
@@ -64,7 +57,7 @@ export const SelectToggle = React.forwardRef<HTMLButtonElement, SelectToggleProp
|
|
|
64
57
|
)}
|
|
65
58
|
>
|
|
66
59
|
<span {...valueProps} className={styles.value}>
|
|
67
|
-
{value
|
|
60
|
+
{value}
|
|
68
61
|
</span>
|
|
69
62
|
<Icon
|
|
70
63
|
name={isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
.text {
|
|
3
|
+
--icon-vertical-align: text-bottom;
|
|
4
|
+
|
|
5
|
+
margin: 0;
|
|
6
|
+
|
|
7
|
+
strong {
|
|
8
|
+
font-weight: var(--typography-paragraph-bold-font-weight);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.intro-lede {
|
|
13
|
+
font-family: var(--typography-paragraph-intro-lede-font-family);
|
|
14
|
+
font-weight: var(--typography-paragraph-intro-lede-font-weight);
|
|
15
|
+
font-size: var(--typography-paragraph-intro-lede-font-size);
|
|
16
|
+
line-height: var(--typography-paragraph-intro-lede-line-height);
|
|
17
|
+
letter-spacing: var(--typography-paragraph-intro-lede-letter-spacing);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.body {
|
|
21
|
+
font-family: var(--typography-paragraph-body-font-family);
|
|
22
|
+
font-weight: var(--typography-paragraph-body-font-weight);
|
|
23
|
+
font-size: var(--typography-paragraph-body-font-size);
|
|
24
|
+
line-height: var(--typography-paragraph-body-line-height);
|
|
25
|
+
letter-spacing: var(--typography-paragraph-body-letter-spacing);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.small {
|
|
29
|
+
font-family: var(--typography-paragraph-small-font-family);
|
|
30
|
+
font-weight: var(--typography-paragraph-small-font-weight);
|
|
31
|
+
font-size: var(--typography-paragraph-small-font-size);
|
|
32
|
+
line-height: var(--typography-paragraph-small-line-height);
|
|
33
|
+
letter-spacing: var(--typography-paragraph-small-letter-spacing);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.extra-small {
|
|
37
|
+
font-family: var(--typography-paragraph-extra-small-font-family);
|
|
38
|
+
font-weight: var(--typography-paragraph-extra-small-font-weight);
|
|
39
|
+
font-size: var(--typography-paragraph-extra-small-font-size);
|
|
40
|
+
line-height: var(--typography-paragraph-extra-small-line-height);
|
|
41
|
+
letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dark {
|
|
45
|
+
color: var(--color-purple-800);
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.dark-reduced-opacity {
|
|
50
|
+
color: var(--color-purple-800);
|
|
51
|
+
opacity: 0.7;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.white {
|
|
55
|
+
color: var(--color-white);
|
|
56
|
+
opacity: 1;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.white-reduced-opacity {
|
|
60
|
+
color: var(--color-white);
|
|
61
|
+
opacity: 0.8;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.positive {
|
|
65
|
+
color: var(--color-green-600);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.negative {
|
|
69
|
+
color: var(--color-red-600);
|
|
70
|
+
}
|
|
71
|
+
}
|
package/src/Text/Text.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createElement, type HTMLAttributes } from 'react'
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
4
|
-
import styles from './Text.module.
|
|
4
|
+
import styles from './Text.module.css'
|
|
5
5
|
|
|
6
6
|
export type TextVariants = 'intro-lede' | 'body' | 'small' | 'extra-small'
|
|
7
7
|
|
|
@@ -12,12 +12,7 @@ export type TextAreaProps = {
|
|
|
12
12
|
*/
|
|
13
13
|
autogrow?: boolean
|
|
14
14
|
reversed?: boolean
|
|
15
|
-
|
|
16
|
-
* @deprecated Use of placeholder text goes against our a11y standards.
|
|
17
|
-
* Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
|
|
18
|
-
*/
|
|
19
|
-
placeholder?: string
|
|
20
|
-
} & OverrideClassName<TextareaHTMLAttributes<HTMLTextAreaElement>>
|
|
15
|
+
} & OverrideClassName<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder'>>
|
|
21
16
|
|
|
22
17
|
export const TextArea = ({
|
|
23
18
|
textAreaRef: propsTextAreaRef,
|
|
@@ -11,13 +11,7 @@ import { TimeSegment } from './subcomponents/TimeSegment'
|
|
|
11
11
|
import { type StatusType, type TimeValue, type ValueType } from './types'
|
|
12
12
|
import styles from './TimeField.module.scss'
|
|
13
13
|
|
|
14
|
-
type OmittedTimeFieldProps =
|
|
15
|
-
| 'errorMessage'
|
|
16
|
-
| 'validationState'
|
|
17
|
-
| 'value'
|
|
18
|
-
| 'onChange'
|
|
19
|
-
| 'label'
|
|
20
|
-
| 'hideTimeZone'
|
|
14
|
+
type OmittedTimeFieldProps = 'errorMessage' | 'value' | 'onChange' | 'label' | 'hideTimeZone'
|
|
21
15
|
|
|
22
16
|
export type TimeFieldProps = {
|
|
23
17
|
id?: string
|
|
@@ -80,7 +74,6 @@ const TimeFieldComponent = ({
|
|
|
80
74
|
isDisabled,
|
|
81
75
|
hideTimeZone: true,
|
|
82
76
|
locale,
|
|
83
|
-
validationState: status === 'default' ? 'valid' : 'invalid',
|
|
84
77
|
})
|
|
85
78
|
|
|
86
79
|
const hasError = !!validationMessage && status === 'error'
|
|
@@ -111,7 +104,7 @@ const TimeFieldComponent = ({
|
|
|
111
104
|
className={classnames(
|
|
112
105
|
styles.input,
|
|
113
106
|
state.isDisabled && styles.isDisabled,
|
|
114
|
-
|
|
107
|
+
status === 'error' && styles.error,
|
|
115
108
|
)}
|
|
116
109
|
>
|
|
117
110
|
{state.segments.map((segment, i) => {
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
:root {
|
|
3
|
+
--animation-timing: var(--animation-duration-immediate) var(--animation-easing-function-linear);
|
|
4
|
+
--focus-ring-offset: 1px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.checkbox {
|
|
8
|
+
/* Reset checkbox */
|
|
9
|
+
opacity: 0;
|
|
10
|
+
position: absolute;
|
|
11
|
+
|
|
12
|
+
:global(.ideal-sans) & {
|
|
13
|
+
/* This is to override bootstrap styles. Remove when appropriate */
|
|
14
|
+
position: absolute;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.track {
|
|
19
|
+
position: relative;
|
|
20
|
+
background-color: var(--color-gray-500);
|
|
21
|
+
border: var(--border-borderless-border-width) var(--border-borderless-border-style)
|
|
22
|
+
var(--border-borderless-border-color);
|
|
23
|
+
border-radius: var(--spacing-md);
|
|
24
|
+
box-sizing: content-box;
|
|
25
|
+
width: calc((var(--spacing-md) * 1.05) * 2);
|
|
26
|
+
height: calc(var(--spacing-md) * 1.25);
|
|
27
|
+
padding: 0 calc(var(--spacing-md) * 0.15);
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
transition: background-color var(--animation-timing);
|
|
31
|
+
|
|
32
|
+
/* TODO: Fix */
|
|
33
|
+
/* stylelint-disable no-descending-specificity */
|
|
34
|
+
.checkbox:not(.disabled):focus + &,
|
|
35
|
+
.checkbox:not(.disabled):hover:focus + & {
|
|
36
|
+
border-color: transparent;
|
|
37
|
+
outline: 2px solid var(--color-blue-500);
|
|
38
|
+
outline-offset: var(--focus-ring-offset);
|
|
39
|
+
background-color: var(--color-gray-600);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.checkbox:not(.disabled) + &:hover,
|
|
43
|
+
label:hover .checkbox:not(.disabled) + & {
|
|
44
|
+
background-color: var(--color-gray-600);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* stylelint-enable no-descending-specificity */
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.thumb {
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
background-color: var(--color-white);
|
|
55
|
+
border: var(--border-borderless-border-width) var(--border-borderless-border-style)
|
|
56
|
+
var(--border-borderless-border-color);
|
|
57
|
+
border-radius: var(--spacing-md);
|
|
58
|
+
transition:
|
|
59
|
+
left var(--animation-timing),
|
|
60
|
+
right var(--animation-timing);
|
|
61
|
+
cursor: default;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.checkIcon {
|
|
65
|
+
color: var(--color-green-500);
|
|
66
|
+
opacity: 0;
|
|
67
|
+
transition-duration: var(--animation-duration-rapid);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* stylelint-disable no-descending-specificity */
|
|
71
|
+
.on {
|
|
72
|
+
.checkbox + .track {
|
|
73
|
+
border-color: var(--border-borderless-border-color);
|
|
74
|
+
background-color: var(--color-green-500);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.checkbox:focus + .track {
|
|
78
|
+
border-color: transparent;
|
|
79
|
+
background-color: var(--color-green-600);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.thumb {
|
|
83
|
+
position: relative;
|
|
84
|
+
right: auto;
|
|
85
|
+
inset-inline-start: calc(var(--spacing-md) * 1.1);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.checkIcon {
|
|
89
|
+
opacity: 1;
|
|
90
|
+
transition-delay: var(--animation-duration-immediate);
|
|
91
|
+
transition-duration: var(--animation-duration-fast);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.checkbox:not(.disabled) + .track:hover,
|
|
95
|
+
label:hover & .checkbox:not(.disabled) + .track {
|
|
96
|
+
background-color: var(--color-green-600);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.off {
|
|
101
|
+
.thumb {
|
|
102
|
+
position: relative;
|
|
103
|
+
right: auto;
|
|
104
|
+
inset-inline-start: calc(var(--spacing-md) * -0.05);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.reversed {
|
|
109
|
+
.checkbox:focus + .track,
|
|
110
|
+
.checkbox:hover:focus + .track {
|
|
111
|
+
outline-color: var(--color-blue-300);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&.off {
|
|
115
|
+
.track {
|
|
116
|
+
background-color: rgb(var(--color-white-rgb), 0.2);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.checkbox:focus + .track,
|
|
120
|
+
.checkbox:hover:focus + .track {
|
|
121
|
+
background-color: rgb(var(--color-white-rgb), 0.65);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.checkbox:not(.disabled) + .track:hover,
|
|
125
|
+
label:hover & .checkbox:not(.disabled) + .track {
|
|
126
|
+
background-color: rgb(var(--color-white-rgb), 0.65);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component */
|
|
132
|
+
label .disabled.track {
|
|
133
|
+
opacity: 1;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.disabled.track {
|
|
137
|
+
opacity: 0.3;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* stylelint-enable no-descending-specificity */
|
|
141
|
+
}
|
|
@@ -2,7 +2,7 @@ import React, { type InputHTMLAttributes } from 'react'
|
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
import { Icon } from '~components/Icon'
|
|
4
4
|
import { type OverrideClassName } from '~components/types/OverrideClassName'
|
|
5
|
-
import styles from './ToggleSwitch.module.
|
|
5
|
+
import styles from './ToggleSwitch.module.css'
|
|
6
6
|
|
|
7
7
|
export type ToggledStatus = 'on' | 'off'
|
|
8
8
|
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import '~@kaizen/design-tokens/sass/typography';
|
|
2
|
-
|
|
3
1
|
@layer kz-components {
|
|
4
2
|
.container {
|
|
5
3
|
display: flex;
|
|
@@ -12,6 +10,6 @@
|
|
|
12
10
|
}
|
|
13
11
|
|
|
14
12
|
.on label {
|
|
15
|
-
font-weight:
|
|
13
|
+
font-weight: var(--typography-paragraph-bold-font-weight);
|
|
16
14
|
}
|
|
17
15
|
}
|
|
@@ -7,7 +7,7 @@ import {
|
|
|
7
7
|
type ToggleSwitchProps,
|
|
8
8
|
type ToggledStatus,
|
|
9
9
|
} from '../ToggleSwitch/ToggleSwitch'
|
|
10
|
-
import styles from './ToggleSwitchField.module.
|
|
10
|
+
import styles from './ToggleSwitchField.module.css'
|
|
11
11
|
|
|
12
12
|
export type ToggleSwitchFieldProps = {
|
|
13
13
|
labelText: React.ReactNode
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
.overlayArrow {
|
|
3
|
+
display: flex;
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
for correct arrow positioning with rounded corners we need to do bit trickery here
|
|
7
|
+
the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
|
|
8
|
+
so we first set padding on arrow from all sides (that'll be used for start position computation)
|
|
9
|
+
and then we remove it from the oposite axis
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
padding: 8px;
|
|
13
|
+
|
|
14
|
+
&[data-placement='top'],
|
|
15
|
+
&[data-placement='bottom'] {
|
|
16
|
+
padding: 0 8px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&[data-placement='left'],
|
|
20
|
+
&[data-placement='right'] {
|
|
21
|
+
padding: 8px 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
path {
|
|
25
|
+
fill: var(--color-purple-800);
|
|
26
|
+
box-shadow: var(--shadow-small-box-shadow);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&[data-placement='right'] svg {
|
|
30
|
+
transform: rotate(90deg);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&[data-placement='bottom'] svg {
|
|
34
|
+
transform: rotate(180deg);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&[data-placement='left'] svg {
|
|
38
|
+
transform: rotate(270deg);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.reversed path {
|
|
42
|
+
fill: var(--color-white);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -3,7 +3,7 @@ import { OverlayArrow as RACOverlayArrow, type OverlayArrowProps } from 'react-a
|
|
|
3
3
|
import { useReversedColors } from '~components/utils'
|
|
4
4
|
import { mergeClassNames } from '~components/utils/mergeClassNames'
|
|
5
5
|
|
|
6
|
-
import styles from './OverlayArrow.module.
|
|
6
|
+
import styles from './OverlayArrow.module.css'
|
|
7
7
|
|
|
8
8
|
export { type OverlayArrowProps }
|
|
9
9
|
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
@layer kz-components {
|
|
2
|
+
.tooltip {
|
|
3
|
+
max-width: 200px;
|
|
4
|
+
padding: var(--spacing-8) var(--spacing-12);
|
|
5
|
+
color: var(--color-white);
|
|
6
|
+
text-align: center;
|
|
7
|
+
font-family: var(--typography-paragraph-extra-small-font-family);
|
|
8
|
+
font-size: var(--typography-paragraph-extra-small-font-size);
|
|
9
|
+
font-weight: var(--typography-paragraph-extra-small-font-weight);
|
|
10
|
+
letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
|
|
11
|
+
line-height: var(--typography-paragraph-extra-small-line-height);
|
|
12
|
+
border-radius: var(--border-solid-border-radius);
|
|
13
|
+
box-shadow: var(--shadow-small-box-shadow);
|
|
14
|
+
background-color: var(--color-purple-800);
|
|
15
|
+
text-wrap: pretty;
|
|
16
|
+
|
|
17
|
+
/* fixes FF gap */
|
|
18
|
+
transform: translate3d(0, 0, 0);
|
|
19
|
+
|
|
20
|
+
&.reversed {
|
|
21
|
+
background-color: var(--color-white);
|
|
22
|
+
color: var(--color-purple-800);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&[data-placement='top'] {
|
|
26
|
+
--origin: translateY(4px);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&[data-placement='bottom'] {
|
|
30
|
+
--origin: translateY(-4px);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&[data-placement='right'] {
|
|
34
|
+
--origin: translateX(-4px);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&[data-placement='left'] {
|
|
38
|
+
--origin: translateX(4px);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&[data-entering] {
|
|
42
|
+
animation: slide var(--animation-duration-fast);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[data-exiting] {
|
|
46
|
+
animation: slide var(--animation-duration-fast) reverse
|
|
47
|
+
var(--animation-easing-function-ease-in);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@keyframes slide {
|
|
53
|
+
from {
|
|
54
|
+
transform: var(--origin);
|
|
55
|
+
opacity: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
to {
|
|
59
|
+
transform: translateY(0);
|
|
60
|
+
opacity: 1;
|
|
61
|
+
}
|
|
62
|
+
}
|
package/src/Tooltip/Tooltip.tsx
CHANGED
|
@@ -10,7 +10,7 @@ import { VisuallyHidden } from '~components/VisuallyHidden'
|
|
|
10
10
|
import { useReversedColors } from '~components/utils'
|
|
11
11
|
import { mergeClassNames } from '~components/utils/mergeClassNames'
|
|
12
12
|
import { OverlayArrow } from './OverlayArrow'
|
|
13
|
-
import styles from './Tooltip.module.
|
|
13
|
+
import styles from './Tooltip.module.css'
|
|
14
14
|
|
|
15
15
|
export { TooltipContext }
|
|
16
16
|
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"heading": "Heading-module_heading__Gq6I8",
|
|
5
|
-
"display-0": "Heading-module_display-0__yZ7rx",
|
|
6
|
-
"composable-header-title": "Heading-module_composable-header-title__mqQVh",
|
|
7
|
-
"heading-1": "Heading-module_heading-1__PbAcw",
|
|
8
|
-
"heading-2": "Heading-module_heading-2__Ovpfe",
|
|
9
|
-
"heading-3": "Heading-module_heading-3__S4Pb1",
|
|
10
|
-
"heading-4": "Heading-module_heading-4__IIiwi",
|
|
11
|
-
"heading-5": "Heading-module_heading-5__QFtpN",
|
|
12
|
-
"heading-6": "Heading-module_heading-6__kts--",
|
|
13
|
-
"dark": "Heading-module_dark__IqcnT",
|
|
14
|
-
"dark-reduced-opacity": "Heading-module_dark-reduced-opacity__i-JqI",
|
|
15
|
-
"white": "Heading-module_white__mUqRT",
|
|
16
|
-
"white-reduced-opacity": "Heading-module_white-reduced-opacity__y1wq8",
|
|
17
|
-
"positive": "Heading-module_positive__mBS79",
|
|
18
|
-
"small": "Heading-module_small__qupiD",
|
|
19
|
-
"large": "Heading-module_large__cB-V3",
|
|
20
|
-
"negative": "Heading-module_negative__Q4byH"
|
|
21
|
-
};
|
|
22
|
-
module.exports = styles;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"label": "Label-module_label__Dmp7q",
|
|
5
|
-
"reversed": "Label-module_reversed__n6Q4r",
|
|
6
|
-
"disabled": "Label-module_disabled__qOB4e",
|
|
7
|
-
"text": "Label-module_text__LUnIh",
|
|
8
|
-
"radio": "Label-module_radio__-Iu-D",
|
|
9
|
-
"checkbox": "Label-module_checkbox__Fhjww",
|
|
10
|
-
"toggle": "Label-module_toggle__4tyKF",
|
|
11
|
-
"prependedLabel": "Label-module_prependedLabel__pdsEt",
|
|
12
|
-
"appendedLabel": "Label-module_appendedLabel__-OHis",
|
|
13
|
-
"prominent": "Label-module_prominent__SPdrr"
|
|
14
|
-
};
|
|
15
|
-
module.exports = styles;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var yellow = '\u001b[33m ';
|
|
4
|
-
var reset = '\u001b[0m ';
|
|
5
|
-
/**
|
|
6
|
-
* @deprecated Do not use ever again
|
|
7
|
-
*/
|
|
8
|
-
var warn = function (message) {
|
|
9
|
-
// eslint-disable-next-line no-console
|
|
10
|
-
console.warn("".concat(yellow, "\nCULTUREAMP UI WARNING:\n").concat(singleLine(message)).concat(reset, "\n"));
|
|
11
|
-
};
|
|
12
|
-
var singleLine = function (message) {
|
|
13
|
-
return message.replace(/^ +/gm, ' ').replace(/\n|\r/gm, '').trim();
|
|
14
|
-
};
|
|
15
|
-
exports.singleLine = singleLine;
|
|
16
|
-
exports.warn = warn;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"notification": "GenericNotification-module_notification__-JP1M",
|
|
5
|
-
"inline": "GenericNotification-module_inline__OciO5",
|
|
6
|
-
"toast": "GenericNotification-module_toast__GOVfC",
|
|
7
|
-
"global": "GenericNotification-module_global__Weka-",
|
|
8
|
-
"security": "GenericNotification-module_security__QTALa",
|
|
9
|
-
"hidden": "GenericNotification-module_hidden__WJjct",
|
|
10
|
-
"noBottomMargin": "GenericNotification-module_noBottomMargin__28nF8",
|
|
11
|
-
"persistent": "GenericNotification-module_persistent__O7bgI",
|
|
12
|
-
"subtle": "GenericNotification-module_subtle__kPns9",
|
|
13
|
-
"icon": "GenericNotification-module_icon__SDb8v",
|
|
14
|
-
"textContainer": "GenericNotification-module_textContainer__Avpbk",
|
|
15
|
-
"forceMultiline": "GenericNotification-module_forceMultiline__JcVA4",
|
|
16
|
-
"title": "GenericNotification-module_title__dvQOr",
|
|
17
|
-
"text": "GenericNotification-module_text__X-5ld",
|
|
18
|
-
"cancel": "GenericNotification-module_cancel__c6wky",
|
|
19
|
-
"disabled": "GenericNotification-module_disabled__WGBhD",
|
|
20
|
-
"hover": "GenericNotification-module_hover__hUURd",
|
|
21
|
-
"active": "GenericNotification-module_active__-6ahb",
|
|
22
|
-
"cancelLabel": "GenericNotification-module_cancelLabel__HJzsk",
|
|
23
|
-
"notificationTitle": "GenericNotification-module_notificationTitle__Oaqb8",
|
|
24
|
-
"success": "GenericNotification-module_success__oLGIP",
|
|
25
|
-
"informative": "GenericNotification-module_informative__WLimi",
|
|
26
|
-
"cautionary": "GenericNotification-module_cautionary__lneFu",
|
|
27
|
-
"warning": "GenericNotification-module_warning__7275P"
|
|
28
|
-
};
|
|
29
|
-
module.exports = styles;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"text": "Text-module_text__Byo7R",
|
|
5
|
-
"intro-lede": "Text-module_intro-lede__ENE72",
|
|
6
|
-
"body": "Text-module_body__cO-XH",
|
|
7
|
-
"small": "Text-module_small__uZNGn",
|
|
8
|
-
"extra-small": "Text-module_extra-small__3g9eN",
|
|
9
|
-
"dark": "Text-module_dark__-jDSk",
|
|
10
|
-
"dark-reduced-opacity": "Text-module_dark-reduced-opacity__18nLo",
|
|
11
|
-
"white": "Text-module_white__-yVD0",
|
|
12
|
-
"white-reduced-opacity": "Text-module_white-reduced-opacity__i0veZ",
|
|
13
|
-
"positive": "Text-module_positive__e-IKh",
|
|
14
|
-
"negative": "Text-module_negative__agbge"
|
|
15
|
-
};
|
|
16
|
-
module.exports = styles;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"checkbox": "ToggleSwitch-module_checkbox__ezWz3",
|
|
5
|
-
"track": "ToggleSwitch-module_track__fcDMP",
|
|
6
|
-
"disabled": "ToggleSwitch-module_disabled__3H-9R",
|
|
7
|
-
"thumb": "ToggleSwitch-module_thumb__8PULV",
|
|
8
|
-
"checkIcon": "ToggleSwitch-module_checkIcon__8iitB",
|
|
9
|
-
"on": "ToggleSwitch-module_on__CQpkh",
|
|
10
|
-
"off": "ToggleSwitch-module_off__OhSEP",
|
|
11
|
-
"reversed": "ToggleSwitch-module_reversed__Q3-iM"
|
|
12
|
-
};
|
|
13
|
-
module.exports = styles;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styles = {
|
|
4
|
-
"container": "ToggleSwitchField-module_container__e7TXD",
|
|
5
|
-
"fullWidth": "ToggleSwitchField-module_fullWidth__ybDf-",
|
|
6
|
-
"inner": "ToggleSwitchField-module_inner__9-O0m",
|
|
7
|
-
"on": "ToggleSwitchField-module_on__HQOkN"
|
|
8
|
-
};
|
|
9
|
-
module.exports = styles;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
var styles = {
|
|
2
|
-
"heading": "Heading-module_heading__Gq6I8",
|
|
3
|
-
"display-0": "Heading-module_display-0__yZ7rx",
|
|
4
|
-
"composable-header-title": "Heading-module_composable-header-title__mqQVh",
|
|
5
|
-
"heading-1": "Heading-module_heading-1__PbAcw",
|
|
6
|
-
"heading-2": "Heading-module_heading-2__Ovpfe",
|
|
7
|
-
"heading-3": "Heading-module_heading-3__S4Pb1",
|
|
8
|
-
"heading-4": "Heading-module_heading-4__IIiwi",
|
|
9
|
-
"heading-5": "Heading-module_heading-5__QFtpN",
|
|
10
|
-
"heading-6": "Heading-module_heading-6__kts--",
|
|
11
|
-
"dark": "Heading-module_dark__IqcnT",
|
|
12
|
-
"dark-reduced-opacity": "Heading-module_dark-reduced-opacity__i-JqI",
|
|
13
|
-
"white": "Heading-module_white__mUqRT",
|
|
14
|
-
"white-reduced-opacity": "Heading-module_white-reduced-opacity__y1wq8",
|
|
15
|
-
"positive": "Heading-module_positive__mBS79",
|
|
16
|
-
"small": "Heading-module_small__qupiD",
|
|
17
|
-
"large": "Heading-module_large__cB-V3",
|
|
18
|
-
"negative": "Heading-module_negative__Q4byH"
|
|
19
|
-
};
|
|
20
|
-
export { styles as default };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
var styles = {
|
|
2
|
-
"label": "Label-module_label__Dmp7q",
|
|
3
|
-
"reversed": "Label-module_reversed__n6Q4r",
|
|
4
|
-
"disabled": "Label-module_disabled__qOB4e",
|
|
5
|
-
"text": "Label-module_text__LUnIh",
|
|
6
|
-
"radio": "Label-module_radio__-Iu-D",
|
|
7
|
-
"checkbox": "Label-module_checkbox__Fhjww",
|
|
8
|
-
"toggle": "Label-module_toggle__4tyKF",
|
|
9
|
-
"prependedLabel": "Label-module_prependedLabel__pdsEt",
|
|
10
|
-
"appendedLabel": "Label-module_appendedLabel__-OHis",
|
|
11
|
-
"prominent": "Label-module_prominent__SPdrr"
|
|
12
|
-
};
|
|
13
|
-
export { styles as default };
|