smartsell-ui-kit 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -62,7 +62,7 @@ function styleInject(css, { insertAt } = {}) {
62
62
  }
63
63
 
64
64
  // src/styles/ui-kit.css
65
- 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');
65
+ 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');
66
66
 
67
67
  // node_modules/@fontsource/lato/files/lato-latin-400-normal.woff
68
68
  var lato_latin_400_normal_default = "data:font/woff;base64,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";
@@ -149,21 +149,22 @@ var cx = (...values) => {
149
149
  };
150
150
  var UI_KIT_ROOT_CLASSNAME = "ui-kit-root";
151
151
 
152
- // src/foundation/color.ts
153
- function withAlpha(hex, alpha) {
154
- const normalized = hex.replace("#", "").trim();
155
- const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
156
- const red = Number.parseInt(value.slice(0, 2), 16);
157
- const green = Number.parseInt(value.slice(2, 4), 16);
158
- const blue = Number.parseInt(value.slice(4, 6), 16);
159
- return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
160
- }
161
-
162
152
  // src/foundation/componentState.ts
163
153
  var DISABLED_COMPONENT_OPACITY = 0.5;
164
154
  var DISABLED_FIELD_OPACITY = 0.7;
165
155
 
166
156
  // src/foundation/controlSize.ts
157
+ var CONTROL_LEADING_ICON_SHIFT = 5;
158
+ var CONTROL_TEXT_VERTICAL_SHIFT = 1;
159
+ var SELECT_TEXT_VERTICAL_SHIFT_REDUCTION = 1;
160
+ var getControlTextVerticalPadding = (size, shift = CONTROL_TEXT_VERTICAL_SHIFT) => {
161
+ const metrics = getControlMetrics(size);
162
+ return {
163
+ top: Math.max(0, metrics.paddingY - shift),
164
+ bottom: metrics.paddingY + shift
165
+ };
166
+ };
167
+ var getSelectTextVerticalShift = () => Math.max(0, CONTROL_TEXT_VERTICAL_SHIFT - SELECT_TEXT_VERTICAL_SHIFT_REDUCTION);
167
168
  var CONTROL_METRICS_BY_SIZE = {
168
169
  sm: {
169
170
  height: 30,
@@ -197,22 +198,37 @@ var CONTROL_METRICS_BY_SIZE = {
197
198
  }
198
199
  };
199
200
  var getControlMetrics = (size) => CONTROL_METRICS_BY_SIZE[size];
201
+ var getControlLeadingIconInset = (size) => {
202
+ const metrics = getControlMetrics(size);
203
+ return Math.round(metrics.paddingX / 2) + CONTROL_LEADING_ICON_SHIFT;
204
+ };
205
+ var getControlLeadingAdornmentWidth = (size, iconSize) => {
206
+ return getControlLeadingIconInset(size) + iconSize;
207
+ };
208
+ var getTextInputPadding = (size, options = {}) => {
209
+ var _a, _b;
210
+ const metrics = getControlMetrics(size);
211
+ const { top, bottom } = getControlTextVerticalPadding(size);
212
+ const leadingPadding = (_a = options.leadingPadding) != null ? _a : metrics.paddingX;
213
+ const trailingPadding = (_b = options.trailingPadding) != null ? _b : metrics.paddingX;
214
+ return `${top}px ${trailingPadding}px ${bottom}px ${leadingPadding}px`;
215
+ };
216
+ var getSelectControlPadding = (size) => {
217
+ const metrics = getControlMetrics(size);
218
+ const { top, bottom } = getControlTextVerticalPadding(size, getSelectTextVerticalShift());
219
+ return `${top}px ${metrics.selectPaddingRight}px ${bottom}px ${metrics.paddingX}px`;
220
+ };
221
+ var getControlTextNudgeStyle = (shift = CONTROL_TEXT_VERTICAL_SHIFT) => ({
222
+ transform: `translateY(-${shift}px)`
223
+ });
224
+ var getSelectTextNudgeStyle = () => getControlTextNudgeStyle(getSelectTextVerticalShift());
200
225
  var getSelectIndicatorOffset = (size) => getControlMetrics(size).selectIndicatorOffset;
201
226
 
202
227
  // src/foundation/shadow.ts
203
- var LIGHT_SHADOW = "#B8B8B8";
204
- var DARK_SHADOW = "#181818";
205
- function getComponentShadow(theme) {
206
- var _a;
207
- const colors = theme.colors;
208
- const fallbackShadow = `${theme.title}`.toUpperCase() === "DARK" ? DARK_SHADOW : LIGHT_SHADOW;
209
- const shadowColor = (_a = colors.shadow) != null ? _a : fallbackShadow;
210
- return `${shadowColor} 0px 4px 5px`;
211
- }
212
228
  function getInsetBorderShadow(borderColor, options = {}) {
213
229
  const {
214
230
  outerShadow,
215
- componentShadow = "var(--ui-kit-component-shadow)",
231
+ componentShadow = "0px 4px 5px var(--theme-shadow)",
216
232
  insetWidth = 1
217
233
  } = options;
218
234
  return [
@@ -297,29 +313,14 @@ var ROOT_THEME_VARIABLES = [
297
313
  ["--theme-onPrimary", "onPrimary"],
298
314
  ["--theme-onSecondary", "onSecondary"]
299
315
  ];
300
- var syncUiKitThemeVariables = (tokens) => {
316
+ var syncUiKitThemeVariables = (theme) => {
301
317
  if (typeof document === "undefined") {
302
318
  return;
303
319
  }
304
320
  const rootStyle = document.documentElement.style;
305
321
  ROOT_THEME_VARIABLES.forEach(([variableName, colorName]) => {
306
- rootStyle.setProperty(variableName, tokens.theme.colors[colorName]);
322
+ rootStyle.setProperty(variableName, theme.colors[colorName]);
307
323
  });
308
- rootStyle.setProperty("--ui-kit-border-soft", tokens.borderSoft);
309
- rootStyle.setProperty("--ui-kit-border-strong", tokens.borderStrong);
310
- rootStyle.setProperty("--ui-kit-surface-muted", tokens.surfaceMuted);
311
- rootStyle.setProperty("--ui-kit-surface-raised", tokens.surfaceRaised);
312
- rootStyle.setProperty("--ui-kit-overlay", tokens.overlay);
313
- rootStyle.setProperty("--ui-kit-focus-ring", tokens.focusRing);
314
- rootStyle.setProperty("--ui-kit-muted-text", tokens.mutedText);
315
- rootStyle.setProperty("--ui-kit-component-shadow", getComponentShadow(tokens.theme));
316
- rootStyle.setProperty("--ui-kit-card-bg", withAlpha(tokens.theme.colors.background, 0.7));
317
- rootStyle.setProperty("--ui-kit-card-border", withAlpha(tokens.theme.colors.text, 0.5));
318
- rootStyle.setProperty("--ui-kit-button-outline-hover", withAlpha(tokens.theme.colors.text, 0.08));
319
- rootStyle.setProperty("--ui-kit-button-outline-active", withAlpha(tokens.theme.colors.text, 0.14));
320
- rootStyle.setProperty("--ui-kit-button-ghost-border", withAlpha(tokens.theme.colors.primary, 0.5));
321
- rootStyle.setProperty("--ui-kit-placeholder", withAlpha(tokens.theme.colors.text, 0.5));
322
- rootStyle.setProperty("--ui-kit-negative-soft", withAlpha(tokens.theme.colors.negative, 0.12));
323
324
  };
324
325
  function normalizeUiKitTheme(theme) {
325
326
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
@@ -353,26 +354,13 @@ function normalizeUiKitTheme(theme) {
353
354
  color: normalizedColors
354
355
  };
355
356
  }
356
- function createUiKitThemeTokens(themeSource) {
357
- const theme = normalizeUiKitTheme(themeSource);
358
- return {
359
- theme,
360
- borderSoft: withAlpha(theme.colors.text, 0.1),
361
- borderStrong: withAlpha(theme.colors.text, 0.16),
362
- surfaceMuted: withAlpha(theme.colors.text, 0.04),
363
- surfaceRaised: withAlpha(theme.colors.surface, 0.94),
364
- overlay: withAlpha("#030712", 0.62),
365
- focusRing: withAlpha(theme.colors.primary, 0.22),
366
- mutedText: withAlpha(theme.colors.text, 0.72)
367
- };
368
- }
369
357
  function useUiKitTheme() {
370
358
  const activeTheme = (0, import_smartsell_theme.useThemeValue)();
371
- const tokens = (0, import_react.useMemo)(() => createUiKitThemeTokens(activeTheme), [activeTheme]);
359
+ const theme = (0, import_react.useMemo)(() => normalizeUiKitTheme(activeTheme), [activeTheme]);
372
360
  (0, import_react.useEffect)(() => {
373
- syncUiKitThemeVariables(tokens);
374
- }, [tokens]);
375
- return tokens;
361
+ syncUiKitThemeVariables(theme);
362
+ }, [theme]);
363
+ return theme;
376
364
  }
377
365
 
378
366
  // src/components/Button.tsx
@@ -400,10 +388,10 @@ var BUTTON_VARIANT_CLASSNAMES = {
400
388
  "text-[var(--theme-text)]",
401
389
  "shadow-[0px_4px_5px_var(--theme-shadow)]",
402
390
  "hover:-translate-y-[0.5px]",
403
- "hover:bg-[var(--ui-kit-button-outline-hover)]",
391
+ "hover:bg-[var(--theme-surface)]",
404
392
  "active:translate-y-px",
405
393
  "active:scale-[0.985]",
406
- "active:bg-[var(--ui-kit-button-outline-active)]"
394
+ "active:bg-[var(--theme-secondary)]"
407
395
  ].join(" "),
408
396
  ghost: [
409
397
  "border-transparent",
@@ -411,13 +399,13 @@ var BUTTON_VARIANT_CLASSNAMES = {
411
399
  "text-[var(--theme-text)]",
412
400
  "shadow-none",
413
401
  "hover:-translate-y-[0.5px]",
414
- "hover:border-[var(--ui-kit-button-ghost-border)]",
402
+ "hover:border-[var(--theme-primary)]",
415
403
  "hover:bg-[var(--theme-primary)]",
416
404
  "hover:text-[var(--theme-onPrimary)]",
417
405
  "hover:shadow-[0px_4px_5px_var(--theme-shadow)]",
418
406
  "active:translate-y-px",
419
407
  "active:scale-[0.985]",
420
- "active:border-[var(--ui-kit-button-ghost-border)]",
408
+ "active:border-[var(--theme-primary)]",
421
409
  "active:bg-[var(--theme-primary)]",
422
410
  "active:text-[var(--theme-onPrimary)]",
423
411
  "active:shadow-[0px_4px_5px_var(--theme-shadow)]"
@@ -480,10 +468,8 @@ function Card({
480
468
  ...rest,
481
469
  className: cx(
482
470
  UI_KIT_ROOT_CLASSNAME,
483
- "rounded-[28px] border text-[var(--theme-text)]",
471
+ "rounded-[28px] border border-[var(--theme-secondary)] bg-[var(--theme-surface)] text-[var(--theme-text)]",
484
472
  "shadow-[0px_4px_5px_var(--theme-shadow)]",
485
- "[background:var(--ui-kit-card-bg)]",
486
- "[border-color:var(--ui-kit-card-border)]",
487
473
  padded && "p-6",
488
474
  className
489
475
  ),
@@ -512,7 +498,7 @@ function CardSmall({
512
498
  style,
513
499
  ...rest
514
500
  }) {
515
- const { theme } = useUiKitTheme();
501
+ const theme = useUiKitTheme();
516
502
  const accentColor = color != null ? color : theme.colors.primary;
517
503
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
518
504
  "div",
@@ -522,7 +508,7 @@ function CardSmall({
522
508
  UI_KIT_ROOT_CLASSNAME,
523
509
  "relative flex min-h-20 items-center gap-4 overflow-hidden",
524
510
  "rounded-2xl border border-solid border-[var(--ui-kit-accent)]",
525
- "bg-[var(--ui-kit-surface-raised)] pl-6 pr-6 text-[var(--theme-text)]",
511
+ "bg-[var(--theme-surface)] pl-6 pr-6 text-[var(--theme-text)]",
526
512
  "shadow-[0px_4px_5px_var(--theme-shadow)]",
527
513
  className
528
514
  ),
@@ -608,7 +594,7 @@ function CheckboxIndicator({
608
594
  uncheckedBackgroundColor,
609
595
  style
610
596
  }) {
611
- const { theme } = useUiKitTheme();
597
+ const theme = useUiKitTheme();
612
598
  const isActive = checked || indeterminate;
613
599
  const resolvedCheckedColor = checkedColor != null ? checkedColor : theme.colors.textLight;
614
600
  const resolvedIconColor = iconColor != null ? iconColor : theme.colors.surface;
@@ -658,7 +644,8 @@ function Checkbox({
658
644
  onBlur,
659
645
  ...rest
660
646
  }) {
661
- const { theme, mutedText } = useUiKitTheme();
647
+ const theme = useUiKitTheme();
648
+ const mutedText = theme.colors.textLight;
662
649
  const indicatorSize = getCheckboxSize(controlSize);
663
650
  const hasLabel = hasNodeContent(label);
664
651
  const hasHint = hasNodeContent(hint);
@@ -666,7 +653,6 @@ function Checkbox({
666
653
  const hasSecondaryContent = hasLabel && hasHint;
667
654
  const resolvedId = id != null ? id : `ss-checkbox-${(0, import_react2.useId)().replace(/:/g, "")}`;
668
655
  const inputRef = (0, import_react2.useRef)(null);
669
- const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
670
656
  const [internalChecked, setInternalChecked] = (0, import_react2.useState)(Boolean(defaultChecked));
671
657
  const isControlled = checked !== void 0;
672
658
  const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
@@ -698,9 +684,7 @@ function Checkbox({
698
684
  {
699
685
  className: cx(
700
686
  "relative inline-flex shrink-0 items-center justify-center rounded-full p-0.5",
701
- hasSecondaryContent ? "mt-px" : "mt-0",
702
- "transition-shadow duration-150",
703
- isFocused ? "shadow-[0_0_0_3px_var(--ui-kit-focus-ring)]" : "shadow-none"
687
+ hasSecondaryContent ? "mt-px" : "mt-0"
704
688
  ),
705
689
  children: [
706
690
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -720,11 +704,9 @@ function Checkbox({
720
704
  onChange == null ? void 0 : onChange(event);
721
705
  },
722
706
  onFocus: (event) => {
723
- setIsFocused(true);
724
707
  onFocus == null ? void 0 : onFocus(event);
725
708
  },
726
709
  onBlur: (event) => {
727
- setIsFocused(false);
728
710
  onBlur == null ? void 0 : onBlur(event);
729
711
  },
730
712
  className: cx(
@@ -742,7 +724,7 @@ function Checkbox({
742
724
  size: indicatorSize,
743
725
  checkedColor: theme.colors.primary,
744
726
  iconColor: theme.colors.onPrimary,
745
- uncheckedBorderColor: withAlpha(theme.colors.text, 0.24),
727
+ uncheckedBorderColor: theme.colors.text,
746
728
  uncheckedBackgroundColor: theme.colors.surface,
747
729
  style: disabled ? { opacity: 1 } : void 0
748
730
  }
@@ -762,7 +744,7 @@ function Checkbox({
762
744
  label,
763
745
  required ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
764
746
  ] }) : null,
765
- hint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null,
747
+ hint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null,
766
748
  error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
767
749
  ]
768
750
  }
@@ -780,29 +762,25 @@ var import_react4 = require("react");
780
762
  // src/components/Modal.tsx
781
763
  var import_react3 = require("react");
782
764
  var import_jsx_runtime5 = require("react/jsx-runtime");
783
- var isUiKitThemeTokens = (theme) => {
784
- return Boolean(theme && typeof theme === "object" && "theme" in theme);
765
+ var isUiKitTheme = (theme) => {
766
+ return Boolean(theme && typeof theme === "object" && "title" in theme && "color" in theme);
785
767
  };
786
- var withResolvedModalColors = (theme) => ({
787
- ...theme,
788
- colors: theme.theme.colors
789
- });
790
768
  var resolveTheme = (baseTheme, themeOverride) => {
791
- if (isUiKitThemeTokens(themeOverride)) {
792
- return withResolvedModalColors(themeOverride);
769
+ if (isUiKitTheme(themeOverride)) {
770
+ return themeOverride;
793
771
  }
794
772
  if (!(themeOverride == null ? void 0 : themeOverride.colors)) {
795
- return withResolvedModalColors(baseTheme);
773
+ return baseTheme;
796
774
  }
797
775
  const colors = {
798
- ...baseTheme.theme.colors,
776
+ ...baseTheme.colors,
799
777
  ...themeOverride.colors
800
778
  };
801
- return withResolvedModalColors(createUiKitThemeTokens({
802
- ...baseTheme.theme,
779
+ return normalizeUiKitTheme({
780
+ ...baseTheme,
803
781
  colors,
804
782
  color: colors
805
- }));
783
+ });
806
784
  };
807
785
  var normalizeWidth = (maxWidth) => {
808
786
  if (typeof maxWidth === "number") {
@@ -826,8 +804,7 @@ var createTitleId = (title) => {
826
804
  return "smartsell-modal-dialog";
827
805
  };
828
806
  function ModalActionButton({
829
- action,
830
- theme
807
+ action
831
808
  }) {
832
809
  var _a, _b;
833
810
  const {
@@ -842,12 +819,12 @@ function ModalActionButton({
842
819
  "m-0 text-center font-bold leading-[1.2]",
843
820
  appearance === "link" ? "p-0 text-[1.05rem]" : "px-[1.15rem] py-[0.9rem] text-[1.05rem]",
844
821
  disabled ? "cursor-not-allowed saturate-0" : "cursor-pointer",
845
- appearance === "text" && "border border-transparent bg-transparent text-[var(--ui-kit-modal-primary)] shadow-none",
846
- appearance === "link" && "border-0 bg-transparent text-[var(--ui-kit-modal-primary)] shadow-none",
847
- appearance === "outlined" && "border-2 border-[var(--ui-kit-modal-primary)] bg-transparent",
848
- appearance === "outlined" && "text-[var(--ui-kit-modal-primary)] shadow-[var(--ui-kit-modal-button-shadow-outlined)]",
849
- appearance === "contained" && "border border-transparent bg-[var(--ui-kit-modal-primary)]",
850
- appearance === "contained" && "text-[var(--ui-kit-modal-on-primary)] shadow-[var(--ui-kit-modal-button-shadow-contained)]"
822
+ appearance === "text" && "border border-transparent bg-transparent text-[var(--theme-primary)] shadow-none",
823
+ appearance === "link" && "border-0 bg-transparent text-[var(--theme-primary)] shadow-none",
824
+ appearance === "outlined" && "border-2 border-[var(--theme-primary)] bg-transparent",
825
+ appearance === "outlined" && "text-[var(--theme-primary)]",
826
+ appearance === "contained" && "border border-transparent bg-[var(--theme-primary)]",
827
+ appearance === "contained" && "text-[var(--theme-onPrimary)]"
851
828
  );
852
829
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
853
830
  "div",
@@ -865,7 +842,10 @@ function ModalActionButton({
865
842
  onClick: disabled ? void 0 : onClick,
866
843
  disabled,
867
844
  className: buttonClassName,
868
- style: { opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1 },
845
+ style: {
846
+ opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
847
+ boxShadow: appearance === "text" || appearance === "link" ? "none" : "0 14px 28px var(--theme-shadow)"
848
+ },
869
849
  children: label
870
850
  }
871
851
  )
@@ -882,8 +862,8 @@ function ModalBusyIndicator({
882
862
  role: "status",
883
863
  className: "relative inline-flex h-14 w-14 items-center justify-center rounded-full",
884
864
  style: {
885
- backgroundColor: withAlpha(theme.colors.surface, 0.88),
886
- boxShadow: `0 18px 36px ${withAlpha(theme.colors.text, 0.08)}`
865
+ backgroundColor: theme.colors.surface,
866
+ boxShadow: `0 18px 36px ${theme.colors.shadow}`
887
867
  },
888
868
  children: [
889
869
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ui-kit-sr-only", children: "Loading" }),
@@ -894,7 +874,7 @@ function ModalBusyIndicator({
894
874
  cx: "20",
895
875
  cy: "20",
896
876
  r: "16",
897
- stroke: withAlpha(theme.colors.text, 0.12),
877
+ stroke: theme.colors.textLight,
898
878
  strokeWidth: "4"
899
879
  }
900
880
  ),
@@ -977,24 +957,22 @@ function UnifiedModal({
977
957
  const inheritedTheme = useUiKitTheme();
978
958
  const modalTheme = (0, import_react3.useMemo)(() => resolveTheme(inheritedTheme, theme), [inheritedTheme, theme]);
979
959
  const modalShadow = (0, import_react3.useMemo)(() => {
980
- return `0 34px 80px ${withAlpha(modalTheme.theme.colors.shadow, 0.28)}`;
981
- }, [modalTheme.theme.colors.shadow]);
982
- const controlShadow = (0, import_react3.useMemo)(() => getComponentShadow(modalTheme.theme), [modalTheme.theme]);
983
- const modalVariables = (0, import_react3.useMemo)(() => ({
984
- "--ui-kit-modal-overlay": modalTheme.overlay,
985
- "--ui-kit-modal-surface": modalTheme.colors.surface,
986
- "--ui-kit-modal-surface-raised": modalTheme.surfaceRaised,
987
- "--ui-kit-modal-text": modalTheme.colors.text,
988
- "--ui-kit-modal-border-soft": modalTheme.borderSoft,
989
- "--ui-kit-modal-divider": withAlpha(modalTheme.colors.text, 0.06),
990
- "--ui-kit-modal-primary": modalTheme.colors.primary,
991
- "--ui-kit-modal-on-primary": modalTheme.colors.onPrimary,
992
- "--ui-kit-modal-shadow": modalShadow,
993
- "--ui-kit-modal-control-shadow": controlShadow,
994
- "--ui-kit-modal-busy-overlay": withAlpha(modalTheme.colors.surface, 0.58),
995
- "--ui-kit-modal-button-shadow-outlined": `0 14px 28px ${withAlpha(modalTheme.colors.text, 0.08)}`,
996
- "--ui-kit-modal-button-shadow-contained": `0 14px 28px ${withAlpha(modalTheme.colors.primary, 0.22)}`
997
- }), [controlShadow, modalShadow, modalTheme]);
960
+ return `0 34px 80px ${modalTheme.colors.shadow}`;
961
+ }, [modalTheme.colors.shadow]);
962
+ const controlShadow = "0px 4px 5px var(--theme-shadow)";
963
+ const modalThemeVariables = (0, import_react3.useMemo)(() => ({
964
+ "--theme-background": modalTheme.colors.background,
965
+ "--theme-surface": modalTheme.colors.surface,
966
+ "--theme-text": modalTheme.colors.text,
967
+ "--theme-textLight": modalTheme.colors.textLight,
968
+ "--theme-primary": modalTheme.colors.primary,
969
+ "--theme-onPrimary": modalTheme.colors.onPrimary,
970
+ "--theme-secondary": modalTheme.colors.secondary,
971
+ "--theme-onSecondary": modalTheme.colors.onSecondary,
972
+ "--theme-negative": modalTheme.colors.negative,
973
+ "--theme-warning": modalTheme.colors.warning,
974
+ "--theme-shadow": modalTheme.colors.shadow
975
+ }), [modalTheme]);
998
976
  const [isMaximized, setIsMaximized] = (0, import_react3.useState)(maximized != null ? maximized : false);
999
977
  const titleId = (0, import_react3.useMemo)(() => createTitleId(title), [title]);
1000
978
  const shouldDisableDismiss = disableDismiss || isBusy;
@@ -1031,7 +1009,7 @@ function UnifiedModal({
1031
1009
  "h2",
1032
1010
  {
1033
1011
  id: titleId,
1034
- className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--ui-kit-modal-text)]",
1012
+ className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--theme-text)]",
1035
1013
  children: title
1036
1014
  }
1037
1015
  ) : null;
@@ -1041,8 +1019,7 @@ function UnifiedModal({
1041
1019
  footerContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1042
1020
  ModalActionButton,
1043
1021
  {
1044
- action: { ...closeAction, disabled: closeAction.disabled || isBusy },
1045
- theme: modalTheme
1022
+ action: { ...closeAction, disabled: closeAction.disabled || isBusy }
1046
1023
  }
1047
1024
  );
1048
1025
  } else {
@@ -1075,8 +1052,7 @@ function UnifiedModal({
1075
1052
  footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1076
1053
  ModalActionButton,
1077
1054
  {
1078
- action,
1079
- theme: modalTheme
1055
+ action
1080
1056
  },
1081
1057
  `modal-action-${index}`
1082
1058
  )) : void 0;
@@ -1098,17 +1074,17 @@ function UnifiedModal({
1098
1074
  },
1099
1075
  className: cx(UI_KIT_ROOT_CLASSNAME, "fixed inset-0 z-[70] flex items-center justify-center backdrop-blur-[8px]"),
1100
1076
  style: {
1101
- ...modalVariables,
1077
+ ...modalThemeVariables,
1102
1078
  padding: isMaximized ? 0 : 16,
1103
- backgroundColor: "var(--ui-kit-modal-overlay)"
1079
+ backgroundColor: modalTheme.colors.shadow
1104
1080
  },
1105
1081
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1106
1082
  "div",
1107
1083
  {
1108
1084
  className: cx(
1109
1085
  "relative flex flex-col overflow-hidden border",
1110
- "bg-[linear-gradient(180deg,var(--ui-kit-modal-surface-raised),var(--ui-kit-modal-surface))]",
1111
- "text-[var(--ui-kit-modal-text)]",
1086
+ "bg-[var(--theme-surface)]",
1087
+ "text-[var(--theme-text)]",
1112
1088
  isMaximized ? "rounded-none" : "rounded-[30px]"
1113
1089
  ),
1114
1090
  style: {
@@ -1117,8 +1093,8 @@ function UnifiedModal({
1117
1093
  height: isMaximized ? "100vh" : void 0,
1118
1094
  maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
1119
1095
  minWidth: isMaximized ? "100vw" : 300,
1120
- borderColor: "var(--ui-kit-modal-border-soft)",
1121
- boxShadow: "var(--ui-kit-modal-shadow)",
1096
+ borderColor: modalTheme.colors.secondary,
1097
+ boxShadow: modalShadow,
1122
1098
  ...contentStyle
1123
1099
  },
1124
1100
  children: [
@@ -1126,7 +1102,7 @@ function UnifiedModal({
1126
1102
  "div",
1127
1103
  {
1128
1104
  className: "flex items-start justify-between gap-3 border-b px-5 pb-3 pt-[18px]",
1129
- style: { borderColor: "var(--ui-kit-modal-divider)" },
1105
+ style: { borderColor: modalTheme.colors.secondary },
1130
1106
  children: [
1131
1107
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1132
1108
  "div",
@@ -1146,8 +1122,8 @@ function UnifiedModal({
1146
1122
  title: isMaximized ? "Minimize" : "Maximize",
1147
1123
  type: "button",
1148
1124
  onClick: () => setIsMaximized((current) => !current),
1149
- 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)]",
1150
- style: { borderColor: "var(--ui-kit-modal-border-soft)" },
1125
+ 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",
1126
+ style: { borderColor: modalTheme.colors.secondary, boxShadow: controlShadow },
1151
1127
  children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MinimizeIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MaximizeIcon, {})
1152
1128
  }
1153
1129
  ) : null,
@@ -1159,12 +1135,12 @@ function UnifiedModal({
1159
1135
  onClick: shouldDisableDismiss ? void 0 : onClose,
1160
1136
  className: cx(
1161
1137
  "flex h-[30px] w-[30px] items-center justify-center rounded-full border",
1162
- "bg-transparent text-[20px] font-bold text-[var(--ui-kit-modal-text)]",
1163
- "shadow-[var(--ui-kit-modal-control-shadow)]",
1138
+ "bg-transparent text-[20px] font-bold text-[var(--theme-text)]",
1164
1139
  shouldDisableDismiss ? "cursor-not-allowed" : "cursor-pointer"
1165
1140
  ),
1166
1141
  style: {
1167
- borderColor: "var(--ui-kit-modal-border-soft)",
1142
+ borderColor: modalTheme.colors.secondary,
1143
+ boxShadow: controlShadow,
1168
1144
  opacity: shouldDisableDismiss ? DISABLED_COMPONENT_OPACITY : 1
1169
1145
  },
1170
1146
  children: "\xD7"
@@ -1193,7 +1169,8 @@ function UnifiedModal({
1193
1169
  isBusy ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1194
1170
  "div",
1195
1171
  {
1196
- className: "absolute inset-0 flex items-center justify-center bg-[var(--ui-kit-modal-busy-overlay)] backdrop-blur-[2px]",
1172
+ className: "absolute inset-0 flex items-center justify-center backdrop-blur-[2px]",
1173
+ style: { backgroundColor: modalTheme.colors.background },
1197
1174
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalBusyIndicator, { theme: modalTheme })
1198
1175
  }
1199
1176
  ) : null
@@ -1204,7 +1181,7 @@ function UnifiedModal({
1204
1181
  "div",
1205
1182
  {
1206
1183
  className: "flex justify-end gap-2.5 border-t px-5 pb-4 pt-3",
1207
- style: { borderColor: "var(--ui-kit-modal-divider)" },
1184
+ style: { borderColor: modalTheme.colors.secondary },
1208
1185
  children: footerContent
1209
1186
  }
1210
1187
  ) : null
@@ -1345,6 +1322,218 @@ var FIELD_PADDING_X_CLASSNAMES = {
1345
1322
  lg: "px-4"
1346
1323
  };
1347
1324
  var getPasswordToggleMetrics = (size) => PASSWORD_TOGGLE_METRICS_BY_SIZE[size];
1325
+ var LOGIN_VALIDATION_ERROR = "Spaces are not allowed.";
1326
+ var EMAIL_VALIDATION_ERROR = "Enter a valid email address.";
1327
+ var EMAIL_VALUE_PATTERN = /^[^\s@]+@[^\s@]+$/;
1328
+ var SPACE_PATTERN = /\s/;
1329
+ var isRenderableNode = (node) => node !== null && node !== void 0 && node !== false;
1330
+ var getInputValidationError = (type, value) => {
1331
+ if (!value) {
1332
+ return void 0;
1333
+ }
1334
+ if (type === "login") {
1335
+ return SPACE_PATTERN.test(value) ? LOGIN_VALIDATION_ERROR : void 0;
1336
+ }
1337
+ if (type === "email") {
1338
+ return EMAIL_VALUE_PATTERN.test(value) ? void 0 : EMAIL_VALIDATION_ERROR;
1339
+ }
1340
+ return void 0;
1341
+ };
1342
+ function EmailIcon({ size }) {
1343
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
1344
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1345
+ "path",
1346
+ {
1347
+ 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",
1348
+ stroke: "currentColor",
1349
+ strokeWidth: "1.6",
1350
+ strokeLinecap: "round",
1351
+ strokeLinejoin: "round"
1352
+ }
1353
+ ),
1354
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1355
+ "path",
1356
+ {
1357
+ d: "M4.375 6.25 10 10.625l5.625-4.375",
1358
+ stroke: "currentColor",
1359
+ strokeWidth: "1.6",
1360
+ strokeLinecap: "round",
1361
+ strokeLinejoin: "round"
1362
+ }
1363
+ )
1364
+ ] });
1365
+ }
1366
+ function LoginIcon({ size }) {
1367
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
1368
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "10", cy: "6.25", r: "3", stroke: "currentColor", strokeWidth: "1.6" }),
1369
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1370
+ "path",
1371
+ {
1372
+ d: "M4.75 16a5.25 5.25 0 0 1 10.5 0",
1373
+ stroke: "currentColor",
1374
+ strokeWidth: "1.6",
1375
+ strokeLinecap: "round"
1376
+ }
1377
+ )
1378
+ ] });
1379
+ }
1380
+ function FileIcon({ size, selected }) {
1381
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
1382
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1383
+ "path",
1384
+ {
1385
+ d: "M5.5 6.25h9",
1386
+ stroke: "currentColor",
1387
+ strokeWidth: "1.6",
1388
+ strokeLinecap: "round"
1389
+ }
1390
+ ),
1391
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1392
+ "path",
1393
+ {
1394
+ 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",
1395
+ stroke: "currentColor",
1396
+ strokeWidth: "1.6",
1397
+ strokeLinecap: "round",
1398
+ strokeLinejoin: "round"
1399
+ }
1400
+ ),
1401
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1402
+ "path",
1403
+ {
1404
+ d: "M7.75 8.25v5.5",
1405
+ stroke: "currentColor",
1406
+ strokeWidth: "1.6",
1407
+ strokeLinecap: "round"
1408
+ }
1409
+ ),
1410
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1411
+ "path",
1412
+ {
1413
+ d: "M10 8.25v5.5",
1414
+ stroke: "currentColor",
1415
+ strokeWidth: "1.6",
1416
+ strokeLinecap: "round"
1417
+ }
1418
+ ),
1419
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1420
+ "path",
1421
+ {
1422
+ d: "M12.25 8.25v5.5",
1423
+ stroke: "currentColor",
1424
+ strokeWidth: "1.6",
1425
+ strokeLinecap: "round"
1426
+ }
1427
+ ),
1428
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1429
+ "path",
1430
+ {
1431
+ 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",
1432
+ stroke: "currentColor",
1433
+ strokeWidth: "1.6",
1434
+ strokeLinecap: "round",
1435
+ strokeLinejoin: "round"
1436
+ }
1437
+ )
1438
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
1439
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1440
+ "path",
1441
+ {
1442
+ 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",
1443
+ stroke: "currentColor",
1444
+ strokeWidth: "1.6",
1445
+ strokeLinecap: "round",
1446
+ strokeLinejoin: "round"
1447
+ }
1448
+ ),
1449
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1450
+ "path",
1451
+ {
1452
+ d: "M11.875 2.75V6.25H15.375",
1453
+ stroke: "currentColor",
1454
+ strokeWidth: "1.6",
1455
+ strokeLinecap: "round",
1456
+ strokeLinejoin: "round"
1457
+ }
1458
+ ),
1459
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1460
+ "path",
1461
+ {
1462
+ d: "M7.5 10h5",
1463
+ stroke: "currentColor",
1464
+ strokeWidth: "1.6",
1465
+ strokeLinecap: "round"
1466
+ }
1467
+ ),
1468
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1469
+ "path",
1470
+ {
1471
+ d: "M7.5 13h5",
1472
+ stroke: "currentColor",
1473
+ strokeWidth: "1.6",
1474
+ strokeLinecap: "round"
1475
+ }
1476
+ )
1477
+ ] }) });
1478
+ }
1479
+ function PasswordVisibleIcon({ size }) {
1480
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
1481
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1482
+ "path",
1483
+ {
1484
+ d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
1485
+ stroke: "currentColor",
1486
+ strokeWidth: "1.8",
1487
+ strokeLinecap: "round",
1488
+ strokeLinejoin: "round"
1489
+ }
1490
+ ),
1491
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1492
+ "path",
1493
+ {
1494
+ 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",
1495
+ stroke: "currentColor",
1496
+ strokeWidth: "1.8",
1497
+ strokeLinecap: "round",
1498
+ strokeLinejoin: "round"
1499
+ }
1500
+ ),
1501
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1502
+ "path",
1503
+ {
1504
+ d: "M10 11.25v1.5",
1505
+ stroke: "currentColor",
1506
+ strokeWidth: "1.8",
1507
+ strokeLinecap: "round"
1508
+ }
1509
+ )
1510
+ ] });
1511
+ }
1512
+ function PasswordHiddenIcon({ size }) {
1513
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
1514
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1515
+ "path",
1516
+ {
1517
+ d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
1518
+ stroke: "currentColor",
1519
+ strokeWidth: "1.8",
1520
+ strokeLinecap: "round",
1521
+ strokeLinejoin: "round"
1522
+ }
1523
+ ),
1524
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1525
+ "path",
1526
+ {
1527
+ 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",
1528
+ stroke: "currentColor",
1529
+ strokeWidth: "1.8",
1530
+ strokeLinecap: "round",
1531
+ strokeLinejoin: "round"
1532
+ }
1533
+ ),
1534
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
1535
+ ] });
1536
+ }
1348
1537
  function ControlFrame({
1349
1538
  label,
1350
1539
  hint,
@@ -1373,7 +1562,7 @@ function ControlFrame({
1373
1562
  ]
1374
1563
  }
1375
1564
  ) : null,
1376
- hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null
1565
+ hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null
1377
1566
  ] }) : null,
