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