@pismo/marola 0.0.1-alpha.2 → 0.0.1-alpha.20

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 (153) hide show
  1. package/README.md +17 -5
  2. package/dist/Button-2b1peDFT.js +130 -0
  3. package/dist/ClickAwayListener-BSW-Nd-y.js +107 -0
  4. package/dist/Dialog.module-DFEmFdYT.js +30 -0
  5. package/dist/Popup-B6ZSGIEI.js +1248 -0
  6. package/dist/Portal-DIeBsWdL.js +73 -0
  7. package/dist/SelectButton-C8JQKaf4.js +61 -0
  8. package/dist/Tabs.module-jkH1Qjn7.js +22 -0
  9. package/dist/assets/Advice.css +1 -0
  10. package/dist/assets/Button.css +1 -0
  11. package/dist/assets/Checkbox.css +1 -0
  12. package/dist/assets/Chip.css +1 -0
  13. package/dist/assets/Dialog.css +1 -1
  14. package/dist/assets/IconButton.css +1 -0
  15. package/dist/assets/Input.css +1 -0
  16. package/dist/assets/InputSearch.css +1 -0
  17. package/dist/assets/LoadingSpinner.css +1 -1
  18. package/dist/assets/PageHeader.css +1 -0
  19. package/dist/assets/Pagination.css +1 -0
  20. package/dist/assets/SelectButton.css +1 -0
  21. package/dist/assets/Skeleton.css +1 -0
  22. package/dist/assets/Snackbar.css +1 -0
  23. package/dist/assets/SortTooltip.css +1 -0
  24. package/dist/assets/Stepper.css +1 -0
  25. package/dist/assets/Table.css +1 -0
  26. package/dist/assets/Tabs.css +1 -0
  27. package/dist/assets/TextDisplay.css +1 -0
  28. package/dist/assets/Toggle.css +1 -0
  29. package/dist/assets/Tooltip.css +1 -0
  30. package/dist/assets/Typography.css +1 -1
  31. package/dist/combineHooksSlotProps-DVjg9PRh.js +80 -0
  32. package/dist/components/Advice/Advice.d.ts +28 -0
  33. package/dist/components/Advice/Advice.js +40 -0
  34. package/dist/components/Advice/Advice.stories.d.ts +16 -0
  35. package/dist/components/Button/Button.d.ts +32 -0
  36. package/dist/components/Button/Button.js +65 -0
  37. package/dist/components/Button/Button.stories.d.ts +62 -0
  38. package/dist/components/Checkbox/Checkbox.d.ts +34 -0
  39. package/dist/components/Checkbox/Checkbox.js +71 -0
  40. package/dist/components/Checkbox/Checkbox.stories.d.ts +31 -0
  41. package/dist/components/Chip/Chip.d.ts +37 -0
  42. package/dist/components/Chip/Chip.js +113 -0
  43. package/dist/components/Chip/Chip.stories.d.ts +40 -0
  44. package/dist/components/Chip/chip.test.d.ts +1 -0
  45. package/dist/components/Dialog/Actions.js +1 -1
  46. package/dist/components/Dialog/Backdrop.d.ts +1 -1
  47. package/dist/components/Dialog/Backdrop.js +2 -9
  48. package/dist/components/Dialog/CloseIconButton.js +11 -10
  49. package/dist/components/Dialog/Dialog.d.ts +6 -5
  50. package/dist/components/Dialog/Dialog.js +419 -20077
  51. package/dist/components/Dialog/Dialog.stories.d.ts +343 -0
  52. package/dist/components/Dialog/{Title.d.ts → DialogTitle.d.ts} +3 -3
  53. package/dist/components/Dialog/DialogTitle.js +29 -0
  54. package/dist/components/Icon/Icon.d.ts +27 -0
  55. package/dist/components/Icon/Icon.js +122 -0
  56. package/dist/components/Icon/Icon.stories.d.ts +16 -0
  57. package/dist/components/IconButton/Icon.stories.d.ts +15 -0
  58. package/dist/components/IconButton/IconButton.d.ts +36 -0
  59. package/dist/components/IconButton/IconButton.js +40 -0
  60. package/dist/components/Input/Input.d.ts +44 -0
  61. package/dist/components/Input/Input.js +508 -0
  62. package/dist/components/Input/Input.stories.d.ts +43 -0
  63. package/dist/components/InputSearch/InputSearch.d.ts +9 -0
  64. package/dist/components/InputSearch/InputSearch.js +34 -0
  65. package/dist/components/InputSearch/InputSearch.stories.d.ts +39 -0
  66. package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +2 -0
  67. package/dist/components/LoadingSpinner/LoadingSpinner.js +12 -13
  68. package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +14 -0
  69. package/dist/components/PageHeader/PageHeader.d.ts +36 -0
  70. package/dist/components/PageHeader/PageHeader.js +66 -0
  71. package/dist/components/PageHeader/PageHeader.stories.d.ts +43 -0
  72. package/dist/components/Pagination/Pagination.d.ts +55 -0
  73. package/dist/components/Pagination/Pagination.js +236 -0
  74. package/dist/components/Pagination/Pagination.stories.d.ts +17 -0
  75. package/dist/components/Select/Select.d.ts +26 -0
  76. package/dist/components/Select/Select.js +857 -0
  77. package/dist/components/Select/Select.stories.d.ts +22 -0
  78. package/dist/components/Select/SelectButton.d.ts +12 -0
  79. package/dist/components/Select/SelectButton.js +8 -0
  80. package/dist/components/Skeleton/Skeleton.d.ts +25 -0
  81. package/dist/components/Skeleton/Skeleton.js +23 -0
  82. package/dist/components/Skeleton/Skeleton.stories.d.ts +14 -0
  83. package/dist/components/Skeleton/SkeletonCircle.stories.d.ts +14 -0
  84. package/dist/components/Skeleton/SkeletonTable.stories.d.ts +16 -0
  85. package/dist/components/Snackbar/Snackbar.d.ts +25 -0
  86. package/dist/components/Snackbar/Snackbar.js +637 -0
  87. package/dist/components/Snackbar/Snackbar.stories.d.ts +318 -0
  88. package/dist/components/SortTooltip/SortTooltip.d.ts +28 -0
  89. package/dist/components/SortTooltip/SortTooltip.js +93 -0
  90. package/dist/components/Stepper/Stepper.d.ts +26 -0
  91. package/dist/components/Stepper/Stepper.js +48 -0
  92. package/dist/components/Stepper/Stepper.stories.d.ts +16 -0
  93. package/dist/components/Table/Table.d.ts +56 -0
  94. package/dist/components/Table/Table.js +137 -0
  95. package/dist/components/Table/Table.stories.d.ts +29 -0
  96. package/dist/components/Table/TableContext.d.ts +19 -0
  97. package/dist/components/Table/TableContext.js +21 -0
  98. package/dist/components/Table/_Table.TBody.stories.d.ts +14 -0
  99. package/dist/components/Table/_Table.THead.stories.d.ts +14 -0
  100. package/dist/components/Table/_Table.Td.stories.d.ts +16 -0
  101. package/dist/components/Table/_Table.Th.stories.d.ts +15 -0
  102. package/dist/components/Table/_Table.Tr.stories.d.ts +15 -0
  103. package/dist/components/Tabs/Tab.d.ts +14 -0
  104. package/dist/components/Tabs/Tab.js +181 -0
  105. package/dist/components/Tabs/Tab.stories.d.ts +15 -0
  106. package/dist/components/Tabs/TabPanel.d.ts +12 -0
  107. package/dist/components/Tabs/TabPanel.js +118 -0
  108. package/dist/components/Tabs/TabPanel.stories.d.ts +14 -0
  109. package/dist/components/Tabs/Tabs.d.ts +15 -0
  110. package/dist/components/Tabs/Tabs.js +401 -0
  111. package/dist/components/Tabs/Tabs.stories.d.ts +14 -0
  112. package/dist/components/TextDisplay/TextDisplay.d.ts +23 -0
  113. package/dist/components/TextDisplay/TextDisplay.js +37 -0
  114. package/dist/components/TextDisplay/TextDisplay.stories.d.ts +13 -0
  115. package/dist/components/TextDisplay/textDisplay.test.d.ts +1 -0
  116. package/dist/components/Toggle/Toggle.d.ts +11 -0
  117. package/dist/components/Toggle/Toggle.js +266 -0
  118. package/dist/components/Toggle/Toggle.stories.d.ts +21 -0
  119. package/dist/components/Tooltip/Tooltip.d.ts +29 -0
  120. package/dist/components/Tooltip/Tooltip.js +139 -0
  121. package/dist/components/Tooltip/Tooltip.stories.d.ts +33 -0
  122. package/dist/components/Typography/Typography.d.ts +17 -6
  123. package/dist/components/Typography/Typography.js +56 -65
  124. package/dist/components/Typography/Typography.stories.d.ts +32 -0
  125. package/dist/components/Typography/typography.test.d.ts +1 -0
  126. package/dist/index-CH45lKw7.js +840 -0
  127. package/dist/index-CjW42-M-.js +19584 -0
  128. package/dist/main.d.ts +25 -3
  129. package/dist/main.js +67 -15
  130. package/dist/marola.css +1 -0
  131. package/dist/test-utils/assertStyles.d.ts +1 -0
  132. package/dist/test-utils/assertStyles.js +11 -0
  133. package/dist/types/helpers.d.ts +14 -7
  134. package/dist/useButton-DNk3wrQp.js +105 -0
  135. package/dist/useCompoundItem-D1iRfg8D.js +84 -0
  136. package/dist/useControlled-CCMYYdCM.js +31 -0
  137. package/dist/useEnhancedEffect-CJGo-L3B.js +5 -0
  138. package/dist/useEventCallback-xTG9piMa.js +45 -0
  139. package/dist/useIsFocusVisible-BH4IAdcw.js +69 -0
  140. package/dist/useList-B0hog_3-.js +436 -0
  141. package/dist/useTimeout-DxF9kiZL.js +36 -0
  142. package/dist/utils/styleStrings.d.ts +6 -0
  143. package/dist/utils/styleStrings.js +10 -0
  144. package/dist/utils/styleStrings.test.d.ts +1 -0
  145. package/package.json +51 -9
  146. package/dist/Button-REznN-RP.js +0 -1139
  147. package/dist/Dialog.module-BO0mdB7d.js +0 -15
  148. package/dist/assets/CallToActionButton.css +0 -1
  149. package/dist/assets/main.css +0 -1
  150. package/dist/components/CallToActionButton/CallToActionButton.d.ts +0 -23
  151. package/dist/components/CallToActionButton/CallToActionButton.js +0 -57
  152. package/dist/components/Dialog/Title.js +0 -14
  153. package/src/playground/Playground.tsx +0 -58