1378
1567
  children,
1379
1568
  error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
@@ -1385,7 +1574,7 @@ function ControlFrame({
1385
1574
  label,
1386
1575
  required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
1387
1576
  ] }) : null,
1388
- hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--ui-kit-muted-text)]", children: hint }) : null
1577
+ hint ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null
1389
1578
  ] }) : null,
1390
1579
  children,
1391
1580
  error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
@@ -1399,6 +1588,7 @@ function Input({
1399
1588
  className,
1400
1589
  showPasswordToggle = true,
1401
1590
  fileButtonLabel,
1591
+ icon,
1402
1592
  id,
1403
1593
  disabled,
1404
1594
  placeholder,
@@ -1415,36 +1605,58 @@ function Input({
1415
1605
  const fileInputRef = (0, import_react5.useRef)(null);
1416
1606
  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react5.useState)(false);
1417
1607
  const [selectedFileNames, setSelectedFileNames] = (0, import_react5.useState)([]);
1608
+ const [validationError, setValidationError] = (0, import_react5.useState)();
1418
1609
  const isPasswordField = type === "password";
1419
1610
  const isEmailField = type === "email";
1611
+ const isLoginField = type === "login";
1420
1612
  const isFileField = type === "file";
1421
1613
  const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
1422
- const resolvedType = canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
1614
+ const resolvedType = isLoginField ? "text" : canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
1423
1615
  (0, import_react5.useEffect)(() => {
1424
1616
  if (!isFileField) {
1425
1617
  setSelectedFileNames([]);
1426
1618
  }
1427
1619
  }, [isFileField]);
1620
+ (0, import_react5.useEffect)(() => {
1621
+ if (!isEmailField && !isLoginField) {
1622
+ setValidationError(void 0);
1623
+ }
1624
+ }, [isEmailField, isLoginField]);
1625
+ (0, import_react5.useEffect)(() => {
1626
+ if (typeof rest.value !== "string") {
1627
+ return;
1628
+ }
1629
+ setValidationError(getInputValidationError(type, rest.value));
1630
+ }, [rest.value, type]);
1428
1631
  const hasFileButtonLabel = typeof fileButtonLabel === "string" ? fileButtonLabel.trim().length > 0 : fileButtonLabel != null;
1429
1632
  const hasSelectedFiles = selectedFileNames.length > 0;
1430
1633
  const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
1431
1634
  const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
1432
1635
  const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
1636
+ const leadingIconInset = getControlLeadingIconInset(controlSize);
1637
+ const controlTextNudgeStyle = getControlTextNudgeStyle();
1638
+ const hasExternalError = error !== void 0 && error !== null && error !== "";
1639
+ const resolvedError = hasExternalError ? error : validationError;
1640
+ const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
1433
1641
  const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
1434
1642
  const fileIconSize = Math.max(controlMetrics.fontSize + 3, 16);
1435
- const fileTriggerWidth = controlMetrics.paddingX + fileIconSize;
1436
- const emailAdornmentWidth = controlMetrics.paddingX + fileIconSize;
1437
- const passwordAdornmentWidth = controlMetrics.paddingX + passwordLockIconSize;
1438
- const disabledFieldStyle = disabled ? { opacity: DISABLED_FIELD_OPACITY } : {};
1643
+ const fileTriggerWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
1644
+ const leadingAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
1645
+ const passwordAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, passwordLockIconSize);
1646
+ const defaultLeadingIcon = isEmailField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EmailIcon, { size: fileIconSize }) : isLoginField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoginIcon, { size: fileIconSize }) : null;
1647
+ const resolvedLeadingIcon = icon != null ? icon : defaultLeadingIcon;
1648
+ const hasLeadingIcon = isRenderableNode(resolvedLeadingIcon);
1649
+ const resolvedFileIcon = icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileIcon, { size: fileIconSize, selected: hasSelectedFiles });
1650
+ const resolvedPasswordIcon = icon != null ? icon : isPasswordVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PasswordVisibleIcon, { size: passwordLockIconSize }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PasswordHiddenIcon, { size: passwordLockIconSize });
1439
1651
  const fieldBaseClassName = cx(
1440
1652
  UI_KIT_ROOT_CLASSNAME,
1441
1653
  "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
1442
1654
  "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
1443
- "duration-150 placeholder:text-[var(--ui-kit-placeholder)]",
1655
+ "duration-150 placeholder:text-[var(--theme-textLight)]",
1444
1656
  FIELD_HEIGHT_CLASSNAMES[controlSize],
1445
1657
  FIELD_TEXT_CLASSNAMES[controlSize],
1446
- error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
1447
- disabled ? "cursor-not-allowed" : "cursor-text"
1658
+ hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
1659
+ disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
1448
1660
  );
