@pismo/marola 0.0.1-alpha.12 → 0.0.1-alpha.13
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/README.md +1 -1
- package/dist/assets/Button.css +1 -1
- package/dist/assets/Chip.css +1 -0
- package/dist/assets/IconButton.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/InputSearch.css +1 -1
- package/dist/assets/Typography.css +1 -1
- package/dist/components/Button/Button.d.ts +5 -2
- package/dist/components/Button/Button.js +87 -63
- package/dist/components/Button/Button.stories.d.ts +2 -0
- package/dist/components/Button/Button.stories.js +1 -2
- package/dist/components/Chip/Chip.d.ts +37 -0
- package/dist/components/Chip/Chip.js +143 -0
- package/dist/components/Chip/Chip.stories.d.ts +40 -0
- package/dist/components/Chip/Chip.stories.js +59 -0
- package/dist/components/Chip/chip.test.d.ts +1 -0
- package/dist/components/Chip/chip.test.js +17303 -0
- package/dist/components/Dialog/Dialog.stories.d.ts +3 -3
- package/dist/components/Dialog/Dialog.stories.js +1 -2
- package/dist/components/Icon/Icon.d.ts +1 -1
- package/dist/components/Icon/Icon.js +27 -20
- package/dist/components/IconButton/IconButton.d.ts +2 -2
- package/dist/components/IconButton/IconButton.js +63 -61
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +32 -32
- package/dist/components/InputSearch/InputSearch.d.ts +7 -9
- package/dist/components/InputSearch/InputSearch.js +31 -26
- package/dist/components/InputSearch/InputSearch.stories.d.ts +21 -4
- package/dist/components/InputSearch/InputSearch.stories.js +55 -18
- package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +1 -1
- package/dist/components/LoadingSpinner/LoadingSpinner.stories.js +1 -2
- package/dist/components/Select/Select.stories.js +1 -2
- package/dist/components/Typography/Typography.d.ts +1 -1
- package/dist/components/Typography/Typography.js +76 -74
- package/dist/components/Typography/Typography.stories.js +1 -2
- package/dist/components/Typography/typography.test.js +195 -11319
- package/dist/main.d.ts +1 -0
- package/dist/main.js +57 -57
- package/dist/react.esm-DGd9_oKA.js +11126 -0
- package/dist/utils/styleStrings.test.js +1 -1
- package/dist/{vi.Y_w82WR8-Df0JUamG.js → vi.Y_w82WR8-XVYrIxgm.js} +2 -1
- package/package.json +1 -1
- package/dist/assets/global.css +0 -1
package/README.md
CHANGED
package/dist/assets/Button.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._h1_10k5d_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_10k5d_7{font-weight:var(--typography-heading-bold)}._h2_10k5d_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_10k5d_17{font-weight:var(--typography-heading-bold)}._h3_10k5d_21{font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);margin:0}._h3--bold_10k5d_27{font-weight:var(--typography-heading-bold)}._h4_10k5d_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_10k5d_37{font-weight:var(--typography-heading-bold)}._body_10k5d_41{font-size:var(--body-font-size);font-weight:var(--body-weight);line-height:var(--body-line-height)}._body--large_10k5d_46{font-size:var(--body-font-size-large);line-height:var(--body-line-height-large)}._body--medium_10k5d_50{font-size:var(--body-font-size-medium);line-height:var(--body-line-height-medium)}._body--small_10k5d_54{font-size:var(--body-font-size-small);line-height:var(--body-line-height-small)}._body--tiny_10k5d_58{font-size:var(--body-font-size-tiny);line-height:var(--body-line-height-tiny)}._body--bold_10k5d_62{font-weight:var(--body-bold)}._body--strikethrough_10k5d_65{text-decoration:line-through}._body--underlined_10k5d_68{text-decoration:underline}._body--strikethrough-underlined_10k5d_71{text-decoration:underline line-through}._quote_10k5d_75{font-size:var(--quote-font-size);font-weight:var(--quote-font-weight);line-height:var(--quote-line-height)}._quote--large_10k5d_80{font-size:var(--quote-font-size-large);font-weight:var(--quote-font-weight-large);line-height:var(--quote-line-height-large)}._quote--bold_10k5d_85{font-weight:var(--body-bold)}._quote--strikethrough_10k5d_88{text-decoration:line-through}._quote--underlined_10k5d_91{text-decoration:underline}._quote--strikethrough-underlined_10k5d_94{text-decoration:underline line-through}._form__input_10k5d_98{font-size:var(--form-input-font-size);font-weight:var(--form-input-font-weight);line-height:var(--form-input-line-height)}._form__hint_10k5d_103{font-size:var(--form-hint-font-size);font-weight:var(--form-hint-font-weight);line-height:var(--form-hint-line-height)}._form__label_10k5d_108{font-size:var(--form-label-font-size);font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}._form__dropdown_10k5d_113{font-size:var(--form-dropdown-font-size);font-weight:var(--form-dropdown-font-weight);line-height:var(--form-dropdown-line-height)}._form--bold_10k5d_118{font-weight:var(--body-bold)}._form--strikethrough_10k5d_121{text-decoration:line-through}._form--underlined_10k5d_124{text-decoration:underline}._form--strikethrough-underlined_10k5d_127{text-decoration:underline line-through}._table__header_10k5d_131{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-header-font-weight)}._table__body_10k5d_136{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-body-font-weight)}._table__body--secondary_10k5d_141{font-size:var(--table-font-size);line-height:var(--table-line-height);line-height:var(--table-body-secondary-line-height)}._table--bold_10k5d_146{font-weight:var(--body-bold)}._table--strikethrough_10k5d_149{text-decoration:line-through}._table--underlined_10k5d_152{text-decoration:underline}._table--strikethrough-underlined_10k5d_155{text-decoration:underline line-through}._button_10k5d_159{font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:var(--button-line-height);font-family:Lato,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}._button--bold_10k5d_165{font-weight:var(--body-bold)}._button--strikethrough_10k5d_168{text-decoration:line-through}._button--underlined_10k5d_171{text-decoration:underline}._button--strikethrough-underlined_10k5d_174{text-decoration:underline line-through}._SM_10k5d_178{font-size:var(--font-size-small);font-weight:var(--font-weight-small);line-height:var(--font-line-height-small)}._SM--bold_10k5d_183{font-weight:var(--font-weight-700)}._button_10k5d_159{font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:var(--button-line-height);padding:10px 35px;cursor:pointer;border:none;border-radius:100px}._button_10k5d_159:focus-visible{outline:none}._button--primary_10k5d_199{color:var(--white-100);background-color:var(--accent)}._button--primary_10k5d_199:hover{background-color:var(--accent-dark)}._button--primary_10k5d_199:focus{color:var(--black-100);background-color:var(--accent-lighter)}._button--primary_10k5d_199:active{background-color:var(--accent-light)}._button--primary_10k5d_199:disabled{color:var(--gray-50);cursor:default;background-color:var(--black-10)}._button--secondary_10k5d_218{color:var(--accent);background-color:var(--white-100)}._button--secondary_10k5d_218:hover{background-color:var(--gray-5)}._button--secondary_10k5d_218:focus{color:var(--black-100)}._button--secondary_10k5d_218:active{color:var(--accent-light)}._button--secondary_10k5d_218:disabled{color:var(--gray-50);cursor:default}._button--quick_10k5d_235{padding:8px 16px;color:var(--accent);background-color:rgb(var(--accent-rgb) .05);border-radius:6px}._button--quick_10k5d_235:hover{color:var(--accent-dark);background-color:rgb(var(--accent-rgb) .1)}._button--quick_10k5d_235:active{color:var(--accent-light)}._button--quick_10k5d_235:focus{color:var(--black-100);background-color:initial;outline:2px solid var(--black-100)}._button--quick_10k5d_235:disabled{color:var(--gray-50);cursor:default;background-color:var(--black-10)}._button__loading-container_10k5d_258{display:flex;gap:8px;align-items:center}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--secondary-orange: #ffa945;--secondary-orange-rgb: 255, 169, 69;--secondary-orange-dark: #fe8d53;--secondary-orange-dark-rgb: 254, 141, 83;--secondary-orange-light: #525061;--secondary-orange-light-rgb: 82, 80, 97;--secondary-green: #99dec3;--secondary-green-rgb: 153, 222, 195;--secondary-green-dark: #6acbb1;--secondary-green-dark-rgb: 106, 203, 177;--secondary-green-darker: #31aa7e;--secondary-green-darker-rgb: 49, 170, 126;--secondary-green-light: #baedd9;--secondary-green-light-rgb: 186, 237, 217;--accent: #1897f3;--accent-rgb: 24, 151, 243;--accent-dark: #1672c7;--accent-dark-rgb: 22, 114, 199;--accent-light: #4fb1f9;--accent-light-rgb: 79, 177, 249;--accent-lighter: #8ae1fd;--accent-lighter-rgb: 138, 225, 253;--alert: #df4561;--alert-rgb: 223, 69, 97;--alert-dark: #bb2b45;--alert-dark-rgb: 187, 43, 69;--accent-alert-light: #f37c91;--accent-alert-light-rgb: 243, 124, 145;--cream: #fafafa;--cream-rgb: 250, 250, 250;--hover: #42b7ff;--hover-rgb: 66, 183, 255;--active: #0a75cc;--active-rgb: 10, 117, 204;--border: #d9d9d9;--border-rgb: 217, 217, 217}: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;--font-size-small: .75rem;--font-weight-small: 400;--font-line-height-small: 1.25rem;--font-weight-700: 700}:root{--spacing: 8px;--border-radius: 6px;--border-radius-soft: 4px;--transition-soft: .3s;--transition-long: .75s}*{box-sizing:border-box}._h1_1hro6_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_1hro6_7{font-weight:var(--typography-heading-bold)}._h2_1hro6_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_1hro6_17{font-weight:var(--typography-heading-bold)}._h3_1hro6_21{font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);margin:0}._h3--bold_1hro6_27{font-weight:var(--typography-heading-bold)}._h4_1hro6_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_1hro6_37{font-weight:var(--typography-heading-bold)}._body_1hro6_41{font-size:var(--body-font-size);font-weight:var(--body-weight);line-height:var(--body-line-height)}._body--large_1hro6_46{font-size:var(--body-font-size-large);line-height:var(--body-line-height-large)}._body--medium_1hro6_50{font-size:var(--body-font-size-medium);line-height:var(--body-line-height-medium)}._body--small_1hro6_54{font-size:var(--body-font-size-small);line-height:var(--body-line-height-small)}._body--tiny_1hro6_58{font-size:var(--body-font-size-tiny);line-height:var(--body-line-height-tiny)}._body--bold_1hro6_62{font-weight:var(--body-bold)}._body--strikethrough_1hro6_65{text-decoration:line-through}._body--underlined_1hro6_68{text-decoration:underline}._body--strikethrough-underlined_1hro6_71{text-decoration:underline line-through}._quote_1hro6_75{font-size:var(--quote-font-size);font-weight:var(--quote-font-weight);line-height:var(--quote-line-height)}._quote--large_1hro6_80{font-size:var(--quote-font-size-large);font-weight:var(--quote-font-weight-large);line-height:var(--quote-line-height-large)}._quote--bold_1hro6_85{font-weight:var(--body-bold)}._quote--strikethrough_1hro6_88{text-decoration:line-through}._quote--underlined_1hro6_91{text-decoration:underline}._quote--strikethrough-underlined_1hro6_94{text-decoration:underline line-through}._form__input_1hro6_98{font-size:var(--form-input-font-size);font-weight:var(--form-input-font-weight);line-height:var(--form-input-line-height)}._form__hint_1hro6_103{font-size:var(--form-hint-font-size);font-weight:var(--form-hint-font-weight);line-height:var(--form-hint-line-height)}._form__label_1hro6_108{font-size:var(--form-label-font-size);font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}._form__dropdown_1hro6_113{font-size:var(--form-dropdown-font-size);font-weight:var(--form-dropdown-font-weight);line-height:var(--form-dropdown-line-height)}._form--bold_1hro6_118{font-weight:var(--body-bold)}._form--strikethrough_1hro6_121{text-decoration:line-through}._form--underlined_1hro6_124{text-decoration:underline}._form--strikethrough-underlined_1hro6_127{text-decoration:underline line-through}._table__header_1hro6_131{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-header-font-weight)}._table__body_1hro6_136{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-body-font-weight)}._table__body--secondary_1hro6_141{font-size:var(--table-font-size);line-height:var(--table-line-height);line-height:var(--table-body-secondary-line-height)}._table--bold_1hro6_146{font-weight:var(--body-bold)}._table--strikethrough_1hro6_149{text-decoration:line-through}._table--underlined_1hro6_152{text-decoration:underline}._table--strikethrough-underlined_1hro6_155{text-decoration:underline line-through}._button_1hro6_159{font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:var(--button-line-height);font-family:Lato,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}._button--bold_1hro6_165{font-weight:var(--body-bold)}._button--strikethrough_1hro6_168{text-decoration:line-through}._button--underlined_1hro6_171{text-decoration:underline}._button--strikethrough-underlined_1hro6_174{text-decoration:underline line-through}._SM_1hro6_178,._chip_1hro6_178{font-size:var(--font-size-small);font-weight:var(--font-weight-small);line-height:var(--font-line-height-small)}._SM--bold_1hro6_183,._chip_1hro6_178{font-weight:var(--font-weight-700)}._chip_1hro6_178{display:flex;align-items:center;width:fit-content;padding:.375rem .5rem;background-color:var(--cream);border-width:1px;border-radius:calc(var(--border-radius-soft) * 4)}._chip_1hro6_178:not(:disabled){color:rgb(var(--gray-95-rgb) .65)}._chip--button_1hro6_199{cursor:pointer;border-color:transparent}._chip--button_1hro6_199:disabled{cursor:initial}._chip--button_1hro6_199:focus-visible{outline:none}._chip--button_1hro6_199:focus{outline:2px solid var(--black-100)}._chip--outlined_1hro6_212{padding:.3125rem .5rem;background-color:var(--white-100);border:1px solid var(--border);border-radius:calc(var(--border-radius-soft) * 4)}._chip--contained_1hro6_218{padding:.3125rem .5rem;border:1px solid var(--border);border-color:var(--accent);border-radius:calc(var(--border-radius-soft) * 4)}._chip__adornment_1hro6_224{display:flex;align-items:center;margin-right:.5rem}._chip__remove_1hro6_229{display:flex;margin-left:.5rem}._chip__remove_1hro6_229:focus-visible{outline:none}._chip__remove_1hro6_229:focus:not(:disabled){border-radius:calc(var(--border-radius-soft) * 4);outline:2px solid var(--black-100)}._chip__remove--disabled_1hro6_240{cursor:default}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._h1_f1r29_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_f1r29_7{font-weight:var(--typography-heading-bold)}._h2_f1r29_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_f1r29_17{font-weight:var(--typography-heading-bold)}._h3_f1r29_21{font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);margin:0}._h3--bold_f1r29_27{font-weight:var(--typography-heading-bold)}._h4_f1r29_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_f1r29_37{font-weight:var(--typography-heading-bold)}._body_f1r29_41{font-size:var(--body-font-size);font-weight:var(--body-weight);line-height:var(--body-line-height)}._body--large_f1r29_46{font-size:var(--body-font-size-large);line-height:var(--body-line-height-large)}._body--medium_f1r29_50{font-size:var(--body-font-size-medium);line-height:var(--body-line-height-medium)}._body--small_f1r29_54{font-size:var(--body-font-size-small);line-height:var(--body-line-height-small)}._body--tiny_f1r29_58{font-size:var(--body-font-size-tiny);line-height:var(--body-line-height-tiny)}._body--bold_f1r29_62{font-weight:var(--body-bold)}._body--strikethrough_f1r29_65{text-decoration:line-through}._body--underlined_f1r29_68{text-decoration:underline}._body--strikethrough-underlined_f1r29_71{text-decoration:underline line-through}._quote_f1r29_75{font-size:var(--quote-font-size);font-weight:var(--quote-font-weight);line-height:var(--quote-line-height)}._quote--large_f1r29_80{font-size:var(--quote-font-size-large);font-weight:var(--quote-font-weight-large);line-height:var(--quote-line-height-large)}._quote--bold_f1r29_85{font-weight:var(--body-bold)}._quote--strikethrough_f1r29_88{text-decoration:line-through}._quote--underlined_f1r29_91{text-decoration:underline}._quote--strikethrough-underlined_f1r29_94{text-decoration:underline line-through}._form__input_f1r29_98{font-size:var(--form-input-font-size);font-weight:var(--form-input-font-weight);line-height:var(--form-input-line-height)}._form__hint_f1r29_103{font-size:var(--form-hint-font-size);font-weight:var(--form-hint-font-weight);line-height:var(--form-hint-line-height)}._form__label_f1r29_108{font-size:var(--form-label-font-size);font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}._form__dropdown_f1r29_113{font-size:var(--form-dropdown-font-size);font-weight:var(--form-dropdown-font-weight);line-height:var(--form-dropdown-line-height)}._form--bold_f1r29_118{font-weight:var(--body-bold)}._form--strikethrough_f1r29_121{text-decoration:line-through}._form--underlined_f1r29_124{text-decoration:underline}._form--strikethrough-underlined_f1r29_127{text-decoration:underline line-through}._table__header_f1r29_131{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-header-font-weight)}._table__body_f1r29_136{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-body-font-weight)}._table__body--secondary_f1r29_141{font-size:var(--table-font-size);line-height:var(--table-line-height);line-height:var(--table-body-secondary-line-height)}._table--bold_f1r29_146{font-weight:var(--body-bold)}._table--strikethrough_f1r29_149{text-decoration:line-through}._table--underlined_f1r29_152{text-decoration:underline}._table--strikethrough-underlined_f1r29_155{text-decoration:underline line-through}._button_f1r29_159{font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:var(--button-line-height);font-family:Lato,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}._button--bold_f1r29_165{font-weight:var(--body-bold)}._button--strikethrough_f1r29_168{text-decoration:line-through}._button--underlined_f1r29_171{text-decoration:underline}._button--strikethrough-underlined_f1r29_174{text-decoration:underline line-through}._SM_f1r29_178{font-size:var(--font-size-small);font-weight:var(--font-weight-small);line-height:var(--font-line-height-small)}._SM--bold_f1r29_183{font-weight:var(--font-weight-700)}._icon-button_f1r29_187{font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:var(--button-line-height);padding:10px;cursor:pointer;background-color:transparent;border:none}._icon-button_f1r29_187:focus-visible{outline:none}._icon-button--primary_f1r29_199{color:var(--accent);fill:var(--accent)}._icon-button--primary_f1r29_199:hover{color:var(--accent-dark);fill:var(--accent-dark)}._icon-button--primary_f1r29_199:active{color:var(--accent-light);fill:var(--accent-light)}._icon-button--primary_f1r29_199:focus{color:var(--black-100);outline:2px solid var(--black-100);fill:var(--black-100)}._icon-button--primary_f1r29_199:disabled{color:var(--gray-50);cursor:default;fill:var(--gray-50)}._icon-button--square_f1r29_221{color:var(--accent);border:1px solid var(--gray-10);border-radius:6px;fill:var(--accent)}._icon-button--square_f1r29_221:focus{color:var(--black-100);outline:2px solid var(--black-100);fill:var(--black-100)}._icon-button--square_f1r29_221:disabled{color:var(--gray-50);cursor:default;fill:var(--gray-50)}._icon-button__container_f1r29_237{display:flex;gap:8px;align-items:center;text-wrap:nowrap}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._input__label_1fy22_1{display:block;margin-bottom:.3125rem;color:var(--gray-75)}._input__input-el-wrapper_1fy22_6{display:flex;align-items:center;border:solid .0625rem var(--gray-25);border-radius:.375rem;transition:all .3s}._input__input-el_1fy22_6{all:unset;width:100%;height:2.5rem;padding:0 1rem;font-size:var(--form-input-font-size);font-weight:var(--form-input-font-weight);line-height:var(--form-input-line-height);color:var(--gray-90);outline:none}._input__input-el_1fy22_6::placeholder{color:var(--gray-50)}._input__left-icon_1fy22_27{height:1rem;padding-left:1rem}._input__right-icon_1fy22_31{height:1rem;padding-right:1rem}._input__messages-wrapper_1fy22_35{display:flex;align-items:center;justify-content:space-between}._input__messages-wrapper_1fy22_35:not(:empty){margin-top:.3125rem}._input__info-message_1fy22_43,._input__error-message_1fy22_43{display:flex;gap:.375rem;align-items:center}._input__info-message_1fy22_43{color:var(--gray-75)}._input__error-message_1fy22_43{color:var(--alert)}._input__chars-counter_1fy22_54{margin-left:auto;color:var(--gray-75)}._input--disabled_1fy22_58 ._input__input-el_1fy22_6{color:var(--gray-50)}._input_1fy22_1:has(._input--disabled_1fy22_58) ._input__label_1fy22_1{color:var(--gray-25)}._input--focused_1fy22_64._input__input-el-wrapper_1fy22_6{border-color:var(--accent)}._input--error_1fy22_67._input__input-el-wrapper_1fy22_6{border-color:var(--alert)}._input__input-el-wrapper_1fy22_6:hover:not(._input--disabled_1fy22_58,._input--focused_1fy22_64,._input--error_1fy22_67){border-color:var(--gray-75)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._inputSearch_lmxu2_1 input[type=search]::-webkit-search-cancel-button{width:1rem;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;background:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_3694_1860)'%3e%3cpath%20d='M7.97207%206.94064L9.46895%205.46876C9.7627%205.17814%2010.2377%205.17814%2010.5033%205.46876C10.8221%205.76251%2010.8221%206.23751%2010.5033%206.50314L9.05957%207.97189L10.5033%209.46876C10.8221%209.76251%2010.8221%2010.2375%2010.5033%2010.5031C10.2377%2010.8219%209.7627%2010.8219%209.46895%2010.5031L7.97207%209.05939L6.50332%2010.5031C6.2377%2010.8219%205.7627%2010.8219%205.46895%2010.5031C5.17832%2010.2375%205.17832%209.76251%205.46895%209.46876L6.94082%207.97189L5.46895%206.50314C5.17832%206.23751%205.17832%205.76251%205.46895%205.46876C5.7627%205.17814%206.2377%205.17814%206.50332%205.46876L7.97207%206.94064Z'%20fill='%23838192'/%3e%3cpath%20opacity='0.4'%20d='M0%208C0%203.58125%203.58125%200%208%200C12.4187%200%2016%203.58125%2016%208C16%2012.4187%2012.4187%2016%208%2016C3.58125%2016%200%2012.4187%200%208ZM5.46875%206.50313L6.94063%207.97188L5.46875%209.46875C5.17812%209.7625%205.17812%2010.2375%205.46875%2010.5031C5.7625%2010.8219%206.2375%2010.8219%206.50313%2010.5031L7.97188%209.05937L9.46875%2010.5031C9.7625%2010.8219%2010.2375%2010.8219%2010.5031%2010.5031C10.8219%2010.2375%2010.8219%209.7625%2010.5031%209.46875L9.05937%207.97188L10.5031%206.50313C10.8219%206.2375%2010.8219%205.7625%2010.5031%205.46875C10.2375%205.17812%209.7625%205.17812%209.46875%205.46875L7.97188%206.94063L6.50313%205.46875C6.2375%205.17812%205.7625%205.17812%205.46875%205.46875C5.17812%205.7625%205.17812%206.2375%205.46875%206.50313Z'%20fill='%23838192'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3694_1860'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") no-repeat 50% 50%;background-size:contain;border-radius:50%;opacity:0}._inputSearch_lmxu2_1 input[type=search]:focus::-webkit-search-cancel-button{pointer-events:all;cursor:pointer;opacity:1}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._h1_1elsk_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_1elsk_7{font-weight:var(--typography-heading-bold)}._h2_1elsk_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_1elsk_17{font-weight:var(--typography-heading-bold)}._h3_1elsk_21{font-size:var(--heading-font-size);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height);margin:0}._h3--bold_1elsk_27{font-weight:var(--typography-heading-bold)}._h4_1elsk_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_1elsk_37{font-weight:var(--typography-heading-bold)}._body_1elsk_41{font-size:var(--body-font-size);font-weight:var(--body-weight);line-height:var(--body-line-height)}._body--large_1elsk_46{font-size:var(--body-font-size-large);line-height:var(--body-line-height-large)}._body--medium_1elsk_50{font-size:var(--body-font-size-medium);line-height:var(--body-line-height-medium)}._body--small_1elsk_54{font-size:var(--body-font-size-small);line-height:var(--body-line-height-small)}._body--tiny_1elsk_58{font-size:var(--body-font-size-tiny);line-height:var(--body-line-height-tiny)}._body--bold_1elsk_62{font-weight:var(--body-bold)}._body--strikethrough_1elsk_65{text-decoration:line-through}._body--underlined_1elsk_68{text-decoration:underline}._body--strikethrough-underlined_1elsk_71{text-decoration:underline line-through}._quote_1elsk_75{font-size:var(--quote-font-size);font-weight:var(--quote-font-weight);line-height:var(--quote-line-height)}._quote--large_1elsk_80{font-size:var(--quote-font-size-large);font-weight:var(--quote-font-weight-large);line-height:var(--quote-line-height-large)}._quote--bold_1elsk_85{font-weight:var(--body-bold)}._quote--strikethrough_1elsk_88{text-decoration:line-through}._quote--underlined_1elsk_91{text-decoration:underline}._quote--strikethrough-underlined_1elsk_94{text-decoration:underline line-through}._form__input_1elsk_98{font-size:var(--form-input-font-size);font-weight:var(--form-input-font-weight);line-height:var(--form-input-line-height)}._form__hint_1elsk_103{font-size:var(--form-hint-font-size);font-weight:var(--form-hint-font-weight);line-height:var(--form-hint-line-height)}._form__label_1elsk_108{font-size:var(--form-label-font-size);font-weight:var(--form-label-font-weight);line-height:var(--form-label-line-height)}._form__dropdown_1elsk_113{font-size:var(--form-dropdown-font-size);font-weight:var(--form-dropdown-font-weight);line-height:var(--form-dropdown-line-height)}._form--bold_1elsk_118{font-weight:var(--body-bold)}._form--strikethrough_1elsk_121{text-decoration:line-through}._form--underlined_1elsk_124{text-decoration:underline}._form--strikethrough-underlined_1elsk_127{text-decoration:underline line-through}._table__header_1elsk_131{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-header-font-weight)}._table__body_1elsk_136{font-size:var(--table-font-size);line-height:var(--table-line-height);font-weight:var(--table-body-font-weight)}._table__body--secondary_1elsk_141{font-size:var(--table-font-size);line-height:var(--table-line-height);line-height:var(--table-body-secondary-line-height)}._table--bold_1elsk_146{font-weight:var(--body-bold)}._table--strikethrough_1elsk_149{text-decoration:line-through}._table--underlined_1elsk_152{text-decoration:underline}._table--strikethrough-underlined_1elsk_155{text-decoration:underline line-through}._button_1elsk_159{font-size:var(--button-font-size);font-weight:var(--button-font-weight);line-height:var(--button-line-height);font-family:Lato,Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}._button--bold_1elsk_165{font-weight:var(--body-bold)}._button--strikethrough_1elsk_168{text-decoration:line-through}._button--underlined_1elsk_171{text-decoration:underline}._button--strikethrough-underlined_1elsk_174{text-decoration:underline line-through}._SM_1elsk_178{font-size:var(--font-size-small);font-weight:var(--font-weight-small);line-height:var(--font-line-height-small)}._SM--bold_1elsk_183{font-weight:var(--font-weight-700)}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Either } from '../../types/helpers';
|
|
2
|
+
import { ButtonOwnProps as MUIButtonBaseProps } from '@mui/base';
|
|
2
3
|
import { ReactNode } from 'react';
|
|
3
4
|
|
|
4
5
|
type Variant = 'primary' | 'secondary' | 'quick';
|
|
@@ -7,12 +8,14 @@ type ButtonCoreProps = {
|
|
|
7
8
|
loading?: boolean;
|
|
8
9
|
/** Button to display and act in a disabled state */
|
|
9
10
|
disabled?: boolean;
|
|
10
|
-
/** Space
|
|
11
|
+
/** Space separated list of CSS classes to apply */
|
|
11
12
|
className?: string;
|
|
12
13
|
/** Text or children to display */
|
|
13
14
|
children: ReactNode;
|
|
14
|
-
/**
|
|
15
|
+
/** alternative style to use*/
|
|
15
16
|
variant?: Variant;
|
|
17
|
+
/** mui base button props */
|
|
18
|
+
muiButtonBaseProps?: MUIButtonBaseProps;
|
|
16
19
|
};
|
|
17
20
|
interface ButtonPropsWithLink extends ButtonCoreProps {
|
|
18
21
|
/** link for component to navigate to, if provide component will be an anchor */
|
|
@@ -1,70 +1,94 @@
|
|
|
1
1
|
import '../../assets/Button.css';
|
|
2
|
-
import { jsx as e, jsxs as
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { c as
|
|
5
|
-
import { LoadingSpinner as
|
|
6
|
-
import { B as
|
|
7
|
-
const
|
|
8
|
-
h1:
|
|
9
|
-
"h1--bold": "_h1--
|
|
10
|
-
h2:
|
|
11
|
-
"h2--bold": "_h2--
|
|
12
|
-
h3:
|
|
13
|
-
"h3--bold": "_h3--
|
|
14
|
-
h4:
|
|
15
|
-
"h4--bold": "_h4--
|
|
16
|
-
body:
|
|
17
|
-
"body--large": "_body--
|
|
18
|
-
"body--medium": "_body--
|
|
19
|
-
"body--small": "_body--
|
|
20
|
-
"body--tiny": "_body--
|
|
21
|
-
"body--bold": "_body--
|
|
22
|
-
"body--strikethrough": "_body--
|
|
23
|
-
"body--underlined": "_body--
|
|
24
|
-
"body--strikethrough-underlined": "_body--strikethrough-
|
|
25
|
-
quote:
|
|
26
|
-
"quote--large": "_quote--
|
|
27
|
-
"quote--bold": "_quote--
|
|
28
|
-
"quote--strikethrough": "_quote--
|
|
29
|
-
"quote--underlined": "_quote--
|
|
30
|
-
"quote--strikethrough-underlined": "_quote--strikethrough-
|
|
31
|
-
form__input:
|
|
32
|
-
form__hint:
|
|
33
|
-
form__label:
|
|
34
|
-
form__dropdown:
|
|
35
|
-
"form--bold": "_form--
|
|
36
|
-
"form--strikethrough": "_form--
|
|
37
|
-
"form--underlined": "_form--
|
|
38
|
-
"form--strikethrough-underlined": "_form--strikethrough-
|
|
39
|
-
table__header:
|
|
40
|
-
table__body:
|
|
41
|
-
"table__body--secondary": "_table__body--
|
|
42
|
-
"table--bold": "_table--
|
|
43
|
-
"table--strikethrough": "_table--
|
|
44
|
-
"table--underlined": "_table--
|
|
45
|
-
"table--strikethrough-underlined": "_table--strikethrough-
|
|
46
|
-
button:
|
|
47
|
-
"button--bold": "_button--
|
|
48
|
-
"button--strikethrough": "_button--
|
|
49
|
-
"button--underlined": "_button--
|
|
50
|
-
"button--strikethrough-underlined": "_button--strikethrough-
|
|
51
|
-
|
|
52
|
-
"
|
|
53
|
-
"button--
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
2
|
+
import { jsx as e, jsxs as m } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as c, useMemo as y } from "react";
|
|
4
|
+
import { c as g } from "../../clsx-DB4S2d7J.js";
|
|
5
|
+
import { LoadingSpinner as f } from "../LoadingSpinner/LoadingSpinner.js";
|
|
6
|
+
import { B as p } from "../../Button-B1umG8kJ.js";
|
|
7
|
+
const q = "_h1_10k5d_1", S = "_h2_10k5d_11", M = "_h3_10k5d_21", B = "_h4_10k5d_31", w = "_body_10k5d_41", x = "_quote_10k5d_75", N = "_form__input_10k5d_98", v = "_form__hint_10k5d_103", j = "_form__label_10k5d_108", P = "_form__dropdown_10k5d_113", $ = "_table__header_10k5d_131", C = "_table__body_10k5d_136", L = "_button_10k5d_159", R = "_SM_10k5d_178", o = {
|
|
8
|
+
h1: q,
|
|
9
|
+
"h1--bold": "_h1--bold_10k5d_7",
|
|
10
|
+
h2: S,
|
|
11
|
+
"h2--bold": "_h2--bold_10k5d_17",
|
|
12
|
+
h3: M,
|
|
13
|
+
"h3--bold": "_h3--bold_10k5d_27",
|
|
14
|
+
h4: B,
|
|
15
|
+
"h4--bold": "_h4--bold_10k5d_37",
|
|
16
|
+
body: w,
|
|
17
|
+
"body--large": "_body--large_10k5d_46",
|
|
18
|
+
"body--medium": "_body--medium_10k5d_50",
|
|
19
|
+
"body--small": "_body--small_10k5d_54",
|
|
20
|
+
"body--tiny": "_body--tiny_10k5d_58",
|
|
21
|
+
"body--bold": "_body--bold_10k5d_62",
|
|
22
|
+
"body--strikethrough": "_body--strikethrough_10k5d_65",
|
|
23
|
+
"body--underlined": "_body--underlined_10k5d_68",
|
|
24
|
+
"body--strikethrough-underlined": "_body--strikethrough-underlined_10k5d_71",
|
|
25
|
+
quote: x,
|
|
26
|
+
"quote--large": "_quote--large_10k5d_80",
|
|
27
|
+
"quote--bold": "_quote--bold_10k5d_85",
|
|
28
|
+
"quote--strikethrough": "_quote--strikethrough_10k5d_88",
|
|
29
|
+
"quote--underlined": "_quote--underlined_10k5d_91",
|
|
30
|
+
"quote--strikethrough-underlined": "_quote--strikethrough-underlined_10k5d_94",
|
|
31
|
+
form__input: N,
|
|
32
|
+
form__hint: v,
|
|
33
|
+
form__label: j,
|
|
34
|
+
form__dropdown: P,
|
|
35
|
+
"form--bold": "_form--bold_10k5d_118",
|
|
36
|
+
"form--strikethrough": "_form--strikethrough_10k5d_121",
|
|
37
|
+
"form--underlined": "_form--underlined_10k5d_124",
|
|
38
|
+
"form--strikethrough-underlined": "_form--strikethrough-underlined_10k5d_127",
|
|
39
|
+
table__header: $,
|
|
40
|
+
table__body: C,
|
|
41
|
+
"table__body--secondary": "_table__body--secondary_10k5d_141",
|
|
42
|
+
"table--bold": "_table--bold_10k5d_146",
|
|
43
|
+
"table--strikethrough": "_table--strikethrough_10k5d_149",
|
|
44
|
+
"table--underlined": "_table--underlined_10k5d_152",
|
|
45
|
+
"table--strikethrough-underlined": "_table--strikethrough-underlined_10k5d_155",
|
|
46
|
+
button: L,
|
|
47
|
+
"button--bold": "_button--bold_10k5d_165",
|
|
48
|
+
"button--strikethrough": "_button--strikethrough_10k5d_168",
|
|
49
|
+
"button--underlined": "_button--underlined_10k5d_171",
|
|
50
|
+
"button--strikethrough-underlined": "_button--strikethrough-underlined_10k5d_174",
|
|
51
|
+
SM: R,
|
|
52
|
+
"SM--bold": "_SM--bold_10k5d_183",
|
|
53
|
+
"button--primary": "_button--primary_10k5d_199",
|
|
54
|
+
"button--secondary": "_button--secondary_10k5d_218",
|
|
55
|
+
"button--quick": "_button--quick_10k5d_235",
|
|
56
|
+
"button__loading-container": "_button__loading-container_10k5d_258"
|
|
57
|
+
}, G = c((r, n) => {
|
|
58
|
+
const {
|
|
59
|
+
onClick: u,
|
|
60
|
+
link: l,
|
|
61
|
+
loading: b,
|
|
62
|
+
children: d,
|
|
63
|
+
type: i = "button",
|
|
64
|
+
disabled: k,
|
|
65
|
+
className: t,
|
|
66
|
+
variant: _ = "primary",
|
|
67
|
+
muiButtonBaseProps: h
|
|
68
|
+
} = r, s = {
|
|
57
69
|
invert: _ === "secondary" || _ === "quick"
|
|
58
|
-
},
|
|
59
|
-
() =>
|
|
70
|
+
}, a = y(
|
|
71
|
+
() => g([o.button, o[`button--${_}`], t]),
|
|
60
72
|
[t, _]
|
|
61
73
|
);
|
|
62
|
-
return /* @__PURE__ */ e(
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
74
|
+
return /* @__PURE__ */ e(
|
|
75
|
+
p,
|
|
76
|
+
{
|
|
77
|
+
type: i,
|
|
78
|
+
href: l,
|
|
79
|
+
onClick: u,
|
|
80
|
+
disabled: k,
|
|
81
|
+
className: a,
|
|
82
|
+
ref: n,
|
|
83
|
+
...h ?? {},
|
|
84
|
+
children: b ? /* @__PURE__ */ m("div", { className: o["button__loading-container"], children: [
|
|
85
|
+
/* @__PURE__ */ e(f, { ...s }),
|
|
86
|
+
d
|
|
87
|
+
] }) : d
|
|
88
|
+
}
|
|
89
|
+
);
|
|
66
90
|
});
|
|
67
91
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
92
|
+
G as Button,
|
|
93
|
+
G as default
|
|
70
94
|
};
|
|
@@ -11,6 +11,7 @@ declare const meta: {
|
|
|
11
11
|
className?: string | undefined;
|
|
12
12
|
children: import('react').ReactNode;
|
|
13
13
|
variant?: ("primary" | "secondary" | "quick") | undefined;
|
|
14
|
+
muiButtonBaseProps?: import('@mui/base').ButtonOwnProps | undefined;
|
|
14
15
|
type?: undefined;
|
|
15
16
|
onClick?: undefined;
|
|
16
17
|
ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
|
|
@@ -23,6 +24,7 @@ declare const meta: {
|
|
|
23
24
|
className?: string | undefined;
|
|
24
25
|
children: import('react').ReactNode;
|
|
25
26
|
variant?: ("primary" | "secondary" | "quick") | undefined;
|
|
27
|
+
muiButtonBaseProps?: import('@mui/base').ButtonOwnProps | undefined;
|
|
26
28
|
link?: undefined;
|
|
27
29
|
ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
|
|
28
30
|
key?: import('react').Key | null | undefined;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { IconFamilies, IconProps } from '../../main';
|
|
2
|
+
import { ReactElement, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
export type Variant = 'default' | 'contained' | 'outlined';
|
|
5
|
+
type ChipProps = {
|
|
6
|
+
/** Main content to display, typically just some text */
|
|
7
|
+
label: ReactNode;
|
|
8
|
+
/** Whether to show loading state (skeleton) */
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
/** Left icon to display */
|
|
11
|
+
leftAdornment?: ChipAdornmentSlotProps;
|
|
12
|
+
/** Dataset test id only used for tests to reach in and grab the rendered DOM node of the chip wrapper */
|
|
13
|
+
'data-testid'?: string;
|
|
14
|
+
/** Functionality to perform when the main body of the chip is clicked */
|
|
15
|
+
onClickContent?: () => void;
|
|
16
|
+
/** If present an 'x' icon will be on the right side of the button when clicked whatever functionality is passed to
|
|
17
|
+
* this will be executed */
|
|
18
|
+
onClickRemove?: () => void;
|
|
19
|
+
/** Whether to show the button in a disabled state, user will be unable to interact with the chip */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Any additional classes to apply to the Chip wrapper */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Which style of chip to show */
|
|
24
|
+
variant?: Variant;
|
|
25
|
+
/** Dataset test id only used for tests, used to hook onto the loading skeleton component for this chip */
|
|
26
|
+
'data-testid-skeleton'?: string;
|
|
27
|
+
};
|
|
28
|
+
export type ChipAdornmentSlotProps = {
|
|
29
|
+
/** The Marola Icon to display */
|
|
30
|
+
icon: ReactElement<IconProps<IconFamilies>>;
|
|
31
|
+
/** Any additional classes to apply to icon */
|
|
32
|
+
className?: string;
|
|
33
|
+
/** Dataset test id only used for tests to reach in and grab the rendered DOM node of the icon */
|
|
34
|
+
'data-testid'?: string;
|
|
35
|
+
};
|
|
36
|
+
export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<unknown>>;
|
|
37
|
+
export {};
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import '../../assets/Chip.css';
|
|
2
|
+
import { jsx as t, jsxs as m } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as u, cloneElement as p } from "react";
|
|
4
|
+
import { c as s } from "../../clsx-DB4S2d7J.js";
|
|
5
|
+
import { Icon as f } from "../Icon/Icon.js";
|
|
6
|
+
import "../Button/Button.js";
|
|
7
|
+
import "../Dialog/Backdrop.js";
|
|
8
|
+
import "../Typography/Typography.js";
|
|
9
|
+
import "../IconButton/IconButton.js";
|
|
10
|
+
import "../Select/Select.js";
|
|
11
|
+
import { Skeleton as y } from "../Skeleton/Skeleton.js";
|
|
12
|
+
import "../Table/Table.js";
|
|
13
|
+
import "../Tabs/Tabs.js";
|
|
14
|
+
import { B as g } from "../../Button-B1umG8kJ.js";
|
|
15
|
+
const k = "_h1_1hro6_1", q = "_h2_1hro6_11", C = "_h3_1hro6_21", x = "_h4_1hro6_31", N = "_body_1hro6_41", v = "_quote_1hro6_75", S = "_form__input_1hro6_98", w = "_form__hint_1hro6_103", M = "_form__label_1hro6_108", R = "_form__dropdown_1hro6_113", A = "_table__header_1hro6_131", I = "_table__body_1hro6_136", T = "_button_1hro6_159", j = "_SM_1hro6_178", B = "_chip_1hro6_178", E = "_chip__adornment_1hro6_224", P = "_chip__remove_1hro6_229", e = {
|
|
16
|
+
h1: k,
|
|
17
|
+
"h1--bold": "_h1--bold_1hro6_7",
|
|
18
|
+
h2: q,
|
|
19
|
+
"h2--bold": "_h2--bold_1hro6_17",
|
|
20
|
+
h3: C,
|
|
21
|
+
"h3--bold": "_h3--bold_1hro6_27",
|
|
22
|
+
h4: x,
|
|
23
|
+
"h4--bold": "_h4--bold_1hro6_37",
|
|
24
|
+
body: N,
|
|
25
|
+
"body--large": "_body--large_1hro6_46",
|
|
26
|
+
"body--medium": "_body--medium_1hro6_50",
|
|
27
|
+
"body--small": "_body--small_1hro6_54",
|
|
28
|
+
"body--tiny": "_body--tiny_1hro6_58",
|
|
29
|
+
"body--bold": "_body--bold_1hro6_62",
|
|
30
|
+
"body--strikethrough": "_body--strikethrough_1hro6_65",
|
|
31
|
+
"body--underlined": "_body--underlined_1hro6_68",
|
|
32
|
+
"body--strikethrough-underlined": "_body--strikethrough-underlined_1hro6_71",
|
|
33
|
+
quote: v,
|
|
34
|
+
"quote--large": "_quote--large_1hro6_80",
|
|
35
|
+
"quote--bold": "_quote--bold_1hro6_85",
|
|
36
|
+
"quote--strikethrough": "_quote--strikethrough_1hro6_88",
|
|
37
|
+
"quote--underlined": "_quote--underlined_1hro6_91",
|
|
38
|
+
"quote--strikethrough-underlined": "_quote--strikethrough-underlined_1hro6_94",
|
|
39
|
+
form__input: S,
|
|
40
|
+
form__hint: w,
|
|
41
|
+
form__label: M,
|
|
42
|
+
form__dropdown: R,
|
|
43
|
+
"form--bold": "_form--bold_1hro6_118",
|
|
44
|
+
"form--strikethrough": "_form--strikethrough_1hro6_121",
|
|
45
|
+
"form--underlined": "_form--underlined_1hro6_124",
|
|
46
|
+
"form--strikethrough-underlined": "_form--strikethrough-underlined_1hro6_127",
|
|
47
|
+
table__header: A,
|
|
48
|
+
table__body: I,
|
|
49
|
+
"table__body--secondary": "_table__body--secondary_1hro6_141",
|
|
50
|
+
"table--bold": "_table--bold_1hro6_146",
|
|
51
|
+
"table--strikethrough": "_table--strikethrough_1hro6_149",
|
|
52
|
+
"table--underlined": "_table--underlined_1hro6_152",
|
|
53
|
+
"table--strikethrough-underlined": "_table--strikethrough-underlined_1hro6_155",
|
|
54
|
+
button: T,
|
|
55
|
+
"button--bold": "_button--bold_1hro6_165",
|
|
56
|
+
"button--strikethrough": "_button--strikethrough_1hro6_168",
|
|
57
|
+
"button--underlined": "_button--underlined_1hro6_171",
|
|
58
|
+
"button--strikethrough-underlined": "_button--strikethrough-underlined_1hro6_174",
|
|
59
|
+
SM: j,
|
|
60
|
+
chip: B,
|
|
61
|
+
"SM--bold": "_SM--bold_1hro6_183",
|
|
62
|
+
"chip--button": "_chip--button_1hro6_199",
|
|
63
|
+
"chip--outlined": "_chip--outlined_1hro6_212",
|
|
64
|
+
"chip--contained": "_chip--contained_1hro6_218",
|
|
65
|
+
chip__adornment: E,
|
|
66
|
+
chip__remove: P,
|
|
67
|
+
"chip__remove--disabled": "_chip__remove--disabled_1hro6_240"
|
|
68
|
+
}, z = u((o, _) => {
|
|
69
|
+
const { children: d, onClickContent: h, disabled: l, className: n, variant: a } = o;
|
|
70
|
+
let r = s(
|
|
71
|
+
e.chip,
|
|
72
|
+
{ [e["chip--outlined"]]: a === "outlined" },
|
|
73
|
+
{ [e["chip--contained"]]: a === "contained" },
|
|
74
|
+
n
|
|
75
|
+
);
|
|
76
|
+
return h ? (r += ` ${e["chip--button"]}`, /* @__PURE__ */ t(
|
|
77
|
+
g,
|
|
78
|
+
{
|
|
79
|
+
onClick: h,
|
|
80
|
+
disabled: l,
|
|
81
|
+
"data-testid": o["data-testid"],
|
|
82
|
+
ref: _,
|
|
83
|
+
className: r,
|
|
84
|
+
children: d
|
|
85
|
+
}
|
|
86
|
+
)) : /* @__PURE__ */ t("span", { "data-testid": o["data-testid"], ref: _, className: r, children: d });
|
|
87
|
+
}), U = (o) => {
|
|
88
|
+
const { icon: _, disabled: d = !1, className: h } = o;
|
|
89
|
+
if (_) {
|
|
90
|
+
const l = s(e.chip__adornment, h), n = d ? p(_, { color: "rgb(var(--gray-95-rgb) 0.4)" }) : _;
|
|
91
|
+
return /* @__PURE__ */ t("span", { className: l, children: n });
|
|
92
|
+
}
|
|
93
|
+
return null;
|
|
94
|
+
}, Y = u((o, _) => {
|
|
95
|
+
const {
|
|
96
|
+
label: d,
|
|
97
|
+
className: h,
|
|
98
|
+
onClickContent: l,
|
|
99
|
+
leftAdornment: n,
|
|
100
|
+
loading: a = !1,
|
|
101
|
+
disabled: r = !1,
|
|
102
|
+
variant: c = "default",
|
|
103
|
+
onClickRemove: b
|
|
104
|
+
} = o;
|
|
105
|
+
return a ? /* @__PURE__ */ t(
|
|
106
|
+
y,
|
|
107
|
+
{
|
|
108
|
+
style: { width: "6rem", height: "2rem", borderRadius: "4rem", display: "inline-flex" },
|
|
109
|
+
"data-testid": o["data-testid-skeleton"]
|
|
110
|
+
}
|
|
111
|
+
) : /* @__PURE__ */ m(
|
|
112
|
+
z,
|
|
113
|
+
{
|
|
114
|
+
ref: _,
|
|
115
|
+
"data-testid": o["data-testid"],
|
|
116
|
+
onClickContent: l,
|
|
117
|
+
disabled: r,
|
|
118
|
+
className: h,
|
|
119
|
+
variant: c,
|
|
120
|
+
children: [
|
|
121
|
+
n && /* @__PURE__ */ t(U, { ...n, disabled: r }),
|
|
122
|
+
d,
|
|
123
|
+
b && /* @__PURE__ */ t(
|
|
124
|
+
"span",
|
|
125
|
+
{
|
|
126
|
+
className: s(e.chip__remove, { [e["chip__remove--disabled"]]: r }),
|
|
127
|
+
role: "button",
|
|
128
|
+
tabIndex: r ? -1 : 0,
|
|
129
|
+
"aria-label": "remove",
|
|
130
|
+
onClick: (i) => {
|
|
131
|
+
i == null || i.stopPropagation(), i == null || i.nativeEvent.stopImmediatePropagation(), b();
|
|
132
|
+
},
|
|
133
|
+
"aria-disabled": r,
|
|
134
|
+
children: /* @__PURE__ */ t(f, { icon: "circle-xmark", size: "1.125rem", color: "rgba(var(--gray-95-rgb), 0.45)" })
|
|
135
|
+
}
|
|
136
|
+
)
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
});
|
|
141
|
+
export {
|
|
142
|
+
Y as Chip
|
|
143
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import('react').ForwardRefExoticComponent<{
|
|
6
|
+
label: import('react').ReactNode;
|
|
7
|
+
loading?: boolean | undefined;
|
|
8
|
+
leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
|
|
9
|
+
'data-testid'?: string | undefined;
|
|
10
|
+
onClickContent?: (() => void) | undefined;
|
|
11
|
+
onClickRemove?: (() => void) | undefined;
|
|
12
|
+
disabled?: boolean | undefined;
|
|
13
|
+
className?: string | undefined;
|
|
14
|
+
variant?: import('./Chip').Variant | undefined;
|
|
15
|
+
'data-testid-skeleton'?: string | undefined;
|
|
16
|
+
} & import('react').RefAttributes<unknown>>;
|
|
17
|
+
tags: string[];
|
|
18
|
+
decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
19
|
+
label: import('react').ReactNode;
|
|
20
|
+
loading?: boolean | undefined;
|
|
21
|
+
leftAdornment?: import('./Chip').ChipAdornmentSlotProps | undefined;
|
|
22
|
+
'data-testid'?: string | undefined;
|
|
23
|
+
onClickContent?: (() => void) | undefined;
|
|
24
|
+
onClickRemove?: (() => void) | undefined;
|
|
25
|
+
disabled?: boolean | undefined;
|
|
26
|
+
className?: string | undefined;
|
|
27
|
+
variant?: import('./Chip').Variant | undefined;
|
|
28
|
+
'data-testid-skeleton'?: string | undefined;
|
|
29
|
+
ref?: import('react').LegacyRef<unknown> | undefined;
|
|
30
|
+
key?: import('react').Key | null | undefined;
|
|
31
|
+
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
32
|
+
};
|
|
33
|
+
export default meta;
|
|
34
|
+
type Story = StoryObj<typeof meta>;
|
|
35
|
+
export declare const Simple: Story;
|
|
36
|
+
export declare const Clickable: Story;
|
|
37
|
+
export declare const ClickableWithRemove: Story;
|
|
38
|
+
export declare const FullDefault: Story;
|
|
39
|
+
export declare const FullOutlined: Story;
|
|
40
|
+
export declare const FullContained: Story;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { Chip as i } from "./Chip.js";
|
|
3
|
+
import { Icon as e } from "../Icon/Icon.js";
|
|
4
|
+
import "../Button/Button.js";
|
|
5
|
+
import "react";
|
|
6
|
+
import "../Dialog/Backdrop.js";
|
|
7
|
+
import "../Typography/Typography.js";
|
|
8
|
+
import "../IconButton/IconButton.js";
|
|
9
|
+
import "../Select/Select.js";
|
|
10
|
+
import "../Table/Table.js";
|
|
11
|
+
import "../Tabs/Tabs.js";
|
|
12
|
+
const f = {
|
|
13
|
+
title: "Components/Chip",
|
|
14
|
+
component: i,
|
|
15
|
+
tags: ["autodocs"],
|
|
16
|
+
decorators: [
|
|
17
|
+
(s) => /* @__PURE__ */ a("div", { style: { padding: "1em" }, children: /* @__PURE__ */ a(s, {}) })
|
|
18
|
+
]
|
|
19
|
+
}, r = {
|
|
20
|
+
args: {
|
|
21
|
+
label: "Example text"
|
|
22
|
+
}
|
|
23
|
+
}, t = {
|
|
24
|
+
args: {
|
|
25
|
+
...r == null ? void 0 : r.args,
|
|
26
|
+
onClickContent: () => alert("Button was clicked!")
|
|
27
|
+
}
|
|
28
|
+
}, n = {
|
|
29
|
+
args: {
|
|
30
|
+
...t == null ? void 0 : t.args,
|
|
31
|
+
onClickRemove: () => alert("Remove changes!")
|
|
32
|
+
}
|
|
33
|
+
}, o = {
|
|
34
|
+
args: {
|
|
35
|
+
...n == null ? void 0 : n.args,
|
|
36
|
+
leftAdornment: {
|
|
37
|
+
icon: /* @__PURE__ */ a(e, { icon: "calendar-days", color: "rgba(var(--gray-95-rgb), 0.45)", size: "1.125rem" })
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}, b = {
|
|
41
|
+
args: {
|
|
42
|
+
...o == null ? void 0 : o.args,
|
|
43
|
+
variant: "outlined"
|
|
44
|
+
}
|
|
45
|
+
}, j = {
|
|
46
|
+
args: {
|
|
47
|
+
...o == null ? void 0 : o.args,
|
|
48
|
+
variant: "contained"
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
export {
|
|
52
|
+
t as Clickable,
|
|
53
|
+
n as ClickableWithRemove,
|
|
54
|
+
j as FullContained,
|
|
55
|
+
o as FullDefault,
|
|
56
|
+
b as FullOutlined,
|
|
57
|
+
r as Simple,
|
|
58
|
+
f as default
|
|
59
|
+
};
|