@@ -1,15 +0,0 @@
1
- import './assets/Dialog.css';
2
- const _ = "_dialog_cknma_1", a = "_dialog__backdrop_cknma_11", i = "_dialog__panel_cknma_19", o = "_dialog__title_cknma_35", l = "_dialog__subtitle_cknma_42", d = "_dialog__divider_cknma_51", t = "_dialog__actions_cknma_64", c = {
3
- dialog: _,
4
- dialog__backdrop: a,
5
- dialog__panel: i,
6
- dialog__title: o,
7
- "dialog__title--small": "_dialog__title--small_cknma_39",
8
- dialog__subtitle: l,
9
- dialog__divider: d,
10
- "dialog__close-icon": "_dialog__close-icon_cknma_55",
11
- dialog__actions: t
12
- };
13
- export {
14
- c as s
15
- };
@@ -1 +0,0 @@
1
- ._h1_11y7t_1{font-size:var(--heading-font-size-xl);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-xl);margin:0}._h1--bold_11y7t_7{font-weight:var(--typography-heading-bold)}._h2_11y7t_11{font-size:var(--heading-font-size-l);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-l);margin:0}._h2--bold_11y7t_17{font-weight:var(--typography-heading-bold)}._h3_11y7t_21{font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);margin:0}._h3--bold_11y7t_27{font-weight:var(--typography-heading-bold)}._h4_11y7t_31{font-size:var(--heading-font-size-s);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-s);margin:0}._h4--bold_11y7t_37{font-weight:var(--typography-heading-bold)}._body_11y7t_41{font-size:var(--body-font-size);line-height:var(--body-line-height);font-weight:var(--body-weight)}._body--large_11y7t_46{font-size:var(--body-font-size-large);line-height:var(--body-line-height-large)}._body--medium_11y7t_50{font-size:var(--body-font-size-medium);line-height:var(--body-line-height-medium)}._body--small_11y7t_54{font-size:var(--body-font-size-small);line-height:var(--body-line-height-small)}._body--tiny_11y7t_58{font-size:var(--body-font-size-tiny);line-height:var(--body-line-height-tiny)}._body--bold_11y7t_62{font-weight:var(--body-bold)}._body--strikethrough_11y7t_65{text-decoration:line-through}._body--underlined_11y7t_68{text-decoration:underline}._body--strikethrough-underlined_11y7t_71{text-decoration:underline line-through}._quote_11y7t_75{font-size:var(--quote-font-size);line-height:var(--quote-line-height);font-weight:var(--quote-font-weight)}._quote--large_11y7t_80{font-size:var(--quote-font-size-large);line-height:var(--quote-line-height-large);font-weight:var(--quote-font-weight-large)}._form__input_11y7t_86{font-size:var(--form-input-font-size);line-height:var(--form-input-line-height);font-weight:var(--form-input-font-weight)}._form__hint_11y7t_91{font-size:var(--form-hint-font-size);line-height:var(--form-hint-line-height);font-weight:var(--form-hint-font-weight)}._form__label_11y7t_96{font-size:var(--form-label-font-size);line-height:var(--form-label-line-height);font-weight:var(--form-label-font-weight)}._form__dropdown_11y7t_101{font-size:var(--form-dropdown-font-size);line-height:var(--form-dropdown-line-height);font-weight:var(--form-dropdown-font-weight)}._table__header_11y7t_107{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-header-font-weight)}._table__body_11y7t_112{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-body-font-weight)}._table__body--secondary_11y7t_117{font-size:var(--table-font-size);line-height:var(--table-line-height);line-height:var(--table-body-secondary-line-height)}._button_11y7t_123{font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:var(--button-font-weight)}._button_11y7t_123{font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:var(--button-font-weight);padding:calc(var(--spacing) * 1.25) calc(var(--spacing) * 4.375);border-radius:calc(var(--spacing) * 12.5);border:none;cursor:pointer}._button--primary_11y7t_138{background-color:var(--accent);color:var(--white-100)}._button--primary_11y7t_138:hover{background-color:var(--accent-dark)}._button--primary_11y7t_138:focus{background-color:var(--accent-lighter);color:var(--black-100)}._button--primary_11y7t_138:active{background-color:var(--accent-light)}._button--primary_11y7t_138:disabled{background-color:var(--black-10);color:var(--gray-50)}._button--secondary_11y7t_156{background-color:var(--white-100);color:var(--accent)}._button--secondary_11y7t_156:hover{background-color:var(--gray-5)}._button--secondary_11y7t_156:focus{color:var(--black-100)}._button--secondary_11y7t_156:active{color:var(--accent-light)}._button--secondary_11y7t_156:disabled{color:var(--gray-50)}._button__loading-container_11y7t_172{align-items:center;display:flex;gap:var(--spacing)}
@@ -1 +0,0 @@
1
- :root{--gray-100: #16161E;--gray-100-rgb: 22, 22, 30;--gray-95: #3F3D4B;--gray-95-rgb: 63, 61, 75;--gray-90: #525061;--gray-90-rgb: 82, 80, 97;--gray-75: #838192;--gray-75-rgb: 131, 129, 146;--gray-50: #BCBAC8;--gray-50-rgb: 188, 186, 200;--gray-25: #DBDAE2;--gray-25-rgb: 219, 218, 226;--gray-10: #EBEAF0;--gray-10-rgb: 235, 234, 240;--gray-5: #F7F7FC;--gray-5-rgb: 247, 247, 252;--black-100: #000000;--black-100-rgb: 0, 0, 0;--black-75: #616161;--black-75-rgb: 97, 97, 97;--black-50: #838192;--black-50-rgb: 131, 129, 146;--black-25: #BCBAC8;--black-25-rgb: 188, 186, 200;--black-10: #EBEAF0;--black-10-rgb: 235, 234, 240;--white-100: #FFFFFF;--white-100-rgb: 255, 255, 255}:root{--heading-font-weight: 700;--heading-font-size-xl: 3.75rem;--heading-line-height-xl: 4.875rem;--heading-font-size-l: 3rem;--heading-line-height-l: 3.9375rem;--heading-font-size: 2.25rem;--heading-line-height: 2.875rem;--heading-font-size-s: 1.5rem;--heading-line-height-s: 2rem;--body-font-size: 1rem;--body-line-height: 1.3125rem;--body-weight: normal;--body-bold: bold;--body-font-size-large: 1.5rem;--body-line-height-large: 1.625rem;--body-font-size-medium: 1.125;--body-line-height-medium: 1rem;--body-font-size-small: .875rem;--body-line-height-small: 1.125rem;--body-font-size-tiny: .75rem;--body-line-height-tiny: 1rem;--quote-font-size-large: 1.5rem;--quote-line-height-large: 2rem;--quote-font-weight-large: normal;--quote-font-size: 1rem;--quote-line-height: 1.3125rem;--quote-font-weight: normal;--form-input-font-size:1rem;--form-input-line-height:1.3125rem;--form-input-font-weight:bold;--form-hint-font-size:.875rem;--form-hint-line-height:1.3125rem;--form-hint-font-weight:normal;--form-label-font-size:.875rem;--form-label-line-height:1.3125rem;--form-label-font-weight:normal;--form-dropdown-font-size:1rem;--form-dropdown-line-height:1.3125rem;--form-dropdown-font-weight:normal;--table-font-size:.875rem;--table-line-height:1.0625rem;--table-header-font-weight:bold;--table-body-font-weight:normal;--table-body-secondary-line-height:1.3125rem;--button-font-size:1rem;--button-line-height:1.25rem;--button-font-weight: bold}:root{--spacing: 8px}
@@ -1,23 +0,0 @@
1
- import { Either } from '../../types/helpers';
2
- import { ReactNode } from 'react';
3
-
4
- type variation = "primary" | "secondary";
5
- type CallToActionButtonCoreProps = {
6
- isLoading?: boolean;
7
- disabled?: boolean;
8
- className?: string;
9
- children: ReactNode;
10
- variation?: variation;
11
- width?: number;
12
- height?: number;
13
- };
14
- interface CallToActionButtonPropsWithLink extends CallToActionButtonCoreProps {
15
- link: string;
16
- }
17
- interface CallToActionButtonPropsWithOnClick extends CallToActionButtonCoreProps {
18
- onClick: () => void;
19
- type?: HTMLButtonElement["type"];
20
- }
21
- export type CallToActionButtonProps = Either<CallToActionButtonPropsWithLink, CallToActionButtonPropsWithOnClick>;
22
- export declare const CallToActionButton: import('react').ForwardRefExoticComponent<CallToActionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
23
- export default CallToActionButton;
@@ -1,57 +0,0 @@
1
- import '../../assets/CallToActionButton.css';
2
- import { jsx as d, jsxs as h } from "react/jsx-runtime";
3
- import { forwardRef as u, useMemo as c } from "react";
4
- import { LoadingSpinner as m } from "../LoadingSpinner/LoadingSpinner.js";
5
- import { c as f } from "../../clsx-DB4S2d7J.js";
6
- import { B as p } from "../../Button-REznN-RP.js";
7
- const g = "_h1_11y7t_1", k = "_h2_11y7t_11", q = "_h3_11y7t_21", w = "_h4_11y7t_31", x = "_body_11y7t_41", N = "_quote_11y7t_75", v = "_form__input_11y7t_86", B = "_form__hint_11y7t_91", j = "_form__label_11y7t_96", C = "_form__dropdown_11y7t_101", L = "_table__header_11y7t_107", A = "_table__body_11y7t_112", M = "_button_11y7t_123", _ = {
8
- h1: g,
9
- "h1--bold": "_h1--bold_11y7t_7",
10
- h2: k,
11
- "h2--bold": "_h2--bold_11y7t_17",
12
- h3: q,
13
- "h3--bold": "_h3--bold_11y7t_27",
14
- h4: w,
15
- "h4--bold": "_h4--bold_11y7t_37",
16
- body: x,
17
- "body--large": "_body--large_11y7t_46",
18
- "body--medium": "_body--medium_11y7t_50",
19
- "body--small": "_body--small_11y7t_54",
20
- "body--tiny": "_body--tiny_11y7t_58",
21
- "body--bold": "_body--bold_11y7t_62",
22
- "body--strikethrough": "_body--strikethrough_11y7t_65",
23
- "body--underlined": "_body--underlined_11y7t_68",
24
- "body--strikethrough-underlined": "_body--strikethrough-underlined_11y7t_71",
25
- quote: N,
26
- "quote--large": "_quote--large_11y7t_80",
27
- form__input: v,
28
- form__hint: B,
29
- form__label: j,
30
- form__dropdown: C,
31
- table__header: L,
32
- table__body: A,
33
- "table__body--secondary": "_table__body--secondary_11y7t_117",
34
- button: M,
35
- "button--primary": "_button--primary_11y7t_138",
36
- "button--secondary": "_button--secondary_11y7t_156",
37
- "button__loading-container": "_button__loading-container_11y7t_172"
38
- }, D = u((r, e) => {
39
- const {
40
- onClick: y,
41
- link: b,
42
- isLoading: l,
43
- children: o,
44
- type: a = "button",
45
- disabled: s,
46
- className: t,
47
- variation: n = "primary"
48
- } = r, i = c(() => f([_.button, _[`button--${n}`], t]), [t]);
49
- return /* @__PURE__ */ d(p, { type: a, href: b, onClick: y, disabled: s, className: i, ref: e, children: l ? /* @__PURE__ */ h("div", { className: _["button__loading-container"], children: [
50
- /* @__PURE__ */ d(m, { ...n === "secondary" && { invert: !0 } }),
51
- o
52
- ] }) : o });
53
- });
54
- export {
55
- D as CallToActionButton,
56
- D as default
57
- };
@@ -1,14 +0,0 @@
1
- import { jsxs as l, Fragment as s, jsx as e } from "react/jsx-runtime";
2
- import { s as r } from "../../Dialog.module-BO0mdB7d.js";
3
- import { Typography as a } from "../Typography/Typography.js";
4
- const n = ({
5
- title: i,
6
- subTitle: t
7
- }) => /* @__PURE__ */ l(s, { children: [
8
- /* @__PURE__ */ e(a, { element: "h1", elementProps: { id: "alert-dialog-title" }, variant: "h4", className: r.dialog__title, children: i }),
9
- /* @__PURE__ */ e("hr", { className: r.dialog__divider, "aria-hidden": !0 }),
10
- t && /* @__PURE__ */ e(a, { element: "h2", elementProps: { id: "alert-dialog-description" }, variant: "h4", className: r.dialog__subtitle, children: t })
11
- ] });
12
- export {
13
- n as default
14
- };
@@ -1,58 +0,0 @@
1
- import {CallToActionButton, LoadingSpinner, Typography} from '../../lib/main';
2
-
3
- import DialogExample from "./DialogExample.tsx";
4
-
5
- /**
6
- * A playground that can be used to test and build components. Run `yarn dev` to launch this page
7
- */
8
- const Playground = () => {
9
- return <>
10
- <DialogExample/>
11
- <CallToActionButton variation="primary">Test Button</CallToActionButton>
12
- <CallToActionButton variation="secondary">Test Button secondary</CallToActionButton>
13
- <CallToActionButton variation="primary" isLoading>Test Button loading</CallToActionButton>
14
- <CallToActionButton variation="secondary" isLoading>Test Button loading secondary</CallToActionButton>
15
- <CallToActionButton variation="primary" disabled>Test Button disabled</CallToActionButton>
16
- <CallToActionButton variation="secondary" disabled>Test Button disabled secondary</CallToActionButton>
17
- <Typography element="p">abc</Typography>
18
- <Typography element="h1" variant="form-hint">abc</Typography>
19
- <Typography>regular</Typography>
20
- {/*<Typography className={styles["test-red"]}>regular extra classes</Typography>*/}
21
- <Typography variant="body" element="p">body explicit (element p) </Typography>
22
- <Typography variant="body-large">body large </Typography>
23
- <Typography variant="body-medium">body medium </Typography>
24
- <Typography variant="body-small">body small </Typography>
25
- <Typography variant="body-tiny">body tiny </Typography>
26
- <Typography element="h1">h1</Typography>
27
- <Typography element="h2">h2</Typography>
28
- <Typography element="h3">h3</Typography>
29
- <Typography element="h4">h4</Typography>
30
- <Typography element="h5">h5 uses h4 style</Typography>
31
- <Typography element="h6">h6 uses h4 style</Typography>
32
- <Typography element="h1" variant="h4">h1 with h4 style</Typography>
33
- <Typography element="h2" variant="h4">h2 with h4 style</Typography>
34
- <Typography element="h3" variant="h4">h3 with h4 style</Typography>
35
- <Typography variant="quote"> quote</Typography>
36
- <Typography variant="quote-large"> large quote</Typography>
37
- <Typography bold> bold</Typography>
38
- <Typography strikethrough> strikethrough</Typography>
39
- <Typography underline> underlined</Typography>
40
- <Typography element="p" underline strikethrough>strikethrough and underlined paragraph</Typography>
41
- <Typography variant="form-hint"> form-hint</Typography>
42
- <Typography variant="form-label"> form-label</Typography>
43
- <Typography variant="form-dropdown"> form-dropdown</Typography>
44
- <Typography variant="form-input"> form-input</Typography>
45
- <Typography variant="table-header"> default element table header explicit variant</Typography>
46
- <Typography variant="table-body"> default element table body explicit variant</Typography>
47
- <Typography variant="table-body-secondary"> default element but table body secondary explicit
48
- variant</Typography>
49
- <Typography element="th"> th </Typography>
50
- <Typography element="td"> td</Typography>
51
- <Typography element="li"> list item</Typography>
52
- <Typography variant="button"> button</Typography>
53
- <LoadingSpinner/>
54
- <LoadingSpinner invert/>
55
- </>;
56
- };
57
-
58
- export default Playground;