@pismo/marola 0.0.1-alpha.1 → 0.0.1-alpha.11

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 (124) hide show
  1. package/README.md +17 -5
  2. package/dist/Button-B1umG8kJ.js +131 -0
  3. package/dist/ClickAwayListener-BKznXF1d.js +106 -0
  4. package/dist/Dialog.module-CGVM5V_D.js +15 -0
  5. package/dist/Portal-BcdMtRGF.js +73 -0
  6. package/dist/Tab-CRwnhsj5.js +254 -0
  7. package/dist/Tabs.module-yYcTJnj6.js +103 -0
  8. package/dist/_commonjsHelpers-CT_km90n.js +30 -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/Dialog.css +1 -1
  13. package/dist/assets/IconButton.css +1 -0
  14. package/dist/assets/Input.css +1 -0
  15. package/dist/assets/InputSearch.css +1 -0
  16. package/dist/assets/LoadingSpinner.css +1 -1
  17. package/dist/assets/PageHeader.css +1 -0
  18. package/dist/assets/Pagination.css +1 -0
  19. package/dist/assets/Skeleton.css +1 -0
  20. package/dist/assets/Snackbar.css +1 -0
  21. package/dist/assets/SortTooltip.css +1 -0
  22. package/dist/assets/Stepper.css +1 -0
  23. package/dist/assets/Table.css +1 -0
  24. package/dist/assets/Tabs.css +1 -0
  25. package/dist/assets/Toggle.css +1 -0
  26. package/dist/assets/Tooltip.css +1 -0
  27. package/dist/assets/Typography.css +1 -1
  28. package/dist/assets/global.css +1 -0
  29. package/dist/components/Advice/Advice.d.ts +16 -0
  30. package/dist/components/Advice/Advice.js +25 -0
  31. package/dist/components/Button/Button.d.ts +29 -0
  32. package/dist/components/Button/Button.js +70 -0
  33. package/dist/components/Button/Button.stories.d.ts +60 -0
  34. package/dist/components/Button/Button.stories.js +40 -0
  35. package/dist/components/Checkbox/Checkbox.d.ts +19 -0
  36. package/dist/components/Checkbox/Checkbox.js +56 -0
  37. package/dist/components/Dialog/Actions.js +1 -1
  38. package/dist/components/Dialog/Backdrop.d.ts +1 -1
  39. package/dist/components/Dialog/Backdrop.js +2 -9
  40. package/dist/components/Dialog/CloseIconButton.js +11 -10
  41. package/dist/components/Dialog/Dialog.d.ts +5 -4
  42. package/dist/components/Dialog/Dialog.js +419 -20077
  43. package/dist/components/Dialog/Dialog.stories.d.ts +343 -0
  44. package/dist/components/Dialog/Dialog.stories.js +59 -0
  45. package/dist/components/Dialog/Title.js +22 -7
  46. package/dist/components/Icon/Icon.d.ts +18 -0
  47. package/dist/components/Icon/Icon.js +95 -0
  48. package/dist/components/IconButton/IconButton.d.ts +22 -0
  49. package/dist/components/IconButton/IconButton.js +68 -0
  50. package/dist/components/Input/Input.d.ts +44 -0
  51. package/dist/components/Input/Input.js +497 -0
  52. package/dist/components/Input/Input.stories.d.ts +43 -0
  53. package/dist/components/Input/Input.stories.js +106 -0
  54. package/dist/components/InputSearch/InputSearch.d.ts +11 -0
  55. package/dist/components/InputSearch/InputSearch.js +29 -0
  56. package/dist/components/InputSearch/InputSearch.stories.d.ts +22 -0
  57. package/dist/components/InputSearch/InputSearch.stories.js +36 -0
  58. package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +2 -0
  59. package/dist/components/LoadingSpinner/LoadingSpinner.js +12 -13
  60. package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +14 -0
  61. package/dist/components/LoadingSpinner/LoadingSpinner.stories.js +38 -0
  62. package/dist/components/PageHeader/PageHeader.d.ts +36 -0
  63. package/dist/components/PageHeader/PageHeader.js +51 -0
  64. package/dist/components/PageHeader/PageHeader.stories.d.ts +43 -0
  65. package/dist/components/PageHeader/PageHeader.stories.js +49 -0
  66. package/dist/components/Pagination/Pagination.d.ts +36 -0
  67. package/dist/components/Pagination/Pagination.js +219 -0
  68. package/dist/components/Skeleton/Skeleton.d.ts +18 -0
  69. package/dist/components/Skeleton/Skeleton.js +26 -0
  70. package/dist/components/Snackbar/Snackbar.d.ts +13 -0
  71. package/dist/components/Snackbar/Snackbar.js +622 -0
  72. package/dist/components/SortTooltip/SortTooltip.d.ts +26 -0
  73. package/dist/components/SortTooltip/SortTooltip.js +67 -0
  74. package/dist/components/Stepper/Stepper.d.ts +16 -0
  75. package/dist/components/Stepper/Stepper.js +33 -0
  76. package/dist/components/Table/Table.d.ts +39 -0
  77. package/dist/components/Table/Table.js +122 -0
  78. package/dist/components/Table/TableContext.d.ts +19 -0
  79. package/dist/components/Table/TableContext.js +21 -0
  80. package/dist/components/Tabs/Tab.d.ts +9 -0
  81. package/dist/components/Tabs/Tab.js +8 -0
  82. package/dist/components/Tabs/TabPanel.d.ts +8 -0
  83. package/dist/components/Tabs/TabPanel.js +118 -0
  84. package/dist/components/Tabs/Tabs.d.ts +11 -0
  85. package/dist/components/Tabs/Tabs.js +827 -0
  86. package/dist/components/Toggle/Toggle.d.ts +11 -0
  87. package/dist/components/Toggle/Toggle.js +252 -0
  88. package/dist/components/Toggle/Toggle.stories.d.ts +21 -0
  89. package/dist/components/Toggle/Toggle.stories.js +33 -0
  90. package/dist/components/Tooltip/Tooltip.d.ts +17 -0
  91. package/dist/components/Tooltip/Tooltip.js +1366 -0
  92. package/dist/components/Typography/Typography.d.ts +15 -6
  93. package/dist/components/Typography/Typography.js +75 -67
  94. package/dist/components/Typography/Typography.stories.d.ts +31 -0
  95. package/dist/components/Typography/Typography.stories.js +30 -0
  96. package/dist/components/Typography/typography.test.d.ts +1 -0
  97. package/dist/components/Typography/typography.test.js +11357 -0
  98. package/dist/index-BNWbc5Kh.js +19628 -0
  99. package/dist/index-CqjC7P5Y.js +814 -0
  100. package/dist/magic-string.es-O_8lTkE3.js +738 -0
  101. package/dist/main.d.ts +18 -2
  102. package/dist/main.js +57 -15
  103. package/dist/objectWithoutPropertiesLoose-D7Cp0Pg_.js +26 -0
  104. package/dist/test-utils/assertStyles.d.ts +1 -0
  105. package/dist/test-utils/assertStyles.js +11 -0
  106. package/dist/types/helpers.d.ts +14 -7
  107. package/dist/useButton-Bc8IAgyk.js +106 -0
  108. package/dist/useControlled-CCMYYdCM.js +31 -0
  109. package/dist/useEnhancedEffect-CJGo-L3B.js +5 -0
  110. package/dist/useIsFocusVisible-BH4IAdcw.js +69 -0
  111. package/dist/useTimeout-DxF9kiZL.js +36 -0
  112. package/dist/utils/styleStrings.d.ts +6 -0
  113. package/dist/utils/styleStrings.js +10 -0
  114. package/dist/utils/styleStrings.test.d.ts +1 -0
  115. package/dist/utils/styleStrings.test.js +41 -0
  116. package/dist/vi.Y_w82WR8-Df0JUamG.js +9860 -0
  117. package/package.json +53 -10
  118. package/dist/Button-REznN-RP.js +0 -1139
  119. package/dist/Dialog.module-BO0mdB7d.js +0 -15
  120. package/dist/assets/CallToActionButton.css +0 -1
  121. package/dist/assets/main.css +0 -1
  122. package/dist/components/CallToActionButton/CallToActionButton.d.ts +0 -23
  123. package/dist/components/CallToActionButton/CallToActionButton.js +0 -57
  124. 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
- @font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Black.woff2) format("woff2");font-weight:900;font-style:normal}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-BlackItalic.woff2) format("woff2");font-weight:900;font-style:italic}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Bold.woff2) format("woff2");font-weight:700;font-style:normal}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-BoldItalic.woff2) format("woff2");font-weight:700;font-style:italic}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Italic.woff2) format("woff2");font-weight:400;font-style:italic}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Light.woff2) format("woff2");font-weight:300;font-style:normal}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-LightItalic.woff2) format("woff2");font-weight:300;font-style:italic}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Regular.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-Thin.woff2) format("woff2");font-weight:100;font-style:normal}@font-face{font-family:Lato;src:url(../fonts/Lato/Lato-ThinItalic.woff2) format("woff2");font-weight:100;font-style:italic}body{font-family:Lato,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}: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,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;