@felleslosninger/minid-elements 0.0.95 → 0.0.97
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/dist/components/menu.component.d.ts.map +1 -1
- package/dist/components/menu.js +8 -0
- package/dist/components/menu.js.map +1 -1
- package/dist/components/phone-input.component.d.ts.map +1 -1
- package/dist/components/phone-input.js +5 -7
- package/dist/components/phone-input.js.map +1 -1
- package/dist/mixins/tailwind.mixin.js +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../src/components/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;
|
|
1
|
+
{"version":3,"file":"menu.component.d.ts","sourceRoot":"","sources":["../../src/components/menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,SAAS,CAAC;KACvB;CACF;;AA2BD;;GAEG;AACH,qBACa,SAAU,SAAQ,cAA0B;;IACvD;;OAEG;IAEH,WAAW,EAAG,eAAe,CAAC;IAE9B;;OAEG;IAEH,WAAW,EAAG,gBAAgB,CAAC;IAE/B;;OAEG;IAEH,QAAQ,EAAG,gBAAgB,CAAC;IAE5B;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,OAAO,EAAE,UAAU,GAAG,UAAU,CAAc;IAG9C,aAAa,UAAS;IAEtB,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B,iBAAiB;IAKjB,OAAO,CAAC,WAAW;IAoCnB,iBAAiB;IAgBjB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;IASlB;;;OAGG;IACH,MAAM,GAAI,UAAU,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,UAUlD;IAEF,WAAW;IAMX;;OAEG;IACH,qBAAqB;IAQrB,WAAW;IAQX;;;OAGG;IACH,cAAc;IAMd;;;OAGG;IACH,cAAc,CAAC,IAAI,EAAE,aAAa;IAUlC,gBAAgB;IAMP,MAAM;CAkDhB"}
|
package/dist/components/menu.js
CHANGED
|
@@ -34,6 +34,14 @@ const styles = [
|
|
|
34
34
|
max-height: var(--max-height);
|
|
35
35
|
overflow-y: auto;
|
|
36
36
|
}
|
|
37
|
+
|
|
38
|
+
.border-b {
|
|
39
|
+
border-bottom: 1px solid var(--fds-semantic-border-input-default);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.filter-input:focus-visible {
|
|
43
|
+
box-shadow: 0 0 0 3px #00347d;
|
|
44
|
+
}
|
|
37
45
|
`
|
|
38
46
|
];
|
|
39
47
|
let MinidMenu = class extends styled(LitElement, styles) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sources":["../../src/components/menu.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-menu': MinidMenu;\n }\n}\n\nconst styles = [\n css`\n :host {\n --max-height: none;\n }\n\n .panel {\n padding: 0;\n }\n\n ul {\n max-height: var(--max-height);\n overflow-y: auto;\n }\n `,\n];\n\n/**\n * @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n /**\n * @ignore\n */\n @query('slot')\n defaultSlot!: HTMLSlotElement;\n\n /**\n * @ignore\n */\n @query('.filter-input')\n filterInput!: HTMLInputElement;\n\n /**\n * @ignore\n */\n @query('.item-list')\n itemList!: HTMLUListElement;\n\n /**\n * Adds an input element that filters selectable menu items\n */\n @property({ type: Boolean })\n searchable = false;\n\n /**\n * Wether the menu should be styled as a dropdown or a combobox\n */\n @property()\n variant: 'combobox' | 'dropdown' = 'dropdown';\n\n @state()\n emptyItemList = false;\n\n protected firstUpdated(): void {\n this.getAllItems().forEach((item) => {\n item.variant = this.variant;\n item.addEventListener('mouseenter', () => {\n this.setCurrentItem(item);\n });\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n const composedPath = event.composedPath();\n const target = composedPath.find((el) =>\n menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n );\n\n if (!target) return;\n\n const closestMenu = composedPath.find(\n (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n );\n const clickHasSubmenu = closestMenu !== this;\n\n // Make sure we're the menu thats supposed to be handling the click event.\n if (clickHasSubmenu) {\n return;\n }\n\n // This isn't true. But we use it for TypeScript checks below.\n const item = target as MinidMenuItem;\n\n // if (item.type === 'checkbox') {\n // item.checked = !item.checked;\n // }\n\n this.dispatchEvent(\n new CustomEvent('mid-select', {\n bubbles: true,\n composed: true,\n detail: { item },\n })\n );\n }\n\n handleFilterItems() {\n this.filter((item) =>\n item.innerText\n .toLowerCase()\n .includes(this.filterInput.value.toLowerCase())\n );\n\n const items = this.getAllSelectableItems();\n this.emptyItemList = items.length === 0;\n this.setCurrentItem(items[0]);\n }\n\n #scrollOptionIntoView(item: MinidMenuItem): void {\n scrollIntoView(item, this.itemList, 'vertical', 'auto');\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter or space\n if (event.key === 'Enter' || event.key === ' ') {\n const item = this.getCurrentItem();\n event.preventDefault();\n event.stopPropagation();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Move the selection when pressing down or up\n else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllSelectableItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n event.stopPropagation();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n this.#scrollOptionIntoView(items[index]);\n\n if (!this.searchable) {\n items[index].focus();\n }\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as MinidMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllSelectableItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'mid-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /**\n * Pass a filter function to enable/disable menu items in the menu\n * @type {(item: MinidMenuItem) => boolean}\n */\n filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n this.getAllItems().forEach((item) => {\n if (filterFn(item)) {\n item.removeAttribute('hidden');\n item.removeAttribute('inert');\n } else {\n item.setAttribute('inert', 'true');\n item.setAttribute('hidden', 'true');\n }\n });\n };\n\n clearFilter() {\n this.filterInput.value = '';\n this.itemList.scrollTop = 0;\n this.filterInput.dispatchEvent(new Event('input'));\n }\n\n /**\n * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n */\n getAllSelectableItems() {\n return [\n ...(this.defaultSlot.assignedElements({\n flatten: true,\n }) as MinidMenuItem[]),\n ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n }\n\n getAllItems() {\n return [\n ...(this.defaultSlot.assignedElements({\n flatten: true,\n }) as MinidMenuItem[]),\n ].filter((el) => this.isMenuItem(el));\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllSelectableItems().find(\n (i) => i.getAttribute('tabindex') === '0'\n );\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: MinidMenuItem) {\n const items = this.getAllSelectableItems();\n\n // Update tab indexes\n items.forEach((i) => {\n i.setActive(i === item);\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n focusSearchField() {\n if (this.searchable) {\n this.filterInput.focus();\n }\n }\n\n override render() {\n const combobox = this.variant === 'combobox';\n const dropdown = this.variant === 'dropdown';\n return html`\n <div\n class=\"${classMap({\n panel: true,\n 'fds-dropdownmenu': dropdown,\n 'fds-dropdownmenu--md': dropdown,\n 'fds-box--md-shadow': combobox,\n 'fds-box--default-border-color': combobox,\n 'fds-box--md-border-radius': combobox,\n 'fds-box--default-background': combobox,\n 'fds-combobox__options-wrapper': combobox,\n 'fds-combobox--md': combobox,\n })}\"\n >\n ${!this.searchable\n ? nothing\n : html`<div\n class=\"filter-search flex items-center gap-2 border-b p-2\"\n >\n <mid-icon\n slot=\"prefix\"\n class=\"text-2xl\"\n library=\"system\"\n name=\"magnifying-glass\"\n >\n </mid-icon>\n <input\n @input=${this.handleFilterItems}\n @keydown=${this.handleKeyDown}\n class=\"filter-input h-8 w-full rounded px-2\"\n type=\"search\"\n />\n </div>`}\n <ul class=\"item-list p-2\">\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.emptyItemList\n ? html`<div class=\"p-2\">Fant ingen treff</div>`\n : nothing}\n </ul>\n </div>\n `;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menu.js","sources":["../../src/components/menu.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin.ts';\nimport { MinidMenuItem } from './menu-item.component';\nimport { scrollIntoView } from '../internal/scroll';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-menu': MinidMenu;\n }\n}\n\nconst styles = [\n css`\n :host {\n --max-height: none;\n }\n\n .panel {\n padding: 0;\n }\n\n ul {\n max-height: var(--max-height);\n overflow-y: auto;\n }\n\n .border-b {\n border-bottom: 1px solid var(--fds-semantic-border-input-default);\n }\n\n .filter-input:focus-visible {\n box-shadow: 0 0 0 3px #00347d;\n }\n `,\n];\n\n/**\n * @event {{ detail: { item: MidMenuItem } }} mid-select - Emitted when a menu item is selected.\n */\n@customElement('mid-menu')\nexport class MinidMenu extends styled(LitElement, styles) {\n /**\n * @ignore\n */\n @query('slot')\n defaultSlot!: HTMLSlotElement;\n\n /**\n * @ignore\n */\n @query('.filter-input')\n filterInput!: HTMLInputElement;\n\n /**\n * @ignore\n */\n @query('.item-list')\n itemList!: HTMLUListElement;\n\n /**\n * Adds an input element that filters selectable menu items\n */\n @property({ type: Boolean })\n searchable = false;\n\n /**\n * Wether the menu should be styled as a dropdown or a combobox\n */\n @property()\n variant: 'combobox' | 'dropdown' = 'dropdown';\n\n @state()\n emptyItemList = false;\n\n protected firstUpdated(): void {\n this.getAllItems().forEach((item) => {\n item.variant = this.variant;\n item.addEventListener('mouseenter', () => {\n this.setCurrentItem(item);\n });\n });\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.setAttribute('role', 'menu');\n }\n\n private handleClick(event: MouseEvent) {\n const menuItemTypes = ['menuitem', 'menuitemcheckbox'];\n\n const composedPath = event.composedPath();\n const target = composedPath.find((el) =>\n menuItemTypes.includes((el as HTMLElement)?.getAttribute?.('role') || '')\n );\n\n if (!target) return;\n\n const closestMenu = composedPath.find(\n (el) => (el as HTMLElement)?.getAttribute?.('role') === 'menu'\n );\n const clickHasSubmenu = closestMenu !== this;\n\n // Make sure we're the menu thats supposed to be handling the click event.\n if (clickHasSubmenu) {\n return;\n }\n\n // This isn't true. But we use it for TypeScript checks below.\n const item = target as MinidMenuItem;\n\n // if (item.type === 'checkbox') {\n // item.checked = !item.checked;\n // }\n\n this.dispatchEvent(\n new CustomEvent('mid-select', {\n bubbles: true,\n composed: true,\n detail: { item },\n })\n );\n }\n\n handleFilterItems() {\n this.filter((item) =>\n item.innerText\n .toLowerCase()\n .includes(this.filterInput.value.toLowerCase())\n );\n\n const items = this.getAllSelectableItems();\n this.emptyItemList = items.length === 0;\n this.setCurrentItem(items[0]);\n }\n\n #scrollOptionIntoView(item: MinidMenuItem): void {\n scrollIntoView(item, this.itemList, 'vertical', 'auto');\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n // Make a selection when pressing enter or space\n if (event.key === 'Enter' || event.key === ' ') {\n const item = this.getCurrentItem();\n event.preventDefault();\n event.stopPropagation();\n\n // Simulate a click to support @click handlers on menu items that also work with the keyboard\n item?.click();\n }\n\n // Move the selection when pressing down or up\n else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n const items = this.getAllSelectableItems();\n const activeItem = this.getCurrentItem();\n let index = activeItem ? items.indexOf(activeItem) : 0;\n\n if (items.length > 0) {\n event.preventDefault();\n event.stopPropagation();\n\n if (event.key === 'ArrowDown') {\n index++;\n } else if (event.key === 'ArrowUp') {\n index--;\n } else if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = items.length - 1;\n }\n\n if (index < 0) {\n index = items.length - 1;\n }\n if (index > items.length - 1) {\n index = 0;\n }\n\n this.setCurrentItem(items[index]);\n this.#scrollOptionIntoView(items[index]);\n\n if (!this.searchable) {\n items[index].focus();\n }\n }\n }\n }\n\n private handleMouseDown(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (this.isMenuItem(target)) {\n this.setCurrentItem(target as MinidMenuItem);\n }\n }\n\n private handleSlotChange() {\n const items = this.getAllSelectableItems();\n\n // Reset the roving tab index when the slotted items change\n if (items.length > 0) {\n this.setCurrentItem(items[0]);\n }\n }\n\n private isMenuItem(item: HTMLElement) {\n return (\n item.tagName.toLowerCase() === 'mid-menu-item' ||\n ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n item.getAttribute('role') ?? ''\n )\n );\n }\n\n /**\n * Pass a filter function to enable/disable menu items in the menu\n * @type {(item: MinidMenuItem) => boolean}\n */\n filter = (filterFn: (item: MinidMenuItem) => boolean) => {\n this.getAllItems().forEach((item) => {\n if (filterFn(item)) {\n item.removeAttribute('hidden');\n item.removeAttribute('inert');\n } else {\n item.setAttribute('inert', 'true');\n item.setAttribute('hidden', 'true');\n }\n });\n };\n\n clearFilter() {\n this.filterInput.value = '';\n this.itemList.scrollTop = 0;\n this.filterInput.dispatchEvent(new Event('input'));\n }\n\n /**\n * @internal Gets all slotted menu items, ignoring dividers, headers, and other elements.\n */\n getAllSelectableItems() {\n return [\n ...(this.defaultSlot.assignedElements({\n flatten: true,\n }) as MinidMenuItem[]),\n ].filter((el) => !(el.inert || !this.isMenuItem(el)));\n }\n\n getAllItems() {\n return [\n ...(this.defaultSlot.assignedElements({\n flatten: true,\n }) as MinidMenuItem[]),\n ].filter((el) => this.isMenuItem(el));\n }\n\n /**\n * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n */\n getCurrentItem() {\n return this.getAllSelectableItems().find(\n (i) => i.getAttribute('tabindex') === '0'\n );\n }\n\n /**\n * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n */\n setCurrentItem(item: MinidMenuItem) {\n const items = this.getAllSelectableItems();\n\n // Update tab indexes\n items.forEach((i) => {\n i.setActive(i === item);\n i.setAttribute('tabindex', i === item ? '0' : '-1');\n });\n }\n\n focusSearchField() {\n if (this.searchable) {\n this.filterInput.focus();\n }\n }\n\n override render() {\n const combobox = this.variant === 'combobox';\n const dropdown = this.variant === 'dropdown';\n return html`\n <div\n class=\"${classMap({\n panel: true,\n 'fds-dropdownmenu': dropdown,\n 'fds-dropdownmenu--md': dropdown,\n 'fds-box--md-shadow': combobox,\n 'fds-box--default-border-color': combobox,\n 'fds-box--md-border-radius': combobox,\n 'fds-box--default-background': combobox,\n 'fds-combobox__options-wrapper': combobox,\n 'fds-combobox--md': combobox,\n })}\"\n >\n ${!this.searchable\n ? nothing\n : html`<div\n class=\"filter-search flex items-center gap-2 border-b p-2\"\n >\n <mid-icon\n slot=\"prefix\"\n class=\"text-2xl\"\n library=\"system\"\n name=\"magnifying-glass\"\n >\n </mid-icon>\n <input\n @input=${this.handleFilterItems}\n @keydown=${this.handleKeyDown}\n class=\"filter-input h-8 w-full rounded px-2\"\n type=\"search\"\n />\n </div>`}\n <ul class=\"item-list p-2\">\n <slot\n @slotchange=${this.handleSlotChange}\n @click=${this.handleClick}\n @keydown=${this.handleKeyDown}\n @mousedown=${this.handleMouseDown}\n ></slot>\n ${this.emptyItemList\n ? html`<div class=\"p-2\">Fant ingen treff</div>`\n : nothing}\n </ul>\n </div>\n `;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAU/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;
|
|
1
|
+
{"version":3,"file":"phone-input.component.d.ts","sourceRoot":"","sources":["../../src/components/phone-input.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAIrD,OAAO,EAIL,WAAW,EAEZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAU/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,eAAe,CAAC;KACpC;CACF;;AAuCD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,oBAEpC;;IAMC;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,WAAW,CAAC;IAGtB,QAAQ,UAAS;IAEjB,kBAAkB;IAMlB,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAQzC,iBAAiB,IAAI,IAAI;IAkBzB,IAAI,aAAa,yCAEhB;IAED,IAAI,cAAc,0CAEjB;IAED,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAkBhB,OAAO,CAAC,mBAAmB,CAkBzB;IAEF,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAUzB,KAAK;IAWL,mBAAmB;IAmBV,MAAM;CA8EhB"}
|
|
@@ -54,13 +54,10 @@ const styles = [
|
|
|
54
54
|
border-bottom-left-radius: var(--fds-border_radius-medium);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.fds-focus:focus-within
|
|
58
|
-
|
|
59
|
-
outline:
|
|
60
|
-
|
|
61
|
-
outline-offset: var(--fds-focus-border-width);
|
|
62
|
-
box-shadow: 0 0 0 var(--fds-focus-border-width)
|
|
63
|
-
var(--fds-semantic-border-focus-boxshadow);
|
|
57
|
+
.fds-focus:focus-within,
|
|
58
|
+
.fds-focus:focus-visible {
|
|
59
|
+
outline: none;
|
|
60
|
+
box-shadow: 0 0 0 3px #00347d;
|
|
64
61
|
}
|
|
65
62
|
`
|
|
66
63
|
];
|
|
@@ -219,6 +216,7 @@ let MinidPhoneInput = class extends FormControllerMixin(
|
|
|
219
216
|
"form-control": true,
|
|
220
217
|
"fds-paragraph": true,
|
|
221
218
|
"fds-textfield": true,
|
|
219
|
+
"flex-1": true,
|
|
222
220
|
"fds-paragraph--sm": sm,
|
|
223
221
|
"fds-paragraph--md": md,
|
|
224
222
|
"fds-paragraph--lg": lg,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n AsYouType,\n formatIncompletePhoneNumber,\n getCountryCallingCode,\n CountryCode,\n parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n onChange,\n onKeyDown,\n templateFormatter,\n templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-phone-input': MinidPhoneInput;\n }\n}\n\nconst styles = [\n css`\n :host {\n display: flex;\n }\n\n .country-code,\n .phone-number {\n outline: none;\n box-shadow: none;\n background-color: transparent;\n }\n\n .phone-number {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .country-code {\n border-right: 1px solid currentColor;\n }\n\n .country-button {\n border: 1px solid var(--fds-semantic-border-input-default);\n border-right: 0;\n border-top-left-radius: var(--fds-border_radius-medium);\n border-bottom-left-radius: var(--fds-border_radius-medium);\n }\n\n .fds-focus:focus-within {\n --fds-focus-border-width: 3px;\n outline: var(--fds-focus-border-width) solid\n var(--fds-semantic-border-focus-outline);\n outline-offset: var(--fds-focus-border-width);\n box-shadow: 0 0 0 var(--fds-focus-border-width)\n var(--fds-semantic-border-focus-boxshadow);\n }\n `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part form-control - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n styled(LitElement, styles)\n) {\n #formatter = new AsYouType();\n #skipCountryUpdate = false; // avoids unwanted update loop\n #currentEvent = new Event(''); // the event to be emitted after value is set\n #currentTemplate = '';\n\n /**\n * @ignore\n */\n @query('.phone-number')\n input!: HTMLInputElement;\n\n /**\n * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n *\n */\n @property({ reflect: true })\n value = '';\n\n /**\n * The phone number without the country code prefix. Example: `\"99999999\"`\n */\n @property({ reflect: true })\n nationalnumber = '';\n\n /**\n * The country code of the current phone number value. Example: `\"+47\"`\n */\n @property({ reflect: true })\n countrycode = '';\n\n /**\n * Label for the phone input.\n * Passed label will be encapsulated by a label element.\n */\n @property()\n label = '';\n\n /**\n * Hide label visually. Still available for screen readers\n */\n @property({ type: Boolean })\n hidelabel = false;\n\n /**\n * The country selected. A two letter ISO country code like: `\"NO\"`\n */\n @property({ reflect: true })\n country?: CountryCode;\n\n @state()\n hasFocus = false;\n\n handleCountryClick() {\n this.dispatchEvent(\n new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n );\n }\n\n handleCountryKeyDown(event: KeyboardEvent) {\n if ([' ', 'Enter'].includes(event.key)) {\n this.dispatchEvent(\n new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n );\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.#formatter.input(this.value);\n this.country = this.#formatter.getCountry() ?? this.country;\n this.countrycode = this.country\n ? `+${getCountryCallingCode(this.country)}`\n : '+';\n\n this.value = formatIncompletePhoneNumber(this.value);\n this.value ??= this.countrycode;\n this.nationalnumber = this.removePhonePrefix(this.value);\n\n setTimeout(() => {\n this.input.value = `${this.countrycode}${this.nationalnumber}`;\n }, 0);\n }\n\n get parseTemplate() {\n return templateParser(this.#currentTemplate, parsePhoneNumberCharacter);\n }\n\n get formatTemplate() {\n return templateFormatter(this.#currentTemplate);\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.dispatchEvent(\n new Event('mid-blur', { bubbles: true, composed: true })\n );\n }\n\n private handleChange(event: Event) {\n // Event is dispatched after value is set\n this.#currentEvent = new Event('mid-change', {\n bubbles: true,\n composed: true,\n });\n\n this.setValue(event);\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n event.preventDefault();\n return;\n }\n\n onKeyDown(\n event,\n this.input,\n this.parseTemplate,\n this.formatTemplate,\n this.valueChangeCallback\n );\n }\n\n private handleInput(event: InputEvent) {\n // Event is dispatched after value is set\n this.#currentEvent = new Event('mid-input', {\n composed: true,\n bubbles: true,\n });\n this.setValue(event);\n }\n\n private setValue(event: Event) {\n this.#formatter.reset();\n\n if (!this.input.value.startsWith('+')) {\n this.input.value = `+${this.input.value}`;\n }\n this.#formatter.input(this.input.value);\n this.#currentTemplate = this.#formatter.getTemplate();\n\n onChange(\n event,\n this.input,\n this.parseTemplate,\n this.formatTemplate,\n this.valueChangeCallback\n );\n }\n\n private valueChangeCallback = (value: string) => {\n const country =\n value.length < 2\n ? undefined\n : (this.#formatter.getCountry() ?? this.country);\n\n if (country !== this.country) {\n this.country = country;\n this.countrycode = this.country\n ? `+${getCountryCallingCode(this.country)}`\n : '+';\n this.#skipCountryUpdate = true;\n }\n\n this.value = value;\n this.nationalnumber = this.removePhonePrefix(value);\n this.dispatchEvent(this.#currentEvent);\n this.setFormValue(this.value);\n };\n\n private handleFocus() {\n this.hasFocus = true;\n this.dispatchEvent(\n new Event('mid-focus', { composed: true, bubbles: true })\n );\n }\n\n private removePhonePrefix(value: string) {\n if (this.countrycode) {\n value = value.slice(this.countrycode.length);\n if (value[0] === ' ') {\n value = value.slice(1);\n }\n }\n return value;\n }\n\n focus() {\n this.input.focus();\n setTimeout(() => {\n this.input.setSelectionRange(\n (this.countrycode?.length ?? 0) + 1,\n this.input.value.length\n );\n }, 0);\n }\n\n @watch('country', { waitUntilFirstUpdate: true })\n handleCountryChange() {\n if (this.#skipCountryUpdate) {\n this.#skipCountryUpdate = false;\n return;\n }\n\n this.#formatter = new AsYouType(this.country);\n this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n this.countrycode = this.country\n ? `+${getCountryCallingCode(this.country)}`\n : '+';\n this.input.value = formatIncompletePhoneNumber(\n `${this.countrycode}${this.nationalnumber}`\n );\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n override render() {\n const lg = false;\n const md = true;\n const sm = false;\n\n return html`\n <div\n part=\"form-control\"\n class=\"${classMap({\n 'form-control': true,\n 'fds-paragraph': true,\n 'fds-textfield': true,\n 'fds-paragraph--sm': sm,\n 'fds-paragraph--md': md,\n 'fds-paragraph--lg': lg,\n 'fds-textfield--sm': sm,\n 'fds-textfield--md': md,\n 'fds-textfield--lg': lg,\n })}\"\n >\n ${!this.label\n ? nothing\n : html`<label\n part=\"label\"\n for=\"input\"\n class=\"${classMap({\n 'sr-only': this.hidelabel,\n 'fds-label': true,\n 'fds-label--medium-weight': true,\n 'fds-textfield__label': true,\n 'fds-label--sm': sm,\n 'fds-label--md': md,\n 'fds-label--lg': lg,\n })}\"\n >\n ${this.label}\n </label>`}\n <div part=\"base\" class=\"flex\">\n <button\n part=\"country-button\"\n class=\"country-button fds-focus flex h-full items-center border pl-3\"\n iconstyled\n variant=\"tertiary\"\n @click=${this.handleCountryClick}\n @keydown=${this.handleCountryKeyDown}\n >\n ${this.country\n ? html`\n <mid-icon\n class=\"h-4 w-6 overflow-hidden rounded\"\n library=\"country\"\n name=\"${this.country}\"\n ></mid-icon>\n `\n : html`<div\n class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n ></div>`}\n <mid-icon name=\"chevron-down\"></mid-icon>\n </button>\n\n <input\n id=\"input\"\n class=\"phone-number fds-textfield__field fds-textfield__input fds-focus\"\n part=\"phone-number\"\n type=\"tel\"\n autocomplete=\"tel\"\n value=${this.value}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @keydown=${this.handleKeydown}\n @change=${this.handleChange}\n />\n </div>\n </div>\n `;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,oBAAA,eAAA;AA2BA,MAAM,SAAS;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCF;AAgBO,IAAM,kBAAN,cAA8B;AAAA,EACnC,OAAO,YAAY,MAAM;AAC3B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAGL,iBAAA,MAAA,YAAa,IAAI,UAAU,CAAA;AACN,iBAAA,MAAA,oBAAA,KAAA;AACL,iBAAA,MAAA,eAAA,IAAI,MAAM,EAAE,CAAA;AACT,iBAAA,MAAA,kBAAA,EAAA;AAaX,SAAA,QAAA;AAMS,SAAA,iBAAA;AAMH,SAAA,cAAA;AAON,SAAA,QAAA;AAMI,SAAA,YAAA;AASD,SAAA,WAAA;AAqGH,SAAA,sBAAsB,CAAC,UAAkB;AACzC,YAAA,UACJ,MAAM,SAAS,IACX,SACC,aAAK,MAAA,UAAA,EAAW,WAAW,KAAK,KAAK;AAExC,UAAA,YAAY,KAAK,SAAS;AAC5B,aAAK,UAAU;AACV,aAAA,cAAc,KAAK,UACpB,IAAI,sBAAsB,KAAK,OAAO,CAAC,KACvC;AACJ,qBAAA,MAAK,oBAAqB,IAAA;AAAA,MAAA;AAG5B,WAAK,QAAQ;AACR,WAAA,iBAAiB,KAAK,kBAAkB,KAAK;AAC7C,WAAA,cAAc,mBAAK,aAAa,CAAA;AAChC,WAAA,aAAa,KAAK,KAAK;AAAA,IAC9B;AAAA,EAAA;AAAA,EArHA,qBAAqB;AACd,SAAA;AAAA,MACH,IAAI,YAAY,qBAAqB,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,IACxE;AAAA,EAAA;AAAA,EAGF,qBAAqB,OAAsB;AACzC,QAAI,CAAC,KAAK,OAAO,EAAE,SAAS,MAAM,GAAG,GAAG;AACjC,WAAA;AAAA,QACH,IAAI,YAAY,qBAAqB,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,MACxE;AAAA,IAAA;AAAA,EACF;AAAA,EAGF,oBAA0B;AACxB,UAAM,kBAAkB;AAEnB,iBAAA,MAAA,UAAA,EAAW,MAAM,KAAK,KAAK;AAChC,SAAK,UAAU,aAAA,MAAK,UAAW,EAAA,WAAA,KAAgB,KAAK;AAC/C,SAAA,cAAc,KAAK,UACpB,IAAI,sBAAsB,KAAK,OAAO,CAAC,KACvC;AAEC,SAAA,QAAQ,4BAA4B,KAAK,KAAK;AACnD,SAAK,UAAU,KAAK;AACpB,SAAK,iBAAiB,KAAK,kBAAkB,KAAK,KAAK;AAEvD,eAAW,MAAM;AACf,WAAK,MAAM,QAAQ,GAAG,KAAK,WAAW,GAAG,KAAK,cAAc;AAAA,OAC3D,CAAC;AAAA,EAAA;AAAA,EAGN,IAAI,gBAAgB;AACX,WAAA,eAAe,aAAK,MAAA,gBAAA,GAAkB,yBAAyB;AAAA,EAAA;AAAA,EAGxE,IAAI,iBAAiB;AACZ,WAAA,kBAAkB,mBAAK,gBAAgB,CAAA;AAAA,EAAA;AAAA,EAGxC,aAAa;AACnB,SAAK,WAAW;AACX,SAAA;AAAA,MACH,IAAI,MAAM,YAAY,EAAE,SAAS,MAAM,UAAU,KAAM,CAAA;AAAA,IACzD;AAAA,EAAA;AAAA,EAGM,aAAa,OAAc;AAE5B,iBAAA,MAAA,eAAgB,IAAI,MAAM,cAAc;AAAA,MAC3C,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAA;AAED,SAAK,SAAS,KAAK;AAAA,EAAA;AAAA,EAGb,cAAc,OAAsB;AAC1C,QAAI,MAAM,QAAQ,eAAe,KAAK,MAAM,mBAAmB,GAAG;AAChE,YAAM,eAAe;AACrB;AAAA,IAAA;AAGF;AAAA,MACE;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EAAA;AAAA,EAGM,YAAY,OAAmB;AAEhC,iBAAA,MAAA,eAAgB,IAAI,MAAM,aAAa;AAAA,MAC1C,UAAU;AAAA,MACV,SAAS;AAAA,IAAA,CACV,CAAA;AACD,SAAK,SAAS,KAAK;AAAA,EAAA;AAAA,EAGb,SAAS,OAAc;AAC7B,iBAAA,MAAK,YAAW,MAAM;AAEtB,QAAI,CAAC,KAAK,MAAM,MAAM,WAAW,GAAG,GAAG;AACrC,WAAK,MAAM,QAAQ,IAAI,KAAK,MAAM,KAAK;AAAA,IAAA;AAEzC,iBAAA,MAAK,UAAW,EAAA,MAAM,KAAK,MAAM,KAAK;AACjC,iBAAA,MAAA,kBAAmB,aAAK,MAAA,UAAA,EAAW,aAAY;AAEpD;AAAA,MACE;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EAAA;AAAA,EAuBM,cAAc;AACpB,SAAK,WAAW;AACX,SAAA;AAAA,MACH,IAAI,MAAM,aAAa,EAAE,UAAU,MAAM,SAAS,KAAM,CAAA;AAAA,IAC1D;AAAA,EAAA;AAAA,EAGM,kBAAkB,OAAe;AACvC,QAAI,KAAK,aAAa;AACpB,cAAQ,MAAM,MAAM,KAAK,YAAY,MAAM;AACvC,UAAA,MAAM,CAAC,MAAM,KAAK;AACZ,gBAAA,MAAM,MAAM,CAAC;AAAA,MAAA;AAAA,IACvB;AAEK,WAAA;AAAA,EAAA;AAAA,EAGT,QAAQ;AACN,SAAK,MAAM,MAAM;AACjB,eAAW,MAAM;AACf,WAAK,MAAM;AAAA,SACR,KAAK,aAAa,UAAU,KAAK;AAAA,QAClC,KAAK,MAAM,MAAM;AAAA,MACnB;AAAA,OACC,CAAC;AAAA,EAAA;AAAA,EAIN,sBAAsB;AACpB,QAAI,mBAAK,kBAAoB,GAAA;AAC3B,mBAAA,MAAK,oBAAqB,KAAA;AAC1B;AAAA,IAAA;AAGF,iBAAA,MAAK,YAAa,IAAI,UAAU,KAAK,OAAO,CAAA;AAC5C,SAAK,iBAAiB,KAAK,kBAAkB,KAAK,MAAM,KAAK;AAExD,SAAA,cAAc,KAAK,UACpB,IAAI,sBAAsB,KAAK,OAAO,CAAC,KACvC;AACJ,SAAK,MAAM,QAAQ;AAAA,MACjB,GAAG,KAAK,WAAW,GAAG,KAAK,cAAc;AAAA,IAC3C;AACK,SAAA,MAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AACzD,SAAA,MAAM,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,KAAK,CAAC,CAAC;AAAA,EAAA;AAAA,EAGxD,SAAS;AAChB,UAAM,KAAK;AACX,UAAM,KAAK;AACX,UAAM,KAAK;AAEJ,WAAA;AAAA;AAAA;AAAA,iBAGM,SAAS;AAAA,MAChB,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA,UAEA,CAAC,KAAK,QACJ,UACA;AAAA;AAAA;AAAA,uBAGW,SAAS;AAAA,MAChB,WAAW,KAAK;AAAA,MAChB,aAAa;AAAA,MACb,4BAA4B;AAAA,MAC5B,wBAAwB;AAAA,MACxB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA,CAClB,CAAC;AAAA;AAAA,gBAEA,KAAK,KAAK;AAAA,qBACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOA,KAAK,kBAAkB;AAAA,uBACrB,KAAK,oBAAoB;AAAA;AAAA,cAElC,KAAK,UACH;AAAA;AAAA;AAAA;AAAA,4BAIY,KAAK,OAAO;AAAA;AAAA,oBAGxB;AAAA;AAAA,wBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAUJ,KAAK,KAAK;AAAA,qBACT,KAAK,WAAW;AAAA,qBAChB,KAAK,WAAW;AAAA,oBACjB,KAAK,UAAU;AAAA,uBACZ,KAAK,aAAa;AAAA,sBACnB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMvC;AAvSE,aAAA,oBAAA,QAAA;AACA,qBAAA,oBAAA,QAAA;AACA,gBAAA,oBAAA,QAAA;AACA,mBAAA,oBAAA,QAAA;AAMA,gBAAA;AAAA,EADC,MAAM,eAAe;AAAA,GAXX,gBAYX,WAAA,SAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GAlBhB,gBAmBX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GAxBhB,gBAyBX,WAAA,kBAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GA9BhB,gBA+BX,WAAA,eAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAS;AAAA,GArCC,gBAsCX,WAAA,SAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA3ChB,gBA4CX,WAAA,aAAA,CAAA;AAMA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAM,CAAA;AAAA,GAjDhB,gBAkDX,WAAA,WAAA,CAAA;AAGA,gBAAA;AAAA,EADC,MAAM;AAAA,GApDI,gBAqDX,WAAA,YAAA,CAAA;AAqJA,gBAAA;AAAA,EADC,MAAM,WAAW,EAAE,sBAAsB,KAAM,CAAA;AAAA,GAzMrC,gBA0MX,WAAA,uBAAA,CAAA;AA1MW,kBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,eAAA;"}
|
|
1
|
+
{"version":3,"file":"phone-input.js","sources":["../../src/components/phone-input.component.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styled } from '../mixins/tailwind.mixin';\nimport {\n AsYouType,\n formatIncompletePhoneNumber,\n getCountryCallingCode,\n CountryCode,\n parsePhoneNumberCharacter,\n} from 'libphonenumber-js';\nimport './icon/icon.component';\nimport {\n onChange,\n onKeyDown,\n templateFormatter,\n templateParser,\n} from 'input-format';\nimport { watch } from '../internal/watch';\nimport { FormControllerMixin } from '../mixins/form-controller.mixin';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'mid-phone-input': MinidPhoneInput;\n }\n}\n\nconst styles = [\n css`\n :host {\n display: flex;\n }\n\n .country-code,\n .phone-number {\n outline: none;\n box-shadow: none;\n background-color: transparent;\n }\n\n .phone-number {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .country-code {\n border-right: 1px solid currentColor;\n }\n\n .country-button {\n border: 1px solid var(--fds-semantic-border-input-default);\n border-right: 0;\n border-top-left-radius: var(--fds-border_radius-medium);\n border-bottom-left-radius: var(--fds-border_radius-medium);\n }\n\n .fds-focus:focus-within,\n .fds-focus:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px #00347d;\n }\n `,\n];\n\n/**\n * @event {Event} mid-country-click - Emitted when the country button is clicked\n * @event {Event} mid-change - Emitted when the value is modified by the user\n * @event {Event} mid-input - Emitted after a new user input\n * @event {Event} mid-blur - Emitted after focus is moved away from input\n * @event {Event} mid-focus - Emitted after input gains focus\n *\n * @part base - Select the container outside the country button and phone number input\n * @part form-control - Select the container around the label and the inputs\n * @part label - Select the label element\n * @part country-button - Select the country button\n * @part input - Select the phone number input\n */\n@customElement('mid-phone-input')\nexport class MinidPhoneInput extends FormControllerMixin(\n styled(LitElement, styles)\n) {\n #formatter = new AsYouType();\n #skipCountryUpdate = false; // avoids unwanted update loop\n #currentEvent = new Event(''); // the event to be emitted after value is set\n #currentTemplate = '';\n\n /**\n * @ignore\n */\n @query('.phone-number')\n input!: HTMLInputElement;\n\n /**\n * The value of the phone number in E.164 format. Example: `\"+4799999999\"`\n *\n */\n @property({ reflect: true })\n value = '';\n\n /**\n * The phone number without the country code prefix. Example: `\"99999999\"`\n */\n @property({ reflect: true })\n nationalnumber = '';\n\n /**\n * The country code of the current phone number value. Example: `\"+47\"`\n */\n @property({ reflect: true })\n countrycode = '';\n\n /**\n * Label for the phone input.\n * Passed label will be encapsulated by a label element.\n */\n @property()\n label = '';\n\n /**\n * Hide label visually. Still available for screen readers\n */\n @property({ type: Boolean })\n hidelabel = false;\n\n /**\n * The country selected. A two letter ISO country code like: `\"NO\"`\n */\n @property({ reflect: true })\n country?: CountryCode;\n\n @state()\n hasFocus = false;\n\n handleCountryClick() {\n this.dispatchEvent(\n new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n );\n }\n\n handleCountryKeyDown(event: KeyboardEvent) {\n if ([' ', 'Enter'].includes(event.key)) {\n this.dispatchEvent(\n new CustomEvent('mid-country-click', { composed: true, bubbles: true })\n );\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.#formatter.input(this.value);\n this.country = this.#formatter.getCountry() ?? this.country;\n this.countrycode = this.country\n ? `+${getCountryCallingCode(this.country)}`\n : '+';\n\n this.value = formatIncompletePhoneNumber(this.value);\n this.value ??= this.countrycode;\n this.nationalnumber = this.removePhonePrefix(this.value);\n\n setTimeout(() => {\n this.input.value = `${this.countrycode}${this.nationalnumber}`;\n }, 0);\n }\n\n get parseTemplate() {\n return templateParser(this.#currentTemplate, parsePhoneNumberCharacter);\n }\n\n get formatTemplate() {\n return templateFormatter(this.#currentTemplate);\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.dispatchEvent(\n new Event('mid-blur', { bubbles: true, composed: true })\n );\n }\n\n private handleChange(event: Event) {\n // Event is dispatched after value is set\n this.#currentEvent = new Event('mid-change', {\n bubbles: true,\n composed: true,\n });\n\n this.setValue(event);\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (event.key === 'Backspace' && this.input.selectionStart === 1) {\n event.preventDefault();\n return;\n }\n\n onKeyDown(\n event,\n this.input,\n this.parseTemplate,\n this.formatTemplate,\n this.valueChangeCallback\n );\n }\n\n private handleInput(event: InputEvent) {\n // Event is dispatched after value is set\n this.#currentEvent = new Event('mid-input', {\n composed: true,\n bubbles: true,\n });\n this.setValue(event);\n }\n\n private setValue(event: Event) {\n this.#formatter.reset();\n\n if (!this.input.value.startsWith('+')) {\n this.input.value = `+${this.input.value}`;\n }\n this.#formatter.input(this.input.value);\n this.#currentTemplate = this.#formatter.getTemplate();\n\n onChange(\n event,\n this.input,\n this.parseTemplate,\n this.formatTemplate,\n this.valueChangeCallback\n );\n }\n\n private valueChangeCallback = (value: string) => {\n const country =\n value.length < 2\n ? undefined\n : (this.#formatter.getCountry() ?? this.country);\n\n if (country !== this.country) {\n this.country = country;\n this.countrycode = this.country\n ? `+${getCountryCallingCode(this.country)}`\n : '+';\n this.#skipCountryUpdate = true;\n }\n\n this.value = value;\n this.nationalnumber = this.removePhonePrefix(value);\n this.dispatchEvent(this.#currentEvent);\n this.setFormValue(this.value);\n };\n\n private handleFocus() {\n this.hasFocus = true;\n this.dispatchEvent(\n new Event('mid-focus', { composed: true, bubbles: true })\n );\n }\n\n private removePhonePrefix(value: string) {\n if (this.countrycode) {\n value = value.slice(this.countrycode.length);\n if (value[0] === ' ') {\n value = value.slice(1);\n }\n }\n return value;\n }\n\n focus() {\n this.input.focus();\n setTimeout(() => {\n this.input.setSelectionRange(\n (this.countrycode?.length ?? 0) + 1,\n this.input.value.length\n );\n }, 0);\n }\n\n @watch('country', { waitUntilFirstUpdate: true })\n handleCountryChange() {\n if (this.#skipCountryUpdate) {\n this.#skipCountryUpdate = false;\n return;\n }\n\n this.#formatter = new AsYouType(this.country);\n this.nationalnumber = this.removePhonePrefix(this.input.value);\n\n this.countrycode = this.country\n ? `+${getCountryCallingCode(this.country)}`\n : '+';\n this.input.value = formatIncompletePhoneNumber(\n `${this.countrycode}${this.nationalnumber}`\n );\n this.input.dispatchEvent(new Event('input', { bubbles: true }));\n this.input.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n override render() {\n const lg = false;\n const md = true;\n const sm = false;\n\n return html`\n <div\n part=\"form-control\"\n class=\"${classMap({\n 'form-control': true,\n 'fds-paragraph': true,\n 'fds-textfield': true,\n 'flex-1': true,\n 'fds-paragraph--sm': sm,\n 'fds-paragraph--md': md,\n 'fds-paragraph--lg': lg,\n 'fds-textfield--sm': sm,\n 'fds-textfield--md': md,\n 'fds-textfield--lg': lg,\n })}\"\n >\n ${!this.label\n ? nothing\n : html`<label\n part=\"label\"\n for=\"input\"\n class=\"${classMap({\n 'sr-only': this.hidelabel,\n 'fds-label': true,\n 'fds-label--medium-weight': true,\n 'fds-textfield__label': true,\n 'fds-label--sm': sm,\n 'fds-label--md': md,\n 'fds-label--lg': lg,\n })}\"\n >\n ${this.label}\n </label>`}\n <div part=\"base\" class=\"flex\">\n <button\n part=\"country-button\"\n class=\"country-button fds-focus flex h-full items-center border pl-3\"\n iconstyled\n variant=\"tertiary\"\n @click=${this.handleCountryClick}\n @keydown=${this.handleCountryKeyDown}\n >\n ${this.country\n ? html`\n <mid-icon\n class=\"h-4 w-6 overflow-hidden rounded\"\n library=\"country\"\n name=\"${this.country}\"\n ></mid-icon>\n `\n : html`<div\n class=\"bg-neutral-surface-active h-4 w-6 overflow-hidden rounded\"\n ></div>`}\n <mid-icon name=\"chevron-down\"></mid-icon>\n </button>\n\n <input\n id=\"input\"\n class=\"phone-number fds-textfield__field fds-textfield__input fds-focus\"\n part=\"phone-number\"\n type=\"tel\"\n autocomplete=\"tel\"\n value=${this.value}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @keydown=${this.handleKeydown}\n @change=${this.handleChange}\n />\n </div>\n </div>\n `;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
|
-
const tailwindStyles = css`/*! tailwindcss v4.
|
|
3
|
-
@layer theme{:root,:host{--spacing:.25rem;--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--radius-sm:var(--ds-border-radius-sm);--radius-md:var(--ds-border-radius-md);--radius-lg:var(--ds-border-radius-lg);--radius-xl:var(--ds-border-radius-xl);--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings);--radius:var(--ds-border-radius-default);--spacing-1:var(--ds-size-1);--spacing-2:var(--ds-size-2);--spacing-3:var(--ds-size-3);--spacing-4:var(--ds-size-4);--spacing-5:var(--ds-size-5);--spacing-6:var(--ds-size-6);--spacing-7:var(--ds-size-7);--spacing-8:var(--ds-size-8);--radius-full:var(--ds-border-radius-full);--border-width-highlight:var(--ds-border-width-highlight);--font-sans:"Inter","Arial",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-sans--font-feature-settings:"cv05" 1;--font-mono:IBM Plex Mono;--text-6:var(--ds-font-size-6);--text-7:var(--ds-font-size-7);--text-8:var(--ds-font-size-8);--text-body-xs:var(--ds-body-xs-font-size);--text-body-xs--font-weight:var(--ds-body-xs-font-weight);--text-body-xs--letter-spacing:var(--ds-body-xs-letter-spacing);--text-body-xs--line-height:var(--ds-body-xs-line-height);--text-body-sm:var(--ds-body-sm-font-size);--text-body-sm--font-weight:var(--ds-body-sm-font-weight);--text-body-sm--letter-spacing:var(--ds-body-sm-letter-spacing);--text-body-sm--line-height:var(--ds-body-sm-line-height);--text-body-md:var(--ds-body-md-font-size);--text-body-md--font-weight:var(--ds-body-md-font-weight);--text-body-md--letter-spacing:var(--ds-body-md-letter-spacing);--text-body-md--line-height:var(--ds-body-md-line-height);--text-body-lg:var(--ds-body-lg-font-size);--text-body-lg--font-weight:var(--ds-body-lg-font-weight);--text-body-lg--letter-spacing:var(--ds-body-lg-letter-spacing);--text-body-lg--line-height:var(--ds-body-lg-line-height);--text-body-xl:var(--ds-body-xl-font-size);--text-body-xl--font-weight:var(--ds-body-xl-font-weight);--text-body-xl--letter-spacing:var(--ds-body-xl-letter-spacing);--text-body-xl--line-height:var(--ds-body-xl-line-height);--text-body-short-xs:var(--ds-body-short-xs-font-size);--text-body-short-xs--font-weight:var(--ds-body-short-xs-font-weight);--text-body-short-xs--letter-spacing:var(--ds-body-short-xs-letter-spacing);--text-body-short-xs--line-height:var(--ds-body-short-xs-line-height);--text-body-short-sm:var(--ds-body-short-sm-font-size);--text-body-short-sm--font-weight:var(--ds-body-short-sm-font-weight);--text-body-short-sm--letter-spacing:var(--ds-body-short-sm-letter-spacing);--text-body-short-sm--line-height:var(--ds-body-short-sm-line-height);--text-body-short-md:var(--ds-body-short-md-font-size);--text-body-short-md--font-weight:var(--ds-body-short-md-font-weight);--text-body-short-md--letter-spacing:var(--ds-body-short-md-letter-spacing);--text-body-short-md--line-height:var(--ds-body-short-md-line-height);--text-body-short-lg:var(--ds-body-short-lg-font-size);--text-body-short-lg--font-weight:var(--ds-body-short-lg-font-weight);--text-body-short-lg--letter-spacing:var(--ds-body-short-lg-letter-spacing);--text-body-short-lg--line-height:var(--ds-body-short-lg-line-height);--text-body-short-xl:var(--ds-body-short-xl-font-size);--text-body-short-xl--font-weight:var(--ds-body-short-xl-font-weight);--text-body-short-xl--letter-spacing:var(--ds-body-short-xl-letter-spacing);--text-body-short-xl--line-height:var(--ds-body-short-xl-line-height);--text-body-long-xs:var(--ds-body-long-xs-font-size);--text-body-long-xs--font-weight:var(--ds-body-long-xs-font-weight);--text-body-long-xs--letter-spacing:var(--ds-body-long-xs-letter-spacing);--text-body-long-xs--line-height:var(--ds-body-long-xs-line-height);--text-body-long-sm:var(--ds-body-long-sm-font-size);--text-body-long-sm--font-weight:var(--ds-body-long-sm-font-weight);--text-body-long-sm--letter-spacing:var(--ds-body-long-sm-letter-spacing);--text-body-long-sm--line-height:var(--ds-body-long-sm-line-height);--text-body-long-md:var(--ds-body-long-md-font-size);--text-body-long-md--font-weight:var(--ds-body-long-md-font-weight);--text-body-long-md--letter-spacing:var(--ds-body-long-md-letter-spacing);--text-body-long-md--line-height:var(--ds-body-long-md-line-height);--text-body-long-lg:var(--ds-body-long-lg-font-size);--text-body-long-lg--font-weight:var(--ds-body-long-lg-font-weight);--text-body-long-lg--letter-spacing:var(--ds-body-long-lg-letter-spacing);--text-body-long-lg--line-height:var(--ds-body-long-lg-line-height);--text-body-long-xl:var(--ds-body-long-xl-font-size);--text-body-long-xl--font-weight:var(--ds-body-long-xl-font-weight);--text-body-long-xl--letter-spacing:var(--ds-body-long-xl-letter-spacing);--text-body-long-xl--line-height:var(--ds-body-long-xl-line-height);--text-heading-2xs:var(--ds-heading-2xs-font-size);--text-heading-2xs--font-weight:var(--ds-heading-2xs-font-weight);--text-heading-2xs--letter-spacing:var(--ds-heading-2xs-letter-spacing);--text-heading-2xs--line-height:var(--ds-heading-2xs-line-height);--text-heading-xs:var(--ds-heading-xs-font-size);--text-heading-xs--font-weight:var(--ds-heading-xs-font-weight);--text-heading-xs--letter-spacing:var(--ds-heading-xs-letter-spacing);--text-heading-xs--line-height:var(--ds-heading-xs-line-height);--text-heading-sm:var(--ds-heading-sm-font-size);--text-heading-sm--font-weight:var(--ds-heading-sm-font-weight);--text-heading-sm--letter-spacing:var(--ds-heading-sm-letter-spacing);--text-heading-sm--line-height:var(--ds-heading-sm-line-height);--text-heading-md:var(--ds-heading-md-font-size);--text-heading-md--font-weight:var(--ds-heading-md-font-weight);--text-heading-md--letter-spacing:var(--ds-heading-md-letter-spacing);--text-heading-md--line-height:var(--ds-heading-md-line-height);--text-heading-lg:var(--ds-heading-lg-font-size);--text-heading-lg--font-weight:var(--ds-heading-lg-font-weight);--text-heading-lg--letter-spacing:var(--ds-heading-lg-letter-spacing);--text-heading-lg--line-height:var(--ds-heading-lg-line-height);--text-heading-xl:var(--ds-heading-xl-font-size);--text-heading-xl--font-weight:var(--ds-heading-xl-font-weight);--text-heading-xl--letter-spacing:var(--ds-heading-xl-letter-spacing);--text-heading-xl--line-height:var(--ds-heading-xl-line-height);--text-heading-2xl:var(--ds-heading-2xl-font-size);--text-heading-2xl--font-weight:var(--ds-heading-2xl-font-weight);--text-heading-2xl--letter-spacing:var(--ds-heading-2xl-letter-spacing);--text-heading-2xl--line-height:var(--ds-heading-2xl-line-height);--color-blue-1:var(--ds-global-blue-1);--color-blue-2:var(--ds-global-blue-2);--color-blue-3:var(--ds-global-blue-3);--color-blue-4:var(--ds-global-blue-4);--color-blue-5:var(--ds-global-blue-5);--color-blue-6:var(--ds-global-blue-6);--color-blue-7:var(--ds-global-blue-7);--color-blue-8:var(--ds-global-blue-8);--color-blue-9:var(--ds-global-blue-9);--color-blue-10:var(--ds-global-blue-10);--color-blue-11:var(--ds-global-blue-11);--color-blue-12:var(--ds-global-blue-12);--color-blue-13:var(--ds-global-blue-13);--color-blue-contrast-1:var(--ds-global-blue-contrast-1);--color-blue-contrast-2:var(--ds-global-blue-contrast-2);--color-green-1:var(--ds-global-green-1);--color-green-2:var(--ds-global-green-2);--color-green-3:var(--ds-global-green-3);--color-green-4:var(--ds-global-green-4);--color-green-5:var(--ds-global-green-5);--color-green-6:var(--ds-global-green-6);--color-green-7:var(--ds-global-green-7);--color-green-8:var(--ds-global-green-8);--color-green-9:var(--ds-global-green-9);--color-green-10:var(--ds-global-green-10);--color-green-11:var(--ds-global-green-11);--color-green-12:var(--ds-global-green-12);--color-green-13:var(--ds-global-green-13);--color-green-contrast-1:var(--ds-global-green-contrast-1);--color-green-contrast-2:var(--ds-global-green-contrast-2);--color-orange-1:var(--ds-global-orange-1);--color-orange-2:var(--ds-global-orange-2);--color-orange-3:var(--ds-global-orange-3);--color-orange-4:var(--ds-global-orange-4);--color-orange-5:var(--ds-global-orange-5);--color-orange-6:var(--ds-global-orange-6);--color-orange-7:var(--ds-global-orange-7);--color-orange-8:var(--ds-global-orange-8);--color-orange-9:var(--ds-global-orange-9);--color-orange-10:var(--ds-global-orange-10);--color-orange-11:var(--ds-global-orange-11);--color-orange-12:var(--ds-global-orange-12);--color-orange-13:var(--ds-global-orange-13);--color-orange-contrast-1:var(--ds-global-orange-contrast-1);--color-orange-contrast-2:var(--ds-global-orange-contrast-2);--color-purple-1:var(--ds-global-purple-1);--color-purple-2:var(--ds-global-purple-2);--color-purple-3:var(--ds-global-purple-3);--color-purple-4:var(--ds-global-purple-4);--color-purple-5:var(--ds-global-purple-5);--color-purple-6:var(--ds-global-purple-6);--color-purple-7:var(--ds-global-purple-7);--color-purple-8:var(--ds-global-purple-8);--color-purple-9:var(--ds-global-purple-9);--color-purple-10:var(--ds-global-purple-10);--color-purple-11:var(--ds-global-purple-11);--color-purple-12:var(--ds-global-purple-12);--color-purple-13:var(--ds-global-purple-13);--color-purple-contrast-1:var(--ds-global-purple-contrast-1);--color-purple-contrast-2:var(--ds-global-purple-contrast-2);--color-red-1:var(--ds-global-red-1);--color-red-2:var(--ds-global-red-2);--color-red-3:var(--ds-global-red-3);--color-red-4:var(--ds-global-red-4);--color-red-5:var(--ds-global-red-5);--color-red-6:var(--ds-global-red-6);--color-red-7:var(--ds-global-red-7);--color-red-8:var(--ds-global-red-8);--color-red-9:var(--ds-global-red-9);--color-red-10:var(--ds-global-red-10);--color-red-11:var(--ds-global-red-11);--color-red-12:var(--ds-global-red-12);--color-red-13:var(--ds-global-red-13);--color-red-contrast-1:var(--ds-global-red-contrast-1);--color-red-contrast-2:var(--ds-global-red-contrast-2);--color-yellow-1:var(--ds-global-yellow-1);--color-yellow-2:var(--ds-global-yellow-2);--color-yellow-3:var(--ds-global-yellow-3);--color-yellow-4:var(--ds-global-yellow-4);--color-yellow-5:var(--ds-global-yellow-5);--color-yellow-6:var(--ds-global-yellow-6);--color-yellow-7:var(--ds-global-yellow-7);--color-yellow-8:var(--ds-global-yellow-8);--color-yellow-9:var(--ds-global-yellow-9);--color-yellow-10:var(--ds-global-yellow-10);--color-yellow-11:var(--ds-global-yellow-11);--color-yellow-12:var(--ds-global-yellow-12);--color-yellow-13:var(--ds-global-yellow-13);--color-yellow-contrast-1:var(--ds-global-yellow-contrast-1);--color-yellow-contrast-2:var(--ds-global-yellow-contrast-2);--color-accent-surface-tinted:var(--ds-color-accent-surface-tinted);--color-accent-surface-hover:var(--ds-color-accent-surface-hover);--color-accent-surface-active:var(--ds-color-accent-surface-active);--color-accent-base:var(--ds-color-accent-base-default);--color-accent-base-hover:var(--ds-color-accent-base-hover);--color-accent-base-active:var(--ds-color-accent-base-active);--color-accent-base-contrast:var(--ds-color-accent-base-contrast-default);--color-accent-base-contrast-subtle:var(--ds-color-accent-base-contrast-subtle);--color-neutral-surface-tinted:var(--ds-color-neutral-surface-tinted);--color-neutral-surface-hover:var(--ds-color-neutral-surface-hover);--color-neutral-surface-active:var(--ds-color-neutral-surface-active);--color-neutral-base:var(--ds-color-neutral-base-default);--color-neutral-base-hover:var(--ds-color-neutral-base-hover);--color-neutral-base-active:var(--ds-color-neutral-base-active);--color-neutral-base-contrast:var(--ds-color-neutral-base-contrast-default);--color-neutral-base-contrast-subtle:var(--ds-color-neutral-base-contrast-subtle);--color-brand1-surface-tinted:var(--ds-color-brand1-surface-tinted);--color-brand1-surface-hover:var(--ds-color-brand1-surface-hover);--color-brand1-surface-active:var(--ds-color-brand1-surface-active);--color-brand1-base:var(--ds-color-brand1-base-default);--color-brand1-base-hover:var(--ds-color-brand1-base-hover);--color-brand1-base-active:var(--ds-color-brand1-base-active);--color-brand1-base-contrast:var(--ds-color-brand1-base-contrast-default);--color-brand1-base-contrast-subtle:var(--ds-color-brand1-base-contrast-subtle);--color-brand2-surface-tinted:var(--ds-color-brand2-surface-tinted);--color-brand2-surface-hover:var(--ds-color-brand2-surface-hover);--color-brand2-surface-active:var(--ds-color-brand2-surface-active);--color-brand2-base:var(--ds-color-brand2-base-default);--color-brand2-base-hover:var(--ds-color-brand2-base-hover);--color-brand2-base-active:var(--ds-color-brand2-base-active);--color-brand2-base-contrast:var(--ds-color-brand2-base-contrast-default);--color-brand2-base-contrast-subtle:var(--ds-color-brand2-base-contrast-subtle);--color-brand3-surface-tinted:var(--ds-color-brand3-surface-tinted);--color-brand3-surface-hover:var(--ds-color-brand3-surface-hover);--color-brand3-surface-active:var(--ds-color-brand3-surface-active);--color-brand3-base:var(--ds-color-brand3-base-default);--color-brand3-base-active:var(--ds-color-brand3-base-active);--color-brand3-base-hover:var(--ds-color-brand3-base-hover);--color-brand3-base-contrast:var(--ds-color-brand3-base-contrast-default);--color-brand3-base-contrast-subtle:var(--ds-color-brand3-base-contrast-subtle);--color-danger-surface-tinted:var(--ds-color-danger-surface-tinted);--color-danger-surface-hover:var(--ds-color-danger-surface-hover);--color-danger-surface-active:var(--ds-color-danger-surface-active);--color-danger-base:var(--ds-color-danger-base-default);--color-danger-base-hover:var(--ds-color-danger-base-hover);--color-danger-base-active:var(--ds-color-danger-base-active);--color-danger-base-contrast:var(--ds-color-danger-base-contrast-default);--color-danger-base-contrast-subtle:var(--ds-color-danger-base-contrast-subtle);--color-info-surface-tinted:var(--ds-color-info-surface-tinted);--color-info-surface-hover:var(--ds-color-info-surface-hover);--color-info-surface-active:var(--ds-color-info-surface-active);--color-info-base:var(--ds-color-info-base-default);--color-info-base-hover:var(--ds-color-info-base-hover);--color-info-base-active:var(--ds-color-info-base-active);--color-info-base-contrast:var(--ds-color-info-base-contrast-default);--color-info-base-contrast-subtle:var(--ds-color-info-base-contrast-subtle);--color-success-surface-tinted:var(--ds-color-success-surface-tinted);--color-success-surface-hover:var(--ds-color-success-surface-hover);--color-success-surface-active:var(--ds-color-success-surface-active);--color-success-base:var(--ds-color-success-base-default);--color-success-base-hover:var(--ds-color-success-base-hover);--color-success-base-active:var(--ds-color-success-base-active);--color-success-base-contrast:var(--ds-color-success-base-contrast-default);--color-success-base-contrast-subtle:var(--ds-color-success-base-contrast-subtle);--color-warning-surface-tinted:var(--ds-color-warning-surface-tinted);--color-warning-surface-hover:var(--ds-color-warning-surface-hover);--color-warning-surface-active:var(--ds-color-warning-surface-active);--color-warning-base:var(--ds-color-warning-base-default);--color-warning-base-hover:var(--ds-color-warning-base-hover);--color-warning-base-active:var(--ds-color-warning-base-active);--color-warning-base-contrast:var(--ds-color-warning-base-contrast-default);--color-warning-base-contrast-subtle:var(--ds-color-warning-base-contrast-subtle);--color-focus-inner:var(--ds-color-focus-inner);--color-focus-outer:var(--ds-color-focus-outer);--background-color-accent:var(--ds-color-accent-background-default);--background-color-accent-tinted:var(--ds-color-accent-background-tinted);--background-color-brand1:var(--ds-color-brand1-background-default);--background-color-brand1-tinted:var(--ds-color-brand1-background-tinted);--background-color-brand2:var(--ds-color-brand2-background-default);--background-color-brand2-tinted:var(--ds-color-brand2-background-tinted);--background-color-brand3:var(--ds-color-brand3-background-default);--background-color-brand3-tinted:var(--ds-color-brand3-background-tinted);--background-color-danger:var(--ds-color-danger-background-default);--background-color-danger-tinted:var(--ds-color-danger-background-tinted);--background-color-info:var(--ds-color-info-background-default);--background-color-info-tinted:var(--ds-color-info-background-tinted);--background-color-neutral:var(--ds-color-neutral-background-default);--background-color-neutral-tinted:var(--ds-color-neutral-background-tinted);--background-color-success:var(--ds-color-success-background-default);--background-color-success-tinted:var(--ds-color-success-background-tinted);--background-color-warning:var(--ds-color-warning-background-default);--background-color-warning-tinted:var(--ds-color-warning-background-tinted);--border-color-accent:var(--ds-color-accent-border-default);--border-color-accent-subtle:var(--ds-color-accent-border-subtle);--border-color-brand1:var(--ds-color-brand1-border-default);--border-color-brand1-subtle:var(--ds-color-brand1-border-subtle);--border-color-brand2:var(--ds-color-brand2-border-default);--border-color-brand2-subtle:var(--ds-color-brand2-border-subtle);--border-color-brand3:var(--ds-color-brand3-border-default);--border-color-brand3-subtle:var(--ds-color-brand3-border-subtle);--border-color-danger:var(--ds-color-danger-border-default);--border-color-danger-subtle:var(--ds-color-danger-border-subtle);--border-color-info:var(--ds-color-info-border-default);--border-color-info-subtle:var(--ds-color-info-border-subtle);--border-color-neutral:var(--ds-color-neutral-border-default);--border-color-neutral-subtle:var(--ds-color-neutral-border-subtle);--border-color-success:var(--ds-color-success-border-default);--border-color-success-subtle:var(--ds-color-success-border-subtle);--border-color-warning:var(--ds-color-warning-border-default);--border-color-warning-subtle:var(--ds-color-warning-border-subtle);--text-color-accent:var(--ds-color-accent-text-default);--text-color-accent-subtle:var(--ds-color-accent-text-subtle);--text-color-brand1:var(--ds-color-brand1-text-default);--text-color-brand1-subtle:var(--ds-color-brand1-text-subtle);--text-color-brand2:var(--ds-color-brand2-text-default);--text-color-brand2-subtle:var(--ds-color-brand2-text-subtle);--text-color-brand3:var(--ds-color-brand3-text-default);--text-color-brand3-subtle:var(--ds-color-brand3-text-subtle);--text-color-danger:var(--ds-color-danger-text-default);--text-color-danger-subtle:var(--ds-color-danger-text-subtle);--text-color-info:var(--ds-color-info-text-default);--text-color-info-subtle:var(--ds-color-info-text-subtle);--text-color-neutral:var(--ds-color-neutral-text-default);--text-color-neutral-subtle:var(--ds-color-neutral-text-subtle);--text-color-success:var(--ds-color-success-text-default);--text-color-success-subtle:var(--ds-color-success-text-subtle);--text-color-warning:var(--ds-color-warning-text-default);--text-color-warning-subtle:var(--ds-color-warning-text-subtle)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1;color:color-mix(in oklab,currentColor 50%,transparent)}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:focus-visible{--tw-outline-style:none;--tw-shadow:0 0 0 3px var(--tw-shadow-color,#00347d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:none}@media (forced-colors:active){:focus-visible{outline-offset:2px;outline:2px solid #0000}}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.col-span-2{grid-column:span 2/span 2}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.m-24{margin:calc(var(--spacing)*24)}.m-44{margin:calc(var(--spacing)*44)}.m-56{margin:calc(var(--spacing)*56)}.m-auto{margin:auto}.mt-1{margin-top:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-64{margin-bottom:calc(var(--spacing)*64)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.h-4{height:var(--spacing-4)}.h-5{height:var(--spacing-5)}.h-6{height:var(--spacing-6)}.h-7{height:var(--spacing-7)}.h-8{height:var(--spacing-8)}.h-full{height:100%}.w-5{width:var(--spacing-5)}.w-6{width:var(--spacing-6)}.w-7{width:var(--spacing-7)}.w-80{width:calc(var(--spacing)*80)}.w-\\[calc\\(1em\\+1rem\\*2\\)\\]{width:calc(1em + 2rem)}.w-full{width:100%}.shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.animate-dash{animation:1.4s cubic-bezier(.2,-.01,.51,.96) infinite dash}.animate-spin-slow{animation:2.2s linear infinite spin}.resize{resize:both}.auto-rows-\\[40px\\]{grid-auto-rows:40px}.auto-rows-\\[40px_60px\\]{grid-auto-rows:40px 60px}.auto-rows-\\[60px\\]{grid-auto-rows:60px}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-x-4{column-gap:var(--spacing-4)}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--radius)}.rounded-full{border-radius:3.40282e38px;border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-highlight{border-style:var(--tw-border-style);border-width:var(--border-width-highlight)}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-accent{border-color:var(--border-color-accent)}.border-accent-subtle{border-color:var(--border-color-accent-subtle)}.border-brand1{border-color:var(--border-color-brand1)}.border-brand1-subtle{border-color:var(--border-color-brand1-subtle)}.border-brand2{border-color:var(--border-color-brand2)}.border-brand2-subtle{border-color:var(--border-color-brand2-subtle)}.border-brand3{border-color:var(--border-color-brand3)}.border-brand3-subtle{border-color:var(--border-color-brand3-subtle)}.border-danger{border-color:var(--border-color-danger)}.border-danger-subtle{border-color:var(--border-color-danger-subtle)}.border-info{border-color:var(--border-color-info)}.border-info-subtle{border-color:var(--border-color-info-subtle)}.border-neutral{border-color:var(--border-color-neutral)}.border-neutral-subtle{border-color:var(--border-color-neutral-subtle)}.border-success{border-color:var(--border-color-success)}.border-success-subtle{border-color:var(--border-color-success-subtle)}.border-warning{border-color:var(--border-color-warning)}.border-warning-subtle{border-color:var(--border-color-warning-subtle)}.bg-accent{background-color:var(--background-color-accent)}.bg-accent-base{background-color:var(--color-accent-base)}.bg-accent-base-active{background-color:var(--color-accent-base-active)}.bg-accent-base-contrast{background-color:var(--color-accent-base-contrast)}.bg-accent-base-contrast-subtle{background-color:var(--color-accent-base-contrast-subtle)}.bg-accent-base-hover{background-color:var(--color-accent-base-hover)}.bg-accent-surface-active{background-color:var(--color-accent-surface-active)}.bg-accent-surface-hover{background-color:var(--color-accent-surface-hover)}.bg-accent-surface-tinted{background-color:var(--color-accent-surface-tinted)}.bg-accent-tinted{background-color:var(--background-color-accent-tinted)}.bg-blue-1{background-color:var(--color-blue-1)}.bg-blue-2{background-color:var(--color-blue-2)}.bg-blue-3{background-color:var(--color-blue-3)}.bg-blue-4{background-color:var(--color-blue-4)}.bg-blue-5{background-color:var(--color-blue-5)}.bg-blue-6{background-color:var(--color-blue-6)}.bg-blue-7{background-color:var(--color-blue-7)}.bg-blue-8{background-color:var(--color-blue-8)}.bg-blue-9{background-color:var(--color-blue-9)}.bg-blue-10{background-color:var(--color-blue-10)}.bg-blue-11{background-color:var(--color-blue-11)}.bg-blue-12{background-color:var(--color-blue-12)}.bg-blue-13{background-color:var(--color-blue-13)}.bg-blue-contrast-1{background-color:var(--color-blue-contrast-1)}.bg-blue-contrast-2{background-color:var(--color-blue-contrast-2)}.bg-brand1{background-color:var(--background-color-brand1)}.bg-brand1-base{background-color:var(--color-brand1-base)}.bg-brand1-base-active{background-color:var(--color-brand1-base-active)}.bg-brand1-base-contrast{background-color:var(--color-brand1-base-contrast)}.bg-brand1-base-contrast-subtle{background-color:var(--color-brand1-base-contrast-subtle)}.bg-brand1-base-hover{background-color:var(--color-brand1-base-hover)}.bg-brand1-surface-active{background-color:var(--color-brand1-surface-active)}.bg-brand1-surface-hover{background-color:var(--color-brand1-surface-hover)}.bg-brand1-surface-tinted{background-color:var(--color-brand1-surface-tinted)}.bg-brand1-tinted{background-color:var(--background-color-brand1-tinted)}.bg-brand2{background-color:var(--background-color-brand2)}.bg-brand2-base{background-color:var(--color-brand2-base)}.bg-brand2-base-active{background-color:var(--color-brand2-base-active)}.bg-brand2-base-contrast{background-color:var(--color-brand2-base-contrast)}.bg-brand2-base-contrast-subtle{background-color:var(--color-brand2-base-contrast-subtle)}.bg-brand2-base-hover{background-color:var(--color-brand2-base-hover)}.bg-brand2-surface-active{background-color:var(--color-brand2-surface-active)}.bg-brand2-surface-hover{background-color:var(--color-brand2-surface-hover)}.bg-brand2-surface-tinted{background-color:var(--color-brand2-surface-tinted)}.bg-brand2-tinted{background-color:var(--background-color-brand2-tinted)}.bg-brand3{background-color:var(--background-color-brand3)}.bg-brand3-base{background-color:var(--color-brand3-base)}.bg-brand3-base-active{background-color:var(--color-brand3-base-active)}.bg-brand3-base-contrast{background-color:var(--color-brand3-base-contrast)}.bg-brand3-base-contrast-subtle{background-color:var(--color-brand3-base-contrast-subtle)}.bg-brand3-base-hover{background-color:var(--color-brand3-base-hover)}.bg-brand3-surface-active{background-color:var(--color-brand3-surface-active)}.bg-brand3-surface-hover{background-color:var(--color-brand3-surface-hover)}.bg-brand3-surface-tinted{background-color:var(--color-brand3-surface-tinted)}.bg-brand3-tinted{background-color:var(--background-color-brand3-tinted)}.bg-danger{background-color:var(--background-color-danger)}.bg-danger-base{background-color:var(--color-danger-base)}.bg-danger-base-active{background-color:var(--color-danger-base-active)}.bg-danger-base-contrast{background-color:var(--color-danger-base-contrast)}.bg-danger-base-contrast-subtle{background-color:var(--color-danger-base-contrast-subtle)}.bg-danger-base-hover{background-color:var(--color-danger-base-hover)}.bg-danger-surface-active{background-color:var(--color-danger-surface-active)}.bg-danger-surface-hover{background-color:var(--color-danger-surface-hover)}.bg-danger-surface-tinted{background-color:var(--color-danger-surface-tinted)}.bg-danger-tinted{background-color:var(--background-color-danger-tinted)}.bg-green-1{background-color:var(--color-green-1)}.bg-green-2{background-color:var(--color-green-2)}.bg-green-3{background-color:var(--color-green-3)}.bg-green-4{background-color:var(--color-green-4)}.bg-green-5{background-color:var(--color-green-5)}.bg-green-6{background-color:var(--color-green-6)}.bg-green-7{background-color:var(--color-green-7)}.bg-green-8{background-color:var(--color-green-8)}.bg-green-9{background-color:var(--color-green-9)}.bg-green-10{background-color:var(--color-green-10)}.bg-green-11{background-color:var(--color-green-11)}.bg-green-12{background-color:var(--color-green-12)}.bg-green-13{background-color:var(--color-green-13)}.bg-green-contrast-1{background-color:var(--color-green-contrast-1)}.bg-green-contrast-2{background-color:var(--color-green-contrast-2)}.bg-info{background-color:var(--background-color-info)}.bg-info-base{background-color:var(--color-info-base)}.bg-info-base-active{background-color:var(--color-info-base-active)}.bg-info-base-contrast{background-color:var(--color-info-base-contrast)}.bg-info-base-contrast-subtle{background-color:var(--color-info-base-contrast-subtle)}.bg-info-base-hover{background-color:var(--color-info-base-hover)}.bg-info-surface-active{background-color:var(--color-info-surface-active)}.bg-info-surface-hover{background-color:var(--color-info-surface-hover)}.bg-info-surface-tinted{background-color:var(--color-info-surface-tinted)}.bg-info-tinted{background-color:var(--background-color-info-tinted)}.bg-neutral{background-color:var(--background-color-neutral)}.bg-neutral-base{background-color:var(--color-neutral-base)}.bg-neutral-base-active{background-color:var(--color-neutral-base-active)}.bg-neutral-base-contrast{background-color:var(--color-neutral-base-contrast)}.bg-neutral-base-contrast-subtle{background-color:var(--color-neutral-base-contrast-subtle)}.bg-neutral-base-hover{background-color:var(--color-neutral-base-hover)}.bg-neutral-surface-active{background-color:var(--color-neutral-surface-active)}.bg-neutral-surface-hover{background-color:var(--color-neutral-surface-hover)}.bg-neutral-surface-tinted{background-color:var(--color-neutral-surface-tinted)}.bg-neutral-tinted{background-color:var(--background-color-neutral-tinted)}.bg-orange-1{background-color:var(--color-orange-1)}.bg-orange-2{background-color:var(--color-orange-2)}.bg-orange-3{background-color:var(--color-orange-3)}.bg-orange-4{background-color:var(--color-orange-4)}.bg-orange-5{background-color:var(--color-orange-5)}.bg-orange-6{background-color:var(--color-orange-6)}.bg-orange-7{background-color:var(--color-orange-7)}.bg-orange-8{background-color:var(--color-orange-8)}.bg-orange-9{background-color:var(--color-orange-9)}.bg-orange-10{background-color:var(--color-orange-10)}.bg-orange-11{background-color:var(--color-orange-11)}.bg-orange-12{background-color:var(--color-orange-12)}.bg-orange-13{background-color:var(--color-orange-13)}.bg-orange-contrast-1{background-color:var(--color-orange-contrast-1)}.bg-orange-contrast-2{background-color:var(--color-orange-contrast-2)}.bg-purple-1{background-color:var(--color-purple-1)}.bg-purple-2{background-color:var(--color-purple-2)}.bg-purple-3{background-color:var(--color-purple-3)}.bg-purple-4{background-color:var(--color-purple-4)}.bg-purple-5{background-color:var(--color-purple-5)}.bg-purple-6{background-color:var(--color-purple-6)}.bg-purple-7{background-color:var(--color-purple-7)}.bg-purple-8{background-color:var(--color-purple-8)}.bg-purple-9{background-color:var(--color-purple-9)}.bg-purple-10{background-color:var(--color-purple-10)}.bg-purple-11{background-color:var(--color-purple-11)}.bg-purple-12{background-color:var(--color-purple-12)}.bg-purple-13{background-color:var(--color-purple-13)}.bg-purple-contrast-1{background-color:var(--color-purple-contrast-1)}.bg-purple-contrast-2{background-color:var(--color-purple-contrast-2)}.bg-red-1{background-color:var(--color-red-1)}.bg-red-2{background-color:var(--color-red-2)}.bg-red-3{background-color:var(--color-red-3)}.bg-red-4{background-color:var(--color-red-4)}.bg-red-5{background-color:var(--color-red-5)}.bg-red-6{background-color:var(--color-red-6)}.bg-red-7{background-color:var(--color-red-7)}.bg-red-8{background-color:var(--color-red-8)}.bg-red-9{background-color:var(--color-red-9)}.bg-red-10{background-color:var(--color-red-10)}.bg-red-11{background-color:var(--color-red-11)}.bg-red-12{background-color:var(--color-red-12)}.bg-red-13{background-color:var(--color-red-13)}.bg-red-contrast-1{background-color:var(--color-red-contrast-1)}.bg-red-contrast-2{background-color:var(--color-red-contrast-2)}.bg-success{background-color:var(--background-color-success)}.bg-success-base{background-color:var(--color-success-base)}.bg-success-base-active{background-color:var(--color-success-base-active)}.bg-success-base-contrast{background-color:var(--color-success-base-contrast)}.bg-success-base-contrast-subtle{background-color:var(--color-success-base-contrast-subtle)}.bg-success-base-hover{background-color:var(--color-success-base-hover)}.bg-success-surface-active{background-color:var(--color-success-surface-active)}.bg-success-surface-hover{background-color:var(--color-success-surface-hover)}.bg-success-surface-tinted{background-color:var(--color-success-surface-tinted)}.bg-success-tinted{background-color:var(--background-color-success-tinted)}.bg-warning{background-color:var(--background-color-warning)}.bg-warning-base{background-color:var(--color-warning-base)}.bg-warning-base-active{background-color:var(--color-warning-base-active)}.bg-warning-base-contrast{background-color:var(--color-warning-base-contrast)}.bg-warning-base-contrast-subtle{background-color:var(--color-warning-base-contrast-subtle)}.bg-warning-base-hover{background-color:var(--color-warning-base-hover)}.bg-warning-surface-active{background-color:var(--color-warning-surface-active)}.bg-warning-surface-hover{background-color:var(--color-warning-surface-hover)}.bg-warning-surface-tinted{background-color:var(--color-warning-surface-tinted)}.bg-warning-tinted{background-color:var(--background-color-warning-tinted)}.bg-yellow-1{background-color:var(--color-yellow-1)}.bg-yellow-2{background-color:var(--color-yellow-2)}.bg-yellow-3{background-color:var(--color-yellow-3)}.bg-yellow-4{background-color:var(--color-yellow-4)}.bg-yellow-5{background-color:var(--color-yellow-5)}.bg-yellow-6{background-color:var(--color-yellow-6)}.bg-yellow-7{background-color:var(--color-yellow-7)}.bg-yellow-8{background-color:var(--color-yellow-8)}.bg-yellow-9{background-color:var(--color-yellow-9)}.bg-yellow-10{background-color:var(--color-yellow-10)}.bg-yellow-11{background-color:var(--color-yellow-11)}.bg-yellow-12{background-color:var(--color-yellow-12)}.bg-yellow-13{background-color:var(--color-yellow-13)}.bg-yellow-contrast-1{background-color:var(--color-yellow-contrast-1)}.bg-yellow-contrast-2{background-color:var(--color-yellow-contrast-2)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.px-2{padding-inline:var(--spacing-2)}.pt-2{padding-top:var(--spacing-2)}.pt-5{padding-top:var(--spacing-5)}.pb-8{padding-bottom:var(--spacing-8)}.pl-3{padding-left:var(--spacing-3)}.align-bottom{vertical-align:bottom}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.text-body-lg{font-size:var(--text-body-lg);line-height:var(--tw-leading,var(--text-body-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-lg--font-weight))}.text-body-long-lg{font-size:var(--text-body-long-lg);line-height:var(--tw-leading,var(--text-body-long-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-lg--font-weight))}.text-body-long-md{font-size:var(--text-body-long-md);line-height:var(--tw-leading,var(--text-body-long-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-md--font-weight))}.text-body-long-sm{font-size:var(--text-body-long-sm);line-height:var(--tw-leading,var(--text-body-long-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-sm--font-weight))}.text-body-long-xl{font-size:var(--text-body-long-xl);line-height:var(--tw-leading,var(--text-body-long-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-xl--font-weight))}.text-body-long-xs{font-size:var(--text-body-long-xs);line-height:var(--tw-leading,var(--text-body-long-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-xs--font-weight))}.text-body-md{font-size:var(--text-body-md);line-height:var(--tw-leading,var(--text-body-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-md--font-weight))}.text-body-short-lg{font-size:var(--text-body-short-lg);line-height:var(--tw-leading,var(--text-body-short-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-lg--font-weight))}.text-body-short-md{font-size:var(--text-body-short-md);line-height:var(--tw-leading,var(--text-body-short-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-md--font-weight))}.text-body-short-sm{font-size:var(--text-body-short-sm);line-height:var(--tw-leading,var(--text-body-short-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-sm--font-weight))}.text-body-short-xl{font-size:var(--text-body-short-xl);line-height:var(--tw-leading,var(--text-body-short-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-xl--font-weight))}.text-body-short-xs{font-size:var(--text-body-short-xs);line-height:var(--tw-leading,var(--text-body-short-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-xs--font-weight))}.text-body-sm{font-size:var(--text-body-sm);line-height:var(--tw-leading,var(--text-body-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-sm--font-weight))}.text-body-xl{font-size:var(--text-body-xl);line-height:var(--tw-leading,var(--text-body-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-body-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-xl--font-weight))}.text-body-xs{font-size:var(--text-body-xs);line-height:var(--tw-leading,var(--text-body-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-xs--font-weight))}.text-heading-2xl{font-size:var(--text-heading-2xl);line-height:var(--tw-leading,var(--text-heading-2xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xl--font-weight))}.text-heading-2xs{font-size:var(--text-heading-2xs);line-height:var(--tw-leading,var(--text-heading-2xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xs--font-weight))}.text-heading-lg{font-size:var(--text-heading-lg);line-height:var(--tw-leading,var(--text-heading-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-lg--font-weight))}.text-heading-md{font-size:var(--text-heading-md);line-height:var(--tw-leading,var(--text-heading-md--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-md--font-weight))}.text-heading-sm{font-size:var(--text-heading-sm);line-height:var(--tw-leading,var(--text-heading-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-sm--font-weight))}.text-heading-xl{font-size:var(--text-heading-xl);line-height:var(--tw-leading,var(--text-heading-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xl--font-weight))}.text-heading-xs{font-size:var(--text-heading-xs);line-height:var(--tw-leading,var(--text-heading-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xs--font-weight))}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-6{font-size:var(--text-6)}.text-7{font-size:var(--text-7)}.text-8{font-size:var(--text-8)}.text-\\[1\\.75rem\\]{font-size:1.75rem}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--text-color-accent)}.text-accent-subtle{color:var(--text-color-accent-subtle)}.text-brand1{color:var(--text-color-brand1)}.text-brand1-subtle{color:var(--text-color-brand1-subtle)}.text-brand2{color:var(--text-color-brand2)}.text-brand2-subtle{color:var(--text-color-brand2-subtle)}.text-brand3{color:var(--text-color-brand3)}.text-brand3-subtle{color:var(--text-color-brand3-subtle)}.text-danger{color:var(--text-color-danger)}.text-danger-subtle{color:var(--text-color-danger-subtle)}.text-info{color:var(--text-color-info)}.text-info-subtle{color:var(--text-color-info-subtle)}.text-neutral{color:var(--text-color-neutral)}.text-neutral-subtle{color:var(--text-color-neutral-subtle)}.text-success{color:var(--text-color-success)}.text-success-subtle{color:var(--text-color-success-subtle)}.text-warning{color:var(--text-color-warning)}.text-warning-subtle{color:var(--text-color-warning-subtle)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-focus-visible{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#00347d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--ds-shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:var(--ds-shadow-md);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--ds-shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:var(--ds-shadow-xl);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:var(--ds-shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.outline-transparent{outline-color:#0000}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}:is(.\\*\\:border>*){border-style:var(--tw-border-style);border-width:1px}:is(.\\*\\:border-2>*){border-style:var(--tw-border-style);border-width:2px}:is(.\\*\\:p-2>*){padding:var(--spacing-2)}:is(.\\*\\:p-4>*){padding:var(--spacing-4)}.focus-within\\:shadow-focus-inner:focus-within{--tw-shadow-color:var(--color-focus-inner)}.focus-within\\:outline-3:focus-within{outline-style:var(--tw-outline-style);outline-width:3px}.focus-within\\:outline-offset-3:focus-within{outline-offset:3px}.focus-within\\:outline-focus-outer:focus-within{outline-color:var(--color-focus-outer)}}@property --tw-rotate-x{syntax:"*";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"*";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"*";inherits:false;initial-value:rotateZ(0)}@property --tw-skew-x{syntax:"*";inherits:false;initial-value:skewX(0)}@property --tw-skew-y{syntax:"*";inherits:false;initial-value:skewY(0)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}
|
|
2
|
+
const tailwindStyles = css`/*! tailwindcss v4.1.1 | MIT License | https://tailwindcss.com */
|
|
3
|
+
@layer theme{:root,:host{--spacing:.25rem;--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--radius-sm:var(--ds-border-radius-sm);--radius-md:var(--ds-border-radius-md);--radius-lg:var(--ds-border-radius-lg);--radius-xl:var(--ds-border-radius-xl);--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-mono-font-family:var(--font-mono);--radius:var(--ds-border-radius-default);--spacing-1:var(--ds-size-1);--spacing-2:var(--ds-size-2);--spacing-3:var(--ds-size-3);--spacing-4:var(--ds-size-4);--spacing-5:var(--ds-size-5);--spacing-6:var(--ds-size-6);--spacing-7:var(--ds-size-7);--spacing-8:var(--ds-size-8);--radius-full:var(--ds-border-radius-full);--border-width-highlight:var(--ds-border-width-highlight);--font-sans:"Inter","Arial",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-sans--font-feature-settings:"cv05" 1;--font-mono:IBM Plex Mono;--text-6:var(--ds-font-size-6);--text-7:var(--ds-font-size-7);--text-8:var(--ds-font-size-8);--text-body-xs:var(--ds-body-xs-font-size);--text-body-xs--font-weight:var(--ds-body-xs-font-weight);--text-body-xs--letter-spacing:var(--ds-body-xs-letter-spacing);--text-body-xs--line-height:var(--ds-body-xs-line-height);--text-body-sm:var(--ds-body-sm-font-size);--text-body-sm--font-weight:var(--ds-body-sm-font-weight);--text-body-sm--letter-spacing:var(--ds-body-sm-letter-spacing);--text-body-sm--line-height:var(--ds-body-sm-line-height);--text-body-md:var(--ds-body-md-font-size);--text-body-md--font-weight:var(--ds-body-md-font-weight);--text-body-md--letter-spacing:var(--ds-body-md-letter-spacing);--text-body-md--line-height:var(--ds-body-md-line-height);--text-body-lg:var(--ds-body-lg-font-size);--text-body-lg--font-weight:var(--ds-body-lg-font-weight);--text-body-lg--letter-spacing:var(--ds-body-lg-letter-spacing);--text-body-lg--line-height:var(--ds-body-lg-line-height);--text-body-xl:var(--ds-body-xl-font-size);--text-body-xl--font-weight:var(--ds-body-xl-font-weight);--text-body-xl--letter-spacing:var(--ds-body-xl-letter-spacing);--text-body-xl--line-height:var(--ds-body-xl-line-height);--text-body-short-xs:var(--ds-body-short-xs-font-size);--text-body-short-xs--font-weight:var(--ds-body-short-xs-font-weight);--text-body-short-xs--letter-spacing:var(--ds-body-short-xs-letter-spacing);--text-body-short-xs--line-height:var(--ds-body-short-xs-line-height);--text-body-short-sm:var(--ds-body-short-sm-font-size);--text-body-short-sm--font-weight:var(--ds-body-short-sm-font-weight);--text-body-short-sm--letter-spacing:var(--ds-body-short-sm-letter-spacing);--text-body-short-sm--line-height:var(--ds-body-short-sm-line-height);--text-body-short-md:var(--ds-body-short-md-font-size);--text-body-short-md--font-weight:var(--ds-body-short-md-font-weight);--text-body-short-md--letter-spacing:var(--ds-body-short-md-letter-spacing);--text-body-short-md--line-height:var(--ds-body-short-md-line-height);--text-body-short-lg:var(--ds-body-short-lg-font-size);--text-body-short-lg--font-weight:var(--ds-body-short-lg-font-weight);--text-body-short-lg--letter-spacing:var(--ds-body-short-lg-letter-spacing);--text-body-short-lg--line-height:var(--ds-body-short-lg-line-height);--text-body-short-xl:var(--ds-body-short-xl-font-size);--text-body-short-xl--font-weight:var(--ds-body-short-xl-font-weight);--text-body-short-xl--letter-spacing:var(--ds-body-short-xl-letter-spacing);--text-body-short-xl--line-height:var(--ds-body-short-xl-line-height);--text-body-long-xs:var(--ds-body-long-xs-font-size);--text-body-long-xs--font-weight:var(--ds-body-long-xs-font-weight);--text-body-long-xs--letter-spacing:var(--ds-body-long-xs-letter-spacing);--text-body-long-xs--line-height:var(--ds-body-long-xs-line-height);--text-body-long-sm:var(--ds-body-long-sm-font-size);--text-body-long-sm--font-weight:var(--ds-body-long-sm-font-weight);--text-body-long-sm--letter-spacing:var(--ds-body-long-sm-letter-spacing);--text-body-long-sm--line-height:var(--ds-body-long-sm-line-height);--text-body-long-md:var(--ds-body-long-md-font-size);--text-body-long-md--font-weight:var(--ds-body-long-md-font-weight);--text-body-long-md--letter-spacing:var(--ds-body-long-md-letter-spacing);--text-body-long-md--line-height:var(--ds-body-long-md-line-height);--text-body-long-lg:var(--ds-body-long-lg-font-size);--text-body-long-lg--font-weight:var(--ds-body-long-lg-font-weight);--text-body-long-lg--letter-spacing:var(--ds-body-long-lg-letter-spacing);--text-body-long-lg--line-height:var(--ds-body-long-lg-line-height);--text-body-long-xl:var(--ds-body-long-xl-font-size);--text-body-long-xl--font-weight:var(--ds-body-long-xl-font-weight);--text-body-long-xl--letter-spacing:var(--ds-body-long-xl-letter-spacing);--text-body-long-xl--line-height:var(--ds-body-long-xl-line-height);--text-heading-2xs:var(--ds-heading-2xs-font-size);--text-heading-2xs--font-weight:var(--ds-heading-2xs-font-weight);--text-heading-2xs--letter-spacing:var(--ds-heading-2xs-letter-spacing);--text-heading-2xs--line-height:var(--ds-heading-2xs-line-height);--text-heading-xs:var(--ds-heading-xs-font-size);--text-heading-xs--font-weight:var(--ds-heading-xs-font-weight);--text-heading-xs--letter-spacing:var(--ds-heading-xs-letter-spacing);--text-heading-xs--line-height:var(--ds-heading-xs-line-height);--text-heading-sm:var(--ds-heading-sm-font-size);--text-heading-sm--font-weight:var(--ds-heading-sm-font-weight);--text-heading-sm--letter-spacing:var(--ds-heading-sm-letter-spacing);--text-heading-sm--line-height:var(--ds-heading-sm-line-height);--text-heading-md:var(--ds-heading-md-font-size);--text-heading-md--font-weight:var(--ds-heading-md-font-weight);--text-heading-md--letter-spacing:var(--ds-heading-md-letter-spacing);--text-heading-md--line-height:var(--ds-heading-md-line-height);--text-heading-lg:var(--ds-heading-lg-font-size);--text-heading-lg--font-weight:var(--ds-heading-lg-font-weight);--text-heading-lg--letter-spacing:var(--ds-heading-lg-letter-spacing);--text-heading-lg--line-height:var(--ds-heading-lg-line-height);--text-heading-xl:var(--ds-heading-xl-font-size);--text-heading-xl--font-weight:var(--ds-heading-xl-font-weight);--text-heading-xl--letter-spacing:var(--ds-heading-xl-letter-spacing);--text-heading-xl--line-height:var(--ds-heading-xl-line-height);--text-heading-2xl:var(--ds-heading-2xl-font-size);--text-heading-2xl--font-weight:var(--ds-heading-2xl-font-weight);--text-heading-2xl--letter-spacing:var(--ds-heading-2xl-letter-spacing);--text-heading-2xl--line-height:var(--ds-heading-2xl-line-height);--color-blue-1:var(--ds-global-blue-1);--color-blue-2:var(--ds-global-blue-2);--color-blue-3:var(--ds-global-blue-3);--color-blue-4:var(--ds-global-blue-4);--color-blue-5:var(--ds-global-blue-5);--color-blue-6:var(--ds-global-blue-6);--color-blue-7:var(--ds-global-blue-7);--color-blue-8:var(--ds-global-blue-8);--color-blue-9:var(--ds-global-blue-9);--color-blue-10:var(--ds-global-blue-10);--color-blue-11:var(--ds-global-blue-11);--color-blue-12:var(--ds-global-blue-12);--color-blue-13:var(--ds-global-blue-13);--color-blue-contrast-1:var(--ds-global-blue-contrast-1);--color-blue-contrast-2:var(--ds-global-blue-contrast-2);--color-green-1:var(--ds-global-green-1);--color-green-2:var(--ds-global-green-2);--color-green-3:var(--ds-global-green-3);--color-green-4:var(--ds-global-green-4);--color-green-5:var(--ds-global-green-5);--color-green-6:var(--ds-global-green-6);--color-green-7:var(--ds-global-green-7);--color-green-8:var(--ds-global-green-8);--color-green-9:var(--ds-global-green-9);--color-green-10:var(--ds-global-green-10);--color-green-11:var(--ds-global-green-11);--color-green-12:var(--ds-global-green-12);--color-green-13:var(--ds-global-green-13);--color-green-contrast-1:var(--ds-global-green-contrast-1);--color-green-contrast-2:var(--ds-global-green-contrast-2);--color-orange-1:var(--ds-global-orange-1);--color-orange-2:var(--ds-global-orange-2);--color-orange-3:var(--ds-global-orange-3);--color-orange-4:var(--ds-global-orange-4);--color-orange-5:var(--ds-global-orange-5);--color-orange-6:var(--ds-global-orange-6);--color-orange-7:var(--ds-global-orange-7);--color-orange-8:var(--ds-global-orange-8);--color-orange-9:var(--ds-global-orange-9);--color-orange-10:var(--ds-global-orange-10);--color-orange-11:var(--ds-global-orange-11);--color-orange-12:var(--ds-global-orange-12);--color-orange-13:var(--ds-global-orange-13);--color-orange-contrast-1:var(--ds-global-orange-contrast-1);--color-orange-contrast-2:var(--ds-global-orange-contrast-2);--color-purple-1:var(--ds-global-purple-1);--color-purple-2:var(--ds-global-purple-2);--color-purple-3:var(--ds-global-purple-3);--color-purple-4:var(--ds-global-purple-4);--color-purple-5:var(--ds-global-purple-5);--color-purple-6:var(--ds-global-purple-6);--color-purple-7:var(--ds-global-purple-7);--color-purple-8:var(--ds-global-purple-8);--color-purple-9:var(--ds-global-purple-9);--color-purple-10:var(--ds-global-purple-10);--color-purple-11:var(--ds-global-purple-11);--color-purple-12:var(--ds-global-purple-12);--color-purple-13:var(--ds-global-purple-13);--color-purple-contrast-1:var(--ds-global-purple-contrast-1);--color-purple-contrast-2:var(--ds-global-purple-contrast-2);--color-red-1:var(--ds-global-red-1);--color-red-2:var(--ds-global-red-2);--color-red-3:var(--ds-global-red-3);--color-red-4:var(--ds-global-red-4);--color-red-5:var(--ds-global-red-5);--color-red-6:var(--ds-global-red-6);--color-red-7:var(--ds-global-red-7);--color-red-8:var(--ds-global-red-8);--color-red-9:var(--ds-global-red-9);--color-red-10:var(--ds-global-red-10);--color-red-11:var(--ds-global-red-11);--color-red-12:var(--ds-global-red-12);--color-red-13:var(--ds-global-red-13);--color-red-contrast-1:var(--ds-global-red-contrast-1);--color-red-contrast-2:var(--ds-global-red-contrast-2);--color-yellow-1:var(--ds-global-yellow-1);--color-yellow-2:var(--ds-global-yellow-2);--color-yellow-3:var(--ds-global-yellow-3);--color-yellow-4:var(--ds-global-yellow-4);--color-yellow-5:var(--ds-global-yellow-5);--color-yellow-6:var(--ds-global-yellow-6);--color-yellow-7:var(--ds-global-yellow-7);--color-yellow-8:var(--ds-global-yellow-8);--color-yellow-9:var(--ds-global-yellow-9);--color-yellow-10:var(--ds-global-yellow-10);--color-yellow-11:var(--ds-global-yellow-11);--color-yellow-12:var(--ds-global-yellow-12);--color-yellow-13:var(--ds-global-yellow-13);--color-yellow-contrast-1:var(--ds-global-yellow-contrast-1);--color-yellow-contrast-2:var(--ds-global-yellow-contrast-2);--color-accent-surface-tinted:var(--ds-color-accent-surface-tinted);--color-accent-surface-hover:var(--ds-color-accent-surface-hover);--color-accent-surface-active:var(--ds-color-accent-surface-active);--color-accent-base:var(--ds-color-accent-base-default);--color-accent-base-hover:var(--ds-color-accent-base-hover);--color-accent-base-active:var(--ds-color-accent-base-active);--color-accent-base-contrast:var(--ds-color-accent-base-contrast-default);--color-accent-base-contrast-subtle:var(--ds-color-accent-base-contrast-subtle);--color-neutral-surface-tinted:var(--ds-color-neutral-surface-tinted);--color-neutral-surface-hover:var(--ds-color-neutral-surface-hover);--color-neutral-surface-active:var(--ds-color-neutral-surface-active);--color-neutral-base:var(--ds-color-neutral-base-default);--color-neutral-base-hover:var(--ds-color-neutral-base-hover);--color-neutral-base-active:var(--ds-color-neutral-base-active);--color-neutral-base-contrast:var(--ds-color-neutral-base-contrast-default);--color-neutral-base-contrast-subtle:var(--ds-color-neutral-base-contrast-subtle);--color-brand1-surface-tinted:var(--ds-color-brand1-surface-tinted);--color-brand1-surface-hover:var(--ds-color-brand1-surface-hover);--color-brand1-surface-active:var(--ds-color-brand1-surface-active);--color-brand1-base:var(--ds-color-brand1-base-default);--color-brand1-base-hover:var(--ds-color-brand1-base-hover);--color-brand1-base-active:var(--ds-color-brand1-base-active);--color-brand1-base-contrast:var(--ds-color-brand1-base-contrast-default);--color-brand1-base-contrast-subtle:var(--ds-color-brand1-base-contrast-subtle);--color-brand2-surface-tinted:var(--ds-color-brand2-surface-tinted);--color-brand2-surface-hover:var(--ds-color-brand2-surface-hover);--color-brand2-surface-active:var(--ds-color-brand2-surface-active);--color-brand2-base:var(--ds-color-brand2-base-default);--color-brand2-base-hover:var(--ds-color-brand2-base-hover);--color-brand2-base-active:var(--ds-color-brand2-base-active);--color-brand2-base-contrast:var(--ds-color-brand2-base-contrast-default);--color-brand2-base-contrast-subtle:var(--ds-color-brand2-base-contrast-subtle);--color-brand3-surface-tinted:var(--ds-color-brand3-surface-tinted);--color-brand3-surface-hover:var(--ds-color-brand3-surface-hover);--color-brand3-surface-active:var(--ds-color-brand3-surface-active);--color-brand3-base:var(--ds-color-brand3-base-default);--color-brand3-base-active:var(--ds-color-brand3-base-active);--color-brand3-base-hover:var(--ds-color-brand3-base-hover);--color-brand3-base-contrast:var(--ds-color-brand3-base-contrast-default);--color-brand3-base-contrast-subtle:var(--ds-color-brand3-base-contrast-subtle);--color-danger-surface-tinted:var(--ds-color-danger-surface-tinted);--color-danger-surface-hover:var(--ds-color-danger-surface-hover);--color-danger-surface-active:var(--ds-color-danger-surface-active);--color-danger-base:var(--ds-color-danger-base-default);--color-danger-base-hover:var(--ds-color-danger-base-hover);--color-danger-base-active:var(--ds-color-danger-base-active);--color-danger-base-contrast:var(--ds-color-danger-base-contrast-default);--color-danger-base-contrast-subtle:var(--ds-color-danger-base-contrast-subtle);--color-info-surface-tinted:var(--ds-color-info-surface-tinted);--color-info-surface-hover:var(--ds-color-info-surface-hover);--color-info-surface-active:var(--ds-color-info-surface-active);--color-info-base:var(--ds-color-info-base-default);--color-info-base-hover:var(--ds-color-info-base-hover);--color-info-base-active:var(--ds-color-info-base-active);--color-info-base-contrast:var(--ds-color-info-base-contrast-default);--color-info-base-contrast-subtle:var(--ds-color-info-base-contrast-subtle);--color-success-surface-tinted:var(--ds-color-success-surface-tinted);--color-success-surface-hover:var(--ds-color-success-surface-hover);--color-success-surface-active:var(--ds-color-success-surface-active);--color-success-base:var(--ds-color-success-base-default);--color-success-base-hover:var(--ds-color-success-base-hover);--color-success-base-active:var(--ds-color-success-base-active);--color-success-base-contrast:var(--ds-color-success-base-contrast-default);--color-success-base-contrast-subtle:var(--ds-color-success-base-contrast-subtle);--color-warning-surface-tinted:var(--ds-color-warning-surface-tinted);--color-warning-surface-hover:var(--ds-color-warning-surface-hover);--color-warning-surface-active:var(--ds-color-warning-surface-active);--color-warning-base:var(--ds-color-warning-base-default);--color-warning-base-hover:var(--ds-color-warning-base-hover);--color-warning-base-active:var(--ds-color-warning-base-active);--color-warning-base-contrast:var(--ds-color-warning-base-contrast-default);--color-warning-base-contrast-subtle:var(--ds-color-warning-base-contrast-subtle);--color-focus-inner:var(--ds-color-focus-inner);--color-focus-outer:var(--ds-color-focus-outer);--background-color-accent:var(--ds-color-accent-background-default);--background-color-accent-tinted:var(--ds-color-accent-background-tinted);--background-color-brand1:var(--ds-color-brand1-background-default);--background-color-brand1-tinted:var(--ds-color-brand1-background-tinted);--background-color-brand2:var(--ds-color-brand2-background-default);--background-color-brand2-tinted:var(--ds-color-brand2-background-tinted);--background-color-brand3:var(--ds-color-brand3-background-default);--background-color-brand3-tinted:var(--ds-color-brand3-background-tinted);--background-color-danger:var(--ds-color-danger-background-default);--background-color-danger-tinted:var(--ds-color-danger-background-tinted);--background-color-info:var(--ds-color-info-background-default);--background-color-info-tinted:var(--ds-color-info-background-tinted);--background-color-neutral:var(--ds-color-neutral-background-default);--background-color-neutral-tinted:var(--ds-color-neutral-background-tinted);--background-color-success:var(--ds-color-success-background-default);--background-color-success-tinted:var(--ds-color-success-background-tinted);--background-color-warning:var(--ds-color-warning-background-default);--background-color-warning-tinted:var(--ds-color-warning-background-tinted);--border-color-accent:var(--ds-color-accent-border-default);--border-color-accent-subtle:var(--ds-color-accent-border-subtle);--border-color-brand1:var(--ds-color-brand1-border-default);--border-color-brand1-subtle:var(--ds-color-brand1-border-subtle);--border-color-brand2:var(--ds-color-brand2-border-default);--border-color-brand2-subtle:var(--ds-color-brand2-border-subtle);--border-color-brand3:var(--ds-color-brand3-border-default);--border-color-brand3-subtle:var(--ds-color-brand3-border-subtle);--border-color-danger:var(--ds-color-danger-border-default);--border-color-danger-subtle:var(--ds-color-danger-border-subtle);--border-color-info:var(--ds-color-info-border-default);--border-color-info-subtle:var(--ds-color-info-border-subtle);--border-color-neutral:var(--ds-color-neutral-border-default);--border-color-neutral-subtle:var(--ds-color-neutral-border-subtle);--border-color-success:var(--ds-color-success-border-default);--border-color-success-subtle:var(--ds-color-success-border-subtle);--border-color-warning:var(--ds-color-warning-border-default);--border-color-warning-subtle:var(--ds-color-warning-border-subtle);--text-color-accent:var(--ds-color-accent-text-default);--text-color-accent-subtle:var(--ds-color-accent-text-subtle);--text-color-brand1:var(--ds-color-brand1-text-default);--text-color-brand1-subtle:var(--ds-color-brand1-text-subtle);--text-color-brand2:var(--ds-color-brand2-text-default);--text-color-brand2-subtle:var(--ds-color-brand2-text-subtle);--text-color-brand3:var(--ds-color-brand3-text-default);--text-color-brand3-subtle:var(--ds-color-brand3-text-subtle);--text-color-danger:var(--ds-color-danger-text-default);--text-color-danger-subtle:var(--ds-color-danger-text-subtle);--text-color-info:var(--ds-color-info-text-default);--text-color-info-subtle:var(--ds-color-info-text-subtle);--text-color-neutral:var(--ds-color-neutral-text-default);--text-color-neutral-subtle:var(--ds-color-neutral-text-subtle);--text-color-success:var(--ds-color-success-text-default);--text-color-success-subtle:var(--ds-color-success-text-subtle);--text-color-warning:var(--ds-color-warning-text-default);--text-color-warning-subtle:var(--ds-color-warning-text-subtle)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}:focus-visible{--tw-outline-style:none;--tw-shadow:0 0 0 3px var(--tw-shadow-color,#00347d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline-style:none}@media (forced-colors:active){:focus-visible{outline-offset:2px;outline:2px solid #0000}}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.col-span-2{grid-column:span 2/span 2}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-24{margin:calc(var(--spacing)*24)}.m-44{margin:calc(var(--spacing)*44)}.m-56{margin:calc(var(--spacing)*56)}.m-auto{margin:auto}.mt-1{margin-top:var(--spacing-1)}.mb-2{margin-bottom:var(--spacing-2)}.mb-64{margin-bottom:calc(var(--spacing)*64)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.h-4{height:var(--spacing-4)}.h-5{height:var(--spacing-5)}.h-6{height:var(--spacing-6)}.h-7{height:var(--spacing-7)}.h-8{height:var(--spacing-8)}.h-full{height:100%}.w-5{width:var(--spacing-5)}.w-6{width:var(--spacing-6)}.w-7{width:var(--spacing-7)}.w-80{width:calc(var(--spacing)*80)}.w-\\[calc\\(1em\\+1rem\\*2\\)\\]{width:calc(1em + 2rem)}.w-full{width:100%}.flex-1{flex:1}.shrink{flex-shrink:1}.transform{transform:var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)}.animate-dash{animation:1.4s cubic-bezier(.2,-.01,.51,.96) infinite dash}.animate-spin-slow{animation:2.2s linear infinite spin}.resize{resize:both}.auto-rows-\\[40px\\]{grid-auto-rows:40px}.auto-rows-\\[40px_60px\\]{grid-auto-rows:40px 60px}.auto-rows-\\[60px\\]{grid-auto-rows:60px}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-15{grid-template-columns:repeat(15,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing-1)}.gap-2{gap:var(--spacing-2)}.gap-3{gap:var(--spacing-3)}.gap-4{gap:var(--spacing-4)}.gap-x-4{column-gap:var(--spacing-4)}.self-stretch{align-self:stretch}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:var(--radius)}.rounded-full{border-radius:3.40282e38px;border-radius:var(--radius-full)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-highlight{border-style:var(--tw-border-style);border-width:var(--border-width-highlight)}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-accent{border-color:var(--border-color-accent)}.border-accent-subtle{border-color:var(--border-color-accent-subtle)}.border-brand1{border-color:var(--border-color-brand1)}.border-brand1-subtle{border-color:var(--border-color-brand1-subtle)}.border-brand2{border-color:var(--border-color-brand2)}.border-brand2-subtle{border-color:var(--border-color-brand2-subtle)}.border-brand3{border-color:var(--border-color-brand3)}.border-brand3-subtle{border-color:var(--border-color-brand3-subtle)}.border-danger{border-color:var(--border-color-danger)}.border-danger-subtle{border-color:var(--border-color-danger-subtle)}.border-info{border-color:var(--border-color-info)}.border-info-subtle{border-color:var(--border-color-info-subtle)}.border-neutral{border-color:var(--border-color-neutral)}.border-neutral-subtle{border-color:var(--border-color-neutral-subtle)}.border-success{border-color:var(--border-color-success)}.border-success-subtle{border-color:var(--border-color-success-subtle)}.border-warning{border-color:var(--border-color-warning)}.border-warning-subtle{border-color:var(--border-color-warning-subtle)}.bg-accent{background-color:var(--background-color-accent)}.bg-accent-base{background-color:var(--color-accent-base)}.bg-accent-base-active{background-color:var(--color-accent-base-active)}.bg-accent-base-contrast{background-color:var(--color-accent-base-contrast)}.bg-accent-base-contrast-subtle{background-color:var(--color-accent-base-contrast-subtle)}.bg-accent-base-hover{background-color:var(--color-accent-base-hover)}.bg-accent-surface-active{background-color:var(--color-accent-surface-active)}.bg-accent-surface-hover{background-color:var(--color-accent-surface-hover)}.bg-accent-surface-tinted{background-color:var(--color-accent-surface-tinted)}.bg-accent-tinted{background-color:var(--background-color-accent-tinted)}.bg-blue-1{background-color:var(--color-blue-1)}.bg-blue-2{background-color:var(--color-blue-2)}.bg-blue-3{background-color:var(--color-blue-3)}.bg-blue-4{background-color:var(--color-blue-4)}.bg-blue-5{background-color:var(--color-blue-5)}.bg-blue-6{background-color:var(--color-blue-6)}.bg-blue-7{background-color:var(--color-blue-7)}.bg-blue-8{background-color:var(--color-blue-8)}.bg-blue-9{background-color:var(--color-blue-9)}.bg-blue-10{background-color:var(--color-blue-10)}.bg-blue-11{background-color:var(--color-blue-11)}.bg-blue-12{background-color:var(--color-blue-12)}.bg-blue-13{background-color:var(--color-blue-13)}.bg-blue-contrast-1{background-color:var(--color-blue-contrast-1)}.bg-blue-contrast-2{background-color:var(--color-blue-contrast-2)}.bg-brand1{background-color:var(--background-color-brand1)}.bg-brand1-base{background-color:var(--color-brand1-base)}.bg-brand1-base-active{background-color:var(--color-brand1-base-active)}.bg-brand1-base-contrast{background-color:var(--color-brand1-base-contrast)}.bg-brand1-base-contrast-subtle{background-color:var(--color-brand1-base-contrast-subtle)}.bg-brand1-base-hover{background-color:var(--color-brand1-base-hover)}.bg-brand1-surface-active{background-color:var(--color-brand1-surface-active)}.bg-brand1-surface-hover{background-color:var(--color-brand1-surface-hover)}.bg-brand1-surface-tinted{background-color:var(--color-brand1-surface-tinted)}.bg-brand1-tinted{background-color:var(--background-color-brand1-tinted)}.bg-brand2{background-color:var(--background-color-brand2)}.bg-brand2-base{background-color:var(--color-brand2-base)}.bg-brand2-base-active{background-color:var(--color-brand2-base-active)}.bg-brand2-base-contrast{background-color:var(--color-brand2-base-contrast)}.bg-brand2-base-contrast-subtle{background-color:var(--color-brand2-base-contrast-subtle)}.bg-brand2-base-hover{background-color:var(--color-brand2-base-hover)}.bg-brand2-surface-active{background-color:var(--color-brand2-surface-active)}.bg-brand2-surface-hover{background-color:var(--color-brand2-surface-hover)}.bg-brand2-surface-tinted{background-color:var(--color-brand2-surface-tinted)}.bg-brand2-tinted{background-color:var(--background-color-brand2-tinted)}.bg-brand3{background-color:var(--background-color-brand3)}.bg-brand3-base{background-color:var(--color-brand3-base)}.bg-brand3-base-active{background-color:var(--color-brand3-base-active)}.bg-brand3-base-contrast{background-color:var(--color-brand3-base-contrast)}.bg-brand3-base-contrast-subtle{background-color:var(--color-brand3-base-contrast-subtle)}.bg-brand3-base-hover{background-color:var(--color-brand3-base-hover)}.bg-brand3-surface-active{background-color:var(--color-brand3-surface-active)}.bg-brand3-surface-hover{background-color:var(--color-brand3-surface-hover)}.bg-brand3-surface-tinted{background-color:var(--color-brand3-surface-tinted)}.bg-brand3-tinted{background-color:var(--background-color-brand3-tinted)}.bg-danger{background-color:var(--background-color-danger)}.bg-danger-base{background-color:var(--color-danger-base)}.bg-danger-base-active{background-color:var(--color-danger-base-active)}.bg-danger-base-contrast{background-color:var(--color-danger-base-contrast)}.bg-danger-base-contrast-subtle{background-color:var(--color-danger-base-contrast-subtle)}.bg-danger-base-hover{background-color:var(--color-danger-base-hover)}.bg-danger-surface-active{background-color:var(--color-danger-surface-active)}.bg-danger-surface-hover{background-color:var(--color-danger-surface-hover)}.bg-danger-surface-tinted{background-color:var(--color-danger-surface-tinted)}.bg-danger-tinted{background-color:var(--background-color-danger-tinted)}.bg-green-1{background-color:var(--color-green-1)}.bg-green-2{background-color:var(--color-green-2)}.bg-green-3{background-color:var(--color-green-3)}.bg-green-4{background-color:var(--color-green-4)}.bg-green-5{background-color:var(--color-green-5)}.bg-green-6{background-color:var(--color-green-6)}.bg-green-7{background-color:var(--color-green-7)}.bg-green-8{background-color:var(--color-green-8)}.bg-green-9{background-color:var(--color-green-9)}.bg-green-10{background-color:var(--color-green-10)}.bg-green-11{background-color:var(--color-green-11)}.bg-green-12{background-color:var(--color-green-12)}.bg-green-13{background-color:var(--color-green-13)}.bg-green-contrast-1{background-color:var(--color-green-contrast-1)}.bg-green-contrast-2{background-color:var(--color-green-contrast-2)}.bg-info{background-color:var(--background-color-info)}.bg-info-base{background-color:var(--color-info-base)}.bg-info-base-active{background-color:var(--color-info-base-active)}.bg-info-base-contrast{background-color:var(--color-info-base-contrast)}.bg-info-base-contrast-subtle{background-color:var(--color-info-base-contrast-subtle)}.bg-info-base-hover{background-color:var(--color-info-base-hover)}.bg-info-surface-active{background-color:var(--color-info-surface-active)}.bg-info-surface-hover{background-color:var(--color-info-surface-hover)}.bg-info-surface-tinted{background-color:var(--color-info-surface-tinted)}.bg-info-tinted{background-color:var(--background-color-info-tinted)}.bg-neutral{background-color:var(--background-color-neutral)}.bg-neutral-base{background-color:var(--color-neutral-base)}.bg-neutral-base-active{background-color:var(--color-neutral-base-active)}.bg-neutral-base-contrast{background-color:var(--color-neutral-base-contrast)}.bg-neutral-base-contrast-subtle{background-color:var(--color-neutral-base-contrast-subtle)}.bg-neutral-base-hover{background-color:var(--color-neutral-base-hover)}.bg-neutral-surface-active{background-color:var(--color-neutral-surface-active)}.bg-neutral-surface-hover{background-color:var(--color-neutral-surface-hover)}.bg-neutral-surface-tinted{background-color:var(--color-neutral-surface-tinted)}.bg-neutral-tinted{background-color:var(--background-color-neutral-tinted)}.bg-orange-1{background-color:var(--color-orange-1)}.bg-orange-2{background-color:var(--color-orange-2)}.bg-orange-3{background-color:var(--color-orange-3)}.bg-orange-4{background-color:var(--color-orange-4)}.bg-orange-5{background-color:var(--color-orange-5)}.bg-orange-6{background-color:var(--color-orange-6)}.bg-orange-7{background-color:var(--color-orange-7)}.bg-orange-8{background-color:var(--color-orange-8)}.bg-orange-9{background-color:var(--color-orange-9)}.bg-orange-10{background-color:var(--color-orange-10)}.bg-orange-11{background-color:var(--color-orange-11)}.bg-orange-12{background-color:var(--color-orange-12)}.bg-orange-13{background-color:var(--color-orange-13)}.bg-orange-contrast-1{background-color:var(--color-orange-contrast-1)}.bg-orange-contrast-2{background-color:var(--color-orange-contrast-2)}.bg-purple-1{background-color:var(--color-purple-1)}.bg-purple-2{background-color:var(--color-purple-2)}.bg-purple-3{background-color:var(--color-purple-3)}.bg-purple-4{background-color:var(--color-purple-4)}.bg-purple-5{background-color:var(--color-purple-5)}.bg-purple-6{background-color:var(--color-purple-6)}.bg-purple-7{background-color:var(--color-purple-7)}.bg-purple-8{background-color:var(--color-purple-8)}.bg-purple-9{background-color:var(--color-purple-9)}.bg-purple-10{background-color:var(--color-purple-10)}.bg-purple-11{background-color:var(--color-purple-11)}.bg-purple-12{background-color:var(--color-purple-12)}.bg-purple-13{background-color:var(--color-purple-13)}.bg-purple-contrast-1{background-color:var(--color-purple-contrast-1)}.bg-purple-contrast-2{background-color:var(--color-purple-contrast-2)}.bg-red-1{background-color:var(--color-red-1)}.bg-red-2{background-color:var(--color-red-2)}.bg-red-3{background-color:var(--color-red-3)}.bg-red-4{background-color:var(--color-red-4)}.bg-red-5{background-color:var(--color-red-5)}.bg-red-6{background-color:var(--color-red-6)}.bg-red-7{background-color:var(--color-red-7)}.bg-red-8{background-color:var(--color-red-8)}.bg-red-9{background-color:var(--color-red-9)}.bg-red-10{background-color:var(--color-red-10)}.bg-red-11{background-color:var(--color-red-11)}.bg-red-12{background-color:var(--color-red-12)}.bg-red-13{background-color:var(--color-red-13)}.bg-red-contrast-1{background-color:var(--color-red-contrast-1)}.bg-red-contrast-2{background-color:var(--color-red-contrast-2)}.bg-success{background-color:var(--background-color-success)}.bg-success-base{background-color:var(--color-success-base)}.bg-success-base-active{background-color:var(--color-success-base-active)}.bg-success-base-contrast{background-color:var(--color-success-base-contrast)}.bg-success-base-contrast-subtle{background-color:var(--color-success-base-contrast-subtle)}.bg-success-base-hover{background-color:var(--color-success-base-hover)}.bg-success-surface-active{background-color:var(--color-success-surface-active)}.bg-success-surface-hover{background-color:var(--color-success-surface-hover)}.bg-success-surface-tinted{background-color:var(--color-success-surface-tinted)}.bg-success-tinted{background-color:var(--background-color-success-tinted)}.bg-warning{background-color:var(--background-color-warning)}.bg-warning-base{background-color:var(--color-warning-base)}.bg-warning-base-active{background-color:var(--color-warning-base-active)}.bg-warning-base-contrast{background-color:var(--color-warning-base-contrast)}.bg-warning-base-contrast-subtle{background-color:var(--color-warning-base-contrast-subtle)}.bg-warning-base-hover{background-color:var(--color-warning-base-hover)}.bg-warning-surface-active{background-color:var(--color-warning-surface-active)}.bg-warning-surface-hover{background-color:var(--color-warning-surface-hover)}.bg-warning-surface-tinted{background-color:var(--color-warning-surface-tinted)}.bg-warning-tinted{background-color:var(--background-color-warning-tinted)}.bg-yellow-1{background-color:var(--color-yellow-1)}.bg-yellow-2{background-color:var(--color-yellow-2)}.bg-yellow-3{background-color:var(--color-yellow-3)}.bg-yellow-4{background-color:var(--color-yellow-4)}.bg-yellow-5{background-color:var(--color-yellow-5)}.bg-yellow-6{background-color:var(--color-yellow-6)}.bg-yellow-7{background-color:var(--color-yellow-7)}.bg-yellow-8{background-color:var(--color-yellow-8)}.bg-yellow-9{background-color:var(--color-yellow-9)}.bg-yellow-10{background-color:var(--color-yellow-10)}.bg-yellow-11{background-color:var(--color-yellow-11)}.bg-yellow-12{background-color:var(--color-yellow-12)}.bg-yellow-13{background-color:var(--color-yellow-13)}.bg-yellow-contrast-1{background-color:var(--color-yellow-contrast-1)}.bg-yellow-contrast-2{background-color:var(--color-yellow-contrast-2)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.px-2{padding-inline:var(--spacing-2)}.pt-2{padding-top:var(--spacing-2)}.pt-5{padding-top:var(--spacing-5)}.pb-8{padding-bottom:var(--spacing-8)}.pl-3{padding-left:var(--spacing-3)}.align-bottom{vertical-align:bottom}.align-middle{vertical-align:middle}.align-top{vertical-align:top}.text-body-lg{font-size:var(--text-body-lg);line-height:var(--tw-leading,var(--text-body-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-lg--font-weight))}.text-body-long-lg{font-size:var(--text-body-long-lg);line-height:var(--tw-leading,var(--text-body-long-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-lg--font-weight))}.text-body-long-md{font-size:var(--text-body-long-md);line-height:var(--tw-leading,var(--text-body-long-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-md--font-weight))}.text-body-long-sm{font-size:var(--text-body-long-sm);line-height:var(--tw-leading,var(--text-body-long-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-sm--font-weight))}.text-body-long-xl{font-size:var(--text-body-long-xl);line-height:var(--tw-leading,var(--text-body-long-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-xl--font-weight))}.text-body-long-xs{font-size:var(--text-body-long-xs);line-height:var(--tw-leading,var(--text-body-long-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-long-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-long-xs--font-weight))}.text-body-md{font-size:var(--text-body-md);line-height:var(--tw-leading,var(--text-body-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-md--font-weight))}.text-body-short-lg{font-size:var(--text-body-short-lg);line-height:var(--tw-leading,var(--text-body-short-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-lg--font-weight))}.text-body-short-md{font-size:var(--text-body-short-md);line-height:var(--tw-leading,var(--text-body-short-md--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-md--font-weight))}.text-body-short-sm{font-size:var(--text-body-short-sm);line-height:var(--tw-leading,var(--text-body-short-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-sm--font-weight))}.text-body-short-xl{font-size:var(--text-body-short-xl);line-height:var(--tw-leading,var(--text-body-short-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-xl--font-weight))}.text-body-short-xs{font-size:var(--text-body-short-xs);line-height:var(--tw-leading,var(--text-body-short-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-short-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-short-xs--font-weight))}.text-body-sm{font-size:var(--text-body-sm);line-height:var(--tw-leading,var(--text-body-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-body-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-sm--font-weight))}.text-body-xl{font-size:var(--text-body-xl);line-height:var(--tw-leading,var(--text-body-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-body-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-xl--font-weight))}.text-body-xs{font-size:var(--text-body-xs);line-height:var(--tw-leading,var(--text-body-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-body-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-body-xs--font-weight))}.text-heading-2xl{font-size:var(--text-heading-2xl);line-height:var(--tw-leading,var(--text-heading-2xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xl--font-weight))}.text-heading-2xs{font-size:var(--text-heading-2xs);line-height:var(--tw-leading,var(--text-heading-2xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-2xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-2xs--font-weight))}.text-heading-lg{font-size:var(--text-heading-lg);line-height:var(--tw-leading,var(--text-heading-lg--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-lg--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-lg--font-weight))}.text-heading-md{font-size:var(--text-heading-md);line-height:var(--tw-leading,var(--text-heading-md--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-md--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-md--font-weight))}.text-heading-sm{font-size:var(--text-heading-sm);line-height:var(--tw-leading,var(--text-heading-sm--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-sm--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-sm--font-weight))}.text-heading-xl{font-size:var(--text-heading-xl);line-height:var(--tw-leading,var(--text-heading-xl--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xl--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xl--font-weight))}.text-heading-xs{font-size:var(--text-heading-xs);line-height:var(--tw-leading,var(--text-heading-xs--line-height));letter-spacing:var(--tw-tracking,var(--text-heading-xs--letter-spacing));font-weight:var(--tw-font-weight,var(--text-heading-xs--font-weight))}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-6{font-size:var(--text-6)}.text-7{font-size:var(--text-7)}.text-8{font-size:var(--text-8)}.text-\\[1\\.75rem\\]{font-size:1.75rem}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-accent{color:var(--text-color-accent)}.text-accent-subtle{color:var(--text-color-accent-subtle)}.text-brand1{color:var(--text-color-brand1)}.text-brand1-subtle{color:var(--text-color-brand1-subtle)}.text-brand2{color:var(--text-color-brand2)}.text-brand2-subtle{color:var(--text-color-brand2-subtle)}.text-brand3{color:var(--text-color-brand3)}.text-brand3-subtle{color:var(--text-color-brand3-subtle)}.text-danger{color:var(--text-color-danger)}.text-danger-subtle{color:var(--text-color-danger-subtle)}.text-info{color:var(--text-color-info)}.text-info-subtle{color:var(--text-color-info-subtle)}.text-neutral{color:var(--text-color-neutral)}.text-neutral-subtle{color:var(--text-color-neutral-subtle)}.text-success{color:var(--text-color-success)}.text-success-subtle{color:var(--text-color-success-subtle)}.text-warning{color:var(--text-color-warning)}.text-warning-subtle{color:var(--text-color-warning-subtle)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-focus-visible{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#00347d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:var(--ds-shadow-lg);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:var(--ds-shadow-md);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--ds-shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:var(--ds-shadow-xl);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:var(--ds-shadow-xs);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.outline-transparent{outline-color:#0000}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}:is(.\\*\\:border>*){border-style:var(--tw-border-style);border-width:1px}:is(.\\*\\:border-2>*){border-style:var(--tw-border-style);border-width:2px}:is(.\\*\\:p-2>*){padding:var(--spacing-2)}:is(.\\*\\:p-4>*){padding:var(--spacing-4)}.focus-within\\:shadow-focus-inner:focus-within{--tw-shadow-color:color-mix(in srgb,var(--ds-color-focus-inner)var(--tw-shadow-alpha),transparent)}@supports (color:color-mix(in lab, red, red)){.focus-within\\:shadow-focus-inner:focus-within{--tw-shadow-color:color-mix(in oklab,var(--color-focus-inner)var(--tw-shadow-alpha),transparent)}}.focus-within\\:outline-3:focus-within{outline-style:var(--tw-outline-style);outline-width:3px}.focus-within\\:outline-offset-3:focus-within{outline-offset:3px}.focus-within\\:outline-focus-outer:focus-within{outline-color:var(--color-focus-outer)}}@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){@layer base{*,:before,:after,::backdrop{--tw-rotate-x:rotateX(0);--tw-rotate-y:rotateY(0);--tw-rotate-z:rotateZ(0);--tw-skew-x:skewX(0);--tw-skew-y:skewY(0);--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@property --tw-rotate-x{syntax:"*";inherits:false;initial-value:rotateX(0)}@property --tw-rotate-y{syntax:"*";inherits:false;initial-value:rotateY(0)}@property --tw-rotate-z{syntax:"*";inherits:false;initial-value:rotateZ(0)}@property --tw-skew-x{syntax:"*";inherits:false;initial-value:skewX(0)}@property --tw-skew-y{syntax:"*";inherits:false;initial-value:skewY(0)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px}}
|
|
4
4
|
`;
|
|
5
5
|
const dsStyles = css`@layer fds.typography, fds.utils, fds.box, fds.btn;@layer fds.btn{.fds-btn{--fds-btn-padding:var(--fds-spacing-2) var(--fds-spacing-4);align-items:center;background-color:var(--fds-semantic-surface-action-first-default);border:var(--fds-border_width-default) solid transparent;border-radius:var(--fds-border_radius-interactive);box-sizing:border-box;color:var(--fds-semantic-text-action-first-on_action);cursor:pointer;display:flex;font-family:inherit;justify-content:center;min-height:var(--fds-sizing-10);min-width:2.5em;padding:var(--fds-btn-padding);position:relative;text-align:center;text-decoration:none}.fds-btn svg{overflow:visible}.fds-btn:disabled,.fds-btn[aria-disabled=true]{cursor:not-allowed;opacity:var(--fds-opacity-disabled)}.fds-btn--sm{--fds-btn-padding:var(--fds-spacing-2) var(--fds-spacing-3);font:var(--fds-typography-paragraph-short-small);font-family:inherit;gap:var(--fds-sizing-1);min-height:var(--fds-sizing-10)}.fds-btn--sm:before{content:"";left:0;min-height:auto;position:absolute;top:0;width:auto}.fds-btn--sm:after{content:"";height:44px;left:0;position:absolute;top:-5px;width:100%}.fds-btn--md{--fds-btn-padding:var(--fds-spacing-2) var(--fds-spacing-4);font:var(--fds-typography-paragraph-short-medium);font-family:inherit;gap:var(--fds-sizing-2);min-height:var(--fds-sizing-12)}.fds-btn--lg{--fds-btn-padding:var(--fds-spacing-3) var(--fds-spacing-5);font:var(--fds-typography-paragraph-short-large);font-family:inherit;gap:var(--fds-sizing-2);min-height:var(--fds-sizing-14)}.fds-btn--full-width{width:100%}.fds-btn--secondary,.fds-btn--tertiary{background-color:initial}.fds-btn--icon-only{--fds-btn-padding:0}.fds-btn--primary:where(.fds-btn--first){background-color:var(--fds-semantic-surface-action-first-default)}.fds-btn--primary:where(.fds-btn--second){background-color:var(--fds-semantic-surface-action-second-default)}.fds-btn--primary:where(.fds-btn--success){background-color:var(--fds-semantic-surface-success-default)}.fds-btn--primary:where(.fds-btn--danger){background-color:var(--fds-semantic-surface-danger-default)}@media (hover:hover) and (pointer:fine){.fds-btn--primary:where(.fds-btn--first):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-first-hover)}.fds-btn--primary:where(.fds-btn--second):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-second-hover)}.fds-btn--primary:where(.fds-btn--success):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-success-hover)}.fds-btn--primary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-danger-hover)}.fds-btn--secondary:where(.fds-btn--first):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-first-no_fill-hover);border-color:var(--fds-semantic-border-action-first-hover);color:var(--fds-semantic-text-action-first-hover)}.fds-btn--secondary:where(.fds-btn--second):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-second-no_fill-hover);border-color:var(--fds-semantic-border-action-second-hover);color:var(--fds-semantic-text-action-second-hover)}.fds-btn--secondary:where(.fds-btn--success):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-success-no_fill-hover);border-color:var(--fds-semantic-border-success-hover);color:var(--fds-semantic-text-success-hover)}.fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-danger-no_fill-hover);border-color:var(--fds-semantic-border-danger-hover);color:var(--fds-semantic-text-danger-hover)}.fds-btn--tertiary:where(.fds-btn--first):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-first-no_fill-hover);color:var(--fds-semantic-text-action-first-hover)}.fds-btn--tertiary:where(.fds-btn--second):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-action-second-no_fill-hover);color:var(--fds-semantic-text-action-second-hover)}.fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-success-no_fill-hover);color:var(--fds-semantic-text-success-hover)}.fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):hover{background-color:var(--fds-semantic-surface-danger-no_fill-hover);color:var(--fds-semantic-text-danger-hover)}}.fds-btn--primary:where(.fds-btn--first):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-first-active)}.fds-btn--primary:where(.fds-btn--second):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-second-active)}.fds-btn--primary:where(.fds-btn--success):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-success-active)}.fds-btn--primary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-danger-active)}.fds-btn--secondary:where(.fds-btn--first){background-color:var(--fds-semantic-surface-action-first-no_fill);border-color:var(--fds-semantic-border-action-first-default);color:var(--fds-semantic-text-action-first-default)}.fds-btn--secondary:where(.fds-btn--second){background-color:var(--fds-semantic-surface-action-second-no_fill);border-color:var(--fds-semantic-border-action-second-default);color:var(--fds-semantic-text-action-second-default)}.fds-btn--secondary:where(.fds-btn--success){background-color:var(--fds-semantic-surface-success-no_fill);border-color:var(--fds-semantic-border-success-default);color:var(--fds-semantic-text-success-default)}.fds-btn--secondary:where(.fds-btn--danger){background-color:var(--fds-semantic-surface-danger-no_fill);border-color:var(--fds-semantic-border-danger-default);color:var(--fds-semantic-text-danger-default)}.fds-btn--secondary:where(.fds-btn--first):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-first-no_fill-active);border-color:var(--fds-semantic-border-action-first-active);color:var(--fds-semantic-text-action-first-active)}.fds-btn--secondary:where(.fds-btn--second):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-second-no_fill-active);border-color:var(--fds-semantic-border-action-second-active);color:var(--fds-semantic-text-action-second-active)}.fds-btn--secondary:where(.fds-btn--success):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-success-no_fill-active);border-color:var(--fds-semantic-border-success-active);color:var(--fds-semantic-text-success-active)}.fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-danger-no_fill-active);border-color:var(--fds-semantic-border-danger-active);color:var(--fds-semantic-text-danger-active)}.fds-btn--tertiary:where(.fds-btn--first){color:var(--fds-semantic-text-action-first-default)}.fds-btn--tertiary:where(.fds-btn--second){color:var(--fds-semantic-text-action-second-default)}.fds-btn--tertiary:where(.fds-btn--success){color:var(--fds-semantic-text-success-default)}.fds-btn--tertiary:where(.fds-btn--danger){color:var(--fds-semantic-text-danger-default)}.fds-btn--tertiary:where(.fds-btn--first):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-first-no_fill-active);color:var(--fds-semantic-text-action-first-active)}.fds-btn--tertiary:where(.fds-btn--second):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-action-second-no_fill-active);color:var(--fds-semantic-text-action-second-active)}.fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-success-no_fill-active);color:var(--fds-semantic-text-success-active)}.fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled=true],:disabled):active{background-color:var(--fds-semantic-surface-danger-no_fill-active);color:var(--fds-semantic-text-danger-active)}}@layer fds.utils{.fds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fds-focus:focus-visible{--fds-focus-border-width:3px;box-shadow:0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);outline:var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);outline-offset:var(--fds-focus-border-width)}@layer animate-height{.fds-animate-height--closed,.fds-animate-height--openingOrClosing{overflow:hidden}.fds-animate-height--open .fds-animate-height__content{height:auto}.fds-animate-height--closed .fds-animate-height__content{display:none;height:0}}}@layer fds.box{.fds-box--xs-shadow{box-shadow:var(--fds-shadow-xsmall)}.fds-box--sm-shadow{box-shadow:var(--fds-shadow-small)}.fds-box--md-shadow{box-shadow:var(--fds-shadow-medium)}.fds-box--lg-shadow{box-shadow:var(--fds-shadow-large)}.fds-box--xl-shadow{box-shadow:var(--fds-shadow-xlarge)}.fds-box--default-border-color{border:1px solid var(--fds-semantic-border-neutral-default)}.fds-box--subtle-border-color{border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-box--strong-border-color{border:1px solid var(--fds-semantic-border-neutral-strong)}.fds-box--sm-border-radius{border-radius:var(--fds-border_radius-small)}.fds-box--md-border-radius{border-radius:var(--fds-border_radius-medium)}.fds-box--lg-border-radius{border-radius:var(--fds-border_radius-large)}.fds-box--xl-border-radius{border-radius:var(--fds-border_radius-xlarge)}.fds-box--2xl-border-radius{border-radius:var(--fds-border_radius-xxlarge)}.fds-box--3xl-border-radius{border-radius:var(--fds-border_radius-xxxlarge)}.fds-box--4xl-border-radius{border-radius:var(--fds-border_radius-xxxxlarge)}.fds-box--full-border-radius{border-radius:var(--fds-border_radius-full)}.fds-box--default-background{background-color:var(--fds-semantic-background-default)}.fds-box--subtle-background{background-color:var(--fds-semantic-background-subtle)}}@layer fds.alert{.fds-alert{--fds-alert-border-color:var(--fds-semantic-border-info-default);--fds-alert-border-radius:var(--fds-border_radius-medium);--fds-alert-color:var(--fds-semantic-text-neutral-default);--fds-alert-icon-color:var(--fds-alert-border-color);--fds-alert-icon-size:var(--fds-sizing-7);--fds-alert-background:var(--fds-semantic-surface-info-subtle);--fds-alert-padding:var(--fds-spacing-6);background:var(--fds-alert-background);border:1px solid var(--fds-alert-border-color);border-radius:var(--fds-alert-border-radius);color:var(--fds-alert-color);display:grid;font:var(--fds-typography-paragraph-medium);gap:var(--fds-spacing-2);grid-auto-columns:-webkit-min-content auto;grid-auto-columns:min-content auto;grid-auto-flow:column;padding:var(--fds-alert-padding)}.fds-alert__icon{color:var(--fds-alert-icon-color);height:var(--fds-alert-icon-size);width:var(--fds-alert-icon-size)}.fds-alert__content{display:flex;flex-direction:column}.fds-alert--info{--fds-alert-border-color:var(--fds-semantic-border-info-default);--fds-alert-background:var(--fds-semantic-surface-info-subtle)}.fds-alert--warning{--fds-alert-border-color:var(--fds-semantic-border-warning-default);--fds-alert-background:var(--fds-semantic-surface-warning-subtle)}.fds-alert--success{--fds-alert-border-color:var(--fds-semantic-border-success-default);--fds-alert-background:var(--fds-semantic-surface-success-subtle)}.fds-alert--danger{--fds-alert-border-color:var(--fds-semantic-border-danger-default);--fds-alert-background:var(--fds-semantic-surface-danger-subtle)}.fds-alert--sm{--fds-alert-padding:var(--fds-spacing-5);--fds-alert-icon-size:var(--fds-sizing-6)}.fds-alert--md{--fds-alert-padding:var(--fds-spacing-6);--fds-alert-icon-size:var(--fds-sizing-7)}.fds-alert--lg{--fds-alert-padding:var(--fds-spacing-7);--fds-alert-icon-size:var(--fds-sizing-8)}.fds-alert--elevated{box-shadow:var(--fds-shadow-small)}}@layer fds.typography.ingress{.fds-ingress{--fdsc-bottom-spacing:var(--fds-spacing-5);color:var(--fds-semantic-text-neutral-default);margin:0}.fds-ingress--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-ingress--md{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-ingress-medium);font-family:inherit}.fds-ingress--lg{--fdsc-bottom-spacing:var(--fds-spacing-6);font:var(--fds-typography-ingress-large);font-family:inherit}.fds-ingress--sm{--fdsc-bottom-spacing:var(--fds-spacing-7);font:var(--fds-typography-ingress-small);font-family:inherit}.fds-ingress--xs{--fdsc-bottom-spacing:var(--fds-spacing-8);font:var(--fds-typography-ingress-xsmall);font-family:inherit}}@layer fds.skiplink{.fds-skiplink:focus{display:block;height:auto;margin:inherit;outline:0;overflow:visible;position:static;width:auto;clip:auto;background:var(--fds-semantic-border-focus-outline);-webkit-clip-path:none;clip-path:none;color:var(--fds-semantic-text-neutral-default);padding:var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em;white-space:inherit}}@layer fds.accordion{.fds-accordion{--fds-accordion-border-radius:var(--fds-border_radius-interactive);--fds-accordion-border-color:var(--fds-semantic-border-neutral-subtle);border-bottom:1px solid var(--fds-semantic-border-neutral-subtle);box-sizing:border-box}.fds-accordion--border{border:1px solid var(--fds-accordion-border-color);border-radius:var(--fds-accordion-border-radius)}.fds-accordion__expand-icon{border-radius:var(--fds-border_radius-interactive)}.fds-accordion__content{overflow:hidden;padding:var(--fds-spacing-5,1rem);text-overflow:ellipsis}.fds-accordion__header{margin:0}.fds-accordion__button{align-items:center;border:none;border-top:1px solid var(--fds-semantic-border-neutral-subtle);cursor:pointer;display:flex;gap:var(--fds-spacing-2);justify-content:flex-start;margin:0;padding:var(--fds-spacing-4);text-align:left;width:100%}.fds-accordion--border .fds-accordion__button{border-radius:var(--fds-accordion-border-radius)}.fds-accordion__item:focus-within{position:relative}.fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__expand-icon{transform:rotate(180deg)}.fds-accordion--neutral,.fds-accordion--neutral .fds-accordion__button{background-color:var(--fds-semantic-surface-neutral-default)}.fds-accordion--subtle,.fds-accordion--subtle .fds-accordion__button{background-color:var(--fds-semantic-surface-neutral-subtle)}.fds-accordion--first,.fds-accordion--first .fds-accordion__button{--fds-accordion-border-color:var(--fds-semantic-border-first-default);background:var(--fds-semantic-surface-first-light)}.fds-accordion--second,.fds-accordion--second .fds-accordion__button{--fds-accordion-border-color:var(--fds-semantic-border-second-default);background:var(--fds-semantic-surface-second-light)}.fds-accordion--third,.fds-accordion--third .fds-accordion__button{--fds-accordion-border-color:var(--fds-semantic-border-third-default);background:var(--fds-semantic-surface-third-light)}.fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button{background-color:rgba(0,0,0,.03)}.fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,.fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button{background-color:var(--fds-semantic-surface-action-first-no_fill-hover)}.fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button{border-top:0}.fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,.fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button{border-top:1px solid var(--fds-semantic-surface-neutral-default)}@media (hover:hover) and (pointer:fine){.fds-accordion__button:hover .fds-accordion__expand-icon{background-color:rgba(0,0,0,.1)}.fds-accordion--neutral .fds-accordion__button:hover,.fds-accordion--subtle .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-neutral-subtle-hover)}.fds-accordion--first .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-first-light-hover)}.fds-accordion--second .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-second-light-hover)}.fds-accordion--third .fds-accordion__button:hover{background-color:var(--fds-semantic-surface-third-light-hover)}}}@layer fds.switch{.fds-switch{--fds-switch--transition:200ms;--fds-switch-height:1.75rem;--fds-switch-focus-border-width:3px;position:relative}@media (prefers-reduced-motion){.switch{--fds-switch--transition:0}}.fds-switch__label{align-items:center;cursor:pointer;display:grid;gap:var(--fds-spacing-1);grid-template-columns:auto 1fr;min-height:var(--fds-sizing-10);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-switch__track{background-color:var(--fds-semantic-surface-neutral-dark);border-radius:var(--fds-border_radius-full);display:inline-block;height:var(--fds-switch-height);margin:auto;margin-right:var(--fds-spacing-1);overflow:visible;pointer-events:none;position:relative;transition:background-color var(--fds-switch--transition) ease;width:var(--fds-switch-width)}.fds-switch__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1);padding-left:calc(var(--fds-switch-width) + var(--fds-spacing-2))}.fds-switch__readonly__icon{height:1.2em;width:1.2em}.fds-switch__label--right{grid-auto-flow:dense;grid-template-columns:1fr auto}.fds-switch__label--right .fds-switch__track{margin-right:0;order:1}.fds-switch__label--right+.fds-switch__description{padding-left:0}.fds-switch__input{cursor:pointer;height:2.75rem;margin:0;opacity:0;position:absolute;width:2.75rem;z-index:1}.fds-switch--readonly>.fds-switch__label{grid-template-columns:auto -webkit-min-content 1fr;grid-template-columns:auto min-content 1fr}.fds-switch--readonly>.fds-switch__label:where(.fds-switch__label--right){grid-template-columns:-webkit-min-content 1fr auto;grid-template-columns:min-content 1fr auto}.fds-switch--readonly>.fds-switch__input,.fds-switch--readonly>.fds-switch__label{cursor:default}.fds-switch--readonly>.fds-switch__description{margin-left:var(--fds-spacing-1)}.fds-switch--sm,.fds-switch--sm .fds-switch__label{min-height:var(--fds-sizing-6)}.fds-switch--md,.fds-switch--md .fds-switch__label{min-height:var(--fds-sizing-7)}.fds-switch--lg,.fds-switch--lg .fds-switch__label{min-height:var(--fds-sizing-8)}.fds-switch--sm{--fds-switch-height:var(--fds-sizing-6);--fds-switch-width:var(--fds-sizing-11)}.fds-switch--sm .fds-switch__input{left:-.25rem;top:-.25rem}.fds-switch--md{--fds-switch-height:var(--fds-sizing-7);--fds-switch-width:var(--fds-sizing-13)}.fds-switch--md .fds-switch__input{left:0;top:0}.fds-switch--lg{--fds-switch-height:var(--fds-sizing-8);--fds-switch-width:var(--fds-sizing-15)}.fds-switch--lg .fds-switch__input{left:0;top:.25rem}.fds-switch__label:has(.fds-switch__track:only-child){grid-template-columns:auto}.fds-switch__label:has(.fds-switch__track:only-child) .fds-switch__track{margin-right:0}.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__label,.fds-switch__input:disabled{cursor:not-allowed}.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__description,.fds-switch:has(.fds-switch__input:disabled)>.fds-switch__label{opacity:var(--fds-opacity-disabled)}.fds-switch__input:focus-visible+.fds-switch__label .fds-switch__track{box-shadow:inset 0 0 0 var(--fds-switch-focus-border-width) var(--fds-semantic-border-focus-boxshadow);outline:var(--fds-switch-focus-border-width) solid var(--fds-semantic-border-focus-outline)}.fds-switch__input:not([readonly]):checked+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-surface-success-default)}.fds-switch__thumb{background-color:var(--fds-semantic-background-default);border-radius:var(--fds-border_radius-full);height:var(--fds-switch-height);position:absolute;scale:.8;transition:transform var(--fds-switch--transition) ease;width:var(--fds-switch-height)}.fds-switch__input:checked+.fds-switch__label .fds-switch__track .fds-switch__thumb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%23118849' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E");transform:translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))*1.2))}.fds-switch--readonly .fds-switch__input[readonly]+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-background-subtle);box-shadow:inset 0 0 0 2px var(--fds-semantic-border-neutral-subtle)}.fds-switch--readonly .fds-switch__input[readonly]+.fds-switch__label .fds-switch__track>.fds-switch__thumb{background-color:var(--fds-semantic-border-neutral-default)}.fds-switch--readonly .fds-switch__input[readonly]:checked+.fds-switch__label .fds-switch__track .fds-switch__thumb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%23f4f5f6' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E")}@media (hover:hover) and (pointer:fine){.fds-switch__input:not([readonly],:disabled):hover+.fds-switch__label .fds-switch__track>.fds-switch__thumb{transform:translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))*.2))}.fds-switch__input:not([readonly],:disabled):hover+.fds-switch__label{color:var(--fds-semantic-border-input-hover)}.fds-switch__input:not(:disabled,[readonly]):checked:hover+.fds-switch__label .fds-switch__track>.fds-switch__thumb{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-3 -3 17 17'%3E%3Cpath fill='%230c6536' fill-rule='evenodd' d='M10.134 2.866a1.25 1.25 0 0 1 0 1.768l-4.25 4.25a1.25 1.25 0 0 1-1.768 0l-2.25-2.25a1.25 1.25 0 1 1 1.768-1.768L5 6.232l3.366-3.366a1.25 1.25 0 0 1 1.768 0' clip-rule='evenodd'/%3E%3C/svg%3E");transform:translateX(calc(var(--fds-switch-width) - var(--fds-switch-height)))}.fds-switch__input:not(:checked,:disabled,[readonly]):hover+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-surface-neutral-dark-hover)}.fds-switch__input:not(:disabled,[readonly]):checked:hover+.fds-switch__label .fds-switch__track{background-color:var(--fds-semantic-surface-success-hover)}}}@layer fds.checkbox{.fds-checkbox{--fds-checkbox-size:1.75rem;--fds-checkbox-focus-border-width:3px;--fds-checkbox-background:var(--fds-semantic-background-default);--fds-checkbox-border-color:var(--fds-semantic-border-input-default);--fds-checkbox-border__hover:0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);display:grid}.fds-checkbox:has(.fds-checkbox__label){gap:var(--fds-spacing-2);grid-template-columns:var(--fds-checkbox-size) auto}.fds-checkbox__input{align-self:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--fds-checkbox-background);box-shadow:inset 0 0 0 2px var(--fds-checkbox-border-color);height:var(--fds-checkbox-size);margin:0;outline:none;position:relative;width:var(--fds-checkbox-size);z-index:1}.fds-checkbox__input,.fds-checkbox__input:before{border-radius:var(--fds-border_radius-medium);cursor:pointer}.fds-checkbox__input:before{content:"";display:block;height:2.75rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.75rem}.fds-checkbox__label{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-height:var(--fds-sizing-10);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-checkbox__description{color:var(--fds-semantic-text-neutral-subtle);grid-column:2;margin-top:calc(var(--fds-spacing-3)*-1)}.fds-checkbox--readonly>.fds-checkbox__input,.fds-checkbox--readonly>.fds-checkbox__input:before,.fds-checkbox--readonly>.fds-checkbox__label{cursor:default}.fds-checkbox__input:disabled,.fds-checkbox__input:disabled:before,.fds-checkbox__input:disabled~.fds-checkbox__label{cursor:not-allowed}.fds-checkbox__input:focus-visible{box-shadow:inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);outline:var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);outline-offset:0}.fds-checkbox__input:checked{--fds-checkbox-border-color:var(--fds-semantic-border-input-hover);background:var(--fds-checkbox-border-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18.55 6.324a1 1 0 0 1 0 1.414l-7.968 7.97a1 1 0 0 1-1.414 0l-4.219-4.22a1 1 0 0 1 1.414-1.414l3.512 3.512 7.262-7.262a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E")}.fds-checkbox__input:indeterminate{--fds-checkbox-border-color:var(--fds-semantic-border-input-hover);background-color:var(--fds-checkbox-border-color);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%23fff' d='M4.25 11.25a1.5 1.5 0 0 1 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11a1.5 1.5 0 0 1-1.5-1.5'/%3E%3C/svg%3E");background-repeat:no-repeat}.fds-checkbox--readonly>.fds-checkbox__input{--fds-checkbox-border-color:var(--fds-semantic-border-neutral-subtle);--fds-checkbox-background:var(--fds-semantic-surface-neutral-subtle)}.fds-checkbox__input:disabled,.fds-checkbox__input:disabled~.fds-checkbox__description,.fds-checkbox__input:disabled~.fds-checkbox__label{opacity:var(--fds-opacity-disabled)}.fds-checkbox__input:checked:not(:focus-visible){box-shadow:inset 0 0 0 2px var(--fds-checkbox-border-color)}.fds-checkbox--readonly>.fds-checkbox__input:checked{background:var(--fds-checkbox-background);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%2368707c' fill-rule='evenodd' d='M18.55 6.324a1 1 0 0 1 0 1.414l-7.968 7.97a1 1 0 0 1-1.414 0l-4.219-4.22a1 1 0 0 1 1.414-1.414l3.512 3.512 7.262-7.262a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E")}.fds-checkbox--readonly>.fds-checkbox__input:indeterminate{background:var(--fds-checkbox-background);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 23 23'%3E%3Cpath fill='%2368707c' d='M4.25 11.25a1.5 1.5 0 0 1 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11a1.5 1.5 0 0 1-1.5-1.5'/%3E%3C/svg%3E");background-repeat:no-repeat}.fds-checkbox--error>.fds-checkbox__input:not(:disabled,:focus-visible){--fds-checkbox-border-color:var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:disabled)~.fds-checkbox__label,.fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:not(:disabled)~.fds-checkbox__label:hover{color:var(--fds-semantic-text-action-hover)}.fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:not(:disabled),.fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:checked,:disabled){--fds-checkbox-border-color:var(--fds-semantic-border-input-hover);box-shadow:var(--fds-checkbox-border__hover),inset 0 0 0 2px var(--fds-checkbox-border-color)}.fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:focus-visible:not(:disabled){box-shadow:var(--fds-checkbox-border__hover),inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow)}}.fds-checkbox--sm{--fds-checkbox-size:var(--fds-sizing-5);min-height:var(--fds-sizing-10)}.fds-checkbox--md{--fds-checkbox-size:var(--fds-sizing-6);min-height:var(--fds-sizing-11)}.fds-checkbox--lg{--fds-checkbox-size:var(--fds-sizing-7);min-height:var(--fds-sizing-12)}}@layer fds.typography.error-message{.fds-error-message{--fdsc-bottom-spacing:var(--fds-spacing-5);margin:0}.fds-error-message--error{color:var(--fds-semantic-text-danger-default)}.fds-error-message--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-error-message--lg{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-error_message-large);font-family:inherit}.fds-error-message--md{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-error_message-medium);font-family:inherit}.fds-error-message--sm{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-error_message-small);font-family:inherit}.fds-error-message--xs{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-error_message-xsmall);font-family:inherit}}@layer fds.typography.label{.fds-label{--fdsc-bottom-spacing:var(--fds-spacing-1);color:var(--fds-semantic-text-neutral-default);display:inline-block;margin:0;padding:0}.fds-label--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-label--lg{font:var(--fds-typography-label-large);font-family:inherit}.fds-label--md{font:var(--fds-typography-label-medium);font-family:inherit}.fds-label--sm{font:var(--fds-typography-label-small);font-family:inherit}.fds-label--xs{font:var(--fds-typography-label-xsmall);font-family:inherit}.fds-label--regular-weight{font-weight:400}.fds-label--medium-weight{font-weight:500}.fds-label--semibold-weight{font-weight:600}}@layer fds.typography.heading{.fds-heading{--fdsc-bottom-spacing:var(--fds-spacing-6);color:var(--fds-semantic-text-neutral-default);margin:0}.fds-heading--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-heading--2xl{--fdsc-bottom-spacing:var(--fds-spacing-7);font:var(--fds-typography-heading-2xlarge);font-family:inherit}.fds-heading--xl{--fdsc-bottom-spacing:var(--fds-spacing-6);font:var(--fds-typography-heading-xlarge);font-family:inherit}.fds-heading--lg{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-heading-large);font-family:inherit}.fds-heading--md{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-heading-medium);font-family:inherit}.fds-heading--sm{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-heading-small);font-family:inherit}.fds-heading--xs{--fdsc-bottom-spacing:var(--fds-spacing-2);font:var(--fds-typography-heading-xsmall);font-family:inherit}.fds-heading--2xs{--fdsc-bottom-spacing:var(--fds-spacing-1);font:var(--fds-typography-heading-xxsmall);font-family:inherit}}@layer fds.typography.paragraph{.fds-paragraph{--fdsc-bottom-spacing:var(--fds-spacing-5);color:var(--fds-semantic-text-neutral-default);margin:0}.fds-paragraph--spacing{margin-bottom:var(--fdsc-bottom-spacing)}.fds-paragraph--lg{--fdsc-bottom-spacing:var(--fds-spacing-6);font:var(--fds-typography-paragraph-large);font-family:inherit}.fds-paragraph--lg.fds-paragraph--short{font:var(--fds-typography-paragraph-short-large);font-family:inherit}.fds-paragraph--lg.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-large)}.fds-paragraph--md{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-paragraph-medium);font-family:inherit}.fds-paragraph--md.fds-paragraph--short{--fdsc-bottom-spacing:var(--fds-spacing-5);font:var(--fds-typography-paragraph-short-medium);font-family:inherit}.fds-paragraph--md.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-medium)}.fds-paragraph--sm{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-paragraph-small);font-family:inherit}.fds-paragraph--sm.fds-paragraph--short{--fdsc-bottom-spacing:var(--fds-spacing-4);font:var(--fds-typography-paragraph-short-small);font-family:inherit}.fds-paragraph--sm.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-small)}.fds-paragraph--xs{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-paragraph-xsmall);font-family:inherit}.fds-paragraph--xs.fds-paragraph--short{--fdsc-bottom-spacing:var(--fds-spacing-3);font:var(--fds-typography-paragraph-short-xsmall);font-family:inherit}.fds-paragraph--xs.fds-paragraph--long{line-height:var(--fds-typography-paragraph-long-xsmall)}}@layer fds.radio{.fds-radio{--fds-radio-size:1.75rem;--fds-radio-focus-border-width:3px;--fds-radio-background:var(--fds-semantic-background-default);--fds-radio-border-color:var(--fds-semantic-border-input-default);--fds-radio-border__hover:0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);display:grid}.fds-radio:has(.fds-radio__label){gap:var(--fds-spacing-2);grid-template-columns:var(--fds-radio-size) auto}.fds-radio__input{align-self:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--fds-radio-background);border-radius:50%;box-shadow:inset 0 0 0 2px var(--fds-radio-border-color);cursor:pointer;height:var(--fds-radio-size);margin:0;outline:none;position:relative;width:var(--fds-radio-size);z-index:1}.fds-radio__input:before{border-radius:var(--fds-border_radius-medium);content:"";cursor:pointer;display:block;height:2.75rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:2.75rem}.fds-radio__label{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-height:var(--fds-sizing-10);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-radio__description{color:var(--fds-semantic-text-neutral-subtle);grid-column:2;margin-top:calc(var(--fds-spacing-3)*-1)}.fds-radio--readonly>.fds-radio__input,.fds-radio--readonly>.fds-radio__input:before,.fds-radio--readonly>.fds-radio__label{cursor:default}.fds-radio:has(.fds-radio__input:disabled)>.fds-radio__description{opacity:var(--fds-opacity-disabled)}.fds-radio:has(.fds-radio__input:disabled)>.fds-radio__label,.fds-radio__input:disabled,.fds-radio__input:disabled:before{cursor:not-allowed;opacity:var(--fds-opacity-disabled)}.fds-radio__input:focus-visible{box-shadow:inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),inset 0 0 0 6px var(--fds-radio-background);outline:var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline);outline-offset:0}.fds-radio__input:checked{--fds-radio-border-color:var(--fds-semantic-border-input-hover);background:var(--fds-radio-border-color)}.fds-radio--readonly>.fds-radio__input{--fds-radio-border-color:var(--fds-semantic-border-neutral-subtle);--fds-radio-background:var(--fds-semantic-surface-neutral-subtle)}.fds-radio__input:checked:not(:focus-visible){box-shadow:inset 0 0 0 2px var(--fds-radio-border-color),inset 0 0 0 6px var(--fds-radio-background)}.fds-radio--readonly>.fds-radio__input:checked{background:var(--fds-semantic-border-neutral-default)}.fds-radio--error>.fds-radio__input:not(:disabled,:focus-visible){--fds-radio-border-color:var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-radio:not(.fds-radio--readonly)>.fds-radio__input:hover:not(:disabled)+.fds-radio__label,.fds-radio:not(.fds-radio--readonly)>.fds-radio__label:hover:not(:disabled){color:var(--fds-semantic-text-action-hover)}.fds-radio:not(.fds-radio--readonly)>.fds-radio__input:hover:not(:checked,:disabled){--fds-radio-border-color:var(--fds-semantic-border-input-hover);box-shadow:var(--fds-radio-border__hover),inset 0 0 0 2px var(--fds-radio-border-color)}.fds-radio:not(.fds-radio--readonly)>.fds-radio__input:hover:checked:not(:disabled){--fds-radio-border-color:var(--fds-semantic-border-input-hover);box-shadow:var(--fds-radio-border__hover),inset 0 0 0 2px var(--fds-radio-border-color),inset 0 0 0 6px var(--fds-radio-background)}.fds-radio:not(.fds-radio--readonly)>.fds-radio__input:hover:checked:focus-visible:not(:disabled){box-shadow:var(--fds-radio-border__hover),inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),inset 0 0 0 6px var(--fds-radio-background)}}.fds-radio--sm{--fds-radio-size:var(--fds-sizing-5);min-height:var(--fds-sizing-10)}.fds-radio--md{--fds-radio-size:var(--fds-sizing-6);min-height:var(--fds-sizing-11)}.fds-radio--lg{--fds-radio-size:var(--fds-sizing-7);min-height:var(--fds-sizing-12)}.fds-radio-group--horizontal{display:flex;flex-direction:row;gap:var(--fds-spacing-6)}}@layer fds.search{.fds-search{display:inline-grid;gap:var(--fds-spacing-2);width:100%}.fds-search--sm{--f-search-button-clear-size:var(--fds-sizing-5)}.fds-search--md{--f-search-button-clear-size:var(--fds-sizing-6)}.fds-search--lg{--f-search-button-clear-size:var(--fds-sizing-8)}.fds-search__error:empty{display:none}.fds-search__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-search__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex;position:relative;width:100%}.fds-search__icon{height:100%;left:var(--fds-spacing-4);pointer-events:none;position:absolute;transform:scale(1.5);z-index:2}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.fds-search__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;height:var(--fds-sizing-10);padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-search__input.fds-search__input--with-search-button{border-bottom-right-radius:0;border-top-right-radius:0}.fds-search__input:disabled{cursor:not-allowed}.fds-search__input[type=search]:focus-visible{z-index:1}.fds-search:has(.fds-search__input:disabled){opacity:var(--fds-opacity-disabled)}.fds-search__search-button{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-search__search-button:focus-visible{z-index:1}.fds-search__clear-button{align-items:center;background:none;border:none;border-radius:var(--fds-border_radius-medium);color:var(--fds-semantic-text-neutral-default);cursor:pointer;display:inline-flex;font-size:1.25rem;height:var(--f-search-button-clear-size);justify-content:center;padding:0;position:absolute;right:.6em;top:50%;transform:translateY(-50%);width:var(--f-search-button-clear-size);z-index:2}.fds-search--sm .fds-search__input{--f-search-button-clear-size:var(--fds-sizing-4);height:var(--fds-sizing-10);padding:0 var(--fds-spacing-3);padding-right:2.5em}.fds-search--sm .fds-search__icon{left:var(--fds-spacing-3)}.fds-search--md .fds-search__input{--f-search-button-clear-size:var(--fds-sizing-6);height:var(--fds-sizing-12);padding:0 var(--fds-spacing-4);padding-right:2.2em}.fds-search--md .fds-search__icon{left:var(--fds-spacing-4)}.fds-search--lg .fds-search__input{--f-search-button-clear-size:var(--fds-sizing-12);height:var(--fds-sizing-14);padding:0 var(--fds-spacing-5);padding-right:2em}.fds-search--lg .fds-search__icon{left:var(--fds-spacing-5)}.fds-search__input.fds-search__input--simple{padding-left:2.4em}.fds-search__error-message>.input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-search__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}.fds-search__clear-button:not(:focus-visible,:disabled,[aria-disabled]):hover{background:var(--fds-semantic-surface-action-subtle-hover)}}}@layer fds.nativeselect{.fds-native-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-semantic-background-default);background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");background-position:right var(--fds-spacing-2) center;background-repeat:no-repeat;background-size:1.5em 1.5em;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-2);position:relative}@media (hover:hover) and (pointer:fine){.fds-native-select:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.fds-native-select.fds-native-select--multiple{background-image:none}.fds-native-select--sm{height:var(--fds-sizing-10);padding:0 var(--fds-spacing-2);padding-right:var(--fds-spacing-8)}.fds-native-select--md{height:var(--fds-sizing-12);padding:0 var(--fds-spacing-3);padding-right:var(--fds-spacing-10)}.fds-native-select--lg{height:var(--fds-sizing-14);padding:0 var(--fds-spacing-4);padding-right:var(--fds-spacing-12)}.fds-native-select--container{display:grid;gap:var(--fds-spacing-2)}.fds-native-select--container:has(.fds-native-select:disabled){opacity:var(--fds-opacity-disabled)}.fds-native-select:disabled{cursor:not-allowed}.fds-native-select--readonly .fds-native-select{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-native-select--error>.fds-native-select:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}.fds-native-select__readonly__icon{height:1.2em;width:1.2em}.fds-native-select__error-message:empty{display:none}.fds-native-select__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-native-select__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}}@layer fds.textfield{.fds-textfield{display:grid;gap:var(--fds-spacing-2)}.fds-textfield__adornment{background:var(--fds-semantic-surface-neutral-subtle);border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;color:var(--fds-semantic-border-neutral-default);display:inline-block;padding:9px var(--fds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-textfield__input:disabled{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textfield__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--fds-border_radius-medium);border-top-left-radius:var(--fds-border_radius-medium)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--fds-border_radius-medium);border-top-right-radius:var(--fds-border_radius-medium)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--fds-sizing-2) var(--fds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--fds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--fds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--fds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--fds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--fds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--fds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--fds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--fds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textfield:has(.fds-textfield__input:disabled){opacity:var(--fds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}@layer fds.textarea{.fds-textarea{display:grid;gap:var(--fds-spacing-2)}.fds-textarea__readonly-icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--fds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--sm .fds-textarea__input{padding:var(--fds-spacing-2)}.fds-textarea--md .fds-textarea__input{padding:var(--fds-spacing-3)}.fds-textarea--lg .fds-textarea__input{padding:var(--fds-spacing-4)}.fds-textarea:has(.fds-textarea__input:disabled){opacity:var(--fds-opacity-disabled)}.fds-textarea__input:disabled{cursor:not-allowed}.fds-textarea__input:-moz-read-only{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textarea__input:read-only{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}}@layer fds.helptext{.fds-helptext__button{background-color:initial;border:none;border-radius:50px;cursor:pointer;display:flex;min-height:0;min-width:0;padding:0!important}@media print{.fds-helptext__button{display:none}}.fds-helptext__icon--filled{display:none}.fds-helptext__icon{color:var(--fds-semantic-text-action-default);height:var(--fds-sizing-7);width:var(--fds-sizing-7)}.fds-helptext__button:where(:hover,:focus,[data-state^=open])>.fds-helptext__icon{display:none}.fds-helptext__button:where(:hover,:focus,[data-state^=open])>.fds-helptext__icon--filled{display:inline-block}.fds-helptext__content{font:var(--fds-typography-paragraph-medium);font-family:inherit;max-width:700px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-helptext--sm .fds-helptext__icon{height:var(--fds-sizing-6);width:var(--fds-sizing-6)}.fds-helptext--md .fds-helptext__icon{height:var(--fds-sizing-7);width:var(--fds-sizing-7)}.fds-helptext--lg .fds-helptext__icon{height:var(--fds-sizing-8);width:var(--fds-sizing-8)}}@layer fds.modal{.fds-modal{border:none;border-radius:var(--fds-border_radius-medium);box-shadow:var(--fds-shadow-xlarge);max-width:650px;padding:0;width:100%}.fds-modal::backdrop{animation:fade-in .3s ease-in-out;background-color:rgba(0,0,0,.5)}.fds-modal[open]{animation:slide-in .3s ease-in-out,fade-in .3s ease-in-out}.fds-modal>hr{border-color:var(--fds-semantic-border-divider-subtle);margin:var(--fds-spacing-3) 0!important}.fds-modal--lock-scroll{overflow:hidden}@media (max-width:650px){.fds-modal{border-radius:0;max-width:100%;min-width:100%}}@media (prefers-reduced-motion:reduce){.fds-modal[open]{animation:none}.fds-modal::backdrop{animation:none}}@keyframes slide-in{0%{transform:translateY(50px)}to{transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.fds-modal__header{color:var(--fds-semantic-text-neutral-default);display:flex;flex-direction:column;gap:var(--fds-spacing-1);justify-content:space-between;padding:var(--fds-spacing-6) var(--fds-spacing-18) var(--fds-spacing-2) var(--fds-spacing-6)}.fds-modal__header--no-button{padding-right:var(--fds-spacing-6)}.fds-modal__header__button{position:absolute;right:var(--fds-spacing-3);top:var(--fds-spacing-3)}.fds-modal__footer{align-items:center;display:flex;gap:var(--fds-spacing-4);padding:var(--fds-spacing-3) var(--fds-spacing-6) var(--fds-spacing-6)}.fds-modal__content{max-height:80vh;overflow-y:auto;padding:var(--fds-spacing-2) var(--fds-spacing-6)}}@layer fds.list{.fds-list--sm{padding-left:var(--fds-spacing-4)}.fds-list--lg,.fds-list--md{padding-left:var(--fds-spacing-6)}.fds-list__item{margin-bottom:var(--fds-spacing-2)}.fds-list__item>.fds-list{margin-top:var(--fds-spacing-2)}}@layer fds.card{.fds-card__media{width:auto}.fds-card__media>*{border:0;display:flex;flex-direction:column;width:100%}.fds-card__content,.fds-card__footer{display:flex;flex-wrap:wrap;gap:var(--fds-spacing-4);justify-content:flex-start;word-wrap:break-word;font:var(--fds-typography-paragraph-medium);font-family:inherit;padding:var(--fds-spacing-2) 0}.fds-card__content{flex-direction:column}.fds-card__header{flex-wrap:wrap;word-wrap:break-word;font:var(--fds-typography-heading-medium);font-family:inherit;padding:var(--fds-spacing-2) 0}.fds-card,.fds-card__header{display:flex;flex-direction:column}.fds-card{border-radius:var(--fds-border_radius-medium);box-sizing:border-box;overflow:hidden;position:relative;width:100%}.fds-card,.fds-card a,.fds-card a:visited{color:var(--fds-semantic-text-neutral-default)}.fds-card>hr{margin:var(--fds-spacing-3) 0;width:100%}.fds-card>:not(.fds-card__media,hr){padding-left:var(--fds-spacing-6);padding-right:var(--fds-spacing-6)}.fds-card>:not(.fds-card__media):first-child{padding-top:var(--fds-spacing-6)}.fds-card>:not(.fds-card__media):last-child{padding-bottom:var(--fds-spacing-6)}.fds-card__media:first-child{padding-bottom:var(--fds-spacing-4)}.fds-card__media:last-child{padding-top:var(--fds-spacing-6)}.fds-card--link{text-decoration:none}.fds-card--link h1,.fds-card--link h2,.fds-card--link h3,.fds-card--link h4,.fds-card--link h5,.fds-card--link h6{text-decoration:underline;text-decoration-thickness:max(1px,.0625rem,.1025em);text-underline-offset:max(4px,.25rem,.22em)}.fds-card--neutral{background-color:var(--fds-semantic-surface-neutral-default)}.fds-card--neutral,.fds-card--subtle{border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--subtle{background-color:var(--fds-semantic-surface-neutral-subtle)}.fds-card--neutral.fds-card--link:hover,.fds-card--subtle.fds-card--link:hover{background-color:var(--fds-semantic-surface-neutral-subtle-hover)}.fds-card--first{background-color:var(--fds-semantic-surface-first-light);border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--first.fds-card--link:hover{background-color:var(--fds-semantic-surface-first-light-hover)}.fds-card--first.fds-card--link:active{background-color:var(--fds-semantic-surface-first-light-active)}.fds-card--second{background-color:var(--fds-semantic-surface-second-light);border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--second.fds-card--link:hover{background-color:var(--fds-semantic-surface-second-light-hover)}.fds-card--second.fds-card--link:active{background-color:var(--fds-semantic-surface-second-light-active)}.fds-card--third{background-color:var(--fds-semantic-surface-third-light);border:1px solid var(--fds-semantic-border-neutral-subtle)}.fds-card--third.fds-card--link:hover{background-color:var(--fds-semantic-surface-third-light-hover)}.fds-card--third.fds-card--link:active{background-color:var(--fds-semantic-surface-third-light-active)}}@layer fds.link{.fds-link{align-items:center;color:var(--fds-semantic-text-action-default);cursor:pointer;display:inline-flex;gap:var(--fds-spacing-1);text-decoration:underline;text-decoration-thickness:max(1px,.0625rem);text-underline-offset:max(4px,.25rem)}.fds-link:visited{color:var(--fds-semantic-text-visited-default);text-decoration:none}.fds-link:hover{color:var(--fds-semantic-text-action-hover);text-decoration-thickness:max(2px,.125rem,.12em)}.fds-link:focus-visible{background:var(--fds-semantic-border-focus-outline);box-shadow:0 max(3px,.1875rem,.18em) var(--fds-semantic-border-focus-boxshadow);color:var(--fds-semantic-text-action-active);outline:none;text-decoration:none}.fds-link--inverted:not(:focus-visible,:active),.fds-link--inverted:not(:focus-visible,:active):hover,.fds-link--inverted:not(:focus-visible,:active):visited{color:#fff}}@layer fds.fieldset{.fds-fieldset{border:0;margin:0;min-width:0;padding:0}.fds-fieldset--spacing{display:flex;flex-direction:column;gap:var(--fds-spacing-2)}.fds-fieldset__description{color:var(--fds-semantic-text-neutral-subtle);font-weight:400}.fds-fieldset__legend{display:contents}.fds-fieldset--readonly .fds-fieldset__legend__content{display:inline-flex}.fds-fieldset--readonly .fds-fieldset__readonly__icon{height:1.2em;width:1.2em}.fds-fieldset:disabled .fds-fieldset__description,.fds-fieldset:disabled .fds-fieldset__legend{color:var(--fds-semantic-border-neutral-subtle)}.fds-fieldset__error-message{display:contents}}@layer fds.dropdownmenu{.fds-dropdownmenu{background-color:var(--fds-semantic-background-default);border-radius:var(--fds-border_radius-medium);box-shadow:var(--fds-shadow-medium);list-style:none;margin:0;padding:var(--fds-spacing-2);position:relative;z-index:1500}.fds-dropdownmenu--sm{min-width:240px;padding:var(--fds-spacing-2)}.fds-dropdownmenu--md{min-width:260px;padding:var(--fds-spacing-3) var(--fds-spacing-2)}.fds-dropdownmenu--lg{min-width:280px;padding:var(--fds-spacing-4) var(--fds-spacing-2)}.fds-dropdownmenu>hr{border-color:var(--fds-semantic-border-divider-subtle)!important}.fds-dropdownmenu__item{justify-content:start;padding:0 var(--fds-spacing-4)}.fds-dropdownmenu__section{list-style:none;margin:0;padding:0}.fds-dropdownmenu__heading{padding:var(--fds-spacing-2) var(--fds-spacing-4)}}@layer fds.chip{.fds-chip--button{--fdsc-chip-height:var(--fds-sizing-7);--fdsc-chip-padding:var(--fds-spacing-3);--fdsc-chip-background:var(--fds-semantic-surface-action-first-subtle);--fdsc-chip-text-color:var(--fds-semantic-text-neutral-default);--fdsc-chip-border:var(--fds-semantic-border-action-first-subtle);--fdsc-chip-border-radius:var(--fds-border_radius-full);align-items:center;background:var(--fdsc-chip-background);border:1px solid var(--fdsc-chip-border);border-radius:var(--fdsc-chip-border-radius);color:var(--fdsc-chip-text-color);display:inline-flex;font-family:inherit;min-height:var(--fdsc-chip-height);padding:0 var(--fdsc-chip-padding);text-decoration:none}.fds-chip--button:disabled,.fds-chip--button[aria-disabled=true]{cursor:not-allowed;opacity:var(--fds-opacity-disabled)}.fds-chip--button .fds-chip__label{align-items:center;color:inherit;display:flex;flex-direction:row;gap:var(--fds-spacing-2);line-height:normal}.fds-chip--removable{--fdsc-removable-background:var(--fds-semantic-surface-action-default);--fdsc-removable-text-color:var(--fds-semantic-text-neutral-on_inverted);--fdsc-removable-chip-size:var(--fds-sizing-7);--fdsc-removable-chip-xmark-color:var(--fds-semantic-text-neutral-on_inverted);--fdsc-removable-chip-xmark-padding_right:var(--fds-spacing-1);--fdsc-removable-chip-xmark-size:var(--fds-sizing-6);--fdsc-removable-chip-xmark-wrapper-width:calc(var(--fdsc-removable-chip-xmark-size) + var(--fdsc-removable-chip-xmark-padding_right));background:var(--fdsc-removable-background);border:0;color:var(--fdsc-removable-text-color);min-height:var(--fdsc-chip-height);padding-right:var(--fds-spacing-2)}.fds-chip--removable.fds-chip--sm{padding-right:var(--fds-spacing-1)}.fds-chip--removable.fds-chip--lg{padding-right:var(--fds-spacing-2)}.fds-chip__x-mark{color:var(--fdsc-removable-chip-xmark-color)}.fds-chip__x-mark,.fds-chip__x-mark .fds-chip__icon{height:var(--fdsc-removable-chip-xmark-size);width:var(--fdsc-removable-chip-xmark-size)}.fds-chip--spacing{padding-left:var(--fds-spacing-2)!important}.fds-chip--sm .fds-chip__checkmark-icon{height:var(--fds-sizing-5);width:auto}.fds-chip--md .fds-chip__checkmark-icon{height:24px;width:auto}.fds-chip--lg .fds-chip__checkmark-icon{height:26px;width:auto}.fds-chip--group-container{display:flex;gap:var(--fdsc-gap);list-style-type:none;margin:0;padding:0}.fds-chip--group-container,.fds-chip--group-container.fds-chip--lg,.fds-chip--group-container.fds-chip--md,.fds-chip--group-container.fds-chip--sm{--fdsc-gap:var(--fds-spacing-2)}@media (hover:hover) and (pointer:fine){.fds-chip--button:not(:disabled,[aria-disabled=true]):hover{--fdsc-chip-background:var(--fds-semantic-surface-action-first-subtle-hover);--fdsc-chip-text-color:var(--fds-semantic-text-neutral-default);--fdsc-chip-border:var(--fds-semantic-border-action-first-subtle-hover);cursor:pointer}.fds-chip--button:not(:disabled,[aria-disabled=true]):is([aria-pressed=true]):hover{--fdsc-chip-background:var(--fds-semantic-surface-action-first-no_fill-active);--fdsc-chip-text-color:var(--fds-semantic-text-neutral-default)}.fds-chip--removable:not(:disabled,[aria-disabled=true]):focus,.fds-chip--removable:not(:disabled,[aria-disabled=true]):hover{--fdsc-removable-background:var(--fds-semantic-surface-action-hover);--fdsc-removable-chip-xmark-color:var(--fds-semantic-text-neutral-on_inverted)}}.fds-chip--button:is([aria-pressed=true]),.fds-chip--button:not(:disabled,[aria-disabled=true]):active,.fds-chip--removable:is([aria-pressed=true]),.fds-chip--removable:not(:disabled,[aria-disabled=true]):active{--fdsc-chip-background:var(--fds-semantic-surface-action-first-active);--fdsc-chip-text-color:var(--fds-semantic-text-neutral-on_inverted);--fdsc-chip-border:var(--fds-semantic-surface-action-first-active);--fdsc-removable-background:var(--fds-semantic-surface-action-first-active);--fdsc-removable-text-color:var(--fds-semantic-text-neutral-on_inverted)}.fds-chip--sm{--fdsc-chip-height:var(--fds-sizing-7);--fdsc-chip-padding:var(--fds-spacing-3);--fdsc-removable-chip-xmark-size:var(--fds-sizing-5);--fdsc-removable-chip-xmark-padding_right:var(--fds-spacing-1)}.fds-chip--md{--fdsc-chip-height:var(--fds-sizing-8);--fdsc-chip-padding:var(--fds-spacing-3);--fdsc-removable-chip-xmark-size:var(--fds-sizing-6);--fdsc-removable-chip-xmark-padding_right:var(--fds-spacing-2)}.fds-chip--lg{--fdsc-chip-height:var(--fds-sizing-9);--fdsc-chip-padding:var(--fds-spacing-4);--fdsc-removable-chip-xmark-size:var(--fds-sizing-7);--fdsc-removable-chip-xmark-padding_right:var(--fds-spacing-3)}}@layer fds.divider{.fds-divider{border:none;border-top:1px solid}.fds-divider--default{border-color:var(--fds-semantic-border-divider-default)}.fds-divider--strong{border-color:var(--fds-semantic-border-divider-strong)}.fds-divider--subtle{border-color:var(--fds-semantic-border-divider-subtle)}}@layer fds.tabs{.fds-tabs__tab{--fds-tabs__tab-bottom-border-color:transparent;align-items:center;background-color:initial;border:none;border-radius:0;box-sizing:border-box;color:var(--fds-semantic-text-neutral-subtle);cursor:pointer;display:flex;flex-direction:row;gap:var(--fds-spacing-1);justify-content:center;padding:var(--fds-spacing-2) var(--fds-spacing-3);position:relative;text-align:center}.fds-tabs__content{padding:var(--fds-spacing-5)}.fds-tabs--sm .fds-tabs__content,.fds-tabs--sm .fds-tabs__tab{font:var(--fds-typography-paragraph-short-small)}.fds-tabs--md .fds-tabs__content,.fds-tabs--md .fds-tabs__tab{font:var(--fds-typography-paragraph-short-medium)}.fds-tabs--lg .fds-tabs__content,.fds-tabs--lg .fds-tabs__tab{font:var(--fds-typography-paragraph-short-large)}.fds-tabs--sm .fds-tabs__tab{padding:var(--fds-spacing-2) var(--fds-spacing-4)}.fds-tabs--md .fds-tabs__tab{padding:var(--fds-spacing-3) var(--fds-spacing-5)}.fds-tabs--lg .fds-tabs__tab{padding:var(--fds-spacing-4) var(--fds-spacing-6)}.fds-tabs--sm .fds-tabs__content{padding:var(--fds-spacing-4)}.fds-tabs--md .fds-tabs__content{padding:var(--fds-spacing-5)}.fds-tabs--lg .fds-tabs__content{padding:var(--fds-spacing-6)}@media (hover:hover) and (pointer:fine){.fds-tabs__tab:hover:not([aria-selected=true]){--fds-tabs__tab-bottom-border-color:var(--fds-semantic-border-neutral-subtle);color:var(--fds-semantic-text-neutral-default)}}.fds-tabs__tab[aria-selected=true]{--fds-tabs__tab-bottom-border-color:var(--fds-semantic-border-action-default);color:var(--fds-semantic-text-action-default)}.fds-tabs__tab:focus-visible{--fds-tabs__tab-bottom-border-color:var(--fds-semantic-text-neutral-default);background:var(--fds-semantic-border-focus-outline);color:var(--fds-semantic-text-neutral-default);outline:none}.fds-tabs__tab:after{background-color:var(--fds-tabs__tab-bottom-border-color);border-radius:var(--fds-border_radius-full);bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:100%}.fds-tabs__tablist{border-bottom:var(--fds-border_width-default) solid var(--fds-semantic-border-neutral-subtle);display:flex;flex-direction:row}}@layer fds.pagination{.fds-pagination{--fds-pagination-listitem-margin:var(--fds-spacing-4);--fds-pagination-ellipsis-width:var(--fds-sizing-12);--fds-pagination-chevron-margin:var(--fds-spacing-2);display:flex;list-style-type:none;margin:0;padding:0;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-pagination--hidden{visibility:hidden}.fds-pagination--lg,.fds-pagination--md,.fds-pagination--sm{--fds-pagination-chevron-margin:var(--fds-spacing-2)}.fds-pagination li:first-child{margin-right:var(--fds-pagination-chevron-margin)}.fds-pagination li:last-child{margin-left:var(--fds-pagination-chevron-margin)}.fds-pagination__item{flex:1;margin-right:var(--fds-pagination-listitem-margin)}.fds-pagination--sm .fds-pagination__item{--fds-pagination-listitem-margin:var(--fds-spacing-2);--fds-pagination-ellipsis-width:var(--fds-sizing-10)}.fds-pagination--md .fds-pagination__item{--fds-pagination-listitem-margin:var(--fds-spacing-4);--fds-pagination-ellipsis-width:var(--fds-sizing-12)}.fds-pagination--lg .fds-pagination__item{--fds-pagination-listitem-margin:var(--fds-spacing-6);--fds-pagination-ellipsis-width:var(--fds-sizing-14)}.fds-pagination__item.fds-pagination--compact{--fds-pagination-listitem-margin:var(--fds-spacing-0);--fds-pagination-chevron-margin:var(--fds-spacing-1)}.fds-pagination__ellipsis{margin-top:.5em;text-align:center;width:var(--fds-pagination-ellipsis-width)}}@layer fds.fds-popover{.fds-popover{--fds-popover-border:1px solid;--fds-popover-background:var(--fds-semantic-surface-neutral-default);background:var(--fds-popover-background);border:var(--fds-popover-border);border-radius:var(--fds-border_radius-medium);max-width:300px;padding:var(--fds-spacing-3);z-index:1500}.fds-popover--sm{padding:var(--fds-spacing-2) var(--fds-spacing-3)}.fds-popover--md{padding:var(--fds-spacing-3) var(--fds-spacing-4)}.fds-popover--lg{padding:var(--fds-spacing-3) var(--fds-spacing-5)}.fds-popover--default{--fds-popover-background:var(--fds-semantic-surface-neutral-default);border-color:var(--fds-semantic-border-neutral-default)}.fds-popover--info{--fds-popover-background:var(--fds-semantic-surface-info-subtle);border-color:var(--fds-semantic-border-info-default)}.fds-popover--warning{--fds-popover-background:var(--fds-semantic-surface-warning-subtle);border-color:var(--fds-semantic-border-warning-default)}.fds-popover--danger{--fds-popover-background:var(--fds-semantic-surface-danger-subtle);border-color:var(--fds-semantic-border-danger-default)}.fds-popover__arrow{background:var(--fds-popover-background);position:absolute;transform:rotate(45deg)}.fds-popover__arrow.fds-popover__arrow--top{border-left:var(--fds-popover-border);border-top:var(--fds-popover-border);border-color:inherit}.fds-popover__arrow.fds-popover__arrow--bottom{border-bottom:var(--fds-popover-border);border-right:var(--fds-popover-border);border-color:inherit}.fds-popover__arrow.fds-popover__arrow--right{border-right:var(--fds-popover-border);border-top:var(--fds-popover-border);border-color:inherit}.fds-popover__arrow.fds-popover__arrow--left{border-bottom:var(--fds-popover-border);border-left:var(--fds-popover-border);border-color:inherit}}@layer fds.skeleton{.fds-skeleton{--fds-skeleton-animation-duration:0.8s;animation:fds-skeleton-opacity-fade var(--fds-skeleton-animation-duration) linear infinite alternate;background-color:var(--fds-semantic-surface-neutral-subtle-hover);height:1.3em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fds-skeleton--circle{border-radius:50%;width:1.3em}.fds-skeleton--rectangle{border-radius:.2em;width:100%}.fds-skeleton--text{border-radius:.55em;height:auto;transform:scaleY(.6);transform-origin:0 55%;width:100%}.fds-skeleton--text:empty:before{content:"\\00a0"}.fds-skeleton--has-children{color:transparent!important;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-skeleton--has-children>*{visibility:hidden}@media (prefers-reduced-motion:reduce){.fds-skeleton{--fds-skeleton-animation-duration:1.6s}}@keyframes fds-skeleton-opacity-fade{0%{opacity:1}to{opacity:.4}}}@layer fds.tag{.fds-tag{--fds-tag-background:var(--fds-semantic-surface-neutral-subtle);--fds-tag-color:var(--fds-semantic-text-neutral-default);align-items:center;background-color:var(--fds-tag-background);border-radius:var(--fds-border_radius-small);box-sizing:border-box;color:var(--fds-tag-color);display:flex;min-height:var(--fds-sizing-8);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.fds-tag,.fds-tag--sm{padding:0 var(--fds-spacing-2)}.fds-tag--sm{min-height:var(--fds-sizing-7)}.fds-tag--md{min-height:var(--fds-sizing-8);padding:0 var(--fds-spacing-2)}.fds-tag--lg{min-height:var(--fds-sizing-9);padding:0 var(--fds-spacing-3)}.fds-tag--neutral{--fds-tag-background:var(--fds-semantic-surface-neutral-subtle);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--info{--fds-tag-background:var(--fds-semantic-surface-info-subtle);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--success{--fds-tag-background:var(--fds-semantic-surface-success-subtle);--fds-tag-color:var(--fds-semantic-text-success-on_success_subtle)}.fds-tag--warning{--fds-tag-background:var(--fds-semantic-surface-warning-default);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--danger{--fds-tag-background:var(--fds-semantic-surface-danger-subtle);--fds-tag-color:var(--fds-semantic-text-danger-on_danger_subtle)}.fds-tag--first{--fds-tag-background:var(--fds-semantic-surface-first-light);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--second{--fds-tag-background:var(--fds-semantic-surface-second-light);--fds-tag-color:var(--fds-semantic-text-neutral-default)}.fds-tag--third{--fds-tag-background:var(--fds-semantic-surface-third-light);--fds-tag-color:var(--fds-semantic-text-neutral-default)}}@layer fds.errorsummary{.fds-error-summary{background-color:var(--fds-semantic-surface-danger-subtle);border-radius:var(--fds-border_radius-large);padding:var(--fds-spacing-6) var(--fds-spacing-8)}.fds-error-summary a{color:var(--fds-semantic-text-neutral-default)}.fds-error-summary li:last-of-type{margin-bottom:0}}@layer fds.togglegroup{.fds-togglegroup{background-color:var(--fds-semantic-background-default);border:var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);border-radius:var(--fds-border_radius-large);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-togglegroup__content{display:inline-grid;gap:var(--fds-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--fds-spacing-1)}.fds-togglegroup__input{display:none}.fds-togglegroup__item:focus-visible{z-index:1}}@layer fds.tooltip{.fds-tooltip{background:var(--fds-semantic-surface-neutral-inverted);border-radius:var(--fds-border_radius-medium);color:var(--fds-semantic-text-neutral-on_inverted);font:var(--fds-typography-paragraph-xsmall);font-family:inherit;padding:var(--fds-spacing-1) var(--fds-spacing-2)}.fds-tooltip--inverted{background:var(--fds-semantic-surface-neutral-subtle);color:var(--fds-semantic-text-neutral-default)}.fds-tooltip__arrow{fill:var(--fds-semantic-surface-neutral-inverted)}.fds-tooltip--inverted .fds-tooltip__arrow{fill:var(--fds-semantic-surface-neutral-subtle)}}@layer fds.spinner{.fds-spinner{animation:fds-spinner-rotate-animation linear infinite;animation-duration:2s}.fds-spinner__circle{stroke-dasharray:1px,200px;animation:fds-spinner-stroke-animation ease-in-out infinite;animation-duration:2s;transform-origin:center}@media (prefers-reduced-motion:reduce){.fds-spinner,.fds-spinner__circle{animation-duration:6s}}.fds-spinner--default .fds-spinner__circle{stroke:var(--fds-semantic-border-neutral-default)}.fds-spinner--interaction .fds-spinner__circle{stroke:var(--fds-semantic-border-action-first-default)}.fds-spinner--inverted .fds-spinner__circle{stroke:var(--fds-semantic-surface-neutral-default)}.fds-spinner__background{stroke:var(--fds-semantic-border-neutral-subtle)}.fds-spinner__background--inverted{stroke:var(--fds-semantic-surface-neutral-dark)}@keyframes fds-spinner-rotate-animation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fds-spinner-stroke-animation{0%{stroke-dasharray:1px,200px;stroke-dashoffset:0}50%{stroke-dasharray:100px,200px;stroke-dashoffset:-15px;transform:rotate(0deg)}to{stroke-dasharray:1px,200px;stroke-dashoffset:-120px;transform:rotate(15deg)}}}@layer fds.table{.fds-table{border-collapse:initial;border-spacing:0;position:relative;text-align:left;--table-padding:0;--border-radius:var(--fds-border_radius-medium)}.fds-table--sticky-header{overflow:auto}.fds-table--border .fds-table__row:last-of-type td{border-bottom:0}.fds-table--sm{--table-padding:var(--fds-spacing-1) var(--fds-spacing-3)}.fds-table--md{--table-padding:var(--fds-spacing-2) var(--fds-spacing-3)}.fds-table--lg{--table-padding:var(--fds-spacing-3) var(--fds-spacing-3)}.fds-table__head{box-sizing:border-box;font:inherit;font-family:inherit;font-weight:500;z-index:0}.fds-table__head,.fds-table__header__cell{border-bottom:2px solid var(--fds-semantic-border-divider-default);border-spacing:0}.fds-table__header__cell{background-color:var(--fds-semantic-surface-neutral-default);font:inherit;font-family:inherit;padding:var(--table-padding)}.fds-table--sticky-header .fds-table__head .fds-table__header__cell{position:-webkit-sticky;position:sticky;top:0;z-index:1}.fds-table__header__cell--sortable{padding:0}.fds-table__header__cell--sortable button{align-items:center;background-color:initial;border:none;cursor:pointer;display:flex;font:inherit;font-family:inherit;gap:var(--fds-spacing-1);padding:var(--table-padding);position:relative;width:100%;z-index:2}.fds-table__header__cell--sorted button{background-color:var(--fds-semantic-surface-neutral-subtle)}.fds-table__header__cell--sortable button:focus{z-index:3}.fds-table__header__cell--sortable button svg{font-size:1.2em}.fds-table__cell{background-color:var(--fds-semantic-surface-neutral-default);border-bottom:1px solid var(--fds-semantic-border-divider-default);padding:var(--table-padding)}.fds-table--zebra .fds-table__row{border-bottom:0}.fds-table--zebra tr:nth-child(2n):not(:hover) .fds-table__cell{background-color:var(--fds-semantic-background-subtle)}.fds-table--border{border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--border-radius)}.fds-table--border .fds-table__head .fds-table__header__cell:first-of-type{border-top-left-radius:var(--border-radius);overflow:hidden}.fds-table--border .fds-table__head .fds-table__header__cell:last-of-type{border-top-right-radius:var(--border-radius);overflow:hidden}.fds-table--border .fds-table__row:last-of-type .fds-table__cell:first-of-type{border-bottom-left-radius:var(--border-radius);overflow:hidden}.fds-table--border .fds-table__row:last-of-type .fds-table__cell:last-of-type{border-bottom-right-radius:var(--border-radius);overflow:hidden}@media (hover:hover) and (pointer:fine){.fds-table__header__cell--sortable button:hover,.fds-table__row:hover .fds-table__cell{background-color:var(--fds-semantic-surface-neutral-subtle-hover)}}}@layer fds.combobox{.fds-combobox{background-color:initial;display:grid;gap:var(--fds-spacing-2)}.fds-combobox__options-wrapper{background:var(--fds-semantic-background-default);overflow-y:auto;padding:var(--fds-spacing-2);z-index:1600}.fds-combobox--readonly .fds-combobox__input{pointer-events:none}.fds-combobox__input__wrapper{align-items:center;cursor:text;display:flex;font:var(--fds-typography-paragraph-medium);font-family:inherit;gap:var(--fds-spacing-1);height:auto;justify-content:space-between;padding:var(--fds-spacing-2);position:relative;width:100%}.fds-combobox__input__wrapper .fds-combobox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:initial;border:none;flex-grow:1;height:100%;min-width:50px}.fds-combobox--sm .fds-combobox__input__wrapper{min-height:var(--fds-sizing-10);padding:5px var(--fds-spacing-2)}.fds-combobox--sm .fds-combobox__input__wrapper,.fds-combobox--sm .fds-combobox__input__wrapper .fds-combobox__input{font:var(--fds-typography-paragraph-small);font-family:inherit}.fds-combobox--md .fds-combobox__input__wrapper{min-height:var(--fds-sizing-12);padding:7px var(--fds-spacing-3)}.fds-combobox--md .fds-combobox__input__wrapper,.fds-combobox--md .fds-combobox__input__wrapper .fds-combobox__input{font:var(--fds-typography-paragraph-medium);font-family:inherit}.fds-combobox--lg .fds-combobox__input__wrapper{min-height:var(--fds-sizing-14);padding:7px var(--fds-spacing-4)}.fds-combobox--lg .fds-combobox__input__wrapper,.fds-combobox--lg .fds-combobox__input__wrapper .fds-combobox__input{font:var(--fds-typography-paragraph-large);font-family:inherit}.fds-combobox__input__wrapper .fds-combobox__input:focus{outline:none}.fds-combobox__input__wrapper.fds-combobox--error{border-color:var(--fds-semantic-border-danger-default);border-width:2px}.fds-combobox__chip-and-input{align-items:center;background-color:initial;display:flex;flex-wrap:wrap;gap:var(--fds-spacing-2);width:100%}.fds-combobox__arrow{cursor:pointer;display:grid;place-items:center}.fds-combobox__input__wrapper.fds-combobox--readonly{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-combobox__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-combobox__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-combobox__clear-button{aspect-ratio:1;background-color:initial;border:none;border-radius:var(--fds-spacing-1);color:var(--fds-semantic-text-neutral-default);cursor:pointer;display:grid;height:29px;padding:0;place-items:center;width:29px}.fds-combobox--sm .fds-combobox__clear-button{height:25px;width:25px}.fds-combobox--md .fds-combobox__clear-button{height:29px;width:29px}.fds-combobox--lg .fds-combobox__clear-button{height:31px;width:31px}.fds-combobox__clear-button:not(:disabled):hover{background-color:var(--fds-semantic-surface-info-subtle-hover)}.fds-combobox__disabled{opacity:var(--fds-opacity-disabled)}.fds-combobox__disabled *{cursor:not-allowed}.fds-combobox__readonly__icon{height:1.2em;width:1.2em}.fds-combobox__error-message{margin-top:var(--fds-spacing-2)}.fds-combobox__error-message:empty{display:none}.fds-combobox__loading{align-content:center;display:flex;gap:var(--fds-spacing-2)}.fds-combobox__input__wrapper:has(input:focus){--fds-focus-border-width:3px;box-shadow:0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow)!important;outline:var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);outline-offset:var(--fds-focus-border-width)}.fds-combobox__empty{padding:var(--fds-spacing-2) var(--fds-spacing-3)}.fds-combobox--lg .fds-combobox__empty{font:var(--fds-typography-label-large);font-family:inherit;font-weight:400}.fds-combobox--md .fds-combobox__empty{font:var(--fds-typography-label-medium);font-family:inherit;font-weight:400}.fds-combobox--sm .fds-combobox__empty{font:var(--fds-typography-label-small);font-family:inherit;font-weight:400}.fds-combobox__custom{padding:var(--fds-spacing-2) var(--fds-spacing-3)}.fds-combobox--lg .fds-combobox__custom{font:var(--fds-typography-label-large);font-family:inherit;font-weight:400}.fds-combobox--md .fds-combobox__custom{font:var(--fds-typography-label-medium);font-family:inherit;font-weight:400}.fds-combobox--sm .fds-combobox__custom{font:var(--fds-typography-label-small);font-family:inherit;font-weight:400}.fds-combobox__option{background:none;border:none;border-left:5px solid transparent;border-radius:var(--fds-border_radius-interactive);cursor:pointer;display:grid;font:var(--fds-typography-label-medium);font-family:inherit;grid-template-columns:1.2em 1fr;height:auto;justify-content:start;padding:var(--fds-spacing-2) var(--fds-spacing-3);padding-left:var(--fds-spacing-1);text-align:left;width:100%}.fds-combobox__option.fds-combobox__option--active{background:var(--fds-semantic-surface-action-first-no_fill-hover);border-left:5px solid var(--fds-semantic-border-input-hover)}.fds-combobox__option>div{align-self:flex-start}.fds-combobox__option.fds-combobox__option--multiple{gap:var(--fds-spacing-2);grid-template-columns:auto 1fr}.fds-combobox__option__label{color:var(--fds-semantic-text-neutral-default);cursor:pointer;display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--fds-spacing-1);margin:auto 0}.fds-combobox__option--active .fds-combobox__option__label{color:var(--fds-semantic-text-action-hover)}.fds-combobox__option__icon-wrapper{aspect-ratio:1/1;background-color:#fff;border:2px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-interactive);display:grid;place-items:center;width:var(--fds-spacing-6)}.fds-combobox__option--active .fds-combobox__option__icon-wrapper{border-color:var(--fds-semantic-border-input-hover)}.fds-combobox--sm .fds-combobox__option .fds-combobox__option__icon-wrapper{width:var(--fds-spacing-5)}.fds-combobox--md .fds-combobox__option .fds-combobox__option__icon-wrapper{width:var(--fds-spacing-6)}.fds-combobox--lg .fds-combobox__option .fds-combobox__option__icon-wrapper{width:var(--fds-spacing-7)}.fds-combobox__option__icon-wrapper.fds-combobox__option__icon-wrapper--selected{background-color:var(--fds-semantic-border-input-hover);border-color:var(--fds-semantic-border-input-hover)}.fds-combobox__option__icon-wrapper__icon{box-sizing:border-box;padding-top:.2em;transform:scale(1.4);stroke:var(--fds-semantic-text-neutral-default);color:var(--fds-semantic-text-neutral-default)}.fds-combobox__option__icon-wrapper .fds-combobox__option__icon-wrapper__icon{padding-top:0}.fds-combobox__option--active .fds-combobox__option__icon-wrapper__icon{stroke:var(--fds-semantic-text-action-hover);color:var(--fds-semantic-text-action-hover)}.fds-combobox__option__icon-wrapper.fds-combobox__option__icon-wrapper--selected .fds-combobox__option__icon-wrapper__icon{color:#fff;stroke:#fff}.fds-combobox__option__description{color:var(--fds-semantic-text-neutral-subtle);display:flex;flex-direction:column;flex-wrap:wrap;font:inherit;font-family:inherit;gap:var(--fds-spacing-1)}}`;
|
|
6
6
|
const styled = (superClass, elementCss = []) => {
|