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.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,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";
@@ -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(--ui-kit-component-shadow)",
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 = (tokens) => {
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, tokens.theme.colors[colorName]);
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 tokens = useMemo(() => createUiKitThemeTokens(activeTheme), [activeTheme]);
322
+ const theme = useMemo(() => normalizeUiKitTheme(activeTheme), [activeTheme]);
335
323
  useEffect(() => {
336
- syncUiKitThemeVariables(tokens);
337
- }, [tokens]);
338
- return tokens;
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(--ui-kit-button-outline-hover)]",
354
+ "hover:bg-[var(--theme-surface)]",
367
355
  "active:translate-y-px",
368
356
  "active:scale-[0.985]",
369
- "active:bg-[var(--ui-kit-button-outline-active)]"
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(--ui-kit-button-ghost-border)]",
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(--ui-kit-button-ghost-border)]",
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 { theme } = useUiKitTheme();
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(--ui-kit-surface-raised)] pl-6 pr-6 text-[var(--theme-text)]",
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 { theme } = useUiKitTheme();
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 { theme, mutedText } = useUiKitTheme();
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: withAlpha(theme.colors.text, 0.24),
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(--ui-kit-muted-text)]", children: hint }) : null,
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 isUiKitThemeTokens = (theme) => {
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 (isUiKitThemeTokens(themeOverride)) {
755
- return withResolvedModalColors(themeOverride);
732
+ if (isUiKitTheme(themeOverride)) {
733
+ return themeOverride;
756
734
  }
757
735
  if (!(themeOverride == null ? void 0 : themeOverride.colors)) {
758
- return withResolvedModalColors(baseTheme);
736
+ return baseTheme;
759
737
  }
760
738
  const colors = {
761
- ...baseTheme.theme.colors,
739
+ ...baseTheme.colors,
762
740
  ...themeOverride.colors
763
741
  };
764
- return withResolvedModalColors(createUiKitThemeTokens({
765
- ...baseTheme.theme,
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(--ui-kit-modal-primary)] shadow-none",
809
- appearance === "link" && "border-0 bg-transparent text-[var(--ui-kit-modal-primary)] shadow-none",
810
- appearance === "outlined" && "border-2 border-[var(--ui-kit-modal-primary)] bg-transparent",
811
- appearance === "outlined" && "text-[var(--ui-kit-modal-primary)] shadow-[var(--ui-kit-modal-button-shadow-outlined)]",
812
- appearance === "contained" && "border border-transparent bg-[var(--ui-kit-modal-primary)]",
813
- appearance === "contained" && "text-[var(--ui-kit-modal-on-primary)] shadow-[var(--ui-kit-modal-button-shadow-contained)]"
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: { opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1 },
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: withAlpha(theme.colors.surface, 0.88),
849
- boxShadow: `0 18px 36px ${withAlpha(theme.colors.text, 0.08)}`
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: withAlpha(theme.colors.text, 0.12),
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 ${withAlpha(modalTheme.theme.colors.shadow, 0.28)}`;
944
- }, [modalTheme.theme.colors.shadow]);
945
- const controlShadow = useMemo2(() => getComponentShadow(modalTheme.theme), [modalTheme.theme]);
946
- const modalVariables = useMemo2(() => ({
947
- "--ui-kit-modal-overlay": modalTheme.overlay,
948
- "--ui-kit-modal-surface": modalTheme.colors.surface,
949
- "--ui-kit-modal-surface-raised": modalTheme.surfaceRaised,
950
- "--ui-kit-modal-text": modalTheme.colors.text,
951
- "--ui-kit-modal-border-soft": modalTheme.borderSoft,
952
- "--ui-kit-modal-divider": withAlpha(modalTheme.colors.text, 0.06),
953
- "--ui-kit-modal-primary": modalTheme.colors.primary,
954
- "--ui-kit-modal-on-primary": modalTheme.colors.onPrimary,
955
- "--ui-kit-modal-shadow": modalShadow,
956
- "--ui-kit-modal-control-shadow": controlShadow,
957
- "--ui-kit-modal-busy-overlay": withAlpha(modalTheme.colors.surface, 0.58),
958
- "--ui-kit-modal-button-shadow-outlined": `0 14px 28px ${withAlpha(modalTheme.colors.text, 0.08)}`,
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(--ui-kit-modal-text)]",
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
- ...modalVariables,
1040
+ ...modalThemeVariables,
1065
1041
  padding: isMaximized ? 0 : 16,
1066
- backgroundColor: "var(--ui-kit-modal-overlay)"
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-[linear-gradient(180deg,var(--ui-kit-modal-surface-raised),var(--ui-kit-modal-surface))]",
1074
- "text-[var(--ui-kit-modal-text)]",
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: "var(--ui-kit-modal-border-soft)",
1084
- boxShadow: "var(--ui-kit-modal-shadow)",
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: "var(--ui-kit-modal-divider)" },
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(--ui-kit-modal-text)] leading-none shadow-[var(--ui-kit-modal-control-shadow)]",
1113
- style: { borderColor: "var(--ui-kit-modal-border-soft)" },
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(--ui-kit-modal-text)]",
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: "var(--ui-kit-modal-border-soft)",
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 bg-[var(--ui-kit-modal-busy-overlay)] backdrop-blur-[2px]",
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: "var(--ui-kit-modal-divider)" },
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(--ui-kit-muted-text)]", children: hint }) : null
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(--ui-kit-muted-text)]", children: hint }) : null
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 = controlMetrics.paddingX + fileIconSize;
1404
- const emailAdornmentWidth = controlMetrics.paddingX + fileIconSize;
1405
- const passwordAdornmentWidth = controlMetrics.paddingX + passwordLockIconSize;
1406
- const disabledFieldStyle = disabled ? { opacity: DISABLED_FIELD_OPACITY } : {};
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(--ui-kit-placeholder)]",
1623
+ "duration-150 placeholder:text-[var(--theme-textLight)]",
1412
1624
  FIELD_HEIGHT_CLASSNAMES[controlSize],
1413
1625
  FIELD_TEXT_CLASSNAMES[controlSize],
1414
- error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
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
- error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
1426
- disabled ? "cursor-not-allowed" : null
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(--ui-kit-placeholder)]",
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 = error ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
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: { ...style, ...disabledFieldStyle },
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
- padding: showUploadLabel ? `0 ${controlMetrics.buttonPaddingX}px 0 ${Math.max(8, Math.round(controlMetrics.paddingX / 2))}px` : 0
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: /* @__PURE__ */ jsx6("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: hasSelectedFiles ? /* @__PURE__ */ jsxs7(Fragment2, { 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(--ui-kit-placeholder)]"
1756
+ hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
1630
1757
  ),
1631
- style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` },
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
- ] }) : isEmailField ? /* @__PURE__ */ jsxs7(
1770
+ ] }) : canTogglePasswordVisibility ? /* @__PURE__ */ jsxs7(
1641
1771
  "div",
1642
1772
  {
1643
1773
  className: cx(adornedFieldClassName, className),
1644
- style: { ...style, ...disabledFieldStyle },
1774
+ style,
1645
1775
  children: [
1646
1776
  /* @__PURE__ */ jsx6(
1647
- "span",
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 bg-transparent",
1651
- adornmentColorClassName
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: { width: emailAdornmentWidth },
1654
- "aria-hidden": "true",
1655
- children: /* @__PURE__ */ jsxs7("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: [
1656
- /* @__PURE__ */ jsx6(
1657
- "path",
1658
- {
1659
- 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",
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
- style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
1814
+ "aria-invalid": hasResolvedError,
1815
+ style: {
1816
+ padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
1817
+ }
1690
1818
  }
1691
1819
  )
1692
1820
  ]
1693
1821
  }
1694
- ) : canTogglePasswordVisibility ? /* @__PURE__ */ jsxs7(
1822
+ ) : hasLeadingIcon ? /* @__PURE__ */ jsxs7(
1695
1823
  "div",
1696
1824
  {
1697
1825
  className: cx(adornedFieldClassName, className),
1698
- style: { ...style, ...disabledFieldStyle },
1826
+ style,
1699
1827
  children: [
1700
1828
  /* @__PURE__ */ jsx6(
1701
- "button",
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 border-0",
1715
- "bg-transparent p-0 appearance-none",
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: { width: passwordAdornmentWidth },
1720
- children: isPasswordVisible ? /* @__PURE__ */ jsxs7(
1721
- "svg",
1722
- {
1723
- width: passwordLockIconSize,
1724
- height: passwordLockIconSize,
1725
- viewBox: "0 0 20 20",
1726
- fill: "none",
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
- style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
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: { boxShadow: "var(--ui-kit-component-shadow)", ...style, ...disabledFieldStyle }
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__ */ jsxs8("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
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 pickerAdornmentWidth = controlMetrics.paddingX + accessoryMetrics.iconSize;
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(--ui-kit-placeholder)]",
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(--ui-kit-negative-soft)" } : void 0);
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(--ui-kit-placeholder)]",
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: { width: pickerAdornmentWidth },
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: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`
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
- paddingRight: controlMetrics.paddingX + trailingInset,
2444
- boxShadow: resolvedError ? "0 0 0 3px var(--ui-kit-negative-soft), var(--ui-kit-component-shadow)" : "var(--ui-kit-component-shadow)",
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 { theme, mutedText } = useUiKitTheme();
2613
- const componentShadow = getComponentShadow(theme);
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 = withAlpha(theme.colors.text, 0.5);
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 controlMetrics = getControlMetrics(controlSize);
2721
+ const controlTextNudgeStyle = getSelectTextNudgeStyle();
2654
2722
  const listboxId = `${resolvedId}-listbox`;
2655
2723
  const searchInputId = `${resolvedId}-search`;
2656
- const scrollbarThumbColor = withAlpha(theme.colors.text, 0.22);
2657
- const scrollbarThumbHoverColor = withAlpha(theme.colors.text, 0.32);
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: "var(--ui-kit-select-control-shadow)"
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(--ui-kit-select-placeholder)]",
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", style: selectVariables, children: [
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: `${controlMetrics.paddingY}px ${controlMetrics.selectPaddingRight}px ${controlMetrics.paddingY}px ${controlMetrics.paddingX}px`,
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(--ui-kit-select-indicator-disabled)]" : "text-[var(--ui-kit-select-muted)]"
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: var(--ui-kit-select-scrollbar-thumb) transparent;
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: var(--ui-kit-select-scrollbar-thumb);
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: var(--ui-kit-select-scrollbar-thumb-hover);
3213
+ background: ${scrollbarThumbHoverColor};
3170
3214
  background-clip: padding-box;
3171
3215
  }
3172
3216
 
3173
3217
  #${searchInputId}::placeholder {
3174
- color: var(--ui-kit-select-placeholder);
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: "var(--theme-textLight)",
3187
- backgroundColor: "var(--ui-kit-select-surface-raised)",
3188
- boxShadow: "var(--ui-kit-select-control-shadow)",
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: "var(--ui-kit-select-divider)" },
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: "var(--theme-textLight)",
3222
- boxShadow: "var(--ui-kit-select-control-shadow)"
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: "var(--ui-kit-select-divider)" },
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(--ui-kit-select-muted)]",
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(--ui-kit-select-muted)]",
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(--ui-kit-select-option-disabled)]" : "cursor-pointer",
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(--ui-kit-select-option-selected-bg)] font-bold" : null,
3299
- !isSelected && isHighlighted ? "bg-[var(--ui-kit-select-option-hover-bg)]" : null,
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)" : withAlpha(theme.colors.text, 0.26),
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: "var(--ui-kit-select-divider)" },
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(--ui-kit-muted-text)]",
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 uiKitTheme = useUiKitTheme();
4279
- const { theme, borderSoft, borderStrong, focusRing, mutedText, surfaceMuted, surfaceRaised } = uiKitTheme;
4280
- const componentShadow = getComponentShadow(theme);
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 = withAlpha(theme.colors.textLight, 0.3);
4305
- const scrollbarThumbHoverColor = theme.colors.text;
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 ${withAlpha(theme.colors.shadow, 0.7)}`;
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 ${borderSoft}`
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" ? withAlpha(theme.colors.negative, 0.28) : borderSoft}`,
4365
- backgroundColor: tone === "danger" ? withAlpha(theme.colors.negative, 0.08) : withAlpha(theme.colors.surface, 0.82),
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 ${borderSoft}`,
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 ${borderSoft}`,
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: `${componentShadow}, 0 0 0 0 ${focusRing}`
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 ${borderSoft}`,
4413
- backgroundColor: withAlpha(theme.colors.surface, 0.94),
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 ${borderSoft}`,
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: mutedText }, children: "-" })
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 ${borderStrong}`,
4524
- backgroundColor: withAlpha(theme.colors.surface, 0.64),
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(--ui-kit-surface-raised)] p-[18px] text-[var(--theme-text)]",
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: "var(--ui-kit-border-soft)",
4572
- boxShadow: "var(--ui-kit-component-shadow)"
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(--ui-kit-muted-text)]", children: resolvedLabels.loadingMessage }) : null,
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 : surfaceMuted;
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 ${borderSoft}`,
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: mutedText,
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: mutedText }, children: "-" })
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 ${borderSoft}`
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: "var(--ui-kit-border-soft)",
4755
- boxShadow: "var(--ui-kit-component-shadow)"
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 ${borderStrong}`,
4770
- color: mutedText,
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 ${borderStrong}`,
4792
- color: mutedText,
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 : surfaceMuted;
4809
- const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${surfaceMuted}, ${surfaceMuted})`;
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 ${borderSoft}`,
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(--ui-kit-muted-text)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
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(--ui-kit-muted-text)]",
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: "var(--ui-kit-border-soft)",
4907
- boxShadow: "var(--ui-kit-component-shadow)"
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(--ui-kit-muted-text)]", children: resolvedLabels.totalPagesInfoLabel }),
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(--ui-kit-muted-text)]", children: resolvedLabels.totalItemsInfoLabel }),
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(--ui-kit-muted-text)]", children: resolvedLabels.currentPageInfoLabel }),
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(--ui-kit-muted-text)]", children: resolvedLabels.currentPageItemsInfoLabel }),
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: borderSoft }) }),
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(--ui-kit-negative-soft), var(--ui-kit-component-shadow)" : "var(--ui-kit-component-shadow)",
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
  }