1449
1661
  const adornedFieldClassName = cx(
1450
1662
  UI_KIT_ROOT_CLASSNAME,
@@ -1454,16 +1666,22 @@ function Input({
1454
1666
  "shadow-[0px_4px_5px_var(--theme-shadow)]",
1455
1667
  FIELD_HEIGHT_CLASSNAMES[controlSize],
1456
1668
  FIELD_TEXT_CLASSNAMES[controlSize],
1457
- error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
1458
- disabled ? "cursor-not-allowed" : null
1669
+ hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
1670
+ disabled ? "opacity-70" : null
1459
1671
  );
1460
1672
  const adornedInputClassName = cx(
1461
1673
  "h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
1462
- "placeholder:text-[var(--ui-kit-placeholder)]",
1674
+ "placeholder:text-[var(--theme-textLight)]",
1463
1675
  FIELD_TEXT_CLASSNAMES[controlSize],
1464
1676
  disabled ? "cursor-not-allowed" : "cursor-text"
1465
1677
  );
1466
- const adornmentColorClassName = error ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
1678
+ const adornmentColorClassName = hasResolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
1679
+ const handleValidatedInputChange = (event) => {
1680
+ if (isEmailField || isLoginField) {
1681
+ setValidationError(getInputValidationError(type, event.target.value));
1682
+ }
1683
+ onChange == null ? void 0 : onChange(event);
1684
+ };
1467
1685
  const openFilePicker = () => {
1468
1686
  var _a;
1469
1687
  if (disabled) {
@@ -1505,7 +1723,7 @@ function Input({
1505
1723
  disabled ? "cursor-not-allowed" : "cursor-pointer",
1506
1724
  className
1507
1725
  ),
1508
- style: { ...style, ...disabledFieldStyle },
1726
+ style,
1509
1727
  children: [
1510
1728
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1511
1729
  "button",
@@ -1525,7 +1743,12 @@ function Input({
1525
1743
  style: {
1526
1744
  gap: showUploadLabel ? leadingContentGap : 0,
1527
1745
  width: showUploadLabel ? void 0 : fileTriggerWidth,
1528
- padding: showUploadLabel ? `0 ${controlMetrics.buttonPaddingX}px 0 ${Math.max(8, Math.round(controlMetrics.paddingX / 2))}px` : 0
1746
+ boxSizing: "border-box",
1747
+ justifyContent: "flex-start",
1748
+ paddingTop: 0,
1749
+ paddingRight: showUploadLabel ? controlMetrics.buttonPaddingX : 0,
1750
+ paddingBottom: 0,
1751
+ paddingLeft: leadingIconInset
1529
1752
  },
1530
1753
  children: [
1531
1754
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1536,106 +1759,10 @@ function Input({
1536
1759
  adornmentColorClassName
1537
1760
  ),
1538
1761
  "aria-hidden": "true",
1539
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: hasSelectedFiles ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
1540
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1541
- "path",
1542
- {
1543
- d: "M5.5 6.25h9",
1544
- stroke: "currentColor",
1545
- strokeWidth: "1.6",
1546
- strokeLinecap: "round"
1547
- }
1548
- ),
1549
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1550
- "path",
1551
- {
1552
- 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",
1553
- stroke: "currentColor",
1554
- strokeWidth: "1.6",
1555
- strokeLinecap: "round",
1556
- strokeLinejoin: "round"
1557
- }
1558
- ),
1559
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1560
- "path",
1561
- {
1562
- d: "M7.75 8.25v5.5",
1563
- stroke: "currentColor",
1564
- strokeWidth: "1.6",
1565
- strokeLinecap: "round"
1566
- }
1567
- ),
1568
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1569
- "path",
1570
- {
1571
- d: "M10 8.25v5.5",
1572
- stroke: "currentColor",
1573
- strokeWidth: "1.6",
1574
- strokeLinecap: "round"
1575
- }
1576
- ),
1577
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1578
- "path",
1579
- {
1580
- d: "M12.25 8.25v5.5",
1581
- stroke: "currentColor",
1582
- strokeWidth: "1.6",
1583
- strokeLinecap: "round"
1584
- }
1585
- ),
1586
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1587
- "path",
1588
- {
1589
- 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",
1590
- stroke: "currentColor",
1591
- strokeWidth: "1.6",
1592
- strokeLinecap: "round",
1593
- strokeLinejoin: "round"
1594
- }
1595
- )
1596
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
1597
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1598
- "path",
1599
- {
1600
- 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",
1601
- stroke: "currentColor",
1602
- strokeWidth: "1.6",
1603
- strokeLinecap: "round",
1604
- strokeLinejoin: "round"
1605
- }
1606
- ),
1607
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1608
- "path",
1609
- {
1610
- d: "M11.875 2.75V6.25H15.375",
1611
- stroke: "currentColor",
1612
- strokeWidth: "1.6",
1613
- strokeLinecap: "round",
1614
- strokeLinejoin: "round"
1615
- }
1616
- ),
1617
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1618
- "path",
1619
- {
1620
- d: "M7.5 10h5",
1621
- stroke: "currentColor",
1622
- strokeWidth: "1.6",
1623
- strokeLinecap: "round"
1624
- }
1625
- ),
1626
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1627
- "path",
1628
- {
1629
- d: "M7.5 13h5",
1630
- stroke: "currentColor",
1631
- strokeWidth: "1.6",
1632
- strokeLinecap: "round"
1633
- }
1634
- )
1635
- ] }) })
1762
+ children: resolvedFileIcon
1636
1763
  }
