@sikt/sds-toggle 6.1.2 → 6.1.3
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 +6 -0
- package/dist/index.css +6 -6
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
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
|
+
## [6.1.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.2...@sikt/sds-toggle@6.1.3) (2025-10-09)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- update border color token ([629a582](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/629a582023f405acdec8bede427e285847795891))
|
|
10
|
+
|
|
5
11
|
## [6.1.2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.1...@sikt/sds-toggle@6.1.2) (2025-09-09)
|
|
6
12
|
|
|
7
13
|
### Bug Fixes
|
package/dist/index.css
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
--toggle-padding: var(--sds-space-padding-minimal);
|
|
8
8
|
--toggle-thumb-offset: var(--toggle-padding);
|
|
9
9
|
--toggle-track-background-color: var(--sds-color-layout-background-default);
|
|
10
|
-
--toggle-track-border-color: var(
|
|
11
|
-
--toggle-thumb-background-color: var(
|
|
10
|
+
--toggle-track-border-color: var(--sds-color-layout-divider-strong);
|
|
11
|
+
--toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
|
|
12
12
|
--toggle-thumb-color: var(--sds-color-text-on-strong);
|
|
13
13
|
--toggle-thumb-position: 0;
|
|
14
14
|
}
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
gap: var(--sds-space-padding-small);
|
|
20
20
|
}
|
|
21
21
|
.sds-toggle-switch:hover {
|
|
22
|
-
--toggle-track-border-color: var(
|
|
23
|
-
--toggle-thumb-background-color: var(
|
|
22
|
+
--toggle-track-border-color: var(--sds-color-layout-divider-strong);
|
|
23
|
+
--toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
|
|
24
24
|
}
|
|
25
25
|
.sds-toggle-switch:active {
|
|
26
|
-
--toggle-track-border-color: var(
|
|
27
|
-
--toggle-thumb-background-color: var(
|
|
26
|
+
--toggle-track-border-color: var(--sds-color-layout-divider-strong);
|
|
27
|
+
--toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
|
|
28
28
|
}
|
|
29
29
|
.sds-toggle-switch--checked {
|
|
30
30
|
--toggle-track-background-color: var( --sds-color-interaction-primary-strong-default );
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-button.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-typography-fontsize-1200);\n --toggle-thumb-size: var(--sds-typography-fontsize-300);\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-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\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 align-items: center;\n background-color: var(--toggle-thumb-background-color);\n border-radius: var(--sds-space-border-radius-full);\n display: inline-flex;\n font-size: var(--sds-typography-fontsize-100);\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 transition: all var(--toggle-transition-duration);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > .sds-icon {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\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-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n line-height: var(--sds-typography-body-l-lineheight);\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 display: block;\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-typography-fontsize-700);\n width: var(--sds-typography-fontsize-700);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n flex-shrink: 0;\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 {\n --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n --toggle-segment-border: var(--toggle-segment-border-width) solid\n var(--sds-color-interaction-primary-strong-default);\n}\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n gap: var(--toggle-segment-border-width);\n grid-auto-flow: column;\n padding: var(--sds-space-padding-minimal);\n outline: var(--toggle-segment-border);\n outline-offset: calc(var(--toggle-segment-border-width) * -1);\n }\n\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-minimal);\n display: flex;\n justify-content: center;\n padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\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\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-segment__label {\n display: flex;\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n min-width: 44px;\n position: relative;\n width: 100%;\n }\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":["../src/toggle-switch.pcss","../src/toggle-button.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-typography-fontsize-1200);\n --toggle-thumb-size: var(--sds-typography-fontsize-300);\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(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\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(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\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-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\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 align-items: center;\n background-color: var(--toggle-thumb-background-color);\n border-radius: var(--sds-space-border-radius-full);\n display: inline-flex;\n font-size: var(--sds-typography-fontsize-100);\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 transition: all var(--toggle-transition-duration);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > .sds-icon {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\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-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n line-height: var(--sds-typography-body-l-lineheight);\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 display: block;\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-typography-fontsize-700);\n width: var(--sds-typography-fontsize-700);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n flex-shrink: 0;\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 {\n --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n --toggle-segment-border: var(--toggle-segment-border-width) solid\n var(--sds-color-interaction-primary-strong-default);\n}\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n gap: var(--toggle-segment-border-width);\n grid-auto-flow: column;\n padding: var(--sds-space-padding-minimal);\n outline: var(--toggle-segment-border);\n outline-offset: calc(var(--toggle-segment-border-width) * -1);\n }\n\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-minimal);\n display: flex;\n justify-content: center;\n padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\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\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-segment__label {\n display: flex;\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n min-width: 44px;\n position: relative;\n width: 100%;\n }\n\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":";AAAA,CAAC;AACC,gCAA8B,IAAI;AAClC,wBAAsB,IAAI;AAC1B,uBAAqB,IAAI;AACzB,yBAAuB,IAAI;AAC3B,oBAAkB,IAAI;AACtB,yBAAuB,IAAI;AAC3B,mCAAiC,IAAI;AACrC,+BAA6B,IAAI;AACjC,mCAAiC,IAAI;AACrC,wBAAsB,IAAI;AAC1B,2BAAyB;AAC3B;AAEE,CAAC;AACC,eAAa;AACb,UAAQ;AACR,WAAS;AACT,OAAK,IAAI;AACX;AAEA,CArBD,iBAqBmB;AAChB,+BAA6B,IAAI;AACjC,mCAAiC,IAAI;AACvC;AAEA,CA1BD,iBA0BmB;AAChB,+BAA6B,IAAI;AACjC,mCAAiC,IAAI;AACvC;AAEA,CAAC;AACC,mCAAiC,KAC/B;AAEF,+BAA6B,IAAI;AACjC,mCAAiC,IAAI;AACrC,wBAAsB,IAAI;AAC1B,2BAAyB,MACvB,IAAI,sBAAsB,EAAE,IAAI,qBAAqB,EAAE,EAAE,EACvD,IAAI;AAEV;AAEA,CAbC,0BAa0B;AACzB,CAdD,0BAc4B;AACzB,mCAAiC,KAC/B;AAEJ;AAEF,CApBC,0BAoB0B;AACvB,mCAAiC,KAC/B;AAEF,+BAA6B,KAC3B;AAEJ;AAEF,CA7BC,0BA6B0B;AACvB,mCAAiC,KAC/B;AAEF,+BAA6B,KAC3B;AAEJ;AAEF,CAAC;AACC,eAAa;AACb,WAAS;AACT,WAAS,KAAK,IAAI,2BAA2B,EAAE,IAAI,wBAAwB;AAC3E,YAAU;AACZ;AAEA,CAAC;AACC,eAAa;AACb,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACf;AAEA,CAAC;AACC,sBAAoB;AACZ,cAAY;AACpB,UAAQ;AACR,oBAAkB,IAAI;AACtB,UAAQ,IAAI,uBAAuB,MAAM,IAAI;AAC7C,iBAAe,IAAI;AACnB,UAAQ,KACN,IAAI,qBAAqB,EAAE,KAAK,EAAE,EAAE,IAAI;AAE1C,SAAO,IAAI;AACX,WAAS,IAAI;AACb,cACE,iBAAiB,IAAI,6BAA6B,EAClD,aAAa,IAAI;AACrB;AAEA,CAjBC,wBAiBwB;AACrB,WAAS,IAAI;AACb,kBAAgB;AAClB;AAEF,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,YAAU;AACV,QAAM,IAAI;AACV,UAAQ,IAAI;AACZ,SAAO,IAAI;AACX,cAAY,IAAI,IAAI;AACpB,aAAW,WAAW,IAAI;AAC1B,WAAS,IAAI;AACf;AAEA,CAhBC,yBAgByB,EAAE,CAAC;AACzB,cAAY,IAAI,IAAI;AACpB,SAAO,IAAI;AACb;;;AC/HJ,CAAC;AACC,oCAAkC;AAClC,gCAA8B,KAC5B;AAEF,yBAAuB,IAAI;AAC3B,2BAAyB;AAEzB,WAAS;AACX;AAEE,CAAC;AACC,eAAa;AACb,oBAAkB,IAAI;AACtB,UAAQ,IAAI,mCAAmC,MAC7C,IAAI;AACN,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,UAAQ;AACR,WAAS;AACT,OAAK,IAAI;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,KACP,IAAI,2BAA2B,EAAE,IAAI;AAEvC,WAAS,IAAI;AACb,kBAAgB;AAChB,uBAAqB;AACb,eAAa;AACvB;AAEA,CAAC;AACG,WAAS;AACT,WAAS,EAAE,IAAI;AACjB;AAEF,CA3BC,wBA2BwB;AACrB,gCAA8B,KAC5B;AAEJ;AAEF,CAjCC,wBAiCwB;AACrB,gCAA8B,KAC5B;AAEJ;AAEF,CAAC;AACG,oCAAkC,KAChC;AAEF,gCAA8B,IAAI;AAClC,yBAAuB,IAAI;AAC7B;AAEF,CARC,iCAQiC;AAC5B,oCAAkC,KAChC;AAEJ;AAEJ,CAdC,iCAciC;AAC5B,oCAAkC,KAChC;AAEJ;AAEJ,CApBC,iCAoBiC;AAC5B,2BAAyB,IAAI;AAC/B;AAEJ,CAAC;AACC,UAAQ,IAAI;AACZ,SAAO,IAAI;AACX,aAAW,QAAQ,MAAM,OAAO;AAChC,cAAY,UAAU,KAAK;AAC3B,eAAa;AACf;AAEA,CAAC;AACG,aAAW,QAAQ,MAAM,OAAO;AAClC;AAEF,CAAC;AACC,UAAQ;AACR,YAAU;AACV,WAAS;AACX;AAEA,CANC,wBAMwB,eAAe,EAAE,CAjFzC;AAkFG,gCAA8B,KAC5B;AAEF,2BAAyB,IAAI;AAC/B;AAEF,CAbC,wBAawB,eAAe,EAAE,CAjDzC;AAkDK,oCAAkC,KAChC;AAEJ;;;ACvGN,CAAC;AACC,iCAA+B,IAAI;AACnC,2BAAyB,IAAI,+BAA+B,MAC1D,IAAI;AACR;AAEE,CAAC,+BAA+B,CAAC;AAC/B,WAAS;AACT,eAAa;AACf;AAEA,CALC,+BAK+B,CALC,6BAK6B,CAAC;AAC3D,SAAO;AACT;AAEF,CAAC;AACC,iBAAe,IAAI;AACnB,WAAS;AACT,OAAK,IAAI;AACT,kBAAgB;AAChB,WAAS,IAAI;AACb,WAAS,IAAI;AACb,kBAAgB,KAAK,IAAI,+BAA+B,EAAE;AAC5D;AAEA,CAAC,0BAA0B,CAV1B;AAWC,qBAAmB;AACrB;AAEA,CAAC;AACC,eAAa;AACb,iBAAe,IAAI;AACnB,WAAS;AACT,mBAAiB;AACjB,WAAS,IAAI,6BAA6B,IAAI;AAChD;AAEA,CARC,0BAQ0B;AACvB,cAAY,IAAI;AAClB;AAEF,CAZC,0BAY0B;AACvB,cAAY,IAAI;AAClB;AAEF,CAAC;AACG,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AAEF,CALC,mCAKmC;AAC9B,oBAAkB,IAAI;AACxB;AAEJ,CATC,mCASmC;AAC9B,oBAAkB,IAAI;AACxB;AAEJ,CA7BC,0BA6B0B,KAAK;AAC5B,WAAS,IAAI;AACf;AAEF,CAAC;AACC,WAAS;AACT,UAAQ;AACR,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,mBAAiB;AACjB,eAAa,IAAI;AACjB,aAAW;AACX,YAAU;AACV,SAAO;AACT;AAEA,CAAC;AACC,WAAS;AACT,YAAU;AACV,kBAAgB;AAClB;","names":[]}
|