@sebgroup/green-core 1.90.1 → 1.90.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/button/button.trans.styles.scss.js +1 -1
  2. package/components/context-menu/context-menu.trans.styles.scss.js +1 -1
  3. package/components/icon/icon.deprecated.js +2 -1
  4. package/components/icon/icons/cain-link.component.d.ts +1 -0
  5. package/components/theme/chlorophyll-tokens.scss.js +1 -1
  6. package/generated/react/index.d.ts +3 -3
  7. package/generated/react/index.js +3 -3
  8. package/package.json +1 -1
  9. package/utils/helpers/custom-element-scoping.js +1 -1
package/components/button/button.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n font-size: 0;\n width: 1rem;\n height: 1rem;\n display: inline-block;\n}\ni.sg-icon::before {\n content: \"\";\n display: inline-block;\n background: var(--color);\n width: 100%;\n height: 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -10px;\n margin-top: 2px;\n transform: translate(75%) rotate(-135deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -4px;\n margin-top: 2px;\n transform: translate(75%) rotate(45deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _ranks, _overrides;\n :host {\n display: inline-block;\n }\n @layer _base {\n .button {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.75rem;\n padding-top: 0.75rem;\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n font-weight: 500;\n min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n box-sizing: border-box;\n font-size: inherit;\n overflow: hidden;\n display: flex;\n gap: 0.5rem;\n text-decoration: none;\n width: 100%;\n }\n .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .button:focus, .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n @media (max-width: 35.98em) {\n .button {\n min-width: 100%;\n }\n }\n @media screen and (-ms-high-contrast: active) {\n .button {\n border: 2px solid currentcolor;\n }\n }\n .button.small {\n min-height: 2rem;\n padding: 0.4375rem 0.75rem;\n line-height: 1rem;\n }\n .button.large {\n min-height: 4rem;\n padding: 1rem 1.5rem;\n font-size: 1.5rem;\n line-height: 2rem;\n }\n .button slot:not([name]) {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n :host(:not([variant=ghost])) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: rgb(0, 122, 199);\n border-color: rgb(0, 122, 199);\n color: #fff;\n --color: #fff;\n }\n :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host(:not([variant=ghost])) .button:focus-visible {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n }\n :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n background: var(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !important;\n cursor: not-allowed;\n }\n :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=secondary]) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: rgb(0, 122, 199);\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: transparent;\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n /* stylelint-disable */\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n :host([variant=negative][rank=primary]) .button {\n background: rgb(187, 0, 12);\n border-color: rgb(187, 0, 12);\n color: #fff;\n --color: #fff;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n :host([variant=negative][rank=primary]) .button[aria-selected=true],\n :host([variant=negative][rank=primary]) .button:active,\n :host([variant=negative][rank=primary]) .button.active,\n :host([variant=negative][rank=primary]) .button.active:hover,\n :host([variant=negative][rank=primary]) .button:active:hover {\n background-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n :host([variant=negative][rank=primary]) .button.active:hover,\n :host([variant=negative][rank=primary]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n :host([variant=negative][rank=primary]) .button:focus,\n :host([variant=negative][rank=primary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n :host([variant=negative][rank=primary]) .button:disabled,\n :host([variant=negative][rank=primary]) .button.disabled,\n :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n background: var(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n /* stylelint-enable */\n :host([variant=negative][rank=secondary]) .button,\n :host([variant=negative][rank=tertiary]) .button {\n color: rgb(187, 0, 12);\n --color: rgb(187, 0, 12);\n border-color: transparent;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n }\n :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\n }\n :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n :host([variant=negative][rank=tertiary]) .button:active,\n :host([variant=negative][rank=tertiary]) .button.active,\n :host([variant=negative][rank=tertiary]) .button.active:hover,\n :host([variant=negative][rank=tertiary]) .button:active:hover {\n background-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\n }\n :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n :host([variant=negative][rank=tertiary]) .button.active:hover,\n :host([variant=negative][rank=tertiary]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n :host([variant=negative][rank=tertiary]) .button:focus,\n :host([variant=negative][rank=tertiary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([variant=negative][rank=secondary]) .button {\n border-color: rgb(187, 0, 12);\n }\n :host([variant=ghost]) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n border-color: rgb(51, 51, 51);\n color: rgb(51, 51, 51);\n --color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=ghost]) .button:focus-visible {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51) !important;\n }\n :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n }\n @layer _overrides {\n :host .button.icon {\n padding: 0.75rem;\n background: transparent;\n border-width: 0px;\n color: currentColor;\n }\n :host .button.icon:hover {\n color: currentColor;\n background: var(--grey-500);\n }\n :host .button.icon slot {\n display: contents;\n }\n .button.icon.xs {\n min-height: 1.5rem;\n line-height: 0.75rem;\n padding: 0.25rem;\n }\n .button.icon.small {\n padding: 0.5rem;\n }\n .button.icon.large {\n padding: 1rem;\n }\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n font-size: 0;\n width: 1rem;\n height: 1rem;\n display: inline-block;\n}\ni.sg-icon::before {\n content: \"\";\n display: inline-block;\n background: var(--color);\n width: 100%;\n height: 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -10px;\n margin-top: 2px;\n transform: translate(75%) rotate(-135deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -4px;\n margin-top: 2px;\n transform: translate(75%) rotate(45deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _ranks, _overrides;\n :host {\n display: inline-block;\n }\n @layer _base {\n .button {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.75rem;\n padding-top: 0.75rem;\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n font-weight: 500;\n min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n box-sizing: border-box;\n font-size: inherit;\n overflow: hidden;\n display: flex;\n gap: 0.5rem;\n text-decoration: none;\n width: 100%;\n }\n .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .button:focus, .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n @media (max-width: 35.98em) {\n .button {\n min-width: 100%;\n }\n }\n @media screen and (-ms-high-contrast: active) {\n .button {\n border: 2px solid currentcolor;\n }\n }\n .button.small {\n min-height: 2rem;\n padding: 0.4375rem 0.75rem;\n font-size: 0.875rem;\n line-height: 1rem;\n }\n .button.large {\n min-height: 4rem;\n padding: 1rem 1.5rem;\n font-size: 1.5rem;\n line-height: 2rem;\n }\n .button slot:not([name]) {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n :host(:not([variant=ghost])) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: rgb(0, 122, 199);\n border-color: rgb(0, 122, 199);\n color: #fff;\n --color: #fff;\n }\n :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host(:not([variant=ghost])) .button:focus-visible {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n }\n :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n background: var(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !important;\n cursor: not-allowed;\n }\n :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=secondary]) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: rgb(0, 122, 199);\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: transparent;\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n /* stylelint-disable */\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n :host([variant=negative][rank=primary]) .button {\n background: rgb(187, 0, 12);\n border-color: rgb(187, 0, 12);\n color: #fff;\n --color: #fff;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n :host([variant=negative][rank=primary]) .button[aria-selected=true],\n :host([variant=negative][rank=primary]) .button:active,\n :host([variant=negative][rank=primary]) .button.active,\n :host([variant=negative][rank=primary]) .button.active:hover,\n :host([variant=negative][rank=primary]) .button:active:hover {\n background-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n :host([variant=negative][rank=primary]) .button.active:hover,\n :host([variant=negative][rank=primary]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n :host([variant=negative][rank=primary]) .button:focus,\n :host([variant=negative][rank=primary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n :host([variant=negative][rank=primary]) .button:disabled,\n :host([variant=negative][rank=primary]) .button.disabled,\n :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n background: var(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n /* stylelint-enable */\n :host([variant=negative][rank=secondary]) .button,\n :host([variant=negative][rank=tertiary]) .button {\n color: rgb(187, 0, 12);\n --color: rgb(187, 0, 12);\n border-color: transparent;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n }\n :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\n }\n :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n :host([variant=negative][rank=tertiary]) .button:active,\n :host([variant=negative][rank=tertiary]) .button.active,\n :host([variant=negative][rank=tertiary]) .button.active:hover,\n :host([variant=negative][rank=tertiary]) .button:active:hover {\n background-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\n }\n :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n :host([variant=negative][rank=tertiary]) .button.active:hover,\n :host([variant=negative][rank=tertiary]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n :host([variant=negative][rank=tertiary]) .button:focus,\n :host([variant=negative][rank=tertiary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([variant=negative][rank=secondary]) .button {\n border-color: rgb(187, 0, 12);\n }\n :host([variant=ghost]) .button {\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n border-color: rgb(51, 51, 51);\n color: rgb(51, 51, 51);\n --color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=ghost]) .button:focus-visible {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51) !important;\n }\n :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n }\n @layer _overrides {\n :host .button.icon {\n padding: 0.75rem;\n background: transparent;\n border-width: 0px;\n color: currentColor;\n }\n :host .button.icon:hover {\n color: currentColor;\n background: var(--grey-500);\n }\n :host .button.icon slot {\n display: contents;\n }\n .button.icon.xs {\n min-height: 1.5rem;\n line-height: 0.75rem;\n padding: 0.25rem;\n }\n .button.icon.small {\n padding: 0.5rem;\n }\n .button.icon.large {\n padding: 1rem;\n }\n }\n}";
2
2
  export default styles;
package/components/context-menu/context-menu.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n font-size: 0;\n width: 1rem;\n height: 1rem;\n display: inline-block;\n}\ni.sg-icon::before {\n content: \"\";\n display: inline-block;\n background: var(--color);\n width: 100%;\n height: 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -10px;\n margin-top: 2px;\n transform: translate(75%) rotate(-135deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -4px;\n margin-top: 2px;\n transform: translate(75%) rotate(45deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _overrides;\n :host {\n display: inline-block;\n }\n @layer _base {\n button {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.75rem;\n padding-top: 0.75rem;\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n font-weight: 500;\n min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: 0.0625rem solid transparent;\n padding: 0.625rem;\n height: 2.75rem;\n width: 2.75rem;\n min-width: auto;\n --color: var(--gds-ref-pallet-base800);\n }\n button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n button:focus, button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n @media (max-width: 35.98em) {\n button {\n min-width: 100%;\n }\n }\n @media screen and (-ms-high-contrast: active) {\n button {\n border: 2px solid currentcolor;\n }\n }\n button.small {\n min-height: 2rem;\n padding: 0.4375rem 0.75rem;\n line-height: 1rem;\n }\n button.large {\n min-height: 4rem;\n padding: 1rem 1.5rem;\n font-size: 1.5rem;\n line-height: 2rem;\n }\n .form-group button {\n margin-top: -0.625rem;\n }\n button.small {\n height: 2rem;\n width: 2rem;\n padding: 0.4375rem;\n line-height: 1.125rem;\n }\n button svg {\n height: 1rem;\n width: 1rem;\n }\n button path,\n button line,\n button circle,\n button rect,\n button ellipse,\n button polyline,\n button text {\n fill: var(--gds-ref-pallet-base800);\n stroke: var(--gds-ref-pallet-base800);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n }\n button:hover, button.highlighted {\n background-color: rgba(0, 0, 0, 0.1);\n border-color: transparent;\n }\n button:active, button.highlighted:hover {\n background-color: rgba(0, 0, 0, 0.2);\n border-color: transparent;\n }\n }\n @layer _overrides {\n button {\n border-color: transparent;\n color: var(--gds-ref-pallet-base800);\n display: flex;\n gap: 0.5rem;\n line-height: 0.75;\n padding-inline: 0.4375rem;\n width: auto;\n }\n button.highlighted {\n background-color: var(--gds-ref-pallet-base300);\n }\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n font-size: 0;\n width: 1rem;\n height: 1rem;\n display: inline-block;\n}\ni.sg-icon::before {\n content: \"\";\n display: inline-block;\n background: var(--color);\n width: 100%;\n height: 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -10px;\n margin-top: 2px;\n transform: translate(75%) rotate(-135deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -4px;\n margin-top: 2px;\n transform: translate(75%) rotate(45deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _overrides;\n :host {\n display: inline-block;\n }\n @layer _base {\n button {\n background-color: transparent;\n border: 0;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.75rem;\n padding-top: 0.75rem;\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n font-weight: 500;\n min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: 0.0625rem solid transparent;\n padding: 0.625rem;\n height: 2.75rem;\n width: 2.75rem;\n min-width: auto;\n --color: var(--gds-sys-color-base-800);\n }\n button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n button:focus, button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n @media (max-width: 35.98em) {\n button {\n min-width: 100%;\n }\n }\n @media screen and (-ms-high-contrast: active) {\n button {\n border: 2px solid currentcolor;\n }\n }\n button.small {\n min-height: 2rem;\n padding: 0.4375rem 0.75rem;\n font-size: 0.875rem;\n line-height: 1rem;\n }\n button.large {\n min-height: 4rem;\n padding: 1rem 1.5rem;\n font-size: 1.5rem;\n line-height: 2rem;\n }\n .form-group button {\n margin-top: -0.625rem;\n }\n button.small {\n height: 2rem;\n width: 2rem;\n padding: 0.4375rem;\n line-height: 1.125rem;\n }\n button svg {\n height: 1rem;\n width: 1rem;\n }\n button path,\n button line,\n button circle,\n button rect,\n button ellipse,\n button polyline,\n button text {\n fill: var(--gds-sys-color-base-800);\n stroke: var(--gds-sys-color-base-800);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n }\n button:hover, button.highlighted {\n background-color: rgba(0, 0, 0, 0.1);\n border-color: transparent;\n }\n button:active, button.highlighted:hover {\n background-color: rgba(0, 0, 0, 0.2);\n border-color: transparent;\n }\n }\n @layer _overrides {\n button {\n border-color: transparent;\n color: var(--gds-ref-pallet-base800);\n display: flex;\n gap: 0.5rem;\n line-height: 0.75;\n padding-inline: 0.4375rem;\n width: auto;\n }\n button.highlighted {\n background-color: var(--gds-ref-pallet-base300);\n }\n }\n}";
2
2
  export default styles;
package/components/icon/icon.deprecated.js CHANGED
@@ -37,7 +37,8 @@ const DEPRECATED_NAMES = [
37
37
  "charging-station",
38
38
  "square-grid-circle",
39
39
  "focus-square",
40
- "maintenance"
40
+ "maintenance",
41
+ "cain-link"
41
42
  ];
42
43
  const deprecatedIcons = Object.fromEntries([
43
44
  ...Object.entries(ICON_REPLACEMENTS).map(([name, replacement]) => [
package/components/icon/icons/cain-link.component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { GdsIcon } from '../icon';
2
2
  /**
3
3
  * @element gds-icon-cain-link
4
+ * @deprecated This icon is deprecated
4
5
  */
5
6
  export declare class IconCainLink extends GdsIcon {
6
7
  /** @private */
package/components/theme/chlorophyll-tokens.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n:host {\n display: contents;\n --gds-sys-shape-corner-none: 0;\n --gds-sys-shape-corner-small: 0.125rem;\n --gds-sys-shape-corner-medium: 0.25rem;\n --gds-sys-shape-corner-round: 50%;\n --gds-comp-checkbox-container-height: 1rem;\n --gds-comp-checkbox-container-width: 1rem;\n --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n --gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);\n --gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);\n --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n --gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);\n --gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);\n --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n --gds-ref-color-white: #ffffff;\n --gds-ref-color-black: #000000;\n --gds-ref-pallet-base000: hsl(0 0% 100%);\n --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n --gds-ref-pallet-base1000: hsl(0 0% 0%);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-blue-dark-1: #0092e1;\n --gds-sys-color-blue-dark-2: #007ac7;\n --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n --gds-sys-color-base: var(--gds-ref-pallet-base800);\n --gds-sys-color-font: var(--gds-ref-pallet-base800);\n --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #41b0ee;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n --heading-primary-color: rgb(0, 0, 0);\n --text-primary-color: rgb(51, 51, 51);\n --text-secondary-color: rgb(134, 134, 134);\n --text-disabled-color: var(--gds-ref-pallet-base600);\n --text-primary-disabled-color: var(--gds-ref-pallet-base600);\n --border-color: rgba(0, 0, 0, 0.17);\n --border-secondary-color: rgba(0, 0, 0, 0.1);\n --border-disabled-color: var(--gds-ref-pallet-base500);\n --border-primary-disabled-color: var(--gds-ref-pallet-base500);\n --border-color-invalid: rgb(159, 0, 10);\n --border-color-valid: rgb(55, 157, 0);\n --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n --form-control-primary-bg-disabled: var(--gds-ref-pallet-base200);\n --link-color-dark: rgb(51, 51, 51);\n --link-color-dark-visited: rgb(73, 73, 73);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(0, 122, 199);\n --intent-primary-color: #fff;\n --intent-primary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(222, 222, 222);\n --intent-secondary-color: black;\n --intent-secondary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(0, 122, 199);\n --intent-info-color: #fff;\n --intent-info-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n --intent-success-color: #fff;\n --intent-success-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 197, 0);\n --intent-warning-color: black;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(159, 0, 10);\n --intent-danger-color: #fff;\n --intent-danger-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(238, 238, 238);\n --intent-light-color: black;\n --intent-light-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(51, 51, 51);\n --intent-dark-color: #fff;\n --intent-dark-fadable-color: 255, 255, 255;\n --grey-1100: rgb(26, 26, 26);\n --grey-1000: rgb(51, 51, 51);\n --grey-900: rgb(73, 73, 73);\n --grey-800: rgb(134, 134, 134);\n --grey-700: rgb(173, 173, 173);\n --grey-600: rgb(206, 206, 206);\n --grey-500: rgb(222, 222, 222);\n --grey-400: rgb(233, 233, 233);\n --grey-300: rgb(238, 238, 238);\n --grey-200: rgb(248, 248, 248);\n --grey-100: rgb(255, 255, 255);\n color: var(--text-primary-color);\n --gds-sys-outline-color: #333333;\n --gds-comp-chips-fr-color: #333333;\n --gds-comp-chips-bg-color: #ffffff;\n --gds-comp-chips-br-color: #333333;\n --gds-comp-chips-fr-color-hover: #ffffff;\n --gds-comp-chips-bg-color-hover: #494949;\n --gds-comp-chips-br-color-hover: #494949;\n --gds-comp-chips-bg-color-active: #333333;\n --gds-comp-chips-bg-color-action: #333333;\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #333333;\n --sg-text-secondary: #333333;\n --sg-form-control-bg: #fff;\n --sg-form-control-bg-disabled: #eeeeee;\n --sg-border-color: var(--gds-ref-pallet-base600);\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 0%;\n --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #f8f8f8;\n --sg-grey-200: #e9e9e9;\n --sg-grey-300: #dedede;\n --sg-grey-400: #cecece;\n --sg-grey-500: #adadad;\n --sg-grey-600: #868686;\n --sg-grey-700: #494949;\n --sg-grey-800: #333333;\n --sg-grey-900: #1a1a1a;\n --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n --sg-bg-level-0: #eeeeee;\n --sg-bg-level-1: #fff;\n --sg-bg-level-2: #fff;\n --sg-bg-level-3: #fff;\n --sg-table-header-background: #1a1a1a;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: var(--gds-ref-pallet-base600);\n --sg-table-sort-icon-color: var(--gds-ref-pallet-base600);\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #dedede;\n --sg-skeleton-loader-background-color: #f8f8f8;\n --sg-modal-background: #fff;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #fff;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #fff;\n --sg-card-heading-color: #333333;\n --sg-card-color: #333333;\n --sg-card-border: solid 1px #fff;\n --sg-card-border-radius: 4px;\n --gds-sys-color-l1-background-primary: #ffffff;\n --gds-sys-color-l1-background-tertiary: #1b1b1b;\n --gds-sys-color-l1-background-secondary: #eeeeee;\n --gds-sys-color-l1-content-positive: #35723d;\n --gds-sys-color-l1-content-negative: #a63e2a;\n --gds-sys-color-l1-content-primary: #1b1b1b;\n --gds-sys-color-l1-content-secondary: #5e5e5e;\n --gds-sys-color-l1-content-tertiary: #ffffff;\n --gds-sys-color-l2-background-primary: #f3f3f3;\n --gds-sys-color-l2-background-secondary: #ffffff;\n --gds-sys-color-l2-background-tertiary: #242424;\n --gds-sys-color-l2-background-positive: #ecf6ed;\n --gds-sys-color-l2-background-negative: #fcecea;\n --gds-sys-color-l2-background-notice: #eaf0f7;\n --gds-sys-color-l2-background-warning: #fcecbc;\n --gds-sys-color-l2-background-information: #e2e2e2;\n --gds-sys-color-l2-background-copper-01: #f2efeb;\n --gds-sys-color-l2-background-copper-02: #332a18;\n --gds-sys-color-l2-background-purple-01: #f3eff7;\n --gds-sys-color-l2-background-purple-02: #372b40;\n --gds-sys-color-l2-background-green-01: #ecf6ed;\n --gds-sys-color-l2-background-green-02: #1d3f22;\n --gds-sys-color-l2-background-blue-01: #eaf0f7;\n --gds-sys-color-l2-background-blue-02: #152c41;\n --gds-sys-color-l2-content-primary: #1b1b1b;\n --gds-sys-color-l2-content-secondary: #5e5e5e;\n --gds-sys-color-l2-content-tertiary: #ffffff;\n --gds-sys-color-l2-content-positive: #35723d;\n --gds-sys-color-l2-content-negative: #a63e2a;\n --gds-sys-color-l2-content-warning: #65581e;\n --gds-sys-color-l2-content-notice: #005fac;\n --gds-sys-color-l2-content-information: #1b1b1b;\n --gds-sys-color-l2-content-copper-01: #1b1b1b;\n --gds-sys-color-l2-content-copper-02: #ffffff;\n --gds-sys-color-l2-content-purple-01: #1b1b1b;\n --gds-sys-color-l2-content-purple-02: #ffffff;\n --gds-sys-color-l2-content-green-01: #1b1b1b;\n --gds-sys-color-l2-content-green-02: #ffffff;\n --gds-sys-color-l2-content-blue-01: #1b1b1b;\n --gds-sys-color-l2-content-blue-02: #ffffff;\n --gds-sys-color-l2-border-primary: #d7d7d7;\n --gds-sys-color-l2-border-secondary: #6f6f6f;\n --gds-sys-color-l2-border-tertiary: #f9f9f9;\n --gds-sys-color-l2-border-quarternary: #1b1b1b;\n --gds-sys-color-l2-border-inversed: #ffffff;\n --gds-sys-color-l3-background-primary: #003824;\n --gds-sys-color-l3-background-secondary: #e2e2e2;\n --gds-sys-color-l3-background-tertiary: #d7d7d7;\n --gds-sys-color-l3-background-quarternary: #ffffff;\n --gds-sys-color-l3-background-positive: #35723d;\n --gds-sys-color-l3-background-positive-secondary: #d7edd9;\n --gds-sys-color-l3-background-positive-badge: #d7edd9;\n --gds-sys-color-l3-background-negative: #a63e2a;\n --gds-sys-color-l3-background-negative-secondary: #fcecea;\n --gds-sys-color-l3-background-negative-badge: #f8d6d3;\n --gds-sys-color-l3-background-notice: #005fac;\n --gds-sys-color-l3-background-notice-secondary: #d3dfef;\n --gds-sys-color-l3-background-notice-badge: #d3dfef;\n --gds-sys-color-l3-background-warning: #65581e;\n --gds-sys-color-l3-background-warning-secondary: #fadf7b;\n --gds-sys-color-l3-background-warning-badge: #fadf7b;\n --gds-sys-color-l3-background-information: #1b1b1b;\n --gds-sys-color-l3-background-information-secondary: #d7d7d7;\n --gds-sys-color-l3-background-information-badge: #d7d7d7;\n --gds-sys-color-l3-background-buy: #2e6290;\n --gds-sys-color-l3-background-copper-01: #e4ded5;\n --gds-sys-color-l3-background-copper-02: #42361f;\n --gds-sys-color-l3-background-purple-01: #e7deee;\n --gds-sys-color-l3-background-purple-02: #473752;\n --gds-sys-color-l3-background-green-01: #d7edd9;\n --gds-sys-color-l3-background-green-02: #25512b;\n --gds-sys-color-l3-background-blue-01: #d3dfef;\n --gds-sys-color-l3-background-blue-02: #1a3853;\n --gds-sys-color-l3-background-disabled: #f9f9f9;\n --gds-sys-color-l3-background-disabled-secondary: #f3f3f3;\n --gds-sys-color-l3-content-primary: #ffffff;\n --gds-sys-color-l3-content-secondary: #5e5e5e;\n --gds-sys-color-l3-content-tertiary: #1b1b1b;\n --gds-sys-color-l3-content-notice: #005fac;\n --gds-sys-color-l3-content-warning: #65581e;\n --gds-sys-color-l3-content-information: #1b1b1b;\n --gds-sys-color-l3-content-buy: #ffffff;\n --gds-sys-color-l3-content-copper-01: #1b1b1b;\n --gds-sys-color-l3-content-copper-02: #ffffff;\n --gds-sys-color-l3-content-purple-01: #1b1b1b;\n --gds-sys-color-l3-content-purple-02: #ffffff;\n --gds-sys-color-l3-content-green-01: #1b1b1b;\n --gds-sys-color-l3-content-green-02: #ffffff;\n --gds-sys-color-l3-content-blue-01: #1b1b1b;\n --gds-sys-color-l3-content-blue-02: #ffffff;\n --gds-sys-color-l3-content-disabled: #ababab;\n --gds-sys-color-l3-content-positive: #35723d;\n --gds-sys-color-l3-content-negative: #a63e2a;\n --gds-sys-color-l3-border-primary: #1b1b1b;\n --gds-sys-color-l3-border-secondary: #6f6f6f;\n --gds-sys-color-l3-border-tertiary: #d7d7d7;\n --gds-sys-color-l3-border-negative: #a63e2a;\n --gds-sys-color-l3-states-dark-hover: rgba(255, 255, 255, 0.15);\n --gds-sys-color-l3-states-dark-pressed: rgba(255, 255, 255, 0.25);\n --gds-sys-color-l3-states-light-hover: rgba(27, 27, 27, 0.1);\n --gds-sys-color-l3-states-light-pressed: rgba(27, 27, 27, 0.2);\n --gds-sys-color-l3-states-positive-hover: rgba(53, 114, 61, 0.1);\n --gds-sys-color-l3-states-positive-pressed: rgba(53, 114, 61, 0.2);\n --gds-sys-color-l3-states-negative-hover: rgba(166, 62, 42, 0.1);\n --gds-sys-color-l3-states-negative-pressed: rgba(166, 62, 42, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-ref-pallet-base300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n --gds-sys-color-l1-background-primary: #0e0e0e;\n --gds-sys-color-l1-background-tertiary: #d7d7d7;\n --gds-sys-color-l1-background-secondary: #131313;\n --gds-sys-color-l1-content-positive: #54b561;\n --gds-sys-color-l1-content-negative: #a63e2a;\n --gds-sys-color-l1-content-primary: #d7d7d7;\n --gds-sys-color-l1-content-secondary: #ababab;\n --gds-sys-color-l1-content-tertiary: #1b1b1b;\n --gds-sys-color-l2-background-primary: #242424;\n --gds-sys-color-l2-background-secondary: #242424;\n --gds-sys-color-l2-background-tertiary: #d7d7d7;\n --gds-sys-color-l2-background-positive: #1d3f22;\n --gds-sys-color-l2-background-negative: #4a1c13;\n --gds-sys-color-l2-background-notice: #152c41;\n --gds-sys-color-l2-background-warning: #4c3212;\n --gds-sys-color-l2-background-information: #353535;\n --gds-sys-color-l2-background-copper-01: #f2efeb;\n --gds-sys-color-l2-background-copper-02: #332a18;\n --gds-sys-color-l2-background-purple-01: #f3eff7;\n --gds-sys-color-l2-background-purple-02: #372b40;\n --gds-sys-color-l2-background-green-01: #ecf6ed;\n --gds-sys-color-l2-background-green-02: #1d3f22;\n --gds-sys-color-l2-background-blue-01: #eaf0f7;\n --gds-sys-color-l2-background-blue-02: #152c41;\n --gds-sys-color-l2-content-primary: #d7d7d7;\n --gds-sys-color-l2-content-secondary: #ababab;\n --gds-sys-color-l2-content-tertiary: #1b1b1b;\n --gds-sys-color-l2-content-positive: #54b561;\n --gds-sys-color-l2-content-negative: #ee8375;\n --gds-sys-color-l2-content-warning: #f3b274;\n --gds-sys-color-l2-content-notice: #78a3d5;\n --gds-sys-color-l2-content-information: #d7d7d7;\n --gds-sys-color-l2-content-copper-01: #1b1b1b;\n --gds-sys-color-l2-content-copper-02: #ffffff;\n --gds-sys-color-l2-content-purple-01: #1b1b1b;\n --gds-sys-color-l2-content-purple-02: #ffffff;\n --gds-sys-color-l2-content-green-01: #1b1b1b;\n --gds-sys-color-l2-content-green-02: #ffffff;\n --gds-sys-color-l2-content-blue-01: #1b1b1b;\n --gds-sys-color-l2-content-blue-02: #ffffff;\n --gds-sys-color-l2-border-primary: #353535;\n --gds-sys-color-l2-border-secondary: #5e5e5e;\n --gds-sys-color-l2-border-tertiary: #2c2c2c;\n --gds-sys-color-l2-border-quarternary: #d7d7d7;\n --gds-sys-color-l2-border-inversed: #1b1b1b;\n --gds-sys-color-l3-background-primary: #d7d7d7;\n --gds-sys-color-l3-background-secondary: #353535;\n --gds-sys-color-l3-background-tertiary: #424242;\n --gds-sys-color-l3-background-quarternary: #0e0e0e;\n --gds-sys-color-l3-background-positive: #54b561;\n --gds-sys-color-l3-background-positive-secondary: #25512b;\n --gds-sys-color-l3-background-positive-badge: #306938;\n --gds-sys-color-l3-background-negative: #c04831;\n --gds-sys-color-l3-background-negative-secondary: #602418;\n --gds-sys-color-l3-background-negative-badge: #4a1c13;\n --gds-sys-color-l3-background-notice: #78a3d5;\n --gds-sys-color-l3-background-notice-secondary: #1a3853;\n --gds-sys-color-l3-background-notice-badge: #214769;\n --gds-sys-color-l3-background-warning: #f3b274;\n --gds-sys-color-l3-background-warning-secondary: #624017;\n --gds-sys-color-l3-background-warning-badge: #744c1b;\n --gds-sys-color-l3-background-information: #d7d7d7;\n --gds-sys-color-l3-background-information-secondary: #424242;\n --gds-sys-color-l3-background-information-badge: #616161;\n --gds-sys-color-l3-background-buy: #3571a6;\n --gds-sys-color-l3-background-copper-01: #e4ded5;\n --gds-sys-color-l3-background-copper-02: #42361f;\n --gds-sys-color-l3-background-purple-01: #e7deee;\n --gds-sys-color-l3-background-purple-02: #473752;\n --gds-sys-color-l3-background-green-01: #d7edd9;\n --gds-sys-color-l3-background-green-02: #25512b;\n --gds-sys-color-l3-background-blue-01: #d3dfef;\n --gds-sys-color-l3-background-blue-02: #1a3853;\n --gds-sys-color-l3-background-disabled: #181818;\n --gds-sys-color-l3-background-disabled-secondary: #1b1b1b;\n --gds-sys-color-l3-content-primary: #1b1b1b;\n --gds-sys-color-l3-content-secondary: #ababab;\n --gds-sys-color-l3-content-tertiary: #d7d7d7;\n --gds-sys-color-l3-content-notice: #78a3d5;\n --gds-sys-color-l3-content-warning: #f3b274;\n --gds-sys-color-l3-content-information: #d7d7d7;\n --gds-sys-color-l3-content-buy: #ffffff;\n --gds-sys-color-l3-content-copper-01: #1b1b1b;\n --gds-sys-color-l3-content-copper-02: #ffffff;\n --gds-sys-color-l3-content-purple-01: #1b1b1b;\n --gds-sys-color-l3-content-purple-02: #ffffff;\n --gds-sys-color-l3-content-green-01: #1b1b1b;\n --gds-sys-color-l3-content-green-02: #ffffff;\n --gds-sys-color-l3-content-blue-01: #1b1b1b;\n --gds-sys-color-l3-content-blue-02: #ffffff;\n --gds-sys-color-l3-content-disabled: #5e5e5e;\n --gds-sys-color-l3-content-positive: #54b561;\n --gds-sys-color-l3-content-negative: #ee8375;\n --gds-sys-color-l3-border-primary: #d7d7d7;\n --gds-sys-color-l3-border-secondary: #ababab;\n --gds-sys-color-l3-border-tertiary: #1b1b1b;\n --gds-sys-color-l3-border-negative: #ee8375;\n --gds-sys-color-l3-states-dark-hover: rgba(255, 255, 255, 0.15);\n --gds-sys-color-l3-states-dark-pressed: rgba(255, 255, 255, 0.25);\n --gds-sys-color-l3-states-light-hover: rgba(215, 215, 215, 0.1);\n --gds-sys-color-l3-states-light-pressed: rgba(215, 215, 215, 0.2);\n --gds-sys-color-l3-states-positive-hover: rgba(84, 181, 97, 0.1);\n --gds-sys-color-l3-states-positive-pressed: rgba(84, 181, 97, 0.2);\n --gds-sys-color-l3-states-negative-hover: rgba(238, 131, 117, 0.1);\n --gds-sys-color-l3-states-negative-pressed: rgba(238, 131, 117, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n :host,\n :host([color-scheme=auto]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-ref-pallet-base300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n }\n}";
1
+ const styles = "/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n:host {\n display: contents;\n --gds-sys-shape-corner-none: 0;\n --gds-sys-shape-corner-small: 0.125rem;\n --gds-sys-shape-corner-medium: 0.25rem;\n --gds-sys-shape-corner-round: 50%;\n --gds-comp-checkbox-container-height: 1rem;\n --gds-comp-checkbox-container-width: 1rem;\n --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);\n --gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);\n --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);\n --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);\n --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n --gds-ref-color-white: #ffffff;\n --gds-ref-color-black: #000000;\n --gds-ref-pallet-base000: hsl(0 0% 100%);\n --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n --gds-ref-pallet-base1000: hsl(0 0% 0%);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-blue-dark-1: #0092e1;\n --gds-sys-color-blue-dark-2: #007ac7;\n --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n --gds-sys-color-base: var(--gds-ref-pallet-base800);\n --gds-sys-color-font: var(--gds-ref-pallet-base800);\n --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #41b0ee;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n --heading-primary-color: rgb(0, 0, 0);\n --text-primary-color: rgb(51, 51, 51);\n --text-secondary-color: rgb(134, 134, 134);\n --text-disabled-color: var(--gds-sys-color-base-600);\n --text-primary-disabled-color: var(--gds-sys-color-base-600);\n --border-color: rgba(0, 0, 0, 0.17);\n --border-secondary-color: rgba(0, 0, 0, 0.1);\n --border-disabled-color: var(--gds-sys-color-base-500);\n --border-primary-disabled-color: var(--gds-sys-color-base-500);\n --border-color-invalid: rgb(159, 0, 10);\n --border-color-valid: rgb(55, 157, 0);\n --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n --form-control-primary-bg-disabled: var(--gds-sys-color-base-200);\n --link-color-dark: rgb(51, 51, 51);\n --link-color-dark-visited: rgb(73, 73, 73);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(0, 122, 199);\n --intent-primary-color: #fff;\n --intent-primary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(222, 222, 222);\n --intent-secondary-color: black;\n --intent-secondary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(0, 122, 199);\n --intent-info-color: #fff;\n --intent-info-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n --intent-success-color: #fff;\n --intent-success-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 197, 0);\n --intent-warning-color: black;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(159, 0, 10);\n --intent-danger-color: #fff;\n --intent-danger-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(238, 238, 238);\n --intent-light-color: black;\n --intent-light-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(51, 51, 51);\n --intent-dark-color: #fff;\n --intent-dark-fadable-color: 255, 255, 255;\n --grey-1100: rgb(26, 26, 26);\n --grey-1000: rgb(51, 51, 51);\n --grey-900: rgb(73, 73, 73);\n --grey-800: rgb(134, 134, 134);\n --grey-700: rgb(173, 173, 173);\n --grey-600: rgb(206, 206, 206);\n --grey-500: rgb(222, 222, 222);\n --grey-400: rgb(233, 233, 233);\n --grey-300: rgb(238, 238, 238);\n --grey-200: rgb(248, 248, 248);\n --grey-100: rgb(255, 255, 255);\n color: var(--text-primary-color);\n --gds-sys-outline-color: #333333;\n --gds-comp-chips-fr-color: #333333;\n --gds-comp-chips-bg-color: #ffffff;\n --gds-comp-chips-br-color: #333333;\n --gds-comp-chips-fr-color-hover: #ffffff;\n --gds-comp-chips-bg-color-hover: #494949;\n --gds-comp-chips-br-color-hover: #494949;\n --gds-comp-chips-bg-color-active: #333333;\n --gds-comp-chips-bg-color-action: #333333;\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #333333;\n --sg-text-secondary: #333333;\n --sg-form-control-bg: #fff;\n --sg-form-control-bg-disabled: #eeeeee;\n --sg-border-color: var(--gds-sys-color-base-600);\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 0%;\n --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #f8f8f8;\n --sg-grey-200: #e9e9e9;\n --sg-grey-300: #dedede;\n --sg-grey-400: #cecece;\n --sg-grey-500: #adadad;\n --sg-grey-600: #868686;\n --sg-grey-700: #494949;\n --sg-grey-800: #333333;\n --sg-grey-900: #1a1a1a;\n --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n --sg-bg-level-0: #eeeeee;\n --sg-bg-level-1: #fff;\n --sg-bg-level-2: #fff;\n --sg-bg-level-3: #fff;\n --sg-table-header-background: #1a1a1a;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: var(--gds-sys-color-base-600);\n --sg-table-sort-icon-color: var(--gds-sys-color-base-600);\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #dedede;\n --sg-skeleton-loader-background-color: #f8f8f8;\n --sg-modal-background: #fff;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #fff;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #fff;\n --sg-card-heading-color: #333333;\n --sg-card-color: #333333;\n --sg-card-border: solid 1px #fff;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #0092e1;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-sys-color-base-300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #58b8ee;\n --gds-sys-color-dark-blue-1: #00adff;\n --gds-sys-color-dark-blue-2: #2c9cd9;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #75b44a;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffe182;\n --gds-sys-color-dark-yellow-1: #f0be47;\n --gds-sys-color-dark-yellow-2: #ebab39;\n --gds-sys-color-text-primary: #dedede;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #333333;\n --gds-sys-color-text-link: #2c9cd9;\n --gds-sys-color-text-error: #ff594f;\n --gds-sys-color-text-disabled: #464646;\n --gds-sys-color-red: #f7706d;\n --gds-sys-color-dark-red-1: #c82a29;\n --gds-sys-color-dark-red-2: #9e2120;\n --gds-sys-color-purple: #ad91dc;\n --gds-sys-color-dark-purple-1: #7e52cc;\n --gds-sys-color-dark-purple-2: #4a328f;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #222222;\n --gds-sys-color-background-secondary: #1a1a1a;\n --gds-sys-color-base-100: #121212;\n --gds-sys-color-base-200: #222222;\n --gds-sys-color-base-300: #272727;\n --gds-sys-color-base-400: #2c2c2c;\n --gds-sys-color-base-500: #333333;\n --gds-sys-color-base-600: #494949;\n --gds-sys-color-base-700: #757575;\n --gds-sys-color-base-800: #ababab;\n --gds-sys-color-base-900: #dedede;\n --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n :host,\n :host([color-scheme=auto]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-sys-color-base-300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n }\n}";
2
2
  export default styles;
package/generated/react/index.d.ts CHANGED
@@ -11,8 +11,8 @@ export * from './container/index.js';
11
11
  export * from './context-menu/index.js';
12
12
  export * from './datepicker/index.js';
13
13
  export * from './details/index.js';
14
- export * from './div/index.js';
15
14
  export * from './dialog/index.js';
15
+ export * from './div/index.js';
16
16
  export * from './divider/index.js';
17
17
  export * from './dropdown/index.js';
18
18
  export * from './fab/index.js';
@@ -38,9 +38,9 @@ export * from './signal/index.js';
38
38
  export * from './spacer/index.js';
39
39
  export * from './spinner/index.js';
40
40
  export * from './text/index.js';
41
+ export * from './theme/index.js';
41
42
  export * from './textarea/index.js';
42
43
  export * from './video/index.js';
43
- export * from './theme/index.js';
44
44
  export * from './form-control-footer/index.js';
45
45
  export * from './form-control-header/index.js';
46
46
  export * from './option/index.js';
@@ -54,8 +54,8 @@ export * from './formatted-number/index.js';
54
54
  export * from './radio-group/index.js';
55
55
  export * from './segment/index.js';
56
56
  export * from './sensitive-account/index.js';
57
- export * from './sensitive-number/index.js';
58
57
  export * from './sensitive-date/index.js';
58
+ export * from './sensitive-number/index.js';
59
59
  export * from './icons/icon-ai/index.js';
60
60
  export * from './icons/icon-airplane-up/index.js';
61
61
  export * from './icons/icon-archive/index.js';
package/generated/react/index.js CHANGED
@@ -11,8 +11,8 @@ export * from "./container/index.js";
11
11
  export * from "./context-menu/index.js";
12
12
  export * from "./datepicker/index.js";
13
13
  export * from "./details/index.js";
14
- export * from "./div/index.js";
15
14
  export * from "./dialog/index.js";
15
+ export * from "./div/index.js";
16
16
  export * from "./divider/index.js";
17
17
  export * from "./dropdown/index.js";
18
18
  export * from "./fab/index.js";
@@ -38,9 +38,9 @@ export * from "./signal/index.js";
38
38
  export * from "./spacer/index.js";
39
39
  export * from "./spinner/index.js";
40
40
  export * from "./text/index.js";
41
+ export * from "./theme/index.js";
41
42
  export * from "./textarea/index.js";
42
43
  export * from "./video/index.js";
43
- export * from "./theme/index.js";
44
44
  export * from "./form-control-footer/index.js";
45
45
  export * from "./form-control-header/index.js";
46
46
  export * from "./option/index.js";
@@ -54,8 +54,8 @@ export * from "./formatted-number/index.js";
54
54
  export * from "./radio-group/index.js";
55
55
  export * from "./segment/index.js";
56
56
  export * from "./sensitive-account/index.js";
57
- export * from "./sensitive-number/index.js";
58
57
  export * from "./sensitive-date/index.js";
58
+ export * from "./sensitive-number/index.js";
59
59
  export * from "./icons/icon-ai/index.js";
60
60
  export * from "./icons/icon-airplane-up/index.js";
61
61
  export * from "./icons/icon-archive/index.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sebgroup/green-core",
3
3
  "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
4
- "version": "1.90.1",
4
+ "version": "1.90.2",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
7
7
  "type": "module",
package/utils/helpers/custom-element-scoping.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "../../chunks/chunk.QTSIPXV3.js";
2
2
  import { html as litHtml } from "lit";
3
- const VER_SUFFIX = "-d527d2";
3
+ const VER_SUFFIX = "-5dc4d6";
4
4
  class ScopedElementRegistry {
5
5
  static get instance() {
6
6
  if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])