1637
1764
  ),
1638
- showUploadLabel ? fileButtonLabel : null
1765
+ showUploadLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: controlTextNudgeStyle, children: fileButtonLabel }) : null
1639
1766
  ]
1640
1767
  }
1641
1768
  ),
@@ -1658,9 +1785,12 @@ function Input({
1658
1785
  className: cx(
1659
1786
  "flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
1660
1787
  FIELD_TEXT_CLASSNAMES[controlSize],
1661
- hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--ui-kit-placeholder)]"
1788
+ hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
1662
1789
  ),
1663
- style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` },
1790
+ style: {
1791
+ padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px`,
1792
+ ...controlTextNudgeStyle
1793
+ },
1664
1794
  children: fileSelectionText
1665
1795
  }
1666
1796
  ) : null
@@ -1669,43 +1799,38 @@ function Input({
1669
1799
  ]
1670
1800
  }
1671
1801
  )
1672
- ] }) : isEmailField ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1802
+ ] }) : canTogglePasswordVisibility ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1673
1803
  "div",
1674
1804
  {
1675
1805
  className: cx(adornedFieldClassName, className),
1676
- style: { ...style, ...disabledFieldStyle },
1806
+ style,
1677
1807
  children: [
1678
1808
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1679
- "span",
1809
+ "button",
1680
1810
  {
1811
+ type: "button",
1812
+ "aria-label": isPasswordVisible ? "Hide password" : "Show password",
1813
+ "aria-pressed": isPasswordVisible,
1814
+ disabled,
1815
+ onMouseDown: (event) => {
1816
+ event.preventDefault();
1817
+ },
1818
+ onClick: () => {
1819
+ setIsPasswordVisible((currentValue) => !currentValue);
1820
+ },
1681
1821
  className: cx(
1682
- "inline-flex shrink-0 self-stretch items-center justify-center bg-transparent",
1683
- adornmentColorClassName
1822
+ "inline-flex shrink-0 self-stretch items-center justify-center border-0",
1823
+ "bg-transparent p-0 appearance-none",
1824
+ adornmentColorClassName,
1825
+ disabled ? "cursor-not-allowed" : "cursor-pointer"
1684
1826
  ),
1685
- style: { width: emailAdornmentWidth },
1686
- "aria-hidden": "true",
1687
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: fileIconSize, height: fileIconSize, viewBox: "0 0 20 20", fill: "none", children: [
1688
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1689
- "path",
1690
- {
1691
- 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",
1692
- stroke: "currentColor",
1693
- strokeWidth: "1.6",
1694
- strokeLinecap: "round",
1695
- strokeLinejoin: "round"
1696
- }
1697
- ),
1698
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1699
- "path",
1700
- {
1701
- d: "M4.375 6.25 10 10.625l5.625-4.375",
1702
- stroke: "currentColor",
1703
- strokeWidth: "1.6",
1704
- strokeLinecap: "round",
1705
- strokeLinejoin: "round"
1706
- }
1707
- )
1708
- ] })
1827
+ style: {
1828
+ width: passwordAdornmentWidth,
1829
+ boxSizing: "border-box",
1830
+ justifyContent: "flex-start",
1831
+ paddingLeft: leadingIconInset
1832
+ },
1833
+ children: resolvedPasswordIcon
1709
1834
  }
