smartsell-ui-kit 0.1.3 → 0.1.4
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 +487 -483
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -14
- package/dist/index.d.ts +5 -14
- package/dist/index.js +487 -484
- package/dist/index.js.map +1 -1
- package/dist/types.cjs.map +1 -1
- package/dist/types.d.cts +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
// src/styles/ui-kit.css
|
|
24
|
-
styleInject('.ui-kit-sr-only {\n position: absolute;\n height: 1px;\n width: 1px;\n overflow: hidden;\n white-space: nowrap;\n border-width: 0px;\n padding: 0px;\n clip: rect(0, 0, 0, 0);\n margin: -1px;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.pointer-events-auto {\n pointer-events: auto;\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.z-30 {\n z-index: 30;\n}\n.z-\\[70\\] {\n z-index: 70;\n}\n.m-0 {\n margin: 0px;\n}\n.mb-\\[18px\\] {\n margin-bottom: 18px;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.mr-1 {\n margin-right: 0.25rem;\n}\n.mt-0 {\n margin-top: 0px;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-px {\n margin-top: 1px;\n}\n.box-border {\n box-sizing: border-box;\n}\n.block {\n display: block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.h-14 {\n height: 3.5rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-\\[30px\\] {\n height: 30px;\n}\n.h-\\[34px\\] {\n height: 34px;\n}\n.h-\\[38px\\] {\n height: 38px;\n}\n.h-\\[42px\\] {\n height: 42px;\n}\n.h-\\[52px\\] {\n height: 52px;\n}\n.h-full {\n height: 100%;\n}\n.max-h-\\[280px\\] {\n max-height: 280px;\n}\n.min-h-0 {\n min-height: 0px;\n}\n.min-h-20 {\n min-height: 5rem;\n}\n.w-14 {\n width: 3.5rem;\n}\n.w-2 {\n width: 0.5rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-\\[25px\\] {\n width: 25px;\n}\n.w-\\[30px\\] {\n width: 30px;\n}\n.w-\\[52px\\] {\n width: 52px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-full {\n min-width: 100%;\n}\n.max-w-fit {\n max-width: -moz-fit-content;\n max-width: fit-content;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-none {\n max-width: none;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.border-separate {\n border-collapse: separate;\n}\n.border-spacing-0 {\n --tw-border-spacing-x: 0px;\n --tw-border-spacing-y: 0px;\n border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-text {\n cursor: text;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.resize-y {\n resize: vertical;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-3\\.5 {\n gap: 0.875rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.self-stretch {\n align-self: stretch;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-hidden {\n overflow-y: hidden;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[0\\.4rem\\] {\n border-radius: 0.4rem;\n}\n.rounded-\\[11px\\] {\n border-radius: 11px;\n}\n.rounded-\\[14px\\] {\n border-radius: 14px;\n}\n.rounded-\\[20px\\] {\n border-radius: 20px;\n}\n.rounded-\\[24px\\] {\n border-radius: 24px;\n}\n.rounded-\\[28px\\] {\n border-radius: 28px;\n}\n.rounded-\\[30px\\] {\n border-radius: 30px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-none {\n border-radius: 0px;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-\\[var\\(--theme-negative\\)\\] {\n border-color: var(--theme-negative);\n}\n.border-\\[var\\(--theme-primary\\)\\] {\n border-color: var(--theme-primary);\n}\n.border-\\[var\\(--theme-textLight\\)\\] {\n border-color: var(--theme-textLight);\n}\n.border-\\[var\\(--ui-kit-accent\\)\\] {\n border-color: var(--ui-kit-accent);\n}\n.border-\\[var\\(--ui-kit-modal-primary\\)\\] {\n border-color: var(--ui-kit-modal-primary);\n}\n.border-transparent {\n border-color: transparent;\n}\n.bg-\\[color-mix\\(in_srgb\\,var\\(--ui-kit-accent\\)_24\\%\\,transparent\\)\\] {\n background-color: color-mix(in srgb, var(--ui-kit-accent) 24%, transparent);\n}\n.bg-\\[var\\(--theme-primary\\)\\] {\n background-color: var(--theme-primary);\n}\n.bg-\\[var\\(--theme-surface\\)\\] {\n background-color: var(--theme-surface);\n}\n.bg-\\[var\\(--theme-text\\)\\] {\n background-color: var(--theme-text);\n}\n.bg-\\[var\\(--ui-kit-accent\\)\\] {\n background-color: var(--ui-kit-accent);\n}\n.bg-\\[var\\(--ui-kit-modal-busy-overlay\\)\\] {\n background-color: var(--ui-kit-modal-busy-overlay);\n}\n.bg-\\[var\\(--ui-kit-modal-primary\\)\\] {\n background-color: var(--ui-kit-modal-primary);\n}\n.bg-\\[var\\(--ui-kit-select-option-hover-bg\\)\\] {\n background-color: var(--ui-kit-select-option-hover-bg);\n}\n.bg-\\[var\\(--ui-kit-select-option-selected-bg\\)\\] {\n background-color: var(--ui-kit-select-option-selected-bg);\n}\n.bg-\\[var\\(--ui-kit-surface-raised\\)\\] {\n background-color: var(--ui-kit-surface-raised);\n}\n.bg-transparent {\n background-color: transparent;\n}\n.bg-\\[linear-gradient\\(180deg\\,var\\(--ui-kit-modal-surface-raised\\)\\,var\\(--ui-kit-modal-surface\\)\\)\\] {\n background-image:\n linear-gradient(\n 180deg,\n var(--ui-kit-modal-surface-raised),\n var(--ui-kit-modal-surface));\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-\\[18px\\] {\n padding: 18px;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-\\[1\\.15rem\\] {\n padding-left: 1.15rem;\n padding-right: 1.15rem;\n}\n.px-\\[10px\\] {\n padding-left: 10px;\n padding-right: 10px;\n}\n.px-\\[11px\\] {\n padding-left: 11px;\n padding-right: 11px;\n}\n.px-\\[13px\\] {\n padding-left: 13px;\n padding-right: 13px;\n}\n.px-\\[14px\\] {\n padding-left: 14px;\n padding-right: 14px;\n}\n.px-\\[18px\\] {\n padding-left: 18px;\n padding-right: 18px;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-\\[0\\.9rem\\] {\n padding-top: 0.9rem;\n padding-bottom: 0.9rem;\n}\n.py-\\[10px\\] {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.py-\\[11px\\] {\n padding-top: 11px;\n padding-bottom: 11px;\n}\n.py-\\[14px\\] {\n padding-top: 14px;\n padding-bottom: 14px;\n}\n.py-\\[18px\\] {\n padding-top: 18px;\n padding-bottom: 18px;\n}\n.py-\\[7px\\] {\n padding-top: 7px;\n padding-bottom: 7px;\n}\n.py-\\[9px\\] {\n padding-top: 9px;\n padding-bottom: 9px;\n}\n.pb-0\\.5 {\n padding-bottom: 0.125rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-\\[10px\\] {\n padding-bottom: 10px;\n}\n.pl-6 {\n padding-left: 1.5rem;\n}\n.pr-6 {\n padding-right: 1.5rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-1\\.5 {\n padding-top: 0.375rem;\n}\n.pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\n}\n.pt-\\[18px\\] {\n padding-top: 18px;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-\\[1\\.05rem\\] {\n font-size: 1.05rem;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[11px\\] {\n font-size: 11px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-\\[15px\\] {\n font-size: 15px;\n}\n.text-\\[18px\\] {\n font-size: 18px;\n}\n.text-\\[20px\\] {\n font-size: 20px;\n}\n.text-\\[24px\\] {\n font-size: 24px;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-extrabold {\n font-weight: 800;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.leading-4 {\n line-height: 1rem;\n}\n.leading-\\[1\\.15\\] {\n line-height: 1.15;\n}\n.leading-\\[1\\.1\\] {\n line-height: 1.1;\n}\n.leading-\\[1\\.25\\] {\n line-height: 1.25;\n}\n.leading-\\[1\\.2\\] {\n line-height: 1.2;\n}\n.leading-\\[1\\.45\\] {\n line-height: 1.45;\n}\n.leading-\\[1\\.4\\] {\n line-height: 1.4;\n}\n.leading-\\[18px\\] {\n line-height: 18px;\n}\n.leading-none {\n line-height: 1;\n}\n.tracking-\\[0\\.01em\\] {\n letter-spacing: 0.01em;\n}\n.tracking-\\[0\\.06em\\] {\n letter-spacing: 0.06em;\n}\n.tracking-\\[0\\.08em\\] {\n letter-spacing: 0.08em;\n}\n.tracking-\\[0\\.16em\\] {\n letter-spacing: 0.16em;\n}\n.text-\\[var\\(--theme-negative\\)\\] {\n color: var(--theme-negative);\n}\n.text-\\[var\\(--theme-onPrimary\\)\\] {\n color: var(--theme-onPrimary);\n}\n.text-\\[var\\(--theme-primary\\)\\] {\n color: var(--theme-primary);\n}\n.text-\\[var\\(--theme-text\\)\\] {\n color: var(--theme-text);\n}\n.text-\\[var\\(--theme-textLight\\)\\] {\n color: var(--theme-textLight);\n}\n.text-\\[var\\(--ui-kit-accent\\)\\] {\n color: var(--ui-kit-accent);\n}\n.text-\\[var\\(--ui-kit-modal-on-primary\\)\\] {\n color: var(--ui-kit-modal-on-primary);\n}\n.text-\\[var\\(--ui-kit-modal-primary\\)\\] {\n color: var(--ui-kit-modal-primary);\n}\n.text-\\[var\\(--ui-kit-modal-text\\)\\] {\n color: var(--ui-kit-modal-text);\n}\n.text-\\[var\\(--ui-kit-muted-text\\)\\] {\n color: var(--ui-kit-muted-text);\n}\n.text-\\[var\\(--ui-kit-placeholder\\)\\] {\n color: var(--ui-kit-placeholder);\n}\n.text-\\[var\\(--ui-kit-select-indicator-disabled\\)\\] {\n color: var(--ui-kit-select-indicator-disabled);\n}\n.text-\\[var\\(--ui-kit-select-muted\\)\\] {\n color: var(--ui-kit-select-muted);\n}\n.text-\\[var\\(--ui-kit-select-option-disabled\\)\\] {\n color: var(--ui-kit-select-option-disabled);\n}\n.text-\\[var\\(--ui-kit-select-placeholder\\)\\] {\n color: var(--ui-kit-select-placeholder);\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-45 {\n opacity: 0.45;\n}\n.opacity-80 {\n opacity: 0.8;\n}\n.opacity-\\[0\\.38\\] {\n opacity: 0.38;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[0_0_0_3px_var\\(--ui-kit-focus-ring\\)\\] {\n --tw-shadow: 0 0 0 3px var(--ui-kit-focus-ring);\n --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\] {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[var\\(--ui-kit-modal-button-shadow-contained\\)\\] {\n --tw-shadow-color: var(--ui-kit-modal-button-shadow-contained);\n --tw-shadow: var(--tw-shadow-colored);\n}\n.shadow-\\[var\\(--ui-kit-modal-button-shadow-outlined\\)\\] {\n --tw-shadow-color: var(--ui-kit-modal-button-shadow-outlined);\n --tw-shadow: var(--tw-shadow-colored);\n}\n.shadow-\\[var\\(--ui-kit-modal-control-shadow\\)\\] {\n --tw-shadow-color: var(--ui-kit-modal-control-shadow);\n --tw-shadow: var(--tw-shadow-colored);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.saturate-0 {\n --tw-saturate: saturate(0);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-100 {\n --tw-saturate: saturate(1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-\\[0\\.8\\] {\n --tw-saturate: saturate(0.8);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-blur-\\[8px\\] {\n --tw-backdrop-blur: blur(8px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[background-color\\,color\\] {\n transition-property: background-color, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[border-color\\,box-shadow\\,background-color\\] {\n transition-property:\n border-color,\n box-shadow,\n background-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[opacity\\,filter\\] {\n transition-property: opacity, filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[transform\\,color\\] {\n transition-property: transform, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.\\[background\\:var\\(--ui-kit-card-bg\\)\\] {\n background: var(--ui-kit-card-bg);\n}\n.\\[border-color\\:var\\(--ui-kit-card-border\\)\\] {\n border-color: var(--ui-kit-card-border);\n}\n.\\[grid-template-columns\\:repeat\\(auto-fit\\,minmax\\(120px\\,1fr\\)\\)\\] {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n}\n:root {\n --ui-kit-font-family:\n "Lato",\n system-ui,\n sans-serif;\n}\n.ui-kit-root {\n font-family: var(--ui-kit-font-family);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.ui-kit-root :is(button, input, textarea, select, option) {\n font-family: var(--ui-kit-font-family);\n}\n.placeholder\\:text-\\[var\\(--ui-kit-placeholder\\)\\]::-moz-placeholder {\n color: var(--ui-kit-placeholder);\n}\n.placeholder\\:text-\\[var\\(--ui-kit-placeholder\\)\\]::placeholder {\n color: var(--ui-kit-placeholder);\n}\n.hover\\:-translate-y-\\[0\\.5px\\]:hover {\n --tw-translate-y: -0.5px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:border-\\[var\\(--theme-primaryDark\\)\\]:hover {\n border-color: var(--theme-primaryDark);\n}\n.hover\\:border-\\[var\\(--ui-kit-button-ghost-border\\)\\]:hover {\n border-color: var(--ui-kit-button-ghost-border);\n}\n.hover\\:bg-\\[var\\(--theme-primary\\)\\]:hover {\n background-color: var(--theme-primary);\n}\n.hover\\:bg-\\[var\\(--theme-primaryDark\\)\\]:hover {\n background-color: var(--theme-primaryDark);\n}\n.hover\\:bg-\\[var\\(--ui-kit-button-outline-hover\\)\\]:hover {\n background-color: var(--ui-kit-button-outline-hover);\n}\n.hover\\:text-\\[var\\(--theme-onPrimary\\)\\]:hover {\n color: var(--theme-onPrimary);\n}\n.hover\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:hover {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.active\\:translate-y-px:active {\n --tw-translate-y: 1px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:scale-\\[0\\.985\\]:active {\n --tw-scale-x: 0.985;\n --tw-scale-y: 0.985;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:border-\\[var\\(--ui-kit-button-ghost-border\\)\\]:active {\n border-color: var(--ui-kit-button-ghost-border);\n}\n.active\\:bg-\\[var\\(--theme-primary\\)\\]:active {\n background-color: var(--theme-primary);\n}\n.active\\:bg-\\[var\\(--ui-kit-button-outline-active\\)\\]:active {\n background-color: var(--ui-kit-button-outline-active);\n}\n.active\\:text-\\[var\\(--theme-onPrimary\\)\\]:active {\n color: var(--theme-onPrimary);\n}\n.active\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:active {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.disabled\\:translate-y-0:disabled {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:scale-100:disabled {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n');
|
|
24
|
+
styleInject('.ui-kit-sr-only {\n position: absolute;\n height: 1px;\n width: 1px;\n overflow: hidden;\n white-space: nowrap;\n border-width: 0px;\n padding: 0px;\n clip: rect(0, 0, 0, 0);\n margin: -1px;\n}\n.pointer-events-none {\n pointer-events: none;\n}\n.pointer-events-auto {\n pointer-events: auto;\n}\n.visible {\n visibility: visible;\n}\n.fixed {\n position: fixed;\n}\n.absolute {\n position: absolute;\n}\n.relative {\n position: relative;\n}\n.sticky {\n position: sticky;\n}\n.inset-0 {\n inset: 0px;\n}\n.inset-y-0 {\n top: 0px;\n bottom: 0px;\n}\n.left-0 {\n left: 0px;\n}\n.right-0 {\n right: 0px;\n}\n.top-1\\/2 {\n top: 50%;\n}\n.z-30 {\n z-index: 30;\n}\n.z-\\[70\\] {\n z-index: 70;\n}\n.m-0 {\n margin: 0px;\n}\n.mb-\\[18px\\] {\n margin-bottom: 18px;\n}\n.ml-1 {\n margin-left: 0.25rem;\n}\n.ml-4 {\n margin-left: 1rem;\n}\n.mr-1 {\n margin-right: 0.25rem;\n}\n.mt-0 {\n margin-top: 0px;\n}\n.mt-1 {\n margin-top: 0.25rem;\n}\n.mt-px {\n margin-top: 1px;\n}\n.box-border {\n box-sizing: border-box;\n}\n.block {\n display: block;\n}\n.inline {\n display: inline;\n}\n.flex {\n display: flex;\n}\n.inline-flex {\n display: inline-flex;\n}\n.table {\n display: table;\n}\n.grid {\n display: grid;\n}\n.hidden {\n display: none;\n}\n.h-14 {\n height: 3.5rem;\n}\n.h-2 {\n height: 0.5rem;\n}\n.h-5 {\n height: 1.25rem;\n}\n.h-\\[30px\\] {\n height: 30px;\n}\n.h-\\[34px\\] {\n height: 34px;\n}\n.h-\\[38px\\] {\n height: 38px;\n}\n.h-\\[42px\\] {\n height: 42px;\n}\n.h-\\[52px\\] {\n height: 52px;\n}\n.h-full {\n height: 100%;\n}\n.max-h-\\[280px\\] {\n max-height: 280px;\n}\n.min-h-0 {\n min-height: 0px;\n}\n.min-h-20 {\n min-height: 5rem;\n}\n.w-14 {\n width: 3.5rem;\n}\n.w-2 {\n width: 0.5rem;\n}\n.w-5 {\n width: 1.25rem;\n}\n.w-\\[25px\\] {\n width: 25px;\n}\n.w-\\[30px\\] {\n width: 30px;\n}\n.w-\\[52px\\] {\n width: 52px;\n}\n.w-auto {\n width: auto;\n}\n.w-fit {\n width: -moz-fit-content;\n width: fit-content;\n}\n.w-full {\n width: 100%;\n}\n.min-w-0 {\n min-width: 0px;\n}\n.min-w-full {\n min-width: 100%;\n}\n.max-w-fit {\n max-width: -moz-fit-content;\n max-width: fit-content;\n}\n.max-w-full {\n max-width: 100%;\n}\n.max-w-none {\n max-width: none;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.border-separate {\n border-collapse: separate;\n}\n.border-spacing-0 {\n --tw-border-spacing-x: 0px;\n --tw-border-spacing-y: 0px;\n border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);\n}\n.-translate-y-1\\/2 {\n --tw-translate-y: -50%;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.cursor-default {\n cursor: default;\n}\n.cursor-not-allowed {\n cursor: not-allowed;\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.cursor-text {\n cursor: text;\n}\n.select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n.resize-y {\n resize: vertical;\n}\n.resize {\n resize: both;\n}\n.appearance-none {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-wrap {\n flex-wrap: wrap;\n}\n.items-start {\n align-items: flex-start;\n}\n.items-center {\n align-items: center;\n}\n.justify-start {\n justify-content: flex-start;\n}\n.justify-end {\n justify-content: flex-end;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.gap-0 {\n gap: 0px;\n}\n.gap-1 {\n gap: 0.25rem;\n}\n.gap-1\\.5 {\n gap: 0.375rem;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.gap-2\\.5 {\n gap: 0.625rem;\n}\n.gap-3 {\n gap: 0.75rem;\n}\n.gap-3\\.5 {\n gap: 0.875rem;\n}\n.gap-4 {\n gap: 1rem;\n}\n.self-stretch {\n align-self: stretch;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-x-auto {\n overflow-x: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n.overflow-x-hidden {\n overflow-x: hidden;\n}\n.overflow-y-hidden {\n overflow-y: hidden;\n}\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.text-ellipsis {\n text-overflow: ellipsis;\n}\n.whitespace-nowrap {\n white-space: nowrap;\n}\n.rounded-2xl {\n border-radius: 1rem;\n}\n.rounded-\\[0\\.4rem\\] {\n border-radius: 0.4rem;\n}\n.rounded-\\[11px\\] {\n border-radius: 11px;\n}\n.rounded-\\[14px\\] {\n border-radius: 14px;\n}\n.rounded-\\[20px\\] {\n border-radius: 20px;\n}\n.rounded-\\[24px\\] {\n border-radius: 24px;\n}\n.rounded-\\[28px\\] {\n border-radius: 28px;\n}\n.rounded-\\[30px\\] {\n border-radius: 30px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.rounded-none {\n border-radius: 0px;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.border {\n border-width: 1px;\n}\n.border-0 {\n border-width: 0px;\n}\n.border-2 {\n border-width: 2px;\n}\n.border-b {\n border-bottom-width: 1px;\n}\n.border-t {\n border-top-width: 1px;\n}\n.border-solid {\n border-style: solid;\n}\n.border-\\[var\\(--theme-negative\\)\\] {\n border-color: var(--theme-negative);\n}\n.border-\\[var\\(--theme-primary\\)\\] {\n border-color: var(--theme-primary);\n}\n.border-\\[var\\(--theme-secondary\\)\\] {\n border-color: var(--theme-secondary);\n}\n.border-\\[var\\(--theme-textLight\\)\\] {\n border-color: var(--theme-textLight);\n}\n.border-\\[var\\(--ui-kit-accent\\)\\] {\n border-color: var(--ui-kit-accent);\n}\n.border-transparent {\n border-color: transparent;\n}\n.bg-\\[color-mix\\(in_srgb\\,var\\(--ui-kit-accent\\)_24\\%\\,transparent\\)\\] {\n background-color: color-mix(in srgb, var(--ui-kit-accent) 24%, transparent);\n}\n.bg-\\[var\\(--theme-primary\\)\\] {\n background-color: var(--theme-primary);\n}\n.bg-\\[var\\(--theme-surface\\)\\] {\n background-color: var(--theme-surface);\n}\n.bg-\\[var\\(--theme-text\\)\\] {\n background-color: var(--theme-text);\n}\n.bg-\\[var\\(--ui-kit-accent\\)\\] {\n background-color: var(--ui-kit-accent);\n}\n.bg-transparent {\n background-color: transparent;\n}\n.p-0 {\n padding: 0px;\n}\n.p-0\\.5 {\n padding: 0.125rem;\n}\n.p-2 {\n padding: 0.5rem;\n}\n.p-6 {\n padding: 1.5rem;\n}\n.p-\\[18px\\] {\n padding: 18px;\n}\n.px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n.px-\\[1\\.15rem\\] {\n padding-left: 1.15rem;\n padding-right: 1.15rem;\n}\n.px-\\[10px\\] {\n padding-left: 10px;\n padding-right: 10px;\n}\n.px-\\[11px\\] {\n padding-left: 11px;\n padding-right: 11px;\n}\n.px-\\[13px\\] {\n padding-left: 13px;\n padding-right: 13px;\n}\n.px-\\[14px\\] {\n padding-left: 14px;\n padding-right: 14px;\n}\n.px-\\[18px\\] {\n padding-left: 18px;\n padding-right: 18px;\n}\n.py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.py-\\[0\\.9rem\\] {\n padding-top: 0.9rem;\n padding-bottom: 0.9rem;\n}\n.py-\\[10px\\] {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.py-\\[11px\\] {\n padding-top: 11px;\n padding-bottom: 11px;\n}\n.py-\\[14px\\] {\n padding-top: 14px;\n padding-bottom: 14px;\n}\n.py-\\[18px\\] {\n padding-top: 18px;\n padding-bottom: 18px;\n}\n.py-\\[7px\\] {\n padding-top: 7px;\n padding-bottom: 7px;\n}\n.py-\\[9px\\] {\n padding-top: 9px;\n padding-bottom: 9px;\n}\n.pb-0\\.5 {\n padding-bottom: 0.125rem;\n}\n.pb-1 {\n padding-bottom: 0.25rem;\n}\n.pb-3 {\n padding-bottom: 0.75rem;\n}\n.pb-4 {\n padding-bottom: 1rem;\n}\n.pb-\\[10px\\] {\n padding-bottom: 10px;\n}\n.pl-6 {\n padding-left: 1.5rem;\n}\n.pr-6 {\n padding-right: 1.5rem;\n}\n.pt-1 {\n padding-top: 0.25rem;\n}\n.pt-1\\.5 {\n padding-top: 0.375rem;\n}\n.pt-2\\.5 {\n padding-top: 0.625rem;\n}\n.pt-3 {\n padding-top: 0.75rem;\n}\n.pt-\\[18px\\] {\n padding-top: 18px;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-2xl {\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.text-\\[1\\.05rem\\] {\n font-size: 1.05rem;\n}\n.text-\\[10px\\] {\n font-size: 10px;\n}\n.text-\\[11px\\] {\n font-size: 11px;\n}\n.text-\\[13px\\] {\n font-size: 13px;\n}\n.text-\\[15px\\] {\n font-size: 15px;\n}\n.text-\\[18px\\] {\n font-size: 18px;\n}\n.text-\\[20px\\] {\n font-size: 20px;\n}\n.text-\\[24px\\] {\n font-size: 24px;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.font-extrabold {\n font-weight: 800;\n}\n.font-normal {\n font-weight: 400;\n}\n.font-semibold {\n font-weight: 600;\n}\n.uppercase {\n text-transform: uppercase;\n}\n.leading-4 {\n line-height: 1rem;\n}\n.leading-\\[1\\.15\\] {\n line-height: 1.15;\n}\n.leading-\\[1\\.1\\] {\n line-height: 1.1;\n}\n.leading-\\[1\\.25\\] {\n line-height: 1.25;\n}\n.leading-\\[1\\.2\\] {\n line-height: 1.2;\n}\n.leading-\\[1\\.45\\] {\n line-height: 1.45;\n}\n.leading-\\[1\\.4\\] {\n line-height: 1.4;\n}\n.leading-\\[18px\\] {\n line-height: 18px;\n}\n.leading-none {\n line-height: 1;\n}\n.tracking-\\[0\\.01em\\] {\n letter-spacing: 0.01em;\n}\n.tracking-\\[0\\.06em\\] {\n letter-spacing: 0.06em;\n}\n.tracking-\\[0\\.08em\\] {\n letter-spacing: 0.08em;\n}\n.tracking-\\[0\\.16em\\] {\n letter-spacing: 0.16em;\n}\n.text-\\[var\\(--theme-negative\\)\\] {\n color: var(--theme-negative);\n}\n.text-\\[var\\(--theme-onPrimary\\)\\] {\n color: var(--theme-onPrimary);\n}\n.text-\\[var\\(--theme-primary\\)\\] {\n color: var(--theme-primary);\n}\n.text-\\[var\\(--theme-secondary\\)\\] {\n color: var(--theme-secondary);\n}\n.text-\\[var\\(--theme-text\\)\\] {\n color: var(--theme-text);\n}\n.text-\\[var\\(--theme-textLight\\)\\] {\n color: var(--theme-textLight);\n}\n.text-\\[var\\(--ui-kit-accent\\)\\] {\n color: var(--ui-kit-accent);\n}\n.opacity-0 {\n opacity: 0;\n}\n.opacity-100 {\n opacity: 1;\n}\n.opacity-45 {\n opacity: 0.45;\n}\n.opacity-70 {\n opacity: 0.7;\n}\n.opacity-80 {\n opacity: 0.8;\n}\n.opacity-\\[0\\.38\\] {\n opacity: 0.38;\n}\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\] {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.shadow-none {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.outline-none {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n.outline {\n outline-style: solid;\n}\n.saturate-0 {\n --tw-saturate: saturate(0);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-100 {\n --tw-saturate: saturate(1);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.saturate-\\[0\\.8\\] {\n --tw-saturate: saturate(0.8);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.backdrop-blur-\\[8px\\] {\n --tw-backdrop-blur: blur(8px);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.transition {\n transition-property:\n color,\n background-color,\n border-color,\n text-decoration-color,\n fill,\n stroke,\n opacity,\n box-shadow,\n transform,\n filter,\n backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[background-color\\,color\\] {\n transition-property: background-color, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[border-color\\,box-shadow\\,background-color\\] {\n transition-property:\n border-color,\n box-shadow,\n background-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[opacity\\,filter\\] {\n transition-property: opacity, filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-\\[transform\\,color\\] {\n transition-property: transform, color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.duration-150 {\n transition-duration: 150ms;\n}\n.duration-300 {\n transition-duration: 300ms;\n}\n.\\[grid-template-columns\\:repeat\\(auto-fit\\,minmax\\(120px\\,1fr\\)\\)\\] {\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n}\n:root {\n --ui-kit-font-family:\n "Lato",\n system-ui,\n sans-serif;\n}\n.ui-kit-root {\n font-family: var(--ui-kit-font-family);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.ui-kit-root :is(button, input, textarea, select, option) {\n font-family: var(--ui-kit-font-family);\n}\n.placeholder\\:text-\\[var\\(--theme-textLight\\)\\]::-moz-placeholder {\n color: var(--theme-textLight);\n}\n.placeholder\\:text-\\[var\\(--theme-textLight\\)\\]::placeholder {\n color: var(--theme-textLight);\n}\n.placeholder\\:opacity-100::-moz-placeholder {\n opacity: 1;\n}\n.placeholder\\:opacity-100::placeholder {\n opacity: 1;\n}\n.hover\\:-translate-y-\\[0\\.5px\\]:hover {\n --tw-translate-y: -0.5px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:border-\\[var\\(--theme-primary\\)\\]:hover {\n border-color: var(--theme-primary);\n}\n.hover\\:border-\\[var\\(--theme-primaryDark\\)\\]:hover {\n border-color: var(--theme-primaryDark);\n}\n.hover\\:bg-\\[var\\(--theme-primary\\)\\]:hover {\n background-color: var(--theme-primary);\n}\n.hover\\:bg-\\[var\\(--theme-primaryDark\\)\\]:hover {\n background-color: var(--theme-primaryDark);\n}\n.hover\\:bg-\\[var\\(--theme-surface\\)\\]:hover {\n background-color: var(--theme-surface);\n}\n.hover\\:text-\\[var\\(--theme-onPrimary\\)\\]:hover {\n color: var(--theme-onPrimary);\n}\n.hover\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:hover {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.active\\:translate-y-px:active {\n --tw-translate-y: 1px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:scale-\\[0\\.985\\]:active {\n --tw-scale-x: 0.985;\n --tw-scale-y: 0.985;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.active\\:border-\\[var\\(--theme-primary\\)\\]:active {\n border-color: var(--theme-primary);\n}\n.active\\:bg-\\[var\\(--theme-primary\\)\\]:active {\n background-color: var(--theme-primary);\n}\n.active\\:bg-\\[var\\(--theme-secondary\\)\\]:active {\n background-color: var(--theme-secondary);\n}\n.active\\:text-\\[var\\(--theme-onPrimary\\)\\]:active {\n color: var(--theme-onPrimary);\n}\n.active\\:shadow-\\[0px_4px_5px_var\\(--theme-shadow\\)\\]:active {\n --tw-shadow: 0px 4px 5px var(--theme-shadow);\n --tw-shadow-colored: 0px 4px 5px var(--tw-shadow-color);\n box-shadow:\n var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000),\n var(--tw-shadow);\n}\n.disabled\\:translate-y-0:disabled {\n --tw-translate-y: 0px;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:scale-100:disabled {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n}\n');
|
|
25
25
|
|
|
26
26
|
// node_modules/@fontsource/lato/files/lato-latin-400-normal.woff
|
|
27
27
|
var lato_latin_400_normal_default = "data:font/woff;base64,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";
|
|
@@ -108,21 +108,12 @@ var cx = (...values) => {
|
|
|
108
108
|
};
|
|
109
109
|
var UI_KIT_ROOT_CLASSNAME = "ui-kit-root";
|
|
110
110
|
|
|
111
|
-
// src/foundation/color.ts
|
|
112
|
-
function withAlpha(hex, alpha) {
|
|
113
|
-
const normalized = hex.replace("#", "").trim();
|
|
114
|
-
const value = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized;
|
|
115
|
-
const red = Number.parseInt(value.slice(0, 2), 16);
|
|
116
|
-
const green = Number.parseInt(value.slice(2, 4), 16);
|
|
117
|
-
const blue = Number.parseInt(value.slice(4, 6), 16);
|
|
118
|
-
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
111
|
// src/foundation/componentState.ts
|
|
122
112
|
var DISABLED_COMPONENT_OPACITY = 0.5;
|
|
123
113
|
var DISABLED_FIELD_OPACITY = 0.7;
|
|
124
114
|
|
|
125
115
|
// src/foundation/controlSize.ts
|
|
116
|
+
var CONTROL_LEADING_ICON_SHIFT = 5;
|
|
126
117
|
var CONTROL_METRICS_BY_SIZE = {
|
|
127
118
|
sm: {
|
|
128
119
|
height: 30,
|
|
@@ -156,22 +147,20 @@ var CONTROL_METRICS_BY_SIZE = {
|
|
|
156
147
|
}
|
|
157
148
|
};
|
|
158
149
|
var getControlMetrics = (size) => CONTROL_METRICS_BY_SIZE[size];
|
|
150
|
+
var getControlLeadingIconInset = (size) => {
|
|
151
|
+
const metrics = getControlMetrics(size);
|
|
152
|
+
return Math.round(metrics.paddingX / 2) + CONTROL_LEADING_ICON_SHIFT;
|
|
153
|
+
};
|
|
154
|
+
var getControlLeadingAdornmentWidth = (size, iconSize) => {
|
|
155
|
+
return getControlLeadingIconInset(size) + iconSize;
|
|
156
|
+
};
|
|
159
157
|
var getSelectIndicatorOffset = (size) => getControlMetrics(size).selectIndicatorOffset;
|
|
160
158
|
|
|
161
159
|
// src/foundation/shadow.ts
|
|
162
|
-
var LIGHT_SHADOW = "#B8B8B8";
|
|
163
|
-
var DARK_SHADOW = "#181818";
|
|
164
|
-
function getComponentShadow(theme) {
|
|
165
|
-
var _a;
|
|
166
|
-
const colors = theme.colors;
|
|
167
|
-
const fallbackShadow = `${theme.title}`.toUpperCase() === "DARK" ? DARK_SHADOW : LIGHT_SHADOW;
|
|
168
|
-
const shadowColor = (_a = colors.shadow) != null ? _a : fallbackShadow;
|
|
169
|
-
return `${shadowColor} 0px 4px 5px`;
|
|
170
|
-
}
|
|
171
160
|
function getInsetBorderShadow(borderColor, options = {}) {
|
|
172
161
|
const {
|
|
173
162
|
outerShadow,
|
|
174
|
-
componentShadow = "var(--
|
|
163
|
+
componentShadow = "0px 4px 5px var(--theme-shadow)",
|
|
175
164
|
insetWidth = 1
|
|
176
165
|
} = options;
|
|
177
166
|
return [
|
|
@@ -260,29 +249,14 @@ var ROOT_THEME_VARIABLES = [
|
|
|
260
249
|
["--theme-onPrimary", "onPrimary"],
|
|
261
250
|
["--theme-onSecondary", "onSecondary"]
|
|
262
251
|
];
|
|
263
|
-
var syncUiKitThemeVariables = (
|
|
252
|
+
var syncUiKitThemeVariables = (theme) => {
|
|
264
253
|
if (typeof document === "undefined") {
|
|
265
254
|
return;
|
|
266
255
|
}
|
|
267
256
|
const rootStyle = document.documentElement.style;
|
|
268
257
|
ROOT_THEME_VARIABLES.forEach(([variableName, colorName]) => {
|
|
269
|
-
rootStyle.setProperty(variableName,
|
|
258
|
+
rootStyle.setProperty(variableName, theme.colors[colorName]);
|
|
270
259
|
});
|
|
271
|
-
rootStyle.setProperty("--ui-kit-border-soft", tokens.borderSoft);
|
|
272
|
-
rootStyle.setProperty("--ui-kit-border-strong", tokens.borderStrong);
|
|
273
|
-
rootStyle.setProperty("--ui-kit-surface-muted", tokens.surfaceMuted);
|
|
274
|
-
rootStyle.setProperty("--ui-kit-surface-raised", tokens.surfaceRaised);
|
|
275
|
-
rootStyle.setProperty("--ui-kit-overlay", tokens.overlay);
|
|
276
|
-
rootStyle.setProperty("--ui-kit-focus-ring", tokens.focusRing);
|
|
277
|
-
rootStyle.setProperty("--ui-kit-muted-text", tokens.mutedText);
|
|
278
|
-
rootStyle.setProperty("--ui-kit-component-shadow", getComponentShadow(tokens.theme));
|
|
279
|
-
rootStyle.setProperty("--ui-kit-card-bg", withAlpha(tokens.theme.colors.background, 0.7));
|
|
280
|
-
rootStyle.setProperty("--ui-kit-card-border", withAlpha(tokens.theme.colors.text, 0.5));
|
|
281
|
-
rootStyle.setProperty("--ui-kit-button-outline-hover", withAlpha(tokens.theme.colors.text, 0.08));
|
|
282
|
-
rootStyle.setProperty("--ui-kit-button-outline-active", withAlpha(tokens.theme.colors.text, 0.14));
|
|
283
|
-
rootStyle.setProperty("--ui-kit-button-ghost-border", withAlpha(tokens.theme.colors.primary, 0.5));
|
|
284
|
-
rootStyle.setProperty("--ui-kit-placeholder", withAlpha(tokens.theme.colors.text, 0.5));
|
|
285
|
-
rootStyle.setProperty("--ui-kit-negative-soft", withAlpha(tokens.theme.colors.negative, 0.12));
|
|
286
260
|
};
|
|
287
261
|
function normalizeUiKitTheme(theme) {
|
|
288
262
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
|
|
@@ -316,26 +290,13 @@ function normalizeUiKitTheme(theme) {
|
|
|
316
290
|
color: normalizedColors
|
|
317
291
|
};
|
|
318
292
|
}
|
|
319
|
-
function createUiKitThemeTokens(themeSource) {
|
|
320
|
-
const theme = normalizeUiKitTheme(themeSource);
|
|
321
|
-
return {
|
|
322
|
-
theme,
|
|
323
|
-
borderSoft: withAlpha(theme.colors.text, 0.1),
|
|
324
|
-
borderStrong: withAlpha(theme.colors.text, 0.16),
|
|
325
|
-
surfaceMuted: withAlpha(theme.colors.text, 0.04),
|
|
326
|
-
surfaceRaised: withAlpha(theme.colors.surface, 0.94),
|
|
327
|
-
overlay: withAlpha("#030712", 0.62),
|
|
328
|
-
focusRing: withAlpha(theme.colors.primary, 0.22),
|
|
329
|
-
mutedText: withAlpha(theme.colors.text, 0.72)
|
|
330
|
-
};
|
|
331
|
-
}
|
|
332
293
|
function useUiKitTheme() {
|
|
333
294
|
const activeTheme = useThemeValue();
|
|
334
|
-
const
|
|
295
|
+
const theme = useMemo(() => normalizeUiKitTheme(activeTheme), [activeTheme]);
|
|
335
296
|
useEffect(() => {
|
|
336
|
-
syncUiKitThemeVariables(
|
|
337
|
-
}, [
|
|
338
|
-
return
|
|
297
|
+
syncUiKitThemeVariables(theme);
|
|
298
|
+
}, [theme]);
|
|
299
|
+
return theme;
|
|
339
300
|
}
|
|
340
301
|
|
|
341
302
|
// src/components/Button.tsx
|
|
@@ -363,10 +324,10 @@ var BUTTON_VARIANT_CLASSNAMES = {
|
|
|
363
324
|
"text-[var(--theme-text)]",
|
|
364
325
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
365
326
|
"hover:-translate-y-[0.5px]",
|
|
366
|
-
"hover:bg-[var(--
|
|
327
|
+
"hover:bg-[var(--theme-surface)]",
|
|
367
328
|
"active:translate-y-px",
|
|
368
329
|
"active:scale-[0.985]",
|
|
369
|
-
"active:bg-[var(--
|
|
330
|
+
"active:bg-[var(--theme-secondary)]"
|
|
370
331
|
].join(" "),
|
|
371
332
|
ghost: [
|
|
372
333
|
"border-transparent",
|
|
@@ -374,13 +335,13 @@ var BUTTON_VARIANT_CLASSNAMES = {
|
|
|
374
335
|
"text-[var(--theme-text)]",
|
|
375
336
|
"shadow-none",
|
|
376
337
|
"hover:-translate-y-[0.5px]",
|
|
377
|
-
"hover:border-[var(--
|
|
338
|
+
"hover:border-[var(--theme-primary)]",
|
|
378
339
|
"hover:bg-[var(--theme-primary)]",
|
|
379
340
|
"hover:text-[var(--theme-onPrimary)]",
|
|
380
341
|
"hover:shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
381
342
|
"active:translate-y-px",
|
|
382
343
|
"active:scale-[0.985]",
|
|
383
|
-
"active:border-[var(--
|
|
344
|
+
"active:border-[var(--theme-primary)]",
|
|
384
345
|
"active:bg-[var(--theme-primary)]",
|
|
385
346
|
"active:text-[var(--theme-onPrimary)]",
|
|
386
347
|
"active:shadow-[0px_4px_5px_var(--theme-shadow)]"
|
|
@@ -443,10 +404,8 @@ function Card({
|
|
|
443
404
|
...rest,
|
|
444
405
|
className: cx(
|
|
445
406
|
UI_KIT_ROOT_CLASSNAME,
|
|
446
|
-
"rounded-[28px] border text-[var(--theme-text)]",
|
|
407
|
+
"rounded-[28px] border border-[var(--theme-secondary)] bg-[var(--theme-surface)] text-[var(--theme-text)]",
|
|
447
408
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
448
|
-
"[background:var(--ui-kit-card-bg)]",
|
|
449
|
-
"[border-color:var(--ui-kit-card-border)]",
|
|
450
409
|
padded && "p-6",
|
|
451
410
|
className
|
|
452
411
|
),
|
|
@@ -475,7 +434,7 @@ function CardSmall({
|
|
|
475
434
|
style,
|
|
476
435
|
...rest
|
|
477
436
|
}) {
|
|
478
|
-
const
|
|
437
|
+
const theme = useUiKitTheme();
|
|
479
438
|
const accentColor = color != null ? color : theme.colors.primary;
|
|
480
439
|
return /* @__PURE__ */ jsxs3(
|
|
481
440
|
"div",
|
|
@@ -485,7 +444,7 @@ function CardSmall({
|
|
|
485
444
|
UI_KIT_ROOT_CLASSNAME,
|
|
486
445
|
"relative flex min-h-20 items-center gap-4 overflow-hidden",
|
|
487
446
|
"rounded-2xl border border-solid border-[var(--ui-kit-accent)]",
|
|
488
|
-
"bg-[var(--
|
|
447
|
+
"bg-[var(--theme-surface)] pl-6 pr-6 text-[var(--theme-text)]",
|
|
489
448
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
490
449
|
className
|
|
491
450
|
),
|
|
@@ -571,7 +530,7 @@ function CheckboxIndicator({
|
|
|
571
530
|
uncheckedBackgroundColor,
|
|
572
531
|
style
|
|
573
532
|
}) {
|
|
574
|
-
const
|
|
533
|
+
const theme = useUiKitTheme();
|
|
575
534
|
const isActive = checked || indeterminate;
|
|
576
535
|
const resolvedCheckedColor = checkedColor != null ? checkedColor : theme.colors.textLight;
|
|
577
536
|
const resolvedIconColor = iconColor != null ? iconColor : theme.colors.surface;
|
|
@@ -621,7 +580,8 @@ function Checkbox({
|
|
|
621
580
|
onBlur,
|
|
622
581
|
...rest
|
|
623
582
|
}) {
|
|
624
|
-
const
|
|
583
|
+
const theme = useUiKitTheme();
|
|
584
|
+
const mutedText = theme.colors.textLight;
|
|
625
585
|
const indicatorSize = getCheckboxSize(controlSize);
|
|
626
586
|
const hasLabel = hasNodeContent(label);
|
|
627
587
|
const hasHint = hasNodeContent(hint);
|
|
@@ -629,7 +589,6 @@ function Checkbox({
|
|
|
629
589
|
const hasSecondaryContent = hasLabel && hasHint;
|
|
630
590
|
const resolvedId = id != null ? id : `ss-checkbox-${useId().replace(/:/g, "")}`;
|
|
631
591
|
const inputRef = useRef(null);
|
|
632
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
633
592
|
const [internalChecked, setInternalChecked] = useState(Boolean(defaultChecked));
|
|
634
593
|
const isControlled = checked !== void 0;
|
|
635
594
|
const resolvedChecked = isControlled ? Boolean(checked) : internalChecked;
|
|
@@ -661,9 +620,7 @@ function Checkbox({
|
|
|
661
620
|
{
|
|
662
621
|
className: cx(
|
|
663
622
|
"relative inline-flex shrink-0 items-center justify-center rounded-full p-0.5",
|
|
664
|
-
hasSecondaryContent ? "mt-px" : "mt-0"
|
|
665
|
-
"transition-shadow duration-150",
|
|
666
|
-
isFocused ? "shadow-[0_0_0_3px_var(--ui-kit-focus-ring)]" : "shadow-none"
|
|
623
|
+
hasSecondaryContent ? "mt-px" : "mt-0"
|
|
667
624
|
),
|
|
668
625
|
children: [
|
|
669
626
|
/* @__PURE__ */ jsx3(
|
|
@@ -683,11 +640,9 @@ function Checkbox({
|
|
|
683
640
|
onChange == null ? void 0 : onChange(event);
|
|
684
641
|
},
|
|
685
642
|
onFocus: (event) => {
|
|
686
|
-
setIsFocused(true);
|
|
687
643
|
onFocus == null ? void 0 : onFocus(event);
|
|
688
644
|
},
|
|
689
645
|
onBlur: (event) => {
|
|
690
|
-
setIsFocused(false);
|
|
691
646
|
onBlur == null ? void 0 : onBlur(event);
|
|
692
647
|
},
|
|
693
648
|
className: cx(
|
|
@@ -705,7 +660,7 @@ function Checkbox({
|
|
|
705
660
|
size: indicatorSize,
|
|
706
661
|
checkedColor: theme.colors.primary,
|
|
707
662
|
iconColor: theme.colors.onPrimary,
|
|
708
|
-
uncheckedBorderColor:
|
|
663
|
+
uncheckedBorderColor: theme.colors.text,
|
|
709
664
|
uncheckedBackgroundColor: theme.colors.surface,
|
|
710
665
|
style: disabled ? { opacity: 1 } : void 0
|
|
711
666
|
}
|
|
@@ -725,7 +680,7 @@ function Checkbox({
|
|
|
725
680
|
label,
|
|
726
681
|
required ? /* @__PURE__ */ jsx3("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
|
|
727
682
|
] }) : null,
|
|
728
|
-
hint ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] leading-[1.45] text-[var(--
|
|
683
|
+
hint ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null,
|
|
729
684
|
error ? /* @__PURE__ */ jsx3("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
|
|
730
685
|
]
|
|
731
686
|
}
|
|
@@ -743,29 +698,25 @@ import { useMemo as useMemo3 } from "react";
|
|
|
743
698
|
// src/components/Modal.tsx
|
|
744
699
|
import { useEffect as useEffect3, useMemo as useMemo2, useState as useState2 } from "react";
|
|
745
700
|
import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
746
|
-
var
|
|
747
|
-
return Boolean(theme && typeof theme === "object" && "theme" in theme);
|
|
701
|
+
var isUiKitTheme = (theme) => {
|
|
702
|
+
return Boolean(theme && typeof theme === "object" && "title" in theme && "color" in theme);
|
|
748
703
|
};
|
|
749
|
-
var withResolvedModalColors = (theme) => ({
|
|
750
|
-
...theme,
|
|
751
|
-
colors: theme.theme.colors
|
|
752
|
-
});
|
|
753
704
|
var resolveTheme = (baseTheme, themeOverride) => {
|
|
754
|
-
if (
|
|
755
|
-
return
|
|
705
|
+
if (isUiKitTheme(themeOverride)) {
|
|
706
|
+
return themeOverride;
|
|
756
707
|
}
|
|
757
708
|
if (!(themeOverride == null ? void 0 : themeOverride.colors)) {
|
|
758
|
-
return
|
|
709
|
+
return baseTheme;
|
|
759
710
|
}
|
|
760
711
|
const colors = {
|
|
761
|
-
...baseTheme.
|
|
712
|
+
...baseTheme.colors,
|
|
762
713
|
...themeOverride.colors
|
|
763
714
|
};
|
|
764
|
-
return
|
|
765
|
-
...baseTheme
|
|
715
|
+
return normalizeUiKitTheme({
|
|
716
|
+
...baseTheme,
|
|
766
717
|
colors,
|
|
767
718
|
color: colors
|
|
768
|
-
})
|
|
719
|
+
});
|
|
769
720
|
};
|
|
770
721
|
var normalizeWidth = (maxWidth) => {
|
|
771
722
|
if (typeof maxWidth === "number") {
|
|
@@ -789,8 +740,7 @@ var createTitleId = (title) => {
|
|
|
789
740
|
return "smartsell-modal-dialog";
|
|
790
741
|
};
|
|
791
742
|
function ModalActionButton({
|
|
792
|
-
action
|
|
793
|
-
theme
|
|
743
|
+
action
|
|
794
744
|
}) {
|
|
795
745
|
var _a, _b;
|
|
796
746
|
const {
|
|
@@ -805,12 +755,12 @@ function ModalActionButton({
|
|
|
805
755
|
"m-0 text-center font-bold leading-[1.2]",
|
|
806
756
|
appearance === "link" ? "p-0 text-[1.05rem]" : "px-[1.15rem] py-[0.9rem] text-[1.05rem]",
|
|
807
757
|
disabled ? "cursor-not-allowed saturate-0" : "cursor-pointer",
|
|
808
|
-
appearance === "text" && "border border-transparent bg-transparent text-[var(--
|
|
809
|
-
appearance === "link" && "border-0 bg-transparent text-[var(--
|
|
810
|
-
appearance === "outlined" && "border-2 border-[var(--
|
|
811
|
-
appearance === "outlined" && "text-[var(--
|
|
812
|
-
appearance === "contained" && "border border-transparent bg-[var(--
|
|
813
|
-
appearance === "contained" && "text-[var(--
|
|
758
|
+
appearance === "text" && "border border-transparent bg-transparent text-[var(--theme-primary)] shadow-none",
|
|
759
|
+
appearance === "link" && "border-0 bg-transparent text-[var(--theme-primary)] shadow-none",
|
|
760
|
+
appearance === "outlined" && "border-2 border-[var(--theme-primary)] bg-transparent",
|
|
761
|
+
appearance === "outlined" && "text-[var(--theme-primary)]",
|
|
762
|
+
appearance === "contained" && "border border-transparent bg-[var(--theme-primary)]",
|
|
763
|
+
appearance === "contained" && "text-[var(--theme-onPrimary)]"
|
|
814
764
|
);
|
|
815
765
|
return /* @__PURE__ */ jsx4(
|
|
816
766
|
"div",
|
|
@@ -828,7 +778,10 @@ function ModalActionButton({
|
|
|
828
778
|
onClick: disabled ? void 0 : onClick,
|
|
829
779
|
disabled,
|
|
830
780
|
className: buttonClassName,
|
|
831
|
-
style: {
|
|
781
|
+
style: {
|
|
782
|
+
opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
|
|
783
|
+
boxShadow: appearance === "text" || appearance === "link" ? "none" : "0 14px 28px var(--theme-shadow)"
|
|
784
|
+
},
|
|
832
785
|
children: label
|
|
833
786
|
}
|
|
834
787
|
)
|
|
@@ -845,8 +798,8 @@ function ModalBusyIndicator({
|
|
|
845
798
|
role: "status",
|
|
846
799
|
className: "relative inline-flex h-14 w-14 items-center justify-center rounded-full",
|
|
847
800
|
style: {
|
|
848
|
-
backgroundColor:
|
|
849
|
-
boxShadow: `0 18px 36px ${
|
|
801
|
+
backgroundColor: theme.colors.surface,
|
|
802
|
+
boxShadow: `0 18px 36px ${theme.colors.shadow}`
|
|
850
803
|
},
|
|
851
804
|
children: [
|
|
852
805
|
/* @__PURE__ */ jsx4("span", { className: "ui-kit-sr-only", children: "Loading" }),
|
|
@@ -857,7 +810,7 @@ function ModalBusyIndicator({
|
|
|
857
810
|
cx: "20",
|
|
858
811
|
cy: "20",
|
|
859
812
|
r: "16",
|
|
860
|
-
stroke:
|
|
813
|
+
stroke: theme.colors.textLight,
|
|
861
814
|
strokeWidth: "4"
|
|
862
815
|
}
|
|
863
816
|
),
|
|
@@ -940,24 +893,22 @@ function UnifiedModal({
|
|
|
940
893
|
const inheritedTheme = useUiKitTheme();
|
|
941
894
|
const modalTheme = useMemo2(() => resolveTheme(inheritedTheme, theme), [inheritedTheme, theme]);
|
|
942
895
|
const modalShadow = useMemo2(() => {
|
|
943
|
-
return `0 34px 80px ${
|
|
944
|
-
}, [modalTheme.
|
|
945
|
-
const controlShadow =
|
|
946
|
-
const
|
|
947
|
-
"--
|
|
948
|
-
"--
|
|
949
|
-
"--
|
|
950
|
-
"--
|
|
951
|
-
"--
|
|
952
|
-
"--
|
|
953
|
-
"--
|
|
954
|
-
"--
|
|
955
|
-
"--
|
|
956
|
-
"--
|
|
957
|
-
"--
|
|
958
|
-
|
|
959
|
-
"--ui-kit-modal-button-shadow-contained": `0 14px 28px ${withAlpha(modalTheme.colors.primary, 0.22)}`
|
|
960
|
-
}), [controlShadow, modalShadow, modalTheme]);
|
|
896
|
+
return `0 34px 80px ${modalTheme.colors.shadow}`;
|
|
897
|
+
}, [modalTheme.colors.shadow]);
|
|
898
|
+
const controlShadow = "0px 4px 5px var(--theme-shadow)";
|
|
899
|
+
const modalThemeVariables = useMemo2(() => ({
|
|
900
|
+
"--theme-background": modalTheme.colors.background,
|
|
901
|
+
"--theme-surface": modalTheme.colors.surface,
|
|
902
|
+
"--theme-text": modalTheme.colors.text,
|
|
903
|
+
"--theme-textLight": modalTheme.colors.textLight,
|
|
904
|
+
"--theme-primary": modalTheme.colors.primary,
|
|
905
|
+
"--theme-onPrimary": modalTheme.colors.onPrimary,
|
|
906
|
+
"--theme-secondary": modalTheme.colors.secondary,
|
|
907
|
+
"--theme-onSecondary": modalTheme.colors.onSecondary,
|
|
908
|
+
"--theme-negative": modalTheme.colors.negative,
|
|
909
|
+
"--theme-warning": modalTheme.colors.warning,
|
|
910
|
+
"--theme-shadow": modalTheme.colors.shadow
|
|
911
|
+
}), [modalTheme]);
|
|
961
912
|
const [isMaximized, setIsMaximized] = useState2(maximized != null ? maximized : false);
|
|
962
913
|
const titleId = useMemo2(() => createTitleId(title), [title]);
|
|
963
914
|
const shouldDisableDismiss = disableDismiss || isBusy;
|
|
@@ -994,7 +945,7 @@ function UnifiedModal({
|
|
|
994
945
|
"h2",
|
|
995
946
|
{
|
|
996
947
|
id: titleId,
|
|
997
|
-
className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--
|
|
948
|
+
className: "m-0 text-2xl font-extrabold leading-[1.1] text-[var(--theme-text)]",
|
|
998
949
|
children: title
|
|
999
950
|
}
|
|
1000
951
|
) : null;
|
|
@@ -1004,8 +955,7 @@ function UnifiedModal({
|
|
|
1004
955
|
footerContent = /* @__PURE__ */ jsx4(
|
|
1005
956
|
ModalActionButton,
|
|
1006
957
|
{
|
|
1007
|
-
action: { ...closeAction, disabled: closeAction.disabled || isBusy }
|
|
1008
|
-
theme: modalTheme
|
|
958
|
+
action: { ...closeAction, disabled: closeAction.disabled || isBusy }
|
|
1009
959
|
}
|
|
1010
960
|
);
|
|
1011
961
|
} else {
|
|
@@ -1038,8 +988,7 @@ function UnifiedModal({
|
|
|
1038
988
|
footerContent = resolvedActions.length > 0 ? resolvedActions.map((action, index) => /* @__PURE__ */ jsx4(
|
|
1039
989
|
ModalActionButton,
|
|
1040
990
|
{
|
|
1041
|
-
action
|
|
1042
|
-
theme: modalTheme
|
|
991
|
+
action
|
|
1043
992
|
},
|
|
1044
993
|
`modal-action-${index}`
|
|
1045
994
|
)) : void 0;
|
|
@@ -1061,17 +1010,17 @@ function UnifiedModal({
|
|
|
1061
1010
|
},
|
|
1062
1011
|
className: cx(UI_KIT_ROOT_CLASSNAME, "fixed inset-0 z-[70] flex items-center justify-center backdrop-blur-[8px]"),
|
|
1063
1012
|
style: {
|
|
1064
|
-
...
|
|
1013
|
+
...modalThemeVariables,
|
|
1065
1014
|
padding: isMaximized ? 0 : 16,
|
|
1066
|
-
backgroundColor:
|
|
1015
|
+
backgroundColor: modalTheme.colors.shadow
|
|
1067
1016
|
},
|
|
1068
1017
|
children: /* @__PURE__ */ jsxs5(
|
|
1069
1018
|
"div",
|
|
1070
1019
|
{
|
|
1071
1020
|
className: cx(
|
|
1072
1021
|
"relative flex flex-col overflow-hidden border",
|
|
1073
|
-
"bg-[
|
|
1074
|
-
"text-[var(--
|
|
1022
|
+
"bg-[var(--theme-surface)]",
|
|
1023
|
+
"text-[var(--theme-text)]",
|
|
1075
1024
|
isMaximized ? "rounded-none" : "rounded-[30px]"
|
|
1076
1025
|
),
|
|
1077
1026
|
style: {
|
|
@@ -1080,8 +1029,8 @@ function UnifiedModal({
|
|
|
1080
1029
|
height: isMaximized ? "100vh" : void 0,
|
|
1081
1030
|
maxHeight: isMaximized ? "100vh" : "calc(100vh - 32px)",
|
|
1082
1031
|
minWidth: isMaximized ? "100vw" : 300,
|
|
1083
|
-
borderColor:
|
|
1084
|
-
boxShadow:
|
|
1032
|
+
borderColor: modalTheme.colors.secondary,
|
|
1033
|
+
boxShadow: modalShadow,
|
|
1085
1034
|
...contentStyle
|
|
1086
1035
|
},
|
|
1087
1036
|
children: [
|
|
@@ -1089,7 +1038,7 @@ function UnifiedModal({
|
|
|
1089
1038
|
"div",
|
|
1090
1039
|
{
|
|
1091
1040
|
className: "flex items-start justify-between gap-3 border-b px-5 pb-3 pt-[18px]",
|
|
1092
|
-
style: { borderColor:
|
|
1041
|
+
style: { borderColor: modalTheme.colors.secondary },
|
|
1093
1042
|
children: [
|
|
1094
1043
|
/* @__PURE__ */ jsx4(
|
|
1095
1044
|
"div",
|
|
@@ -1109,8 +1058,8 @@ function UnifiedModal({
|
|
|
1109
1058
|
title: isMaximized ? "Minimize" : "Maximize",
|
|
1110
1059
|
type: "button",
|
|
1111
1060
|
onClick: () => setIsMaximized((current) => !current),
|
|
1112
|
-
className: "m-0 inline-flex h-[30px] w-[30px] shrink-0 cursor-pointer appearance-none items-center justify-center rounded-full border bg-transparent p-0 text-[var(--
|
|
1113
|
-
style: { borderColor:
|
|
1061
|
+
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",
|
|
1062
|
+
style: { borderColor: modalTheme.colors.secondary, boxShadow: controlShadow },
|
|
1114
1063
|
children: isMaximized ? /* @__PURE__ */ jsx4(MinimizeIcon, {}) : /* @__PURE__ */ jsx4(MaximizeIcon, {})
|
|
1115
1064
|
}
|
|
1116
1065
|
) : null,
|
|
@@ -1122,12 +1071,12 @@ function UnifiedModal({
|
|
|
1122
1071
|
onClick: shouldDisableDismiss ? void 0 : onClose,
|
|
1123
1072
|
className: cx(
|
|
1124
1073
|
"flex h-[30px] w-[30px] items-center justify-center rounded-full border",
|
|
1125
|
-
"bg-transparent text-[20px] font-bold text-[var(--
|
|
1126
|
-
"shadow-[var(--ui-kit-modal-control-shadow)]",
|
|
1074
|
+
"bg-transparent text-[20px] font-bold text-[var(--theme-text)]",
|
|
1127
1075
|
shouldDisableDismiss ? "cursor-not-allowed" : "cursor-pointer"
|
|
1128
1076
|
),
|
|
1129
1077
|
style: {
|
|
1130
|
-
borderColor:
|
|
1078
|
+
borderColor: modalTheme.colors.secondary,
|
|
1079
|
+
boxShadow: controlShadow,
|
|
1131
1080
|
opacity: shouldDisableDismiss ? DISABLED_COMPONENT_OPACITY : 1
|
|
1132
1081
|
},
|
|
1133
1082
|
children: "\xD7"
|
|
@@ -1156,7 +1105,8 @@ function UnifiedModal({
|
|
|
1156
1105
|
isBusy ? /* @__PURE__ */ jsx4(
|
|
1157
1106
|
"div",
|
|
1158
1107
|
{
|
|
1159
|
-
className: "absolute inset-0 flex items-center justify-center
|
|
1108
|
+
className: "absolute inset-0 flex items-center justify-center backdrop-blur-[2px]",
|
|
1109
|
+
style: { backgroundColor: modalTheme.colors.background },
|
|
1160
1110
|
children: /* @__PURE__ */ jsx4(ModalBusyIndicator, { theme: modalTheme })
|
|
1161
1111
|
}
|
|
1162
1112
|
) : null
|
|
@@ -1167,7 +1117,7 @@ function UnifiedModal({
|
|
|
1167
1117
|
"div",
|
|
1168
1118
|
{
|
|
1169
1119
|
className: "flex justify-end gap-2.5 border-t px-5 pb-4 pt-3",
|
|
1170
|
-
style: { borderColor:
|
|
1120
|
+
style: { borderColor: modalTheme.colors.secondary },
|
|
1171
1121
|
children: footerContent
|
|
1172
1122
|
}
|
|
1173
1123
|
) : null
|
|
@@ -1313,6 +1263,218 @@ var FIELD_PADDING_X_CLASSNAMES = {
|
|
|
1313
1263
|
lg: "px-4"
|
|
1314
1264
|
};
|
|
1315
1265
|
var getPasswordToggleMetrics = (size) => PASSWORD_TOGGLE_METRICS_BY_SIZE[size];
|
|
1266
|
+
var LOGIN_VALIDATION_ERROR = "Spaces are not allowed.";
|
|
1267
|
+
var EMAIL_VALIDATION_ERROR = "Enter a valid email address.";
|
|
1268
|
+
var EMAIL_VALUE_PATTERN = /^[^\s@]+@[^\s@]+$/;
|
|
1269
|
+
var SPACE_PATTERN = /\s/;
|
|
1270
|
+
var isRenderableNode = (node) => node !== null && node !== void 0 && node !== false;
|
|
1271
|
+
var getInputValidationError = (type, value) => {
|
|
1272
|
+
if (!value) {
|
|
1273
|
+
return void 0;
|
|
1274
|
+
}
|
|
1275
|
+
if (type === "login") {
|
|
1276
|
+
return SPACE_PATTERN.test(value) ? LOGIN_VALIDATION_ERROR : void 0;
|
|
1277
|
+
}
|
|
1278
|
+
if (type === "email") {
|
|
1279
|
+
return EMAIL_VALUE_PATTERN.test(value) ? void 0 : EMAIL_VALIDATION_ERROR;
|
|
1280
|
+
}
|
|
1281
|
+
return void 0;
|
|
1282
|
+
};
|
|
1283
|
+
function EmailIcon({ size }) {
|
|
1284
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1285
|
+
/* @__PURE__ */ jsx6(
|
|
1286
|
+
"path",
|
|
1287
|
+
{
|
|
1288
|
+
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",
|
|
1289
|
+
stroke: "currentColor",
|
|
1290
|
+
strokeWidth: "1.6",
|
|
1291
|
+
strokeLinecap: "round",
|
|
1292
|
+
strokeLinejoin: "round"
|
|
1293
|
+
}
|
|
1294
|
+
),
|
|
1295
|
+
/* @__PURE__ */ jsx6(
|
|
1296
|
+
"path",
|
|
1297
|
+
{
|
|
1298
|
+
d: "M4.375 6.25 10 10.625l5.625-4.375",
|
|
1299
|
+
stroke: "currentColor",
|
|
1300
|
+
strokeWidth: "1.6",
|
|
1301
|
+
strokeLinecap: "round",
|
|
1302
|
+
strokeLinejoin: "round"
|
|
1303
|
+
}
|
|
1304
|
+
)
|
|
1305
|
+
] });
|
|
1306
|
+
}
|
|
1307
|
+
function LoginIcon({ size }) {
|
|
1308
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1309
|
+
/* @__PURE__ */ jsx6("circle", { cx: "10", cy: "6.25", r: "3", stroke: "currentColor", strokeWidth: "1.6" }),
|
|
1310
|
+
/* @__PURE__ */ jsx6(
|
|
1311
|
+
"path",
|
|
1312
|
+
{
|
|
1313
|
+
d: "M4.75 16a5.25 5.25 0 0 1 10.5 0",
|
|
1314
|
+
stroke: "currentColor",
|
|
1315
|
+
strokeWidth: "1.6",
|
|
1316
|
+
strokeLinecap: "round"
|
|
1317
|
+
}
|
|
1318
|
+
)
|
|
1319
|
+
] });
|
|
1320
|
+
}
|
|
1321
|
+
function FileIcon({ size, selected }) {
|
|
1322
|
+
return /* @__PURE__ */ jsx6("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1323
|
+
/* @__PURE__ */ jsx6(
|
|
1324
|
+
"path",
|
|
1325
|
+
{
|
|
1326
|
+
d: "M5.5 6.25h9",
|
|
1327
|
+
stroke: "currentColor",
|
|
1328
|
+
strokeWidth: "1.6",
|
|
1329
|
+
strokeLinecap: "round"
|
|
1330
|
+
}
|
|
1331
|
+
),
|
|
1332
|
+
/* @__PURE__ */ jsx6(
|
|
1333
|
+
"path",
|
|
1334
|
+
{
|
|
1335
|
+
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",
|
|
1336
|
+
stroke: "currentColor",
|
|
1337
|
+
strokeWidth: "1.6",
|
|
1338
|
+
strokeLinecap: "round",
|
|
1339
|
+
strokeLinejoin: "round"
|
|
1340
|
+
}
|
|
1341
|
+
),
|
|
1342
|
+
/* @__PURE__ */ jsx6(
|
|
1343
|
+
"path",
|
|
1344
|
+
{
|
|
1345
|
+
d: "M7.75 8.25v5.5",
|
|
1346
|
+
stroke: "currentColor",
|
|
1347
|
+
strokeWidth: "1.6",
|
|
1348
|
+
strokeLinecap: "round"
|
|
1349
|
+
}
|
|
1350
|
+
),
|
|
1351
|
+
/* @__PURE__ */ jsx6(
|
|
1352
|
+
"path",
|
|
1353
|
+
{
|
|
1354
|
+
d: "M10 8.25v5.5",
|
|
1355
|
+
stroke: "currentColor",
|
|
1356
|
+
strokeWidth: "1.6",
|
|
1357
|
+
strokeLinecap: "round"
|
|
1358
|
+
}
|
|
1359
|
+
),
|
|
1360
|
+
/* @__PURE__ */ jsx6(
|
|
1361
|
+
"path",
|
|
1362
|
+
{
|
|
1363
|
+
d: "M12.25 8.25v5.5",
|
|
1364
|
+
stroke: "currentColor",
|
|
1365
|
+
strokeWidth: "1.6",
|
|
1366
|
+
strokeLinecap: "round"
|
|
1367
|
+
}
|
|
1368
|
+
),
|
|
1369
|
+
/* @__PURE__ */ jsx6(
|
|
1370
|
+
"path",
|
|
1371
|
+
{
|
|
1372
|
+
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",
|
|
1373
|
+
stroke: "currentColor",
|
|
1374
|
+
strokeWidth: "1.6",
|
|
1375
|
+
strokeLinecap: "round",
|
|
1376
|
+
strokeLinejoin: "round"
|
|
1377
|
+
}
|
|
1378
|
+
)
|
|
1379
|
+
] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1380
|
+
/* @__PURE__ */ jsx6(
|
|
1381
|
+
"path",
|
|
1382
|
+
{
|
|
1383
|
+
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",
|
|
1384
|
+
stroke: "currentColor",
|
|
1385
|
+
strokeWidth: "1.6",
|
|
1386
|
+
strokeLinecap: "round",
|
|
1387
|
+
strokeLinejoin: "round"
|
|
1388
|
+
}
|
|
1389
|
+
),
|
|
1390
|
+
/* @__PURE__ */ jsx6(
|
|
1391
|
+
"path",
|
|
1392
|
+
{
|
|
1393
|
+
d: "M11.875 2.75V6.25H15.375",
|
|
1394
|
+
stroke: "currentColor",
|
|
1395
|
+
strokeWidth: "1.6",
|
|
1396
|
+
strokeLinecap: "round",
|
|
1397
|
+
strokeLinejoin: "round"
|
|
1398
|
+
}
|
|
1399
|
+
),
|
|
1400
|
+
/* @__PURE__ */ jsx6(
|
|
1401
|
+
"path",
|
|
1402
|
+
{
|
|
1403
|
+
d: "M7.5 10h5",
|
|
1404
|
+
stroke: "currentColor",
|
|
1405
|
+
strokeWidth: "1.6",
|
|
1406
|
+
strokeLinecap: "round"
|
|
1407
|
+
}
|
|
1408
|
+
),
|
|
1409
|
+
/* @__PURE__ */ jsx6(
|
|
1410
|
+
"path",
|
|
1411
|
+
{
|
|
1412
|
+
d: "M7.5 13h5",
|
|
1413
|
+
stroke: "currentColor",
|
|
1414
|
+
strokeWidth: "1.6",
|
|
1415
|
+
strokeLinecap: "round"
|
|
1416
|
+
}
|
|
1417
|
+
)
|
|
1418
|
+
] }) });
|
|
1419
|
+
}
|
|
1420
|
+
function PasswordVisibleIcon({ size }) {
|
|
1421
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1422
|
+
/* @__PURE__ */ jsx6(
|
|
1423
|
+
"path",
|
|
1424
|
+
{
|
|
1425
|
+
d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
|
|
1426
|
+
stroke: "currentColor",
|
|
1427
|
+
strokeWidth: "1.8",
|
|
1428
|
+
strokeLinecap: "round",
|
|
1429
|
+
strokeLinejoin: "round"
|
|
1430
|
+
}
|
|
1431
|
+
),
|
|
1432
|
+
/* @__PURE__ */ jsx6(
|
|
1433
|
+
"path",
|
|
1434
|
+
{
|
|
1435
|
+
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",
|
|
1436
|
+
stroke: "currentColor",
|
|
1437
|
+
strokeWidth: "1.8",
|
|
1438
|
+
strokeLinecap: "round",
|
|
1439
|
+
strokeLinejoin: "round"
|
|
1440
|
+
}
|
|
1441
|
+
),
|
|
1442
|
+
/* @__PURE__ */ jsx6(
|
|
1443
|
+
"path",
|
|
1444
|
+
{
|
|
1445
|
+
d: "M10 11.25v1.5",
|
|
1446
|
+
stroke: "currentColor",
|
|
1447
|
+
strokeWidth: "1.8",
|
|
1448
|
+
strokeLinecap: "round"
|
|
1449
|
+
}
|
|
1450
|
+
)
|
|
1451
|
+
] });
|
|
1452
|
+
}
|
|
1453
|
+
function PasswordHiddenIcon({ size }) {
|
|
1454
|
+
return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
1455
|
+
/* @__PURE__ */ jsx6(
|
|
1456
|
+
"path",
|
|
1457
|
+
{
|
|
1458
|
+
d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
|
|
1459
|
+
stroke: "currentColor",
|
|
1460
|
+
strokeWidth: "1.8",
|
|
1461
|
+
strokeLinecap: "round",
|
|
1462
|
+
strokeLinejoin: "round"
|
|
1463
|
+
}
|
|
1464
|
+
),
|
|
1465
|
+
/* @__PURE__ */ jsx6(
|
|
1466
|
+
"path",
|
|
1467
|
+
{
|
|
1468
|
+
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",
|
|
1469
|
+
stroke: "currentColor",
|
|
1470
|
+
strokeWidth: "1.8",
|
|
1471
|
+
strokeLinecap: "round",
|
|
1472
|
+
strokeLinejoin: "round"
|
|
1473
|
+
}
|
|
1474
|
+
),
|
|
1475
|
+
/* @__PURE__ */ jsx6("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
|
|
1476
|
+
] });
|
|
1477
|
+
}
|
|
1316
1478
|
function ControlFrame({
|
|
1317
1479
|
label,
|
|
1318
1480
|
hint,
|
|
@@ -1341,7 +1503,7 @@ function ControlFrame({
|
|
|
1341
1503
|
]
|
|
1342
1504
|
}
|
|
1343
1505
|
) : null,
|
|
1344
|
-
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--
|
|
1506
|
+
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null
|
|
1345
1507
|
] }) : null,
|
|
1346
1508
|
children,
|
|
1347
1509
|
error ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
|
|
@@ -1353,7 +1515,7 @@ function ControlFrame({
|
|
|
1353
1515
|
label,
|
|
1354
1516
|
required ? /* @__PURE__ */ jsx6("span", { className: "ml-1 text-[var(--theme-negative)]", children: "*" }) : null
|
|
1355
1517
|
] }) : null,
|
|
1356
|
-
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--
|
|
1518
|
+
hint ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] leading-[1.45] text-[var(--theme-textLight)]", children: hint }) : null
|
|
1357
1519
|
] }) : null,
|
|
1358
1520
|
children,
|
|
1359
1521
|
error ? /* @__PURE__ */ jsx6("span", { className: "text-[13px] font-semibold leading-[1.45] text-[var(--theme-negative)]", children: error }) : null
|
|
@@ -1367,6 +1529,7 @@ function Input({
|
|
|
1367
1529
|
className,
|
|
1368
1530
|
showPasswordToggle = true,
|
|
1369
1531
|
fileButtonLabel,
|
|
1532
|
+
icon,
|
|
1370
1533
|
id,
|
|
1371
1534
|
disabled,
|
|
1372
1535
|
placeholder,
|
|
@@ -1383,36 +1546,57 @@ function Input({
|
|
|
1383
1546
|
const fileInputRef = useRef2(null);
|
|
1384
1547
|
const [isPasswordVisible, setIsPasswordVisible] = useState3(false);
|
|
1385
1548
|
const [selectedFileNames, setSelectedFileNames] = useState3([]);
|
|
1549
|
+
const [validationError, setValidationError] = useState3();
|
|
1386
1550
|
const isPasswordField = type === "password";
|
|
1387
1551
|
const isEmailField = type === "email";
|
|
1552
|
+
const isLoginField = type === "login";
|
|
1388
1553
|
const isFileField = type === "file";
|
|
1389
1554
|
const canTogglePasswordVisibility = isPasswordField && showPasswordToggle;
|
|
1390
|
-
const resolvedType = canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
|
|
1555
|
+
const resolvedType = isLoginField ? "text" : canTogglePasswordVisibility ? isPasswordVisible ? "text" : "password" : type;
|
|
1391
1556
|
useEffect4(() => {
|
|
1392
1557
|
if (!isFileField) {
|
|
1393
1558
|
setSelectedFileNames([]);
|
|
1394
1559
|
}
|
|
1395
1560
|
}, [isFileField]);
|
|
1561
|
+
useEffect4(() => {
|
|
1562
|
+
if (!isEmailField && !isLoginField) {
|
|
1563
|
+
setValidationError(void 0);
|
|
1564
|
+
}
|
|
1565
|
+
}, [isEmailField, isLoginField]);
|
|
1566
|
+
useEffect4(() => {
|
|
1567
|
+
if (typeof rest.value !== "string") {
|
|
1568
|
+
return;
|
|
1569
|
+
}
|
|
1570
|
+
setValidationError(getInputValidationError(type, rest.value));
|
|
1571
|
+
}, [rest.value, type]);
|
|
1396
1572
|
const hasFileButtonLabel = typeof fileButtonLabel === "string" ? fileButtonLabel.trim().length > 0 : fileButtonLabel != null;
|
|
1397
1573
|
const hasSelectedFiles = selectedFileNames.length > 0;
|
|
1398
1574
|
const showUploadLabel = hasFileButtonLabel && !hasSelectedFiles;
|
|
1399
1575
|
const passwordLockIconSize = passwordToggleMetrics.iconSize + 2;
|
|
1400
1576
|
const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
|
|
1577
|
+
const leadingIconInset = getControlLeadingIconInset(controlSize);
|
|
1578
|
+
const hasExternalError = error !== void 0 && error !== null && error !== "";
|
|
1579
|
+
const resolvedError = hasExternalError ? error : validationError;
|
|
1580
|
+
const hasResolvedError = resolvedError !== void 0 && resolvedError !== null && resolvedError !== "";
|
|
1401
1581
|
const fileSelectionText = selectedFileNames.length === 0 ? placeholder != null ? placeholder : "" : selectedFileNames.length === 1 ? selectedFileNames[0] : `${selectedFileNames.length} files selected`;
|
|
1402
1582
|
const fileIconSize = Math.max(controlMetrics.fontSize + 3, 16);
|
|
1403
|
-
const fileTriggerWidth =
|
|
1404
|
-
const
|
|
1405
|
-
const passwordAdornmentWidth =
|
|
1406
|
-
const
|
|
1583
|
+
const fileTriggerWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
|
|
1584
|
+
const leadingAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, fileIconSize);
|
|
1585
|
+
const passwordAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, passwordLockIconSize);
|
|
1586
|
+
const defaultLeadingIcon = isEmailField ? /* @__PURE__ */ jsx6(EmailIcon, { size: fileIconSize }) : isLoginField ? /* @__PURE__ */ jsx6(LoginIcon, { size: fileIconSize }) : null;
|
|
1587
|
+
const resolvedLeadingIcon = icon != null ? icon : defaultLeadingIcon;
|
|
1588
|
+
const hasLeadingIcon = isRenderableNode(resolvedLeadingIcon);
|
|
1589
|
+
const resolvedFileIcon = icon != null ? icon : /* @__PURE__ */ jsx6(FileIcon, { size: fileIconSize, selected: hasSelectedFiles });
|
|
1590
|
+
const resolvedPasswordIcon = icon != null ? icon : isPasswordVisible ? /* @__PURE__ */ jsx6(PasswordVisibleIcon, { size: passwordLockIconSize }) : /* @__PURE__ */ jsx6(PasswordHiddenIcon, { size: passwordLockIconSize });
|
|
1407
1591
|
const fieldBaseClassName = cx(
|
|
1408
1592
|
UI_KIT_ROOT_CLASSNAME,
|
|
1409
1593
|
"w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
|
|
1410
1594
|
"text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
|
|
1411
|
-
"duration-150 placeholder:text-[var(--
|
|
1595
|
+
"duration-150 placeholder:text-[var(--theme-textLight)]",
|
|
1412
1596
|
FIELD_HEIGHT_CLASSNAMES[controlSize],
|
|
1413
1597
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1414
|
-
|
|
1415
|
-
disabled ? "cursor-not-allowed" : "cursor-text"
|
|
1598
|
+
hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
1599
|
+
disabled ? "cursor-not-allowed opacity-70" : "cursor-text"
|
|
1416
1600
|
);
|
|
1417
1601
|
const adornedFieldClassName = cx(
|
|
1418
1602
|
UI_KIT_ROOT_CLASSNAME,
|
|
@@ -1422,16 +1606,22 @@ function Input({
|
|
|
1422
1606
|
"shadow-[0px_4px_5px_var(--theme-shadow)]",
|
|
1423
1607
|
FIELD_HEIGHT_CLASSNAMES[controlSize],
|
|
1424
1608
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1425
|
-
|
|
1426
|
-
disabled ? "
|
|
1609
|
+
hasResolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
1610
|
+
disabled ? "opacity-70" : null
|
|
1427
1611
|
);
|
|
1428
1612
|
const adornedInputClassName = cx(
|
|
1429
1613
|
"h-full min-w-0 flex-1 border-0 bg-transparent text-[var(--theme-text)] outline-none",
|
|
1430
|
-
"placeholder:text-[var(--
|
|
1614
|
+
"placeholder:text-[var(--theme-textLight)]",
|
|
1431
1615
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1432
1616
|
disabled ? "cursor-not-allowed" : "cursor-text"
|
|
1433
1617
|
);
|
|
1434
|
-
const adornmentColorClassName =
|
|
1618
|
+
const adornmentColorClassName = hasResolvedError ? "text-[var(--theme-negative)]" : "text-[var(--theme-textLight)]";
|
|
1619
|
+
const handleValidatedInputChange = (event) => {
|
|
1620
|
+
if (isEmailField || isLoginField) {
|
|
1621
|
+
setValidationError(getInputValidationError(type, event.target.value));
|
|
1622
|
+
}
|
|
1623
|
+
onChange == null ? void 0 : onChange(event);
|
|
1624
|
+
};
|
|
1435
1625
|
const openFilePicker = () => {
|
|
1436
1626
|
var _a;
|
|
1437
1627
|
if (disabled) {
|
|
@@ -1473,7 +1663,7 @@ function Input({
|
|
|
1473
1663
|
disabled ? "cursor-not-allowed" : "cursor-pointer",
|
|
1474
1664
|
className
|
|
1475
1665
|
),
|
|
1476
|
-
style
|
|
1666
|
+
style,
|
|
1477
1667
|
children: [
|
|
1478
1668
|
/* @__PURE__ */ jsxs7(
|
|
1479
1669
|
"button",
|
|
@@ -1493,7 +1683,12 @@ function Input({
|
|
|
1493
1683
|
style: {
|
|
1494
1684
|
gap: showUploadLabel ? leadingContentGap : 0,
|
|
1495
1685
|
width: showUploadLabel ? void 0 : fileTriggerWidth,
|
|
1496
|
-
|
|
1686
|
+
boxSizing: "border-box",
|
|
1687
|
+
justifyContent: "flex-start",
|
|
1688
|
+
paddingTop: 0,
|
|
1689
|
+
paddingRight: showUploadLabel ? controlMetrics.buttonPaddingX : 0,
|
|
1690
|
+
paddingBottom: 0,
|
|
1691
|
+
paddingLeft: leadingIconInset
|
|
1497
1692
|
},
|
|
1498
1693
|
children: [
|
|
1499
1694
|
/* @__PURE__ */ jsx6(
|
|
@@ -1504,103 +1699,7 @@ function Input({
|
|
|
1504
1699
|
adornmentColorClassName
|
|
1505
1700
|
),
|
|
1506
1701
|
"aria-hidden": "true",
|
|
1507
|
-
children:
|
|
1508
|
-
/* @__PURE__ */ jsx6(
|
|
1509
|
-
"path",
|
|
1510
|
-
{
|
|
1511
|
-
d: "M5.5 6.25h9",
|
|
1512
|
-
stroke: "currentColor",
|
|
1513
|
-
strokeWidth: "1.6",
|
|
1514
|
-
strokeLinecap: "round"
|
|
1515
|
-
}
|
|
1516
|
-
),
|
|
1517
|
-
/* @__PURE__ */ jsx6(
|
|
1518
|
-
"path",
|
|
1519
|
-
{
|
|
1520
|
-
d: "M7.25 6.25V5.25A1.5 1.5 0 0 1 8.75 3.75h2.5a1.5 1.5 0 0 1 1.5 1.5v1",
|
|
1521
|
-
stroke: "currentColor",
|
|
1522
|
-
strokeWidth: "1.6",
|
|
1523
|
-
strokeLinecap: "round",
|
|
1524
|
-
strokeLinejoin: "round"
|
|
1525
|
-
}
|
|
1526
|
-
),
|
|
1527
|
-
/* @__PURE__ */ jsx6(
|
|
1528
|
-
"path",
|
|
1529
|
-
{
|
|
1530
|
-
d: "M7.75 8.25v5.5",
|
|
1531
|
-
stroke: "currentColor",
|
|
1532
|
-
strokeWidth: "1.6",
|
|
1533
|
-
strokeLinecap: "round"
|
|
1534
|
-
}
|
|
1535
|
-
),
|
|
1536
|
-
/* @__PURE__ */ jsx6(
|
|
1537
|
-
"path",
|
|
1538
|
-
{
|
|
1539
|
-
d: "M10 8.25v5.5",
|
|
1540
|
-
stroke: "currentColor",
|
|
1541
|
-
strokeWidth: "1.6",
|
|
1542
|
-
strokeLinecap: "round"
|
|
1543
|
-
}
|
|
1544
|
-
),
|
|
1545
|
-
/* @__PURE__ */ jsx6(
|
|
1546
|
-
"path",
|
|
1547
|
-
{
|
|
1548
|
-
d: "M12.25 8.25v5.5",
|
|
1549
|
-
stroke: "currentColor",
|
|
1550
|
-
strokeWidth: "1.6",
|
|
1551
|
-
strokeLinecap: "round"
|
|
1552
|
-
}
|
|
1553
|
-
),
|
|
1554
|
-
/* @__PURE__ */ jsx6(
|
|
1555
|
-
"path",
|
|
1556
|
-
{
|
|
1557
|
-
d: "M6.75 6.25l.5 8a1.5 1.5 0 0 0 1.497 1.406h2.506A1.5 1.5 0 0 0 12.75 14.25l.5-8",
|
|
1558
|
-
stroke: "currentColor",
|
|
1559
|
-
strokeWidth: "1.6",
|
|
1560
|
-
strokeLinecap: "round",
|
|
1561
|
-
strokeLinejoin: "round"
|
|
1562
|
-
}
|
|
1563
|
-
)
|
|
1564
|
-
] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
1565
|
-
/* @__PURE__ */ jsx6(
|
|
1566
|
-
"path",
|
|
1567
|
-
{
|
|
1568
|
-
d: "M6.25 2.5h5.652l4.348 4.348V15A2.5 2.5 0 0 1 13.75 17.5h-7.5A2.5 2.5 0 0 1 3.75 15V5A2.5 2.5 0 0 1 6.25 2.5Z",
|
|
1569
|
-
stroke: "currentColor",
|
|
1570
|
-
strokeWidth: "1.6",
|
|
1571
|
-
strokeLinecap: "round",
|
|
1572
|
-
strokeLinejoin: "round"
|
|
1573
|
-
}
|
|
1574
|
-
),
|
|
1575
|
-
/* @__PURE__ */ jsx6(
|
|
1576
|
-
"path",
|
|
1577
|
-
{
|
|
1578
|
-
d: "M11.875 2.75V6.25H15.375",
|
|
1579
|
-
stroke: "currentColor",
|
|
1580
|
-
strokeWidth: "1.6",
|
|
1581
|
-
strokeLinecap: "round",
|
|
1582
|
-
strokeLinejoin: "round"
|
|
1583
|
-
}
|
|
1584
|
-
),
|
|
1585
|
-
/* @__PURE__ */ jsx6(
|
|
1586
|
-
"path",
|
|
1587
|
-
{
|
|
1588
|
-
d: "M7.5 10h5",
|
|
1589
|
-
stroke: "currentColor",
|
|
1590
|
-
strokeWidth: "1.6",
|
|
1591
|
-
strokeLinecap: "round"
|
|
1592
|
-
}
|
|
1593
|
-
),
|
|
1594
|
-
/* @__PURE__ */ jsx6(
|
|
1595
|
-
"path",
|
|
1596
|
-
{
|
|
1597
|
-
d: "M7.5 13h5",
|
|
1598
|
-
stroke: "currentColor",
|
|
1599
|
-
strokeWidth: "1.6",
|
|
1600
|
-
strokeLinecap: "round"
|
|
1601
|
-
}
|
|
1602
|
-
)
|
|
1603
|
-
] }) })
|
|
1702
|
+
children: resolvedFileIcon
|
|
1604
1703
|
}
|
|
1605
1704
|
),
|
|
1606
1705
|
showUploadLabel ? fileButtonLabel : null
|
|
@@ -1626,7 +1725,7 @@ function Input({
|
|
|
1626
1725
|
className: cx(
|
|
1627
1726
|
"flex h-full min-w-0 flex-1 items-center overflow-hidden text-ellipsis whitespace-nowrap",
|
|
1628
1727
|
FIELD_TEXT_CLASSNAMES[controlSize],
|
|
1629
|
-
hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--
|
|
1728
|
+
hasSelectedFiles ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]"
|
|
1630
1729
|
),
|
|
1631
1730
|
style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` },
|
|
1632
1731
|
children: fileSelectionText
|
|
@@ -1637,43 +1736,38 @@ function Input({
|
|
|
1637
1736
|
]
|
|
1638
1737
|
}
|
|
1639
1738
|
)
|
|
1640
|
-
] }) :
|
|
1739
|
+
] }) : canTogglePasswordVisibility ? /* @__PURE__ */ jsxs7(
|
|
1641
1740
|
"div",
|
|
1642
1741
|
{
|
|
1643
1742
|
className: cx(adornedFieldClassName, className),
|
|
1644
|
-
style
|
|
1743
|
+
style,
|
|
1645
1744
|
children: [
|
|
1646
1745
|
/* @__PURE__ */ jsx6(
|
|
1647
|
-
"
|
|
1746
|
+
"button",
|
|
1648
1747
|
{
|
|
1748
|
+
type: "button",
|
|
1749
|
+
"aria-label": isPasswordVisible ? "Hide password" : "Show password",
|
|
1750
|
+
"aria-pressed": isPasswordVisible,
|
|
1751
|
+
disabled,
|
|
1752
|
+
onMouseDown: (event) => {
|
|
1753
|
+
event.preventDefault();
|
|
1754
|
+
},
|
|
1755
|
+
onClick: () => {
|
|
1756
|
+
setIsPasswordVisible((currentValue) => !currentValue);
|
|
1757
|
+
},
|
|
1649
1758
|
className: cx(
|
|
1650
|
-
"inline-flex shrink-0 self-stretch items-center justify-center
|
|
1651
|
-
|
|
1759
|
+
"inline-flex shrink-0 self-stretch items-center justify-center border-0",
|
|
1760
|
+
"bg-transparent p-0 appearance-none",
|
|
1761
|
+
adornmentColorClassName,
|
|
1762
|
+
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
1652
1763
|
),
|
|
1653
|
-
style: {
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
stroke: "currentColor",
|
|
1661
|
-
strokeWidth: "1.6",
|
|
1662
|
-
strokeLinecap: "round",
|
|
1663
|
-
strokeLinejoin: "round"
|
|
1664
|
-
}
|
|
1665
|
-
),
|
|
1666
|
-
/* @__PURE__ */ jsx6(
|
|
1667
|
-
"path",
|
|
1668
|
-
{
|
|
1669
|
-
d: "M4.375 6.25 10 10.625l5.625-4.375",
|
|
1670
|
-
stroke: "currentColor",
|
|
1671
|
-
strokeWidth: "1.6",
|
|
1672
|
-
strokeLinecap: "round",
|
|
1673
|
-
strokeLinejoin: "round"
|
|
1674
|
-
}
|
|
1675
|
-
)
|
|
1676
|
-
] })
|
|
1764
|
+
style: {
|
|
1765
|
+
width: passwordAdornmentWidth,
|
|
1766
|
+
boxSizing: "border-box",
|
|
1767
|
+
justifyContent: "flex-start",
|
|
1768
|
+
paddingLeft: leadingIconInset
|
|
1769
|
+
},
|
|
1770
|
+
children: resolvedPasswordIcon
|
|
1677
1771
|
}
|
|
1678
1772
|
),
|
|
1679
1773
|
/* @__PURE__ */ jsx6(
|
|
@@ -1684,112 +1778,35 @@ function Input({
|
|
|
1684
1778
|
placeholder,
|
|
1685
1779
|
type: resolvedType,
|
|
1686
1780
|
disabled,
|
|
1687
|
-
onChange,
|
|
1781
|
+
onChange: handleValidatedInputChange,
|
|
1688
1782
|
className: cx(adornedInputClassName, className),
|
|
1783
|
+
"aria-invalid": hasResolvedError,
|
|
1689
1784
|
style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
|
|
1690
1785
|
}
|
|
1691
1786
|
)
|
|
1692
1787
|
]
|
|
1693
1788
|
}
|
|
1694
|
-
) :
|
|
1789
|
+
) : hasLeadingIcon ? /* @__PURE__ */ jsxs7(
|
|
1695
1790
|
"div",
|
|
1696
1791
|
{
|
|
1697
1792
|
className: cx(adornedFieldClassName, className),
|
|
1698
|
-
style
|
|
1793
|
+
style,
|
|
1699
1794
|
children: [
|
|
1700
1795
|
/* @__PURE__ */ jsx6(
|
|
1701
|
-
"
|
|
1796
|
+
"span",
|
|
1702
1797
|
{
|
|
1703
|
-
type: "button",
|
|
1704
|
-
"aria-label": isPasswordVisible ? "Hide password" : "Show password",
|
|
1705
|
-
"aria-pressed": isPasswordVisible,
|
|
1706
|
-
disabled,
|
|
1707
|
-
onMouseDown: (event) => {
|
|
1708
|
-
event.preventDefault();
|
|
1709
|
-
},
|
|
1710
|
-
onClick: () => {
|
|
1711
|
-
setIsPasswordVisible((currentValue) => !currentValue);
|
|
1712
|
-
},
|
|
1713
1798
|
className: cx(
|
|
1714
|
-
"inline-flex shrink-0 self-stretch items-center justify-center
|
|
1715
|
-
|
|
1716
|
-
adornmentColorClassName,
|
|
1717
|
-
disabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
1799
|
+
"inline-flex shrink-0 self-stretch items-center justify-center bg-transparent",
|
|
1800
|
+
adornmentColorClassName
|
|
1718
1801
|
),
|
|
1719
|
-
style: {
|
|
1720
|
-
|
|
1721
|
-
"
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
"aria-hidden": "true",
|
|
1728
|
-
children: [
|
|
1729
|
-
/* @__PURE__ */ jsx6(
|
|
1730
|
-
"path",
|
|
1731
|
-
{
|
|
1732
|
-
d: "M6.75 8V6.75A3.25 3.25 0 0 1 12.262 4.415",
|
|
1733
|
-
stroke: "currentColor",
|
|
1734
|
-
strokeWidth: "1.8",
|
|
1735
|
-
strokeLinecap: "round",
|
|
1736
|
-
strokeLinejoin: "round"
|
|
1737
|
-
}
|
|
1738
|
-
),
|
|
1739
|
-
/* @__PURE__ */ jsx6(
|
|
1740
|
-
"path",
|
|
1741
|
-
{
|
|
1742
|
-
d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
|
|
1743
|
-
stroke: "currentColor",
|
|
1744
|
-
strokeWidth: "1.8",
|
|
1745
|
-
strokeLinecap: "round",
|
|
1746
|
-
strokeLinejoin: "round"
|
|
1747
|
-
}
|
|
1748
|
-
),
|
|
1749
|
-
/* @__PURE__ */ jsx6(
|
|
1750
|
-
"path",
|
|
1751
|
-
{
|
|
1752
|
-
d: "M10 11.25v1.5",
|
|
1753
|
-
stroke: "currentColor",
|
|
1754
|
-
strokeWidth: "1.8",
|
|
1755
|
-
strokeLinecap: "round"
|
|
1756
|
-
}
|
|
1757
|
-
)
|
|
1758
|
-
]
|
|
1759
|
-
}
|
|
1760
|
-
) : /* @__PURE__ */ jsxs7(
|
|
1761
|
-
"svg",
|
|
1762
|
-
{
|
|
1763
|
-
width: passwordLockIconSize,
|
|
1764
|
-
height: passwordLockIconSize,
|
|
1765
|
-
viewBox: "0 0 20 20",
|
|
1766
|
-
fill: "none",
|
|
1767
|
-
"aria-hidden": "true",
|
|
1768
|
-
children: [
|
|
1769
|
-
/* @__PURE__ */ jsx6(
|
|
1770
|
-
"path",
|
|
1771
|
-
{
|
|
1772
|
-
d: "M6.75 8V6.75A3.25 3.25 0 1 1 13.25 6.75V8",
|
|
1773
|
-
stroke: "currentColor",
|
|
1774
|
-
strokeWidth: "1.8",
|
|
1775
|
-
strokeLinecap: "round",
|
|
1776
|
-
strokeLinejoin: "round"
|
|
1777
|
-
}
|
|
1778
|
-
),
|
|
1779
|
-
/* @__PURE__ */ jsx6(
|
|
1780
|
-
"path",
|
|
1781
|
-
{
|
|
1782
|
-
d: "M6 8.25h8a1.75 1.75 0 0 1 1.75 1.75V14A1.75 1.75 0 0 1 14 15.75H6A1.75 1.75 0 0 1 4.25 14V10A1.75 1.75 0 0 1 6 8.25Z",
|
|
1783
|
-
stroke: "currentColor",
|
|
1784
|
-
strokeWidth: "1.8",
|
|
1785
|
-
strokeLinecap: "round",
|
|
1786
|
-
strokeLinejoin: "round"
|
|
1787
|
-
}
|
|
1788
|
-
),
|
|
1789
|
-
/* @__PURE__ */ jsx6("path", { d: "M10 11.25v1.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
|
|
1790
|
-
]
|
|
1791
|
-
}
|
|
1792
|
-
)
|
|
1802
|
+
style: {
|
|
1803
|
+
width: leadingAdornmentWidth,
|
|
1804
|
+
boxSizing: "border-box",
|
|
1805
|
+
justifyContent: "flex-start",
|
|
1806
|
+
paddingLeft: leadingIconInset
|
|
1807
|
+
},
|
|
1808
|
+
"aria-hidden": "true",
|
|
1809
|
+
children: resolvedLeadingIcon
|
|
1793
1810
|
}
|
|
1794
1811
|
),
|
|
1795
1812
|
/* @__PURE__ */ jsx6(
|
|
@@ -1800,8 +1817,9 @@ function Input({
|
|
|
1800
1817
|
placeholder,
|
|
1801
1818
|
type: resolvedType,
|
|
1802
1819
|
disabled,
|
|
1803
|
-
onChange,
|
|
1820
|
+
onChange: handleValidatedInputChange,
|
|
1804
1821
|
className: cx(adornedInputClassName, className),
|
|
1822
|
+
"aria-invalid": hasResolvedError,
|
|
1805
1823
|
style: { padding: `0 ${controlMetrics.paddingX}px 0 ${leadingContentGap}px` }
|
|
1806
1824
|
}
|
|
1807
1825
|
)
|
|
@@ -1815,9 +1833,10 @@ function Input({
|
|
|
1815
1833
|
placeholder,
|
|
1816
1834
|
type: resolvedType,
|
|
1817
1835
|
disabled,
|
|
1818
|
-
onChange,
|
|
1836
|
+
onChange: handleValidatedInputChange,
|
|
1837
|
+
"aria-invalid": hasResolvedError,
|
|
1819
1838
|
className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES[controlSize], className),
|
|
1820
|
-
style: { boxShadow: "var(--
|
|
1839
|
+
style: { boxShadow: "0px 4px 5px var(--theme-shadow)", ...style }
|
|
1821
1840
|
}
|
|
1822
1841
|
);
|
|
1823
1842
|
return /* @__PURE__ */ jsx6(
|
|
@@ -1825,7 +1844,7 @@ function Input({
|
|
|
1825
1844
|
{
|
|
1826
1845
|
label,
|
|
1827
1846
|
hint,
|
|
1828
|
-
error,
|
|
1847
|
+
error: resolvedError,
|
|
1829
1848
|
htmlFor: isFileField ? void 0 : inputId,
|
|
1830
1849
|
required: rest.required,
|
|
1831
1850
|
useLabelWrapper: !isFileField,
|
|
@@ -2044,13 +2063,13 @@ function getEarlierDate(leftDate, rightDate) {
|
|
|
2044
2063
|
return leftDate.getTime() <= rightDate.getTime() ? leftDate : rightDate;
|
|
2045
2064
|
}
|
|
2046
2065
|
function CalendarIcon({ size }) {
|
|
2047
|
-
return /* @__PURE__ */
|
|
2066
|
+
return /* @__PURE__ */ jsx7("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxs8("g", { transform: "translate(0.75 0)", children: [
|
|
2048
2067
|
/* @__PURE__ */ jsx7("rect", { x: "3", y: "4.5", width: "14", height: "12.5", rx: "3", stroke: "currentColor", strokeWidth: "1.6" }),
|
|
2049
2068
|
/* @__PURE__ */ jsx7("path", { d: "M6.25 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
|
|
2050
2069
|
/* @__PURE__ */ jsx7("path", { d: "M13.75 2.75V6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
|
|
2051
2070
|
/* @__PURE__ */ jsx7("path", { d: "M3 7.5H17", stroke: "currentColor", strokeWidth: "1.6" }),
|
|
2052
2071
|
/* @__PURE__ */ jsx7("circle", { cx: "10", cy: "11.5", r: "1.2", fill: "currentColor" })
|
|
2053
|
-
] });
|
|
2072
|
+
] }) });
|
|
2054
2073
|
}
|
|
2055
2074
|
function ClearIcon({ size }) {
|
|
2056
2075
|
return /* @__PURE__ */ jsxs8("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
@@ -2155,7 +2174,8 @@ function DatePicker({
|
|
|
2155
2174
|
const canOpenPicker = !disabled && !readOnly && !hasConfigurationConflict;
|
|
2156
2175
|
const canClear = clearable && !disabled && !readOnly && !required && hasAnyValue;
|
|
2157
2176
|
const leadingContentGap = Math.max(0, Math.round(controlMetrics.paddingX / 3));
|
|
2158
|
-
const
|
|
2177
|
+
const leadingIconInset = getControlLeadingIconInset(controlSize);
|
|
2178
|
+
const pickerAdornmentWidth = getControlLeadingAdornmentWidth(controlSize, accessoryMetrics.iconSize);
|
|
2159
2179
|
const trailingButtonCount = Number(canClear);
|
|
2160
2180
|
const trailingInset = trailingButtonCount > 0 ? Math.max(
|
|
2161
2181
|
0,
|
|
@@ -2166,7 +2186,7 @@ function DatePicker({
|
|
|
2166
2186
|
const fieldBaseClassName = cx(
|
|
2167
2187
|
"w-full box-border rounded-2xl border border-solid bg-[var(--theme-surface)]",
|
|
2168
2188
|
"text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
|
|
2169
|
-
"duration-150 placeholder:text-[var(--
|
|
2189
|
+
"duration-150 placeholder:text-[var(--theme-textLight)]",
|
|
2170
2190
|
FIELD_HEIGHT_CLASSNAMES2[controlSize],
|
|
2171
2191
|
FIELD_TEXT_CLASSNAMES2[controlSize],
|
|
2172
2192
|
resolvedError ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
@@ -2180,10 +2200,10 @@ function DatePicker({
|
|
|
2180
2200
|
FIELD_TEXT_CLASSNAMES2[controlSize],
|
|
2181
2201
|
disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
|
|
2182
2202
|
);
|
|
2183
|
-
const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--
|
|
2203
|
+
const integratedFieldBoxShadow = getInsetBorderShadow(fieldBorderColor, resolvedError ? { outerShadow: "0 0 0 3px var(--theme-negative)", componentShadow: "0px 4px 5px var(--theme-shadow)" } : { componentShadow: "0px 4px 5px var(--theme-shadow)" });
|
|
2184
2204
|
const integratedInputClassName = cx(
|
|
2185
2205
|
"h-full w-full box-border border-0 bg-transparent text-[var(--theme-text)]",
|
|
2186
|
-
"outline-none placeholder:text-[var(--
|
|
2206
|
+
"outline-none placeholder:text-[var(--theme-textLight)]",
|
|
2187
2207
|
FIELD_TEXT_CLASSNAMES2[controlSize],
|
|
2188
2208
|
disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-text"
|
|
2189
2209
|
);
|
|
@@ -2413,7 +2433,12 @@ function DatePicker({
|
|
|
2413
2433
|
},
|
|
2414
2434
|
onClick: openNativePicker,
|
|
2415
2435
|
className: pickerAdornmentClassName,
|
|
2416
|
-
style: {
|
|
2436
|
+
style: {
|
|
2437
|
+
width: pickerAdornmentWidth,
|
|
2438
|
+
boxSizing: "border-box",
|
|
2439
|
+
justifyContent: "flex-start",
|
|
2440
|
+
paddingLeft: leadingIconInset
|
|
2441
|
+
},
|
|
2417
2442
|
children: /* @__PURE__ */ jsx7(CalendarIcon, { size: accessoryMetrics.iconSize })
|
|
2418
2443
|
}
|
|
2419
2444
|
),
|
|
@@ -2441,7 +2466,7 @@ function DatePicker({
|
|
|
2441
2466
|
className: cx(fieldBaseClassName, FIELD_PADDING_X_CLASSNAMES2[controlSize], className),
|
|
2442
2467
|
style: {
|
|
2443
2468
|
paddingRight: controlMetrics.paddingX + trailingInset,
|
|
2444
|
-
boxShadow: resolvedError ? "0 0 0 3px var(--
|
|
2469
|
+
boxShadow: resolvedError ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
|
|
2445
2470
|
...style,
|
|
2446
2471
|
...disabledFieldStyle
|
|
2447
2472
|
}
|
|
@@ -2501,7 +2526,6 @@ function Separator({
|
|
|
2501
2526
|
import {
|
|
2502
2527
|
useEffect as useEffect6,
|
|
2503
2528
|
useId as useId3,
|
|
2504
|
-
useMemo as useMemo5,
|
|
2505
2529
|
useRef as useRef4,
|
|
2506
2530
|
useState as useState5
|
|
2507
2531
|
} from "react";
|
|
@@ -2609,8 +2633,8 @@ function SelectBase({
|
|
|
2609
2633
|
...rest
|
|
2610
2634
|
}) {
|
|
2611
2635
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
2612
|
-
const
|
|
2613
|
-
const componentShadow =
|
|
2636
|
+
const theme = useUiKitTheme();
|
|
2637
|
+
const componentShadow = "0px 4px 5px var(--theme-shadow)";
|
|
2614
2638
|
const generatedId = useId3().replace(/:/g, "");
|
|
2615
2639
|
const resolvedId = id != null ? id : `ss-select-${generatedId}`;
|
|
2616
2640
|
const isMultiSelect = Boolean(isMulti || multiple);
|
|
@@ -2636,7 +2660,7 @@ function SelectBase({
|
|
|
2636
2660
|
const selectedValue = (_e = selectedValues[0]) != null ? _e : "";
|
|
2637
2661
|
const optionLookup = new Map(flatOptions.map((option) => [option.value, option]));
|
|
2638
2662
|
const selectedOption = (_f = optionLookup.get(selectedValue)) != null ? _f : null;
|
|
2639
|
-
const placeholderTextColor =
|
|
2663
|
+
const placeholderTextColor = "var(--theme-textLight)";
|
|
2640
2664
|
const hasSelection = isMultiSelect ? selectedValues.length > 0 : selectedValue !== "";
|
|
2641
2665
|
const displayLabel = hasSelection ? isMultiSelect ? selectedValues.map((currentValue) => {
|
|
2642
2666
|
const option = optionLookup.get(currentValue);
|
|
@@ -2653,42 +2677,17 @@ function SelectBase({
|
|
|
2653
2677
|
const controlMetrics = getControlMetrics(controlSize);
|
|
2654
2678
|
const listboxId = `${resolvedId}-listbox`;
|
|
2655
2679
|
const searchInputId = `${resolvedId}-search`;
|
|
2656
|
-
const scrollbarThumbColor =
|
|
2657
|
-
const scrollbarThumbHoverColor =
|
|
2680
|
+
const scrollbarThumbColor = theme.colors.secondary;
|
|
2681
|
+
const scrollbarThumbHoverColor = theme.colors.textLight;
|
|
2658
2682
|
const highlightedOption = (_i = visibleOptions.find((option) => option.value === highlightedValue)) != null ? _i : null;
|
|
2659
|
-
const optionHoverBackground = theme.colors.primary;
|
|
2660
|
-
const optionSelectedBackground = theme.colors.primary;
|
|
2661
2683
|
const canOpenMenu = allowOpenWithoutOptions || flatOptions.length > 0;
|
|
2662
2684
|
const isTriggerDisabled = disabled || !canOpenMenu;
|
|
2663
2685
|
const buttonPassthroughProps = Object.fromEntries(
|
|
2664
2686
|
Object.entries(rest).filter(([key]) => key.startsWith("aria-") || key.startsWith("data-"))
|
|
2665
2687
|
);
|
|
2666
|
-
const selectVariables = useMemo5(() => ({
|
|
2667
|
-
"--ui-kit-select-placeholder": placeholderTextColor,
|
|
2668
|
-
"--ui-kit-select-muted": mutedText,
|
|
2669
|
-
"--ui-kit-select-indicator-disabled": withAlpha(theme.colors.text, 0.42),
|
|
2670
|
-
"--ui-kit-select-surface-raised": theme.colors.surface,
|
|
2671
|
-
"--ui-kit-select-scrollbar-thumb": scrollbarThumbColor,
|
|
2672
|
-
"--ui-kit-select-scrollbar-thumb-hover": scrollbarThumbHoverColor,
|
|
2673
|
-
"--ui-kit-select-divider": withAlpha(theme.colors.text, 0.08),
|
|
2674
|
-
"--ui-kit-select-option-hover-bg": optionHoverBackground,
|
|
2675
|
-
"--ui-kit-select-option-selected-bg": optionSelectedBackground,
|
|
2676
|
-
"--ui-kit-select-option-disabled": withAlpha(theme.colors.text, 0.38),
|
|
2677
|
-
"--ui-kit-select-control-shadow": componentShadow
|
|
2678
|
-
}), [
|
|
2679
|
-
componentShadow,
|
|
2680
|
-
mutedText,
|
|
2681
|
-
optionHoverBackground,
|
|
2682
|
-
optionSelectedBackground,
|
|
2683
|
-
placeholderTextColor,
|
|
2684
|
-
scrollbarThumbColor,
|
|
2685
|
-
scrollbarThumbHoverColor,
|
|
2686
|
-
theme.colors.surface,
|
|
2687
|
-
theme.colors.text
|
|
2688
|
-
]);
|
|
2689
2688
|
const triggerBorderColor = error ? "var(--theme-negative)" : "var(--theme-textLight)";
|
|
2690
2689
|
const triggerBoxShadow = getInsetBorderShadow(triggerBorderColor, {
|
|
2691
|
-
componentShadow
|
|
2690
|
+
componentShadow
|
|
2692
2691
|
});
|
|
2693
2692
|
const triggerClassName = cx(
|
|
2694
2693
|
"m-0 box-border flex w-full min-w-0 items-center justify-between gap-3 rounded-2xl border-0 appearance-none",
|
|
@@ -2696,7 +2695,7 @@ function SelectBase({
|
|
|
2696
2695
|
"duration-150 text-left",
|
|
2697
2696
|
FIELD_HEIGHT_CLASSNAMES3[controlSize],
|
|
2698
2697
|
FIELD_TEXT_CLASSNAMES3[controlSize],
|
|
2699
|
-
hasSelection ? "text-[var(--theme-text)]" : "text-[var(--
|
|
2698
|
+
hasSelection ? "text-[var(--theme-text)]" : "text-[var(--theme-textLight)]",
|
|
2700
2699
|
isTriggerDisabled ? "cursor-not-allowed" : "cursor-pointer"
|
|
2701
2700
|
);
|
|
2702
2701
|
useEffect6(() => {
|
|
@@ -3061,7 +3060,7 @@ function SelectBase({
|
|
|
3061
3060
|
htmlFor: resolvedId,
|
|
3062
3061
|
required: rest.required,
|
|
3063
3062
|
useLabelWrapper: false,
|
|
3064
|
-
children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, className: "relative w-full",
|
|
3063
|
+
children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, className: "relative w-full", children: [
|
|
3065
3064
|
/* @__PURE__ */ jsxs9(
|
|
3066
3065
|
"button",
|
|
3067
3066
|
{
|
|
@@ -3105,7 +3104,7 @@ function SelectBase({
|
|
|
3105
3104
|
className: cx(
|
|
3106
3105
|
"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
|
|
3107
3106
|
"transition-[transform,color] duration-150",
|
|
3108
|
-
isTriggerDisabled ? "text-[var(--
|
|
3107
|
+
isTriggerDisabled ? "text-[var(--theme-secondary)]" : "text-[var(--theme-textLight)]"
|
|
3109
3108
|
),
|
|
3110
3109
|
style: {
|
|
3111
3110
|
right: indicatorOffset,
|
|
@@ -3147,7 +3146,7 @@ function SelectBase({
|
|
|
3147
3146
|
/* @__PURE__ */ jsx9("style", { children: `
|
|
3148
3147
|
#${listboxId} {
|
|
3149
3148
|
scrollbar-width: thin;
|
|
3150
|
-
scrollbar-color:
|
|
3149
|
+
scrollbar-color: ${scrollbarThumbColor} transparent;
|
|
3151
3150
|
}
|
|
3152
3151
|
|
|
3153
3152
|
#${listboxId}::-webkit-scrollbar {
|
|
@@ -3159,19 +3158,19 @@ function SelectBase({
|
|
|
3159
3158
|
}
|
|
3160
3159
|
|
|
3161
3160
|
#${listboxId}::-webkit-scrollbar-thumb {
|
|
3162
|
-
background:
|
|
3161
|
+
background: ${scrollbarThumbColor};
|
|
3163
3162
|
border-radius: 999px;
|
|
3164
3163
|
border: 2px solid transparent;
|
|
3165
3164
|
background-clip: padding-box;
|
|
3166
3165
|
}
|
|
3167
3166
|
|
|
3168
3167
|
#${listboxId}::-webkit-scrollbar-thumb:hover {
|
|
3169
|
-
background:
|
|
3168
|
+
background: ${scrollbarThumbHoverColor};
|
|
3170
3169
|
background-clip: padding-box;
|
|
3171
3170
|
}
|
|
3172
3171
|
|
|
3173
3172
|
#${searchInputId}::placeholder {
|
|
3174
|
-
color:
|
|
3173
|
+
color: ${placeholderTextColor};
|
|
3175
3174
|
opacity: 1;
|
|
3176
3175
|
}
|
|
3177
3176
|
` }),
|
|
@@ -3183,9 +3182,9 @@ function SelectBase({
|
|
|
3183
3182
|
style: {
|
|
3184
3183
|
top: menuPlacement === "bottom" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
|
|
3185
3184
|
bottom: menuPlacement === "top" ? `calc(100% + ${MENU_OFFSET}px)` : "auto",
|
|
3186
|
-
borderColor:
|
|
3187
|
-
backgroundColor:
|
|
3188
|
-
boxShadow:
|
|
3185
|
+
borderColor: theme.colors.secondary,
|
|
3186
|
+
backgroundColor: theme.colors.surface,
|
|
3187
|
+
boxShadow: componentShadow,
|
|
3189
3188
|
visibility: isPlacementResolved ? "visible" : "hidden"
|
|
3190
3189
|
},
|
|
3191
3190
|
children: [
|
|
@@ -3193,7 +3192,7 @@ function SelectBase({
|
|
|
3193
3192
|
"div",
|
|
3194
3193
|
{
|
|
3195
3194
|
className: "flex shrink-0 items-center justify-start gap-2 border-b px-1 pb-[10px] pt-1",
|
|
3196
|
-
style: { borderColor:
|
|
3195
|
+
style: { borderColor: theme.colors.secondary },
|
|
3197
3196
|
children: [
|
|
3198
3197
|
bulkToggleControl,
|
|
3199
3198
|
/* @__PURE__ */ jsx9(
|
|
@@ -3218,8 +3217,8 @@ function SelectBase({
|
|
|
3218
3217
|
"aria-label": searchPlaceholder,
|
|
3219
3218
|
className: "w-full flex-1 rounded-[11px] border bg-[var(--theme-surface)] px-[11px] py-[7px] text-[11px] leading-[1.4] text-[var(--theme-text)] outline-none",
|
|
3220
3219
|
style: {
|
|
3221
|
-
borderColor:
|
|
3222
|
-
boxShadow:
|
|
3220
|
+
borderColor: theme.colors.secondary,
|
|
3221
|
+
boxShadow: componentShadow
|
|
3223
3222
|
}
|
|
3224
3223
|
}
|
|
3225
3224
|
)
|
|
@@ -3229,7 +3228,7 @@ function SelectBase({
|
|
|
3229
3228
|
"div",
|
|
3230
3229
|
{
|
|
3231
3230
|
className: "flex shrink-0 items-center justify-start border-b px-1 pb-[10px] pt-1",
|
|
3232
|
-
style: { borderColor:
|
|
3231
|
+
style: { borderColor: theme.colors.secondary },
|
|
3233
3232
|
children: bulkToggleControl
|
|
3234
3233
|
}
|
|
3235
3234
|
) : null,
|
|
@@ -3245,7 +3244,7 @@ function SelectBase({
|
|
|
3245
3244
|
children: visibleGroups.length === 0 ? /* @__PURE__ */ jsx9(
|
|
3246
3245
|
"div",
|
|
3247
3246
|
{
|
|
3248
|
-
className: "px-3 py-[14px] text-center text-[13px] text-[var(--
|
|
3247
|
+
className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]",
|
|
3249
3248
|
children: emptyState
|
|
3250
3249
|
}
|
|
3251
3250
|
) : visibleGroups.map((group) => /* @__PURE__ */ jsxs9(
|
|
@@ -3256,7 +3255,7 @@ function SelectBase({
|
|
|
3256
3255
|
group.label ? /* @__PURE__ */ jsx9(
|
|
3257
3256
|
"span",
|
|
3258
3257
|
{
|
|
3259
|
-
className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--
|
|
3258
|
+
className: "px-2 pb-0.5 pt-1.5 text-[11px] font-extrabold uppercase tracking-[0.08em] text-[var(--theme-textLight)]",
|
|
3260
3259
|
children: group.label
|
|
3261
3260
|
}
|
|
3262
3261
|
) : null,
|
|
@@ -3292,11 +3291,11 @@ function SelectBase({
|
|
|
3292
3291
|
"flex w-full min-w-0 items-center justify-between gap-3 rounded-xl box-border",
|
|
3293
3292
|
"transition-[background-color,color] duration-150",
|
|
3294
3293
|
OPTION_PADDING_CLASSNAMES[controlSize],
|
|
3295
|
-
option.disabled ? "cursor-not-allowed text-[var(--
|
|
3294
|
+
option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
|
|
3296
3295
|
!option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
|
|
3297
3296
|
!option.disabled && !isActive ? "text-[var(--theme-text)]" : null,
|
|
3298
|
-
isSelected ? "bg-[var(--
|
|
3299
|
-
!isSelected && isHighlighted ? "bg-[var(--
|
|
3297
|
+
isSelected ? "bg-[var(--theme-primary)] font-bold" : null,
|
|
3298
|
+
!isSelected && isHighlighted ? "bg-[var(--theme-primary)]" : null,
|
|
3300
3299
|
!isSelected && !isHighlighted ? "bg-[var(--theme-surface)] font-normal" : null
|
|
3301
3300
|
),
|
|
3302
3301
|
children: [
|
|
@@ -3313,7 +3312,7 @@ function SelectBase({
|
|
|
3313
3312
|
size: 16,
|
|
3314
3313
|
checkedColor: isActive ? "var(--theme-onPrimary)" : "var(--theme-primary)",
|
|
3315
3314
|
iconColor: isActive ? "var(--theme-primary)" : "var(--theme-onPrimary)",
|
|
3316
|
-
uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" :
|
|
3315
|
+
uncheckedBorderColor: isActive ? "var(--theme-onPrimary)" : theme.colors.secondary,
|
|
3317
3316
|
uncheckedBackgroundColor: "transparent"
|
|
3318
3317
|
}
|
|
3319
3318
|
) : null,
|
|
@@ -3359,7 +3358,7 @@ function SelectBase({
|
|
|
3359
3358
|
"div",
|
|
3360
3359
|
{
|
|
3361
3360
|
className: "shrink-0 border-t px-2 pb-1 pt-2.5",
|
|
3362
|
-
style: { borderColor:
|
|
3361
|
+
style: { borderColor: theme.colors.secondary },
|
|
3363
3362
|
children: menuFooter
|
|
3364
3363
|
}
|
|
3365
3364
|
) : null
|
|
@@ -3711,7 +3710,7 @@ function SelectAsync({
|
|
|
3711
3710
|
"div",
|
|
3712
3711
|
{
|
|
3713
3712
|
"aria-live": "polite",
|
|
3714
|
-
className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--
|
|
3713
|
+
className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--theme-textLight)]",
|
|
3715
3714
|
style: { justifyContent: hasMore ? "space-between" : "center" },
|
|
3716
3715
|
children: [
|
|
3717
3716
|
/* @__PURE__ */ jsx12("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
|
|
@@ -4275,9 +4274,12 @@ function TableBase({
|
|
|
4275
4274
|
onInternalPageChange,
|
|
4276
4275
|
onInternalPageSizeChange
|
|
4277
4276
|
}) {
|
|
4278
|
-
const
|
|
4279
|
-
const
|
|
4280
|
-
const
|
|
4277
|
+
const theme = useUiKitTheme();
|
|
4278
|
+
const componentShadow = "0px 4px 5px var(--theme-shadow)";
|
|
4279
|
+
const softBorderColor = theme.colors.secondary;
|
|
4280
|
+
const strongBorderColor = theme.colors.textLight;
|
|
4281
|
+
const mutedTextColor = theme.colors.textLight;
|
|
4282
|
+
const alternateSurfaceColor = theme.colors.background;
|
|
4281
4283
|
const scrollRegionId = useId4().replace(/:/g, "");
|
|
4282
4284
|
const containerRef = useRef6(null);
|
|
4283
4285
|
const [containerWidth, setContainerWidth] = useState7(null);
|
|
@@ -4301,8 +4303,8 @@ function TableBase({
|
|
|
4301
4303
|
const hasRows = items.length > 0;
|
|
4302
4304
|
const hasSearchValue = searchValue.trim().length > 0;
|
|
4303
4305
|
const visibleInlineActions = Math.max(0, Math.floor(maxInlineActions));
|
|
4304
|
-
const scrollbarThumbColor =
|
|
4305
|
-
const scrollbarThumbHoverColor = theme.colors.
|
|
4306
|
+
const scrollbarThumbColor = theme.colors.secondary;
|
|
4307
|
+
const scrollbarThumbHoverColor = theme.colors.textLight;
|
|
4306
4308
|
const shouldShowToolbarStatus = loading || !loading && Boolean(error) && hasRows;
|
|
4307
4309
|
const shouldRenderToolbar = shouldShowSearch || shouldShowToolbarStatus || showSettingsButton;
|
|
4308
4310
|
const shouldRenderToolbarPrimaryGroup = shouldShowSearch || showSettingsButton;
|
|
@@ -4311,7 +4313,7 @@ function TableBase({
|
|
|
4311
4313
|
const currentPageItemCount = items.length;
|
|
4312
4314
|
const downloadMatrix = buildTableDownloadMatrix(visibleDownloadColumns, items);
|
|
4313
4315
|
const downloadFileBaseName = buildTableDownloadFileBaseName(ariaLabel, normalizedPage);
|
|
4314
|
-
const stickyActionsColumnShadow = `-10px 0 16px -14px ${
|
|
4316
|
+
const stickyActionsColumnShadow = `-10px 0 16px -14px ${theme.colors.shadow}`;
|
|
4315
4317
|
const shouldStickActionsColumn = Boolean(actions) && stickyActionsColumn;
|
|
4316
4318
|
const getStickyActionsCellStyle = (backgroundColor, backgroundImage, isHeader = false) => ({
|
|
4317
4319
|
position: "sticky",
|
|
@@ -4321,7 +4323,7 @@ function TableBase({
|
|
|
4321
4323
|
backgroundImage,
|
|
4322
4324
|
backgroundClip: "padding-box",
|
|
4323
4325
|
boxShadow: stickyActionsColumnShadow,
|
|
4324
|
-
borderLeft: `1px solid ${
|
|
4326
|
+
borderLeft: `1px solid ${softBorderColor}`
|
|
4325
4327
|
});
|
|
4326
4328
|
useEffect8(() => {
|
|
4327
4329
|
const element = containerRef.current;
|
|
@@ -4361,8 +4363,8 @@ function TableBase({
|
|
|
4361
4363
|
height: 34,
|
|
4362
4364
|
padding: iconOnly ? 0 : "0 12px",
|
|
4363
4365
|
borderRadius: 12,
|
|
4364
|
-
border: `1px solid ${tone === "danger" ?
|
|
4365
|
-
backgroundColor:
|
|
4366
|
+
border: `1px solid ${tone === "danger" ? theme.colors.negative : softBorderColor}`,
|
|
4367
|
+
backgroundColor: theme.colors.surface,
|
|
4366
4368
|
color: tone === "danger" ? theme.colors.negative : theme.colors.text,
|
|
4367
4369
|
cursor: disabled ? "not-allowed" : "pointer",
|
|
4368
4370
|
opacity: disabled ? DISABLED_COMPONENT_OPACITY : 1,
|
|
@@ -4381,14 +4383,14 @@ function TableBase({
|
|
|
4381
4383
|
gap: 6,
|
|
4382
4384
|
padding: 8,
|
|
4383
4385
|
borderRadius: STANDARD_COMPONENT_BORDER_RADIUS,
|
|
4384
|
-
border: `1px solid ${
|
|
4386
|
+
border: `1px solid ${softBorderColor}`,
|
|
4385
4387
|
backgroundColor: theme.colors.surface,
|
|
4386
4388
|
boxShadow: componentShadow
|
|
4387
4389
|
};
|
|
4388
4390
|
const toolbarControlStyle = {
|
|
4389
4391
|
height: 42,
|
|
4390
4392
|
borderRadius: 14,
|
|
4391
|
-
border: `1px solid ${
|
|
4393
|
+
border: `1px solid ${softBorderColor}`,
|
|
4392
4394
|
backgroundColor: theme.colors.surface,
|
|
4393
4395
|
color: theme.colors.text,
|
|
4394
4396
|
padding: "0 10px",
|
|
@@ -4397,7 +4399,7 @@ function TableBase({
|
|
|
4397
4399
|
fontSize: 14,
|
|
4398
4400
|
lineHeight: 1.4,
|
|
4399
4401
|
transition: "border-color 160ms ease, box-shadow 160ms ease",
|
|
4400
|
-
boxShadow:
|
|
4402
|
+
boxShadow: componentShadow
|
|
4401
4403
|
};
|
|
4402
4404
|
const settingsButtonStyle = {
|
|
4403
4405
|
...actionButtonBaseStyle("default", false, true),
|
|
@@ -4409,8 +4411,8 @@ function TableBase({
|
|
|
4409
4411
|
gap: 4,
|
|
4410
4412
|
padding: "10px 12px",
|
|
4411
4413
|
borderRadius: 14,
|
|
4412
|
-
border: `1px solid ${
|
|
4413
|
-
backgroundColor:
|
|
4414
|
+
border: `1px solid ${softBorderColor}`,
|
|
4415
|
+
backgroundColor: theme.colors.surface,
|
|
4414
4416
|
boxShadow: componentShadow
|
|
4415
4417
|
};
|
|
4416
4418
|
const handleDownloadCsv = () => {
|
|
@@ -4492,7 +4494,7 @@ function TableBase({
|
|
|
4492
4494
|
colSpan: column.colSpan,
|
|
4493
4495
|
style: {
|
|
4494
4496
|
padding: "6px 10px",
|
|
4495
|
-
borderBottom: `1px solid ${
|
|
4497
|
+
borderBottom: `1px solid ${softBorderColor}`,
|
|
4496
4498
|
verticalAlign: "middle",
|
|
4497
4499
|
color: theme.colors.text,
|
|
4498
4500
|
fontSize: 14,
|
|
@@ -4502,7 +4504,7 @@ function TableBase({
|
|
|
4502
4504
|
width: column.width,
|
|
4503
4505
|
minWidth: column.minWidth
|
|
4504
4506
|
},
|
|
4505
|
-
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color:
|
|
4507
|
+
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color: mutedTextColor }, children: "-" })
|
|
4506
4508
|
},
|
|
4507
4509
|
`${getColumnKey(column, columnIndex)}-${rowIndex}`
|
|
4508
4510
|
);
|
|
@@ -4520,8 +4522,8 @@ function TableBase({
|
|
|
4520
4522
|
gap: 12,
|
|
4521
4523
|
minHeight: 220,
|
|
4522
4524
|
borderRadius: 20,
|
|
4523
|
-
border: `1px dashed ${
|
|
4524
|
-
backgroundColor:
|
|
4525
|
+
border: `1px dashed ${strongBorderColor}`,
|
|
4526
|
+
backgroundColor: theme.colors.surface,
|
|
4525
4527
|
boxShadow: componentShadow,
|
|
4526
4528
|
color: theme.colors.text,
|
|
4527
4529
|
textAlign: "center",
|
|
@@ -4541,7 +4543,7 @@ function TableBase({
|
|
|
4541
4543
|
className: cx(
|
|
4542
4544
|
UI_KIT_ROOT_CLASSNAME,
|
|
4543
4545
|
"flex w-full max-w-full min-w-0 flex-col gap-4 rounded-[24px]",
|
|
4544
|
-
"box-border bg-[var(--
|
|
4546
|
+
"box-border bg-[var(--theme-surface)] p-[18px] text-[var(--theme-text)]",
|
|
4545
4547
|
className
|
|
4546
4548
|
),
|
|
4547
4549
|
style,
|
|
@@ -4568,8 +4570,8 @@ function TableBase({
|
|
|
4568
4570
|
style: {
|
|
4569
4571
|
flex: "1 1 260px",
|
|
4570
4572
|
maxWidth: 360,
|
|
4571
|
-
borderColor:
|
|
4572
|
-
boxShadow:
|
|
4573
|
+
borderColor: softBorderColor,
|
|
4574
|
+
boxShadow: componentShadow
|
|
4573
4575
|
}
|
|
4574
4576
|
}
|
|
4575
4577
|
) : null,
|
|
@@ -4593,7 +4595,7 @@ function TableBase({
|
|
|
4593
4595
|
className: "flex min-w-0 flex-wrap items-center justify-end gap-2.5",
|
|
4594
4596
|
style: { marginLeft: shouldRenderToolbarPrimaryGroup ? "auto" : void 0 },
|
|
4595
4597
|
children: [
|
|
4596
|
-
loading ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--
|
|
4598
|
+
loading ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
|
|
4597
4599
|
!loading && error && hasRows ? /* @__PURE__ */ jsxs11("div", { className: "inline-flex items-center gap-2.5", children: [
|
|
4598
4600
|
/* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
|
|
4599
4601
|
onRetry ? /* @__PURE__ */ jsx13(Button, { size: "sm", variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
|
|
@@ -4605,7 +4607,7 @@ function TableBase({
|
|
|
4605
4607
|
!hasRows && (!loading || error) ? renderEmptyState() : null,
|
|
4606
4608
|
hasRows ? isCollapsed ? /* @__PURE__ */ jsx13("div", { role: "list", "aria-label": ariaLabel, className: "flex flex-col gap-3.5", children: items.map((item, rowIndex) => {
|
|
4607
4609
|
const rowActions = renderActions(item, rowIndex);
|
|
4608
|
-
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface :
|
|
4610
|
+
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
|
|
4609
4611
|
return /* @__PURE__ */ jsxs11(
|
|
4610
4612
|
"article",
|
|
4611
4613
|
{
|
|
@@ -4616,7 +4618,7 @@ function TableBase({
|
|
|
4616
4618
|
gap: 14,
|
|
4617
4619
|
padding: "16px 16px 6px 16px",
|
|
4618
4620
|
borderRadius: 20,
|
|
4619
|
-
border: `1px solid ${
|
|
4621
|
+
border: `1px solid ${softBorderColor}`,
|
|
4620
4622
|
backgroundColor: rowBackgroundColor,
|
|
4621
4623
|
boxShadow: componentShadow
|
|
4622
4624
|
},
|
|
@@ -4649,7 +4651,7 @@ function TableBase({
|
|
|
4649
4651
|
"span",
|
|
4650
4652
|
{
|
|
4651
4653
|
style: {
|
|
4652
|
-
color:
|
|
4654
|
+
color: mutedTextColor,
|
|
4653
4655
|
fontSize: 11,
|
|
4654
4656
|
fontWeight: 700,
|
|
4655
4657
|
letterSpacing: "0.08em",
|
|
@@ -4684,7 +4686,7 @@ function TableBase({
|
|
|
4684
4686
|
lineHeight: 1.55,
|
|
4685
4687
|
textAlign: getTextAlign(align)
|
|
4686
4688
|
},
|
|
4687
|
-
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color:
|
|
4689
|
+
children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { style: { color: mutedTextColor }, children: "-" })
|
|
4688
4690
|
}
|
|
4689
4691
|
)
|
|
4690
4692
|
}
|
|
@@ -4703,7 +4705,7 @@ function TableBase({
|
|
|
4703
4705
|
display: "flex",
|
|
4704
4706
|
justifyContent: "flex-end",
|
|
4705
4707
|
paddingTop: 4,
|
|
4706
|
-
borderTop: `1px solid ${
|
|
4708
|
+
borderTop: `1px solid ${softBorderColor}`
|
|
4707
4709
|
},
|
|
4708
4710
|
children: rowActions
|
|
4709
4711
|
}
|
|
@@ -4751,8 +4753,8 @@ function TableBase({
|
|
|
4751
4753
|
"aria-label": ariaLabel,
|
|
4752
4754
|
className: "w-full max-w-full min-w-0 overflow-x-auto overflow-y-hidden rounded-[20px] border bg-[var(--theme-surface)]",
|
|
4753
4755
|
style: {
|
|
4754
|
-
borderColor:
|
|
4755
|
-
boxShadow:
|
|
4756
|
+
borderColor: softBorderColor,
|
|
4757
|
+
boxShadow: componentShadow
|
|
4756
4758
|
},
|
|
4757
4759
|
children: /* @__PURE__ */ jsxs11("table", { className: "min-w-full max-w-none border-separate border-spacing-0", style: { width: "max-content" }, children: [
|
|
4758
4760
|
/* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
|
|
@@ -4766,8 +4768,8 @@ function TableBase({
|
|
|
4766
4768
|
scope: "col",
|
|
4767
4769
|
style: {
|
|
4768
4770
|
padding: "6px 10px",
|
|
4769
|
-
borderBottom: `1px solid ${
|
|
4770
|
-
color:
|
|
4771
|
+
borderBottom: `1px solid ${strongBorderColor}`,
|
|
4772
|
+
color: mutedTextColor,
|
|
4771
4773
|
fontSize: 11,
|
|
4772
4774
|
fontWeight: 700,
|
|
4773
4775
|
letterSpacing: "0.08em",
|
|
@@ -4788,8 +4790,8 @@ function TableBase({
|
|
|
4788
4790
|
scope: "col",
|
|
4789
4791
|
style: {
|
|
4790
4792
|
padding: "6px 10px",
|
|
4791
|
-
borderBottom: `1px solid ${
|
|
4792
|
-
color:
|
|
4793
|
+
borderBottom: `1px solid ${strongBorderColor}`,
|
|
4794
|
+
color: mutedTextColor,
|
|
4793
4795
|
fontSize: 11,
|
|
4794
4796
|
fontWeight: 700,
|
|
4795
4797
|
letterSpacing: "0.08em",
|
|
@@ -4805,8 +4807,8 @@ function TableBase({
|
|
|
4805
4807
|
] }) }),
|
|
4806
4808
|
/* @__PURE__ */ jsx13("tbody", { children: items.map((item, rowIndex) => {
|
|
4807
4809
|
const rowActions = renderActions(item, rowIndex);
|
|
4808
|
-
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface :
|
|
4809
|
-
const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${
|
|
4810
|
+
const rowBackgroundColor = rowIndex % 2 === 0 ? theme.colors.surface : alternateSurfaceColor;
|
|
4811
|
+
const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : `linear-gradient(${alternateSurfaceColor}, ${alternateSurfaceColor})`;
|
|
4810
4812
|
return /* @__PURE__ */ jsxs11(
|
|
4811
4813
|
"tr",
|
|
4812
4814
|
{
|
|
@@ -4820,7 +4822,7 @@ function TableBase({
|
|
|
4820
4822
|
{
|
|
4821
4823
|
style: {
|
|
4822
4824
|
padding: "6px 10px",
|
|
4823
|
-
borderBottom: `1px solid ${
|
|
4825
|
+
borderBottom: `1px solid ${softBorderColor}`,
|
|
4824
4826
|
textAlign: "right",
|
|
4825
4827
|
verticalAlign: "middle",
|
|
4826
4828
|
...shouldStickActionsColumn ? getStickyActionsCellStyle(theme.colors.surface, stickyRowBackgroundImage) : {}
|
|
@@ -4843,7 +4845,7 @@ function TableBase({
|
|
|
4843
4845
|
className: "flex flex-wrap items-center justify-between gap-3 pt-1",
|
|
4844
4846
|
children: [
|
|
4845
4847
|
shouldShowPaginationControls ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
4846
|
-
/* @__PURE__ */ jsx13("span", { className: "mr-1 text-[13px] text-[var(--
|
|
4848
|
+
/* @__PURE__ */ jsx13("span", { className: "mr-1 text-[13px] text-[var(--theme-textLight)]", children: resolvedLabels.pageLabel(normalizedPage, totalPages) }),
|
|
4847
4849
|
/* @__PURE__ */ jsx13(
|
|
4848
4850
|
"button",
|
|
4849
4851
|
{
|
|
@@ -4892,7 +4894,7 @@ function TableBase({
|
|
|
4892
4894
|
/* @__PURE__ */ jsx13(
|
|
4893
4895
|
"div",
|
|
4894
4896
|
{
|
|
4895
|
-
className: "flex items-center gap-2.5 text-[13px] text-[var(--
|
|
4897
|
+
className: "flex items-center gap-2.5 text-[13px] text-[var(--theme-textLight)]",
|
|
4896
4898
|
style: { marginLeft: shouldShowRowsPerPageControl ? "auto" : void 0 },
|
|
4897
4899
|
children: shouldShowRowsPerPageControl ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
4898
4900
|
/* @__PURE__ */ jsx13("span", { children: resolvedLabels.rowsPerPageLabel }),
|
|
@@ -4903,8 +4905,8 @@ function TableBase({
|
|
|
4903
4905
|
onChange: (event) => onInternalPageSizeChange(Number(event.currentTarget.value)),
|
|
4904
4906
|
className: "h-[34px] rounded-[14px] border bg-[var(--theme-surface)] px-3 text-sm leading-[1.4] text-[var(--theme-text)] outline-none",
|
|
4905
4907
|
style: {
|
|
4906
|
-
borderColor:
|
|
4907
|
-
boxShadow:
|
|
4908
|
+
borderColor: softBorderColor,
|
|
4909
|
+
boxShadow: componentShadow
|
|
4908
4910
|
},
|
|
4909
4911
|
children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx13("option", { value: option, children: option }, option))
|
|
4910
4912
|
}
|
|
@@ -4928,24 +4930,24 @@ function TableBase({
|
|
|
4928
4930
|
/* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
|
|
4929
4931
|
/* @__PURE__ */ jsxs11("div", { className: "grid gap-2.5 [grid-template-columns:repeat(auto-fit,minmax(120px,1fr))]", children: [
|
|
4930
4932
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4931
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4933
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
|
|
4932
4934
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalPages })
|
|
4933
4935
|
] }),
|
|
4934
4936
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4935
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4937
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
|
|
4936
4938
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: totalItemCount })
|
|
4937
4939
|
] }),
|
|
4938
4940
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4939
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4941
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
|
|
4940
4942
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: normalizedPage })
|
|
4941
4943
|
] }),
|
|
4942
4944
|
/* @__PURE__ */ jsxs11("div", { style: infoCardStyle, children: [
|
|
4943
|
-
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--
|
|
4945
|
+
/* @__PURE__ */ jsx13("span", { className: "text-[10px] font-bold uppercase tracking-[0.06em] text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
|
|
4944
4946
|
/* @__PURE__ */ jsx13("strong", { className: "text-[18px] leading-[1.1] text-[var(--theme-text)]", children: currentPageItemCount })
|
|
4945
4947
|
] })
|
|
4946
4948
|
] })
|
|
4947
4949
|
] }),
|
|
4948
|
-
/* @__PURE__ */ jsx13("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx13(Separator, { orientation: "horizontal", color:
|
|
4950
|
+
/* @__PURE__ */ jsx13("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx13(Separator, { orientation: "horizontal", color: softBorderColor }) }),
|
|
4949
4951
|
/* @__PURE__ */ jsxs11("section", { className: "grid gap-3", children: [
|
|
4950
4952
|
/* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
|
|
4951
4953
|
/* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-2.5", children: [
|
|
@@ -5245,12 +5247,13 @@ function Textarea({
|
|
|
5245
5247
|
className: cx(
|
|
5246
5248
|
"w-full min-w-0 box-border resize-y rounded-2xl border border-solid bg-[var(--theme-surface)]",
|
|
5247
5249
|
"text-[var(--theme-text)] outline-none transition-[border-color,box-shadow,background-color]",
|
|
5248
|
-
"duration-150 disabled:cursor-not-allowed",
|
|
5250
|
+
"duration-150 placeholder:opacity-100 disabled:cursor-not-allowed",
|
|
5251
|
+
"placeholder:text-[var(--theme-textLight)]",
|
|
5249
5252
|
error ? "border-[var(--theme-negative)]" : "border-[var(--theme-textLight)]",
|
|
5250
5253
|
TEXTAREA_SIZE_CLASSNAMES[controlSize]
|
|
5251
5254
|
),
|
|
5252
5255
|
style: {
|
|
5253
|
-
boxShadow: error ? "0 0 0 3px var(--
|
|
5256
|
+
boxShadow: error ? "0 0 0 3px var(--theme-negative), 0px 4px 5px var(--theme-shadow)" : "0px 4px 5px var(--theme-shadow)",
|
|
5254
5257
|
...style,
|
|
5255
5258
|
...disabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
|
|
5256
5259
|
}
|