smartsell-ui-kit 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +540 -491
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -14
- package/dist/index.d.ts +5 -14
- package/dist/index.js +540 -492
- package/dist/index.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.d.cts +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// src/styles/ui-kit.css
|
|
24
|
-
styleInject('.ui-kit-sr-only {\n position: absolute;\n height: 1px;\n width: 1px;\n overflow: hidden;\n white-space: nowrap;\n border-width: 0px;\n padding: 0px;\n clip: rect(0, 0, 0, 0);\n margin: -1px;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.pointer-events-auto {\n pointer-events: auto;\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.z-30 {\n z-index: 30;\n}\n.z-\\[70\\] {\n z-index: 70;\n}\n.m-0 {\n margin: 0px;\n}\n.mb-\\[18px\\] {\n margin-bottom: 18px;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.mr-1 {\n margin-right: 0.25rem;\n}\n.mt-0 {\n margin-top: 0px;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-px {\n margin-top: 1px;\n}\n.box-border {\n box-sizing: border-box;\n}\n.block {\n display: block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.h-14 {\n height: 3.5rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-\\[30px\\] {\n height: 30px;\n}\n.h-\\[34px\\] {\n height: 34px;\n}\n.h-\\[38px\\] {\n height: 38px;\n}\n.h-\\[42px\\] {\n height: 42px;\n}\n.h-\\[52px\\] {\n height: 52px;\n}\n.h-full {\n height: 100%;\n}\n.max-h-\\[280px\\] {\n max-height: 280px;\n}\n.min-h-0 {\n min-height: 0px;\n}\n.min-h-20 {\n min-height: 5rem;\n}\n.w-14 {\n width: 3.5rem;\n}\n.w-2 {\n width: 0.5rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-\\[25px\\] {\n width: 25px;\n}\n.w-\\[30px\\] {\n width: 30px;\n}\n.w-\\[52px\\] {\n width: 52px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-full {\n min-width: 100%;\n}\n.max-w-fit {\n max-width: -moz-fit-content;\n max-width: fit-content;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-none {\n max-width: none;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.border-separate {\n border-collapse: separate;\n}\n.border-spacing-0 {\n --tw-border-spacing-x: 0px;\n --tw-border-spacing-y: 0px;\n border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-text {\n cursor: text;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.resize-y {\n resize: vertical;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-3\\.5 {\n gap: 0.875rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.self-stretch {\n align-self: stretch;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-hidden {\n overflow-y: hidden;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[0\\.4rem\\] {\n border-radius: 0.4rem;\n}\n.rounded-\\[11px\\] {\n border-radius: 11px;\n}\n.rounded-\\[14px\\] {\n border-radius: 14px;\n}\n.rounded-\\[20px\\] {\n border-radius: 20px;\n}\n.rounded-\\[24px\\] {\n border-radius: 24px;\n}\n.rounded-\\[28px\\] {\n border-radius: 28px;\n}\n.rounded-\\[30px\\] {\n border-radius: 30px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-none {\n border-radius: 0px;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-\\[var\\(--theme-negative\\)\\] {\n border-color: var(--theme-negative);\n}\n.border-\\[var\\(--theme-primary\\)\\] {\n border-color: var(--theme-primary);\n}\n.border-\\[var\\(--theme-textLight\\)\\] {\n border-color: var(--theme-textLight);\n}\n.border-\\[var\\(--ui-kit-accent\\)\\] {\n border-color: var(--ui-kit-accent);\n}\n.border-\\[var\\(--ui-kit-modal-primary\\)\\] {\n border-color: var(--ui-kit-modal-primary);\n}\n.border-transparent {\n border-color: transparent;\n}\n.bg-\\[color-mix\\(in_srgb\\,var\\(--ui-kit-accent\\)_24\\%\\,transparent\\)\\] {\n background-color: color-mix(in srgb, var(--ui-kit-accent) 24%, transparent);\n}\n.bg-\\[var\\(--theme-primary\\)\\] {\n background-color: var(--theme-primary);\n}\n.bg-\\[var\\(--theme-surface\\)\\] {\n background-color: var(--theme-surface);\n}\n.bg-\\[var\\(--theme-text\\)\\] {\n background-color: var(--theme-text);\n}\n.bg-\\[var\\(--ui-kit-accent\\)\\] {\n background-color: var(--ui-kit-accent);\n}\n.bg-\\[var\\(--ui-kit-modal-busy-overlay\\)\\] {\n background-color: var(--ui-kit-modal-busy-overlay);\n}\n.bg-\\[var\\(--ui-kit-modal-primary\\)\\] {\n background-color: var(--ui-kit-modal-primary);\n}\n.bg-\\[var\\(--ui-kit-select-option-hover-bg\\)\\] {\n background-color: var(--ui-kit-select-option-hover-bg);\n}\n.bg-\\[var\\(--ui-kit-select-option-selected-bg\\)\\] {\n background-color: var(--ui-kit-select-option-selected-bg);\n}\n.bg-\\[var\\(--ui-kit-surface-raised\\)\\] {\n background-color: var(--ui-kit-surface-raised);\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-\\[linear-gradient\\(180deg\\,var\\(--ui-kit-modal-surface-raised\\)\\,var\\(--ui-kit-modal-surface\\)\\)\\] {\n background-image:\n linear-gradient(\n 180deg,\n var(--ui-kit-modal-surface-raised),\n var(--ui-kit-modal-surface));\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-\\[18px\\] {\n padding: 18px;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-\\[1\\.15rem\\] {\n padding-left: 1.15rem;\n padding-right: 1.15rem;\n}\n.px-\\[10px\\] {\n padding-left: 10px;\n padding-right: 10px;\n}\n.px-\\[11px\\] {\n padding-left: 11px;\n padding-right: 11px;\n}\n.px-\\[13px\\] {\n padding-left: 13px;\n padding-right: 13px;\n}\n.px-\\[14px\\] {\n padding-left: 14px;\n padding-right: 14px;\n}\n.px-\\[18px\\] {\n padding-left: 18px;\n padding-right: 18px;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-\\[0\\.9rem\\] {\n padding-top: 0.9rem;\n padding-bottom: 0.9rem;\n}\n.py-\\[10px\\] {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.py-\\[11px\\] {\n padding-top: 11px;\n padding-bottom: 11px;\n}\n.py-\\[14px\\] {\n padding-top: 14px;\n padding-bottom: 14px;\n}\n.py-\\[18px\\] {\n padding-top: 18px;\n padding-bottom: 18px;\n}\n.py-\\[7px\\] {\n padding-top: 7px;\n padding-bottom: 7px;\n}\n.py-\\[9px\\] {\n padding-top: 9px;\n padding-bottom: 9px;\n}\n.pb-0\\.5 {\n padding-bottom: 0.125rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-\\[10px\\] {\n padding-bottom: 10px;\n}\n.pl-6 {\n padding-left: 1.5rem;\n}\n.pr-6 {\n padding-right: 1.5rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-1\\.5 {\n padding-top: 0.375rem;\n}\n.pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\n}\n.pt-\\[18px\\] {\n padding-top: 18px;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-\\[1\\.05rem\\] {\n font-size: 1.05rem;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[11px\\] {\n font-size: 11px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-\\[15px\\] {\n font-size: 15px;\n}\n.text-\\[18px\\] {\n font-size: 18px;\n}\n.text-\\[20px\\] {\n font-size: 20px;\n}\n.text-\\[24px\\] {\n font-size: 24px;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-extrabold {\n font-weight: 800;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.leading-4 {\n line-height: 1rem;\n}\n.leading-\\[1\\.15\\] {\n line-height: 1.15;\n}\n.leading-\\[1\\.1\\] {\n line-height: 1.1;\n}\n.leading-\\[1\\.25\\] {\n line-height: 1.25;\n}\n.leading-\\[1\\.2\\] {\n line-height: 1.2;\n}\n.leading-\\[1\\.45\\] {\n line-height: 1.45;\n}\n.leading-\\[1\\.4\\] {\n line-height: 1.4;\n}\n.leading-\\[18px\\] {\n line-height: 18px;\n}\n.leading-none {\n line-height: 1;\n}\n.tracking-\\[0\\.01em\\] {\n letter-spacing: 0.01em;\n}\n.tracking-\\[0\\.06em\\] {\n letter-spacing: 0.06em;\n}\n.tracking-\\[0\\.08em\\] {\n letter-spacing: 0.08em;\n}\n.tracking-\\[0\\.16em\\] {\n letter-spacing: 0.16em;\n}\n.text-\\[var\\(--theme-negative\\)\\] {\n color: var(--theme-negative);\n}\n.text-\\[var\\(--theme-onPrimary\\)\\] {\n color: var(--theme-onPrimary);\n}\n.text-\\[var\\(--theme-primary\\)\\] {\n color: var(--theme-primary);\n}\n.text-\\[var\\(--theme-text\\)\\] {\n color: var(--theme-text);\n}\n.text-\\[var\\(--theme-textLight\\)\\] {\n color: var(--theme-textLight);\n}\n.text-\\[var\\(--ui-kit-accent\\)\\] {\n color: var(--ui-kit-accent);\n}\n.text-\\[var\\(--ui-kit-modal-on-primary\\)\\] {\n color: var(--ui-kit-modal-on-primary);\n}\n.text-\\[var\\(--ui-kit-modal-primary\\)\\] {\n color: var(--ui-kit-modal-primary);\n}\n.text-\\[var\\(--ui-kit-modal-text\\)\\] {\n color: var(--ui-kit-modal-text);\n}\n.text-\\[var\\(--ui-kit-muted-text\\)\\] {\n color: var(--ui-kit-muted-text);\n}\n.text-\\[var\\(--ui-kit-placeholder\\)\\] {\n color: var(--ui-kit-placeholder);\n}\n.text-\\[var\\(--ui-kit-select-indicator-disabled\\)\\] {\n color: var(--ui-kit-select-indicator-disabled);\n}\n.text-\\[var\\(--ui-kit-select-muted\\)\\] {\n color: var(--ui-kit-select-muted);\n}\n.text-\\[var\\(--ui-kit-select-option-disabled\\)\\] {\n color: var(--ui-kit-select-option-disabled);\n}\n.text-\\[var\\(--ui-kit-select-placeholder\\)\\] {\n color: var(--ui-kit-select-placeholder);\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-45 {\n opacity: 0.45;\n}\n.opacity-80 {\n opacity: 0.8;\n}\n.opacity-\\[0\\.38\\] {\n opacity: 0.38;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[0_0_0_3px_var\\(--ui-kit-focus-ring\\)\\] {\n --tw-shadow: 0 0 0 3px var(--ui-kit-focus-ring);\n --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\] {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[var\\(--ui-kit-modal-button-shadow-contained\\)\\] {\n --tw-shadow-color: var(--ui-kit-modal-button-shadow-contained);\n --tw-shadow: var(--tw-shadow-colored);\n}\n.shadow-\\[var\\(--ui-kit-modal-button-shadow-outlined\\)\\] {\n --tw-shadow-color: var(--ui-kit-modal-button-shadow-outlined);\n --tw-shadow: var(--tw-shadow-colored);\n}\n.shadow-\\[var\\(--ui-kit-modal-control-shadow\\)\\] {\n --tw-shadow-color: var(--ui-kit-modal-control-shadow);\n --tw-shadow: var(--tw-shadow-colored);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.saturate-0 {\n --tw-saturate: saturate(0);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-100 {\n --tw-saturate: saturate(1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-\\[0\\.8\\] {\n --tw-saturate: saturate(0.8);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-blur-\\[8px\\] {\n --tw-backdrop-blur: blur(8px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[background-color\\,color\\] {\n transition-property: background-color, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[border-color\\,box-shadow\\,background-color\\] {\n transition-property:\n border-color,\n box-shadow,\n background-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[opacity\\,filter\\] {\n transition-property: opacity, filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[transform\\,color\\] {\n transition-property: transform, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.\\[background\\:var\\(--ui-kit-card-bg\\)\\] {\n background: var(--ui-kit-card-bg);\n}\n.\\[border-color\\:var\\(--ui-kit-card-border\\)\\] {\n border-color: var(--ui-kit-card-border);\n}\n.\\[grid-template-columns\\:repeat\\(auto-fit\\,minmax\\(120px\\,1fr\\)\\)\\] {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n}\n:root {\n --ui-kit-font-family:\n "Lato",\n system-ui,\n sans-serif;\n}\n.ui-kit-root {\n font-family: var(--ui-kit-font-family);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.ui-kit-root :is(button, input, textarea, select, option) {\n font-family: var(--ui-kit-font-family);\n}\n.placeholder\\:text-\\[var\\(--ui-kit-placeholder\\)\\]::-moz-placeholder {\n color: var(--ui-kit-placeholder);\n}\n.placeholder\\:text-\\[var\\(--ui-kit-placeholder\\)\\]::placeholder {\n color: var(--ui-kit-placeholder);\n}\n.hover\\:-translate-y-\\[0\\.5px\\]:hover {\n --tw-translate-y: -0.5px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:border-\\[var\\(--theme-primaryDark\\)\\]:hover {\n border-color: var(--theme-primaryDark);\n}\n.hover\\:border-\\[var\\(--ui-kit-button-ghost-border\\)\\]:hover {\n border-color: var(--ui-kit-button-ghost-border);\n}\n.hover\\:bg-\\[var\\(--theme-primary\\)\\]:hover {\n background-color: var(--theme-primary);\n}\n.hover\\:bg-\\[var\\(--theme-primaryDark\\)\\]:hover {\n background-color: var(--theme-primaryDark);\n}\n.hover\\:bg-\\[var\\(--ui-kit-button-outline-hover\\)\\]:hover {\n background-color: var(--ui-kit-button-outline-hover);\n}\n.hover\\:text-\\[var\\(--theme-onPrimary\\)\\]:hover {\n color: var(--theme-onPrimary);\n}\n.hover\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:hover {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.active\\:translate-y-px:active {\n --tw-translate-y: 1px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:scale-\\[0\\.985\\]:active {\n --tw-scale-x: 0.985;\n --tw-scale-y: 0.985;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:border-\\[var\\(--ui-kit-button-ghost-border\\)\\]:active {\n border-color: var(--ui-kit-button-ghost-border);\n}\n.active\\:bg-\\[var\\(--theme-primary\\)\\]:active {\n background-color: var(--theme-primary);\n}\n.active\\:bg-\\[var\\(--ui-kit-button-outline-active\\)\\]:active {\n background-color: var(--ui-kit-button-outline-active);\n}\n.active\\:text-\\[var\\(--theme-onPrimary\\)\\]:active {\n color: var(--theme-onPrimary);\n}\n.active\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:active {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.disabled\\:translate-y-0:disabled {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:scale-100:disabled {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n');
|
|
24
|
+
styleInject('.ui-kit-sr-only {\n position: absolute;\n height: 1px;\n width: 1px;\n overflow: hidden;\n white-space: nowrap;\n border-width: 0px;\n padding: 0px;\n clip: rect(0, 0, 0, 0);\n margin: -1px;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.pointer-events-auto {\n pointer-events: auto;\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.z-30 {\n z-index: 30;\n}\n.z-\\[70\\] {\n z-index: 70;\n}\n.m-0 {\n margin: 0px;\n}\n.mb-\\[18px\\] {\n margin-bottom: 18px;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.mr-1 {\n margin-right: 0.25rem;\n}\n.mt-0 {\n margin-top: 0px;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-px {\n margin-top: 1px;\n}\n.box-border {\n box-sizing: border-box;\n}\n.block {\n display: block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.h-14 {\n height: 3.5rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-\\[30px\\] {\n height: 30px;\n}\n.h-\\[34px\\] {\n height: 34px;\n}\n.h-\\[38px\\] {\n height: 38px;\n}\n.h-\\[42px\\] {\n height: 42px;\n}\n.h-\\[52px\\] {\n height: 52px;\n}\n.h-full {\n height: 100%;\n}\n.max-h-\\[280px\\] {\n max-height: 280px;\n}\n.min-h-0 {\n min-height: 0px;\n}\n.min-h-20 {\n min-height: 5rem;\n}\n.w-14 {\n width: 3.5rem;\n}\n.w-2 {\n width: 0.5rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-\\[25px\\] {\n width: 25px;\n}\n.w-\\[30px\\] {\n width: 30px;\n}\n.w-\\[52px\\] {\n width: 52px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-full {\n min-width: 100%;\n}\n.max-w-fit {\n max-width: -moz-fit-content;\n max-width: fit-content;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-none {\n max-width: none;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.border-separate {\n border-collapse: separate;\n}\n.border-spacing-0 {\n --tw-border-spacing-x: 0px;\n --tw-border-spacing-y: 0px;\n border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-text {\n cursor: text;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.resize-y {\n resize: vertical;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-3\\.5 {\n gap: 0.875rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.self-stretch {\n align-self: stretch;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-hidden {\n overflow-y: hidden;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[0\\.4rem\\] {\n border-radius: 0.4rem;\n}\n.rounded-\\[11px\\] {\n border-radius: 11px;\n}\n.rounded-\\[14px\\] {\n border-radius: 14px;\n}\n.rounded-\\[20px\\] {\n border-radius: 20px;\n}\n.rounded-\\[24px\\] {\n border-radius: 24px;\n}\n.rounded-\\[28px\\] {\n border-radius: 28px;\n}\n.rounded-\\[30px\\] {\n border-radius: 30px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-none {\n border-radius: 0px;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-\\[var\\(--theme-negative\\)\\] {\n border-color: var(--theme-negative);\n}\n.border-\\[var\\(--theme-primary\\)\\] {\n border-color: var(--theme-primary);\n}\n.border-\\[var\\(--theme-secondary\\)\\] {\n border-color: var(--theme-secondary);\n}\n.border-\\[var\\(--theme-textLight\\)\\] {\n border-color: var(--theme-textLight);\n}\n.border-\\[var\\(--ui-kit-accent\\)\\] {\n border-color: var(--ui-kit-accent);\n}\n.border-transparent {\n border-color: transparent;\n}\n.bg-\\[color-mix\\(in_srgb\\,var\\(--ui-kit-accent\\)_24\\%\\,transparent\\)\\] {\n background-color: color-mix(in srgb, var(--ui-kit-accent) 24%, transparent);\n}\n.bg-\\[var\\(--theme-primary\\)\\] {\n background-color: var(--theme-primary);\n}\n.bg-\\[var\\(--theme-surface\\)\\] {\n background-color: var(--theme-surface);\n}\n.bg-\\[var\\(--theme-text\\)\\] {\n background-color: var(--theme-text);\n}\n.bg-\\[var\\(--ui-kit-accent\\)\\] {\n background-color: var(--ui-kit-accent);\n}\n.bg-transparent {\n background-color: transparent;\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-\\[18px\\] {\n padding: 18px;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-\\[1\\.15rem\\] {\n padding-left: 1.15rem;\n padding-right: 1.15rem;\n}\n.px-\\[10px\\] {\n padding-left: 10px;\n padding-right: 10px;\n}\n.px-\\[11px\\] {\n padding-left: 11px;\n padding-right: 11px;\n}\n.px-\\[13px\\] {\n padding-left: 13px;\n padding-right: 13px;\n}\n.px-\\[14px\\] {\n padding-left: 14px;\n padding-right: 14px;\n}\n.px-\\[18px\\] {\n padding-left: 18px;\n padding-right: 18px;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-\\[0\\.9rem\\] {\n padding-top: 0.9rem;\n padding-bottom: 0.9rem;\n}\n.py-\\[10px\\] {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.py-\\[11px\\] {\n padding-top: 11px;\n padding-bottom: 11px;\n}\n.py-\\[14px\\] {\n padding-top: 14px;\n padding-bottom: 14px;\n}\n.py-\\[18px\\] {\n padding-top: 18px;\n padding-bottom: 18px;\n}\n.py-\\[7px\\] {\n padding-top: 7px;\n padding-bottom: 7px;\n}\n.py-\\[9px\\] {\n padding-top: 9px;\n padding-bottom: 9px;\n}\n.pb-0\\.5 {\n padding-bottom: 0.125rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-\\[10px\\] {\n padding-bottom: 10px;\n}\n.pl-6 {\n padding-left: 1.5rem;\n}\n.pr-6 {\n padding-right: 1.5rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-1\\.5 {\n padding-top: 0.375rem;\n}\n.pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\n}\n.pt-\\[18px\\] {\n padding-top: 18px;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-\\[1\\.05rem\\] {\n font-size: 1.05rem;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[11px\\] {\n font-size: 11px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-\\[15px\\] {\n font-size: 15px;\n}\n.text-\\[18px\\] {\n font-size: 18px;\n}\n.text-\\[20px\\] {\n font-size: 20px;\n}\n.text-\\[24px\\] {\n font-size: 24px;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-extrabold {\n font-weight: 800;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.leading-4 {\n line-height: 1rem;\n}\n.leading-\\[1\\.15\\] {\n line-height: 1.15;\n}\n.leading-\\[1\\.1\\] {\n line-height: 1.1;\n}\n.leading-\\[1\\.25\\] {\n line-height: 1.25;\n}\n.leading-\\[1\\.2\\] {\n line-height: 1.2;\n}\n.leading-\\[1\\.45\\] {\n line-height: 1.45;\n}\n.leading-\\[1\\.4\\] {\n line-height: 1.4;\n}\n.leading-\\[18px\\] {\n line-height: 18px;\n}\n.leading-none {\n line-height: 1;\n}\n.tracking-\\[0\\.01em\\] {\n letter-spacing: 0.01em;\n}\n.tracking-\\[0\\.06em\\] {\n letter-spacing: 0.06em;\n}\n.tracking-\\[0\\.08em\\] {\n letter-spacing: 0.08em;\n}\n.tracking-\\[0\\.16em\\] {\n letter-spacing: 0.16em;\n}\n.text-\\[var\\(--theme-negative\\)\\] {\n color: var(--theme-negative);\n}\n.text-\\[var\\(--theme-onPrimary\\)\\] {\n color: var(--theme-onPrimary);\n}\n.text-\\[var\\(--theme-primary\\)\\] {\n color: var(--theme-primary);\n}\n.text-\\[var\\(--theme-secondary\\)\\] {\n color: var(--theme-secondary);\n}\n.text-\\[var\\(--theme-text\\)\\] {\n color: var(--theme-text);\n}\n.text-\\[var\\(--theme-textLight\\)\\] {\n color: var(--theme-textLight);\n}\n.text-\\[var\\(--ui-kit-accent\\)\\] {\n color: var(--ui-kit-accent);\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-45 {\n opacity: 0.45;\n}\n.opacity-70 {\n opacity: 0.7;\n}\n.opacity-80 {\n opacity: 0.8;\n}\n.opacity-\\[0\\.38\\] {\n opacity: 0.38;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\] {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.saturate-0 {\n --tw-saturate: saturate(0);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-100 {\n --tw-saturate: saturate(1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-\\[0\\.8\\] {\n --tw-saturate: saturate(0.8);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-blur-\\[8px\\] {\n --tw-backdrop-blur: blur(8px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[background-color\\,color\\] {\n transition-property: background-color, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[border-color\\,box-shadow\\,background-color\\] {\n transition-property:\n border-color,\n box-shadow,\n background-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[opacity\\,filter\\] {\n transition-property: opacity, filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[transform\\,color\\] {\n transition-property: transform, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.\\[grid-template-columns\\:repeat\\(auto-fit\\,minmax\\(120px\\,1fr\\)\\)\\] {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n}\n:root {\n --ui-kit-font-family:\n "Lato",\n system-ui,\n sans-serif;\n}\n.ui-kit-root {\n font-family: var(--ui-kit-font-family);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.ui-kit-root :is(button, input, textarea, select, option) {\n font-family: var(--ui-kit-font-family);\n}\n.placeholder\\:text-\\[var\\(--theme-textLight\\)\\]::-moz-placeholder {\n color: var(--theme-textLight);\n}\n.placeholder\\:text-\\[var\\(--theme-textLight\\)\\]::placeholder {\n color: var(--theme-textLight);\n}\n.placeholder\\:opacity-100::-moz-placeholder {\n opacity: 1;\n}\n.placeholder\\:opacity-100::placeholder {\n opacity: 1;\n}\n.hover\\:-translate-y-\\[0\\.5px\\]:hover {\n --tw-translate-y: -0.5px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:border-\\[var\\(--theme-primary\\)\\]:hover {\n border-color: var(--theme-primary);\n}\n.hover\\:border-\\[var\\(--theme-primaryDark\\)\\]:hover {\n border-color: var(--theme-primaryDark);\n}\n.hover\\:bg-\\[var\\(--theme-primary\\)\\]:hover {\n background-color: var(--theme-primary);\n}\n.hover\\:bg-\\[var\\(--theme-primaryDark\\)\\]:hover {\n background-color: var(--theme-primaryDark);\n}\n.hover\\:bg-\\[var\\(--theme-surface\\)\\]:hover {\n background-color: var(--theme-surface);\n}\n.hover\\:text-\\[var\\(--theme-onPrimary\\)\\]:hover {\n color: var(--theme-onPrimary);\n}\n.hover\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:hover {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.active\\:translate-y-px:active {\n --tw-translate-y: 1px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:scale-\\[0\\.985\\]:active {\n --tw-scale-x: 0.985;\n --tw-scale-y: 0.985;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:border-\\[var\\(--theme-primary\\)\\]:active {\n border-color: var(--theme-primary);\n}\n.active\\:bg-\\[var\\(--theme-primary\\)\\]:active {\n background-color: var(--theme-primary);\n}\n.active\\:bg-\\[var\\(--theme-secondary\\)\\]:active {\n background-color: var(--theme-secondary);\n}\n.active\\:text-\\[var\\(--theme-onPrimary\\)\\]:active {\n color: var(--theme-onPrimary);\n}\n.active\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:active {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.disabled\\:translate-y-0:disabled {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:scale-100:disabled {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n');
|
|
25
25
|
|
|
26
26
|
// node_modules/@fontsource/lato/files/lato-latin-400-normal.woff
|
|
27
27
|
var lato_latin_400_normal_default = "data:font/woff;base64,d09GRgABAAAAAEQsAA0AAAAAblAAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABMAAACMoAABJ6cXSU0UdTVUIAAAn8AAAAVAAAAHCOPI56T1MvMgAAClAAAABaAAAAYHkkYXljbWFwAAAKrAAAAIoAAADErZmxjGdhc3AAAAs4AAAADAAAAAwAEgAYZ2x5ZgAAC0QAADHcAABOwGxr65BoZWFkAAA9IAAAADYAAAA2/JzyI2hoZWEAAD1YAAAAHwAAACQPtgd3aG10eAAAPXgAAAIQAAADdn2DTzdsb2NhAAA/iAAAAb0AAAHCeLxl9G1heHAAAEFIAAAAHAAAACAA7gDmbmFtZQAAQWQAAAEuAAACmDboUwRwb3N0AABClAAAAZUAAAJFV9sNeHjaVI8DbCUBFEXPoBrsIFjEa9u2bdu2bdu2N1i7thmUcYpYDX8HZZ79LgKg0JWRiCNHT5xJs43Ldm6mETJAIIDgUJ0P4oZV2526rwEBvA7Rs6EIlHj9G6wmVhPzvtXEqDBWGxV6jj5a26mN10erF9Xpyt2w4/ro0AJHLocMVKfrOcHtlbvyU6nMvK/tlF5K0x0KlV6K/x3fi8SLoiJUiv9Fxdu52litj7aaCL+F38Zq4bebcbbXkXOnjtTpPslP9dHOtjqaXkuO35DcCy4Co8LXTuxlENhAEAoqOgYmFjYtaElr2tCOTnSmC93pQU960Ye+9KM/AxjIIAYzhJGMYizjmMBkpjKN6cxgFvOYzwIWspiNbGILW9nOTnaxjwMc5BDHOcFJTnGaM5zjOje5xW3ucJcHPOQRj3nCU57zgpe84jVveMt7PvCRT3zhK9/4zg9+8psIYkggkSSSSSGVNNLJIIts8jAIC4zFrqq8TkDiSg84gH9AU4rEmrHlbtI2irS22RaRTWJTDGCjK2VJzCQbs24JZYGlKBbRZsWxFI9RoUABL9xsBO9zKcaLyUGJQxl1PBhhWEoppZRyQ7nvvv7INruhQGAJP/7f+953vfe9eb5QinUH/6z8e6Fa9qjrpY9+kgwwyKQ2XwlF0fMQI8sR3zHeJ2oTIUaxcinXon+FWupoIE6P+l766CfJAIMsOr/EMiusssY6G2yyxTYp0mTNd8Tpz2evif4SpphmhlnmmGeBlz2KrS8daqmjgTiLLLHMCqussc4Gm2yxTYo0xZ6SmlBAIUXRb0OMZuU22sP7oYMuEo732CerzYE85Eg5L78ZTkUzoYDT0d9Dobwc/T5UKVfLq7LRNb9rziZ5z3GzNm0k2GOfAw7JEzPidiigkEY97kb/1ltPx22000EXCfbY54BD8lwIZ6JUOO9fSfTnUEY5FVRyzV2tpY4G4tyO/mm2T0MTLfq20kk3Q/oMM8IoY4wzwaK+SyyzwiprrLPBJltsk2JHn7TMGHeXY3Kc8Ev7cs6T2RQKZCFF0Qeu5F6IyWL1Z6NkOMdnV/bHUKquTJZzIboUKmQlNdHvwjX9aqmjPoqH6/rdoMHxTRmXt+Rtbe/IxuiBez1jtxKhSbnZ/C3atNKm3O7d0cF9bTvVdSkn1Hcr91hHL330k2SAQYasZ5gRRhljnAmmzD3NDLPMMc8Ci8ZdYpkVVlnjkfnX5QabbLFNisfOPeEpz9gxR1p9hl32rHefrPt5IA85Uj52LscJeXU1duLHdmIqFMhCiox2xlMYk8Xq7UAolReiCXd7IVxzrpY66qOHoUHGuR3lQrP+LcqttCm300Gn4y6ZoFu5x3i99NFPkgEGmTLHNDPMMsc8Cyzqu8QyK6yyxjobbLLFNinSZNhlz9z7ZF3XgTzkSPnYuRwn5NXF3Y2Eu/DzcIYYxY7Pul/nKHHFpY7LZDkvnkVZSU30VXfnjVBLHfVRTbiuzw0aHN+UcXlL3o5+Ee7IRuPfjdo9i78OTcrvRYOhRbZy3/lO2U2POXvpo58kAwwyZO5hRhhljHEmmLKmaWaYZY55Fli0liWWWWGVNR6Zd11usMkW26R47NwTnvKMHXOk1WescZcsRxyT44RvuGu5UEY5FVRyMcqGS1E+DCkPM8IoY4wzwUfOP+BjHrKj7vv25zf252shRrFyKReievf/0P3/R6iljgbi9DjfSx/9JBlgkCl9pplhljnmWWBR3yWWWWGVNdbZYJMttkmRJmtNR/wsnPrP30IBhRSFNz1NVSEmzxvZGy2UUU4FlVz05rrsKqr8Sq9EPwzVyteiv4Za6mggTmM0HO5q3ySbjd1i3FbalNujN0MHnY67ZEJdt/Lr3kyT5lo07hLLrLDKGutssMkW26R48baRGWPvsmeefbKu70AecqR87FyOE/Lq3nAXnocS96mMciqo5NUrfSvKfn6170SfuOJnrjgTmmSL/q100s2QvsOMMMoY40zw5a/KHsqMcXc5JscJX/fUZUKRvYtRrFxKD7300U+SAQbJanfEj16+T155l6TDOc6Hc0ZJeHarXH8q1FLHdedu0KB8U8blLXmH+7zuXbCo7RLLrLDKGo/0W5cbbLLFNikeO/eEpzwjre7l77jAjv0qtNBKJ91k2OWYHCdUhlOe2AIKORNlPekZe50PZZRzIVSEClnJRWu95Pzl6ENP/IonvilUKzfa7yaajdFijFbalNt94XbQ6bhLJtR1Kw8Za5gRRhljnAk+Mv4DPuYhk+bYUZ/Rb5c9Y+xzwCHH6nKckHdc4opydi8fCuRp30uFsshIMYrVl3LRG/CyHj/x9Fzxu/ipu1ft+Kr292jWp40EPdr30kc/SQYYZFLfPW32yRr/QB5ypJyX7//vL/WHr/ylvuo+/yHEZLH6s/5CnuO8cyVWUKquTJZzwVulQlZS44v1GrXU8ZaV12t7Xd8bNKi7KePylrwdjYZ3rPCOcmN0HN41RpN8L7JP5mqxhlY++4tfFTq4r22nui7lhPpu5R5z9NJHP0kGGGTImMOMMMoY40wwZR3TzDDLHPMssMgSy6ywyhqPzL8uN9hki21SPHbuCU95xo450uoz1rjLF18KV7/4UlA+di7HCXl13/V8vG1HsqFAFlLkSmIUqyvlol/QZa39P8Hz8dzzcc/zkQvV6pq1byNBj7a99NFPkgEGmdRnT5t9ssY+kIccKeflD6ziW6GAQs6oLfHElFFOBZW8WAlVUdIqPgjVyo1+g3etqkk269uibyttyp0yIbvlkP7DjDDKGONMMGmsHZnRbpc9ffY54JBjdTlOyDv+ttV9Gsoop4JKXv2mbCDOkPphRhhljHEm+LLfgTv6pGWN3aq3S+6TOxeTxY5L7Eip/P8vlMv2uIor3tPVsib6k5XOhFrqaCBOi7Fa6aSbHmP10kc/SQYY5HVfO5PmmTLHNDPMMsc8Cyyaa4llVlhljXU22GSLbVLsGDMtM9a0S9b1HnGsnOMkevu/VleRdAAAeNpNygEGhGAUAOHvPVlrrQ7QKfYQWZZY6AKBRAIdtk5T/EEwMxiBl49Wtt+u18zDuqhVcBxC3Jqcp3FQX0RQjqr4KTTF6e1hl/42qRPC7wRouA3IeNotxbENQAAQQNF/dw6dRBRK0VhDLQrDKFAZQaKyggEU5qIVBa95WJDKgoMPnoHk33YyyBWbJq6qganNUAENv37sWmoo07B5JlmiQ/YCVgC7fQMK9AUtIw1sAAB42mNgYGACYmYgFgGSjGCahWEDkNZgUACyOIAsXoY6hv+MhozBTMeYbjHdURBRkFKQU1BSUFOwUnBRWKOopCT0/z8DCPAC9SwAqgyCqhRWkFCQAau0RFLJ+P/r/8f/D/2f+L/w7/+/b/6+frD1waYHGx+se7D6wcwHEx5o3t9y7yjQLUQCAJOzMV8AAAABAAIAEgAH//8AD3jalFoHeBNH2t7ZIsmSteqSJatYklVcJMuSLFkusiX33rtNccW4YLBJwPRgytHSSAJJMDVwTgjJQa6kXAFSrpe0K7meXq5fGljLP6O1wTjtv4fH7M7uaOar71d2MBJzYBhxlTqMWbAMLIDlYpgsSHjcelwhp0kRMNusQTLDazWbaNxsssm8PvYdGlmBUWL0w78r6kBhjTNvoCxJ7/C5zKRkMpbUOPyuhLJAUqZdK1DH9gRdSrtOItHZla4gc5z4+azbTfTMHiHXKq06iTm/I9Nfm51itagG15o8KXZnlt2TI1VKlbNX0/Il+iSVyq6X5JGnrgz4qFQMx3537V/gJUizEDNiGJBAarhmJ5EhIbxB/AZ9ThycIzgxnPXwj0iRGZ0ajdMkk5nQ1SijDkeedTS3dHi9HS3NDjznyivwrVwO38Y70CwH3OcQcRjfCvfhYwq0D5cGkOs0IDHeuAUeMaE1aHQcMXhn/o46zPzxgQSzOeEBYLpxB9fzYRhZB9cLYmG4HgFXyPD6/DIzQYMUIGOHecAjM/uDIBvI0H+ER+ZxKxVyLuHhollEdMQRAQucRigb61QJAJR8XMJz6Gqa7lJpAOD9NPSOkEq0TZdyUvS1jR831qiNoOxlIWWx7gldiIMzYiIPfhz6GJxh2kzxJJcC7cwRiwGcUWmpWE4AFJfrtKBfb2LawWl9HI9ijlTo4pmnVDpKwAlsB8UYga28JiUTOQNYJlaAVWMY5QQ2SDGSvEoG9QC1kAcQ8Vw9UHE5SBM2Qk8grYgAYgJ40ZMgAeToFzQB/r3+hdIMroaWuYqXF1qKdw2FAiPHVvBxjTJMDx7KSZFr6KSsynRj6b6xopzxM0OxeLwiDA5Z8pvTTaG+InPkFVNObZo+tDRXHytYXlEvoK3pTh4uU2Q0bVtetne4iLxDpn9eWJ8V1quNRi6jVXrrN3S2T6+r4Dwu0+E73KVeq5ihOY7iLvyXrhKfXQwuc+w5FRiFlV77B/UadQaTYTYsHSvC2qDm5swrY87cuJAd5CAKuR6Og3iUd5bRr5iJX/a2TOQVjje7XM3jhQVrm9L3atNDFkvIFR/vQtd0Lb5VqIvbevVdvlY2RWV4W8ZvTJ9odu1ZPJ3Ma9zR4XJ17Ghs3tnpcnXubA53Zms02Z3hUEdArQ50gFslsitTQjGob5xCE6cam3ehibuaw11ZGk1WVzjUjia2Q3utv/ZPah01g+VhFZBrSH9Um1abk5hnQgV5jRorDbisR9BgnmG/E6ALiPLq88M3+MGa25b6yVUUKVRRXEN6kdNdGzBITD4reNDq4OFy6SheHAapZ3WJyjuWfHh37f3ry9Ma1hTmZmX03s781FXd6x07X8i0rRyiZjyNq3KUgJZqMp36hECVw5wfKrIyXQV3l8uU439czvySVt7ZsdI3cLCreNPKRn3VXdVlW5f6r74e6ik01xeCRwJHIUvIw4EHeTgcLHbqxa6M5u9kXsMBR4RpkRVIVXoQ9UXW5v3RIZeDA+PoCg5JC2oqBkN6fWiwokZA8wdH8LWvMiPfFoh5tJTrGv/rG29Prn/n9b9OpHOltEj2LWYYrV/OvAaem1vfi9tYQGBdh2tzAgQXPilIHhnk37w8yVkxCtcHB78lE8Hl0yf++vo76yfffuOv4y64PE8s+Da4G62/jFiKP0P9FXPBAVoMEm/z+6Cm0oBfpVQ5QS7wQB6CIA96Lo0c2ADQxjalDoBuiis3nk09m2iRm6WPpj5qVsZwW2lBvAQ+kxilUqMEPpRqBWJi6XMyk1gt76noVRC4ILavoleeILXIn38uySBSCuBjQSyOCwR98EYpNtqeh5T1YudIE3kAEyBNGBVGiVlizDBK8L3gPmbwLmYI3EMeYJp2MfXg3C7wCOJlCfMvUIt9gOkxzL8A+LlIav4g4Ud2uERiSNXo0wxijavEoRfSfENCPEeoSTZINqiSDFKlzaN3LF/abtXFioW0wOLKMkqNDkQNHovX4ych1mEySEwv+DsjxU/eB9+0wthTB3eV3bwr2qx1cYwZXRxSMHDtv9dO4x9RF7EYDFNFIQJ5z3Har6vA24QuY4XCbKJ+m4CiRc61f5GV1AxCHmRteNSzAHQtaRRrgXQxmpCVdfu+PzL63X21tfu+Ozry/X11T/q7JsPhyU6/vxNdu/z4T59h/vZEa+sTQPbMM0D+zdbWbzIfPHPqT7uzs3f/6dSpP6LrHyGXP4aRykA9iEkxzGKUeP3UnGsAD9INNAovcQ3jy2NEcZxM8PCdQBPBdhO/SnW8xuMKY6rA6isf7IarrICrJEIOPJD+ee0ASLzRDc3JiOwPBImMOS7mvA8+wds6psfDrvqhHGaXvd4K/qwzzRaKJOAngSUFifbiJT5fZ0k6n5egoQTcLrp2w1FqBvr5ktrdm9bmMpsFQlP8cK7MLgE/yxoaXpWXtzRoSAhUp+k0AIi77+vPQLYzfO2fpBNSVr6AMj2YVyR0CRhmoTur9AQSbJTEjM8ldbjj/lVBc6gzsG9/xW2P9qw5MVaqrlQo5AYeTuK0vbCvomJ1hdVQd/tYx7Z6i62wCxHviuUlqG8Q7122u6FwqC5TYjm3vWd6VXag92u1CTESKRlD6cryU9Orl6VlLSu2bwPWcGdmsDMH4l2N8wY7OGaHcl4GUUyMKTEMOTAnBSD/YTVGIDkbiV2/lcnPH4nskOtIKf7k6SMEFfkYBzjVL1Yyu8B6laSDOMI8rclJiGTPSYhg4JpOZHscs5FgM7+FEmKtjhUKh2uTGYkXXQEmGB5bOvbIRHbt3mdG8iZ6m40+qV7mKV1eULGuyWmruaXGNxEcm8DPUBXWdGZ3XHhiumvNd7YXq5N9+kqNwWpwtW2sKhiuTJbKjfg0huFRXbkhJZooLQuIYA0IZCMfAvKF1NA4vqf5/onC0m3fGhl+bGNBYwcYot0J04zIs5F51V61qqR0osGRWjtWUDpRl0KMBkaO9vc8vLm0aMs3x5a8PAnelaoje802prJoTb3DWT8WLl5dk5zeMALlMgplnQOpgZ6BwJ8L5pzYD6WdC8gcES/ymNBp24K3C+MlEbkknjpca0oVXW3QWMhpdbIsXrIeosoyyJMV2p8B+kYJhlFz3LARkxU0Z84gbYirBZ4uWzTGC4bOby2+Y+fq8eCao93Lj60JToztvKNky/mh4lVVSekNw9nZww3pSVWriot7glpjaHl+/vKQURvsEQdW3rdkzwVr8pmJmj39WVn9e2omziRbL+xZct/KwAFbSU9O+WDYYAgPluf0lNjwx1NKOtPdrWGrNdzqTu8sSUG6OQil4ZvjAwOIiwWYeEM2NACLMx9L3Z2joeLN51YMfH1dSJWaa2NOCl2GU+AJpVXi3wPUKZWDeeGRqmRb2WCodFWlHa/0DR7uWXJqsrhw8uGB4KqVg5kMT6bCs3VeTaoTnCwYqUxKqVyZVzhUbk2r7oe0bYVIvZ74HYufi7Fasmi8dTF2fxWWEzGLHqAdGXZHPeb+kpi0uErZ+YUxirOYiC8JWvjsYnoA1M57xP1kC7JVWdRYqWhIV1F6oAPgIMERy5k8uUOtdsjBRbl49gr+PLhzi0TNf0Mg4lBi/ut8jXgruAtydi/4NvEvYj+0XC4bEVEYuJfomH0I/eHBXeDVXQg1/g53/A+7ox8ZtAUqH2YPFpRYAMXfxWifFLU6Be0rJqj3too1cBcxxREJ3uCrJVuYVeVwN9O1f+GfQKuyYzmfqUehgZGs+bMV6SJhmgwVbQM5Nbu6Mx1F9SUeUjoZ6yiqKXKYsmocuS05llg1fc9nSkG1zmtXORvXVVSONuT6fMbDpwXJoUCgqDUnpThdo0/Uq64e+6y2m69JOFqqBqvDlsMoCdPiG6kvih4Eh7X1hd4q1QOUCkPsNAAOaTYlWtF0EjJAIgYscLJfZmXnKsnbq7uFWburc1qzdaGt399U0OfokkkNSar01gJb2wMvTe5871zv0JOf3n7o3SZRrIKvHmL+8eijzKuvbfL37jv7/HDn40emlmbkDt3J4Ia87HRJpc1ZsandE36qorquOKmsN6vp0b2tCjlzX0V6Ylo8P7P/9pY9v9xb1P/ER3c+zFw71xr2xMSFS+tHfwFSvzfy48fuHAjYq8fv+fbQ8Ld3Vq6Tu5tDwBaT1z9VVNqCkIAPUawM1eSoVjaiKoEwElH/9wAjgYTDpcru1STwdkY27eSa1Pfiuc8xd+GqvygVAgVfI4dV6Gmpljo8uwEv8dUlFWmgrZ2D6HIMrimH+JKMYTD3WBSrAXyC5Gs1W+ZvjOfAj6a+vyHbWNBXeORYwban1zEvAF/DrVWJR44yPwFY/boa66FjzKfUYe+yvS0Z3Y1hheHUzo57h7Px/YzQWrQ0sGrbnsT8Dt/mW6A9t8MKKIaaYSOPAdxIwXyJSMfc6ANyIbD5feQxsbCy9eo3Hpg93z34PRBzbPrNtjyuVCLU2X3l3fnj399TVbXjW4P5/S0VVgmwCxv61wxdBPSJE4C+NNTd2MYXyrQJWlnNXS/etvPFOytFCekmEZQwkga1G0ojFlNH80FoQEbIP6lkE0FjVBbU7v6nmNnpyDt43DQgn+p/oXTqmXHmEdA0/sxUKf7T48wnzwxQhwe+y3xyfOqXd1RePV55+y8xEJW0Ea6Nsm/WuaN/pDFSizsiL+GPz+6nDk8ziYcY1TSctuAXMTd+YWbnV0aeuIwmC6Yjh9BcVor5UIpeDIuauMSMYqVRQhOsC7DinCsvF1SXhCNreXOl9Y8yFfiOb+2OQ20PMrPPDA58H4i+3nTXppVOvyReLFMH29Y3rH92T3nVvh/sFygNcpCjFI9GfmfLssmicj0F6Isr1WkFya3xAtpu0dTc/avbdr9ysHqOCyqT5dtoliAWPPB/D5V5eXb28mWCvIzvi0zAVtE2fAuc/SL8yUE4m4jO9oCDly7BEYCZ+j/xH8E71XxvwBatiqGFRN1f4sF/lD3+9ZHlgziHwBUKaY47PFBiuQj+se5724u1uoBWopDaG7e3E+cQTZcgTVlwNVhwwiXmUxwWuUE0+QJOIgUgWsH2MivE7j8okxIeivxRYVFok1V41tdlGpmYx0gEMrUxrvXiRcIC46RWrYjcp0rgxyTGR9o4fHEMHoiVxFKRsSgHcGPi9/COghpCqvSAMXx49sVLJ09e1zZnG7w1wwEkIwhYqiANKAeD6abJBp8r4Bi5BSBW0Qo+X0mDN4Vaze0P4zijUDu0DjXDJ4iHb9doheAfOCcuI17r0RCrVfwrA6RO4VLPbnU4iO0at+Lq69Rhvmr2wEINKeEALe0EUJ7IgK5vCKQatZiAufjD3SqDaPYyjj/cSx0Wyq/+UJOuIj6+MiCWkX61Sz5LIF5wrPPav6i/LKirOORCKySVn6mrqL9An7o6Pc3MPtXf/xQgp6cBxXrWxPgzO0pLdzwzPjHnXf+5NDR0CQiPHwfCy8PDl5n/HJ968c7q6jtfnJr61Z1VVXf+CsORfsktkBQa+XE0T5+PXzYPC2IQNLdfBGd2/2gqVLzrh9veeqthS3PqzCNv4XGRd6jDeROn+npPryu4P7VmNPy1+xFHzG84qM7SRuv6aOYVBWAafCVnSdVjxWDsWGKmajawoeCrWez71pGtacy4XA2kUvlXsDrH65uQ1zjMfDOvXCWyZWjJYBHX9+x+flvQ1bG9IVELTpzNUDP7JHb73T9p2taSOnPmZbw58jB12L/i7o7KqcFymcIeeSEJx+IU+5MqVuRtvQ3aSxasW16jZlAnm4XreYY5c11r1KpcULtwrsfrfTFyscRRtLwo1Ftgyl6+YduG5dn5Gy6s2ftmXSZPRSt8deMNRcMV9uxl8NWy7Oyxh4bWPV9OPikSmZJM5py6tJyazKRUf+Nk25KHJov7mjsFIofPYS1alh1qyLQl+Zq3La08MBquLIVUaqFcNkO5cCGVc70OcjOTfolJow6fvMonPzqJbP8Y7D0q4Cw1i5vI8Nk0h73V4/hrbfuWey7W3P3y1NTLB2suepbvvz9n+N52YmD28MaXH2htfeDljfD+/vZ7h3PhejzoSyVs7SJDLC90ZWDmPQCjM7iHVgliFDS4G8boByPfeYw6rJHPCk21KSm1JuI/Et2VAUQZjWHct+FK9s9ZCQ2VC9YF0eAPzPRxjYkD7Dwhh0vHgDqOWZ2pMXJBjZTm8HkgiTKr72NC55h7BDEw5DJ3n4vurI0Pmkx5GuINiQ6NvAXGHDiQaiFkFBmS5BbR1afn6CE/gvTEY1gMiBI0h5sxUU8A83XaVcZ2USHngVtg5F4eoxA9yVjA+z9QqnnMVq6A2ROjUjyB/xl/khZGLinUeCwtidRGVCoab1PIIr+gVawMyTdQTsLaM1jMPf7qxch/HtboBaBUHi8QaOSgJMagPotnRZ7Hs4ilGlnkJXNQbwiacIdYB9drhuuhmCKM1pNcANEXlgoA2sNBxewrhPvqL2VE6iyUdalJf3X/dKU+nrxlGv7uAPMnwFAR9DuZxMiW/JAWHTgAxuKVMzPKeOZPXH2xUv3pz9SqYtR5+gB2nv7Bdp6IKNVIMvJKo0uIt1XoMoXURVPCFZvJHI3YcPUfs6urvL5sMB+xje3s2mCMueM1uZbjiZcXf/JX9ItpQkb8AfIhQVGLhR+Y+HO40RwQJ8dB/zZJHO9ZoYxLqy7xVHKYyUQm5TRYpkpRpKYwx2g5WgVjXifk1zpQhKWgIAj57AcPrVuH3ljJveACNYOol7mVBnaHXxgT6Hv6FRr6PWpGofq3UARwFuH/SUySXCwJC7C5aBqgiett6fnPWegxCwUK4EbPaSKadEzWaBIoub2ycWlW9kClI3z338/29YTaQmkqaTwvofHSLU1T7U7GnVZdlKffcHY4XZOaI9YsSQzY5MZwX1HOqmY/WXPLemOSUUYH6mozew80Rd6Umd0JL5EGd2GyPcsiQTQeuvZvUgm1ocQsKLP1SFhS5kEKZkIANlUk0YIBFRCHLuSdHGw90OvLWX2yv/trnhieFdS1bPe71pYeOGQOL6MuRk6UtYW3X9w8dnF/XWVhp5W4tbaMUYZ9P36650BHcrS7fO3fxBaSwpIXYSMLhqgoWVTCFPHEIpHZV5VZvqbKllw5UhhqzEyUqgTu8POjS0+uK8pbf3585ak8IiSIVevVGb0HWjtvX+6BTRxJqK6ieMeljat/sBeKCfFbCvd+bp5foylt0VZQABaY60ic8CknqoYOK18cOjPcEmX5xEDXlPc8kwsZTl9bcuCQKbzMsqFmacFtlyC7B+ryArj7St5ttWXgvXAG5Hc/4heP8vsC5DcRc8x3jmAnS0/Mc3vDKFRQ1kYoZdzccf9YHuz+LMFdjROlBcuL0yTKWLexc3DMP/iNbaWhycfXbDsoxW2m8FKSyh2fGU7WLjuwNM2QCFm2Z1tlJV/78faV39lVtf2eqeBARRKSugaScpA6h+mRnm3RFjvLtSr6RQ9qQIe8XvLUmCL+WHrH1trCLBIk6AzOCp8OWJi/EF1CSiEv627Z1eWSt8l5cb7WUNe22WMY9BI3czfxR5ID7bwK62IzJIgFIqBk7QgC743It7DFNHcBXifJzmE/XLGBeE4D4O3weBqQJY+bAn17G0ryEoxZyya3TC7LgkJYterMqH9pQ4pHbHQlVDQF+veDO5JLl6wYTg+UmEtHykvX1CQzz/oaMrWrh4dW6zLrSY5OGzbGiEO15eubnRK5U5loEZMxSndrcWhyaSC1fHlGxaBBXpCpTHMmi5P3dpWvb3JevWx1qmMpDi++2mfKTlFrXGG8Wu+rcHSNjnY5Knx6KN27oBj+AO1KcZMXQWSO8sGV3HU+ND3QsKUp9fzgcM3XsqCbnC1q8PcdaI5swHeMb6kMRZTQUm6DsttKXYASVbG4Llv05Q60nv+dwgz7BQ6zXG52wL6BWUF8OCsgPgTB68/S0DUNqvvaD5mD0fXkmB2ttzDzUCKH/pz1E4pGKo2+eB5Oi3hSYXX4c7a7+oPcwWoHn79MyAVldWT+Z7cG2CEoj0+gPPRo388pH6wo54pWD6DCKdeIQb5Irz7B7KXjJVKdEOw7pjTQzAWRXu++QF2cPSKQgBaxnBmXaPixBjkTK5GCowoho4U7AOw03KMV3hGszKCMqItX8uADVi/UP1is8UiQs0V5VwWJhfqhb9LUSitfmLm3c2CLVlHUvNxdu6nFeX5FT2pNjvl895Lw6jTiQ8uKotY1y/213jhP9+2dSIO3bjDkdOSgu8l1JbkR4bxFwJ1VC3fWL96JDp8cumEWcOnRsvZFZsGiFknDtWSYeXHvOYjLEDJbr/dhU1dd2FRQsOnCqlUXNhcWbr6w6t6DB++tHKuwWCrGSKp898Vb1/1gd1nZ7h+su/Xi7vLZdT964ps/9nbf3t5+YLkX7XUXM0OKSC6LkLKFlM+Zj+TmiIC4EIXOjEQRcuxk/5IdHiCJAmTpfhQRmBmq0rKuZlnB9kvRmBAMMPnkz2+OCZBDZoZ4jt2V1eLNuAx7VeBmXH7ufP7JwXlU7v6aL5ZvZc6gQHQLi8vEh1eeAH8rb5/H5uL8GsvsfgTN+X4Wmlkd4VfQrqyOlPPmgRoAczrq1ynJWO/hgeRCnYobR2d5uzYlEx8q46dX3iqT7FDLhgciG+BKQRjrRVBDOZB6zv+Q7uOvxqpFVn+l11HqiXeUL+lZUu5wdx/oWnk2J5mnlErtgbpcb7VX7Shf2rO03IG+pPcezSKqlcp4lcqeYbB5rTqjPaclt/jWFneRr1BIa03aeGeOKdlv0yUkBTtCWUN1rjw/8oVU2B94igpiRtTpt2awyZRfFq2gEfLLlTfiL3hu3bZJsfJ0Eq6UtKPzI8F0bZJewaMFXudt4p2b8WGZvEQBAiIZc3Jb5Fh+UCQVSZpS0tE+k1AWzxEfshiGFvX5Ua18I9hKQOrKoeo9WeejDnBqJawrU4gPI5Pjm8vD+PuzAstIWZu/90AzvhMDqEog/gZX+/xqQXqXQssBgBZzeVIakJx4+V6m5zhUkCgykVhqNpcm4vvEilkBm51DLCA+xpxzK8nYlaICWDSEdEYTR4hXBExp6X1KLXWJR1M8ueBVSi2rkmuoXwkkPEoc8zylle1kvrNfw/8zj09RfN7rAv3Ouf0LTKaCRPwOkVwuioyZC43GUgNLjQl/TJWmUrlUkXoTxtZhxIuQx+t1g8znl92oG4i5/BVsYR55RCnnfRIj+R1fLjoFG2o9j8Cq4RqX/oCvkh/FueDvtJCZ0mpBPi1htJF/qGiwX6dizkRrBhr62D/hLqiHgZaTgc/I8+mYeO3Uk8yS+1UaDhDFCClUI3E5OskB5hV5HLiLeEpFR25TpqpUqSp8k1gBVy2GtDfBVUXRL3RzlYMPlQ5GookWRH6PJ0UoYSxui/wJ/ycxIzPTEevecqFZjP9pX9QqmT/hGMzx86FWIIxlIFRhHT8bROsJ1uHZfisBL/BWiRSmu44Q3ywuKCgWy8RJDRvqM7Sx8qo2Wkork/xGoz9JCW/bquSx2oz6DQ1JcBKYyasbqs13d3f3eosmGp01cmlfc+aKnm63NeSxxMRYvPkWd3fPisyWXqm8Nq1xosjb09ONKH2LmQFjkFIC2Y/E/NaePVTkk7PoTSvkIZXlAczRmgIyUMVygxs/ezwj2mGAjsdCKsuNRwEr0pOQtuT6L2egPhlOQsyCGUhiD6I/rVYu7W2J0m/J9yL6PSFrlP7mPqm8xono7+3udufXDtVBSifANCklMGRpCFA9c3EEYZ15LgfAPw6VgTssRf353v6lzYnsoC+EBnhfU3HBWG1qgs3YWAJvHEabEUMn4aBkXiap+ZNwiFsP1NVnT8Jxrp+Ee0VmcsRrHOhrhiP6NYOZwXWOppZOr7ezpckReZ38E3oancV+84D77LmmIHHyLejBENCoz5zxQvDCHumKYjkN2HNehFyJjnfh6Z0PrM4Lb/7OrdFzW+L6KZ+TJ6JjjY68ZG9eU7ZVLJBSrpwn2WNdb+9a760cr7YJ+DVT31qz6uk9dcQFue7d2Lz0oEAgiYvjRjikwaSN4eaVlnMfk+nwN0/8QIV/wgn07EYWAUMp2UF9HQsiq0aV65wkEJELzi5FS2Yz+o+LDiRE5WREn/glZm+Cbqdv9NRo9folRXGlfAWfVgvkSZ6wI29ZfgJ4Uq9kNgTcuoAePyWQa6WzOaagS3cZP6ZJBNSShzaU2ArbYZihBLQ6zaxIrh4tZD4tler/UzHioLiVdLyKHuebPEVOENXfFPZnkiSXwezCH6XXb/Or2EjoV0HJIvJUXBtLOdcGs3b/om9KfzLqDnfcl7oiK9CfcrjtPoPJqDvUcSh1RSDQlwrHetOUOViXltaQm5iY25CWVhc048fQq/ZDcKr+MJw6gH56X+chPfwpO3bWodl1zrT6oNkcrI9iBZRqA9uTlhk/i14QehTzZ3bgv7uAm1lxj8bAB3JazuXC+CDjGdX3MgPAw5wFjczZC+wFX03Y1fLIj81ZOl22CfdJtLO/6R8cYJ4D2QODGL7A77ms50tY70f+P/sW85fZN5EM11zbTuyizmClWPviHID9iv6FmcB8NRTlBwoWMpTBVkRE+lx24KrK0KbX9A/216RXN6YH3ctv74QZQhJPJZHas5ry3DU+rbt+xeiKendzlztvLkuIfLt4ZCroc+m9xTWN9rCP/BfKGtTJmQZrIC3F6S/pzK3bYrV0F93IHcxatSNodYQ9yame4q786k1m62BF1lCtK+iPnPKUBDIMmoq0xEyn1WyW68sg1zR5P95MbWC72IurCWrR+B/ShCSV0m6QSg12pSopQQoG0IdEVZJeKtWjq0FKxajsaGRXqZLRvGTVojHUQuG1f1OfQt9yYuUYAuaopS5uGnA/21kAN75xkvAdCY2YnNMCieaRHJ6AI+BxcgOnJ7qPj+cVTZ7pHj4UcFLiWNrgrsyGpy9S4Lf9oCvssszWe5fuPPFUX9/TJ3Yu9aL7p/v6nkL3van1a/adaJ16+5EeR/34vpOtU2893A1+QXE5nPxwWeHk13v7ZtYXFPpDnFioDQf83Fu1vj4lFkbXmL6nT+5Y5vUu23Hy6b7ep0+w93CTtlO3w3MivY++u7Pt9O23NDj7Hns/2l8i8vBG6mEsCUOHif5f/SUf215S4o05UikvNs7pzjRZ4blNa+udQ1kBq9uiE9NySuldX+ZrzNIzf/GUJxYvz9F4iVKBNF2RoIIIlJNkKsgw45a8HKlCIuInpztNOY0e5lWreRCXxEOsMSHa9mDbCECcwOSQOkyWIWMPJcJEJppnod7A5z7c82kWTfOP0rRIeJSitFlpi8Y4RwV2aLlKoUTMXI0T0krmKk/K0wq1YMcXvEDnD0A28U/8dYyClETB4SDReV8kG3+daQXGLzllR163tHjMg5WhHqnsK0yIQsu7lazDq2RsFmm2zUNlCij838zmrQdBwtnTQyslasEbB43iH8WoNbUT/qo0hSyl2DuF//R/sJg/M9PExk2TS6bUfL2cOa8GTiG9RmHPslpgLw1KQU7+Aq+nCuelIMeDkUtU4Vqoy2LChr8I7Yz18UUhfXEkKHa33lpUdGure/66Re8rS04u9en1vtLk5DKfnlxRcEuL291yS0F4bYvH07I2BJ8aDGhWud9g8Jcj++nFakkTeR4TYKKbT2ICeLvgNCYzRHxvNkyeZ3bvZu4AY7vBulnLLshNPTGF13H6MMeNelkUDRLzZ/5g2kCwTabrx+gAaPc25RjREbATqjTFZYWKAfzYP6hTE2Q5DmeA5skkZAxVItrD6dP7qtLsRcEs/UMcnlJelSLUxr6m9mZkxHv8rmRaDEDsypWQikZiI14Pqcidp2Lx6b6bT/aBRQQRoNtTn51wa7gouajDFWjMTRH5RbROwJHqUxIMaQliiS2U1lKS5XIFYnkSESSugJsaauT06TyF9q0OWXXQ3xjQqdNL0+I4KmGCViY32BX6FC3dAnK8bm+aXSyClGbUZMRDWp8l9+JNbGcbRKsNFKfwpnfpeMXKg7QxgZphGJHw3yoFqvCYmWiFp/vcCs9qg1xK4BUVesOD84Vewf6W8jHYUW6zJsFib3Rk3XyxV1rocSa3WJl37YkUivLJ1/yUEkZ5GRwozEjv8G8e2inla0eY94+sOL02L2/t6RXU4cNX/NSPrviJrtzBA3XN+/sy4QobwXfBGfwdTPZZe92oSvLpDZn2uDh7pkHvS1LhdQtH8C38/RRzHPwD4yP+VPC3c50Om9+zMIz7znLEygRFcooyKceaMhbXXpcQqHUllRsknI+5MVyjRqaRxlL7a+VFvgRPokxC+6WIu3XQMgs5SzFRNJfwczlIbH7YflAYH72bHIqlVTG2Pw7fxgwSvwXfSWmNoTO/F5lsivZIiBz8G9EvxoYv7gJxILqDzcWra1NTa1cXl6ypS02tW1PS2NDQ2NLQQM2k1I6XoMOGKXUTpSXjtSmRyGBv74oVvb2DaId7IWoLIWpLURfGHz0tBitRWIDCuzwgU1gUxOKHH2Rp+UeFdKzoKF+b9Smwf7pwvA0CsEQCqLhYgQZQEgkcMhtUKhWz4bMvMIi3/RhGbaTux8RYAmbFXNdPkSrMGXOnSC2LREbB7InwUNePMFOiEVpYP8L8XKrA+aB549V9N8mU5OLEvz6IiGWpukrCLXUmVAFBSCB6/HFxbAC8nL1A4JdlqSrmyVcNSqpTl4BhRJS2LkibA3pzyf+CKotJll0nluz//+HN7IM3MfH+/7VyFlBtLGscn1lLgAChRJAGAikJliJRPGihUEILdW9Tdwvccm/9lLrRd3rq5bq7u7uW+wy57l69RjZvZ3bZJiHUzsP3H85kZ2Yz3+T//b69dPbE51ezEpl8+uVx811C0Q0A+ib6FJCDetAEpgUZ7etbtAKnRO4/JX1l17OokZvwzCmCzxzxxjUveX1T/GeYAJnsMZKgaJCG1mta3EpRJdCkRgFfzFChfXrAskISibUT5g9O/Om5JK6EXRHI/H2MkL/MMe7auoV11uycpCN3yDKLc7MKGwoyKzHyJwuj5AHMn9fLU27MRUIPhgEAJKALLgIgiN7jp/eIei90++inRf1TP/2sqHf76hKjqH8CVwGUZ/gOAKYLZ/RjAEAROlr47ofv0C8J0Ut6PNGFRJbnqyJiZl9fjufjR8JS4g7CLvjRNJkmQkS74Db2NkUsoSDOpFUm8nngDsy/1QJA+67Hw4krQHC8mRkJfZdtYrPPuj1s5xcnx10Rj5NzKF3j9zfLgy/xbtmaFyA4fDlwLrxx5nLG5hsJvF6eXcOzlSrMog0E03v89B5R74VlPvpZUe/mde+7AMBncTuZnM6Arj8A0sERAIgdPnoPr3t/5fRWpkfUe0leP8vpLcxZUe8mAOAkRBfTH2HePwnHMgwBKgUiUJci0IBKngjMfY1QY5oHQ0ye71+j/oOwHs7CvIndDMcirIeUEbsxEojxQOJILkIDWflKluToQL6ftB1frTnC1dqF+4NJKtyfXGEcvwyq9/jpPaLeC3/x0U+L+qd++llR70Y6gGAd6KZIagKi9kIISQg0hEBbCCT/ZO+Es6azJ9ij06GLvWM6nAgnkBfZO9mTM+As9tgM6IITZ7C3wwkAkFzb7RwF1sWNoBHYRQ6Mc1mwQau/dHnbsMulGkIrMH2G32yY9Qao8kHDFj/rdKnyNfUvLG/F9NSqNxvHKLRa173zlv9dWltJtBceHI84KvKP0kLPitXHfHCxnOxtmjhIzYLaRzBJlW9dFq/+cRb7wz1tnTXk5vQMRFSte6u6b0sVYqq8Xp4KwqNrF0b9OAim9/jpPaLeC+/00c+KeregY8IFt1MotJMHgA+3JsceJjZjTEHJtZe+GUCuQTn7G32Y/SOQXYPgaa4Sws1lx6vFyI6Weyq4Z0P50t84oVdMEB3zDs3KynDUOjIsDVMbLHmuNufME4JFY6u1ZHIIt71pVpPdWF5fboy1TyypWObMeKRyw6P0/YVTl5oKx5XlZpu0BrMxq2puff3ascZL2RxHir3KlJ7fWGZxllgLR2RrS81J6U3rmvr05Gfz715b5vXyrAl9FzdaFXi0ykEvAEF0t59+WNRf89O3i/obfnqrqC/00z8R9dfBJ9xvEulMJIXOYzSYEoR6UPHYg95wGccC0VsQ2xV43BGigOkIas+Y3fMK5LGe3dTwUQtKK6cU6eURQ5ispPGzF5rXvGCLH7+wuaByZeMAZuaxFS0Hkqz3sY8jXsY1Om92TTp8tmhGZZoE9iUWjqdox9oHlqdpJrdNytQM04RIixBKsWJ18QR7rK5qYXXh6ikFVK57nS5dh5mauZMnzPN8Tuvs1enjG4aNXDoS/oo4xtJlDUZcQ9mBKZfqwJhFDmpRYXlgwIL7fAJWSuPuufkC8JIVlIsJi2JyC+6eGRU8WN0QxvnZK3ggxhHIy4RIS6tHSvMD4hTmV/A1VC1cW+dBMN3tpx8W9df89FZRX8jr3j8BgFtxOy/j+FLeycepQwAQqT66m9e9pzndSh8W9ddO8/rnnJ5Gt4r6wk4+TtV5z1E0vRWY8asbea0l3E8D/0cC5DxuFfKe+OSSr4fI/ZMkGu0jLrHgsIOi1fOMc/KGxNKKGY+OvkMnVc0snF1lKG59omXW3TdVF6++bb7roVLFmmlPTh+xavRwUm6unV1cu4Ire2hYQKVJwhlVZLUiOYKOV0dGFMsLs9fmhYcp5eU5Nx59auner06NK2t9ePm0O9aNHDd+2/OOtr5d1iW3LcsYXZKSO765YvT6cUY0MpgtwK/S0fyrFBIA6ZgTwCM2Rpipv4Pqbj/9sKi/5qdvF/U3/PRWUV+IdEACF3iOc2s2YG4lg/eP4BUqnVzIt4GzopN8s0BJ0YHHxJdt8PaADbCnMUAAJHB4H6WMVA1IAhnYDRVfP3wkFR12IZBChRrixYZnjbgwSu4rKkPURN1mq01VoCnfX1aF4Alnm72CC6GT+t4qgI/WLKtb7UyFttpVzlQz66wiV1e84EY0RbJ2pCb21cqXb0RIhV43OV7teejUTKLebnXtZ4dxVeOTDs3wPJHt9fK5cTwTE4QZugBAEN3tpx8W9df89FZRXyjoOMeL25kitPMVEKkODolRAB2mOqIuz3Q8XHLrgn6gY/qWQKBDEuPpGClCfpUlrMkf6BDPo1U8j4X4PARWh7zgw+rw+BLPS56VGnh+3K/+w+JfcqxSW8gAgFxqEAtEbm1iO/b8cOeUKXf+sKeDbVI7mu+aP/+ultLSFvS72SG+yfitZeuil/rB8bYbfvOYtnQedDoPdm7Z0tleX9/eCUh0vTNrKJo7HweoHZTdCyy5KoZC2leooLoUuM77Ba6iiQ7jEKXMhONW8ws260vbXbeucTia75i7+XlL7jOeO3ZuS66YXzlifmXydnIOF6jSBwYqEflb1bx8bT/Vc8PSBesQ2TNp7ywzYnsefYukxdCE+FZqP+ESaF/OmBDuhxFtIlzNyugNUfKNjErW+unt1P6IdVFR6+gQKEXzs5BaBP+mP8H+UxAfWGXqt6AWam3VqWk1dq3WXpOWWm3TuqxZRpvNmGWldekVufHxHICaVoHuFlGRlmm3ZxrtdoBID+p+YiK9HcQF5qbF1DTsGGaAi2OzSlN1RdZsdTWxjGPxDNzfWbQxPTPLaU/UJGsmZDvz0G8AwTEinHyW2NvvaR8jtX2fEXs38Y/Q7/s8Quf+xR1icp88Dw30nyCGe4S/1QGfpsAbERQpJCs18RMbbFI6VJ4QExGtlsST57NnZk+6rTKZljERoYrMHGuCtkIfJosJRe9dyU9hFf0Vag/yqVQceWzYKMJuGozUxE10+jZIf5U9I3tyf4PRRqHBsJgw/t3wT7AKnEEtplxti2cGbZBAPSbG4x7nDNpn9VUOxStXPzaZgw4aINCoEW48ajmDjttVdx4ev/oBzhx85Ak08oQbnOHPKuX/flZnrv2kIPgQfEY+Qb4ZzOv+sMDVVjdq25yCgjnbRtW1uQqIxv6jUdwR9ygg0Z0k6HHgJ5zdKRhYoZwSeHylu01QdKDi8Vypijn+CscAQJRRhP/FGUUQPHV4talCAJHPDb/GPjeAAy1t+LWfiU1oBvGrobcCAFLHVx8aRL/Tx6K0COYiRLXE1EqODhiBnJJi0m/7z0h4CoQjoIdCNf83CsXFlE9e26CzmPRm9BrUJbcrpu9+cvHW56uKpPKIqJTimbUHXtISuvgYloLcR+fQGHbh0BcPWMcUZmhjZVKZtLbqw72rn942Xr5nK4Swjdy87p29da4JFSHh+uH6N1+0DdEoUpXyhEh7lOb995XaFK1SIqmau8LZ3rl5bmSCXJGmQFe/g6yh07jeJgC9WH8XLdTf2UhcfUeqhdo7A07c6CzkK0wYRUuld4XI5QuXhjwRnjgkUfakdOnCqIiw84+ue5QaGxEbwX3BrHCp50G4pJZ9kKPXRlWz7USDNFy5gI2F3y5AOVxiCs7h8us1yuD23crtDXmunXyHfgEk+XPt4gijgKSBOH3Is+35q+9bpXdqGEIRHRYT+VAH4XqYbRLodvvUo8uLQ0OncmRz+0FTXyI5o++U8Bxn6UdB4oDnwJ3HVKoPPW+ef2x+4+Fq18PWJambdkEpywrNW5sOLS8L/2sinU4w/9hqxfQ89H7MhMJXmYt+NSUpx7VaRedOZUwU+1/mYrjiHYnsv8hp/Y1REW7m7NXxFu8iqkJpQPyEQYkoC3g3R1Ko0G3MojiiQsWRFcwmlQEdGVT9FEbAMYDgZiaUOMCdHwo+NJ8ZJE3EAbYrKk65ozM0aogqirn4H5n0nVCZlEQVPtz/tzA9QN5PJegNDL/DsJmIljbZ0JBNUkpKbQoZKmv75UEmVMJMpyiGmM5ITgMCuOn34BmJ8cq7DHeiqUJvqLQkJFgqDfoKU+LE/l0G02ooy+Jg9DKD3oEWHIc+Iy8vQ9hlxDFSYhxz+nIEHLxHlwJnqdKLU3WOAnNMcgp0qTNKDDpHvplZn5aSUW3RxCXGZQzLqDEncH+A/wEW9P1rAAEAAAABGqBlLXUDXw889QAZB9AAAAAAypNecAAAAADK3y6F/0T+kwi5By0AAAAJAAIAAAAAAAB42mNgZGBg3/YvjIGBk+m/y39njp1AEVRwGwCIgwZAAHjabZIDsN1QGIQ3B7m3tm3btm3btm3bttsMagxq2x3Utv3y9uQZmflmj39sVDbkQfBnTQSEgwcyJZar6ShKetqZUV2PRUPrEpaL5phKasr0aM+9ztZ2tBUHPG0u3rjfuFaaXCDdSW+S3WgwfUl7stj6hfEGMyZLyQeZGhnt3miq6yOmjgtHt0RL/QSOmkl6c36M81dwRFfckMNRWjfECaXg+PJzj+t2abRWZ3DCqPZzLzNKqtVIrfdhPd/0+34grrYRV72BXz1CU9YxV3xw31FbMv5amRjg21nlD77TFsvlVtSkVlfJUVNsREoZgIKqORYKYKL1zz3H9eUcb7V7YiHXCc/Wp/KOzIqFsjPKijfIzfWRCkio/yGu/ITUCtTVqMq4uckL0pzxB4f0nuOZpDCZTLwz8gMGMre4rK2y2I3Wcq13ZrHpvbfWFYnpWVXjiViOhqQx106Z2LokcoqMGM35ZK4PF39QnfeX6vno6rEQldn73Kbv0eGr6L4yXhgfwiO6upf45krqR/LFzomCIT5EhnmNNWq8CI/nBT1TJ3DE9D067PZU40XyiAi4vwWwjHqDPFYNUTvUh8iwL9TyZGQEgLieZ1TjpX8+451BddYF0pMk5LnV9Hg1//GSpKVB3ENJQvX+nWvaQXMxHDPJUvaiMtcy6vWMR4/UYKRUm5GS67fcT9jovsNQpAwEWKzTuXjaYmBgiILCPoZtjFKME5j4mOqZpjMBCoIHWLGhAACAy69t99WYbdvegtm2bdu2bdu2bQazgunuXMYvqDzUBJoEzYf2Q1dgCs4JD4JfIjRSB5mPHEJdtAu6Fv2ISViKVcWW4BFeE5+G3yEgwibyEsOIucRK4gIJkRJZmxxAHiBfUrmo9tQh6ir1k7boVvR8+jj9mP7BUEzEVGLqMx2Zw8xPNj/bld3BPuOac6O4Tdx73uGz8x34afwZIZNQTGgu7BTeioyYVxwm7hSfiH+kulIzabf0THomS3J7+ZgiKTWVFspjVVUXqu+1nFpJrZp2Qruq43pmvZN+Qr9noEZqVDL6GDONUyZk1jEPWmWtedYqa5t1yDpn3bKe2Zw90B5rz7SX2hvtvfZJ+6r9EIjAAVlBQVAW1AQNwWDwALwBX8Afh3AUp7Sz3Nns7HdOO9edx857t4N71X3ovnW/un890lO9wMvpzfNWedu8Q94575b3zPf83v5wf7I/31/tb/ff+9+DjKBasC+4GWaE2cLCYYWwSzg3PBrhUb1oSXQkFuJCcaO4e3wz4ROQ1EqGJrOTq8nbFEkLpM3/A4LJgRgAAAB42mNgZGBgeMDQxMDOkMTAAuYhABMDIwAtoAHVeNp1kQVKBFAQQJ/dEiYlg4TdUkra3UFjd/fuWTyGB/SBf9fm15se5gPlHFFEQXEFFNQXtCQuoLygMXEhtQXliYvY4C1xMc28Ji5hhYXEpeqHE9dKcMKD64YR+lz37HPHqfKD3Mu9fOF7rfZY+zJTLLh2tV/TwxqH6h/12dVjS+kOY7RdEQzQ6+m3zqjSttZ74/TR2sUK18adqjsh5BstV9xLj3rsK+XqxPc66jIpeteIAxa0nMv3ZJnwnHKo1tcsI8S/ebQxSD8Dru+WXMS458ZqzkSrsyJoN2tHLtLTk88R7Okbv/qLbx3Grx6DZ98HTlKH9547ntCDYAqnqTVYMsOl2qA116HUSyiZJ83vI+oRK2Me2cxSsM6snsFymnU+968M3cQ/v9n7DgZiZhEAAHjabMGDoUIBAADA6/Vt27Zt20acIY7bJrVAdwKgmJZXToFQIBBWoVKVajVq1anXoFGTZi1atWnXoVOXbj169ek3YNCQYSNGjRk3YdKUaTNmzZm3YNGSZStWrVm3YdOWbTt27dl34NCRYydOnTl34dKVazdu3bn34NGTZy9evXn34dOXbz9+/fkXERUTl5AMhUsEwcNWIAAAAMBZ/ejazn7Zrku2bdt8mefsOjejUpx4wwqcSJAhVbF6VS9eS7EvVq4799IVSjLp2K0SDR49eFKh2bxZLd56J8t7iz6Ys2DVkmUrTn20Yc26Vp/cyLZt05bPzl1K9tUX3/zw3U9lfvnjt7/+CfBfoCBngoUKESZCuD7lokSKFuPClQE72rTbdWRPh049ek3p0m1aokYjRg29eCPNtTHjL57HxsjOyMHIycjFyM3iF+rjw16al2lg4GgApV1YXEuL8rnSixLLUvWSE4tTeVMyU4tSizOLwTyuxOTSEogEf3JmUXJpblpOagWYz1mUmZcOUVSSmZMCUQQA7UuEPgAAAA==";
|
|
@@ -108,21 +108,22 @@ var cx = (...values) => {
|
|
|
108
108
|
};
|
|
109
109
|
var UI_KIT_ROOT_CLASSNAME = "ui-kit-root";
|
|
110
110
|
|
|
111
|
-
// src/foundation/color.ts
|
|
112
|
-
function withAlpha(hex, alpha) {
|
|
113
|
-
const normalized = hex.replace("#", "").trim();
|
|
114
|
-
const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
|
|
115
|
-
const red = Number.parseInt(value.slice(0, 2), 16);
|
|
116
|
-
const green = Number.parseInt(value.slice(2, 4), 16);
|
|
117
|
-
const blue = Number.parseInt(value.slice(4, 6), 16);
|
|
118
|
-
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
111
|
// src/foundation/componentState.ts
|
|
122
112
|
var DISABLED_COMPONENT_OPACITY = 0.5;
|
|
123
113
|
var DISABLED_FIELD_OPACITY = 0.7;
|
|
124
114
|
|
|
125
115
|
// src/foundation/controlSize.ts
|
|
116
|
+
var CONTROL_LEADING_ICON_SHIFT = 5;
|
|
117
|
+
var CONTROL_TEXT_VERTICAL_SHIFT = 1;
|
|
118
|
+
var SELECT_TEXT_VERTICAL_SHIFT_REDUCTION = 1;
|
|
119
|
+
var getControlTextVerticalPadding = (size, shift = CONTROL_TEXT_VERTICAL_SHIFT) => {
|
|
120
|
+
const metrics = getControlMetrics(size);
|
|
121
|
+
return {
|
|
122
|
+
top: Math.max(0, metrics.paddingY - shift),
|
|
123
|
+
bottom: metrics.paddingY + shift
|
|
124
|
+
};
|
|
125
|
+
};
|
|
126
|
+
var getSelectTextVerticalShift = () => Math.max(0, CONTROL_TEXT_VERTICAL_SHIFT - SELECT_TEXT_VERTICAL_SHIFT_REDUCTION);
|
|
126
127
|
var CONTROL_METRICS_BY_SIZE = {
|
|
127
128
|
sm: {
|
|
128
129
|
height: 30,
|
|
@@ -156,22 +157,37 @@ var CONTROL_METRICS_BY_SIZE = {
|
|
|
156
157
|
}
|
|
157
158
|
};
|
|
158
159
|
var getControlMetrics = (size) => CONTROL_METRICS_BY_SIZE[size];
|
|
160
|
+
var getControlLeadingIconInset = (size) => {
|
|
161
|
+
const metrics = getControlMetrics(size);
|
|
162
|
+
return Math.round(metrics.paddingX / 2) + CONTROL_LEADING_ICON_SHIFT;
|
|
163
|
+
};
|
|
164
|
+
var getControlLeadingAdornmentWidth = (size, iconSize) => {
|
|
165
|
+
return getControlLeadingIconInset(size) + iconSize;
|
|
166
|
+
};
|
|
167
|
+
var getTextInputPadding = (size, options = {}) => {
|
|
168
|
+
var _a, _b;
|
|
169
|
+
const metrics = getControlMetrics(size);
|
|
170
|
+
const { top, bottom } = getControlTextVerticalPadding(size);
|
|
171
|
+
const leadingPadding = (_a = options.leadingPadding) != null ? _a : metrics.paddingX;
|
|
172
|
+
const trailingPadding = (_b = options.trailingPadding) != null ? _b : metrics.paddingX;
|
|
173
|
+
return `${top}px ${trailingPadding}px ${bottom}px ${leadingPadding}px`;
|
|
174
|
+
};
|
|
175
|
+
var getSelectControlPadding = (size) => {
|
|
176
|
+
const metrics = getControlMetrics(size);
|
|
177
|
+
const { top, bottom } = getControlTextVerticalPadding(size, getSelectTextVerticalShift());
|
|
178
|
+
return `${top}px ${metrics.selectPaddingRight}px ${bottom}px ${metrics.paddingX}px`;
|
|
179
|
+
};
|
|
180
|
+
var getControlTextNudgeStyle = (shift = CONTROL_TEXT_VERTICAL_SHIFT) => ({
|
|
181
|
+
transform: `translateY(-${shift}px)`
|
|
182
|
+
});
|
|
183
|
+
var getSelectTextNudgeStyle = () => getControlTextNudgeStyle(getSelectTextVerticalShift());
|
|
159
184
|
var getSelectIndicatorOffset = (size) => getControlMetrics(size).selectIndicatorOffset;
|
|
160
185
|
|
|
161
186
|
// src/foundation/shadow.ts
|
|
162
|
-
var LIGHT_SHADOW = "#B8B8B8";
|
|
163
|
-
var DARK_SHADOW = "#181818";
|
|
164
|
-
function getComponentShadow(theme) {
|
|
165
|
-
var _a;
|
|
166
|
-
const colors = theme.colors;
|
|
167
|
-
const fallbackShadow = `${theme.title}`.toUpperCase() === "DARK" ? DARK_SHADOW : LIGHT_SHADOW;
|
|
168
|
-
const shadowColor = (_a = colors.shadow) != null ? _a : fallbackShadow;
|
|
169
|
-
return `${shadowColor} 0px 4px 5px`;
|
|
170
|
-
}
|
|
171
187
|
function getInsetBorderShadow(borderColor, options = {}) {
|
|
172
188
|
const {
|
|
173
189
|
outerShadow,
|
|
174
|
-
componentShadow = "var(--
|
|
190
|
+
componentShadow = "0px 4px 5px var(--theme-shadow)",
|
|
175
191
|
insetWidth = 1
|
|
176
192
|
} = options;
|
|
177
193
|
return [
|
|
@@ -260,29 +276,14 @@ var ROOT_THEME_VARIABLES = [
|
|
|
260
276
|
["--theme-onPrimary", "onPrimary"],
|
|
261
277
|
["--theme-onSecondary", "onSecondary"]
|
|
262
278
|
];
|
|
263
|
-
var syncUiKitThemeVariables = (
|
|
279
|
+
var syncUiKitThemeVariables = (theme) => {
|
|
264
280
|
if (typeof document === "undefined") {
|
|
265
281
|
return;
|
|
266
282
|
}
|
|
267
283
|
const rootStyle = document.documentElement.style;
|
|
268
284
|
ROOT_THEME_VARIABLES.forEach(([variableName, colorName]) => {
|
|
269
|
-
rootStyle.setProperty(variableName,
|
|
285
|
+
rootStyle.setProperty(variableName, theme.colors[colorName]);
|
|
270
286
|
});
|
|
271
|
-
rootStyle.setProperty("--ui-kit-border-soft", tokens.borderSoft);
|
|
272
|
-
rootStyle.setProperty("--ui-kit-border-strong", tokens.borderStrong);
|
|
273
|
-
rootStyle.setProperty("--ui-kit-surface-muted", tokens.surfaceMuted);
|
|
274
|
-
rootStyle.setProperty("--ui-kit-surface-raised", tokens.surfaceRaised);
|
|
275
|
-
rootStyle.setProperty("--ui-kit-overlay", tokens.overlay);
|
|
276
|
-
rootStyle.setProperty("--ui-kit-focus-ring", tokens.focusRing);
|
|
277
|
-
rootStyle.setProperty("--ui-kit-muted-text", tokens.mutedText);
|
|
278
|
-
rootStyle.setProperty("--ui-kit-component-shadow", getComponentShadow(tokens.theme));
|
|
279
|
-
rootStyle.setProperty("--ui-kit-card-bg", withAlpha(tokens.theme.colors.background, 0.7));
|
|
280
|
-
rootStyle.setProperty("--ui-kit-card-border", withAlpha(tokens.theme.colors.text, 0.5));
|
|
281
|
-
rootStyle.setProperty("--ui-kit-button-outline-hover", withAlpha(tokens.theme.colors.text, 0.08));
|
|
282
|
-
rootStyle.setProperty("--ui-kit-button-outline-active", withAlpha(tokens.theme.colors.text, 0.14));
|
|
283
|
-
rootStyle.setProperty("--ui-kit-button-ghost-border", withAlpha(tokens.theme.colors.primary, 0.5));
|
|
284
|
-
rootStyle.setProperty("--ui-kit-placeholder", withAlpha(tokens.theme.colors.text, 0.5));
|
|
285
|
-
rootStyle.setProperty("--ui-kit-negative-soft", withAlpha(tokens.theme.colors.negative, 0.12));
|
|
286
287
|
};
|
|
287
288
|
function normalizeUiKitTheme(theme) {
|
|
288
289
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
|
|
@@ -316,26 +317,13 @@ function normalizeUiKitTheme(theme) {
|
|
|
316
317
|
color: normalizedColors
|
|
317
318
|
};
|
|
318
319
|
}
|
|
319
|
-
function createUiKitThemeTokens(themeSource) {
|
|
320
|
-
const theme = normalizeUiKitTheme(themeSource);
|
|
321
|
-
return {
|
|
322
|
-
theme,
|
|
323
|
-
borderSoft: withAlpha(theme.colors.text, 0.1),
|
|
324
|
-
borderStrong: withAlpha(theme.colors.text, 0.16),
|
|
325
|
-
surfaceMuted: withAlpha(theme.colors.text, 0.04),
|
|
326
|
-
surfaceRaised: withAlpha(theme.colors.surface, 0.94),
|
|
327
|
-
overlay: withAlpha("#030712", 0.62),
|
|
328
|
-
focusRing: withAlpha(theme.colors.primary, 0.22),
|
|
329
|
-
mutedText: withAlpha(theme.colors.text, 0.72)
|
|
330
|
-
};
|
|
331
|
-
}
|
|
332
320
|
function useUiKitTheme() {
|
|
333
321
|
const activeTheme = useThemeValue();
|
|
334
|
-
const
|
|
322
|
+
const theme = useMemo(() => normalizeUiKitTheme(activeTheme), [activeTheme]);
|
|
335
323
|
useEffect(() => {
|
|
336
|
-
syncUiKitThemeVariables(
|
|
337
|
-
}, [
|
|
338
|
-
return
|
|
324
|
+
syncUiKitThemeVariables(theme);
|
|
325
|
+
}, [theme]);
|
|
326
|
+
return theme;
|
|
339
327
|
}
|
|
340
328
|
|
|
341
329
|
// src/components/Button.tsx
|
|
@@ -363,10 +351,10 @@ var BUTTON_VARIANT_CLASSNAMES = {
|
|
|
363
351
|
"text-[var(--theme-text)]",
|
|
364
352
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
365
353
|
"hover:-translate-y-[0.5px]",
|
|
366
|
-
"hover:bg-[var(--
|
|
354
|
+
"hover:bg-[var(--theme-surface)]",
|
|
367
355
|
"active:translate-y-px",
|
|
368
356
|
"active:scale-[0.985]",
|
|
369
|
-
"active:bg-[var(--
|
|
357
|
+
"active:bg-[var(--theme-secondary)]"
|
|
370
358
|
].join(" "),
|
|
371
359
|
ghost: [
|
|
372
360
|
"border-transparent",
|
|
@@ -374,13 +362,13 @@ var BUTTON_VARIANT_CLASSNAMES = {
|
|
|
374
362
|
"text-[var(--theme-text)]",
|
|
375
363
|
"shadow-none",
|
|
376
364
|
"hover:-translate-y-[0.5px]",
|
|
377
|
-
"hover:border-[var(--
|
|
365
|
+
"hover:border-[var(--theme-primary)]",
|
|
378
366
|
"hover:bg-[var(--theme-primary)]",
|
|
379
367
|
"hover:text-[var(--theme-onPrimary)]",
|
|
380
368
|
"hover:shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
381
369
|
"active:translate-y-px",
|
|
382
370
|
"active:scale-[0.985]",
|
|
383
|
-
"active:border-[var(--
|
|
371
|
+
"active:border-[var(--theme-primary)]",
|
|
384
372
|
"active:bg-[var(--theme-primary)]",
|
|
385
373
|
"active:text-[var(--theme-onPrimary)]",
|
|
386
374
|
"active:shadow-[0px_4px_5px_var(--theme-shadow)]"
|
|
@@ -443,10 +431,8 @@ function Card({
|
|
|
443
431
|
...rest,
|
|
444
432
|
className: cx(
|
|
445
433
|
UI_KIT_ROOT_CLASSNAME,
|
|
446
|
-
"rounded-[28px] border text-[var(--theme-text)]",
|
|
434
|
+
"rounded-[28px] border border-[var(--theme-secondary)] bg-[var(--theme-surface)] text-[var(--theme-text)]",
|
|
447
435
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
448
|
-
"[background:var(--ui-kit-card-bg)]",
|
|
449
|
-
"[border-color:var(--ui-kit-card-border)]",
|
|
450
436
|
padded && "p-6",
|
|
451
437
|
className
|
|
452
438
|
),
|
|
@@ -475,7 +461,7 @@ function CardSmall({
|
|
|
475
461
|
style,
|
|
476
462
|
...rest
|
|
477
463
|
}) {
|
|
478
|
-
const
|
|
464
|
+
const theme = useUiKitTheme();
|
|
479
465
|
const accentColor = color != null ? color : theme.colors.primary;
|
|
480
466
|
return /* @__PURE__ */ jsxs3(
|
|
481
467
|
"div",
|
|
@@ -485,7 +471,7 @@ function CardSmall({
|
|
|
485
471
|
UI_KIT_ROOT_CLASSNAME,
|
|
486
472
|
"relative flex min-h-20 items-center gap-4 overflow-hidden",
|
|
487
473
|
"rounded-2xl border border-solid border-[var(--ui-kit-accent)]",
|
|
488
|
-
"bg-[var(--
|
|
474
|
+
"bg-[var(--theme-surface)] pl-6 pr-6 text-[var(--theme-text)]",
|
|
489
475
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
490
476
|
className
|
|
491
477
|
),
|
|
@@ -571,7 +557,7 @@ function CheckboxIndicator({
|
|
|
571
557
|
uncheckedBackgroundColor,
|
|
572
558
|
style
|
|
573
559
|
}) {
|
|
574
|
-
const
|
|
560
|
+
const theme = useUiKitTheme();
|
|
575
561
|
const isActive = checked || indeterminate;
|
|
576
562
|
const resolvedCheckedColor = checkedColor != null ? checkedColor : theme.colors.textLight;
|
|
577
563
|
const resolvedIconColor = iconColor != null ? iconColor : theme.colors.surface;
|
|
@@ -621,7 +607,8 @@ function Checkbox({
|
|
|
621
607
|
onBlur,
|
|
622
608
|
...rest
|
|
623
609
|
}) {
|
|
624
|
-
const
|
|
610
|
+
const theme = useUiKitTheme();
|
|
611
|
+
const mutedText = theme.colors.textLight;
|
|
625
612
|
const indicatorSize = getCheckboxSize(controlSize);
|
|
626
613
|
const hasLabel = hasNodeContent(label);
|
|
627
614
|
const hasHint = hasNodeContent(hint);
|
|
@@ -629,7 +616,6 @@ function Checkbox({
|
|
|
629
616
|
const hasSecondaryContent = hasLabel && hasHint;
|
|
630
617
|
const resolvedId = id != null ? id : `ss-checkbox-${useId().replace(/:/g, "")}`;
|
|
631
618
|
const inputRef = useRef(null);
|
|
632
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
633
619
|
const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
|
|
634
620
|
const isControlled = checked !== void 0;
|
|
635
621
|
const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
|
|
@@ -661,9 +647,7 @@ function Checkbox({
|
|
|
661
647
|
{
|
|
662
648
|
className: cx(
|
|
663
649
|
"relative inline-flex shrink-0 items-center justify-center rounded-full p-0.5",
|
|
664
|
-
hasSecondaryContent ? "mt-px" : "mt-0"
|
|
665
|
-
"transition-shadow duration-150",
|
|
666
|
-
isFocused ? "shadow-[0_0_0_3px_var(--ui-kit-focus-ring)]" : "shadow-none"
|
|
650
|
+
hasSecondaryContent ? "mt-px" : "mt-0"
|
|
667
651
|
),
|
|
668
652
|
children: [
|
|
669
653
|
/* @__PURE__ */ jsx3(
|
|
@@ -683,11 +667,9 @@ function Checkbox({
|
|
|
683
667
|
onChange == null ? void 0 : onChange(event);
|
|
684
668
|
},
|
|
685
669
|
onFocus: (event) => {
|
|
686
|
-
setIsFocused(true);
|
|
687
670
|
onFocus == null ? void 0 : onFocus(event);
|
|
688
671
|
},
|
|
689
672
|
onBlur: (event) => {
|
|
690
|
-
setIsFocused(false);
|
|
691
673
|
onBlur == null ? void 0 : onBlur(event);
|
|
692
674
|
},
|
|
693
675
|
className: cx(
|
|
@@ -705,7 +687,7 @@ function Checkbox({
|
|
|
705
687
|
size: indicatorSize,
|
|
706
688
|
checkedColor: theme.colors.primary,
|
|
707
689
|
iconColor: theme.colors.onPrimary,
|
|
708
|
-
uncheckedBorderColor:
|
|
690
|
+
uncheckedBorderColor: theme.colors.text,
|
|
709
691
|
uncheckedBackgroundColor: theme.colors.surface,
|
|
710
692
|
style: disabled ? { opacity: 1 } : void 0
|
|
711
693
|
}
|
|
@@ -725,7 +707,7 @@ function Checkbox({
|
|
|
725
707
|
label,
|
|
726
708
|
required ? /* @__PURE__ */ jsx3("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
|
|
727
709
|
] }) : null,
|
|
728
|
-
hint ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] leading-[1.45] text-[var(--
|
|
710
|
+
hint ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null,
|
|
729
711
|
error ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
|
|
730
712
|
]
|
|
731
713
|
}
|
|
@@ -743,29 +725,25 @@ import { useMemo as useMemo3 } from "react";
|
|
|
743
725
|
// src/components/Modal.tsx
|
|
744
726
|
import { useEffect as useEffect3, useMemo as useMemo2, useState as useState2 } from "react";
|
|
745
727
|
import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
746
|
-
var
|
|
747
|
-
return Boolean(theme && typeof theme === "object" && "theme" in theme);
|
|
728
|
+
var isUiKitTheme = (theme) => {
|
|
729
|
+
return Boolean(theme && typeof theme === "object" && "title" in theme && "color" in theme);
|
|
748
730
|
};
|
|
749
|
-
var withResolvedModalColors = (theme) => ({
|
|
750
|
-
...theme,
|
|
751
|
-
colors: theme.theme.colors
|
|
752
|
-
});
|
|
753
731
|
var resolveTheme = (baseTheme, themeOverride) => {
|
|
754
|
-
if (
|
|
755
|
-
return
|
|
732
|
+
if (isUiKitTheme(themeOverride)) {
|
|
733
|
+
return themeOverride;
|
|
756
734
|
}
|
|
757
735
|
if (!(themeOverride == null ? void 0 : themeOverride.colors)) {
|
|
758
|
-
return
|
|
736
|
+
return baseTheme;
|
|
759
737
|
}
|
|
760
738
|
const colors = {
|
|
761
|
-
...baseTheme.
|
|
739
|
+
...baseTheme.colors,
|
|
762
740
|
...themeOverride.colors
|
|
763
741
|
};
|
|
764
|
-
return
|
|
765
|
-
...baseTheme
|
|
742
|
+
return normalizeUiKitTheme({
|
|
743
|
+
...baseTheme,
|
|
766
744
|
colors,
|
|
767
745
|
color: colors
|
|
768
|
-
})
|
|
746
|
+
});
|
|
769
747
|
};
|
|
770
748
|
var normalizeWidth = (maxWidth) => {
|
|
771
749
|
if (typeof maxWidth === "number") {
|
|
@@ -789,8 +767,7 @@ var createTitleId = (title) => {
|
|
|
789
767
|
return "smartsell-modal-dialog";
|
|
790
768
|
};
|
|
791
769
|
function ModalActionButton({
|
|
792
|
-
action
|
|
793
|
-
theme
|
|
770
|
+
action
|
|
794
771
|
}) {
|
|
795
772
|
var _a, _b;
|
|
796
773
|
const {
|
|
@@ -805,12 +782,12 @@ function ModalActionButton({
|
|
|
805
782
|
"m-0 text-center font-bold leading-[1.2]",
|
|
806
783
|
appearance === "link" ? "p-0 text-[1.05rem]" : "px-[1.15rem] py-[0.9rem] text-[1.05rem]",
|
|
807
784
|
disabled ? "cursor-not-allowed saturate-0" : "cursor-pointer",
|
|
808
|
-
appearance === "text" && "border border-transparent bg-transparent text-[var(--
|
|
809
|
-
appearance === "link" && "border-0 bg-transparent text-[var(--
|
|
810
|
-
appearance === "outlined" && "border-2 border-[var(--
|
|
811
|
-
appearance === "outlined" && "text-[var(--
|
|
812
|
-
appearance === "contained" && "border border-transparent bg-[var(--
|
|
813
|
-
appearance === "contained" && "text-[var(--
|
|
785
|
+
appearance === "text" && "border border-transparent bg-transparent text-[var(--theme-primary)] shadow-none",
|
|
786
|
+
appearance === "link" && "border-0 bg-transparent text-[var(--theme-primary)] shadow-none",
|
|
787
|
+
appearance === "outlined" && "border-2 border-[var(--theme-primary)] bg-transparent",
|
|
788
|
+
appearance === "outlined" && "text-[var(--theme-primary)]",
|
|
789
|
+
appearance === "contained" && "border border-transparent bg-[var(--theme-primary)]",
|
|
790
|
+
appearance === "contained" && "text-[var(--theme-onPrimary)]"
|
|
814
791
|
);
|
|
815
792
|
return /* @__PURE__ */ jsx4(
|
|
816
793
|
"div",
|
|
@@ -828,7 +805,10 @@ function ModalActionButton({
|
|
|
828
805
|
onClick: disabled ? void 0 : onClick,
|
|
829
806
|
disabled,
|
|
830
807
|
className: buttonClassName,
|
|
831
|
-
style: {
|
|
808
|
+
style: {
|
|
809
|
+
opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
|
|
810
|
+
boxShadow: appearance === "text" || appearance === "link" ? "none" : "0 14px 28px var(--theme-shadow)"
|
|
811
|
+
},
|
|
832
812
|
children: label
|
|
833
813
|
}
|
|
834
814
|
)
|
|
@@ -845,8 +825,8 @@ function ModalBusyIndicator({
|
|
|
845
825
|
role: "status",
|
|
846
826
|
className: "relative inline-flex h-14 w-14 items-center justify-center rounded-full",
|
|
847
827
|
style: {
|
|
848
|
-
backgroundColor:
|
|
849
|
-
boxShadow: `0 18px 36px ${
|
|
828
|
+
backgroundColor: theme.colors.surface,
|
|
829
|
+
boxShadow: `0 18px 36px ${theme.colors.shadow}`
|
|
850
830
|
},
|
|
851
831
|
children: [
|
|
852
832
|
/* @__PURE__ */ jsx4("span", { className: "ui-kit-sr-only", children: "Loading" }),
|
|
@@ -857,7 +837,7 @@ function ModalBusyIndicator({
|
|
|
857
837
|
cx: "20",
|
|
858
838
|
cy: "20",
|
|
859
839
|
r: "16",
|
|
860
|
-
stroke:
|
|
840
|
+
stroke: theme.colors.textLight,
|
|
861
841
|
strokeWidth: "4"
|
|
862
842
|
}
|
|
863
843
|
),
|
|
@@ -940,24 +920,22 @@ function UnifiedModal({
|
|
|
940
920
|
const inheritedTheme = useUiKitTheme();
|
|
941
921
|
const modalTheme = useMemo2(() => resolveTheme(inheritedTheme, theme), [inheritedTheme, theme]);
|
|
942
922
|
const modalShadow = useMemo2(() => {
|
|
943
|
-
return `0 34px 80px ${
|
|
944
|
-
}, [modalTheme.
|
|
945
|
-
const controlShadow =
|
|
946
|
-
const
|
|
947
|
-
"--
|
|
948
|
-
"--
|
|
949
|
-
"--
|
|
950
|
-
"--
|
|
951
|
-
"--
|
|
952
|
-
"--
|
|
953
|
-
"--
|
|
954
|
-
"--
|
|
955
|
-
"--
|
|
956
|
-
"--
|
|
957
|
-
"--
|
|
958
|
-
|
|
959
|
-
"--ui-kit-modal-button-shadow-contained": `0 14px 28px ${withAlpha(modalTheme.colors.primary, 0.22)}`
|
|
960
|
-
}), [controlShadow, modalShadow, modalTheme]);
|
|
923
|
+
return `0 34px 80px ${modalTheme.colors.shadow}`;
|
|
924
|
+
}, [modalTheme.colors.shadow]);
|
|
925
|
+
const controlShadow = "0px 4px 5px var(--theme-shadow)";
|
|
926
|
+
const modalThemeVariables = useMemo2(() => ({
|
|
927
|
+
"--theme-background": modalTheme.colors.background,
|
|
928
|
+
"--theme-surface": modalTheme.colors.surface,
|
|
929
|
+
"--theme-text": modalTheme.colors.text,
|
|
930
|
+
"--theme-textLight": modalTheme.colors.textLight,
|
|
931
|
+
"--theme-primary": modalTheme.colors.primary,
|
|
932
|
+
"--theme-onPrimary": modalTheme.colors.onPrimary,
|
|
933
|
+
"--theme-secondary": modalTheme.colors.secondary,
|
|
934
|
+
"--theme-onSecondary": modalTheme.colors.onSecondary,
|
|
935
|
+
"--theme-negative": modalTheme.colors.negative,
|
|
936
|
+
"--theme-warning": modalTheme.colors.warning,
|
|
937
|
+
"--theme-shadow": modalTheme.colors.shadow
|
|
938
|
+
}), [modalTheme]);
|
|
961
939
|
const [isMaximized, setIsMaximized] = useState2(maximized != null ? maximized : false);
|
|
962
940
|
const titleId = useMemo2(() => createTitleId(title), [title]);
|
|
963
941
|
const shouldDisableDismiss = disableDismiss || isBusy;
|
|
@@ -994,7 +972,7 @@ function UnifiedModal({
|
|
|
994
972
|
"h2",
|
|
995
973
|
{
|
|
996
974
|
id: titleId,
|
|
997
|
-
className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--
|
|
975
|
+
className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--theme-text)]",
|
|
998
976
|
children: title
|
|
999
977
|
}
|
|
1000
978
|
) : null;
|
|
@@ -1004,8 +982,7 @@ function UnifiedModal({
|
|
|
1004
982
|
footerContent = /* @__PURE__ */ jsx4(
|
|
1005
983
|
ModalActionButton,
|
|
1006
984
|
{
|
|
1007
|
-
action: { ...closeAction, disabled: closeAction.disabled || isBusy }
|
|
1008
|
-
theme: modalTheme
|
|
985
|
+
action: { ...closeAction, disabled: closeAction.disabled || isBusy }
|
|
1009
986
|
}
|
|
1010
987
|
);
|
|
1011
988
|
} else {
|
|
@@ -1038,8 +1015,7 @@ function UnifiedModal({
|
|
|
1038
1015
|
footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ jsx4(
|
|
1039
1016
|
ModalActionButton,
|
|
1040
1017
|
{
|
|
1041
|
-
action
|
|
1042
|
-
theme: modalTheme
|
|
1018
|
+
action
|
|
1043
1019
|
},
|
|
1044
1020
|
`modal-action-${index}`
|
|
1045
1021
|
)) : void 0;
|
|
@@ -1061,17 +1037,17 @@ function UnifiedModal({
|
|
|
1061
1037
|
},
|
|
1062
1038
|
className: cx(UI_KIT_ROOT_CLASSNAME, "fixed inset-0 z-[70] flex items-center justify-center backdrop-blur-[8px]"),
|
|
1063
1039
|
style: {
|
|
1064
|
-
...
|
|
1040
|
+
...modalThemeVariables,
|
|
1065
1041
|
padding: isMaximized ? 0 : 16,
|
|
1066
|
-
backgroundColor:
|
|
1042
|
+
backgroundColor: modalTheme.colors.shadow
|
|
1067
1043
|
},
|
|
1068
1044
|
children: /* @__PURE__ */ jsxs5(
|
|
1069
1045
|
"div",
|
|
1070
1046
|
{
|
|
1071
1047
|
className: cx(
|
|
1072
1048
|
"relative flex flex-col overflow-hidden border",
|
|
1073
|
-
"bg-[
|
|
1074
|
-
"text-[var(--
|
|
1049
|
+
"bg-[var(--theme-surface)]",
|
|
1050
|
+
"text-[var(--theme-text)]",
|
|
1075
1051
|
isMaximized ? "rounded-none" : "rounded-[30px]"
|
|
1076
1052
|
),
|
|
1077
1053
|
style: {
|
|
@@ -1080,8 +1056,8 @@ function UnifiedModal({
|
|
|
1080
1056
|
height: isMaximized ? "100vh" : void 0,
|
|
1081
1057
|
maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
|
|
1082
1058
|
minWidth: isMaximized ? "100vw" : 300,
|
|
1083
|
-
borderColor:
|
|
1084
|
-
boxShadow:
|
|
1059
|
+
borderColor: modalTheme.colors.secondary,
|
|
1060
|
+
boxShadow: modalShadow,
|
|
1085
1061
|
...contentStyle
|
|
1086
1062
|
},
|
|
1087
1063
|
children: [
|
|
@@ -1089,7 +1065,7 @@ function UnifiedModal({
|
|
|
1089
1065
|
"div",
|
|
1090
1066
|
{
|
|
1091
1067
|
className: "flex items-start justify-between gap-3 border-b px-5 pb-3 pt-[18px]",
|
|
1092
|
-
style: { borderColor:
|
|
1068
|
+
style: { borderColor: modalTheme.colors.secondary },
|
|
1093
1069
|
children: [
|
|
1094
1070
|
/* @__PURE__ */ jsx4(
|
|
1095
1071
|
"div",
|
|
@@ -1109,8 +1085,8 @@ function UnifiedModal({
|
|
|
1109
1085
|
title: isMaximized ? "Minimize" : "Maximize",
|
|
1110
1086
|
type: "button",
|
|
1111
1087
|
onClick: () => setIsMaximized((current) => !current),
|
|
1112
|
-
className: "m-0 inline-flex h-[30px] w-[30px] shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full border bg-transparent p-0 text-[var(--
|
|
1113
|
-
style: { borderColor:
|
|
1088
|
+
className: "m-0 inline-flex h-[30px] w-[30px] shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full border bg-transparent p-0 text-[var(--theme-text)] leading-none",
|
|
1089
|
+
style: { borderColor: modalTheme.colors.secondary, boxShadow: controlShadow },
|
|
1114
1090
|
children: isMaximized ? /* @__PURE__ */ jsx4(MinimizeIcon, {}) : /* @__PURE__ */ jsx4(MaximizeIcon, {})
|
|
1115
1091
|
}
|
|
1116
1092
|
) : null,
|
|
@@ -1122,12 +1098,12 @@ function UnifiedModal({
|
|
|
1122
1098
|
onClick: shouldDisableDismiss ? void 0 : onClose,
|
|
1123
1099
|
className: cx(
|
|
1124
1100
|
"flex h-[30px] w-[30px] items-center justify-center rounded-full border",
|
|
1125
|
-
"bg-transparent text-[20px] font-bold text-[var(--
|
|
1126
|
-
"shadow-[var(--ui-kit-modal-control-shadow)]",
|
|
1101
|
+
"bg-transparent text-[20px] font-bold text-[var(--theme-text)]",
|
|
1127
1102
|
shouldDisableDismiss ? "cursor-not-allowed" : "cursor-pointer"
|
|
1128
1103
|
),
|
|
1129
1104
|
style: {
|
|
1130
|
-
borderColor:
|
|
1105
|
+
borderColor: modalTheme.colors.secondary,
|
|
1106
|
+
boxShadow: controlShadow,
|
|
1131
1107
|
opacity: shouldDisableDismiss ? DISABLED_COMPONENT_OPACITY : 1
|
|
1132
1108
|
},
|
|
1133
1109
|
children: "\xD7"
|
|
@@ -1156,7 +1132,8 @@ function UnifiedModal({
|
|
|
1156
1132
|
isBusy ? /* @__PURE__ */ jsx4(
|
|
1157
1133
|
"div",
|
|
1158
1134
|
{
|
|
1159
|
-
className: "absolute inset-0 flex items-center justify-center
|
|
1135
|
+
className: "absolute inset-0 flex items-center justify-center backdrop-blur-[2px]",
|
|
1136
|
+
style: { backgroundColor: modalTheme.colors.background },
|
|
1160
1137
|
children: /* @__PURE__ */ jsx4(ModalBusyIndicator, { theme: modalTheme })
|
|
1161
1138
|
}
|
|
1162
1139
|
) : null
|
|
@@ -1167,7 +1144,7 @@ function UnifiedModal({
|
|
|
1167
1144
|
"div",
|
|
1168
1145
|
{
|
|
1169
1146
|
className: "flex justify-end gap-2.5 border-t px-5 pb-4 pt-3",
|
|
1170
|
-
style: { borderColor:
|
|
1147
|
+
style: { borderColor: modalTheme.colors.secondary },
|
|
1171
1148
|
children: footerContent
|
|
1172
1149
|
}
|
|
1173
1150
|
) : null
|
|
@@ -1313,6 +1290,218 @@ var FIELD_PADDING_X_CLASSNAMES = {
|
|
|
1313
1290
|
lg: "px-4"
|
|
1314
1291
|
};
|
|
1315
1292
|
var getPasswordToggleMetrics = (size) => PASSWORD_TOGGLE_METRICS_BY_SIZE[size];
|
|
1293
|
+
var LOGIN_VALIDATION_ERROR = "Spaces are not allowed.";
|
|
1294
|
+
var EMAIL_VALIDATION_ERROR = "Enter a valid email address.";
|
|
1295
|
+
var EMAIL_VALUE_PATTERN = /^[^\s@]+@[^\s@]+$/;
|
|
1296
|
+
var SPACE_PATTERN = /\s/;
|
|
1297
|
+
var isRenderableNode = (node) => node !== null && node !== void 0 && node !== false;
|
|
1298
|
+
var getInputValidationError = (type, value) => {
|
|
1299
|
+
if (!value) {
|
|
1300
|
+
return void 0;
|
|
1301
|
+
}
|
|
1302
|
+
if (type === "login") {
|
|
1303
|
+
return SPACE_PATTERN.test(value) ? LOGIN_VALIDATION_ERROR : void 0;
|
|
1304
|
+
}
|
|
1305
|
+
if (type === "email") {
|
|
1306
|
+
return EMAIL_VALUE_PATTERN.test(value) ? void 0 : EMAIL_VALIDATION_ERROR;
|
|
1307
|
+
}
|
|
1308
|
+
return void 0;
|
|
1309
|
+
};
|
|
1310
|
+
function EmailIcon({ size }) {
|
|
1311
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1312
|
+
/* @__PURE__ */ jsx6(
|
|
1313
|
+
"path",
|
|
1314
|
+
{
|
|
1315
|
+
d: "M3.75 6.25A1.875 1.875 0 0 1 5.625 4.375h8.75A1.875 1.875 0 0 1 16.25 6.25v7.5a1.875 1.875 0 0 1-1.875 1.875h-8.75A1.875 1.875 0 0 1 3.75 13.75v-7.5Z",
|
|
1316
|
+
stroke: "currentColor",
|
|
1317
|
+
strokeWidth: "1.6",
|
|
1318
|
+
strokeLinecap: "round",
|
|
1319
|
+
strokeLinejoin: "round"
|
|
1320
|
+
}
|
|
1321
|
+
),
|
|
1322
|
+
/* @__PURE__ */ jsx6(
|
|
1323
|
+
"path",
|
|
1324
|
+
{
|
|
1325
|
+
d: "M4.375 6.25 10 10.625l5.625-4.375",
|
|
1326
|
+
stroke: "currentColor",
|
|
1327
|
+
strokeWidth: "1.6",
|
|
1328
|
+
strokeLinecap: "round",
|
|
1329
|
+
strokeLinejoin: "round"
|
|
1330
|
+
}
|
|
1331
|
+
)
|
|
1332
|
+
] });
|
|
1333
|
+
}
|
|
1334
|
+
function LoginIcon({ size }) {
|
|
1335
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1336
|
+
/* @__PURE__ */ jsx6("circle", { cx: "10", cy: "6.25", r: "3", stroke: "currentColor", strokeWidth: "1.6" }),
|
|
1337
|
+
/* @__PURE__ */ jsx6(
|
|
1338
|
+
"path",
|
|
1339
|
+
{
|
|
1340
|
+
d: "M4.75 16a5.25 5.25 0 0 1 10.5 0",
|
|
1341
|
+
stroke: "currentColor",
|
|
1342
|
+
strokeWidth: "1.6",
|
|
1343
|
+
strokeLinecap: "round"
|
|
1344
|
+
}
|
|
1345
|
+
)
|
|
1346
|
+
] });
|
|
1347
|
+
}
|
|
1348
|
+
function FileIcon({ size, selected }) {
|
|
1349
|
+
return /* @__PURE__ */ jsx6("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1350
|
+
/* @__PURE__ */ jsx6(
|
|
1351
|
+
"path",
|
|
1352
|
+
{
|
|
1353
|
+
d: "M5.5 6.25h9",
|
|
1354
|
+
stroke: "currentColor",
|
|
1355
|
+
strokeWidth: "1.6",
|
|
1356
|
+
strokeLinecap: "round"
|
|
1357
|
+
}
|
|
1358
|
+
),
|
|
1359
|
+
/* @__PURE__ */ jsx6(
|
|
1360
|
+
"path",
|
|
1361
|
+
{
|
|
1362
|
+
d: "M7.25 6.25V5.25A1.5 1.5 0 0 1 8.75 3.75h2.5a1.5 1.5 0 0 1 1.5 1.5v1",
|
|
1363
|
+
stroke: "currentColor",
|
|
1364
|
+
strokeWidth: "1.6",
|
|
1365
|
+
strokeLinecap: "round",
|
|
1366
|
+
strokeLinejoin: "round"
|
|
1367
|
+
}
|
|
1368
|
+
),
|
|
1369
|
+
/* @__PURE__ */ jsx6(
|
|
1370
|
+
"path",
|
|
1371
|
+
{
|
|
1372
|
+
d: "M7.75 8.25v5.5",
|
|
1373
|
+
stroke: "currentColor",
|
|
1374
|
+
strokeWidth: "1.6",
|
|
1375
|
+
strokeLinecap: "round"
|
|
1376
|
+
}
|
|
1377
|
+
),
|
|
1378
|
+
/* @__PURE__ */ jsx6(
|
|
1379
|
+
"path",
|
|
1380
|
+
{
|
|
1381
|
+
d: "M10 8.25v5.5",
|
|
1382
|
+
stroke: "currentColor",
|
|
1383
|
+
strokeWidth: "1.6",
|
|
1384
|
+
strokeLinecap: "round"
|
|
1385
|
+
}
|
|
1386
|
+
),
|
|
1387
|
+
/* @__PURE__ */ jsx6(
|
|
1388
|
+
"path",
|
|
1389
|
+
{
|
|
1390
|
+
d: "M12.25 8.25v5.5",
|
|
1391
|
+
stroke: "currentColor",
|
|
1392
|
+
strokeWidth: "1.6",
|
|
1393
|
+
strokeLinecap: "round"
|
|
1394
|
+
}
|
|
1395
|
+
),
|
|
1396
|
+
/* @__PURE__ */ jsx6(
|
|
1397
|
+
"path",
|
|
1398
|
+
{
|
|
1399
|
+
d: "M6.75 6.25l.5 8a1.5 1.5 0 0 0 1.497 1.406h2.506A1.5 1.5 0 0 0 12.75 14.25l.5-8",
|
|
1400
|
+
stroke: "currentColor",
|
|
1401
|
+
strokeWidth: "1.6",
|
|
1402
|
+
strokeLinecap: "round",
|
|
1403
|
+
strokeLinejoin: "round"
|
|
1404
|
+
}
|
|
1405
|
+
)
|
|
1406
|
+
] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1407
|
+
/* @__PURE__ */ jsx6(
|
|
1408
|
+
"path",
|
|
1409
|
+
{
|
|
1410
|
+
d: "M6.25 2.5h5.652l4.348 4.348V15A2.5 2.5 0 0 1 13.75 17.5h-7.5A2.5 2.5 0 0 1 3.75 15V5A2.5 2.5 0 0 1 6.25 2.5Z",
|
|
1411
|
+
stroke: "currentColor",
|
|
1412
|
+
strokeWidth: "1.6",
|
|
1413
|
+
strokeLinecap: "round",
|
|
1414
|
+
strokeLinejoin: "round"
|
|
1415
|
+
}
|
|
1416
|
+
),
|
|
1417
|
+
/* @__PURE__ */ jsx6(
|
|
1418
|
+
"path",
|
|
1419
|
+
{
|
|
1420
|
+
d: "M11.875 2.75V6.25H15.375",
|
|
1421
|
+
stroke: "currentColor",
|
|
1422
|
+
strokeWidth: "1.6",
|
|
1423
|
+
strokeLinecap: "round",
|
|
1424
|
+
strokeLinejoin: "round"
|
|
1425
|
+
}
|
|
1426
|
+
),
|
|
1427
|
+
/* @__PURE__ */ jsx6(
|
|
1428
|
+
"path",
|
|
1429
|
+
{
|
|
1430
|
+
d: "M7.5 10h5",
|
|
1431
|
+
stroke: "currentColor",
|
|
1432
|
+
strokeWidth: "1.6",
|
|
1433
|
+
strokeLinecap: "round"
|
|
1434
|
+
}
|
|
1435
|
+
),
|
|
1436
|
+
/* @__PURE__ */ jsx6(
|
|
1437
|
+
"path",
|
|
1438
|
+
{
|
|
1439
|
+
d: "M7.5 13h5",
|
|
1440
|
+
stroke: "currentColor",
|
|
1441
|
+
strokeWidth: "1.6",
|
|
1442
|
+
strokeLinecap: "round"
|
|
1443
|
+
}
|
|
1444
|
+
)
|
|
1445
|
+
] }) });
|
|
1446
|
+
}
|
|
1447
|
+
function PasswordVisibleIcon({ size }) {
|
|
1448
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1449
|
+
/* @__PURE__ */ jsx6(
|
|
1450
|
+
"path",
|
|
1451
|
+
{
|
|
1452
|
+
d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
|
|
1453
|
+
stroke: "currentColor",
|
|
1454
|
+
strokeWidth: "1.8",
|
|
1455
|
+
strokeLinecap: "round",
|
|
1456
|
+
strokeLinejoin: "round"
|
|
1457
|
+
}
|
|
1458
|
+
),
|
|
1459
|
+
/* @__PURE__ */ jsx6(
|
|
1460
|
+
"path",
|
|
1461
|
+
{
|
|
1462
|
+
d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
|
|
1463
|
+
stroke: "currentColor",
|
|
1464
|
+
strokeWidth: "1.8",
|
|
1465
|
+
strokeLinecap: "round",
|
|
1466
|
+
strokeLinejoin: "round"
|
|
1467
|
+
}
|
|
1468
|
+
),
|
|
1469
|
+
/* @__PURE__ */ jsx6(
|
|
1470
|
+
"path",
|
|
1471
|
+
{
|
|
1472
|
+
d: "M10 11.25v1.5",
|
|
1473
|
+
stroke: "currentColor",
|
|
1474
|
+
strokeWidth: "1.8",
|
|
1475
|
+
strokeLinecap: "round"
|
|
1476
|
+
}
|
|
1477
|
+
)
|
|
1478
|
+
] });
|
|
1479
|
+
}
|
|
1480
|
+
function PasswordHiddenIcon({ size }) {
|
|
1481
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1482
|
+
/* @__PURE__ */ jsx6(
|
|
1483
|
+
"path",
|
|
1484
|
+
{
|
|
1485
|
+
d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
|
|
1486
|
+
stroke: "currentColor",
|
|
1487
|
+
strokeWidth: "1.8",
|
|
1488
|
+
strokeLinecap: "round",
|
|
1489
|
+
strokeLinejoin: "round"
|
|
1490
|
+
}
|
|
1491
|
+
),
|
|
1492
|
+
/* @__PURE__ */ jsx6(
|
|
1493
|
+
"path",
|
|
1494
|
+
{
|
|
1495
|
+
d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
|
|
1496
|
+
stroke: "currentColor",
|
|
1497
|
+
strokeWidth: "1.8",
|
|
1498
|
+
strokeLinecap: "round",
|
|
1499
|
+
strokeLinejoin: "round"
|
|
1500
|
+
}
|
|
1501
|
+
),
|
|
1502
|
+
/* @__PURE__ */ jsx6("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
|
|
1503
|
+
] });
|
|
1504
|
+
}
|
|
1316
1505
|
function ControlFrame({
|
|
1317
1506
|
label,
|
|
1318
1507
|
hint,
|
|
@@ -1341,7 +1530,7 @@ function ControlFrame({
|
|
|
1341
1530
|
]
|
|
1342
1531
|
}
|
|
1343
1532
|
) : null,
|
|
1344
|
-
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--
|
|
1533
|
+
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null
|
|
1345
1534
|
] }) : null,
|
|
1346
1535
|
children,
|
|
1347
1536
|
error ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
|
|
@@ -1353,7 +1542,7 @@ function ControlFrame({
|
|
|
1353
1542
|
label,
|
|
1354
1543
|
required ? /* @__PURE__ */ jsx6("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
|
|
1355
1544
|
] }) : null,
|
|
1356
|
-
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--
|
|
1545
|
+
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null
|
|
1357
1546
|
] }) : null,
|
|
1358
1547
|
children,
|
|
1359
1548
|
error ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
|
|
@@ -1367,6 +1556,7 @@ function Input({
|
|
|
1367
1556
|
className,
|
|
1368
1557
|
showPasswordToggle = true,
|
|
1369
1558
|
fileButtonLabel,
|
|
1559
|
+
icon,
|
|
1370
1560
|
id,
|
|
1371
1561
|
disabled,
|
|
1372
1562
|
placeholder,
|
|
@@ -1383,36 +1573,58 @@ function Input({
|
|
|
1383
1573
|
const fileInputRef = useRef2(null);
|
|
1384
1574
|
const [isPasswordVisible, setIsPasswordVisible] = useState3(false);
|
|
1385
1575
|
const [selectedFileNames, setSelectedFileNames] = useState3([]);
|
|
1576
|
+
const [validationError, setValidationError] = useState3();
|
|
1386
1577
|
const isPasswordField = type === "password";
|
|
1387
1578
|
const isEmailField = type === "email";
|
|
1579
|
+
const isLoginField = type === "login";
|
|
1388
1580
|
const isFileField = type === "file";
|
|
1389
1581
|
const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
|
|
1390
|
-
const resolvedType = canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
|
|
1582
|
+
const resolvedType = isLoginField ? "text" : canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
|
|
1391
1583
|
useEffect4(() => {
|
|
1392
1584
|
if (!isFileField) {
|
|
1393
1585
|
setSelectedFileNames([]);
|
|
1394
1586
|
}
|
|
1395
1587
|
}, [isFileField]);
|
|
1588
|
+
useEffect4(() => {
|
|
1589
|
+
if (!isEmailField && !isLoginField) {
|
|
1590
|
+
setValidationError(void 0);
|
|
1591
|
+
}
|
|
1592
|
+
}, [isEmailField, isLoginField]);
|
|
1593
|
+
useEffect4(() => {
|
|
1594
|
+
if (typeof rest.value !== "string") {
|
|
1595
|
+
return;
|
|
1596
|
+
}
|
|
1597
|
+
setValidationError(getInputValidationError(type, rest.value));
|
|
1598
|
+
}, [rest.value, type]);
|
|
1396
1599
|
const hasFileButtonLabel = typeof fileButtonLabel === "string" ? fileButtonLabel.trim().length > 0 : fileButtonLabel != null;
|
|
1397
1600
|
const hasSelectedFiles = selectedFileNames.length > 0;
|
|
1398
1601
|
const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
|
|
1399
1602
|
const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
|
|
1400
1603
|
const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
|
|
1604
|
+
const leadingIconInset = getControlLeadingIconInset(controlSize);
|
|
1605
|
+
const controlTextNudgeStyle = getControlTextNudgeStyle();
|
|
1606
|
+
const hasExternalError = error !== void 0 && error !== null && error !== "";
|
|
1607
|
+
const resolvedError = hasExternalError ? error : validationError;
|
|
1608
|
+
const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
|
|
1401
1609
|
const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
|
|
1402
1610
|
const fileIconSize = Math.max(controlMetrics.fontSize + 3, 16);
|
|
1403
|
-
const fileTriggerWidth =
|
|
1404
|
-
const
|
|
1405
|
-
const passwordAdornmentWidth =
|
|
1406
|
-
const
|
|
1611
|
+
const fileTriggerWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
|
|
1612
|
+
const leadingAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
|
|
1613
|
+
const passwordAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, passwordLockIconSize);
|
|
1614
|
+
const defaultLeadingIcon = isEmailField ? /* @__PURE__ */ jsx6(EmailIcon, { size: fileIconSize }) : isLoginField ? /* @__PURE__ */ jsx6(LoginIcon, { size: fileIconSize }) : null;
|
|
1615
|
+
const resolvedLeadingIcon = icon != null ? icon : defaultLeadingIcon;
|
|
1616
|
+
const hasLeadingIcon = isRenderableNode(resolvedLeadingIcon);
|
|
1617
|
+
const resolvedFileIcon = icon != null ? icon : /* @__PURE__ */ jsx6(FileIcon, { size: fileIconSize, selected: hasSelectedFiles });
|
|
1618
|
+
const resolvedPasswordIcon = icon != null ? icon : isPasswordVisible ? /* @__PURE__ */ jsx6(PasswordVisibleIcon, { size: passwordLockIconSize }) : /* @__PURE__ */ jsx6(PasswordHiddenIcon, { size: passwordLockIconSize });
|
|
1407
1619
|
const fieldBaseClassName = cx(
|
|
1408
1620
|
UI_KIT_ROOT_CLASSNAME,
|
|
1409
1621
|
"w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
|
|
1410
1622
|
"text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
|
|
1411
|
-
"duration-150 placeholder:text-[var(--
|
|
1623
|
+
"duration-150 placeholder:text-[var(--theme-textLight)]",
|
|
1412
1624
|
FIELD_HEIGHT_CLASSNAMES[controlSize],
|
|
1413
1625
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1414
|
-
|
|
1415
|
-
disabled ? "cursor-not-allowed" : "cursor-text"
|
|
1626
|
+
hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
1627
|
+
disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
|
|
1416
1628
|
);
|
|
1417
1629
|
const adornedFieldClassName = cx(
|
|
1418
1630
|
UI_KIT_ROOT_CLASSNAME,
|
|
@@ -1422,16 +1634,22 @@ function Input({
|
|
|
1422
1634
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
1423
1635
|
FIELD_HEIGHT_CLASSNAMES[controlSize],
|
|
1424
1636
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1425
|
-
|
|
1426
|
-
disabled ? "
|
|
1637
|
+
hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
1638
|
+
disabled ? "opacity-70" : null
|
|
1427
1639
|
);
|
|
1428
1640
|
const adornedInputClassName = cx(
|
|
1429
1641
|
"h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
|
|
1430
|
-
"placeholder:text-[var(--
|
|
1642
|
+
"placeholder:text-[var(--theme-textLight)]",
|
|
1431
1643
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1432
1644
|
disabled ? "cursor-not-allowed" : "cursor-text"
|
|
1433
1645
|
);
|
|
1434
|
-
const adornmentColorClassName =
|
|
1646
|
+
const adornmentColorClassName = hasResolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
|
|
1647
|
+
const handleValidatedInputChange = (event) => {
|
|
1648
|
+
if (isEmailField || isLoginField) {
|
|
1649
|
+
setValidationError(getInputValidationError(type, event.target.value));
|
|
1650
|
+
}
|
|
1651
|
+
onChange == null ? void 0 : onChange(event);
|
|
1652
|
+
};
|
|
1435
1653
|
const openFilePicker = () => {
|
|
1436
1654
|
var _a;
|
|
1437
1655
|
if (disabled) {
|
|
@@ -1473,7 +1691,7 @@ function Input({
|
|
|
1473
1691
|
disabled ? "cursor-not-allowed" : "cursor-pointer",
|
|
1474
1692
|
className
|
|
1475
1693
|
),
|
|
1476
|
-
style
|
|
1694
|
+
style,
|
|
1477
1695
|
children: [
|
|
1478
1696
|
/* @__PURE__ */ jsxs7(
|
|
1479
1697
|
"button",
|
|
@@ -1493,7 +1711,12 @@ function Input({
|
|
|
1493
1711
|
style: {
|
|
1494
1712
|
gap: showUploadLabel ? leadingContentGap : 0,
|
|
1495
1713
|
width: showUploadLabel ? void 0 : fileTriggerWidth,
|
|
1496
|
-
|
|
1714
|
+
boxSizing: "border-box",
|
|
1715
|
+
justifyContent: "flex-start",
|
|
1716
|
+
paddingTop: 0,
|
|
1717
|
+
paddingRight: showUploadLabel ? controlMetrics.buttonPaddingX : 0,
|
|
1718
|
+
paddingBottom: 0,
|
|
1719
|
+
paddingLeft: leadingIconInset
|
|
1497
1720
|
},
|
|
1498
1721
|
children: [
|
|
1499
1722
|
/* @__PURE__ */ jsx6(
|
|
@@ -1504,106 +1727,10 @@ function Input({
|
|
|
1504
1727
|
adornmentColorClassName
|
|
1505
1728
|
),
|
|
1506
1729
|
"aria-hidden": "true",
|
|
1507
|
-
children:
|
|
1508
|
-
/* @__PURE__ */ jsx6(
|
|
1509
|
-
"path",
|
|
1510
|
-
{
|
|
1511
|
-
d: "M5.5 6.25h9",
|
|
1512
|
-
stroke: "currentColor",
|
|
1513
|
-
strokeWidth: "1.6",
|
|
1514
|
-
strokeLinecap: "round"
|
|
1515
|
-
}
|
|
1516
|
-
),
|
|
1517
|
-
/* @__PURE__ */ jsx6(
|
|
1518
|
-
"path",
|
|
1519
|
-
{
|
|
1520
|
-
d: "M7.25 6.25V5.25A1.5 1.5 0 0 1 8.75 3.75h2.5a1.5 1.5 0 0 1 1.5 1.5v1",
|
|
1521
|
-
stroke: "currentColor",
|
|
1522
|
-
strokeWidth: "1.6",
|
|
1523
|
-
strokeLinecap: "round",
|
|
1524
|
-
strokeLinejoin: "round"
|
|
1525
|
-
}
|
|
1526
|
-
),
|
|
1527
|
-
/* @__PURE__ */ jsx6(
|
|
1528
|
-
"path",
|
|
1529
|
-
{
|
|
1530
|
-
d: "M7.75 8.25v5.5",
|
|
1531
|
-
stroke: "currentColor",
|
|
1532
|
-
strokeWidth: "1.6",
|
|
1533
|
-
strokeLinecap: "round"
|
|
1534
|
-
}
|
|
1535
|
-
),
|
|
1536
|
-
/* @__PURE__ */ jsx6(
|
|
1537
|
-
"path",
|
|
1538
|
-
{
|
|
1539
|
-
d: "M10 8.25v5.5",
|
|
1540
|
-
stroke: "currentColor",
|
|
1541
|
-
strokeWidth: "1.6",
|
|
1542
|
-
strokeLinecap: "round"
|
|
1543
|
-
}
|
|
1544
|
-
),
|
|
1545
|
-
/* @__PURE__ */ jsx6(
|
|
1546
|
-
"path",
|
|
1547
|
-
{
|
|
1548
|
-
d: "M12.25 8.25v5.5",
|
|
1549
|
-
stroke: "currentColor",
|
|
1550
|
-
strokeWidth: "1.6",
|
|
1551
|
-
strokeLinecap: "round"
|
|
1552
|
-
}
|
|
1553
|
-
),
|
|
1554
|
-
/* @__PURE__ */ jsx6(
|
|
1555
|
-
"path",
|
|
1556
|
-
{
|
|
1557
|
-
d: "M6.75 6.25l.5 8a1.5 1.5 0 0 0 1.497 1.406h2.506A1.5 1.5 0 0 0 12.75 14.25l.5-8",
|
|
1558
|
-
stroke: "currentColor",
|
|
1559
|
-
strokeWidth: "1.6",
|
|
1560
|
-
strokeLinecap: "round",
|
|
1561
|
-
strokeLinejoin: "round"
|
|
1562
|
-
}
|
|
1563
|
-
)
|
|
1564
|
-
] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1565
|
-
/* @__PURE__ */ jsx6(
|
|
1566
|
-
"path",
|
|
1567
|
-
{
|
|
1568
|
-
d: "M6.25 2.5h5.652l4.348 4.348V15A2.5 2.5 0 0 1 13.75 17.5h-7.5A2.5 2.5 0 0 1 3.75 15V5A2.5 2.5 0 0 1 6.25 2.5Z",
|
|
1569
|
-
stroke: "currentColor",
|
|
1570
|
-
strokeWidth: "1.6",
|
|
1571
|
-
strokeLinecap: "round",
|
|
1572
|
-
strokeLinejoin: "round"
|
|
1573
|
-
}
|
|
1574
|
-
),
|
|
1575
|
-
/* @__PURE__ */ jsx6(
|
|
1576
|
-
"path",
|
|
1577
|
-
{
|
|
1578
|
-
d: "M11.875 2.75V6.25H15.375",
|
|
1579
|
-
stroke: "currentColor",
|
|
1580
|
-
strokeWidth: "1.6",
|
|
1581
|
-
strokeLinecap: "round",
|
|
1582
|
-
strokeLinejoin: "round"
|
|
1583
|
-
}
|
|
1584
|
-
),
|
|
1585
|
-
/* @__PURE__ */ jsx6(
|
|
1586
|
-
"path",
|
|
1587
|
-
{
|
|
1588
|
-
d: "M7.5 10h5",
|
|
1589
|
-
stroke: "currentColor",
|
|
1590
|
-
strokeWidth: "1.6",
|
|
1591
|
-
strokeLinecap: "round"
|
|
1592
|
-
}
|
|
1593
|
-
),
|
|
1594
|
-
/* @__PURE__ */ jsx6(
|
|
1595
|
-
"path",
|
|
1596
|
-
{
|
|
1597
|
-
d: "M7.5 13h5",
|
|
1598
|
-
stroke: "currentColor",
|
|
1599
|
-
strokeWidth: "1.6",
|
|
1600
|
-
strokeLinecap: "round"
|
|
1601
|
-
}
|
|
1602
|
-
)
|
|
1603
|
-
] }) })
|
|
1730
|
+
children: resolvedFileIcon
|
|
1604
1731
|
}
|
|
1605
1732
|
),
|
|
1606
|
-
showUploadLabel ? fileButtonLabel : null
|
|
1733
|
+
showUploadLabel ? /* @__PURE__ */ jsx6("span", { style: controlTextNudgeStyle, children: fileButtonLabel }) : null
|
|
1607
1734
|
]
|
|
1608
1735
|
}
|
|
1609
1736
|
),
|
|
@@ -1626,9 +1753,12 @@ function Input({
|
|
|
1626
1753
|
className: cx(
|
|
1627
1754
|
"flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
|
|
1628
1755
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1629
|
-
hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--
|
|
1756
|
+
hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
|
|
1630
1757
|
),
|
|
1631
|
-
style: {
|
|
1758
|
+
style: {
|
|
1759
|
+
padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px`,
|
|
1760
|
+
...controlTextNudgeStyle
|
|
1761
|
+
},
|
|
1632
1762
|
children: fileSelectionText
|
|
1633
1763
|
}
|
|
1634
1764
|
) : null
|
|
@@ -1637,43 +1767,38 @@ function Input({
|
|
|
1637
1767
|
]
|
|
1638
1768
|
}
|
|
1639
1769
|
)
|
|
1640
|
-
] }) :
|
|
1770
|
+
] }) : canTogglePasswordVisibility ? /* @__PURE__ */ jsxs7(
|
|
1641
1771
|
"div",
|
|
1642
1772
|
{
|
|
1643
1773
|
className: cx(adornedFieldClassName, className),
|
|
1644
|
-
style
|
|
1774
|
+
style,
|
|
1645
1775
|
children: [
|
|
1646
1776
|
/* @__PURE__ */ jsx6(
|
|
1647
|
-
"
|
|
1777
|
+
"button",
|
|
1648
1778
|
{
|
|
1779
|
+
type: "button",
|
|
1780
|
+
"aria-label": isPasswordVisible ? "Hide password" : "Show password",
|
|
1781
|
+
"aria-pressed": isPasswordVisible,
|
|
1782
|
+
disabled,
|
|
1783
|
+
onMouseDown: (event) => {
|
|
1784
|
+
event.preventDefault();
|
|
1785
|
+
},
|
|
1786
|
+
onClick: () => {
|
|
1787
|
+
setIsPasswordVisible((currentValue) => !currentValue);
|
|
1788
|
+
},
|
|
1649
1789
|
className: cx(
|
|
1650
|
-
"inline-flex shrink-0 self-stretch items-center justify-center
|
|
1651
|
-
|
|
1790
|
+
"inline-flex shrink-0 self-stretch items-center justify-center border-0",
|
|
1791
|
+
"bg-transparent p-0 appearance-none",
|
|
1792
|
+
adornmentColorClassName,
|
|
1793
|
+
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
1652
1794
|
),
|
|
1653
|
-
style: {
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
stroke: "currentColor",
|
|
1661
|
-
strokeWidth: "1.6",
|
|
1662
|
-
strokeLinecap: "round",
|
|
1663
|
-
strokeLinejoin: "round"
|
|
1664
|
-
}
|
|
1665
|
-
),
|
|
1666
|
-
/* @__PURE__ */ jsx6(
|
|
1667
|
-
"path",
|
|
1668
|
-
{
|
|
1669
|
-
d: "M4.375 6.25 10 10.625l5.625-4.375",
|
|
1670
|
-
stroke: "currentColor",
|
|
1671
|
-
strokeWidth: "1.6",
|
|
1672
|
-
strokeLinecap: "round",
|
|
1673
|
-
strokeLinejoin: "round"
|
|
1674
|
-
}
|
|
1675
|
-
)
|
|
1676
|
-
] })
|
|
1795
|
+
style: {
|
|
1796
|
+
width: passwordAdornmentWidth,
|
|
1797
|
+
boxSizing: "border-box",
|
|
1798
|
+
justifyContent: "flex-start",
|
|
1799
|
+
paddingLeft: leadingIconInset
|
|
1800
|
+
},
|
|
1801
|
+
children: resolvedPasswordIcon
|
|
1677
1802
|
}
|
|
1678
1803
|
),
|
|
1679
1804
|
/* @__PURE__ */ jsx6(
|
|
@@ -1684,112 +1809,37 @@ function Input({
|
|
|
1684
1809
|
placeholder,
|
|
1685
1810
|
type: resolvedType,
|
|
1686
1811
|
disabled,
|
|
1687
|
-
onChange,
|
|
1812
|
+
onChange: handleValidatedInputChange,
|
|
1688
1813
|
className: cx(adornedInputClassName, className),
|
|
1689
|
-
|
|
1814
|
+
"aria-invalid": hasResolvedError,
|
|
1815
|
+
style: {
|
|
1816
|
+
padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
|
|
1817
|
+
}
|
|
1690
1818
|
}
|
|
1691
1819
|
)
|
|
1692
1820
|
]
|
|
1693
1821
|
}
|
|
1694
|
-
) :
|
|
1822
|
+
) : hasLeadingIcon ? /* @__PURE__ */ jsxs7(
|
|
1695
1823
|
"div",
|
|
1696
1824
|
{
|
|
1697
1825
|
className: cx(adornedFieldClassName, className),
|
|
1698
|
-
style
|
|
1826
|
+
style,
|
|
1699
1827
|
children: [
|
|
1700
1828
|
/* @__PURE__ */ jsx6(
|
|
1701
|
-
"
|
|
1829
|
+
"span",
|
|
1702
1830
|
{
|
|
1703
|
-
type: "button",
|
|
1704
|
-
"aria-label": isPasswordVisible ? "Hide password" : "Show password",
|
|
1705
|
-
"aria-pressed": isPasswordVisible,
|
|
1706
|
-
disabled,
|
|
1707
|
-
onMouseDown: (event) => {
|
|
1708
|
-
event.preventDefault();
|
|
1709
|
-
},
|
|
1710
|
-
onClick: () => {
|
|
1711
|
-
setIsPasswordVisible((currentValue) => !currentValue);
|
|
1712
|
-
},
|
|
1713
1831
|
className: cx(
|
|
1714
|
-
"inline-flex shrink-0 self-stretch items-center justify-center
|
|
1715
|
-
|
|
1716
|
-
adornmentColorClassName,
|
|
1717
|
-
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
1832
|
+
"inline-flex shrink-0 self-stretch items-center justify-center bg-transparent",
|
|
1833
|
+
adornmentColorClassName
|
|
1718
1834
|
),
|
|
1719
|
-
style: {
|
|
1720
|
-
|
|
1721
|
-
"
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
"aria-hidden": "true",
|
|
1728
|
-
children: [
|
|
1729
|
-
/* @__PURE__ */ jsx6(
|
|
1730
|
-
"path",
|
|
1731
|
-
{
|
|
1732
|
-
d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
|
|
1733
|
-
stroke: "currentColor",
|
|
1734
|
-
strokeWidth: "1.8",
|
|
1735
|
-
strokeLinecap: "round",
|
|
1736
|
-
strokeLinejoin: "round"
|
|
1737
|
-
}
|
|
1738
|
-
),
|
|
1739
|
-
/* @__PURE__ */ jsx6(
|
|
1740
|
-
"path",
|
|
1741
|
-
{
|
|
1742
|
-
d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
|
|
1743
|
-
stroke: "currentColor",
|
|
1744
|
-
strokeWidth: "1.8",
|
|
1745
|
-
strokeLinecap: "round",
|
|
1746
|
-
strokeLinejoin: "round"
|
|
1747
|
-
}
|
|
1748
|
-
),
|
|
1749
|
-
/* @__PURE__ */ jsx6(
|
|
1750
|
-
"path",
|
|
1751
|
-
{
|
|
1752
|
-
d: "M10 11.25v1.5",
|
|
1753
|
-
stroke: "currentColor",
|
|
1754
|
-
strokeWidth: "1.8",
|
|
1755
|
-
strokeLinecap: "round"
|
|
1756
|
-
}
|
|
1757
|
-
)
|
|
1758
|
-
]
|
|
1759
|
-
}
|
|
1760
|
-
) : /* @__PURE__ */ jsxs7(
|
|
1761
|
-
"svg",
|
|
1762
|
-
{
|
|
1763
|
-
width: passwordLockIconSize,
|
|
1764
|
-
height: passwordLockIconSize,
|
|
1765
|
-
viewBox: "0 0 20 20",
|
|
1766
|
-
fill: "none",
|
|
1767
|
-
"aria-hidden": "true",
|
|
1768
|
-
children: [
|
|
1769
|
-
/* @__PURE__ */ jsx6(
|
|
1770
|
-
"path",
|
|
1771
|
-
{
|
|
1772
|
-
d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
|
|
1773
|
-
stroke: "currentColor",
|
|
1774
|
-
strokeWidth: "1.8",
|
|
1775
|
-
strokeLinecap: "round",
|
|
1776
|
-
strokeLinejoin: "round"
|
|
1777
|
-
}
|
|
1778
|
-
),
|
|
1779
|
-
/* @__PURE__ */ jsx6(
|
|
1780
|
-
"path",
|
|
1781
|
-
{
|
|
1782
|
-
d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
|
|
1783
|
-
stroke: "currentColor",
|
|
1784
|
-
strokeWidth: "1.8",
|
|
1785
|
-
strokeLinecap: "round",
|
|
1786
|
-
strokeLinejoin: "round"
|
|
1787
|
-
}
|
|
1788
|
-
),
|
|
1789
|
-
/* @__PURE__ */ jsx6("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
|
|
1790
|
-
]
|
|
1791
|
-
}
|
|
1792
|
-
)
|
|
1835
|
+
style: {
|
|
1836
|
+
width: leadingAdornmentWidth,
|
|
1837
|
+
boxSizing: "border-box",
|
|
1838
|
+
justifyContent: "flex-start",
|
|
1839
|
+
paddingLeft: leadingIconInset
|
|
1840
|
+
},
|
|
1841
|
+
"aria-hidden": "true",
|
|
1842
|
+
children: resolvedLeadingIcon
|
|
1793
1843
|
}
|
|
1794
1844
|
),
|
|
1795
1845
|
/* @__PURE__ */ jsx6(
|
|
@@ -1800,9 +1850,12 @@ function Input({
|
|
|
1800
1850
|
placeholder,
|
|
1801
1851
|
type: resolvedType,
|
|
1802
1852
|
disabled,
|
|
1803
|
-
onChange,
|
|
1853
|
+
onChange: handleValidatedInputChange,
|
|
1804
1854
|
className: cx(adornedInputClassName, className),
|
|
1805
|
-
|
|
1855
|
+
"aria-invalid": hasResolvedError,
|
|
1856
|
+
style: {
|
|
1857
|
+
padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
|
|
1858
|
+
}
|
|
1806
1859
|
}
|
|
1807
1860
|
)
|
|
1808
1861
|
]
|
|
@@ -1815,9 +1868,14 @@ function Input({
|
|
|
1815
1868
|
placeholder,
|
|
1816
1869
|
type: resolvedType,
|
|
1817
1870
|
disabled,
|
|
1818
|
-
onChange,
|
|
1871
|
+
onChange: handleValidatedInputChange,
|
|
1872
|
+
"aria-invalid": hasResolvedError,
|
|
1819
1873
|
className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
|
|
1820
|
-
style: {
|
|
1874
|
+
style: {
|
|
1875
|
+
boxShadow: "0px 4px 5px var(--theme-shadow)",
|
|
1876
|
+
padding: getTextInputPadding(controlSize),
|
|
1877
|
+
...style
|
|
1878
|
+
}
|
|
1821
1879
|
}
|
|
1822
1880
|
);
|
|
1823
1881
|
return /* @__PURE__ */ jsx6(
|
|
@@ -1825,7 +1883,7 @@ function Input({
|
|
|
1825
1883
|
{
|
|
1826
1884
|
label,
|
|
1827
1885
|
hint,
|
|
1828
|
-
error,
|
|
1886
|
+
error: resolvedError,
|
|
1829
1887
|
htmlFor: isFileField ? void 0 : inputId,
|
|
1830
1888
|
required: rest.required,
|
|
1831
1889
|
useLabelWrapper: !isFileField,
|
|
@@ -2044,13 +2102,13 @@ function getEarlierDate(leftDate, rightDate) {
|
|
|
2044
2102
|
return leftDate.getTime() <= rightDate.getTime() ? leftDate : rightDate;
|
|
2045
2103
|
}
|
|
2046
2104
|
function CalendarIcon({ size }) {
|
|
2047
|
-
return /* @__PURE__ */
|
|
2105
|
+
return /* @__PURE__ */ jsx7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxs8("g", { transform: "translate(0.75 0)", children: [
|
|
2048
2106
|
/* @__PURE__ */ jsx7("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "3", stroke: "currentColor", strokeWidth: "1.6" }),
|
|
2049
2107
|
/* @__PURE__ */ jsx7("path", { d: "M6.25 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
|
|
2050
2108
|
/* @__PURE__ */ jsx7("path", { d: "M13.75 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
|
|
2051
2109
|
/* @__PURE__ */ jsx7("path", { d: "M3 7.5H17", stroke: "currentColor", strokeWidth: "1.6" }),
|
|
2052
2110
|
/* @__PURE__ */ jsx7("circle", { cx: "10", cy: "11.5", r: "1.2", fill: "currentColor" })
|
|
2053
|
-
] });
|
|
2111
|
+
] }) });
|
|
2054
2112
|
}
|
|
2055
2113
|
function ClearIcon({ size }) {
|
|
2056
2114
|
return /* @__PURE__ */ jsxs8("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
@@ -2155,7 +2213,8 @@ function DatePicker({
|
|
|
2155
2213
|
const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
|
|
2156
2214
|
const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
|
|
2157
2215
|
const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
|
|
2158
|
-
const
|
|
2216
|
+
const leadingIconInset = getControlLeadingIconInset(controlSize);
|
|
2217
|
+
const pickerAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, accessoryMetrics.iconSize);
|
|
2159
2218
|
const trailingButtonCount = Number(canClear);
|
|
2160
2219
|
const trailingInset = trailingButtonCount > 0 ? Math.max(
|
|
2161
2220
|
0,
|
|
@@ -2166,7 +2225,7 @@ function DatePicker({
|
|
|
2166
2225
|
const fieldBaseClassName = cx(
|
|
2167
2226
|
"w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
|
|
2168
2227
|
"text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
|
|
2169
|
-
"duration-150 placeholder:text-[var(--
|
|
2228
|
+
"duration-150 placeholder:text-[var(--theme-textLight)]",
|
|
2170
2229
|
FIELD_HEIGHT_CLASSNAMES2[controlSize],
|
|
2171
2230
|
FIELD_TEXT_CLASSNAMES2[controlSize],
|
|
2172
2231
|
resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
@@ -2180,10 +2239,10 @@ function DatePicker({
|
|
|
2180
2239
|
FIELD_TEXT_CLASSNAMES2[controlSize],
|
|
2181
2240
|
disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
|
|
2182
2241
|
);
|
|
2183
|
-
const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--
|
|
2242
|
+
const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--theme-negative)", componentShadow: "0px 4px 5px var(--theme-shadow)" } : { componentShadow: "0px 4px 5px var(--theme-shadow)" });
|
|
2184
2243
|
const integratedInputClassName = cx(
|
|
2185
2244
|
"h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
|
|
2186
|
-
"outline-none placeholder:text-[var(--
|
|
2245
|
+
"outline-none placeholder:text-[var(--theme-textLight)]",
|
|
2187
2246
|
FIELD_TEXT_CLASSNAMES2[controlSize],
|
|
2188
2247
|
disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
|
|
2189
2248
|
);
|
|
@@ -2413,7 +2472,12 @@ function DatePicker({
|
|
|
2413
2472
|
},
|
|
2414
2473
|
onClick: openNativePicker,
|
|
2415
2474
|
className: pickerAdornmentClassName,
|
|
2416
|
-
style: {
|
|
2475
|
+
style: {
|
|
2476
|
+
width: pickerAdornmentWidth,
|
|
2477
|
+
boxSizing: "border-box",
|
|
2478
|
+
justifyContent: "flex-start",
|
|
2479
|
+
paddingLeft: leadingIconInset
|
|
2480
|
+
},
|
|
2417
2481
|
children: /* @__PURE__ */ jsx7(CalendarIcon, { size: accessoryMetrics.iconSize })
|
|
2418
2482
|
}
|
|
2419
2483
|
),
|
|
@@ -2424,7 +2488,10 @@ function DatePicker({
|
|
|
2424
2488
|
...visibleInputProps,
|
|
2425
2489
|
className: cx(integratedInputClassName, className),
|
|
2426
2490
|
style: {
|
|
2427
|
-
padding:
|
|
2491
|
+
padding: getTextInputPadding(controlSize, {
|
|
2492
|
+
leadingPadding: leadingContentGap,
|
|
2493
|
+
trailingPadding: controlMetrics.paddingX + trailingInset
|
|
2494
|
+
})
|
|
2428
2495
|
}
|
|
2429
2496
|
}
|
|
2430
2497
|
),
|
|
@@ -2440,8 +2507,10 @@ function DatePicker({
|
|
|
2440
2507
|
...visibleInputProps,
|
|
2441
2508
|
className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
|
|
2442
2509
|
style: {
|
|
2443
|
-
|
|
2444
|
-
|
|
2510
|
+
padding: getTextInputPadding(controlSize, {
|
|
2511
|
+
trailingPadding: controlMetrics.paddingX + trailingInset
|
|
2512
|
+
}),
|
|
2513
|
+
boxShadow: resolvedError ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
|
|
2445
2514
|
...style,
|
|
2446
2515
|
...disabledFieldStyle
|
|
2447
2516
|
}
|
|
@@ -2501,7 +2570,6 @@ function Separator({
|
|
|
2501
2570
|
import {
|
|
2502
2571
|
useEffect as useEffect6,
|
|
2503
2572
|
useId as useId3,
|
|
2504
|
-
useMemo as useMemo5,
|
|
2505
2573
|
useRef as useRef4,
|
|
2506
2574
|
useState as useState5
|
|
2507
2575
|
} from "react";
|
|
@@ -2609,8 +2677,8 @@ function SelectBase({
|
|
|
2609
2677
|
...rest
|
|
2610
2678
|
}) {
|
|
2611
2679
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
2612
|
-
const
|
|
2613
|
-
const componentShadow =
|
|
2680
|
+
const theme = useUiKitTheme();
|
|
2681
|
+
const componentShadow = "0px 4px 5px var(--theme-shadow)";
|
|
2614
2682
|
const generatedId = useId3().replace(/:/g, "");
|
|
2615
2683
|
const resolvedId = id != null ? id : `ss-select-${generatedId}`;
|
|
2616
2684
|
const isMultiSelect = Boolean(isMulti || multiple);
|
|
@@ -2636,7 +2704,7 @@ function SelectBase({
|
|
|
2636
2704
|
const selectedValue = (_e = selectedValues[0]) != null ? _e : "";
|
|
2637
2705
|
const optionLookup = new Map(flatOptions.map((option) => [option.value, option]));
|
|
2638
2706
|
const selectedOption = (_f = optionLookup.get(selectedValue)) != null ? _f : null;
|
|
2639
|
-
const placeholderTextColor =
|
|
2707
|
+
const placeholderTextColor = "var(--theme-textLight)";
|
|
2640
2708
|
const hasSelection = isMultiSelect ? selectedValues.length > 0 : selectedValue !== "";
|
|
2641
2709
|
const displayLabel = hasSelection ? isMultiSelect ? selectedValues.map((currentValue) => {
|
|
2642
2710
|
const option = optionLookup.get(currentValue);
|
|
@@ -2650,45 +2718,20 @@ function SelectBase({
|
|
|
2650
2718
|
const selectedValuesKey = selectedValues.join("\0");
|
|
2651
2719
|
const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
|
|
2652
2720
|
const indicatorOffset = getSelectIndicatorOffset(controlSize);
|
|
2653
|
-
const
|
|
2721
|
+
const controlTextNudgeStyle = getSelectTextNudgeStyle();
|
|
2654
2722
|
const listboxId = `${resolvedId}-listbox`;
|
|
2655
2723
|
const searchInputId = `${resolvedId}-search`;
|
|
2656
|
-
const scrollbarThumbColor =
|
|
2657
|
-
const scrollbarThumbHoverColor =
|
|
2724
|
+
const scrollbarThumbColor = theme.colors.secondary;
|
|
2725
|
+
const scrollbarThumbHoverColor = theme.colors.textLight;
|
|
2658
2726
|
const highlightedOption = (_i = visibleOptions.find((option) => option.value === highlightedValue)) != null ? _i : null;
|
|
2659
|
-
const optionHoverBackground = theme.colors.primary;
|
|
2660
|
-
const optionSelectedBackground = theme.colors.primary;
|
|
2661
2727
|
const canOpenMenu = allowOpenWithoutOptions || flatOptions.length > 0;
|
|
2662
2728
|
const isTriggerDisabled = disabled || !canOpenMenu;
|
|
2663
2729
|
const buttonPassthroughProps = Object.fromEntries(
|
|
2664
2730
|
Object.entries(rest).filter(([key]) => key.startsWith("aria-") || key.startsWith("data-"))
|
|
2665
2731
|
);
|
|
2666
|
-
const selectVariables = useMemo5(() => ({
|
|
2667
|
-
"--ui-kit-select-placeholder": placeholderTextColor,
|
|
2668
|
-
"--ui-kit-select-muted": mutedText,
|
|
2669
|
-
"--ui-kit-select-indicator-disabled": withAlpha(theme.colors.text, 0.42),
|
|
2670
|
-
"--ui-kit-select-surface-raised": theme.colors.surface,
|
|
2671
|
-
"--ui-kit-select-scrollbar-thumb": scrollbarThumbColor,
|
|
2672
|
-
"--ui-kit-select-scrollbar-thumb-hover": scrollbarThumbHoverColor,
|
|
2673
|
-
"--ui-kit-select-divider": withAlpha(theme.colors.text, 0.08),
|
|
2674
|
-
"--ui-kit-select-option-hover-bg": optionHoverBackground,
|
|
2675
|
-
"--ui-kit-select-option-selected-bg": optionSelectedBackground,
|
|
2676
|
-
"--ui-kit-select-option-disabled": withAlpha(theme.colors.text, 0.38),
|
|
2677
|
-
"--ui-kit-select-control-shadow": componentShadow
|
|
2678
|
-
}), [
|
|
2679
|
-
componentShadow,
|
|
2680
|
-
mutedText,
|
|
2681
|
-
optionHoverBackground,
|
|
2682
|
-
optionSelectedBackground,
|
|
2683
|
-
placeholderTextColor,
|
|
2684
|
-
scrollbarThumbColor,
|
|
2685
|
-
scrollbarThumbHoverColor,
|
|
2686
|
-
theme.colors.surface,
|
|
2687
|
-
theme.colors.text
|
|
2688
|
-
]);
|
|
2689
2732
|
const triggerBorderColor = error ? "var(--theme-negative)" : "var(--theme-textLight)";
|
|
2690
2733
|
const triggerBoxShadow = getInsetBorderShadow(triggerBorderColor, {
|
|
2691
|
-
componentShadow
|
|
2734
|
+
componentShadow
|
|
2692
2735
|
});
|
|
2693
2736
|
const triggerClassName = cx(
|
|
2694
2737
|
"m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
|
|
@@ -2696,7 +2739,7 @@ function SelectBase({
|
|
|
2696
2739
|
"duration-150 text-left",
|
|
2697
2740
|
FIELD_HEIGHT_CLASSNAMES3[controlSize],
|
|
2698
2741
|
FIELD_TEXT_CLASSNAMES3[controlSize],
|
|
2699
|
-
hasSelection ? "text-[var(--theme-text)]" : "text-[var(--
|
|
2742
|
+
hasSelection ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]",
|
|
2700
2743
|
isTriggerDisabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
2701
2744
|
);
|
|
2702
2745
|
useEffect6(() => {
|
|
@@ -3061,7 +3104,7 @@ function SelectBase({
|
|
|
3061
3104
|
htmlFor: resolvedId,
|
|
3062
3105
|
required: rest.required,
|
|
3063
3106
|
useLabelWrapper: false,
|
|
3064
|
-
children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, className: "relative w-full",
|
|
3107
|
+
children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, className: "relative w-full", children: [
|
|
3065
3108
|
/* @__PURE__ */ jsxs9(
|
|
3066
3109
|
"button",
|
|
3067
3110
|
{
|
|
@@ -3085,7 +3128,7 @@ function SelectBase({
|
|
|
3085
3128
|
onBlur: handleTriggerBlur,
|
|
3086
3129
|
onKeyDown: handleTriggerKeyDown,
|
|
3087
3130
|
style: {
|
|
3088
|
-
padding:
|
|
3131
|
+
padding: getSelectControlPadding(controlSize),
|
|
3089
3132
|
boxShadow: triggerBoxShadow,
|
|
3090
3133
|
...style,
|
|
3091
3134
|
...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
|
|
@@ -3095,6 +3138,7 @@ function SelectBase({
|
|
|
3095
3138
|
"span",
|
|
3096
3139
|
{
|
|
3097
3140
|
className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
|
|
3141
|
+
style: controlTextNudgeStyle,
|
|
3098
3142
|
children: displayContent
|
|
3099
3143
|
}
|
|
3100
3144
|
),
|
|
@@ -3105,7 +3149,7 @@ function SelectBase({
|
|
|
3105
3149
|
className: cx(
|
|
3106
3150
|
"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
|
|
3107
3151
|
"transition-[transform,color] duration-150",
|
|
3108
|
-
isTriggerDisabled ? "text-[var(--
|
|
3152
|
+
isTriggerDisabled ? "text-[var(--theme-secondary)]" : "text-[var(--theme-textLight)]"
|
|
3109
3153
|
),
|
|
3110
3154
|
style: {
|
|
3111
3155
|
right: indicatorOffset,
|
|
@@ -3147,7 +3191,7 @@ function SelectBase({
|
|
|
3147
3191
|
/* @__PURE__ */ jsx9("style", { children: `
|
|
3148
3192
|
#${listboxId} {
|
|
3149
3193
|
scrollbar-width: thin;
|
|
3150
|
-
scrollbar-color:
|
|
3194
|
+
scrollbar-color: ${scrollbarThumbColor} transparent;
|
|
3151
3195
|
}
|
|
3152
3196
|
|
|
3153
3197
|
#${listboxId}::-webkit-scrollbar {
|
|
@@ -3159,19 +3203,19 @@ function SelectBase({
|
|
|
3159
3203
|
}
|
|
3160
3204
|
|
|
3161
3205
|
#${listboxId}::-webkit-scrollbar-thumb {
|
|
3162
|
-
background:
|
|
3206
|
+
background: ${scrollbarThumbColor};
|
|
3163
3207
|
border-radius: 999px;
|
|
3164
3208
|
border: 2px solid transparent;
|
|
3165
3209
|
background-clip: padding-box;
|
|
3166
3210
|
}
|
|
3167
3211
|
|
|
3168
3212
|
#${listboxId}::-webkit-scrollbar-thumb:hover {
|
|
3169
|
-
background:
|
|
3213
|
+
background: ${scrollbarThumbHoverColor};
|
|
3170
3214
|
background-clip: padding-box;
|
|
3171
3215
|
}
|
|
3172
3216
|
|
|
3173
3217
|
#${searchInputId}::placeholder {
|
|
3174
|
-
color:
|
|
3218
|
+
color: ${placeholderTextColor};
|
|
3175
3219
|
opacity: 1;
|
|
3176
3220
|
}
|
|
3177
3221
|
` }),
|
|
@@ -3183,9 +3227,9 @@ function SelectBase({
|
|
|
3183
3227
|
style: {
|
|
3184
3228
|
top: menuPlacement === "bottom" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
|
|
3185
3229
|
bottom: menuPlacement === "top" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
|
|
3186
|
-
borderColor:
|
|
3187
|
-
backgroundColor:
|
|
3188
|
-
boxShadow:
|
|
3230
|
+
borderColor: theme.colors.secondary,
|
|
3231
|
+
backgroundColor: theme.colors.surface,
|
|
3232
|
+
boxShadow: componentShadow,
|
|
3189
3233
|
visibility: isPlacementResolved ? "visible" : "hidden"
|
|
3190
3234
|
},
|
|
3191
3235
|
children: [
|
|
@@ -3193,7 +3237,7 @@ function SelectBase({
|
|
|
3193
3237
|
"div",
|
|
3194
3238
|
{
|
|
3195
3239
|
className: "flex shrink-0 items-center justify-start gap-2 border-b px-1 pb-[10px] pt-1",
|
|
3196
|
-
style: { borderColor:
|
|
3240
|
+
style: { borderColor: theme.colors.secondary },
|
|
3197
3241
|
children: [
|
|
3198
3242
|
bulkToggleControl,
|
|
3199
3243
|
/* @__PURE__ */ jsx9(
|
|
@@ -3218,8 +3262,8 @@ function SelectBase({
|
|
|
3218
3262
|
"aria-label": searchPlaceholder,
|
|
3219
3263
|
className: "w-full flex-1 rounded-[11px] border bg-[var(--theme-surface)] px-[11px] py-[7px] text-[11px] leading-[1.4] text-[var(--theme-text)] outline-none",
|
|
3220
3264
|
style: {
|
|
3221
|
-
borderColor:
|
|
3222
|
-
boxShadow:
|
|
3265
|
+
borderColor: theme.colors.secondary,
|
|
3266
|
+
boxShadow: componentShadow
|
|
3223
3267
|
}
|
|
3224
3268
|
}
|
|
3225
3269
|
)
|
|
@@ -3229,7 +3273,7 @@ function SelectBase({
|
|
|
3229
3273
|
"div",
|
|
3230
3274
|
{
|
|
3231
3275
|
className: "flex shrink-0 items-center justify-start border-b px-1 pb-[10px] pt-1",
|
|
3232
|
-
style: { borderColor:
|
|
3276
|
+
style: { borderColor: theme.colors.secondary },
|
|
3233
3277
|
children: bulkToggleControl
|
|
3234
3278
|
}
|
|
3235
3279
|
) : null,
|
|
@@ -3245,7 +3289,7 @@ function SelectBase({
|
|
|
3245
3289
|
children: visibleGroups.length === 0 ? /* @__PURE__ */ jsx9(
|
|
3246
3290
|
"div",
|
|
3247
3291
|
{
|
|
3248
|
-
className: "px-3 py-[14px] text-center text-[13px] text-[var(--
|
|
3292
|
+
className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]",
|
|
3249
3293
|
children: emptyState
|
|
3250
3294
|
}
|
|
3251
3295
|
) : visibleGroups.map((group) => /* @__PURE__ */ jsxs9(
|
|
@@ -3256,7 +3300,7 @@ function SelectBase({
|
|
|
3256
3300
|
group.label ? /* @__PURE__ */ jsx9(
|
|
3257
3301
|
"span",
|
|
3258
3302
|
{
|
|
3259
|
-
className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--
|
|
3303
|
+
className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--theme-textLight)]",
|
|
3260
3304
|
children: group.label
|
|
3261
3305
|
}
|
|
3262
3306
|
) : null,
|
|
@@ -3292,11 +3336,11 @@ function SelectBase({
|
|
|
3292
3336
|
"flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
|
|
3293
3337
|
"transition-[background-color,color] duration-150",
|
|
3294
3338
|
OPTION_PADDING_CLASSNAMES[controlSize],
|
|
3295
|
-
option.disabled ? "cursor-not-allowed text-[var(--
|
|
3339
|
+
option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
|
|
3296
3340
|
!option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
|
|
3297
3341
|
!option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
|
|
3298
|
-
isSelected ? "bg-[var(--
|
|
3299
|
-
!isSelected && isHighlighted ? "bg-[var(--
|
|
3342
|
+
isSelected ? "bg-[var(--theme-primary)] font-bold" : null,
|
|
3343
|
+
!isSelected && isHighlighted ? "bg-[var(--theme-primary)]" : null,
|
|
3300
3344
|
!isSelected && !isHighlighted ? "bg-[var(--theme-surface)] font-normal" : null
|
|
3301
3345
|
),
|
|
3302
3346
|
children: [
|
|
@@ -3313,7 +3357,7 @@ function SelectBase({
|
|
|
3313
3357
|
size: 16,
|
|
3314
3358
|
checkedColor: isActive ? "var(--theme-onPrimary)" : "var(--theme-primary)",
|
|
3315
3359
|
iconColor: isActive ? "var(--theme-primary)" : "var(--theme-onPrimary)",
|
|
3316
|
-
uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" :
|
|
3360
|
+
uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" : theme.colors.secondary,
|
|
3317
3361
|
uncheckedBackgroundColor: "transparent"
|
|
3318
3362
|
}
|
|
3319
3363
|
) : null,
|
|
@@ -3359,7 +3403,7 @@ function SelectBase({
|
|
|
3359
3403
|
"div",
|
|
3360
3404
|
{
|
|
3361
3405
|
className: "shrink-0 border-t px-2 pb-1 pt-2.5",
|
|
3362
|
-
style: { borderColor:
|
|
3406
|
+
style: { borderColor: theme.colors.secondary },
|
|
3363
3407
|
children: menuFooter
|
|
3364
3408
|
}
|
|
3365
3409
|
) : null
|
|
@@ -3711,7 +3755,7 @@ function SelectAsync({
|
|
|
3711
3755
|
"div",
|
|
3712
3756
|
{
|
|
3713
3757
|
"aria-live": "polite",
|
|
3714
|
-
className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--
|
|
3758
|
+
className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--theme-textLight)]",
|
|
3715
3759
|
style: { justifyContent: hasMore ? "space-between" : "center" },
|
|
3716
3760
|
children: [
|
|
3717
3761
|
/* @__PURE__ */ jsx12("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
|
|
@@ -4275,9 +4319,12 @@ function TableBase({
|
|
|
4275
4319
|
onInternalPageChange,
|
|
4276
4320
|
onInternalPageSizeChange
|
|
4277
4321
|
}) {
|
|
4278
|
-
const
|
|
4279
|
-
const
|
|
4280
|
-
const
|
|
4322
|
+
const theme = useUiKitTheme();
|
|
4323
|
+
const componentShadow = "0px 4px 5px var(--theme-shadow)";
|
|
4324
|
+
const softBorderColor = theme.colors.secondary;
|
|
4325
|
+
const strongBorderColor = theme.colors.textLight;
|
|
4326
|
+
const mutedTextColor = theme.colors.textLight;
|
|
4327
|
+
const alternateSurfaceColor = theme.colors.background;
|
|
4281
4328
|
const scrollRegionId = useId4().replace(/:/g, "");
|
|
4282
4329
|
const containerRef = useRef6(null);
|
|
4283
4330
|
const [containerWidth, setContainerWidth] = useState7(null);
|
|
@@ -4301,8 +4348,8 @@ function TableBase({
|
|
|
4301
4348
|
const hasRows = items.length > 0;
|
|
4302
4349
|
const hasSearchValue = searchValue.trim().length > 0;
|
|
4303
4350
|
const visibleInlineActions = Math.max(0, Math.floor(maxInlineActions));
|
|
4304
|
-
const scrollbarThumbColor =
|
|
4305
|
-
const scrollbarThumbHoverColor = theme.colors.
|
|
4351
|
+
const scrollbarThumbColor = theme.colors.secondary;
|
|
4352
|
+
const scrollbarThumbHoverColor = theme.colors.textLight;
|
|
4306
4353
|
const shouldShowToolbarStatus = loading || !loading && Boolean(error) && hasRows;
|
|
4307
4354
|
const shouldRenderToolbar = shouldShowSearch || shouldShowToolbarStatus || showSettingsButton;
|
|
4308
4355
|
const shouldRenderToolbarPrimaryGroup = shouldShowSearch || showSettingsButton;
|
|
@@ -4311,7 +4358,7 @@ function TableBase({
|
|
|
4311
4358
|
const currentPageItemCount = items.length;
|
|
4312
4359
|
const downloadMatrix = buildTableDownloadMatrix(visibleDownloadColumns, items);
|
|
4313
4360
|
const downloadFileBaseName = buildTableDownloadFileBaseName(ariaLabel, normalizedPage);
|
|
4314
|
-
const stickyActionsColumnShadow = `-10px 0 16px -14px ${
|
|
4361
|
+
const stickyActionsColumnShadow = `-10px 0 16px -14px ${theme.colors.shadow}`;
|
|
4315
4362
|
const shouldStickActionsColumn = Boolean(actions) && stickyActionsColumn;
|
|
4316
4363
|
const getStickyActionsCellStyle = (backgroundColor, backgroundImage, isHeader = false) => ({
|
|
4317
4364
|
position: "sticky",
|
|
@@ -4321,7 +4368,7 @@ function TableBase({
|
|
|
4321
4368
|
backgroundImage,
|
|
4322
4369
|
backgroundClip: "padding-box",
|
|
4323
4370
|
boxShadow: stickyActionsColumnShadow,
|
|
4324
|
-
borderLeft: `1px solid ${
|
|
4371
|
+
borderLeft: `1px solid ${softBorderColor}`
|
|
4325
4372
|
});
|
|
4326
4373
|
useEffect8(() => {
|
|
4327
4374
|
const element = containerRef.current;
|
|
@@ -4361,8 +4408,8 @@ function TableBase({
|
|
|
4361
4408
|
height: 34,
|
|
4362
4409
|
padding: iconOnly ? 0 : "0 12px",
|
|
4363
4410
|
borderRadius: 12,
|
|
4364
|
-
border: `1px solid ${tone === "danger" ?
|
|
4365
|
-
backgroundColor:
|
|
4411
|
+
border: `1px solid ${tone === "danger" ? theme.colors.negative : softBorderColor}`,
|
|
4412
|
+
backgroundColor: theme.colors.surface,
|
|
4366
4413
|
color: tone === "danger" ? theme.colors.negative : theme.colors.text,
|
|
4367
4414
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
4368
4415
|
opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
|
|
@@ -4381,14 +4428,14 @@ function TableBase({
|
|
|
4381
4428
|
gap: 6,
|
|
4382
4429
|
padding: 8,
|
|
4383
4430
|
borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
|
|
4384
|
-
border: `1px solid ${
|
|
4431
|
+
border: `1px solid ${softBorderColor}`,
|
|
4385
4432
|
backgroundColor: theme.colors.surface,
|
|
4386
4433
|
boxShadow: componentShadow
|
|
4387
4434
|
};
|
|
4388
4435
|
const toolbarControlStyle = {
|
|
4389
4436
|
height: 42,
|
|
4390
4437
|
borderRadius: 14,
|
|
4391
|
-
border: `1px solid ${
|
|
4438
|
+
border: `1px solid ${softBorderColor}`,
|
|
4392
4439
|
backgroundColor: theme.colors.surface,
|
|
4393
4440
|
color: theme.colors.text,
|
|
4394
4441
|
padding: "0 10px",
|
|
@@ -4397,7 +4444,7 @@ function TableBase({
|
|
|
4397
4444
|
fontSize: 14,
|
|
4398
4445
|
lineHeight: 1.4,
|
|
4399
4446
|
transition: "border-color 160ms ease, box-shadow 160ms ease",
|
|
4400
|
-
boxShadow:
|
|
4447
|
+
boxShadow: componentShadow
|
|
4401
4448
|
};
|
|
4402
4449
|
const settingsButtonStyle = {
|
|
4403
4450
|
...actionButtonBaseStyle("default", false, true),
|
|
@@ -4409,8 +4456,8 @@ function TableBase({
|
|
|
4409
4456
|
gap: 4,
|
|
4410
4457
|
padding: "10px 12px",
|
|
4411
4458
|
borderRadius: 14,
|
|
4412
|
-
border: `1px solid ${
|
|
4413
|
-
backgroundColor:
|
|
4459
|
+
border: `1px solid ${softBorderColor}`,
|
|
4460
|
+
backgroundColor: theme.colors.surface,
|
|
4414
4461
|
boxShadow: componentShadow
|
|
4415
4462
|
};
|
|
4416
4463
|
const handleDownloadCsv = () => {
|
|
@@ -4492,7 +4539,7 @@ function TableBase({
|
|
|
4492
4539
|
colSpan: column.colSpan,
|
|
4493
4540
|
style: {
|
|
4494
4541
|
padding: "6px 10px",
|
|
4495
|
-
borderBottom: `1px solid ${
|
|
4542
|
+
borderBottom: `1px solid ${softBorderColor}`,
|
|
4496
4543
|
verticalAlign: "middle",
|
|
4497
4544
|
color: theme.colors.text,
|
|
4498
4545
|
fontSize: 14,
|
|
@@ -4502,7 +4549,7 @@ function TableBase({
|
|
|
4502
4549
|
width: column.width,
|
|
4503
4550
|
minWidth: column.minWidth
|
|
4504
4551
|
},
|
|
4505
|
-
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color:
|
|
4552
|
+
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color: mutedTextColor }, children: "-" })
|
|
4506
4553
|
},
|
|
4507
4554
|
`${getColumnKey(column, columnIndex)}-${rowIndex}`
|
|
4508
4555
|
);
|
|
@@ -4520,8 +4567,8 @@ function TableBase({
|
|
|
4520
4567
|
gap: 12,
|
|
4521
4568
|
minHeight: 220,
|
|
4522
4569
|
borderRadius: 20,
|
|
4523
|
-
border: `1px dashed ${
|
|
4524
|
-
backgroundColor:
|
|
4570
|
+
border: `1px dashed ${strongBorderColor}`,
|
|
4571
|
+
backgroundColor: theme.colors.surface,
|
|
4525
4572
|
boxShadow: componentShadow,
|
|
4526
4573
|
color: theme.colors.text,
|
|
4527
4574
|
textAlign: "center",
|
|
@@ -4541,7 +4588,7 @@ function TableBase({
|
|
|
4541
4588
|
className: cx(
|
|
4542
4589
|
UI_KIT_ROOT_CLASSNAME,
|
|
4543
4590
|
"flex w-full max-w-full min-w-0 flex-col gap-4 rounded-[24px]",
|
|
4544
|
-
"box-border bg-[var(--
|
|
4591
|
+
"box-border bg-[var(--theme-surface)] p-[18px] text-[var(--theme-text)]",
|
|
4545
4592
|
className
|
|
4546
4593
|
),
|
|
4547
4594
|
style,
|
|
@@ -4568,8 +4615,8 @@ function TableBase({
|
|
|
4568
4615
|
style: {
|
|
4569
4616
|
flex: "1 1 260px",
|
|
4570
4617
|
maxWidth: 360,
|
|
4571
|
-
borderColor:
|
|
4572
|
-
boxShadow:
|
|
4618
|
+
borderColor: softBorderColor,
|
|
4619
|
+
boxShadow: componentShadow
|
|
4573
4620
|
}
|
|
4574
4621
|
}
|
|
4575
4622
|
) : null,
|
|
@@ -4593,7 +4640,7 @@ function TableBase({
|
|
|
4593
4640
|
className: "flex min-w-0 flex-wrap items-center justify-end gap-2.5",
|
|
4594
4641
|
style: { marginLeft: shouldRenderToolbarPrimaryGroup ? "auto" : void 0 },
|
|
4595
4642
|
children: [
|
|
4596
|
-
loading ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--
|
|
4643
|
+
loading ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
|
|
4597
4644
|
!loading && error && hasRows ? /* @__PURE__ */ jsxs11("div", { className: "inline-flex items-center gap-2.5", children: [
|
|
4598
4645
|
/* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
|
|
4599
4646
|
onRetry ? /* @__PURE__ */ jsx13(Button, { size: "sm", variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
|
|
@@ -4605,7 +4652,7 @@ function TableBase({
|
|
|
4605
4652
|
!hasRows && (!loading || error) ? renderEmptyState() : null,
|
|
4606
4653
|
hasRows ? isCollapsed ? /* @__PURE__ */ jsx13("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
|
|
4607
4654
|
const rowActions = renderActions(item, rowIndex);
|
|
4608
|
-
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface :
|
|
4655
|
+
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
|
|
4609
4656
|
return /* @__PURE__ */ jsxs11(
|
|
4610
4657
|
"article",
|
|
4611
4658
|
{
|
|
@@ -4616,7 +4663,7 @@ function TableBase({
|
|
|
4616
4663
|
gap: 14,
|
|
4617
4664
|
padding: "16px 16px 6px 16px",
|
|
4618
4665
|
borderRadius: 20,
|
|
4619
|
-
border: `1px solid ${
|
|
4666
|
+
border: `1px solid ${softBorderColor}`,
|
|
4620
4667
|
backgroundColor: rowBackgroundColor,
|
|
4621
4668
|
boxShadow: componentShadow
|
|
4622
4669
|
},
|
|
@@ -4649,7 +4696,7 @@ function TableBase({
|
|
|
4649
4696
|
"span",
|
|
4650
4697
|
{
|
|
4651
4698
|
style: {
|
|
4652
|
-
color:
|
|
4699
|
+
color: mutedTextColor,
|
|
4653
4700
|
fontSize: 11,
|
|
4654
4701
|
fontWeight: 700,
|
|
4655
4702
|
letterSpacing: "0.08em",
|
|
@@ -4684,7 +4731,7 @@ function TableBase({
|
|
|
4684
4731
|
lineHeight: 1.55,
|
|
4685
4732
|
textAlign: getTextAlign(align)
|
|
4686
4733
|
},
|
|
4687
|
-
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color:
|
|
4734
|
+
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color: mutedTextColor }, children: "-" })
|
|
4688
4735
|
}
|
|
4689
4736
|
)
|
|
4690
4737
|
}
|
|
@@ -4703,7 +4750,7 @@ function TableBase({
|
|
|
4703
4750
|
display: "flex",
|
|
4704
4751
|
justifyContent: "flex-end",
|
|
4705
4752
|
paddingTop: 4,
|
|
4706
|
-
borderTop: `1px solid ${
|
|
4753
|
+
borderTop: `1px solid ${softBorderColor}`
|
|
4707
4754
|
},
|
|
4708
4755
|
children: rowActions
|
|
4709
4756
|
}
|
|
@@ -4751,8 +4798,8 @@ function TableBase({
|
|
|
4751
4798
|
"aria-label": ariaLabel,
|
|
4752
4799
|
className: "w-full max-w-full min-w-0 overflow-x-auto overflow-y-hidden rounded-[20px] border bg-[var(--theme-surface)]",
|
|
4753
4800
|
style: {
|
|
4754
|
-
borderColor:
|
|
4755
|
-
boxShadow:
|
|
4801
|
+
borderColor: softBorderColor,
|
|
4802
|
+
boxShadow: componentShadow
|
|
4756
4803
|
},
|
|
4757
4804
|
children: /* @__PURE__ */ jsxs11("table", { className: "min-w-full max-w-none border-separate border-spacing-0", style: { width: "max-content" }, children: [
|
|
4758
4805
|
/* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
|
|
@@ -4766,8 +4813,8 @@ function TableBase({
|
|
|
4766
4813
|
scope: "col",
|
|
4767
4814
|
style: {
|
|
4768
4815
|
padding: "6px 10px",
|
|
4769
|
-
borderBottom: `1px solid ${
|
|
4770
|
-
color:
|
|
4816
|
+
borderBottom: `1px solid ${strongBorderColor}`,
|
|
4817
|
+
color: mutedTextColor,
|
|
4771
4818
|
fontSize: 11,
|
|
4772
4819
|
fontWeight: 700,
|
|
4773
4820
|
letterSpacing: "0.08em",
|
|
@@ -4788,8 +4835,8 @@ function TableBase({
|
|
|
4788
4835
|
scope: "col",
|
|
4789
4836
|
style: {
|
|
4790
4837
|
padding: "6px 10px",
|
|
4791
|
-
borderBottom: `1px solid ${
|
|
4792
|
-
color:
|
|
4838
|
+
borderBottom: `1px solid ${strongBorderColor}`,
|
|
4839
|
+
color: mutedTextColor,
|
|
4793
4840
|
fontSize: 11,
|
|
4794
4841
|
fontWeight: 700,
|
|
4795
4842
|
letterSpacing: "0.08em",
|
|
@@ -4805,8 +4852,8 @@ function TableBase({
|
|
|
4805
4852
|
] }) }),
|
|
4806
4853
|
/* @__PURE__ */ jsx13("tbody", { children: items.map((item, rowIndex) => {
|
|
4807
4854
|
const rowActions = renderActions(item, rowIndex);
|
|
4808
|
-
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface :
|
|
4809
|
-
const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${
|
|
4855
|
+
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
|
|
4856
|
+
const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${alternateSurfaceColor}, ${alternateSurfaceColor})`;
|
|
4810
4857
|
return /* @__PURE__ */ jsxs11(
|
|
4811
4858
|
"tr",
|
|
4812
4859
|
{
|
|
@@ -4820,7 +4867,7 @@ function TableBase({
|
|
|
4820
4867
|
{
|
|
4821
4868
|
style: {
|
|
4822
4869
|
padding: "6px 10px",
|
|
4823
|
-
borderBottom: `1px solid ${
|
|
4870
|
+
borderBottom: `1px solid ${softBorderColor}`,
|
|
4824
4871
|
textAlign: "right",
|
|
4825
4872
|
verticalAlign: "middle",
|
|
4826
4873
|
...shouldStickActionsColumn ? getStickyActionsCellStyle(theme.colors.surface, stickyRowBackgroundImage) : {}
|
|
@@ -4843,7 +4890,7 @@ function TableBase({
|
|
|
4843
4890
|
className: "flex flex-wrap items-center justify-between gap-3 pt-1",
|
|
4844
4891
|
children: [
|
|
4845
4892
|
shouldShowPaginationControls ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
4846
|
-
/* @__PURE__ */ jsx13("span", { className: "mr-1 text-[13px] text-[var(--
|
|
4893
|
+
/* @__PURE__ */ jsx13("span", { className: "mr-1 text-[13px] text-[var(--theme-textLight)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
|
|
4847
4894
|
/* @__PURE__ */ jsx13(
|
|
4848
4895
|
"button",
|
|
4849
4896
|
{
|
|
@@ -4892,7 +4939,7 @@ function TableBase({
|
|
|
4892
4939
|
/* @__PURE__ */ jsx13(
|
|
4893
4940
|
"div",
|
|
4894
4941
|
{
|
|
4895
|
-
className: "flex items-center gap-2.5 text-[13px] text-[var(--
|
|
4942
|
+
className: "flex items-center gap-2.5 text-[13px] text-[var(--theme-textLight)]",
|
|
4896
4943
|
style: { marginLeft: shouldShowRowsPerPageControl ? "auto" : void 0 },
|
|
4897
4944
|
children: shouldShowRowsPerPageControl ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
4898
4945
|
/* @__PURE__ */ jsx13("span", { children: resolvedLabels.rowsPerPageLabel }),
|
|
@@ -4903,8 +4950,8 @@ function TableBase({
|
|
|
4903
4950
|
onChange: (event) => onInternalPageSizeChange(Number(event.currentTarget.value)),
|
|
4904
4951
|
className: "h-[34px] rounded-[14px] border bg-[var(--theme-surface)] px-3 text-sm leading-[1.4] text-[var(--theme-text)] outline-none",
|
|
4905
4952
|
style: {
|
|
4906
|
-
borderColor:
|
|
4907
|
-
boxShadow:
|
|
4953
|
+
borderColor: softBorderColor,
|
|
4954
|
+
boxShadow: componentShadow
|
|
4908
4955
|
},
|
|
4909
4956
|
children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx13("option", { value: option, children: option }, option))
|
|
4910
4957
|
}
|
|
@@ -4928,24 +4975,24 @@ function TableBase({
|
|
|
4928
4975
|
/* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
|
|
4929
4976
|
/* @__PURE__ */ jsxs11("div", { className: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]", children: [
|
|
4930
4977
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4931
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4978
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
|
|
4932
4979
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalPages })
|
|
4933
4980
|
] }),
|
|
4934
4981
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4935
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4982
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
|
|
4936
4983
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalItemCount })
|
|
4937
4984
|
] }),
|
|
4938
4985
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4939
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4986
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
|
|
4940
4987
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: normalizedPage })
|
|
4941
4988
|
] }),
|
|
4942
4989
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4943
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4990
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
|
|
4944
4991
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: currentPageItemCount })
|
|
4945
4992
|
] })
|
|
4946
4993
|
] })
|
|
4947
4994
|
] }),
|
|
4948
|
-
/* @__PURE__ */ jsx13("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx13(Separator, { orientation: "horizontal", color:
|
|
4995
|
+
/* @__PURE__ */ jsx13("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx13(Separator, { orientation: "horizontal", color: softBorderColor }) }),
|
|
4949
4996
|
/* @__PURE__ */ jsxs11("section", { className: "grid gap-3", children: [
|
|
4950
4997
|
/* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
|
|
4951
4998
|
/* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-2.5", children: [
|
|
@@ -5245,12 +5292,13 @@ function Textarea({
|
|
|
5245
5292
|
className: cx(
|
|
5246
5293
|
"w-full min-w-0 box-border resize-y rounded-2xl border border-solid bg-[var(--theme-surface)]",
|
|
5247
5294
|
"text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
|
|
5248
|
-
"duration-150 disabled:cursor-not-allowed",
|
|
5295
|
+
"duration-150 placeholder:opacity-100 disabled:cursor-not-allowed",
|
|
5296
|
+
"placeholder:text-[var(--theme-textLight)]",
|
|
5249
5297
|
error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
5250
5298
|
TEXTAREA_SIZE_CLASSNAMES[controlSize]
|
|
5251
5299
|
),
|
|
5252
5300
|
style: {
|
|
5253
|
-
boxShadow: error ? "0 0 0 3px var(--
|
|
5301
|
+
boxShadow: error ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
|
|
5254
5302
|
...style,
|
|
5255
5303
|
...disabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
|
|
5256
5304
|
}
|