1710
1835
  ),
1711
1836
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1716,112 +1841,37 @@ function Input({
1716
1841
  placeholder,
1717
1842
  type: resolvedType,
1718
1843
  disabled,
1719
- onChange,
1844
+ onChange: handleValidatedInputChange,
1720
1845
  className: cx(adornedInputClassName, className),
1721
- style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
1846
+ "aria-invalid": hasResolvedError,
1847
+ style: {
1848
+ padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
1849
+ }
1722
1850
  }
1723
1851
  )
1724
1852
  ]
1725
1853
  }
1726
- ) : canTogglePasswordVisibility ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1854
+ ) : hasLeadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1727
1855
  "div",
1728
1856
  {
1729
1857
  className: cx(adornedFieldClassName, className),
1730
- style: { ...style, ...disabledFieldStyle },
1858
+ style,
1731
1859
  children: [
1732
1860
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1733
- "button",
1861
+ "span",
1734
1862
  {
1735
- type: "button",
1736
- "aria-label": isPasswordVisible ? "Hide password" : "Show password",
1737
- "aria-pressed": isPasswordVisible,
1738
- disabled,
1739
- onMouseDown: (event) => {
1740
- event.preventDefault();
1741
- },
1742
- onClick: () => {
1743
- setIsPasswordVisible((currentValue) => !currentValue);
1744
- },
1745
1863
  className: cx(
1746
- "inline-flex shrink-0 self-stretch items-center justify-center border-0",
1747
- "bg-transparent p-0 appearance-none",
1748
- adornmentColorClassName,
1749
- disabled ? "cursor-not-allowed" : "cursor-pointer"
1864
+ "inline-flex shrink-0 self-stretch items-center justify-center bg-transparent",
1865
+ adornmentColorClassName
1750
1866
  ),
1751
- style: { width: passwordAdornmentWidth },
1752
- children: isPasswordVisible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1753
- "svg",
1754
- {
1755
- width: passwordLockIconSize,
1756
- height: passwordLockIconSize,
1757
- viewBox: "0 0 20 20",
1758
- fill: "none",
1759
- "aria-hidden": "true",
1760
- children: [
1761
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1762
- "path",
1763
- {
1764
- d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
1765
- stroke: "currentColor",
1766
- strokeWidth: "1.8",
1767
- strokeLinecap: "round",
1768
- strokeLinejoin: "round"
1769
- }
1770
- ),
1771
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1772
- "path",
1773
- {
1774
- 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",
1775
- stroke: "currentColor",
1776
- strokeWidth: "1.8",
1777
- strokeLinecap: "round",
1778
- strokeLinejoin: "round"
1779
- }
1780
- ),
1781
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1782
- "path",
1783
- {
1784
- d: "M10 11.25v1.5",
1785
- stroke: "currentColor",
1786
- strokeWidth: "1.8",
1787
- strokeLinecap: "round"
1788
- }
1789
- )
1790
- ]
1791
- }
1792
- ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1793
- "svg",
1794
- {
1795
- width: passwordLockIconSize,
1796
- height: passwordLockIconSize,
1797
- viewBox: "0 0 20 20",
1798
- fill: "none",
1799
- "aria-hidden": "true",
1800
- children: [
1801
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1802
- "path",
1803
- {
1804
- d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
1805
- stroke: "currentColor",
1806
- strokeWidth: "1.8",
1807
- strokeLinecap: "round",
1808
- strokeLinejoin: "round"
1809
- }
1810
- ),
1811
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1812
- "path",
1813
- {
1814
- 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",
1815
- stroke: "currentColor",
1816
- strokeWidth: "1.8",
1817
- strokeLinecap: "round",
1818
- strokeLinejoin: "round"
1819
- }
1820
- ),
1821
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
1822
- ]
1823
- }
1824
- )
1867
+ style: {
1868
+ width: leadingAdornmentWidth,
1869
+ boxSizing: "border-box",
1870
+ justifyContent: "flex-start",
1871
+ paddingLeft: leadingIconInset
1872
+ },
1873
+ "aria-hidden": "true",
1874
+ children: resolvedLeadingIcon
1825
1875
  }
1826
1876
  ),
1827
1877
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1832,9 +1882,12 @@ function Input({
1832
1882
  placeholder,
1833
1883
  type: resolvedType,
1834
1884
  disabled,
1835
- onChange,
1885
+ onChange: handleValidatedInputChange,
1836
1886
  className: cx(adornedInputClassName, className),
1837
- style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
1887
+ "aria-invalid": hasResolvedError,
1888
+ style: {
1889
+ padding: getTextInputPadding(controlSize, { leadingPadding: leadingContentGap })
1890
+ }
1838
1891
  }
1839
1892
  )
1840
1893
  ]
@@ -1847,9 +1900,14 @@ function Input({
1847
1900
  placeholder,
1848
1901
  type: resolvedType,
1849
1902
  disabled,
1850
- onChange,
1903
+ onChange: handleValidatedInputChange,
1904
+ "aria-invalid": hasResolvedError,
1851
1905
  className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
1852
- style: { boxShadow: "var(--ui-kit-component-shadow)", ...style, ...disabledFieldStyle }
1906
+ style: {
1907
+ boxShadow: "0px 4px 5px var(--theme-shadow)",
1908
+ padding: getTextInputPadding(controlSize),
1909
+ ...style
1910
+ }
1853
1911
  }
1854
1912
  );
1855
1913
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1857,7 +1915,7 @@ function Input({
1857
1915
  {
1858
1916
  label,
1859
1917
  hint,
1860
- error,
1918
+ error: resolvedError,
1861
1919
  htmlFor: isFileField ? void 0 : inputId,
1862
1920
  required: rest.required,
1863
1921
  useLabelWrapper: !isFileField,
@@ -2076,13 +2134,13 @@ function getEarlierDate(leftDate, rightDate) {
2076
2134
  return leftDate.getTime() <= rightDate.getTime() ? leftDate : rightDate;
2077
2135
  }
2078
2136
  function CalendarIcon({ size }) {
2079
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
2137
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { transform: "translate(0.75 0)", children: [
2080
2138
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "3", stroke: "currentColor", strokeWidth: "1.6" }),
2081
2139
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M6.25 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
2082
2140
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M13.75 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
2083
2141
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M3 7.5H17", stroke: "currentColor", strokeWidth: "1.6" }),
2084
2142
  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "10", cy: "11.5", r: "1.2", fill: "currentColor" })
2085
- ] });
2143
+ ] }) });
2086
2144
  }
