@sikt/sds-toggle 3.0.0 → 3.0.2
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/CHANGELOG.md +16 -0
- package/dist/index.css +0 -53
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +19 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [3.0.2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@3.0.1...@sikt/sds-toggle@3.0.2) (2024-05-24)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **toggle:** package json exports ([3026cff](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3026cff33947459c88861ed5f4bae30da556ba5b))
|
|
10
|
+
|
|
11
|
+
## [3.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@3.0.0...@sikt/sds-toggle@3.0.1) (2024-04-26)
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
- **deps:** update @sikt/sds-core to ^3.0.2 ([a55b4c2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a55b4c2f0bad4dfe80b26c0f7102622b4257d8b2))
|
|
16
|
+
- **deps:** update @sikt/sds-tokens to ^1.0.1 ([3618147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3618147fbc51048b8f63484b63cd2fa6e76cbbf4))
|
|
17
|
+
- **deps:** update sds-icons ([8a3e1ae](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8a3e1ae229148b84f603089337b8a8f54d23fe39))
|
|
18
|
+
- **toggle:** add classname to correct element ([909f938](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/909f938e643952b1354eb52c51f7e918c3c5873f))
|
|
19
|
+
- **toggle:** add missing deps sds-icon ([41da229](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/41da22918039cf2a3c698e4824ef11babfc3e57c))
|
|
20
|
+
|
|
5
21
|
## [3.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@2.1.0...@sikt/sds-toggle@3.0.0) (2024-04-01)
|
|
6
22
|
|
|
7
23
|
### ⚠ BREAKING CHANGES
|
package/dist/index.css
CHANGED
|
@@ -1,56 +1,3 @@
|
|
|
1
|
-
/* ../icons/icon.pcss */
|
|
2
|
-
.sds-icon {
|
|
3
|
-
fill: currentcolor;
|
|
4
|
-
stroke: currentcolor;
|
|
5
|
-
stroke-width: 1;
|
|
6
|
-
stroke-linecap: round;
|
|
7
|
-
stroke-linejoin: round;
|
|
8
|
-
width: 1em;
|
|
9
|
-
height: 1em;
|
|
10
|
-
}
|
|
11
|
-
.sds-icon--spinner {
|
|
12
|
-
animation: spinner 1s steps(8, end) infinite;
|
|
13
|
-
}
|
|
14
|
-
@keyframes spinner {
|
|
15
|
-
to {
|
|
16
|
-
transform: rotate(360deg);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
.sds-icon-logo {
|
|
20
|
-
--icon-color: #000;
|
|
21
|
-
fill: var(--icon-color);
|
|
22
|
-
stroke: var(--icon-color);
|
|
23
|
-
}
|
|
24
|
-
@media (prefers-color-scheme: dark) {
|
|
25
|
-
.sds-icon-logo {
|
|
26
|
-
--icon-color: #fff ;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
.sds-icon-logo--color-white {
|
|
30
|
-
--icon-color: #fff;
|
|
31
|
-
}
|
|
32
|
-
.sds-icon-logo--color-black {
|
|
33
|
-
--icon-color: #000;
|
|
34
|
-
}
|
|
35
|
-
[data-color-scheme=dark] .sds-icon-logo {
|
|
36
|
-
--icon-color: #fff;
|
|
37
|
-
}
|
|
38
|
-
[data-color-scheme=dark] .sds-icon-logo--color-white {
|
|
39
|
-
--icon-color: #fff;
|
|
40
|
-
}
|
|
41
|
-
[data-color-scheme=dark] .sds-icon-logo--color-black {
|
|
42
|
-
--icon-color: #000;
|
|
43
|
-
}
|
|
44
|
-
[data-color-scheme=light] .sds-icon-logo {
|
|
45
|
-
--icon-color: #000;
|
|
46
|
-
}
|
|
47
|
-
[data-color-scheme=light] .sds-icon-logo--color-white {
|
|
48
|
-
--icon-color: #fff;
|
|
49
|
-
}
|
|
50
|
-
[data-color-scheme=light] .sds-icon-logo--color-black {
|
|
51
|
-
--icon-color: #000;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
1
|
/* toggle-switch.pcss */
|
|
55
2
|
.sds-toggle-switch {
|
|
56
3
|
--toggle-transition-duration: var(--sds-effect-animation-duration-medium);
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../icons/icon.pcss","../toggle-switch.pcss","../toggle-button.pcss","../toggle-segment.pcss"],"sourcesContent":[".sds-icon {\n fill: currentcolor;\n stroke: currentcolor;\n stroke-width: 1;\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 1em;\n height: 1em;\n}\n\n .sds-icon--spinner {\n animation: spinner 1s steps(8, end) infinite;\n }\n\n @keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n }\n\n.sds-icon-logo {\n --icon-color: #000;\n\n fill: var(--icon-color);\n stroke: var(--icon-color);\n}\n\n@media (prefers-color-scheme: dark) {\n\n.sds-icon-logo {\n --icon-color: #fff\n}\n }\n\n.sds-icon-logo--color-white {\n --icon-color: #fff;\n }\n\n.sds-icon-logo--color-black {\n --icon-color: #000;\n }\n\n[data-color-scheme=\"dark\"] .sds-icon-logo {\n --icon-color: #fff;\n }\n\n[data-color-scheme=\"dark\"] .sds-icon-logo--color-white {\n --icon-color: #fff;\n }\n\n[data-color-scheme=\"dark\"] .sds-icon-logo--color-black {\n --icon-color: #000;\n }\n\n[data-color-scheme=\"light\"] .sds-icon-logo {\n --icon-color: #000;\n }\n\n[data-color-scheme=\"light\"] .sds-icon-logo--color-white {\n --icon-color: #fff;\n }\n\n[data-color-scheme=\"light\"] .sds-icon-logo--color-black {\n --icon-color: #000;\n }\n",".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-base-size-l);\n --toggle-thumb-size: var(--sds-base-size-s1);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n .sds-toggle-switch--checked:hover,\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n .sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n border-radius: var(--sds-space-border-radius-full);\n transition: all var(--toggle-transition-duration);\n background-color: var(--toggle-thumb-background-color);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > * {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n font-size: var(--sds-base-size-s);\n }\n\n .sds-toggle-switch--error,\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n\n .sds-toggle-switch--error:hover, .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n .sds-toggle-switch--error:active, .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n",".sds-toggle-button {\n --toggle-button-background-color: inherit;\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-color: var(--sds-color-text-primary);\n --toggle-button-outline: none;\n\n display: inline-block;\n}\n\n .sds-toggle-button__label {\n align-items: center;\n background-color: var(--toggle-button-background-color);\n border: var(--sds-space-border-weight-regular) solid\n var(--toggle-button-border-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--toggle-button-color);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: calc(\n var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n );\n outline: var(--toggle-button-outline);\n outline-offset: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n .sds-toggle-button__label-text {\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-button__label:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-border-color: var(--toggle-button-background-color);\n --toggle-button-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-button__label--checked:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label--checked:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__icon {\n height: var(--sds-base-size-m);\n width: var(--sds-base-size-m);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .sds-toggle-button__icon--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n\n .sds-toggle-button__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n",".sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n grid-auto-flow: column;\n outline: var(--sds-space-border-weight-regular) solid\n var(--sds-color-interaction-primary-strong-default);\n outline-offset: calc(var(--sds-space-border-weight-regular) * -1);\n }\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n justify-content: center;\n }\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n .sds-toggle-segment__label {\n border-radius: var(--sds-space-border-radius-small);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n min-width: 44px;\n padding: var(--sds-space-padding-small);\n position: relative;\n text-align: center;\n width: 100%;\n }\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../toggle-switch.pcss","../toggle-button.pcss","../toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-base-size-l);\n --toggle-thumb-size: var(--sds-base-size-s1);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n .sds-toggle-switch--checked:hover,\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n .sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n border-radius: var(--sds-space-border-radius-full);\n transition: all var(--toggle-transition-duration);\n background-color: var(--toggle-thumb-background-color);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > * {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n font-size: var(--sds-base-size-s);\n }\n\n .sds-toggle-switch--error,\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n\n .sds-toggle-switch--error:hover, .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n .sds-toggle-switch--error:active, .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n",".sds-toggle-button {\n --toggle-button-background-color: inherit;\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-color: var(--sds-color-text-primary);\n --toggle-button-outline: none;\n\n display: inline-block;\n}\n\n .sds-toggle-button__label {\n align-items: center;\n background-color: var(--toggle-button-background-color);\n border: var(--sds-space-border-weight-regular) solid\n var(--toggle-button-border-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--toggle-button-color);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: calc(\n var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n );\n outline: var(--toggle-button-outline);\n outline-offset: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n .sds-toggle-button__label-text {\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-button__label:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-border-color: var(--toggle-button-background-color);\n --toggle-button-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-button__label--checked:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label--checked:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__icon {\n height: var(--sds-base-size-m);\n width: var(--sds-base-size-m);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .sds-toggle-button__icon--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n\n .sds-toggle-button__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n",".sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n grid-auto-flow: column;\n outline: var(--sds-space-border-weight-regular) solid\n var(--sds-color-interaction-primary-strong-default);\n outline-offset: calc(var(--sds-space-border-weight-regular) * -1);\n }\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n justify-content: center;\n }\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n .sds-toggle-segment__label {\n border-radius: var(--sds-space-border-radius-small);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n min-width: 44px;\n padding: var(--sds-space-padding-small);\n position: relative;\n text-align: center;\n width: 100%;\n }\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -9,6 +9,7 @@ interface ToggleSwitchProps {
|
|
|
9
9
|
showIcons?: boolean;
|
|
10
10
|
error?: boolean;
|
|
11
11
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
12
|
+
className?: string;
|
|
12
13
|
}
|
|
13
14
|
declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
14
15
|
|
|
@@ -17,6 +18,7 @@ interface ToggleButtonProps {
|
|
|
17
18
|
label: ReactNode;
|
|
18
19
|
showIcons?: boolean;
|
|
19
20
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
21
|
+
className?: string;
|
|
20
22
|
}
|
|
21
23
|
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLInputElement>>;
|
|
22
24
|
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ interface ToggleSwitchProps {
|
|
|
9
9
|
showIcons?: boolean;
|
|
10
10
|
error?: boolean;
|
|
11
11
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
12
|
+
className?: string;
|
|
12
13
|
}
|
|
13
14
|
declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
14
15
|
|
|
@@ -17,6 +18,7 @@ interface ToggleButtonProps {
|
|
|
17
18
|
label: ReactNode;
|
|
18
19
|
showIcons?: boolean;
|
|
19
20
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
21
|
+
className?: string;
|
|
20
22
|
}
|
|
21
23
|
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLInputElement>>;
|
|
22
24
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react"),s=require("clsx"),l=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var e=require("react"),s=require("clsx"),l=require("@sikt/sds-icons"),t=require("react/jsx-runtime"),a=require("@sikt/sds-form");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(s),o=e.forwardRef((({checked:s=!1,label:a,labelFirst:c=!1,showIcons:o=!0,error:n=!1,onChange:g,className:r,...i},h)=>{const u=e.useId(),m=t.jsx("div",{className:"sds-toggle-switch__label-text",children:a});return t.jsx("div",{className:d.default("sds-toggle-switch",s&&"sds-toggle-switch--checked",n&&"sds-toggle-switch--error",r),"data-testid":"sds-toggle-switch",children:t.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:u,children:[c&&m,t.jsxs("div",{className:"sds-toggle-switch__inner",children:[t.jsx("input",{ref:h,id:u,type:"checkbox",role:"switch",className:"sds-toggle-switch__track",checked:s,"aria-invalid":n,onChange:g,readOnly:!g,...i}),t.jsxs("div",{className:"sds-toggle-switch__thumb",children:[o&&s&&t.jsx(l.CheckIcon,{}),o&&!s&&t.jsx(l.XIcon,{})]})]}),!c&&m]})})}));o.displayName="ToggleSwitch";var n=e.forwardRef((({checked:s,label:a,showIcons:c=!0,onChange:o,className:n,...g},r)=>{const i=e.useId();return t.jsxs("div",{className:d.default("sds-toggle-button",n),...g,children:[t.jsx("input",{ref:r,type:"checkbox",className:"sds-toggle-button__input",onChange:o,readOnly:!o,checked:s,"aria-checked":s,id:i}),t.jsxs("label",{className:d.default("sds-toggle-button__label",s&&"sds-toggle-button__label--checked"),htmlFor:i,children:[t.jsx("div",{className:"sds-toggle-button__label-text",children:a}),c&&t.jsx(l.PlusCircleIcon,{className:d.default("sds-toggle-button__icon",s&&"sds-toggle-button__icon--checked")})]})]})}));n.displayName="ToggleButton";var g=e.forwardRef((({children:e,variant:s="default",className:l,...c},o)=>t.jsx("div",{className:d.default("sds-toggle-segment","default"!==s&&"sds-toggle-segment--".concat(s),l),children:t.jsx(a.Fieldset,{className:"sds-toggle-segment__fieldset",...c,ref:o,children:t.jsx("div",{className:"sds-toggle-segment__group",children:e})})})));g.displayName="ToggleSegment";var r=e.forwardRef((({value:s,label:l,checked:c,onChange:o,className:n,...g},r)=>{var i,h;const{name:u}=null!=(i=a.useFieldset())?i:{},m=e.useId(),_=null!=(h=g.id)?h:m;return t.jsxs("div",{className:d.default("sds-toggle-segment__option",c&&"sds-toggle-segment__option--checked",n),children:[t.jsx("input",{id:_,name:u,ref:r,type:"radio",onChange:o,className:"sds-toggle-segment__input",value:s,checked:c,...g}),t.jsx("label",{className:"sds-toggle-segment__label",htmlFor:_,children:l})]})}));r.displayName="ToggleSegmentOption",exports.ToggleButton=n,exports.ToggleSegment=g,exports.ToggleSegmentOption=r,exports.ToggleSwitch=o;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../ToggleSwitch.tsx","../../icons/SpinnerIcon.tsx","../../icons/build/Archive.tsx","../../icons/build/ArrowCircleLeft.tsx","../../icons/build/ArrowCircleRight.tsx","../../icons/build/ArrowClockwise.tsx","../../icons/build/ArrowLeft.tsx","../../icons/build/ArrowRight.tsx","../../icons/build/ArrowSquareOut.tsx","../../icons/build/ArrowUUpLeft.tsx","../../icons/build/ArrowUUpRight.tsx","../../icons/build/BellRinging.tsx","../../icons/build/Bell.tsx","../../icons/build/BookmarkSimpleFill.tsx","../../icons/build/BookmarkSimple.tsx","../../icons/build/CalendarBlank.tsx","../../icons/build/CalendarPlus.tsx","../../icons/build/CaretCircleDown.tsx","../../icons/build/CaretCircleLeft.tsx","../../icons/build/CaretCircleRight.tsx","../../icons/build/CaretCircleUp.tsx","../../icons/build/CaretDown.tsx","../../icons/build/CaretLeft.tsx","../../icons/build/CaretRight.tsx","../../icons/build/CaretUp.tsx","../../icons/build/CheckCircle.tsx","../../icons/build/Check.tsx","../../icons/build/Circle.tsx","../../icons/build/Clock.tsx","../../icons/build/Copy.tsx","../../icons/build/DotsSixVertical.tsx","../../icons/build/DotsThreeCircle.tsx","../../icons/build/DotsThree.tsx","../../icons/build/DownloadSimple.tsx","../../icons/build/Envelope.tsx","../../icons/build/Export.tsx","../../icons/build/FloppyDisk.tsx","../../icons/build/Funnel.tsx","../../icons/build/Gear.tsx","../../icons/build/House.tsx","../../icons/build/Image.tsx","../../icons/build/Info.tsx","../../icons/build/LinkSimple.tsx","../../icons/build/List.tsx","../../icons/build/LockSimpleOpen.tsx","../../icons/build/LockSimple.tsx","../../icons/build/MagnifyingGlass.tsx","../../icons/build/MapPin.tsx","../../icons/build/Megaphone.tsx","../../icons/build/MinusCircle.tsx","../../icons/build/Minus.tsx","../../icons/build/Paperclip.tsx","../../icons/build/Password.tsx","../../icons/build/Pencil.tsx","../../icons/build/Phone.tsx","../../icons/build/PlusCircle.tsx","../../icons/build/Plus.tsx","../../icons/build/Question.tsx","../../icons/build/ShoppingCart.tsx","../../icons/build/SignIn.tsx","../../icons/build/SignOut.tsx","../../icons/build/Sliders.tsx","../../icons/build/SortAscending.tsx","../../icons/build/SortDescending.tsx","../../icons/build/SpinnerGap.tsx","../../icons/build/Trash.tsx","../../icons/build/UploadSimple.tsx","../../icons/build/UserCircleMinus.tsx","../../icons/build/UserCirclePlus.tsx","../../icons/build/UserCircle.tsx","../../icons/build/Warning.tsx","../../icons/build/XCircle.tsx","../../icons/build/X.tsx","../../icons/LogoIcons.tsx","../ToggleButton.tsx","../ToggleSegment.tsx","../ToggleSegmentOption.tsx"],"names":["clsx","jsx","forwardRef","useId","jsxs"],"mappings":"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","sourcesContent":["import { ReactNode, ChangeEventHandler, useId, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-switch.pcss\";\n\nexport interface ToggleSwitchProps {\n checked?: boolean;\n label: ReactNode;\n labelFirst?: boolean;\n showIcons?: boolean;\n error?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\n labelFirst = false,\n showIcons = true,\n error = false,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const labelElement = (\n <div className=\"sds-toggle-switch__label-text\">{label}</div>\n );\n\n return (\n <div\n className={clsx(\n \"sds-toggle-switch\",\n checked && \"sds-toggle-switch--checked\",\n error && \"sds-toggle-switch--error\",\n )}\n data-testid=\"sds-toggle-switch\"\n >\n <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\n <div className=\"sds-toggle-switch__inner\">\n <input\n ref={ref}\n id={id}\n type=\"checkbox\"\n role=\"switch\"\n className=\"sds-toggle-switch__track\"\n checked={checked}\n aria-invalid={error}\n onChange={onChange}\n readOnly={!onChange}\n {...rest}\n />\n <div className=\"sds-toggle-switch__thumb\">\n {showIcons && checked && <CheckIcon />}\n {showIcons && !checked && <XIcon />}\n </div>\n </div>\n {!labelFirst && labelElement}\n </label>\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import clsx from \"clsx\";\nimport { SpinnerGapIcon, IconProps } from \"./build/index\";\n\nexport const SpinnerIcon = ({ className, ...rest }: IconProps) => (\n <SpinnerGapIcon\n className={clsx(\"sds-icon sds-icon--spinner\", className)}\n {...rest}\n />\n);\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArchive = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 48H32a16 16 0 0 0-16 16v24a16 16 0 0 0 16 16v88a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-88a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16Zm-16 144H48v-88h160Zm16-104H32V64h192v24ZM96 136a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16h-48a8 8 0 0 1-8-8Z\" />\n </svg>\n);\nexport default SvgArchive;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowCircleLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm48-88a8 8 0 0 1-8 8h-60.69l18.35 18.34a8 8 0 0 1-11.32 11.32l-32-32a8 8 0 0 1 0-11.32l32-32a8 8 0 0 1 11.32 11.32L107.31 120H168a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgArrowCircleLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowCircleRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm45.66-93.66a8 8 0 0 1 0 11.32l-32 32a8 8 0 0 1-11.32-11.32L148.69 136H88a8 8 0 0 1 0-16h60.69l-18.35-18.34a8 8 0 0 1 11.32-11.32Z\" />\n </svg>\n);\nexport default SvgArrowCircleRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowClockwise = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M240 56v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h27.4l-26.59-24.36-.25-.24a80 80 0 1 0-1.67 114.78 8 8 0 0 1 11 11.63A95.44 95.44 0 0 1 128 224h-1.32a96 96 0 1 1 69.07-164L224 85.8V56a8 8 0 1 1 16 0Z\" />\n </svg>\n);\nexport default SvgArrowClockwise;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgArrowLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z\" />\n </svg>\n);\nexport default SvgArrowRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowSquareOut = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8Z\" />\n </svg>\n);\nexport default SvgArrowSquareOut;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowUUpLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M232 144a64.07 64.07 0 0 1-64 64H80a8 8 0 0 1 0-16h88a48 48 0 0 0 0-96H51.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L51.31 80H168a64.07 64.07 0 0 1 64 64Z\" />\n </svg>\n);\nexport default SvgArrowUUpLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowUUpRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M170.34 130.34 204.69 96H88a48 48 0 0 0 0 96h88a8 8 0 0 1 0 16H88a64 64 0 0 1 0-128h116.69l-34.35-34.34a8 8 0 0 1 11.32-11.32l48 48a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32-11.32Z\" />\n </svg>\n);\nexport default SvgArrowUUpRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBellRinging = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 71.1a8 8 0 0 1-10.78-3.42 94.13 94.13 0 0 0-33.46-36.91 8 8 0 1 1 8.54-13.54 111.46 111.46 0 0 1 39.12 43.09A8 8 0 0 1 224 71.1ZM35.71 72a8 8 0 0 0 7.1-4.32 94.13 94.13 0 0 1 33.46-36.91 8 8 0 1 0-8.54-13.54 111.46 111.46 0 0 0-39.12 43.09A8 8 0 0 0 35.71 72Zm186.1 103.94A16 16 0 0 1 208 200h-40.8a40 40 0 0 1-78.4 0H48a16 16 0 0 1-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 0 1 160 0c0 26.27 4.78 48.38 13.81 63.94ZM150.62 200h-45.24a24 24 0 0 0 45.24 0ZM208 184c-10.64-18.27-16-42.49-16-72a64 64 0 0 0-128 0c0 29.52-5.38 53.74-16 72Z\" />\n </svg>\n);\nexport default SvgBellRinging;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBell = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M221.8 175.94c-5.55-9.56-13.8-36.61-13.8-71.94a80 80 0 1 0-160 0c0 35.34-8.26 62.38-13.81 71.94A16 16 0 0 0 48 200h40.81a40 40 0 0 0 78.38 0H208a16 16 0 0 0 13.8-24.06ZM128 216a24 24 0 0 1-22.62-16h45.24A24 24 0 0 1 128 216Zm-80-32c7.7-13.24 16-43.92 16-80a64 64 0 1 1 128 0c0 36.05 8.28 66.73 16 80Z\" />\n </svg>\n);\nexport default SvgBell;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBookmarkSimpleFill = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M184 32H72a16 16 0 0 0-16 16v176a8 8 0 0 0 12.24 6.78L128 193.43l59.77 37.35A8 8 0 0 0 200 224V48a16 16 0 0 0-16-16Z\" />\n </svg>\n);\nexport default SvgBookmarkSimpleFill;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBookmarkSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M184 32H72a16 16 0 0 0-16 16v176a8 8 0 0 0 12.24 6.78L128 193.43l59.77 37.35A8 8 0 0 0 200 224V48a16 16 0 0 0-16-16Zm0 177.57-51.77-32.35a8 8 0 0 0-8.48 0L72 209.57V48h112Z\" />\n </svg>\n);\nexport default SvgBookmarkSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCalendarBlank = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16ZM72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160v112Z\" />\n </svg>\n);\nexport default SvgCalendarBlank;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCalendarPlus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16ZM72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160v112Zm-48-56a8 8 0 0 1-8 8h-16v16a8 8 0 0 1-16 0v-16h-16a8 8 0 0 1 0-16h16v-16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgCalendarPlus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleDown = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm45.66-109.66a8 8 0 0 1 0 11.32l-40 40a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L128 140.69l34.34-34.35a8 8 0 0 1 11.32 0Z\" />\n </svg>\n);\nexport default SvgCaretCircleDown;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm21.66-122.34L115.31 128l34.35 34.34a8 8 0 0 1-11.32 11.32l-40-40a8 8 0 0 1 0-11.32l40-40a8 8 0 0 1 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgCaretCircleLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm29.66-93.66a8 8 0 0 1 0 11.32l-40 40a8 8 0 0 1-11.32-11.32L140.69 128l-34.35-34.34a8 8 0 0 1 11.32-11.32Z\" />\n </svg>\n);\nexport default SvgCaretCircleRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleUp = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm45.66-77.66a8 8 0 0 1-11.32 11.32L128 115.31l-34.34 34.35a8 8 0 0 1-11.32-11.32l40-40a8 8 0 0 1 11.32 0Z\" />\n </svg>\n);\nexport default SvgCaretCircleUp;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretDown = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m213.66 101.66-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgCaretDown;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\" />\n </svg>\n);\nexport default SvgCaretLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m181.66 133.66-80 80a8 8 0 0 1-11.32-11.32L164.69 128 90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32Z\" />\n </svg>\n);\nexport default SvgCaretRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretUp = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M213.66 165.66a8 8 0 0 1-11.32 0L128 91.31l-74.34 74.35a8 8 0 0 1-11.32-11.32l80-80a8 8 0 0 1 11.32 0l80 80a8 8 0 0 1 0 11.32Z\" />\n </svg>\n);\nexport default SvgCaretUp;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCheckCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0ZM232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgCheckCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCheck = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgCheck;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Z\" />\n </svg>\n);\nexport default SvgCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgClock = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm64-88a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V72a8 8 0 0 1 16 0v48h48a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgClock;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCopy = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z\" />\n </svg>\n);\nexport default SvgCopy;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDotsSixVertical = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M104 60a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm60 12a12 12 0 1 0-12-12 12 12 0 0 0 12 12Zm-72 44a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm72 0a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm-72 68a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm72 0a12 12 0 1 0 12 12 12 12 0 0 0-12-12Z\" />\n </svg>\n);\nexport default SvgDotsSixVertical;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDotsThreeCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm12-88a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm44 0a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm-88 0a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z\" />\n </svg>\n);\nexport default SvgDotsThreeCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDotsThree = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M140 128a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm56-12a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm-136 0a12 12 0 1 0 12 12 12 12 0 0 0-12-12Z\" />\n </svg>\n);\nexport default SvgDotsThree;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDownloadSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 124.69V32a8 8 0 0 0-16 0v92.69L93.66 98.34a8 8 0 0 0-11.32 11.32Z\" />\n </svg>\n);\nexport default SvgDownloadSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgEnvelope = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8Zm-96 85.15L52.57 64h150.86ZM98.71 128 40 181.81V74.19Zm11.84 10.85 12 11.05a8 8 0 0 0 10.82 0l12-11.05 58 53.15H52.57ZM157.29 128 216 74.18v107.64Z\" />\n </svg>\n);\nexport default SvgEnvelope;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgExport = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 112v96a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16v-96a16 16 0 0 1 16-16h24a8 8 0 0 1 0 16H56v96h144v-96h-24a8 8 0 0 1 0-16h24a16 16 0 0 1 16 16ZM93.66 69.66 120 43.31V136a8 8 0 0 0 16 0V43.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgExport;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgFloppyDisk = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M219.31 72 184 36.69A15.86 15.86 0 0 0 172.69 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V83.31A15.86 15.86 0 0 0 219.31 72ZM168 208H88v-56h80Zm40 0h-24v-56a16 16 0 0 0-16-16H88a16 16 0 0 0-16 16v56H48V48h124.69L208 83.31ZM160 72a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h56a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgFloppyDisk;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgFunnel = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M230.6 49.53A15.81 15.81 0 0 0 216 40H40a16 16 0 0 0-11.81 26.76l.08.09L96 139.17V216a16 16 0 0 0 24.87 13.32l32-21.34a16 16 0 0 0 7.13-13.32v-55.49l67.74-72.32.08-.09a15.8 15.8 0 0 0 2.78-17.23ZM40 56Zm106.18 74.58A8 8 0 0 0 144 136v58.66L112 216v-80a8 8 0 0 0-2.16-5.47L40 56h176Z\" />\n </svg>\n);\nexport default SvgFunnel;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgGear = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 80a48 48 0 1 0 48 48 48.05 48.05 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32 32 32 0 0 1-32 32Zm88-29.84q.06-2.16 0-4.32l14.92-18.64a8 8 0 0 0 1.48-7.06 107.21 107.21 0 0 0-10.88-26.25 8 8 0 0 0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186 40.54a8 8 0 0 0-3.94-6 107.71 107.71 0 0 0-26.25-10.87 8 8 0 0 0-7.06 1.49L130.16 40h-4.32L107.2 25.11a8 8 0 0 0-7.06-1.48 107.6 107.6 0 0 0-26.25 10.88 8 8 0 0 0-3.93 6l-2.64 23.76q-1.56 1.49-3 3L40.54 70a8 8 0 0 0-6 3.94 107.71 107.71 0 0 0-10.87 26.25 8 8 0 0 0 1.49 7.06L40 125.84v4.32L25.11 148.8a8 8 0 0 0-1.48 7.06 107.21 107.21 0 0 0 10.88 26.25 8 8 0 0 0 6 3.93l23.72 2.64q1.49 1.56 3 3L70 215.46a8 8 0 0 0 3.94 6 107.71 107.71 0 0 0 26.25 10.87 8 8 0 0 0 7.06-1.49L125.84 216q2.16.06 4.32 0l18.64 14.92a8 8 0 0 0 7.06 1.48 107.21 107.21 0 0 0 26.25-10.88 8 8 0 0 0 3.93-6l2.64-23.72q1.56-1.48 3-3l23.78-2.8a8 8 0 0 0 6-3.94 107.71 107.71 0 0 0 10.87-26.25 8 8 0 0 0-1.49-7.06Zm-16.1-6.5a73.93 73.93 0 0 1 0 8.68 8 8 0 0 0 1.74 5.48l14.19 17.73a91.57 91.57 0 0 1-6.23 15l-22.6 2.56a8 8 0 0 0-5.1 2.64 74.11 74.11 0 0 1-6.14 6.14 8 8 0 0 0-2.64 5.1l-2.51 22.58a91.32 91.32 0 0 1-15 6.23l-17.74-14.19a8 8 0 0 0-5-1.75h-.48a73.93 73.93 0 0 1-8.68 0 8 8 0 0 0-5.48 1.74l-17.78 14.2a91.57 91.57 0 0 1-15-6.23L82.89 187a8 8 0 0 0-2.64-5.1 74.11 74.11 0 0 1-6.14-6.14 8 8 0 0 0-5.1-2.64l-22.58-2.52a91.32 91.32 0 0 1-6.23-15l14.19-17.74a8 8 0 0 0 1.74-5.48 73.93 73.93 0 0 1 0-8.68 8 8 0 0 0-1.74-5.48L40.2 100.45a91.57 91.57 0 0 1 6.23-15L69 82.89a8 8 0 0 0 5.1-2.64 74.11 74.11 0 0 1 6.14-6.14A8 8 0 0 0 82.89 69l2.51-22.57a91.32 91.32 0 0 1 15-6.23l17.74 14.19a8 8 0 0 0 5.48 1.74 73.93 73.93 0 0 1 8.68 0 8 8 0 0 0 5.48-1.74l17.77-14.19a91.57 91.57 0 0 1 15 6.23L173.11 69a8 8 0 0 0 2.64 5.1 74.11 74.11 0 0 1 6.14 6.14 8 8 0 0 0 5.1 2.64l22.58 2.51a91.32 91.32 0 0 1 6.23 15l-14.19 17.74a8 8 0 0 0-1.74 5.53Z\" />\n </svg>\n);\nexport default SvgGear;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgHouse = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m219.31 108.68-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32ZM208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80 80 80Z\" />\n </svg>\n);\nexport default SvgHouse;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgImage = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 16v102.75l-26.07-26.06a16 16 0 0 0-22.63 0l-20 20-44-44a16 16 0 0 0-22.62 0L40 149.37V56ZM40 172l52-52 80 80H40Zm176 28h-21.37l-36-36 20-20L216 181.38V200Zm-72-100a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z\" />\n </svg>\n);\nexport default SvgImage;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgInfo = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm16-40a8 8 0 0 1-8 8 16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16 16 16 0 0 1 16 16v40a8 8 0 0 1 8 8Zm-32-92a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z\" />\n </svg>\n);\nexport default SvgInfo;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgLinkSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M165.66 90.34a8 8 0 0 1 0 11.32l-64 64a8 8 0 0 1-11.32-11.32l64-64a8 8 0 0 1 11.32 0ZM215.6 40.4a56 56 0 0 0-79.2 0l-30.06 30.05a8 8 0 0 0 11.32 11.32l30.06-30a40 40 0 0 1 56.57 56.56l-30.07 30.06a8 8 0 0 0 11.31 11.32l30.07-30.11a56 56 0 0 0 0-79.2Zm-77.26 133.82-30.06 30.06a40 40 0 1 1-56.56-56.57l30.05-30.05a8 8 0 0 0-11.32-11.32L40.4 136.4a56 56 0 0 0 79.2 79.2l30.06-30.07a8 8 0 0 0-11.32-11.31Z\" />\n </svg>\n);\nexport default SvgLinkSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgList = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z\" />\n </svg>\n);\nexport default SvgList;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgLockSimpleOpen = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 80H96V56a32 32 0 0 1 32-32c15.37 0 29.2 11 32.16 25.59a8 8 0 0 0 15.68-3.18C171.32 24.15 151.2 8 128 8a48.05 48.05 0 0 0-48 48v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16Zm0 128H48V96h160v112Z\" />\n </svg>\n);\nexport default SvgLockSimpleOpen;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgLockSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16ZM96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160v112Z\" />\n </svg>\n);\nexport default SvgLockSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMagnifyingGlass = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m229.66 218.34-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z\" />\n </svg>\n);\nexport default SvgMagnifyingGlass;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMapPin = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 64a40 40 0 1 0 40 40 40 40 0 0 0-40-40Zm0 64a24 24 0 1 1 24-24 24 24 0 0 1-24 24Zm0-112a88.1 88.1 0 0 0-88 88c0 31.4 14.51 64.68 42 96.25a254.19 254.19 0 0 0 41.45 38.3 8 8 0 0 0 9.18 0 254.19 254.19 0 0 0 41.37-38.3c27.45-31.57 42-64.85 42-96.25a88.1 88.1 0 0 0-88-88Zm0 206c-16.53-13-72-60.75-72-118a72 72 0 0 1 144 0c0 57.23-55.47 105-72 118Z\" />\n </svg>\n);\nexport default SvgMapPin;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMegaphone = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M248 120a48.05 48.05 0 0 0-48-48h-39.8c-2.91-.17-53.62-3.74-101.91-44.24A16 16 0 0 0 32 40v160a16 16 0 0 0 26.29 12.25c37.77-31.68 77-40.76 93.71-43.3v31.72a16 16 0 0 0 7.12 13.33l11 7.33A16 16 0 0 0 194.5 212l11.77-44.36A48.07 48.07 0 0 0 248 120ZM48 199.93V40c42.81 35.91 86.63 45 104 47.24v65.48c-17.35 2.28-61.16 11.35-104 47.21Zm131 8v.11l-11-7.33V168h21.6ZM200 152h-32V88h32a32 32 0 1 1 0 64Z\" />\n </svg>\n);\nexport default SvgMegaphone;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMinusCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M176 128a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm56 0A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgMinusCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMinus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgMinus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPaperclip = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M209.66 122.34a8 8 0 0 1 0 11.32l-82.05 82a56 56 0 0 1-79.2-79.21l99.26-100.72a40 40 0 1 1 56.61 56.55L105 193a24 24 0 1 1-34-34l83.3-84.62a8 8 0 1 1 11.4 11.22l-83.31 84.71a8 8 0 1 0 11.27 11.36L192.93 81A24 24 0 1 0 159 47L59.76 147.68a40 40 0 1 0 56.53 56.62l82.06-82a8 8 0 0 1 11.31.04Z\" />\n </svg>\n);\nexport default SvgPaperclip;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPassword = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M48 56v144a8 8 0 0 1-16 0V56a8 8 0 0 1 16 0Zm92 54.5-20 6.5V96a8 8 0 0 0-16 0v21l-20-6.5a8 8 0 0 0-5 15.22l20 6.49-12.34 17a8 8 0 1 0 12.94 9.4l12.34-17 12.34 17a8 8 0 1 0 12.94-9.4l-12.34-17 20-6.49A8 8 0 0 0 140 110.5Zm106 5.14a8 8 0 0 0-10-5.14l-20 6.5V96a8 8 0 0 0-16 0v21l-20-6.49a8 8 0 0 0-4.95 15.22l20 6.49-12.34 17a8 8 0 1 0 12.94 9.4l12.34-17 12.34 17a8 8 0 1 0 12.94-9.4l-12.34-17 20-6.49a8 8 0 0 0 5.07-10.09Z\" />\n </svg>\n);\nexport default SvgPassword;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPencil = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m227.31 73.37-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63ZM51.31 160 136 75.31 152.69 92 68 176.68ZM48 179.31 76.69 208H48Zm48 25.38L79.31 188 164 103.31 180.69 120Zm96-96L147.31 64l24-24L216 84.68Z\" />\n </svg>\n);\nexport default SvgPencil;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPhone = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m222.37 158.46-47.11-21.11-.13-.06a16 16 0 0 0-15.17 1.4 8.12 8.12 0 0 0-.75.56L134.87 160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16 16 0 0 0 1.32-15.06v-.12L97.54 33.64a16 16 0 0 0-16.62-9.52A56.26 56.26 0 0 0 32 80c0 79.4 64.6 144 144 144a56.26 56.26 0 0 0 55.88-48.92 16 16 0 0 0-9.51-16.62ZM176 208A128.14 128.14 0 0 1 48 80a40.2 40.2 0 0 1 34.87-40 .61.61 0 0 0 0 .12l21 47-20.67 24.74a6.13 6.13 0 0 0-.57.77 16 16 0 0 0-1 15.7c9.06 18.53 27.73 37.06 46.46 46.11a16 16 0 0 0 15.75-1.14 8.44 8.44 0 0 0 .74-.56L168.89 152l47 21.05h.11A40.21 40.21 0 0 1 176 208Z\" />\n </svg>\n);\nexport default SvgPhone;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPlusCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm48-88a8 8 0 0 1-8 8h-32v32a8 8 0 0 1-16 0v-32H88a8 8 0 0 1 0-16h32V88a8 8 0 0 1 16 0v32h32a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgPlusCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPlus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgPlus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgQuestion = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M140 180a12 12 0 1 1-12-12 12 12 0 0 1 12 12ZM128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28 0-19.85-17.94-36-40-36Zm104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgQuestion;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgShoppingCart = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M230.14 58.87A8 8 0 0 0 224 56H62.68L56.6 22.57A8 8 0 0 0 48.73 16H24a8 8 0 0 0 0 16h18l25.56 140.29a24 24 0 0 0 5.33 11.27 28 28 0 1 0 44.4 8.44h45.42a27.75 27.75 0 0 0-2.71 12 28 28 0 1 0 28-28H91.17a8 8 0 0 1-7.87-6.57L80.13 152h116a24 24 0 0 0 23.61-19.71l12.16-66.86a8 8 0 0 0-1.76-6.56ZM104 204a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm96 0a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm4-74.57a8 8 0 0 1-7.9 6.57H77.22L65.59 72h148.82Z\" />\n </svg>\n);\nexport default SvgShoppingCart;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSignIn = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m141.66 133.66-40 40a8 8 0 0 1-11.32-11.32L116.69 136H24a8 8 0 0 1 0-16h92.69L90.34 93.66a8 8 0 0 1 11.32-11.32l40 40a8 8 0 0 1 0 11.32ZM200 32h-64a8 8 0 0 0 0 16h56v160h-56a8 8 0 0 0 0 16h64a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Z\" />\n </svg>\n);\nexport default SvgSignIn;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSignOut = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M120 216a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h64a8 8 0 0 1 0 16H56v160h56a8 8 0 0 1 8 8Zm109.66-93.66-40-40a8 8 0 0 0-11.32 11.32L204.69 120H112a8 8 0 0 0 0 16h92.69l-26.35 26.34a8 8 0 0 0 11.32 11.32l40-40a8 8 0 0 0 0-11.32Z\" />\n </svg>\n);\nexport default SvgSignOut;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSliders = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M64 105V40a8 8 0 0 0-16 0v65a32 32 0 0 0 0 62v49a8 8 0 0 0 16 0v-49a32 32 0 0 0 0-62Zm-8 47a16 16 0 1 1 16-16 16 16 0 0 1-16 16Zm80-95V40a8 8 0 0 0-16 0v17a32 32 0 0 0 0 62v97a8 8 0 0 0 16 0v-97a32 32 0 0 0 0-62Zm-8 47a16 16 0 1 1 16-16 16 16 0 0 1-16 16Zm104 64a32.06 32.06 0 0 0-24-31V40a8 8 0 0 0-16 0v97a32 32 0 0 0 0 62v17a8 8 0 0 0 16 0v-17a32.06 32.06 0 0 0 24-31Zm-32 16a16 16 0 1 1 16-16 16 16 0 0 1-16 16Z\" />\n </svg>\n);\nexport default SvgSliders;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSortAscending = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 128a8 8 0 0 1-8 8H48a8 8 0 0 1 0-16h72a8 8 0 0 1 8 8ZM48 72h136a8 8 0 0 0 0-16H48a8 8 0 0 0 0 16Zm56 112H48a8 8 0 0 0 0 16h56a8 8 0 0 0 0-16Zm125.66-21.66a8 8 0 0 0-11.32 0L192 188.69V112a8 8 0 0 0-16 0v76.69l-26.34-26.35a8 8 0 0 0-11.32 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32Z\" />\n </svg>\n);\nexport default SvgSortAscending;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSortDescending = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M40 128a8 8 0 0 1 8-8h72a8 8 0 0 1 0 16H48a8 8 0 0 1-8-8Zm8-56h56a8 8 0 0 0 0-16H48a8 8 0 0 0 0 16Zm136 112H48a8 8 0 0 0 0 16h136a8 8 0 0 0 0-16Zm45.66-101.66-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32L176 67.31V144a8 8 0 0 0 16 0V67.31l26.34 26.35a8 8 0 0 0 11.32-11.32Z\" />\n </svg>\n);\nexport default SvgSortDescending;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSpinnerGap = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M136 32v32a8 8 0 0 1-16 0V32a8 8 0 0 1 16 0Zm88 88h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16Zm-45.09 47.6a8 8 0 0 0-11.31 11.31l22.62 22.63a8 8 0 0 0 11.32-11.32ZM128 184a8 8 0 0 0-8 8v32a8 8 0 0 0 16 0v-32a8 8 0 0 0-8-8Zm-50.91-16.4-22.63 22.62a8 8 0 0 0 11.32 11.32l22.62-22.63a8 8 0 0 0-11.31-11.31ZM72 128a8 8 0 0 0-8-8H32a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8Zm-6.22-73.54a8 8 0 0 0-11.32 11.32L77.09 88.4A8 8 0 0 0 88.4 77.09Z\" />\n </svg>\n);\nexport default SvgSpinnerGap;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgTrash = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16ZM96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Z\" />\n </svg>\n);\nexport default SvgTrash;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUploadSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0ZM93.66 77.66 120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgUploadSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUserCircleMinus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M168 56a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16h-48a8 8 0 0 1-8-8Zm58.08 37.33a103.93 103.93 0 1 1-80.76-67.89 8 8 0 0 1-2.64 15.78A88.07 88.07 0 0 0 40 128a87.62 87.62 0 0 0 22.24 58.41 79.66 79.66 0 0 1 36.06-28.75 48 48 0 1 1 59.4 0 79.66 79.66 0 0 1 36.06 28.75A88 88 0 0 0 211 98.67a8 8 0 0 1 15.09-5.34ZM128 152a32 32 0 1 0-32-32 32 32 0 0 0 32 32Zm0 64a87.57 87.57 0 0 0 53.92-18.5 64 64 0 0 0-107.84 0A87.57 87.57 0 0 0 128 216Z\" />\n </svg>\n);\nexport default SvgUserCircleMinus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUserCirclePlus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M168 56a8 8 0 0 1 8-8h16V32a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V64h-16a8 8 0 0 1-8-8Zm62.56 54.68a103.92 103.92 0 1 1-85.24-85.24 8 8 0 0 1-2.64 15.78A88.07 88.07 0 0 0 40 128a87.62 87.62 0 0 0 22.24 58.41 79.66 79.66 0 0 1 36.06-28.75 48 48 0 1 1 59.4 0 79.66 79.66 0 0 1 36.06 28.75A87.62 87.62 0 0 0 216 128a88.85 88.85 0 0 0-1.22-14.68 8 8 0 1 1 15.78-2.64ZM128 152a32 32 0 1 0-32-32 32 32 0 0 0 32 32Zm0 64a87.57 87.57 0 0 0 53.92-18.5 64 64 0 0 0-107.84 0A87.57 87.57 0 0 0 128 216Z\" />\n </svg>\n);\nexport default SvgUserCirclePlus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUserCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24ZM74.08 197.5a64 64 0 0 1 107.84 0 87.83 87.83 0 0 1-107.84 0ZM96 120a32 32 0 1 1 32 32 32 32 0 0 1-32-32Zm97.76 66.41a79.66 79.66 0 0 0-36.06-28.75 48 48 0 1 0-59.4 0 79.66 79.66 0 0 0-36.06 28.75 88 88 0 1 1 131.52 0Z\" />\n </svg>\n);\nexport default SvgUserCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgWarning = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M236.8 188.09 149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19 23.51 23.51 0 0 0 .02-23.72Zm-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2 7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72ZM120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0Zm20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z\" />\n </svg>\n);\nexport default SvgWarning;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgXCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M165.66 101.66 139.31 128l26.35 26.34a8 8 0 0 1-11.32 11.32L128 139.31l-26.34 26.35a8 8 0 0 1-11.32-11.32L116.69 128l-26.35-26.34a8 8 0 0 1 11.32-11.32L128 116.69l26.34-26.35a8 8 0 0 1 11.32 11.32ZM232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgXCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgX = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z\" />\n </svg>\n);\nexport default SvgX;\n","import clsx from \"clsx\";\nimport { IconProps } from \"./build/index\";\n\nexport interface LogoIconsProps extends IconProps {\n className?: string;\n color?: \"black\" | \"white\";\n}\n\nexport const LinkedInLogo = ({ color, className, ...rest }: LogoIconsProps) => (\n <svg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={clsx(\n \"sds-icon\",\n \"sds-icon-logo\",\n color && `sds-icon-logo--color-${color}`,\n className,\n )}\n aria-hidden=\"true\"\n {...rest}\n >\n <path d=\"M4.11716 2.00013H27.9999C28.1606 2.00432 28.32 2.02812 28.4749 2.07108C28.8261 2.16355 29.1456 2.35003 29.3992 2.61046C29.6527 2.8709 29.8308 3.19548 29.9142 3.54952C29.9729 3.78559 30.0008 4.02828 29.9972 4.27154C30.0009 12.0774 30.0009 19.8836 29.9972 27.6901C29.9938 27.8634 29.9804 28.0364 29.9574 28.2081C29.8913 28.7041 29.6476 29.159 29.2716 29.4883C28.8956 29.8176 28.413 29.9989 27.9136 29.9982C19.9715 29.9982 12.029 29.9982 4.08621 29.9982C3.64924 29.9981 3.22353 29.8593 2.8701 29.6019C2.51668 29.3445 2.25356 28.9816 2.11866 28.5652C2.03622 28.2901 1.99634 28.004 2.00026 27.7168C2.00026 19.9369 2.00026 12.1569 2.00026 4.37694C1.9985 4.16869 2.01335 3.96059 2.04459 3.7547C2.08899 3.40751 2.22443 3.07832 2.43721 2.80068C2.64999 2.52305 2.93249 2.3069 3.25583 2.17424C3.52752 2.0561 3.821 1.99679 4.11716 2.00013ZM17.0234 25.7947V25.4753C17.0234 24.7356 17.0157 23.9958 17.0234 23.2571C17.0444 21.6567 16.968 20.0551 17.0654 18.4558C17.0867 17.9859 17.1878 17.523 17.3644 17.0872C17.4597 16.838 17.6057 16.6115 17.7931 16.4219C17.9805 16.2323 18.2051 16.0838 18.4528 15.9859C19.0205 15.7532 19.6488 15.7142 20.2408 15.875C20.667 15.9833 21.033 16.2565 21.2584 16.6347C21.4626 16.9936 21.5925 17.39 21.6403 17.8003C21.694 18.1616 21.7195 18.5265 21.7167 18.8917C21.7115 21.081 21.7115 23.2708 21.7167 25.4609C21.7167 25.5718 21.7299 25.6827 21.7366 25.7803C22.0964 25.8291 25.5553 25.8147 25.7645 25.7626C25.7701 25.6938 25.7811 25.6184 25.7822 25.5407C25.8055 23.958 25.759 22.3754 25.8166 20.7916C25.853 19.9045 25.8449 19.016 25.7922 18.1297C25.7546 17.5408 25.7624 16.9497 25.6815 16.363C25.5939 15.6291 25.3796 14.916 25.0482 14.2557C24.8264 13.8246 24.5192 13.4435 24.1453 13.1355C23.7714 12.8275 23.3388 12.5992 22.8738 12.4645C21.9829 12.1892 21.0431 12.1105 20.1191 12.2338C19.2323 12.3429 18.4041 12.7354 17.7574 13.3529C17.5025 13.5902 17.277 13.8571 17.0854 14.1481C17.0423 14.2146 17.0145 14.3122 16.8739 14.2923C16.8485 13.7211 16.8829 13.1499 16.853 12.5521L16.0502 12.5454H14.5113C14.2589 12.5454 14.0074 12.5454 13.755 12.5454C13.4875 12.5299 13.2191 12.5399 12.9534 12.5754V23.8128C12.9534 24.3784 12.9534 24.9441 12.9534 25.5097C12.9534 25.6018 12.9668 25.6927 12.9734 25.7914L17.0234 25.7947ZM10.252 25.7892C10.3096 25.5485 10.3074 12.805 10.252 12.5909C10.0306 12.5321 6.47549 12.5333 6.25959 12.5909C6.20424 12.8128 6.20313 25.5563 6.25959 25.7759C6.45113 25.8247 9.89992 25.8357 10.252 25.7892ZM10.6085 8.2732C10.6112 7.64777 10.3665 7.04672 9.92817 6.60136C9.48981 6.15601 8.89336 5.90255 8.26904 5.8964C7.95624 5.8945 7.64621 5.95451 7.35663 6.07301C7.06705 6.19151 6.80367 6.36613 6.58166 6.58688C6.35965 6.80763 6.18325 7.07014 6.06281 7.35933C5.94237 7.64853 5.88025 7.9587 5.87981 8.27205C5.87135 8.58776 5.92729 8.90191 6.04443 9.19513C6.16157 9.48835 6.33743 9.7545 6.56098 9.9772C6.78454 10.1999 7.05111 10.3744 7.34446 10.4901C7.63782 10.6058 7.95177 10.6603 8.26688 10.65C8.57882 10.6562 8.88865 10.5987 9.17767 10.481C9.46669 10.3633 9.72879 10.1878 9.9479 9.96528C10.167 9.74278 10.3386 9.47791 10.4522 9.1868C10.5657 8.8957 10.619 8.58442 10.6085 8.27205V8.2732Z\" />\n </svg>\n);\n","import { ChangeEventHandler, forwardRef, ReactNode, useId } from \"react\";\nimport clsx from \"clsx\";\nimport { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n checked?: boolean;\n label: ReactNode;\n showIcons?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n ({ checked, label, showIcons = true, onChange, ...rest }, ref) => {\n const toggleButtonId = useId();\n return (\n <div className=\"sds-toggle-button\" {...rest}>\n <input\n ref={ref}\n type=\"checkbox\"\n className=\"sds-toggle-button__input\"\n onChange={onChange}\n readOnly={!onChange}\n checked={checked}\n aria-checked={checked}\n id={toggleButtonId}\n />\n <label\n className={clsx(\n \"sds-toggle-button__label\",\n checked && \"sds-toggle-button__label--checked\",\n )}\n htmlFor={toggleButtonId}\n >\n <div className=\"sds-toggle-button__label-text\">{label}</div>\n {showIcons && (\n <PlusCircleIcon\n className={clsx(\n \"sds-toggle-button__icon\",\n checked && \"sds-toggle-button__icon--checked\",\n )}\n />\n )}\n </label>\n </div>\n );\n },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { ReactNode, forwardRef } from \"react\";\nimport { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport clsx from \"clsx\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n HTMLFieldSetElement,\n ToggleSegmentProps\n>(({ children, variant = \"default\", ...rest }, ref) => {\n return (\n <div\n className={clsx(\n \"sds-toggle-segment\",\n variant !== \"default\" && `sds-toggle-segment--${variant}`,\n )}\n >\n <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n <div className=\"sds-toggle-segment__group\">{children}</div>\n </Fieldset>\n </div>\n );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-segment.pcss\";\nimport clsx from \"clsx\";\nimport { useFieldset } from \"@sikt/sds-form\";\n\nexport interface ToggleSegmentOptionProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n value: string | number;\n label: ReactNode;\n checked?: boolean;\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n HTMLInputElement,\n ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, ...rest }, ref) => {\n const { name } = useFieldset() ?? {};\n const generatedId = useId();\n const htmlForId = rest.id ?? generatedId;\n\n return (\n <div\n className={clsx(\n \"sds-toggle-segment__option\",\n checked && \"sds-toggle-segment__option--checked\",\n )}\n >\n <input\n id={htmlForId}\n name={name}\n ref={ref}\n type=\"radio\"\n onChange={onChange}\n className=\"sds-toggle-segment__input\"\n value={value}\n checked={checked}\n {...rest}\n />\n <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n {label}\n </label>\n </div>\n );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
|
|
1
|
+
{"version":3,"sources":["../ToggleSwitch.tsx","../ToggleButton.tsx","../ToggleSegment.tsx","../ToggleSegmentOption.tsx"],"names":["forwardRef","useId","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import { ReactNode, ChangeEventHandler, useId, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-switch.pcss\";\n\nexport interface ToggleSwitchProps {\n checked?: boolean;\n label: ReactNode;\n labelFirst?: boolean;\n showIcons?: boolean;\n error?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\n labelFirst = false,\n showIcons = true,\n error = false,\n onChange,\n className,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const labelElement = (\n <div className=\"sds-toggle-switch__label-text\">{label}</div>\n );\n\n return (\n <div\n className={clsx(\n \"sds-toggle-switch\",\n checked && \"sds-toggle-switch--checked\",\n error && \"sds-toggle-switch--error\",\n className,\n )}\n data-testid=\"sds-toggle-switch\"\n >\n <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\n <div className=\"sds-toggle-switch__inner\">\n <input\n ref={ref}\n id={id}\n type=\"checkbox\"\n role=\"switch\"\n className=\"sds-toggle-switch__track\"\n checked={checked}\n aria-invalid={error}\n onChange={onChange}\n readOnly={!onChange}\n {...rest}\n />\n <div className=\"sds-toggle-switch__thumb\">\n {showIcons && checked && <CheckIcon />}\n {showIcons && !checked && <XIcon />}\n </div>\n </div>\n {!labelFirst && labelElement}\n </label>\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { ChangeEventHandler, forwardRef, ReactNode, useId } from \"react\";\nimport clsx from \"clsx\";\nimport { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n checked?: boolean;\n label: ReactNode;\n showIcons?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n const toggleButtonId = useId();\n return (\n <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n <input\n ref={ref}\n type=\"checkbox\"\n className=\"sds-toggle-button__input\"\n onChange={onChange}\n readOnly={!onChange}\n checked={checked}\n aria-checked={checked}\n id={toggleButtonId}\n />\n <label\n className={clsx(\n \"sds-toggle-button__label\",\n checked && \"sds-toggle-button__label--checked\",\n )}\n htmlFor={toggleButtonId}\n >\n <div className=\"sds-toggle-button__label-text\">{label}</div>\n {showIcons && (\n <PlusCircleIcon\n className={clsx(\n \"sds-toggle-button__icon\",\n checked && \"sds-toggle-button__icon--checked\",\n )}\n />\n )}\n </label>\n </div>\n );\n },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { ReactNode, forwardRef } from \"react\";\nimport { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport clsx from \"clsx\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n HTMLFieldSetElement,\n ToggleSegmentProps\n>(({ children, variant = \"default\", className, ...rest }, ref) => {\n return (\n <div\n className={clsx(\n \"sds-toggle-segment\",\n variant !== \"default\" && `sds-toggle-segment--${variant}`,\n className,\n )}\n >\n <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n <div className=\"sds-toggle-segment__group\">{children}</div>\n </Fieldset>\n </div>\n );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-segment.pcss\";\nimport clsx from \"clsx\";\nimport { useFieldset } from \"@sikt/sds-form\";\n\nexport interface ToggleSegmentOptionProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n value: string | number;\n label: ReactNode;\n checked?: boolean;\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n HTMLInputElement,\n ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n const { name } = useFieldset() ?? {};\n const generatedId = useId();\n const htmlForId = rest.id ?? generatedId;\n\n return (\n <div\n className={clsx(\n \"sds-toggle-segment__option\",\n checked && \"sds-toggle-segment__option--checked\",\n className,\n )}\n >\n <input\n id={htmlForId}\n name={name}\n ref={ref}\n type=\"radio\"\n onChange={onChange}\n className=\"sds-toggle-segment__input\"\n value={value}\n checked={checked}\n {...rest}\n />\n <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n {label}\n </label>\n </div>\n );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{forwardRef as e,useId as s}from"react";import l from"clsx";import{
|
|
1
|
+
import{forwardRef as e,useId as s}from"react";import l from"clsx";import{CheckIcon as t,XIcon as a,PlusCircleIcon as c}from"@sikt/sds-icons";import{jsx as o,jsxs as d}from"react/jsx-runtime";import{Fieldset as n,useFieldset as g}from"@sikt/sds-form";var i=e((({checked:e=!1,label:c,labelFirst:n=!1,showIcons:g=!0,error:i=!1,onChange:r,className:m,...h},_)=>{const u=s(),N=o("div",{className:"sds-toggle-switch__label-text",children:c});return o("div",{className:l("sds-toggle-switch",e&&"sds-toggle-switch--checked",i&&"sds-toggle-switch--error",m),"data-testid":"sds-toggle-switch",children:d("label",{className:"sds-toggle-switch__label",htmlFor:u,children:[n&&N,d("div",{className:"sds-toggle-switch__inner",children:[o("input",{ref:_,id:u,type:"checkbox",role:"switch",className:"sds-toggle-switch__track",checked:e,"aria-invalid":i,onChange:r,readOnly:!r,...h}),d("div",{className:"sds-toggle-switch__thumb",children:[g&&e&&o(t,{}),g&&!e&&o(a,{})]})]}),!n&&N]})})}));i.displayName="ToggleSwitch";var r=e((({checked:e,label:t,showIcons:a=!0,onChange:n,className:g,...i},r)=>{const m=s();return d("div",{className:l("sds-toggle-button",g),...i,children:[o("input",{ref:r,type:"checkbox",className:"sds-toggle-button__input",onChange:n,readOnly:!n,checked:e,"aria-checked":e,id:m}),d("label",{className:l("sds-toggle-button__label",e&&"sds-toggle-button__label--checked"),htmlFor:m,children:[o("div",{className:"sds-toggle-button__label-text",children:t}),a&&o(c,{className:l("sds-toggle-button__icon",e&&"sds-toggle-button__icon--checked")})]})]})}));r.displayName="ToggleButton";var m=e((({children:e,variant:s="default",className:t,...a},c)=>o("div",{className:l("sds-toggle-segment","default"!==s&&"sds-toggle-segment--".concat(s),t),children:o(n,{className:"sds-toggle-segment__fieldset",...a,ref:c,children:o("div",{className:"sds-toggle-segment__group",children:e})})})));m.displayName="ToggleSegment";var h=e((({value:e,label:t,checked:a,onChange:c,className:n,...i},r)=>{var m,h;const{name:_}=null!=(m=g())?m:{},u=s(),N=null!=(h=i.id)?h:u;return d("div",{className:l("sds-toggle-segment__option",a&&"sds-toggle-segment__option--checked",n),children:[o("input",{id:N,name:_,ref:r,type:"radio",onChange:c,className:"sds-toggle-segment__input",value:e,checked:a,...i}),o("label",{className:"sds-toggle-segment__label",htmlFor:N,children:t})]})}));h.displayName="ToggleSegmentOption";export{r as ToggleButton,m as ToggleSegment,h as ToggleSegmentOption,i as ToggleSwitch};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../ToggleSwitch.tsx","../../icons/SpinnerIcon.tsx","../../icons/build/Archive.tsx","../../icons/build/ArrowCircleLeft.tsx","../../icons/build/ArrowCircleRight.tsx","../../icons/build/ArrowClockwise.tsx","../../icons/build/ArrowLeft.tsx","../../icons/build/ArrowRight.tsx","../../icons/build/ArrowSquareOut.tsx","../../icons/build/ArrowUUpLeft.tsx","../../icons/build/ArrowUUpRight.tsx","../../icons/build/BellRinging.tsx","../../icons/build/Bell.tsx","../../icons/build/BookmarkSimpleFill.tsx","../../icons/build/BookmarkSimple.tsx","../../icons/build/CalendarBlank.tsx","../../icons/build/CalendarPlus.tsx","../../icons/build/CaretCircleDown.tsx","../../icons/build/CaretCircleLeft.tsx","../../icons/build/CaretCircleRight.tsx","../../icons/build/CaretCircleUp.tsx","../../icons/build/CaretDown.tsx","../../icons/build/CaretLeft.tsx","../../icons/build/CaretRight.tsx","../../icons/build/CaretUp.tsx","../../icons/build/CheckCircle.tsx","../../icons/build/Check.tsx","../../icons/build/Circle.tsx","../../icons/build/Clock.tsx","../../icons/build/Copy.tsx","../../icons/build/DotsSixVertical.tsx","../../icons/build/DotsThreeCircle.tsx","../../icons/build/DotsThree.tsx","../../icons/build/DownloadSimple.tsx","../../icons/build/Envelope.tsx","../../icons/build/Export.tsx","../../icons/build/FloppyDisk.tsx","../../icons/build/Funnel.tsx","../../icons/build/Gear.tsx","../../icons/build/House.tsx","../../icons/build/Image.tsx","../../icons/build/Info.tsx","../../icons/build/LinkSimple.tsx","../../icons/build/List.tsx","../../icons/build/LockSimpleOpen.tsx","../../icons/build/LockSimple.tsx","../../icons/build/MagnifyingGlass.tsx","../../icons/build/MapPin.tsx","../../icons/build/Megaphone.tsx","../../icons/build/MinusCircle.tsx","../../icons/build/Minus.tsx","../../icons/build/Paperclip.tsx","../../icons/build/Password.tsx","../../icons/build/Pencil.tsx","../../icons/build/Phone.tsx","../../icons/build/PlusCircle.tsx","../../icons/build/Plus.tsx","../../icons/build/Question.tsx","../../icons/build/ShoppingCart.tsx","../../icons/build/SignIn.tsx","../../icons/build/SignOut.tsx","../../icons/build/Sliders.tsx","../../icons/build/SortAscending.tsx","../../icons/build/SortDescending.tsx","../../icons/build/SpinnerGap.tsx","../../icons/build/Trash.tsx","../../icons/build/UploadSimple.tsx","../../icons/build/UserCircleMinus.tsx","../../icons/build/UserCirclePlus.tsx","../../icons/build/UserCircle.tsx","../../icons/build/Warning.tsx","../../icons/build/XCircle.tsx","../../icons/build/X.tsx","../../icons/LogoIcons.tsx","../ToggleButton.tsx","../ToggleSegment.tsx","../ToggleSegmentOption.tsx"],"names":["clsx","jsx","forwardRef","useId","jsxs"],"mappings":"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","sourcesContent":["import { ReactNode, ChangeEventHandler, useId, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-switch.pcss\";\n\nexport interface ToggleSwitchProps {\n checked?: boolean;\n label: ReactNode;\n labelFirst?: boolean;\n showIcons?: boolean;\n error?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\n labelFirst = false,\n showIcons = true,\n error = false,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const labelElement = (\n <div className=\"sds-toggle-switch__label-text\">{label}</div>\n );\n\n return (\n <div\n className={clsx(\n \"sds-toggle-switch\",\n checked && \"sds-toggle-switch--checked\",\n error && \"sds-toggle-switch--error\",\n )}\n data-testid=\"sds-toggle-switch\"\n >\n <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\n <div className=\"sds-toggle-switch__inner\">\n <input\n ref={ref}\n id={id}\n type=\"checkbox\"\n role=\"switch\"\n className=\"sds-toggle-switch__track\"\n checked={checked}\n aria-invalid={error}\n onChange={onChange}\n readOnly={!onChange}\n {...rest}\n />\n <div className=\"sds-toggle-switch__thumb\">\n {showIcons && checked && <CheckIcon />}\n {showIcons && !checked && <XIcon />}\n </div>\n </div>\n {!labelFirst && labelElement}\n </label>\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import clsx from \"clsx\";\nimport { SpinnerGapIcon, IconProps } from \"./build/index\";\n\nexport const SpinnerIcon = ({ className, ...rest }: IconProps) => (\n <SpinnerGapIcon\n className={clsx(\"sds-icon sds-icon--spinner\", className)}\n {...rest}\n />\n);\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArchive = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 48H32a16 16 0 0 0-16 16v24a16 16 0 0 0 16 16v88a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-88a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16Zm-16 144H48v-88h160Zm16-104H32V64h192v24ZM96 136a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16h-48a8 8 0 0 1-8-8Z\" />\n </svg>\n);\nexport default SvgArchive;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowCircleLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm48-88a8 8 0 0 1-8 8h-60.69l18.35 18.34a8 8 0 0 1-11.32 11.32l-32-32a8 8 0 0 1 0-11.32l32-32a8 8 0 0 1 11.32 11.32L107.31 120H168a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgArrowCircleLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowCircleRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm45.66-93.66a8 8 0 0 1 0 11.32l-32 32a8 8 0 0 1-11.32-11.32L148.69 136H88a8 8 0 0 1 0-16h60.69l-18.35-18.34a8 8 0 0 1 11.32-11.32Z\" />\n </svg>\n);\nexport default SvgArrowCircleRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowClockwise = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M240 56v48a8 8 0 0 1-8 8h-48a8 8 0 0 1 0-16h27.4l-26.59-24.36-.25-.24a80 80 0 1 0-1.67 114.78 8 8 0 0 1 11 11.63A95.44 95.44 0 0 1 128 224h-1.32a96 96 0 1 1 69.07-164L224 85.8V56a8 8 0 1 1 16 0Z\" />\n </svg>\n);\nexport default SvgArrowClockwise;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8H59.31l58.35 58.34a8 8 0 0 1-11.32 11.32l-72-72a8 8 0 0 1 0-11.32l72-72a8 8 0 0 1 11.32 11.32L59.31 120H216a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgArrowLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m221.66 133.66-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z\" />\n </svg>\n);\nexport default SvgArrowRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowSquareOut = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8Z\" />\n </svg>\n);\nexport default SvgArrowSquareOut;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowUUpLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M232 144a64.07 64.07 0 0 1-64 64H80a8 8 0 0 1 0-16h88a48 48 0 0 0 0-96H51.31l34.35 34.34a8 8 0 0 1-11.32 11.32l-48-48a8 8 0 0 1 0-11.32l48-48a8 8 0 0 1 11.32 11.32L51.31 80H168a64.07 64.07 0 0 1 64 64Z\" />\n </svg>\n);\nexport default SvgArrowUUpLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgArrowUUpRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M170.34 130.34 204.69 96H88a48 48 0 0 0 0 96h88a8 8 0 0 1 0 16H88a64 64 0 0 1 0-128h116.69l-34.35-34.34a8 8 0 0 1 11.32-11.32l48 48a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32-11.32Z\" />\n </svg>\n);\nexport default SvgArrowUUpRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBellRinging = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 71.1a8 8 0 0 1-10.78-3.42 94.13 94.13 0 0 0-33.46-36.91 8 8 0 1 1 8.54-13.54 111.46 111.46 0 0 1 39.12 43.09A8 8 0 0 1 224 71.1ZM35.71 72a8 8 0 0 0 7.1-4.32 94.13 94.13 0 0 1 33.46-36.91 8 8 0 1 0-8.54-13.54 111.46 111.46 0 0 0-39.12 43.09A8 8 0 0 0 35.71 72Zm186.1 103.94A16 16 0 0 1 208 200h-40.8a40 40 0 0 1-78.4 0H48a16 16 0 0 1-13.79-24.06C43.22 160.39 48 138.28 48 112a80 80 0 0 1 160 0c0 26.27 4.78 48.38 13.81 63.94ZM150.62 200h-45.24a24 24 0 0 0 45.24 0ZM208 184c-10.64-18.27-16-42.49-16-72a64 64 0 0 0-128 0c0 29.52-5.38 53.74-16 72Z\" />\n </svg>\n);\nexport default SvgBellRinging;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBell = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M221.8 175.94c-5.55-9.56-13.8-36.61-13.8-71.94a80 80 0 1 0-160 0c0 35.34-8.26 62.38-13.81 71.94A16 16 0 0 0 48 200h40.81a40 40 0 0 0 78.38 0H208a16 16 0 0 0 13.8-24.06ZM128 216a24 24 0 0 1-22.62-16h45.24A24 24 0 0 1 128 216Zm-80-32c7.7-13.24 16-43.92 16-80a64 64 0 1 1 128 0c0 36.05 8.28 66.73 16 80Z\" />\n </svg>\n);\nexport default SvgBell;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBookmarkSimpleFill = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M184 32H72a16 16 0 0 0-16 16v176a8 8 0 0 0 12.24 6.78L128 193.43l59.77 37.35A8 8 0 0 0 200 224V48a16 16 0 0 0-16-16Z\" />\n </svg>\n);\nexport default SvgBookmarkSimpleFill;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgBookmarkSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M184 32H72a16 16 0 0 0-16 16v176a8 8 0 0 0 12.24 6.78L128 193.43l59.77 37.35A8 8 0 0 0 200 224V48a16 16 0 0 0-16-16Zm0 177.57-51.77-32.35a8 8 0 0 0-8.48 0L72 209.57V48h112Z\" />\n </svg>\n);\nexport default SvgBookmarkSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCalendarBlank = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16ZM72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160v112Z\" />\n </svg>\n);\nexport default SvgCalendarBlank;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCalendarPlus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 32h-24v-8a8 8 0 0 0-16 0v8H88v-8a8 8 0 0 0-16 0v8H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16ZM72 48v8a8 8 0 0 0 16 0v-8h80v8a8 8 0 0 0 16 0v-8h24v32H48V48Zm136 160H48V96h160v112Zm-48-56a8 8 0 0 1-8 8h-16v16a8 8 0 0 1-16 0v-16h-16a8 8 0 0 1 0-16h16v-16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgCalendarPlus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleDown = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm45.66-109.66a8 8 0 0 1 0 11.32l-40 40a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L128 140.69l34.34-34.35a8 8 0 0 1 11.32 0Z\" />\n </svg>\n);\nexport default SvgCaretCircleDown;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm21.66-122.34L115.31 128l34.35 34.34a8 8 0 0 1-11.32 11.32l-40-40a8 8 0 0 1 0-11.32l40-40a8 8 0 0 1 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgCaretCircleLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm29.66-93.66a8 8 0 0 1 0 11.32l-40 40a8 8 0 0 1-11.32-11.32L140.69 128l-34.35-34.34a8 8 0 0 1 11.32-11.32Z\" />\n </svg>\n);\nexport default SvgCaretCircleRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretCircleUp = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm45.66-77.66a8 8 0 0 1-11.32 11.32L128 115.31l-34.34 34.35a8 8 0 0 1-11.32-11.32l40-40a8 8 0 0 1 11.32 0Z\" />\n </svg>\n);\nexport default SvgCaretCircleUp;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretDown = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m213.66 101.66-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgCaretDown;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretLeft = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\" />\n </svg>\n);\nexport default SvgCaretLeft;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretRight = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m181.66 133.66-80 80a8 8 0 0 1-11.32-11.32L164.69 128 90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32Z\" />\n </svg>\n);\nexport default SvgCaretRight;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCaretUp = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M213.66 165.66a8 8 0 0 1-11.32 0L128 91.31l-74.34 74.35a8 8 0 0 1-11.32-11.32l80-80a8 8 0 0 1 11.32 0l80 80a8 8 0 0 1 0 11.32Z\" />\n </svg>\n);\nexport default SvgCaretUp;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCheckCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0ZM232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgCheckCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCheck = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m229.66 77.66-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgCheck;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Z\" />\n </svg>\n);\nexport default SvgCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgClock = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm64-88a8 8 0 0 1-8 8h-56a8 8 0 0 1-8-8V72a8 8 0 0 1 16 0v48h48a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgClock;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgCopy = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Zm-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z\" />\n </svg>\n);\nexport default SvgCopy;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDotsSixVertical = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M104 60a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm60 12a12 12 0 1 0-12-12 12 12 0 0 0 12 12Zm-72 44a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm72 0a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm-72 68a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm72 0a12 12 0 1 0 12 12 12 12 0 0 0-12-12Z\" />\n </svg>\n);\nexport default SvgDotsSixVertical;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDotsThreeCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm12-88a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm44 0a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm-88 0a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z\" />\n </svg>\n);\nexport default SvgDotsThreeCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDotsThree = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M140 128a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm56-12a12 12 0 1 0 12 12 12 12 0 0 0-12-12Zm-136 0a12 12 0 1 0 12 12 12 12 0 0 0-12-12Z\" />\n </svg>\n);\nexport default SvgDotsThree;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgDownloadSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0Zm-101.66 5.66a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0-11.32-11.32L136 124.69V32a8 8 0 0 0-16 0v92.69L93.66 98.34a8 8 0 0 0-11.32 11.32Z\" />\n </svg>\n);\nexport default SvgDownloadSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgEnvelope = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 48H32a8 8 0 0 0-8 8v136a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a8 8 0 0 0-8-8Zm-96 85.15L52.57 64h150.86ZM98.71 128 40 181.81V74.19Zm11.84 10.85 12 11.05a8 8 0 0 0 10.82 0l12-11.05 58 53.15H52.57ZM157.29 128 216 74.18v107.64Z\" />\n </svg>\n);\nexport default SvgEnvelope;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgExport = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 112v96a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16v-96a16 16 0 0 1 16-16h24a8 8 0 0 1 0 16H56v96h144v-96h-24a8 8 0 0 1 0-16h24a16 16 0 0 1 16 16ZM93.66 69.66 120 43.31V136a8 8 0 0 0 16 0V43.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgExport;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgFloppyDisk = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M219.31 72 184 36.69A15.86 15.86 0 0 0 172.69 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V83.31A15.86 15.86 0 0 0 219.31 72ZM168 208H88v-56h80Zm40 0h-24v-56a16 16 0 0 0-16-16H88a16 16 0 0 0-16 16v56H48V48h124.69L208 83.31ZM160 72a8 8 0 0 1-8 8H96a8 8 0 0 1 0-16h56a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgFloppyDisk;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgFunnel = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M230.6 49.53A15.81 15.81 0 0 0 216 40H40a16 16 0 0 0-11.81 26.76l.08.09L96 139.17V216a16 16 0 0 0 24.87 13.32l32-21.34a16 16 0 0 0 7.13-13.32v-55.49l67.74-72.32.08-.09a15.8 15.8 0 0 0 2.78-17.23ZM40 56Zm106.18 74.58A8 8 0 0 0 144 136v58.66L112 216v-80a8 8 0 0 0-2.16-5.47L40 56h176Z\" />\n </svg>\n);\nexport default SvgFunnel;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgGear = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 80a48 48 0 1 0 48 48 48.05 48.05 0 0 0-48-48Zm0 80a32 32 0 1 1 32-32 32 32 0 0 1-32 32Zm88-29.84q.06-2.16 0-4.32l14.92-18.64a8 8 0 0 0 1.48-7.06 107.21 107.21 0 0 0-10.88-26.25 8 8 0 0 0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186 40.54a8 8 0 0 0-3.94-6 107.71 107.71 0 0 0-26.25-10.87 8 8 0 0 0-7.06 1.49L130.16 40h-4.32L107.2 25.11a8 8 0 0 0-7.06-1.48 107.6 107.6 0 0 0-26.25 10.88 8 8 0 0 0-3.93 6l-2.64 23.76q-1.56 1.49-3 3L40.54 70a8 8 0 0 0-6 3.94 107.71 107.71 0 0 0-10.87 26.25 8 8 0 0 0 1.49 7.06L40 125.84v4.32L25.11 148.8a8 8 0 0 0-1.48 7.06 107.21 107.21 0 0 0 10.88 26.25 8 8 0 0 0 6 3.93l23.72 2.64q1.49 1.56 3 3L70 215.46a8 8 0 0 0 3.94 6 107.71 107.71 0 0 0 26.25 10.87 8 8 0 0 0 7.06-1.49L125.84 216q2.16.06 4.32 0l18.64 14.92a8 8 0 0 0 7.06 1.48 107.21 107.21 0 0 0 26.25-10.88 8 8 0 0 0 3.93-6l2.64-23.72q1.56-1.48 3-3l23.78-2.8a8 8 0 0 0 6-3.94 107.71 107.71 0 0 0 10.87-26.25 8 8 0 0 0-1.49-7.06Zm-16.1-6.5a73.93 73.93 0 0 1 0 8.68 8 8 0 0 0 1.74 5.48l14.19 17.73a91.57 91.57 0 0 1-6.23 15l-22.6 2.56a8 8 0 0 0-5.1 2.64 74.11 74.11 0 0 1-6.14 6.14 8 8 0 0 0-2.64 5.1l-2.51 22.58a91.32 91.32 0 0 1-15 6.23l-17.74-14.19a8 8 0 0 0-5-1.75h-.48a73.93 73.93 0 0 1-8.68 0 8 8 0 0 0-5.48 1.74l-17.78 14.2a91.57 91.57 0 0 1-15-6.23L82.89 187a8 8 0 0 0-2.64-5.1 74.11 74.11 0 0 1-6.14-6.14 8 8 0 0 0-5.1-2.64l-22.58-2.52a91.32 91.32 0 0 1-6.23-15l14.19-17.74a8 8 0 0 0 1.74-5.48 73.93 73.93 0 0 1 0-8.68 8 8 0 0 0-1.74-5.48L40.2 100.45a91.57 91.57 0 0 1 6.23-15L69 82.89a8 8 0 0 0 5.1-2.64 74.11 74.11 0 0 1 6.14-6.14A8 8 0 0 0 82.89 69l2.51-22.57a91.32 91.32 0 0 1 15-6.23l17.74 14.19a8 8 0 0 0 5.48 1.74 73.93 73.93 0 0 1 8.68 0 8 8 0 0 0 5.48-1.74l17.77-14.19a91.57 91.57 0 0 1 15 6.23L173.11 69a8 8 0 0 0 2.64 5.1 74.11 74.11 0 0 1 6.14 6.14 8 8 0 0 0 5.1 2.64l22.58 2.51a91.32 91.32 0 0 1 6.23 15l-14.19 17.74a8 8 0 0 0-1.74 5.53Z\" />\n </svg>\n);\nexport default SvgGear;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgHouse = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m219.31 108.68-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32ZM208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80 80 80Z\" />\n </svg>\n);\nexport default SvgHouse;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgImage = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16Zm0 16v102.75l-26.07-26.06a16 16 0 0 0-22.63 0l-20 20-44-44a16 16 0 0 0-22.62 0L40 149.37V56ZM40 172l52-52 80 80H40Zm176 28h-21.37l-36-36 20-20L216 181.38V200Zm-72-100a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z\" />\n </svg>\n);\nexport default SvgImage;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgInfo = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm16-40a8 8 0 0 1-8 8 16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16 16 16 0 0 1 16 16v40a8 8 0 0 1 8 8Zm-32-92a12 12 0 1 1 12 12 12 12 0 0 1-12-12Z\" />\n </svg>\n);\nexport default SvgInfo;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgLinkSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M165.66 90.34a8 8 0 0 1 0 11.32l-64 64a8 8 0 0 1-11.32-11.32l64-64a8 8 0 0 1 11.32 0ZM215.6 40.4a56 56 0 0 0-79.2 0l-30.06 30.05a8 8 0 0 0 11.32 11.32l30.06-30a40 40 0 0 1 56.57 56.56l-30.07 30.06a8 8 0 0 0 11.31 11.32l30.07-30.11a56 56 0 0 0 0-79.2Zm-77.26 133.82-30.06 30.06a40 40 0 1 1-56.56-56.57l30.05-30.05a8 8 0 0 0-11.32-11.32L40.4 136.4a56 56 0 0 0 79.2 79.2l30.06-30.07a8 8 0 0 0-11.32-11.31Z\" />\n </svg>\n);\nexport default SvgLinkSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgList = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8ZM40 72h176a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16Zm176 112H40a8 8 0 0 0 0 16h176a8 8 0 0 0 0-16Z\" />\n </svg>\n);\nexport default SvgList;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgLockSimpleOpen = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 80H96V56a32 32 0 0 1 32-32c15.37 0 29.2 11 32.16 25.59a8 8 0 0 0 15.68-3.18C171.32 24.15 151.2 8 128 8a48.05 48.05 0 0 0-48 48v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16Zm0 128H48V96h160v112Z\" />\n </svg>\n);\nexport default SvgLockSimpleOpen;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgLockSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M208 80h-32V56a48 48 0 0 0-96 0v24H48a16 16 0 0 0-16 16v112a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16ZM96 56a32 32 0 0 1 64 0v24H96Zm112 152H48V96h160v112Z\" />\n </svg>\n);\nexport default SvgLockSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMagnifyingGlass = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m229.66 218.34-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z\" />\n </svg>\n);\nexport default SvgMagnifyingGlass;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMapPin = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 64a40 40 0 1 0 40 40 40 40 0 0 0-40-40Zm0 64a24 24 0 1 1 24-24 24 24 0 0 1-24 24Zm0-112a88.1 88.1 0 0 0-88 88c0 31.4 14.51 64.68 42 96.25a254.19 254.19 0 0 0 41.45 38.3 8 8 0 0 0 9.18 0 254.19 254.19 0 0 0 41.37-38.3c27.45-31.57 42-64.85 42-96.25a88.1 88.1 0 0 0-88-88Zm0 206c-16.53-13-72-60.75-72-118a72 72 0 0 1 144 0c0 57.23-55.47 105-72 118Z\" />\n </svg>\n);\nexport default SvgMapPin;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMegaphone = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M248 120a48.05 48.05 0 0 0-48-48h-39.8c-2.91-.17-53.62-3.74-101.91-44.24A16 16 0 0 0 32 40v160a16 16 0 0 0 26.29 12.25c37.77-31.68 77-40.76 93.71-43.3v31.72a16 16 0 0 0 7.12 13.33l11 7.33A16 16 0 0 0 194.5 212l11.77-44.36A48.07 48.07 0 0 0 248 120ZM48 199.93V40c42.81 35.91 86.63 45 104 47.24v65.48c-17.35 2.28-61.16 11.35-104 47.21Zm131 8v.11l-11-7.33V168h21.6ZM200 152h-32V88h32a32 32 0 1 1 0 64Z\" />\n </svg>\n);\nexport default SvgMegaphone;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMinusCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M176 128a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm56 0A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgMinusCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgMinus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgMinus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPaperclip = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M209.66 122.34a8 8 0 0 1 0 11.32l-82.05 82a56 56 0 0 1-79.2-79.21l99.26-100.72a40 40 0 1 1 56.61 56.55L105 193a24 24 0 1 1-34-34l83.3-84.62a8 8 0 1 1 11.4 11.22l-83.31 84.71a8 8 0 1 0 11.27 11.36L192.93 81A24 24 0 1 0 159 47L59.76 147.68a40 40 0 1 0 56.53 56.62l82.06-82a8 8 0 0 1 11.31.04Z\" />\n </svg>\n);\nexport default SvgPaperclip;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPassword = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M48 56v144a8 8 0 0 1-16 0V56a8 8 0 0 1 16 0Zm92 54.5-20 6.5V96a8 8 0 0 0-16 0v21l-20-6.5a8 8 0 0 0-5 15.22l20 6.49-12.34 17a8 8 0 1 0 12.94 9.4l12.34-17 12.34 17a8 8 0 1 0 12.94-9.4l-12.34-17 20-6.49A8 8 0 0 0 140 110.5Zm106 5.14a8 8 0 0 0-10-5.14l-20 6.5V96a8 8 0 0 0-16 0v21l-20-6.49a8 8 0 0 0-4.95 15.22l20 6.49-12.34 17a8 8 0 1 0 12.94 9.4l12.34-17 12.34 17a8 8 0 1 0 12.94-9.4l-12.34-17 20-6.49a8 8 0 0 0 5.07-10.09Z\" />\n </svg>\n);\nexport default SvgPassword;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPencil = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m227.31 73.37-44.68-44.69a16 16 0 0 0-22.63 0L36.69 152A15.86 15.86 0 0 0 32 163.31V208a16 16 0 0 0 16 16h44.69a15.86 15.86 0 0 0 11.31-4.69L227.31 96a16 16 0 0 0 0-22.63ZM51.31 160 136 75.31 152.69 92 68 176.68ZM48 179.31 76.69 208H48Zm48 25.38L79.31 188 164 103.31 180.69 120Zm96-96L147.31 64l24-24L216 84.68Z\" />\n </svg>\n);\nexport default SvgPencil;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPhone = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m222.37 158.46-47.11-21.11-.13-.06a16 16 0 0 0-15.17 1.4 8.12 8.12 0 0 0-.75.56L134.87 160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16 16 0 0 0 1.32-15.06v-.12L97.54 33.64a16 16 0 0 0-16.62-9.52A56.26 56.26 0 0 0 32 80c0 79.4 64.6 144 144 144a56.26 56.26 0 0 0 55.88-48.92 16 16 0 0 0-9.51-16.62ZM176 208A128.14 128.14 0 0 1 48 80a40.2 40.2 0 0 1 34.87-40 .61.61 0 0 0 0 .12l21 47-20.67 24.74a6.13 6.13 0 0 0-.57.77 16 16 0 0 0-1 15.7c9.06 18.53 27.73 37.06 46.46 46.11a16 16 0 0 0 15.75-1.14 8.44 8.44 0 0 0 .74-.56L168.89 152l47 21.05h.11A40.21 40.21 0 0 1 176 208Z\" />\n </svg>\n);\nexport default SvgPhone;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPlusCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm0 192a88 88 0 1 1 88-88 88.1 88.1 0 0 1-88 88Zm48-88a8 8 0 0 1-8 8h-32v32a8 8 0 0 1-16 0v-32H88a8 8 0 0 1 0-16h32V88a8 8 0 0 1 16 0v32h32a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgPlusCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgPlus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8Z\" />\n </svg>\n);\nexport default SvgPlus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgQuestion = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M140 180a12 12 0 1 1-12-12 12 12 0 0 1 12 12ZM128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28 0-19.85-17.94-36-40-36Zm104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgQuestion;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgShoppingCart = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M230.14 58.87A8 8 0 0 0 224 56H62.68L56.6 22.57A8 8 0 0 0 48.73 16H24a8 8 0 0 0 0 16h18l25.56 140.29a24 24 0 0 0 5.33 11.27 28 28 0 1 0 44.4 8.44h45.42a27.75 27.75 0 0 0-2.71 12 28 28 0 1 0 28-28H91.17a8 8 0 0 1-7.87-6.57L80.13 152h116a24 24 0 0 0 23.61-19.71l12.16-66.86a8 8 0 0 0-1.76-6.56ZM104 204a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm96 0a12 12 0 1 1-12-12 12 12 0 0 1 12 12Zm4-74.57a8 8 0 0 1-7.9 6.57H77.22L65.59 72h148.82Z\" />\n </svg>\n);\nexport default SvgShoppingCart;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSignIn = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"m141.66 133.66-40 40a8 8 0 0 1-11.32-11.32L116.69 136H24a8 8 0 0 1 0-16h92.69L90.34 93.66a8 8 0 0 1 11.32-11.32l40 40a8 8 0 0 1 0 11.32ZM200 32h-64a8 8 0 0 0 0 16h56v160h-56a8 8 0 0 0 0 16h64a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8Z\" />\n </svg>\n);\nexport default SvgSignIn;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSignOut = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M120 216a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h64a8 8 0 0 1 0 16H56v160h56a8 8 0 0 1 8 8Zm109.66-93.66-40-40a8 8 0 0 0-11.32 11.32L204.69 120H112a8 8 0 0 0 0 16h92.69l-26.35 26.34a8 8 0 0 0 11.32 11.32l40-40a8 8 0 0 0 0-11.32Z\" />\n </svg>\n);\nexport default SvgSignOut;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSliders = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M64 105V40a8 8 0 0 0-16 0v65a32 32 0 0 0 0 62v49a8 8 0 0 0 16 0v-49a32 32 0 0 0 0-62Zm-8 47a16 16 0 1 1 16-16 16 16 0 0 1-16 16Zm80-95V40a8 8 0 0 0-16 0v17a32 32 0 0 0 0 62v97a8 8 0 0 0 16 0v-97a32 32 0 0 0 0-62Zm-8 47a16 16 0 1 1 16-16 16 16 0 0 1-16 16Zm104 64a32.06 32.06 0 0 0-24-31V40a8 8 0 0 0-16 0v97a32 32 0 0 0 0 62v17a8 8 0 0 0 16 0v-17a32.06 32.06 0 0 0 24-31Zm-32 16a16 16 0 1 1 16-16 16 16 0 0 1-16 16Z\" />\n </svg>\n);\nexport default SvgSliders;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSortAscending = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 128a8 8 0 0 1-8 8H48a8 8 0 0 1 0-16h72a8 8 0 0 1 8 8ZM48 72h136a8 8 0 0 0 0-16H48a8 8 0 0 0 0 16Zm56 112H48a8 8 0 0 0 0 16h56a8 8 0 0 0 0-16Zm125.66-21.66a8 8 0 0 0-11.32 0L192 188.69V112a8 8 0 0 0-16 0v76.69l-26.34-26.35a8 8 0 0 0-11.32 11.32l40 40a8 8 0 0 0 11.32 0l40-40a8 8 0 0 0 0-11.32Z\" />\n </svg>\n);\nexport default SvgSortAscending;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSortDescending = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M40 128a8 8 0 0 1 8-8h72a8 8 0 0 1 0 16H48a8 8 0 0 1-8-8Zm8-56h56a8 8 0 0 0 0-16H48a8 8 0 0 0 0 16Zm136 112H48a8 8 0 0 0 0 16h136a8 8 0 0 0 0-16Zm45.66-101.66-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32L176 67.31V144a8 8 0 0 0 16 0V67.31l26.34 26.35a8 8 0 0 0 11.32-11.32Z\" />\n </svg>\n);\nexport default SvgSortDescending;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgSpinnerGap = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M136 32v32a8 8 0 0 1-16 0V32a8 8 0 0 1 16 0Zm88 88h-32a8 8 0 0 0 0 16h32a8 8 0 0 0 0-16Zm-45.09 47.6a8 8 0 0 0-11.31 11.31l22.62 22.63a8 8 0 0 0 11.32-11.32ZM128 184a8 8 0 0 0-8 8v32a8 8 0 0 0 16 0v-32a8 8 0 0 0-8-8Zm-50.91-16.4-22.63 22.62a8 8 0 0 0 11.32 11.32l22.62-22.63a8 8 0 0 0-11.31-11.31ZM72 128a8 8 0 0 0-8-8H32a8 8 0 0 0 0 16h32a8 8 0 0 0 8-8Zm-6.22-73.54a8 8 0 0 0-11.32 11.32L77.09 88.4A8 8 0 0 0 88.4 77.09Z\" />\n </svg>\n);\nexport default SvgSpinnerGap;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgTrash = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16ZM96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Z\" />\n </svg>\n);\nexport default SvgTrash;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUploadSimple = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M224 144v64a8 8 0 0 1-8 8H40a8 8 0 0 1-8-8v-64a8 8 0 0 1 16 0v56h160v-56a8 8 0 0 1 16 0ZM93.66 77.66 120 51.31V144a8 8 0 0 0 16 0V51.31l26.34 26.35a8 8 0 0 0 11.32-11.32l-40-40a8 8 0 0 0-11.32 0l-40 40a8 8 0 0 0 11.32 11.32Z\" />\n </svg>\n);\nexport default SvgUploadSimple;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUserCircleMinus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M168 56a8 8 0 0 1 8-8h48a8 8 0 0 1 0 16h-48a8 8 0 0 1-8-8Zm58.08 37.33a103.93 103.93 0 1 1-80.76-67.89 8 8 0 0 1-2.64 15.78A88.07 88.07 0 0 0 40 128a87.62 87.62 0 0 0 22.24 58.41 79.66 79.66 0 0 1 36.06-28.75 48 48 0 1 1 59.4 0 79.66 79.66 0 0 1 36.06 28.75A88 88 0 0 0 211 98.67a8 8 0 0 1 15.09-5.34ZM128 152a32 32 0 1 0-32-32 32 32 0 0 0 32 32Zm0 64a87.57 87.57 0 0 0 53.92-18.5 64 64 0 0 0-107.84 0A87.57 87.57 0 0 0 128 216Z\" />\n </svg>\n);\nexport default SvgUserCircleMinus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUserCirclePlus = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M168 56a8 8 0 0 1 8-8h16V32a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V64h-16a8 8 0 0 1-8-8Zm62.56 54.68a103.92 103.92 0 1 1-85.24-85.24 8 8 0 0 1-2.64 15.78A88.07 88.07 0 0 0 40 128a87.62 87.62 0 0 0 22.24 58.41 79.66 79.66 0 0 1 36.06-28.75 48 48 0 1 1 59.4 0 79.66 79.66 0 0 1 36.06 28.75A87.62 87.62 0 0 0 216 128a88.85 88.85 0 0 0-1.22-14.68 8 8 0 1 1 15.78-2.64ZM128 152a32 32 0 1 0-32-32 32 32 0 0 0 32 32Zm0 64a87.57 87.57 0 0 0 53.92-18.5 64 64 0 0 0-107.84 0A87.57 87.57 0 0 0 128 216Z\" />\n </svg>\n);\nexport default SvgUserCirclePlus;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgUserCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24ZM74.08 197.5a64 64 0 0 1 107.84 0 87.83 87.83 0 0 1-107.84 0ZM96 120a32 32 0 1 1 32 32 32 32 0 0 1-32-32Zm97.76 66.41a79.66 79.66 0 0 0-36.06-28.75 48 48 0 1 0-59.4 0 79.66 79.66 0 0 0-36.06 28.75 88 88 0 1 1 131.52 0Z\" />\n </svg>\n);\nexport default SvgUserCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgWarning = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M236.8 188.09 149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19 23.51 23.51 0 0 0 .02-23.72Zm-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2 7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72ZM120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0Zm20 36a12 12 0 1 1-12-12 12 12 0 0 1 12 12Z\" />\n </svg>\n);\nexport default SvgWarning;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgXCircle = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M165.66 101.66 139.31 128l26.35 26.34a8 8 0 0 1-11.32 11.32L128 139.31l-26.34 26.35a8 8 0 0 1-11.32-11.32L116.69 128l-26.35-26.34a8 8 0 0 1 11.32-11.32L128 116.69l26.34-26.35a8 8 0 0 1 11.32 11.32ZM232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104Zm-16 0a88 88 0 1 0-88 88 88.1 88.1 0 0 0 88-88Z\" />\n </svg>\n);\nexport default SvgXCircle;\n","import { SVGAttributes } from \"react\";\nimport clsx from \"clsx\";\nexport type IconProps = SVGAttributes<SVGElement>;\nconst SvgX = ({ className, ...props }: IconProps) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n viewBox=\"0 0 256 256\"\n className={clsx(\"sds-icon\", className)}\n aria-hidden=\"true\"\n {...props}\n >\n <path d=\"M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z\" />\n </svg>\n);\nexport default SvgX;\n","import clsx from \"clsx\";\nimport { IconProps } from \"./build/index\";\n\nexport interface LogoIconsProps extends IconProps {\n className?: string;\n color?: \"black\" | \"white\";\n}\n\nexport const LinkedInLogo = ({ color, className, ...rest }: LogoIconsProps) => (\n <svg\n viewBox=\"0 0 32 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={clsx(\n \"sds-icon\",\n \"sds-icon-logo\",\n color && `sds-icon-logo--color-${color}`,\n className,\n )}\n aria-hidden=\"true\"\n {...rest}\n >\n <path d=\"M4.11716 2.00013H27.9999C28.1606 2.00432 28.32 2.02812 28.4749 2.07108C28.8261 2.16355 29.1456 2.35003 29.3992 2.61046C29.6527 2.8709 29.8308 3.19548 29.9142 3.54952C29.9729 3.78559 30.0008 4.02828 29.9972 4.27154C30.0009 12.0774 30.0009 19.8836 29.9972 27.6901C29.9938 27.8634 29.9804 28.0364 29.9574 28.2081C29.8913 28.7041 29.6476 29.159 29.2716 29.4883C28.8956 29.8176 28.413 29.9989 27.9136 29.9982C19.9715 29.9982 12.029 29.9982 4.08621 29.9982C3.64924 29.9981 3.22353 29.8593 2.8701 29.6019C2.51668 29.3445 2.25356 28.9816 2.11866 28.5652C2.03622 28.2901 1.99634 28.004 2.00026 27.7168C2.00026 19.9369 2.00026 12.1569 2.00026 4.37694C1.9985 4.16869 2.01335 3.96059 2.04459 3.7547C2.08899 3.40751 2.22443 3.07832 2.43721 2.80068C2.64999 2.52305 2.93249 2.3069 3.25583 2.17424C3.52752 2.0561 3.821 1.99679 4.11716 2.00013ZM17.0234 25.7947V25.4753C17.0234 24.7356 17.0157 23.9958 17.0234 23.2571C17.0444 21.6567 16.968 20.0551 17.0654 18.4558C17.0867 17.9859 17.1878 17.523 17.3644 17.0872C17.4597 16.838 17.6057 16.6115 17.7931 16.4219C17.9805 16.2323 18.2051 16.0838 18.4528 15.9859C19.0205 15.7532 19.6488 15.7142 20.2408 15.875C20.667 15.9833 21.033 16.2565 21.2584 16.6347C21.4626 16.9936 21.5925 17.39 21.6403 17.8003C21.694 18.1616 21.7195 18.5265 21.7167 18.8917C21.7115 21.081 21.7115 23.2708 21.7167 25.4609C21.7167 25.5718 21.7299 25.6827 21.7366 25.7803C22.0964 25.8291 25.5553 25.8147 25.7645 25.7626C25.7701 25.6938 25.7811 25.6184 25.7822 25.5407C25.8055 23.958 25.759 22.3754 25.8166 20.7916C25.853 19.9045 25.8449 19.016 25.7922 18.1297C25.7546 17.5408 25.7624 16.9497 25.6815 16.363C25.5939 15.6291 25.3796 14.916 25.0482 14.2557C24.8264 13.8246 24.5192 13.4435 24.1453 13.1355C23.7714 12.8275 23.3388 12.5992 22.8738 12.4645C21.9829 12.1892 21.0431 12.1105 20.1191 12.2338C19.2323 12.3429 18.4041 12.7354 17.7574 13.3529C17.5025 13.5902 17.277 13.8571 17.0854 14.1481C17.0423 14.2146 17.0145 14.3122 16.8739 14.2923C16.8485 13.7211 16.8829 13.1499 16.853 12.5521L16.0502 12.5454H14.5113C14.2589 12.5454 14.0074 12.5454 13.755 12.5454C13.4875 12.5299 13.2191 12.5399 12.9534 12.5754V23.8128C12.9534 24.3784 12.9534 24.9441 12.9534 25.5097C12.9534 25.6018 12.9668 25.6927 12.9734 25.7914L17.0234 25.7947ZM10.252 25.7892C10.3096 25.5485 10.3074 12.805 10.252 12.5909C10.0306 12.5321 6.47549 12.5333 6.25959 12.5909C6.20424 12.8128 6.20313 25.5563 6.25959 25.7759C6.45113 25.8247 9.89992 25.8357 10.252 25.7892ZM10.6085 8.2732C10.6112 7.64777 10.3665 7.04672 9.92817 6.60136C9.48981 6.15601 8.89336 5.90255 8.26904 5.8964C7.95624 5.8945 7.64621 5.95451 7.35663 6.07301C7.06705 6.19151 6.80367 6.36613 6.58166 6.58688C6.35965 6.80763 6.18325 7.07014 6.06281 7.35933C5.94237 7.64853 5.88025 7.9587 5.87981 8.27205C5.87135 8.58776 5.92729 8.90191 6.04443 9.19513C6.16157 9.48835 6.33743 9.7545 6.56098 9.9772C6.78454 10.1999 7.05111 10.3744 7.34446 10.4901C7.63782 10.6058 7.95177 10.6603 8.26688 10.65C8.57882 10.6562 8.88865 10.5987 9.17767 10.481C9.46669 10.3633 9.72879 10.1878 9.9479 9.96528C10.167 9.74278 10.3386 9.47791 10.4522 9.1868C10.5657 8.8957 10.619 8.58442 10.6085 8.27205V8.2732Z\" />\n </svg>\n);\n","import { ChangeEventHandler, forwardRef, ReactNode, useId } from \"react\";\nimport clsx from \"clsx\";\nimport { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n checked?: boolean;\n label: ReactNode;\n showIcons?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n ({ checked, label, showIcons = true, onChange, ...rest }, ref) => {\n const toggleButtonId = useId();\n return (\n <div className=\"sds-toggle-button\" {...rest}>\n <input\n ref={ref}\n type=\"checkbox\"\n className=\"sds-toggle-button__input\"\n onChange={onChange}\n readOnly={!onChange}\n checked={checked}\n aria-checked={checked}\n id={toggleButtonId}\n />\n <label\n className={clsx(\n \"sds-toggle-button__label\",\n checked && \"sds-toggle-button__label--checked\",\n )}\n htmlFor={toggleButtonId}\n >\n <div className=\"sds-toggle-button__label-text\">{label}</div>\n {showIcons && (\n <PlusCircleIcon\n className={clsx(\n \"sds-toggle-button__icon\",\n checked && \"sds-toggle-button__icon--checked\",\n )}\n />\n )}\n </label>\n </div>\n );\n },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { ReactNode, forwardRef } from \"react\";\nimport { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport clsx from \"clsx\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n HTMLFieldSetElement,\n ToggleSegmentProps\n>(({ children, variant = \"default\", ...rest }, ref) => {\n return (\n <div\n className={clsx(\n \"sds-toggle-segment\",\n variant !== \"default\" && `sds-toggle-segment--${variant}`,\n )}\n >\n <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n <div className=\"sds-toggle-segment__group\">{children}</div>\n </Fieldset>\n </div>\n );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-segment.pcss\";\nimport clsx from \"clsx\";\nimport { useFieldset } from \"@sikt/sds-form\";\n\nexport interface ToggleSegmentOptionProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n value: string | number;\n label: ReactNode;\n checked?: boolean;\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n HTMLInputElement,\n ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, ...rest }, ref) => {\n const { name } = useFieldset() ?? {};\n const generatedId = useId();\n const htmlForId = rest.id ?? generatedId;\n\n return (\n <div\n className={clsx(\n \"sds-toggle-segment__option\",\n checked && \"sds-toggle-segment__option--checked\",\n )}\n >\n <input\n id={htmlForId}\n name={name}\n ref={ref}\n type=\"radio\"\n onChange={onChange}\n className=\"sds-toggle-segment__input\"\n value={value}\n checked={checked}\n {...rest}\n />\n <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n {label}\n </label>\n </div>\n );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
|
|
1
|
+
{"version":3,"sources":["../ToggleSwitch.tsx","../ToggleButton.tsx","../ToggleSegment.tsx","../ToggleSegmentOption.tsx"],"names":["forwardRef","useId","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import { ReactNode, ChangeEventHandler, useId, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-switch.pcss\";\n\nexport interface ToggleSwitchProps {\n checked?: boolean;\n label: ReactNode;\n labelFirst?: boolean;\n showIcons?: boolean;\n error?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\n labelFirst = false,\n showIcons = true,\n error = false,\n onChange,\n className,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const labelElement = (\n <div className=\"sds-toggle-switch__label-text\">{label}</div>\n );\n\n return (\n <div\n className={clsx(\n \"sds-toggle-switch\",\n checked && \"sds-toggle-switch--checked\",\n error && \"sds-toggle-switch--error\",\n className,\n )}\n data-testid=\"sds-toggle-switch\"\n >\n <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\n <div className=\"sds-toggle-switch__inner\">\n <input\n ref={ref}\n id={id}\n type=\"checkbox\"\n role=\"switch\"\n className=\"sds-toggle-switch__track\"\n checked={checked}\n aria-invalid={error}\n onChange={onChange}\n readOnly={!onChange}\n {...rest}\n />\n <div className=\"sds-toggle-switch__thumb\">\n {showIcons && checked && <CheckIcon />}\n {showIcons && !checked && <XIcon />}\n </div>\n </div>\n {!labelFirst && labelElement}\n </label>\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { ChangeEventHandler, forwardRef, ReactNode, useId } from \"react\";\nimport clsx from \"clsx\";\nimport { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n checked?: boolean;\n label: ReactNode;\n showIcons?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n const toggleButtonId = useId();\n return (\n <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n <input\n ref={ref}\n type=\"checkbox\"\n className=\"sds-toggle-button__input\"\n onChange={onChange}\n readOnly={!onChange}\n checked={checked}\n aria-checked={checked}\n id={toggleButtonId}\n />\n <label\n className={clsx(\n \"sds-toggle-button__label\",\n checked && \"sds-toggle-button__label--checked\",\n )}\n htmlFor={toggleButtonId}\n >\n <div className=\"sds-toggle-button__label-text\">{label}</div>\n {showIcons && (\n <PlusCircleIcon\n className={clsx(\n \"sds-toggle-button__icon\",\n checked && \"sds-toggle-button__icon--checked\",\n )}\n />\n )}\n </label>\n </div>\n );\n },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { ReactNode, forwardRef } from \"react\";\nimport { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport clsx from \"clsx\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n HTMLFieldSetElement,\n ToggleSegmentProps\n>(({ children, variant = \"default\", className, ...rest }, ref) => {\n return (\n <div\n className={clsx(\n \"sds-toggle-segment\",\n variant !== \"default\" && `sds-toggle-segment--${variant}`,\n className,\n )}\n >\n <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n <div className=\"sds-toggle-segment__group\">{children}</div>\n </Fieldset>\n </div>\n );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-segment.pcss\";\nimport clsx from \"clsx\";\nimport { useFieldset } from \"@sikt/sds-form\";\n\nexport interface ToggleSegmentOptionProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n value: string | number;\n label: ReactNode;\n checked?: boolean;\n onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n HTMLInputElement,\n ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n const { name } = useFieldset() ?? {};\n const generatedId = useId();\n const htmlForId = rest.id ?? generatedId;\n\n return (\n <div\n className={clsx(\n \"sds-toggle-segment__option\",\n checked && \"sds-toggle-segment__option--checked\",\n className,\n )}\n >\n <input\n id={htmlForId}\n name={name}\n ref={ref}\n type=\"radio\"\n onChange={onChange}\n className=\"sds-toggle-segment__input\"\n value={value}\n checked={checked}\n {...rest}\n />\n <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n {label}\n </label>\n </div>\n );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
|
package/package.json
CHANGED
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-toggle",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
+
"type": "commonjs",
|
|
5
6
|
"main": "dist/index.js",
|
|
6
7
|
"module": "dist/index.mjs",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": {
|
|
11
|
+
"types": "./dist/index.d.mts",
|
|
12
|
+
"default": "./dist/index.mjs"
|
|
13
|
+
},
|
|
14
|
+
"require": {
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"default": "./dist/index.js"
|
|
17
|
+
},
|
|
18
|
+
"style": "./dist/index.css"
|
|
19
|
+
},
|
|
20
|
+
"./dist/*": "./dist/*"
|
|
21
|
+
},
|
|
7
22
|
"types": "dist/index.d.ts",
|
|
8
23
|
"style": "dist/index.css",
|
|
9
24
|
"files": [
|
|
@@ -15,9 +30,10 @@
|
|
|
15
30
|
"build": "tsup"
|
|
16
31
|
},
|
|
17
32
|
"dependencies": {
|
|
18
|
-
"@sikt/sds-core": "^3.0.
|
|
33
|
+
"@sikt/sds-core": "^3.0.2",
|
|
19
34
|
"@sikt/sds-form": "^2.1.0",
|
|
20
|
-
"@sikt/sds-
|
|
35
|
+
"@sikt/sds-icons": "^2.0.1",
|
|
36
|
+
"@sikt/sds-tokens": "^1.0.1"
|
|
21
37
|
},
|
|
22
38
|
"peerDependencies": {
|
|
23
39
|
"@types/react": "^18.0.0",
|