2087
2145
  function ClearIcon({ size }) {
2088
2146
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
@@ -2187,7 +2245,8 @@ function DatePicker({
2187
2245
  const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
2188
2246
  const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
2189
2247
  const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
2190
- const pickerAdornmentWidth = controlMetrics.paddingX + accessoryMetrics.iconSize;
2248
+ const leadingIconInset = getControlLeadingIconInset(controlSize);
2249
+ const pickerAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, accessoryMetrics.iconSize);
2191
2250
  const trailingButtonCount = Number(canClear);
2192
2251
  const trailingInset = trailingButtonCount > 0 ? Math.max(
2193
2252
  0,
@@ -2198,7 +2257,7 @@ function DatePicker({
2198
2257
  const fieldBaseClassName = cx(
2199
2258
  "w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
2200
2259
  "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
2201
- "duration-150 placeholder:text-[var(--ui-kit-placeholder)]",
2260
+ "duration-150 placeholder:text-[var(--theme-textLight)]",
2202
2261
  FIELD_HEIGHT_CLASSNAMES2[controlSize],
2203
2262
  FIELD_TEXT_CLASSNAMES2[controlSize],
2204
2263
  resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
@@ -2212,10 +2271,10 @@ function DatePicker({
2212
2271
  FIELD_TEXT_CLASSNAMES2[controlSize],
2213
2272
  disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
2214
2273
  );
2215
- const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--ui-kit-negative-soft)" } : void 0);
2274
+ 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)" });
2216
2275
  const integratedInputClassName = cx(
2217
2276
  "h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
2218
- "outline-none placeholder:text-[var(--ui-kit-placeholder)]",
2277
+ "outline-none placeholder:text-[var(--theme-textLight)]",
2219
2278
  FIELD_TEXT_CLASSNAMES2[controlSize],
2220
2279
  disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
2221
2280
  );
@@ -2445,7 +2504,12 @@ function DatePicker({
2445
2504
  },
2446
2505
  onClick: openNativePicker,
2447
2506
  className: pickerAdornmentClassName,
2448
- style: { width: pickerAdornmentWidth },
2507
+ style: {
2508
+ width: pickerAdornmentWidth,
2509
+ boxSizing: "border-box",
2510
+ justifyContent: "flex-start",
2511
+ paddingLeft: leadingIconInset
2512
+ },
2449
2513
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarIcon, { size: accessoryMetrics.iconSize })
2450
2514
  }
2451
2515
  ),
@@ -2456,7 +2520,10 @@ function DatePicker({
2456
2520
  ...visibleInputProps,
2457
2521
  className: cx(integratedInputClassName, className),
2458
2522
  style: {
2459
- padding: `${controlMetrics.paddingY}px ${controlMetrics.paddingX + trailingInset}px ${controlMetrics.paddingY}px ${leadingContentGap}px`
2523
+ padding: getTextInputPadding(controlSize, {
2524
+ leadingPadding: leadingContentGap,
2525
+ trailingPadding: controlMetrics.paddingX + trailingInset
2526
+ })
2460
2527
  }
2461
2528
  }
2462
2529
  ),
@@ -2472,8 +2539,10 @@ function DatePicker({
2472
2539
  ...visibleInputProps,
2473
2540
  className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
2474
2541
  style: {
2475
- paddingRight: controlMetrics.paddingX + trailingInset,
2476
- boxShadow: resolvedError ? "0 0 0 3px var(--ui-kit-negative-soft), var(--ui-kit-component-shadow)" : "var(--ui-kit-component-shadow)",
2542
+ padding: getTextInputPadding(controlSize, {
2543
+ trailingPadding: controlMetrics.paddingX + trailingInset
2544
+ }),
2545
+ boxShadow: resolvedError ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
2477
2546
  ...style,
2478
2547
  ...disabledFieldStyle
2479
2548
  }
@@ -2635,8 +2704,8 @@ function SelectBase({
2635
2704
  ...rest
2636
2705
  }) {
2637
2706
  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
2638
- const { theme, mutedText } = useUiKitTheme();
2639
- const componentShadow = getComponentShadow(theme);
2707
+ const theme = useUiKitTheme();
2708
+ const componentShadow = "0px 4px 5px var(--theme-shadow)";
2640
2709
  const generatedId = (0, import_react8.useId)().replace(/:/g, "");
2641
2710
  const resolvedId = id != null ? id : `ss-select-${generatedId}`;
2642
2711
  const isMultiSelect = Boolean(isMulti || multiple);
@@ -2662,7 +2731,7 @@ function SelectBase({
2662
2731
  const selectedValue = (_e = selectedValues[0]) != null ? _e : "";
2663
2732
  const optionLookup = new Map(flatOptions.map((option) => [option.value, option]));
2664
2733
  const selectedOption = (_f = optionLookup.get(selectedValue)) != null ? _f : null;
2665
- const placeholderTextColor = withAlpha(theme.colors.text, 0.5);
2734
+ const placeholderTextColor = "var(--theme-textLight)";
2666
2735
  const hasSelection = isMultiSelect ? selectedValues.length > 0 : selectedValue !== "";
2667
2736
  const displayLabel = hasSelection ? isMultiSelect ? selectedValues.map((currentValue) => {
2668
2737
  const option = optionLookup.get(currentValue);
@@ -2676,45 +2745,20 @@ function SelectBase({
2676
2745
  const selectedValuesKey = selectedValues.join("\0");
2677
2746
  const visibleEnabledValuesKey = visibleEnabledValues.join("\0");
2678
2747
  const indicatorOffset = getSelectIndicatorOffset(controlSize);
2679
- const controlMetrics = getControlMetrics(controlSize);
2748
+ const controlTextNudgeStyle = getSelectTextNudgeStyle();
2680
2749
  const listboxId = `${resolvedId}-listbox`;
2681
2750
  const searchInputId = `${resolvedId}-search`;
2682
- const scrollbarThumbColor = withAlpha(theme.colors.text, 0.22);
2683
- const scrollbarThumbHoverColor = withAlpha(theme.colors.text, 0.32);
2751
+ const scrollbarThumbColor = theme.colors.secondary;
2752
+ const scrollbarThumbHoverColor = theme.colors.textLight;
2684
2753
  const highlightedOption = (_i = visibleOptions.find((option) => option.value === highlightedValue)) != null ? _i : null;
2685
- const optionHoverBackground = theme.colors.primary;
2686
- const optionSelectedBackground = theme.colors.primary;
2687
2754
  const canOpenMenu = allowOpenWithoutOptions || flatOptions.length > 0;
2688
2755
  const isTriggerDisabled = disabled || !canOpenMenu;
2689
2756
  const buttonPassthroughProps = Object.fromEntries(
2690
2757
  Object.entries(rest).filter(([key]) => key.startsWith("aria-") || key.startsWith("data-"))
2691
2758
  );
2692
- const selectVariables = (0, import_react8.useMemo)(() => ({
2693
- "--ui-kit-select-placeholder": placeholderTextColor,
2694
- "--ui-kit-select-muted": mutedText,
2695
- "--ui-kit-select-indicator-disabled": withAlpha(theme.colors.text, 0.42),
2696
- "--ui-kit-select-surface-raised": theme.colors.surface,
2697
- "--ui-kit-select-scrollbar-thumb": scrollbarThumbColor,
2698
- "--ui-kit-select-scrollbar-thumb-hover": scrollbarThumbHoverColor,
2699
- "--ui-kit-select-divider": withAlpha(theme.colors.text, 0.08),
2700
- "--ui-kit-select-option-hover-bg": optionHoverBackground,
2701
- "--ui-kit-select-option-selected-bg": optionSelectedBackground,
2702
- "--ui-kit-select-option-disabled": withAlpha(theme.colors.text, 0.38),
2703
- "--ui-kit-select-control-shadow": componentShadow
2704
- }), [
2705
- componentShadow,
2706
- mutedText,
2707
- optionHoverBackground,
2708
- optionSelectedBackground,
2709
- placeholderTextColor,
2710
- scrollbarThumbColor,
2711
- scrollbarThumbHoverColor,
2712
- theme.colors.surface,
2713
- theme.colors.text
2714
- ]);
2715
2759
  const triggerBorderColor = error ? "var(--theme-negative)" : "var(--theme-textLight)";
2716
2760
  const triggerBoxShadow = getInsetBorderShadow(triggerBorderColor, {
2717
- componentShadow: "var(--ui-kit-select-control-shadow)"
2761
+ componentShadow
2718
2762
  });
2719
2763
  const triggerClassName = cx(
2720
2764
  "m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
@@ -2722,7 +2766,7 @@ function SelectBase({
2722
2766
  "duration-150 text-left",
2723
2767
  FIELD_HEIGHT_CLASSNAMES3[controlSize],
2724
2768
  FIELD_TEXT_CLASSNAMES3[controlSize],
2725
- hasSelection ? "text-[var(--theme-text)]" : "text-[var(--ui-kit-select-placeholder)]",
2769
+ hasSelection ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]",
2726
2770
  isTriggerDisabled ? "cursor-not-allowed" : "cursor-pointer"
2727
2771
  );
2728
2772
  (0, import_react8.useEffect)(() => {
@@ -3087,7 +3131,7 @@ function SelectBase({
3087
3131
  htmlFor: resolvedId,
3088
3132
  required: rest.required,
3089
3133
  useLabelWrapper: false,
3090
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: shellRef, className: "relative w-full", style: selectVariables, children: [
3134
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: shellRef, className: "relative w-full", children: [
3091
3135
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
3092
3136
  "button",
3093
3137
  {
@@ -3111,7 +3155,7 @@ function SelectBase({
3111
3155
  onBlur: handleTriggerBlur,
3112
3156
  onKeyDown: handleTriggerKeyDown,
3113
3157
  style: {
3114
- padding: `${controlMetrics.paddingY}px ${controlMetrics.selectPaddingRight}px ${controlMetrics.paddingY}px ${controlMetrics.paddingX}px`,
3158
+ padding: getSelectControlPadding(controlSize),
3115
3159
  boxShadow: triggerBoxShadow,
3116
3160
  ...style,
3117
3161
  ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
@@ -3121,6 +3165,7 @@ function SelectBase({
3121
3165
  "span",
3122
3166
  {
3123
3167
  className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
3168
+ style: controlTextNudgeStyle,
3124
3169
  children: displayContent
3125
3170
  }
3126
3171
  ),
@@ -3131,7 +3176,7 @@ function SelectBase({
3131
3176
  className: cx(
3132
3177
  "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
3133
3178
  "transition-[transform,color] duration-150",
3134
- isTriggerDisabled ? "text-[var(--ui-kit-select-indicator-disabled)]" : "text-[var(--ui-kit-select-muted)]"
3179
+ isTriggerDisabled ? "text-[var(--theme-secondary)]" : "text-[var(--theme-textLight)]"
3135
3180
  ),
3136
3181
  style: {
3137
3182
  right: indicatorOffset,
@@ -3173,7 +3218,7 @@ function SelectBase({
3173
3218
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `
3174
3219
  #${listboxId} {
3175
3220
  scrollbar-width: thin;
3176
- scrollbar-color: var(--ui-kit-select-scrollbar-thumb) transparent;
3221
+ scrollbar-color: ${scrollbarThumbColor} transparent;
3177
3222
  }
3178
3223
 
3179
3224
  #${listboxId}::-webkit-scrollbar {
@@ -3185,19 +3230,19 @@ function SelectBase({
3185
3230
  }
3186
3231
 
3187
3232
  #${listboxId}::-webkit-scrollbar-thumb {
3188
- background: var(--ui-kit-select-scrollbar-thumb);
3233
+ background: ${scrollbarThumbColor};
3189
3234
  border-radius: 999px;
3190
3235
  border: 2px solid transparent;
3191
3236
  background-clip: padding-box;
3192
3237
  }
3193
3238
 
3194
3239
  #${listboxId}::-webkit-scrollbar-thumb:hover {
3195
- background: var(--ui-kit-select-scrollbar-thumb-hover);
3240
+ background: ${scrollbarThumbHoverColor};
3196
3241
  background-clip: padding-box;
3197
3242
  }
3198
3243
 
3199
3244
  #${searchInputId}::placeholder {
3200
- color: var(--ui-kit-select-placeholder);
3245
+ color: ${placeholderTextColor};
3201
3246
  opacity: 1;
3202
3247
  }
3203
3248
  ` }),
@@ -3209,9 +3254,9 @@ function SelectBase({
3209
3254
  style: {
3210
3255
  top: menuPlacement === "bottom" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
3211
3256
  bottom: menuPlacement === "top" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
3212
- borderColor: "var(--theme-textLight)",
3213
- backgroundColor: "var(--ui-kit-select-surface-raised)",
3214
- boxShadow: "var(--ui-kit-select-control-shadow)",
3257
+ borderColor: theme.colors.secondary,
3258
+ backgroundColor: theme.colors.surface,
3259
+ boxShadow: componentShadow,
3215
3260
  visibility: isPlacementResolved ? "visible" : "hidden"
3216
3261
  },
3217
3262
  children: [
@@ -3219,7 +3264,7 @@ function SelectBase({
3219
3264
  "div",
3220
3265
  {
3221
3266
  className: "flex shrink-0 items-center justify-start gap-2 border-b px-1 pb-[10px] pt-1",
3222
- style: { borderColor: "var(--ui-kit-select-divider)" },
3267
+ style: { borderColor: theme.colors.secondary },
3223
3268
  children: [
3224
3269
  bulkToggleControl,
3225
3270
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3244,8 +3289,8 @@ function SelectBase({
3244
3289
  "aria-label": searchPlaceholder,
3245
3290
  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",
3246
3291
  style: {
3247
- borderColor: "var(--theme-textLight)",
3248
- boxShadow: "var(--ui-kit-select-control-shadow)"
3292
+ borderColor: theme.colors.secondary,
3293
+ boxShadow: componentShadow
3249
3294
  }
3250
3295
  }
3251
3296
  )
@@ -3255,7 +3300,7 @@ function SelectBase({
3255
3300
  "div",
3256
3301
  {
3257
3302
  className: "flex shrink-0 items-center justify-start border-b px-1 pb-[10px] pt-1",
3258
- style: { borderColor: "var(--ui-kit-select-divider)" },
3303
+ style: { borderColor: theme.colors.secondary },
3259
3304
  children: bulkToggleControl
3260
3305
  }
3261
3306
  ) : null,
@@ -3271,7 +3316,7 @@ function SelectBase({
3271
3316
  children: visibleGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3272
3317
  "div",
3273
3318
  {
3274
- className: "px-3 py-[14px] text-center text-[13px] text-[var(--ui-kit-select-muted)]",
3319
+ className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]",
3275
3320
  children: emptyState
3276
3321
  }
3277
3322
  ) : visibleGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
@@ -3282,7 +3327,7 @@ function SelectBase({
3282
3327
  group.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3283
3328
  "span",
3284
3329
  {
3285
- className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--ui-kit-select-muted)]",
3330
+ className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--theme-textLight)]",
3286
3331
  children: group.label
3287
3332
  }
3288
3333
  ) : null,
@@ -3318,11 +3363,11 @@ function SelectBase({
3318
3363
  "flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
3319
3364
  "transition-[background-color,color] duration-150",
3320
3365
  OPTION_PADDING_CLASSNAMES[controlSize],
3321
- option.disabled ? "cursor-not-allowed text-[var(--ui-kit-select-option-disabled)]" : "cursor-pointer",
3366
+ option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
3322
3367
  !option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
3323
3368
  !option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
3324
- isSelected ? "bg-[var(--ui-kit-select-option-selected-bg)] font-bold" : null,
3325
- !isSelected && isHighlighted ? "bg-[var(--ui-kit-select-option-hover-bg)]" : null,
3369
+ isSelected ? "bg-[var(--theme-primary)] font-bold" : null,
3370
+ !isSelected && isHighlighted ? "bg-[var(--theme-primary)]" : null,
3326
3371
  !isSelected && !isHighlighted ? "bg-[var(--theme-surface)] font-normal" : null
3327
3372
  ),
3328
3373
  children: [
@@ -3339,7 +3384,7 @@ function SelectBase({
3339
3384
  size: 16,
3340
3385
  checkedColor: isActive ? "var(--theme-onPrimary)" : "var(--theme-primary)",
3341
3386
  iconColor: isActive ? "var(--theme-primary)" : "var(--theme-onPrimary)",
3342
- uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" : withAlpha(theme.colors.text, 0.26),
3387
+ uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" : theme.colors.secondary,
3343
3388
  uncheckedBackgroundColor: "transparent"
3344
3389
  }
3345
3390
  ) : null,
@@ -3385,7 +3430,7 @@ function SelectBase({
3385
3430
  "div",
3386
3431
  {
3387
3432
  className: "shrink-0 border-t px-2 pb-1 pt-2.5",
3388
- style: { borderColor: "var(--ui-kit-select-divider)" },
3433
+ style: { borderColor: theme.colors.secondary },
3389
3434
  children: menuFooter
3390
3435
  }
3391
3436
  ) : null
@@ -3737,7 +3782,7 @@ function SelectAsync({
3737
3782
  "div",
3738
3783
  {
3739
3784
  "aria-live": "polite",
3740
- className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--ui-kit-muted-text)]",
3785
+ className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--theme-textLight)]",
3741
3786
  style: { justifyContent: hasMore ? "space-between" : "center" },
3742
3787
  children: [
3743
3788
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
@@ -4301,9 +4346,12 @@ function TableBase({
4301
4346
  onInternalPageChange,
4302
4347
  onInternalPageSizeChange
4303
4348
  }) {
4304
- const uiKitTheme = useUiKitTheme();
4305
- const { theme, borderSoft, borderStrong, focusRing, mutedText, surfaceMuted, surfaceRaised } = uiKitTheme;
4306
- const componentShadow = getComponentShadow(theme);
4349
+ const theme = useUiKitTheme();
4350
+ const componentShadow = "0px 4px 5px var(--theme-shadow)";
4351
+ const softBorderColor = theme.colors.secondary;
4352
+ const strongBorderColor = theme.colors.textLight;
4353
+ const mutedTextColor = theme.colors.textLight;
4354
+ const alternateSurfaceColor = theme.colors.background;
4307
4355
  const scrollRegionId = (0, import_react12.useId)().replace(/:/g, "");
4308
4356
  const containerRef = (0, import_react12.useRef)(null);
4309
4357
  const [containerWidth, setContainerWidth] = (0, import_react12.useState)(null);
@@ -4327,8 +4375,8 @@ function TableBase({
4327
4375
  const hasRows = items.length > 0;
4328
4376
  const hasSearchValue = searchValue.trim().length > 0;
4329
4377
  const visibleInlineActions = Math.max(0, Math.floor(maxInlineActions));
4330
- const scrollbarThumbColor = withAlpha(theme.colors.textLight, 0.3);
4331
- const scrollbarThumbHoverColor = theme.colors.text;
4378
+ const scrollbarThumbColor = theme.colors.secondary;
4379
+ const scrollbarThumbHoverColor = theme.colors.textLight;
4332
4380
  const shouldShowToolbarStatus = loading || !loading && Boolean(error) && hasRows;
4333
4381
  const shouldRenderToolbar = shouldShowSearch || shouldShowToolbarStatus || showSettingsButton;
4334
4382
  const shouldRenderToolbarPrimaryGroup = shouldShowSearch || showSettingsButton;
@@ -4337,7 +4385,7 @@ function TableBase({
4337
4385
  const currentPageItemCount = items.length;
4338
4386
  const downloadMatrix = buildTableDownloadMatrix(visibleDownloadColumns, items);
4339
4387
  const downloadFileBaseName = buildTableDownloadFileBaseName(ariaLabel, normalizedPage);
4340
- const stickyActionsColumnShadow = `-10px 0 16px -14px ${withAlpha(theme.colors.shadow, 0.7)}`;
4388
+ const stickyActionsColumnShadow = `-10px 0 16px -14px ${theme.colors.shadow}`;
4341
4389
  const shouldStickActionsColumn = Boolean(actions) && stickyActionsColumn;
4342
4390
  const getStickyActionsCellStyle = (backgroundColor, backgroundImage, isHeader = false) => ({
4343
4391
  position: "sticky",
@@ -4347,7 +4395,7 @@ function TableBase({
4347
4395
  backgroundImage,
4348
4396
  backgroundClip: "padding-box",
4349
4397
  boxShadow: stickyActionsColumnShadow,
4350
- borderLeft: `1px solid ${borderSoft}`
4398
+ borderLeft: `1px solid ${softBorderColor}`
4351
4399
  });
4352
4400
  (0, import_react12.useEffect)(() => {
4353
4401
  const element = containerRef.current;
@@ -4387,8 +4435,8 @@ function TableBase({
4387
4435
  height: 34,
4388
4436
  padding: iconOnly ? 0 : "0 12px",
4389
4437
  borderRadius: 12,
4390
- border: `1px solid ${tone === "danger" ? withAlpha(theme.colors.negative, 0.28) : borderSoft}`,
4391
- backgroundColor: tone === "danger" ? withAlpha(theme.colors.negative, 0.08) : withAlpha(theme.colors.surface, 0.82),
4438
+ border: `1px solid ${tone === "danger" ? theme.colors.negative : softBorderColor}`,
4439
+ backgroundColor: theme.colors.surface,
4392
4440
  color: tone === "danger" ? theme.colors.negative : theme.colors.text,
4393
4441
  cursor: disabled ? "not-allowed" : "pointer",
4394
4442
  opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
@@ -4407,14 +4455,14 @@ function TableBase({
4407
4455
  gap: 6,
4408
4456
  padding: 8,
4409
4457
  borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
4410
- border: `1px solid ${borderSoft}`,
4458
+ border: `1px solid ${softBorderColor}`,
4411
4459
  backgroundColor: theme.colors.surface,
4412
4460
  boxShadow: componentShadow
4413
4461
  };
4414
4462
  const toolbarControlStyle = {
4415
4463
  height: 42,
4416
4464
  borderRadius: 14,
4417
- border: `1px solid ${borderSoft}`,
4465
+ border: `1px solid ${softBorderColor}`,
4418
4466
  backgroundColor: theme.colors.surface,
4419
4467
  color: theme.colors.text,
4420
4468
  padding: "0 10px",
@@ -4423,7 +4471,7 @@ function TableBase({
4423
4471
  fontSize: 14,
4424
4472
  lineHeight: 1.4,
4425
4473
  transition: "border-color 160ms ease, box-shadow 160ms ease",
4426
- boxShadow: `${componentShadow}, 0 0 0 0 ${focusRing}`
4474
+ boxShadow: componentShadow
4427
4475
  };
4428
4476
  const settingsButtonStyle = {
4429
4477
  ...actionButtonBaseStyle("default", false, true),
@@ -4435,8 +4483,8 @@ function TableBase({
4435
4483
  gap: 4,
4436
4484
  padding: "10px 12px",
4437
4485
  borderRadius: 14,
4438
- border: `1px solid ${borderSoft}`,
4439
- backgroundColor: withAlpha(theme.colors.surface, 0.94),
4486
+ border: `1px solid ${softBorderColor}`,
4487
+ backgroundColor: theme.colors.surface,
4440
4488
  boxShadow: componentShadow
4441
4489
  };
4442
4490
  const handleDownloadCsv = () => {
@@ -4518,7 +4566,7 @@ function TableBase({
4518
4566
  colSpan: column.colSpan,
4519
4567
  style: {
4520
4568
  padding: "6px 10px",
4521
- borderBottom: `1px solid ${borderSoft}`,
4569
+ borderBottom: `1px solid ${softBorderColor}`,
4522
4570
  verticalAlign: "middle",
4523
4571
  color: theme.colors.text,
4524
4572
  fontSize: 14,
@@ -4528,7 +4576,7 @@ function TableBase({
4528
4576
  width: column.width,
4529
4577
  minWidth: column.minWidth
4530
4578
  },
4531
- children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText }, children: "-" })
4579
+ children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedTextColor }, children: "-" })
4532
4580
  },
4533
4581
  `${getColumnKey(column, columnIndex)}-${rowIndex}`
4534
4582
  );
@@ -4546,8 +4594,8 @@ function TableBase({
4546
4594
  gap: 12,
4547
4595
  minHeight: 220,
4548
4596
  borderRadius: 20,
4549
- border: `1px dashed ${borderStrong}`,
4550
- backgroundColor: withAlpha(theme.colors.surface, 0.64),
4597
+ border: `1px dashed ${strongBorderColor}`,
4598
+ backgroundColor: theme.colors.surface,
4551
4599
  boxShadow: componentShadow,
4552
4600
  color: theme.colors.text,
4553
4601
  textAlign: "center",
@@ -4567,7 +4615,7 @@ function TableBase({
4567
4615
  className: cx(
4568
4616
  UI_KIT_ROOT_CLASSNAME,
4569
4617
  "flex w-full max-w-full min-w-0 flex-col gap-4 rounded-[24px]",
4570
- "box-border bg-[var(--ui-kit-surface-raised)] p-[18px] text-[var(--theme-text)]",
4618
+ "box-border bg-[var(--theme-surface)] p-[18px] text-[var(--theme-text)]",
4571
4619
  className
4572
4620
  ),
4573
4621
  style,
@@ -4594,8 +4642,8 @@ function TableBase({
4594
4642
  style: {
4595
4643
  flex: "1 1 260px",
4596
4644
  maxWidth: 360,
4597
- borderColor: "var(--ui-kit-border-soft)",
4598
- boxShadow: "var(--ui-kit-component-shadow)"
4645
+ borderColor: softBorderColor,
4646
+ boxShadow: componentShadow
4599
4647
  }
4600
4648
  }
4601
4649
  ) : null,
@@ -4619,7 +4667,7 @@ function TableBase({
4619
4667
  className: "flex min-w-0 flex-wrap items-center justify-end gap-2.5",
4620
4668
  style: { marginLeft: shouldRenderToolbarPrimaryGroup ? "auto" : void 0 },
4621
4669
  children: [
4622
- loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--ui-kit-muted-text)]", children: resolvedLabels.loadingMessage }) : null,
4670
+ loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
4623
4671
  !loading && error && hasRows ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-flex items-center gap-2.5", children: [
4624
4672
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
4625
4673
  onRetry ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { size: "sm", variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
@@ -4631,7 +4679,7 @@ function TableBase({
4631
4679
  !hasRows && (!loading || error) ? renderEmptyState() : null,
4632
4680
  hasRows ? isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
4633
4681
  const rowActions = renderActions(item, rowIndex);
4634
- const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : surfaceMuted;
4682
+ const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
4635
4683
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
4636
4684
  "article",
4637
4685
  {
@@ -4642,7 +4690,7 @@ function TableBase({
4642
4690
  gap: 14,
4643
4691
  padding: "16px 16px 6px 16px",
4644
4692
  borderRadius: 20,
4645
- border: `1px solid ${borderSoft}`,
4693
+ border: `1px solid ${softBorderColor}`,
4646
4694
  backgroundColor: rowBackgroundColor,
4647
4695
  boxShadow: componentShadow
4648
4696
  },
@@ -4675,7 +4723,7 @@ function TableBase({
4675
4723
  "span",
4676
4724
  {
4677
4725
  style: {
4678
- color: mutedText,
4726
+ color: mutedTextColor,
4679
4727
  fontSize: 11,
4680
4728
  fontWeight: 700,
4681
4729
  letterSpacing: "0.08em",
@@ -4710,7 +4758,7 @@ function TableBase({
4710
4758
  lineHeight: 1.55,
4711
4759
  textAlign: getTextAlign(align)
4712
4760
  },
4713
- children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedText }, children: "-" })
4761
+ children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { style: { color: mutedTextColor }, children: "-" })
4714
4762
  }
4715
4763
  )
4716
4764
  }
@@ -4729,7 +4777,7 @@ function TableBase({
4729
4777
  display: "flex",
4730
4778
  justifyContent: "flex-end",
4731
4779
  paddingTop: 4,
4732
- borderTop: `1px solid ${borderSoft}`
4780
+ borderTop: `1px solid ${softBorderColor}`
4733
4781
  },
4734
4782
  children: rowActions
4735
4783
  }
@@ -4777,8 +4825,8 @@ function TableBase({
4777
4825
  "aria-label": ariaLabel,
4778
4826
  className: "w-full max-w-full min-w-0 overflow-x-auto overflow-y-hidden rounded-[20px] border bg-[var(--theme-surface)]",
4779
4827
  style: {
4780
- borderColor: "var(--ui-kit-border-soft)",
4781
- boxShadow: "var(--ui-kit-component-shadow)"
4828
+ borderColor: softBorderColor,
4829
+ boxShadow: componentShadow
4782
4830
  },
4783
4831
  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "min-w-full max-w-none border-separate border-spacing-0", style: { width: "max-content" }, children: [
4784
4832
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
@@ -4792,8 +4840,8 @@ function TableBase({
4792
4840
  scope: "col",
4793
4841
  style: {
4794
4842
  padding: "6px 10px",
4795
- borderBottom: `1px solid ${borderStrong}`,
4796
- color: mutedText,
4843
+ borderBottom: `1px solid ${strongBorderColor}`,
4844
+ color: mutedTextColor,
4797
4845
  fontSize: 11,
4798
4846
  fontWeight: 700,
4799
4847
  letterSpacing: "0.08em",
@@ -4814,8 +4862,8 @@ function TableBase({
4814
4862
  scope: "col",
4815
4863
  style: {
4816
4864
  padding: "6px 10px",
4817
- borderBottom: `1px solid ${borderStrong}`,
4818
- color: mutedText,
4865
+ borderBottom: `1px solid ${strongBorderColor}`,
4866
+ color: mutedTextColor,
4819
4867
  fontSize: 11,
4820
4868
  fontWeight: 700,
4821
4869
  letterSpacing: "0.08em",
@@ -4831,8 +4879,8 @@ function TableBase({
4831
4879
  ] }) }),
4832
4880
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: items.map((item, rowIndex) => {
4833
4881
  const rowActions = renderActions(item, rowIndex);
4834
- const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : surfaceMuted;
4835
- const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${surfaceMuted}, ${surfaceMuted})`;
4882
+ const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
4883
+ const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${alternateSurfaceColor}, ${alternateSurfaceColor})`;
4836
4884
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
4837
4885
  "tr",
4838
4886
  {
@@ -4846,7 +4894,7 @@ function TableBase({
4846
4894
  {
4847
4895
  style: {
4848
4896
  padding: "6px 10px",
4849
- borderBottom: `1px solid ${borderSoft}`,
4897
+ borderBottom: `1px solid ${softBorderColor}`,
4850
4898
  textAlign: "right",
4851
4899
  verticalAlign: "middle",
4852
4900
  ...shouldStickActionsColumn ? getStickyActionsCellStyle(theme.colors.surface, stickyRowBackgroundImage) : {}
@@ -4869,7 +4917,7 @@ function TableBase({
4869
4917
  className: "flex flex-wrap items-center justify-between gap-3 pt-1",
4870
4918
  children: [
4871
4919
  shouldShowPaginationControls ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
4872
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mr-1 text-[13px] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
4920
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "mr-1 text-[13px] text-[var(--theme-textLight)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
4873
4921
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
4874
4922
  "button",
4875
4923
  {
@@ -4918,7 +4966,7 @@ function TableBase({
4918
4966
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
4919
4967
  "div",
4920
4968
  {
4921
- className: "flex items-center gap-2.5 text-[13px] text-[var(--ui-kit-muted-text)]",
4969
+ className: "flex items-center gap-2.5 text-[13px] text-[var(--theme-textLight)]",
4922
4970
  style: { marginLeft: shouldShowRowsPerPageControl ? "auto" : void 0 },
4923
4971
  children: shouldShowRowsPerPageControl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
4924
4972
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: resolvedLabels.rowsPerPageLabel }),
@@ -4929,8 +4977,8 @@ function TableBase({
4929
4977
  onChange: (event) => onInternalPageSizeChange(Number(event.currentTarget.value)),
4930
4978
  className: "h-[34px] rounded-[14px] border bg-[var(--theme-surface)] px-3 text-sm leading-[1.4] text-[var(--theme-text)] outline-none",
4931
4979
  style: {
4932
- borderColor: "var(--ui-kit-border-soft)",
4933
- boxShadow: "var(--ui-kit-component-shadow)"
4980
+ borderColor: softBorderColor,
4981
+ boxShadow: componentShadow
4934
4982
  },
4935
4983
  children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: option, children: option }, option))
4936
4984
  }
@@ -4954,24 +5002,24 @@ function TableBase({
4954
5002
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
4955
5003
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]", children: [
4956
5004
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
4957
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.totalPagesInfoLabel }),
5005
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
4958
5006
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalPages })
4959
5007
  ] }),
4960
5008
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
4961
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.totalItemsInfoLabel }),
5009
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
4962
5010
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalItemCount })
4963
5011
  ] }),
4964
5012
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
4965
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.currentPageInfoLabel }),
5013
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
4966
5014
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: normalizedPage })
4967
5015
  ] }),
4968
5016
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: infoCardStyle, children: [
4969
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--ui-kit-muted-text)]", children: resolvedLabels.currentPageItemsInfoLabel }),
5017
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
4970
5018
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: currentPageItemCount })
4971
5019
  ] })
4972
5020
  ] })
4973
5021
  ] }),
4974
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "py-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, { orientation: "horizontal", color: borderSoft }) }),
5022
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "py-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, { orientation: "horizontal", color: softBorderColor }) }),
4975
5023
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "grid gap-3", children: [
4976
5024
  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
4977
5025
  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap gap-2.5", children: [
@@ -5271,12 +5319,13 @@ function Textarea({
5271
5319
  className: cx(
5272
5320
  "w-full min-w-0 box-border resize-y rounded-2xl border border-solid bg-[var(--theme-surface)]",
5273
5321
  "text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
5274
- "duration-150 disabled:cursor-not-allowed",
5322
+ "duration-150 placeholder:opacity-100 disabled:cursor-not-allowed",
5323
+ "placeholder:text-[var(--theme-textLight)]",
5275
5324
  error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
5276
5325
  TEXTAREA_SIZE_CLASSNAMES[controlSize]
5277
5326
  ),
5278
5327
  style: {
5279
- boxShadow: error ? "0 0 0 3px var(--ui-kit-negative-soft), var(--ui-kit-component-shadow)" : "var(--ui-kit-component-shadow)",
5328
+ boxShadow: error ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
5280
5329
  ...style,
5281
5330
  ...disabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
5282
5331
  }