npm - @ahrowe/ui - Versions diffs - 0.29.0 → 0.30.0 - Mend

@ahrowe/ui 0.29.0 → 0.30.0

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.

Files changed (113) hide show

package/dist/esm/common/accordion/accordion.mjs +1 -1
package/dist/esm/common/accordion/accordion.mjs.map +1 -1
package/dist/esm/common/accordion/accordion.module.mjs.map +1 -1
package/dist/esm/common/accordion/accordion.plain.module.mjs.map +1 -1
package/dist/esm/common/accordion/accordion.primary.module.mjs.map +1 -1
package/dist/esm/common/alert/alert.module.mjs.map +1 -1
package/dist/esm/common/badge/badge.module.mjs.map +1 -1
package/dist/esm/common/bodyEnd/bodyEnd.mjs +1 -1
package/dist/esm/common/bodyEnd/bodyEnd.mjs.map +1 -1
package/dist/esm/common/button/button.module.mjs +1 -1
package/dist/esm/common/button/button.module.mjs.map +1 -1
package/dist/esm/common/card/Card.mjs +1 -1
package/dist/esm/common/card/Card.mjs.map +1 -1
package/dist/esm/common/card/card.module.mjs.map +1 -1
package/dist/esm/common/checkbox/checkbox.mjs +1 -1
package/dist/esm/common/checkbox/checkbox.mjs.map +1 -1
package/dist/esm/common/checkbox/checkbox.module.mjs +1 -1
package/dist/esm/common/checkbox/checkbox.module.mjs.map +1 -1
package/dist/esm/common/chip/chip.mjs +1 -1
package/dist/esm/common/chip/chip.mjs.map +1 -1
package/dist/esm/common/chip/chip.module.mjs.map +1 -1
package/dist/esm/common/colorPicker/colorPicker.mjs +1 -1
package/dist/esm/common/colorPicker/colorPicker.mjs.map +1 -1
package/dist/esm/common/colorPicker/colorPicker.module.mjs.map +1 -1
package/dist/esm/common/colorPicker/toHex.mjs +2 -0
package/dist/esm/common/colorPicker/toHex.mjs.map +1 -0
package/dist/esm/common/datePicker/datePicker.mjs +1 -1
package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
package/dist/esm/common/dropZone/dropZone.mjs +1 -1
package/dist/esm/common/dropZone/dropZone.mjs.map +1 -1
package/dist/esm/common/fab/components/fabBase/fabBase.mjs +1 -1
package/dist/esm/common/fab/components/fabBase/fabBase.mjs.map +1 -1
package/dist/esm/common/fab/components/fabBase/fabBase.module.mjs.map +1 -1
package/dist/esm/common/fab/fab.module.mjs.map +1 -1
package/dist/esm/common/flip/flip.mjs +1 -1
package/dist/esm/common/flip/flip.mjs.map +1 -1
package/dist/esm/common/iconPicker/iconPicker.module.mjs.map +1 -1
package/dist/esm/common/input/input.mjs +1 -1
package/dist/esm/common/input/input.mjs.map +1 -1
package/dist/esm/common/input/input.module.mjs +1 -1
package/dist/esm/common/input/input.module.mjs.map +1 -1
package/dist/esm/common/inputDropdown/inputDropdown.mjs +1 -1
package/dist/esm/common/inputDropdown/inputDropdown.mjs.map +1 -1
package/dist/esm/common/interactableDiv/interactableDiv.mjs +1 -1
package/dist/esm/common/interactableDiv/interactableDiv.mjs.map +1 -1
package/dist/esm/common/kanbanBoard/kanbanBoard.module.mjs.map +1 -1
package/dist/esm/common/optionPicker/optionPicker.module.mjs.map +1 -1
package/dist/esm/common/otpInput/otpInput.module.mjs.map +1 -1
package/dist/esm/common/pagination/pagination.module.mjs.map +1 -1
package/dist/esm/common/planCanvas/planCanvas.module.mjs +1 -1
package/dist/esm/common/planCanvas/planCanvas.module.mjs.map +1 -1
package/dist/esm/common/progressBar/progressBar.module.mjs +1 -1
package/dist/esm/common/progressBar/progressBar.module.mjs.map +1 -1
package/dist/esm/common/radioGroup/radioGroup.mjs +1 -1
package/dist/esm/common/radioGroup/radioGroup.mjs.map +1 -1
package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -1
package/dist/esm/common/rating/rating.module.mjs.map +1 -1
package/dist/esm/common/roomDrawer/roomDrawer.mjs +1 -1
package/dist/esm/common/roomDrawer/roomDrawer.mjs.map +1 -1
package/dist/esm/common/searchInput/searchInput.mjs +1 -1
package/dist/esm/common/searchInput/searchInput.mjs.map +1 -1
package/dist/esm/common/slider/slider.mjs +1 -1
package/dist/esm/common/slider/slider.mjs.map +1 -1
package/dist/esm/common/slider/slider.module.mjs.map +1 -1
package/dist/esm/common/switch/switch.module.mjs.map +1 -1
package/dist/esm/common/tabHeader/tabHeader.module.mjs.map +1 -1
package/dist/esm/common/themeProvider/theme.module.mjs.map +1 -1
package/dist/esm/common/themeProvider/themeProvider.mjs +1 -1
package/dist/esm/common/themeProvider/themeProvider.mjs.map +1 -1
package/dist/esm/common/themeProvider/themeVariablesContext.mjs +2 -0
package/dist/esm/common/themeProvider/themeVariablesContext.mjs.map +1 -0
package/dist/esm/common/timeInput/timeInput.mjs +1 -1
package/dist/esm/common/timeInput/timeInput.mjs.map +1 -1
package/dist/esm/common/timeline/timeline.mjs +1 -1
package/dist/esm/common/timeline/timeline.mjs.map +1 -1
package/dist/esm/common/timeline/timeline.module.mjs +1 -1
package/dist/esm/common/timeline/timeline.module.mjs.map +1 -1
package/dist/esm/common/timer/timer.mjs +1 -1
package/dist/esm/common/timer/timer.mjs.map +1 -1
package/dist/esm/common/timer/timer.module.mjs.map +1 -1
package/dist/esm/common/toast/toast.module.mjs.map +1 -1
package/dist/esm/common/tooltip/tooltip.module.mjs.map +1 -1
package/dist/esm/common/utils/activationKey.mjs +2 -0
package/dist/esm/common/utils/activationKey.mjs.map +1 -0
package/dist/index.cjs +3 -3
package/dist/index.cjs.map +1 -1
package/dist/style.css +1 -1
package/dist/types/common/colorPicker/toHex.d.ts +11 -0
package/dist/types/common/themeProvider/theme.types.d.ts +105 -3
package/dist/types/common/themeProvider/themeVariablesContext.d.ts +11 -0
package/dist/types/common/utils/activationKey.d.ts +9 -0
package/docs/Accordion.md +4 -0
package/docs/Alert.md +4 -0
package/docs/BodyEnd.md +3 -0
package/docs/Button.md +6 -0
package/docs/Card.md +6 -0
package/docs/Checkbox.md +8 -0
package/docs/ColorPicker.md +11 -1
package/docs/Fab.md +16 -0
package/docs/Flip.md +1 -1
package/docs/IconPicker.md +8 -0
package/docs/Input.md +12 -0
package/docs/OtpInput.md +4 -0
package/docs/RadioGroup.md +6 -0
package/docs/Rating.md +5 -0
package/docs/RoomDrawer.md +13 -5
package/docs/RoomViewer.md +4 -0
package/docs/Slider.md +6 -2
package/docs/ThemeProvider.md +89 -1
package/docs/Timer.md +7 -1
package/docs/Toast.md +6 -0
package/docs/Tooltip.md +15 -0
package/package.json +2 -1

package/dist/esm/common/input/input.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":[".required-mark {\n padding: 0 0 0 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. /\n --input-radius: var(--group-radius-tl, var(--default-border-radius))\n var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n var(--group-radius-bl, var(--default-border-radius));\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n inset: 0 0 auto 14px;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--input-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-no-notch {\n / Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. /\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--focus-border-color, var(--primary-color));\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n / The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n &-left {\n left: var(--input-icon-offset);\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["/* Chrome fills a field on page load without firing anything React can see, and an animation\n bound to the pseudo-class is the only hook it offers. The declarations are inert on purpose;\n the pair exists to be listened for — see handleAutofillAnimation in input.tsx. /\n@keyframes inputAutofillStart {\n from {\n opacity: 1;\n }\n}\n\n@keyframes inputAutofillEnd {\n from {\n opacity: 1;\n }\n}\n\n.required-mark {\n padding: 0 0 0 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n\n / The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. /\n --input-radius: var(--group-radius-tl, var(--default-border-radius))\n var(--group-radius-tr, var(--default-border-radius)) var(--group-radius-br, var(--default-border-radius))\n var(--group-radius-bl, var(--default-border-radius));\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n inset: 0 0 auto 14px;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--input-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-no-notch {\n / Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. /\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--focus-border-color, var(--primary-color));\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n / Chrome overrides `background` and `color` on an autofilled field outright. Clipping the\n background to the glyphs is what removes it: the page cannot win on colour, but it can\n say where a background paints, and -webkit-text-fill-color then beats the text colour.\n The field is transparent either way, so what shows through is whatever is really behind\n it — no surface has to declare itself, which an inset-shadow cover-up would have needed. /\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n animation-name: inputAutofillStart;\n animation-duration: 1ms;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: var(--text-color);\n caret-color: var(--text-color);\n }\n\n &:not(:-webkit-autofill) {\n animation-name: inputAutofillEnd;\n animation-duration: 1ms;\n }\n\n / The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: var(--input-icon-color);\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &:focus-visible {\n outline: 1px solid var(--focus-border-color, var(--primary-color));\n outline-offset: 2px;\n }\n\n &-left {\n left: var(--input-icon-offset);\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/inputDropdown/inputDropdown.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../input/input.mjs";import i from"./inputDropdown.module.mjs";import{useCallback as a,useEffect as o,useLayoutEffect as s,useMemo as c,useRef as l,useState as u}from"react";import d from"classnames";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(e,t){return t?t.value??``:e??``}function h(e,t){let n=t.find(t=>t.value===e);return n?n.label??n.value:e}function g(g){let{label:_=``,value:v=``,formValidator:y=null,error:b,isRequired:x=!1,items:S=[],allowCustomValue:C=!1,maxItems:w=100,className:T,style:E,classNames:D,styles:O,onSelect:k=()=>null,onChange:A,placeholder:j=``,readOnly:M=!1,...N}=e(`InputDropdown`,g),P=m(v,y),[,F]=u(0),I=l(y);o(()=>{if(I.current=y,!y)return;let e=()=>F(e=>e+1);return y.registerOnUpdateListener(e),()=>{y.removeOnUpdateListener(e)}},[y]);let L=x||!!y?.validators.find(e=>e.validatorId===`required`),[R,z]=u(()=>h(P,S)),[B,V]=u(P),[H,U]=u(!1),[W,G]=u(null),K=l(null),q=l(null),J=l(null),Y=O?.dropdown?.fontSize;if(s(()=>{let e=q.current,t=J.current;H&&e&&t&&Y==null&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,Y]),n({isOpen:H,triggerRef:q,anchorRef:J,panelRef:J,flipClassName:i.dropdownFlip}),P!==B){V(P);let e=S.find(e=>e.value===P);e?z(e.label??e.value):C&&z(P)}let X=c(()=>{let e=R.toLowerCase(),t=[];for(let n of S)if((n.label??n.value).toLowerCase().includes(e)&&(t.push(n),w>0&&t.length>=w))break;return t},[S,R,w]),Z=()=>{M||(K.current&&=(clearTimeout(K.current),null),U(!0))},Q=()=>{I.current&&(I.current.touched=!0),K.current=setTimeout(()=>{U(!1),K.current=null,C||z(h(P,S))},100)},$=a(e=>{z(e.label??e.value),U(!1),G(null),y&&y.set(e.value),A&&A(e.value),k(e.value)},[y,A,k]),ee=a(e=>{M||(e.key===`ArrowUp`?(e.preventDefault(),G(e=>e?e-1:null)):e.key===`ArrowDown`?(e.preventDefault(),G(e=>e===null?0:Math.min(e+1,X.length-1))):e.key===`Enter`&&(W!==null&&X[W]?$(X[W]):C&&(U(!1),G(null))))},[X,W,$,C,M]);return p(`div`,{...N,ref:q,className:d(i.inputDropdown,D?.root,T),style:{...O?.root,...E},onFocus:Z,onBlur:Q,onKeyDown:ee,children:[f(r,{label:_,value:R,readOnly:M,formValidator:null,isRequired:L,isValid:y?!y.touched||!y.hasError():!b,errorMessage:y?y.touched?y.getCurrentErrorMessage()??``:``:b??``,onChange:e=>{if(z(e),G(null),U(!0),C)y&&y.set(e),A&&A(e);else if(e===``)y&&y.set(``),A&&A(``),k(``);else{let t=S.find(t=>(t.label??t.value).toLowerCase()===e.toLowerCase());t&&(y&&y.set(t.value),A&&A(t.value),k(t.value))}},placeholder:j}),H&&!M&&f(t,{children:f(`div`,{ref:J,className:d(i.dropdown,i.dropdownShown,D?.dropdown),style:O?.dropdown,children:f(`div`,{className:i.dropdownScroll,children:X.map((e,t)=>f(`div`,{className:d(i.dropdownItem,W===t&&i.dropdownItemHighlighted,D?.item),style:O?.item,onMouseDown:e=>e.preventDefault(),onClick:()=>$(e),children:e.label??e.value},`${t}_${e.label}_${e.value}`))})})})]})}export{g as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../input/input.mjs";import i from"./inputDropdown.module.mjs";import{useCallback as a,useEffect as o,useLayoutEffect as s,useMemo as c,useRef as l,useState as u}from"react";import d from"classnames";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(e,t){return t?t.value??``:e??``}function h(e,t){let n=t.find(t=>t.value===e);return n?n.label??n.value:e}function g(g){let{label:_=``,value:v=``,formValidator:y=null,error:b,isRequired:x=!1,items:S=[],allowCustomValue:C=!1,maxItems:w=100,className:T,style:E,classNames:D,styles:O,onSelect:k=()=>null,onChange:A,placeholder:j=``,readOnly:M=!1,...N}=e(`InputDropdown`,g),P=m(v,y),[,F]=u(0),I=l(y);o(()=>{if(I.current=y,!y)return;let e=()=>F(e=>e+1);return y.registerOnUpdateListener(e),()=>{y.removeOnUpdateListener(e)}},[y]);let L=x||!!y?.validators.find(e=>e.validatorId===`required`),[R,z]=u(()=>h(P,S)),[B,V]=u(P),[H,U]=u(!1),[W,G]=u(null),K=l(null),q=l(null),J=l(null),Y=O?.dropdown?.fontSize;if(s(()=>{let e=q.current,t=J.current;H&&e&&t&&Y==null&&(t.style.fontSize=window.getComputedStyle(e).fontSize)},[H,Y]),n({isOpen:H,triggerRef:q,anchorRef:J,panelRef:J,flipClassName:i.dropdownFlip}),P!==B){V(P);let e=S.find(e=>e.value===P);e?z(e.label??e.value):C&&z(P)}let X=c(()=>{let e=R.toLowerCase(),t=[];for(let n of S)if((n.label??n.value).toLowerCase().includes(e)&&(t.push(n),w>0&&t.length>=w))break;return t},[S,R,w]),Z=()=>{M||(K.current&&=(clearTimeout(K.current),null),U(!0))},Q=()=>{I.current&&(I.current.touched=!0),K.current=setTimeout(()=>{U(!1),K.current=null,C||z(h(P,S))},100)},$=a(e=>{z(e.label??e.value),U(!1),G(null),y&&y.set(e.value),A&&A(e.value),k(e.value)},[y,A,k]),ee=a(e=>{M||(e.key===`ArrowUp`?(e.preventDefault(),G(e=>e?e-1:null)):e.key===`ArrowDown`?(e.preventDefault(),G(e=>e===null?0:Math.min(e+1,X.length-1))):e.key===`Enter`&&(W!==null&&X[W]?$(X[W]):C&&(U(!1),G(null))))},[X,W,$,C,M]);return p(`div`,{...N,ref:q,className:d(i.inputDropdown,D?.root,T),style:{...O?.root,...E},onFocus:Z,onBlur:Q,onKeyDown:ee,children:[f(r,{autoComplete:`off`,label:_,value:R,readOnly:M,formValidator:null,isRequired:L,isValid:y?!y.touched||!y.hasError():!b,errorMessage:y?y.touched?y.getCurrentErrorMessage()??``:``:b??``,onChange:e=>{if(z(e),G(null),U(!0),C)y&&y.set(e),A&&A(e);else if(e===``)y&&y.set(``),A&&A(``),k(``);else{let t=S.find(t=>(t.label??t.value).toLowerCase()===e.toLowerCase());t&&(y&&y.set(t.value),A&&A(t.value),k(t.value))}},placeholder:j}),H&&!M&&f(t,{children:f(`div`,{ref:J,className:d(i.dropdown,i.dropdownShown,D?.dropdown),style:O?.dropdown,children:f(`div`,{className:i.dropdownScroll,children:X.map((e,t)=>f(`div`,{className:d(i.dropdownItem,W===t&&i.dropdownItemHighlighted,D?.item),style:O?.item,onMouseDown:e=>e.preventDefault(),onClick:()=>$(e),children:e.label??e.value},`${t}_${e.label}_${e.value}`))})})})]})}export{g as default};
 //# sourceMappingURL=inputDropdown.mjs.map

package/dist/esm/common/inputDropdown/inputDropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inputDropdown.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\nimport styles from './inputDropdown.module.pcss';\nimport Input from '../input';\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport type { InputDropdownItem, InputDropdownProps } from './inputDropdown.types';\n\nfunction getKeyFromProps(value: string \| undefined, formValidator: InputDropdownProps['formValidator']): string {\n return formValidator ? ((formValidator.value as string) ?? '') : (value ?? '');\n}\n\nfunction labelForKey(key: string, items: InputDropdownItem[]): string {\n const match = items.find((item) => item.value === key);\n return match ? (match.label ?? match.value) : key;\n}\n\nexport default function InputDropdown(props: InputDropdownProps) {\n const {\n label = '',\n value = '',\n formValidator = null,\n error,\n isRequired = false,\n items = [],\n allowCustomValue = false,\n maxItems = 100,\n className,\n style,\n classNames,\n styles: slotStyles,\n onSelect = () => null,\n onChange,\n placeholder = '',\n readOnly = false,\n ...rest\n } = useComponentDefaults('InputDropdown', props);\n const currentKey = getKeyFromProps(value, formValidator);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => {\n formValidator.removeOnUpdateListener(listener);\n };\n }, [formValidator]);\n\n const computedIsRequired =\n isRequired \|\| !!formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required');\n\n const [inputText, setInputText] = useState(() => labelForKey(currentKey, items));\n const [prevKey, setPrevKey] = useState(currentKey);\n const [isMenuShown, setIsMenuShown] = useState(false);\n const [highlightedIndex, setHighlightedIndex] = useState<number \| null>(null);\n const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n\n const menuFontSizeOverride = slotStyles?.dropdown?.fontSize;\n useLayoutEffect(() => {\n const trigger = triggerRef.current;\n const menu = anchorRef.current;\n if (!isMenuShown \|\| !trigger \|\| !menu \|\| menuFontSizeOverride != null) return;\n menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n }, [isMenuShown, menuFontSizeOverride]);\n\n useFloatingPosition({\n isOpen: isMenuShown,\n triggerRef,\n anchorRef,\n panelRef: anchorRef,\n flipClassName: styles.dropdownFlip,\n });\n\n // Sync display text when the controlled key changes externally (e.g. parent reset).\n if (currentKey !== prevKey) {\n setPrevKey(currentKey);\n const match = items.find((item) => item.value === currentKey);\n if (match) setInputText(match.label ?? match.value);\n else if (allowCustomValue) setInputText(currentKey);\n }\n\n const currItems = useMemo(() => {\n const needle = inputText.toLowerCase();\n const matches: InputDropdownItem[] = [];\n for (const item of items) {\n if (!(item.label ?? item.value).toLowerCase().includes(needle)) continue;\n matches.push(item);\n if (maxItems > 0 && matches.length >= maxItems) break;\n }\n return matches;\n }, [items, inputText, maxItems]);\n\n const handleFocus = () => {\n if (readOnly) return;\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n setIsMenuShown(true);\n };\n\n const handleBlur = () => {\n if (fvRef.current) fvRef.current.touched = true;\n hideTimeoutRef.current = setTimeout(() => {\n setIsMenuShown(false);\n hideTimeoutRef.current = null;\n // Without custom values, uncommitted typed text is invalid — snap the\n // display back to the currently selected item's label.\n if (!allowCustomValue) setInputText(labelForKey(currentKey, items));\n }, 100);\n };\n\n const handleSelect = useCallback(\n (item: InputDropdownItem) => {\n setInputText(item.label ?? item.value);\n setIsMenuShown(false);\n setHighlightedIndex(null);\n if (formValidator) formValidator.set(item.value);\n if (onChange) onChange(item.value);\n onSelect(item.value);\n },\n [formValidator, onChange, onSelect],\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (readOnly) return;\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n setHighlightedIndex((idx) => (!idx ? null : idx - 1));\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n setHighlightedIndex((idx) => (idx === null ? 0 : Math.min(idx + 1, currItems.length - 1)));\n } else if (event.key === 'Enter') {\n if (highlightedIndex !== null && currItems[highlightedIndex]) {\n handleSelect(currItems[highlightedIndex]);\n } else if (allowCustomValue) {\n setIsMenuShown(false);\n setHighlightedIndex(null);\n }\n }\n },\n [currItems, highlightedIndex, handleSelect, allowCustomValue, readOnly],\n );\n\n return (\n <div\n {...rest}\n ref={triggerRef}\n className={cx(styles.inputDropdown, classNames?.root, className)}\n style={{ ...slotStyles?.root, ...style }}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n >\n <Input\n label={label}\n value={inputText}\n readOnly={readOnly}\n formValidator={null}\n isRequired={computedIsRequired}\n isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n errorMessage={\n formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')\n }\n onChange={(text) => {\n setInputText(text);\n setHighlightedIndex(null);\n setIsMenuShown(true);\n if (allowCustomValue) {\n if (formValidator) formValidator.set(text);\n if (onChange) onChange(text);\n } else if (text === '') {\n if (formValidator) formValidator.set('');\n if (onChange) onChange('');\n onSelect('');\n } else {\n // Emit when the typed text exactly matches an item's label/value.\n const match = items.find((item) => (item.label ?? item.value).toLowerCase() === text.toLowerCase());\n if (match) {\n if (formValidator) formValidator.set(match.value);\n if (onChange) onChange(match.value);\n onSelect(match.value);\n }\n }\n }}\n placeholder={placeholder}\n />\n {isMenuShown && !readOnly && (\n <BodyEnd>\n <div\n ref={anchorRef}\n className={cx(styles.dropdown, styles.dropdownShown, classNames?.dropdown)}\n style={slotStyles?.dropdown}\n >\n <div className={styles.dropdownScroll}>\n {currItems.map((item, key) => (\n <div\n key={`${key}_${item.label}_${item.value}`}\n className={cx(\n styles.dropdownItem,\n highlightedIndex === key && styles.dropdownItemHighlighted,\n classNames?.item,\n )}\n style={slotStyles?.item}\n // Prevent the input from blurring before the click resolves.\n onMouseDown={(e) => e.preventDefault()}\n onClick={() => handleSelect(item)}\n >\n {item.label ?? item.value}\n </div>\n ))}\n </div>\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"inputDropdown.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\nimport styles from './inputDropdown.module.pcss';\nimport Input from '../input';\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport type { InputDropdownItem, InputDropdownProps } from './inputDropdown.types';\n\nfunction getKeyFromProps(value: string \| undefined, formValidator: InputDropdownProps['formValidator']): string {\n return formValidator ? ((formValidator.value as string) ?? '') : (value ?? '');\n}\n\nfunction labelForKey(key: string, items: InputDropdownItem[]): string {\n const match = items.find((item) => item.value === key);\n return match ? (match.label ?? match.value) : key;\n}\n\nexport default function InputDropdown(props: InputDropdownProps) {\n const {\n label = '',\n value = '',\n formValidator = null,\n error,\n isRequired = false,\n items = [],\n allowCustomValue = false,\n maxItems = 100,\n className,\n style,\n classNames,\n styles: slotStyles,\n onSelect = () => null,\n onChange,\n placeholder = '',\n readOnly = false,\n ...rest\n } = useComponentDefaults('InputDropdown', props);\n const currentKey = getKeyFromProps(value, formValidator);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => {\n formValidator.removeOnUpdateListener(listener);\n };\n }, [formValidator]);\n\n const computedIsRequired =\n isRequired \|\| !!formValidator?.validators.find((v) => (v as { validatorId?: string }).validatorId === 'required');\n\n const [inputText, setInputText] = useState(() => labelForKey(currentKey, items));\n const [prevKey, setPrevKey] = useState(currentKey);\n const [isMenuShown, setIsMenuShown] = useState(false);\n const [highlightedIndex, setHighlightedIndex] = useState<number \| null>(null);\n const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n\n const menuFontSizeOverride = slotStyles?.dropdown?.fontSize;\n useLayoutEffect(() => {\n const trigger = triggerRef.current;\n const menu = anchorRef.current;\n if (!isMenuShown \|\| !trigger \|\| !menu \|\| menuFontSizeOverride != null) return;\n menu.style.fontSize = window.getComputedStyle(trigger).fontSize;\n }, [isMenuShown, menuFontSizeOverride]);\n\n useFloatingPosition({\n isOpen: isMenuShown,\n triggerRef,\n anchorRef,\n panelRef: anchorRef,\n flipClassName: styles.dropdownFlip,\n });\n\n // Sync display text when the controlled key changes externally (e.g. parent reset).\n if (currentKey !== prevKey) {\n setPrevKey(currentKey);\n const match = items.find((item) => item.value === currentKey);\n if (match) setInputText(match.label ?? match.value);\n else if (allowCustomValue) setInputText(currentKey);\n }\n\n const currItems = useMemo(() => {\n const needle = inputText.toLowerCase();\n const matches: InputDropdownItem[] = [];\n for (const item of items) {\n if (!(item.label ?? item.value).toLowerCase().includes(needle)) continue;\n matches.push(item);\n if (maxItems > 0 && matches.length >= maxItems) break;\n }\n return matches;\n }, [items, inputText, maxItems]);\n\n const handleFocus = () => {\n if (readOnly) return;\n if (hideTimeoutRef.current) {\n clearTimeout(hideTimeoutRef.current);\n hideTimeoutRef.current = null;\n }\n setIsMenuShown(true);\n };\n\n const handleBlur = () => {\n if (fvRef.current) fvRef.current.touched = true;\n hideTimeoutRef.current = setTimeout(() => {\n setIsMenuShown(false);\n hideTimeoutRef.current = null;\n // Without custom values, uncommitted typed text is invalid — snap the\n // display back to the currently selected item's label.\n if (!allowCustomValue) setInputText(labelForKey(currentKey, items));\n }, 100);\n };\n\n const handleSelect = useCallback(\n (item: InputDropdownItem) => {\n setInputText(item.label ?? item.value);\n setIsMenuShown(false);\n setHighlightedIndex(null);\n if (formValidator) formValidator.set(item.value);\n if (onChange) onChange(item.value);\n onSelect(item.value);\n },\n [formValidator, onChange, onSelect],\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (readOnly) return;\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n setHighlightedIndex((idx) => (!idx ? null : idx - 1));\n } else if (event.key === 'ArrowDown') {\n event.preventDefault();\n setHighlightedIndex((idx) => (idx === null ? 0 : Math.min(idx + 1, currItems.length - 1)));\n } else if (event.key === 'Enter') {\n if (highlightedIndex !== null && currItems[highlightedIndex]) {\n handleSelect(currItems[highlightedIndex]);\n } else if (allowCustomValue) {\n setIsMenuShown(false);\n setHighlightedIndex(null);\n }\n }\n },\n [currItems, highlightedIndex, handleSelect, allowCustomValue, readOnly],\n );\n\n return (\n <div\n {...rest}\n ref={triggerRef}\n className={cx(styles.inputDropdown, classNames?.root, className)}\n style={{ ...slotStyles?.root, ...style }}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n >\n <Input\n // A combobox renders its own suggestion list; the browser's autofill dropdown\n // opens on top of it, so two lists compete for the same space.\n autoComplete='off'\n label={label}\n value={inputText}\n readOnly={readOnly}\n formValidator={null}\n isRequired={computedIsRequired}\n isValid={formValidator ? (formValidator.touched ? !formValidator.hasError() : true) : !error}\n errorMessage={\n formValidator ? (formValidator.touched ? (formValidator.getCurrentErrorMessage() ?? '') : '') : (error ?? '')\n }\n onChange={(text) => {\n setInputText(text);\n setHighlightedIndex(null);\n setIsMenuShown(true);\n if (allowCustomValue) {\n if (formValidator) formValidator.set(text);\n if (onChange) onChange(text);\n } else if (text === '') {\n if (formValidator) formValidator.set('');\n if (onChange) onChange('');\n onSelect('');\n } else {\n // Emit when the typed text exactly matches an item's label/value.\n const match = items.find((item) => (item.label ?? item.value).toLowerCase() === text.toLowerCase());\n if (match) {\n if (formValidator) formValidator.set(match.value);\n if (onChange) onChange(match.value);\n onSelect(match.value);\n }\n }\n }}\n placeholder={placeholder}\n />\n {isMenuShown && !readOnly && (\n <BodyEnd>\n <div\n ref={anchorRef}\n className={cx(styles.dropdown, styles.dropdownShown, classNames?.dropdown)}\n style={slotStyles?.dropdown}\n >\n <div className={styles.dropdownScroll}>\n {currItems.map((item, key) => (\n <div\n key={`${key}_${item.label}_${item.value}`}\n className={cx(\n styles.dropdownItem,\n highlightedIndex === key && styles.dropdownItemHighlighted,\n classNames?.item,\n )}\n style={slotStyles?.item}\n // Prevent the input from blurring before the click resolves.\n onMouseDown={(e) => e.preventDefault()}\n onClick={() => handleSelect(item)}\n >\n {item.label ?? item.value}\n </div>\n ))}\n </div>\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/esm/common/interactableDiv/interactableDiv.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"./interactableDiv.module.mjs";import t,{useCallback as n}from"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";var a=t.forwardRef(({className:t,children:a,onClick:o,onKeyDown:s,tabIndex:c,...l},u)=>{let d=n(e=>{(e.key===`Enter`||e.key===` `)&&(e.key===` `&&e.preventDefault(),o?.(e)),s?.(e)},[o,s]);return i(`div`,{className:r(e.interactableDiv,t),onClick:o,tabIndex:c===void 0?o?0:void 0:c??void 0,role:o?`button`:void 0,onKeyDown:d,ref:u,...l,children:a})});a.displayName=`InteractableDiv`;export{a as default};
+import e from"./interactableDiv.module.mjs";import{isSelfActivation as t}from"../utils/activationKey.mjs";import n,{useCallback as r}from"react";import i from"classnames";import{jsx as a}from"react/jsx-runtime";var o=n.forwardRef(({className:n,children:o,onClick:s,onKeyDown:c,tabIndex:l,...u},d)=>{let f=r(e=>{t(e)&&(e.key===` `&&e.preventDefault(),s?.(e)),c?.(e)},[s,c]);return a(`div`,{className:i(e.interactableDiv,n),onClick:s,tabIndex:l===void 0?s?0:void 0:l??void 0,role:s?`button`:void 0,onKeyDown:f,ref:d,...u,children:o})});o.displayName=`InteractableDiv`;export{o as default};
 //# sourceMappingURL=interactableDiv.mjs.map

package/dist/esm/common/interactableDiv/interactableDiv.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useCallback, type KeyboardEvent, type MouseEvent, type ReactElement } from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { DataProps } from '../types/baseProps.types';\n\ninterface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {\n tabIndex?: number \| null;\n}\n\nconst InteractableDiv = React.forwardRef<HTMLDivElement, Properties>(\n ({ className, children, onClick, onKeyDown, tabIndex, ...props }, ref): ReactElement => {\n const onKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e~~.key === 'Enter' \|\| e.key === ' '~~) {\n if (e.key === ' ') e.preventDefault();\n onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n }\n onKeyDown?.(e);\n },\n [onClick, onKeyDown],\n );\n\n // Compared to undefined rather than using ??, so an explicit null still means \"no tabindex\"\n // instead of falling through to the default.\n return (\n <div\n className={cx(styles.interactableDiv, className)}\n onClick={onClick}\n tabIndex={tabIndex === undefined ? (onClick ? 0 : undefined) : (tabIndex ?? undefined)}\n role={onClick ? 'button' : undefined}\n onKeyDown={onKeyDownHandler}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nInteractableDiv.displayName = 'InteractableDiv';\n\nexport default InteractableDiv;\n"],"mappings":"~~qJAUA~~,IAAM,EAAkB,EAAM,YAC3B,CAAE,YAAW,WAAU,UAAS,YAAW,WAAU,GAAG,GAAS,IAAsB,CACtF,IAAM,EAAmB,EACtB,GAAqC,~~EAChC~~,~~EAAE~~,~~MAAQ~~,~~SAAW~~,EAAE,MAAQ,~~OAC7B,EAAE,MAAQ,~~KAAK,EAAE,eAAe,EACpC,IAAU,CAA0C,GAEtD,IAAY,CAAC,CACf,EACA,CAAC,EAAS,CAAS,CACrB,EAIA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EACtC,UACT,SAAU,IAAa,IAAA,GAAa,EAAU,EAAI,IAAA,GAAc,GAAY,IAAA,GAC5E,KAAM,EAAU,SAAW,IAAA,GAC3B,UAAW,EACN,MACL,GAAI,EAEH,UACE,CAAA,CAET,CACF,EAEA,EAAgB,YAAc"}
1	+ {"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useCallback, type KeyboardEvent, type MouseEvent, type ReactElement } from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { DataProps } from '../types/baseProps.types';\nimport { isSelfActivation } from '../utils/activationKey';\n\ninterface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {\n tabIndex?: number \| null;\n}\n\nconst InteractableDiv = React.forwardRef<HTMLDivElement, Properties>(\n ({ className, children, onClick, onKeyDown, tabIndex, ...props }, ref): ReactElement => {\n const onKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (isSelfActivation(e)) {\n if (e.key === ' ') e.preventDefault();\n onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n }\n onKeyDown?.(e);\n },\n [onClick, onKeyDown],\n );\n\n // Compared to undefined rather than using ??, so an explicit null still means \"no tabindex\"\n // instead of falling through to the default.\n return (\n <div\n className={cx(styles.interactableDiv, className)}\n onClick={onClick}\n tabIndex={tabIndex === undefined ? (onClick ? 0 : undefined) : (tabIndex ?? undefined)}\n role={onClick ? 'button' : undefined}\n onKeyDown={onKeyDownHandler}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nInteractableDiv.displayName = 'InteractableDiv';\n\nexport default InteractableDiv;\n"],"mappings":"mNAWA,IAAM,EAAkB,EAAM,YAC3B,CAAE,YAAW,WAAU,UAAS,YAAW,WAAU,GAAG,GAAS,IAAsB,CACtF,IAAM,EAAmB,EACtB,GAAqC,CAChC,EAAiB,CAAC,IAChB,EAAE,MAAQ,KAAK,EAAE,eAAe,EACpC,IAAU,CAA0C,GAEtD,IAAY,CAAC,CACf,EACA,CAAC,EAAS,CAAS,CACrB,EAIA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EACtC,UACT,SAAU,IAAa,IAAA,GAAa,EAAU,EAAI,IAAA,GAAc,GAAY,IAAA,GAC5E,KAAM,EAAU,SAAW,IAAA,GAC3B,UAAW,EACN,MACL,GAAI,EAEH,UACE,CAAA,CAET,CACF,EAEA,EAAgB,YAAc"}

package/dist/esm/common/kanbanBoard/kanbanBoard.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":[".board {\n display: flex;\n gap: var(--spacing-s);\n overflow-x: auto;\n align-items: flex-start;\n width: 100%;\n}\n\n.column {\n background: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n box-shadow: var(--card-shadow);\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n border: 2px solid transparent;\n transition:\n border-color 0.15s ease,\n background 0.15s ease;\n\n &-empty {\n flex: 0 1 0;\n min-width: var(--kanban-empty-column-width, 140px);\n }\n\n &-over {\n border-color: var(--primary-lighter);\n background: var(--background-accent);\n }\n\n &-over-limit {\n border-color: var(--warn-color);\n }\n\n /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n dropped into this column's card list), even though both are dashed-free solid borders here;\n kept as a separate class so consumers can restyle one without affecting the other. /\n &-drop-target {\n border-color: var(--primary-color);\n background: var(--background-accent);\n }\n\n / Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n consumer-controlled and often meant to stay fully interactive even while the column itself\n is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n &-disabled &-items {\n opacity: 0.6;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-drag-overlay {\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n min-width: 220px;\n }\n\n &-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-s);\n padding: var(--spacing-m) var(--spacing-l);\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n font-size: var(--header-small-font-size);\n font-weight: var(--header-font-weight);\n color: var(--text-color);\n border-bottom: 1px solid var(--border-color);\n\n &-reorderable {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-count {\n flex-shrink: 0;\n font-size: var(--default-font-size);\n font-weight: var(--default-font-weight);\n color: var(--text-dark);\n\n &-over {\n color: var(--warn-color);\n font-weight: var(--header-font-weight);\n }\n }\n\n &-trailing {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n }\n }\n\n &-items {\n padding: var(--spacing-m);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-m);\n min-height: 80px;\n flex: 1;\n }\n\n &-placeholder {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--text-dark);\n font-size: var(--default-font-size);\n }\n\n &-loading-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-s) 0;\n }\n\n &-loading-spinner {\n width: 2.~~6rem~~;\n height: 2.~~6rem~~;\n }\n}\n\n.item {\n cursor: grab;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-handled {\n cursor: default;\n touch-action: auto;\n\n &:active {\n cursor: default;\n }\n\n [data-drag-handle] {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n }\n\n [data-drag-handle]:active {\n cursor: grabbing;\n }\n }\n\n &-disabled {\n cursor: not-allowed;\n\n &:active {\n cursor: not-allowed;\n }\n\n [data-drag-handle] {\n cursor: not-allowed;\n }\n\n [data-drag-handle]:active {\n cursor: not-allowed;\n }\n }\n}\n\n.dragOverlay {\n border-radius: var(--default-border-radius);\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"kanbanBoard.module.mjs","names":[],"sources":["../../../../package/common/kanbanBoard/kanbanBoard.module.pcss"],"sourcesContent":[".board {\n display: flex;\n gap: var(--spacing-s);\n overflow-x: auto;\n align-items: flex-start;\n width: 100%;\n}\n\n.column {\n background: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n box-shadow: var(--card-shadow);\n flex: 1 1 0;\n display: flex;\n flex-direction: column;\n border: 2px solid transparent;\n transition:\n border-color 0.15s ease,\n background 0.15s ease;\n\n &-empty {\n flex: 0 1 0;\n min-width: var(--kanban-empty-column-width, 140px);\n }\n\n &-over {\n border-color: var(--primary-lighter);\n background: var(--background-accent);\n }\n\n &-over-limit {\n border-color: var(--warn-color);\n }\n\n /* A whole column being dragged over this one, reordering — distinct from -over (a card being\n dropped into this column's card list), even though both are dashed-free solid borders here;\n kept as a separate class so consumers can restyle one without affecting the other. /\n &-drop-target {\n border-color: var(--primary-color);\n background: var(--background-accent);\n }\n\n / Dims only the cards area, not the header — header actions (e.g. an \"add card\" button) are\n consumer-controlled and often meant to stay fully interactive even while the column itself\n is frozen for dragging, and opacity on an ancestor can't be undone by a child's own opacity. */\n &-disabled &-items {\n opacity: 0.6;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-drag-overlay {\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n min-width: 220px;\n }\n\n &-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-s);\n padding: var(--spacing-m) var(--spacing-l);\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n font-size: var(--header-small-font-size);\n font-weight: var(--header-font-weight);\n color: var(--text-color);\n border-bottom: 1px solid var(--border-color);\n\n &-reorderable {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n }\n\n &-title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-count {\n flex-shrink: 0;\n font-size: var(--default-font-size);\n font-weight: var(--default-font-weight);\n color: var(--text-dark);\n\n &-over {\n color: var(--warn-color);\n font-weight: var(--header-font-weight);\n }\n }\n\n &-trailing {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n align-items: center;\n gap: var(--spacing-s);\n }\n }\n\n &-items {\n padding: var(--spacing-m);\n display: flex;\n flex-direction: column;\n gap: var(--spacing-m);\n min-height: 80px;\n flex: 1;\n }\n\n &-placeholder {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: var(--text-dark);\n font-size: var(--default-font-size);\n }\n\n &-loading-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-s) 0;\n }\n\n &-loading-spinner {\n width: 2.6em;\n height: 2.6em;\n }\n}\n\n.item {\n cursor: grab;\n touch-action: none;\n\n &:active {\n cursor: grabbing;\n }\n\n &-dragging {\n opacity: 0.4;\n }\n\n &-handled {\n cursor: default;\n touch-action: auto;\n\n &:active {\n cursor: default;\n }\n\n [data-drag-handle] {\n cursor: grab;\n -webkit-tap-highlight-color: transparent;\n touch-action: none;\n }\n\n [data-drag-handle]:active {\n cursor: grabbing;\n }\n }\n\n &-disabled {\n cursor: not-allowed;\n\n &:active {\n cursor: not-allowed;\n }\n\n [data-drag-handle] {\n cursor: not-allowed;\n }\n\n [data-drag-handle]:active {\n cursor: not-allowed;\n }\n }\n}\n\n.dragOverlay {\n border-radius: var(--default-border-radius);\n cursor: grabbing;\n box-shadow:\n 0 10px 30px rgb(0 0 0 / 25%),\n var(--card-shadow);\n}\n"],"mappings":""}

package/dist/esm/common/optionPicker/optionPicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker {\n display: flex;\n width: 100%;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n transition: border-color 0.15s;\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n keyboard focus — same as the per-option ring below, not on a mouse click. /\n &:has(:focus-visible) {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition:\n left 0.25s ease-in-out,\n width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n align-content: center;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: var(--option-picker-padding, var(--spacing-m));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n box-sizing: border-box;\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n\n / The active option sits on the primary-color chip, so the default\n primary-color outline above is invisible against it — use the\n on-primary color instead, same as the option's own text/icon color. */\n &:focus-visible {\n outline-color: var(--text-on-primary);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker {\n display: flex;\n width: 100%;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n transition: border-color 0.15s;\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n /* :has(:focus-visible) rather than :focus-within, so this only lights up on\n keyboard focus — same as the per-option ring below, not on a mouse click. /\n &:has(:focus-visible) {\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n\n / Must follow the shorthand above, which resets background-image. /\n background-image: var(--primary-gradient, none);\n border-radius: var(--default-border-radius);\n transition:\n left 0.25s ease-in-out,\n width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n align-content: center;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: var(--option-picker-padding, var(--spacing-m));\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n box-sizing: border-box;\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n\n / The active option sits on the primary-color chip, so the default\n primary-color outline above is invisible against it — use the\n on-primary color instead, same as the option's own text/icon color. */\n &:focus-visible {\n outline-color: var(--text-on-primary);\n }\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/otpInput/otpInput.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"otpInput.module.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.module.pcss"],"sourcesContent":["@keyframes otpInputShake {\n 10%,\n 90% {\n transform: translateX(-1px);\n }\n\n 20%,\n 80% {\n transform: translateX(2px);\n }\n\n 30%,\n 50%,\n 70% {\n transform: translateX(-4px);\n }\n\n 40%,\n 60% {\n transform: translateX(4px);\n }\n}\n\n.otpInput {\n display: inline-flex;\n flex-direction: column;\n row-gap: ~~8px~~;\n\n &-label {\n font-size: var(--default-font-size);\n color: var(--text-color);\n }\n\n &-requiredMark {\n color: var(--required-mark-color, var(--error-color));\n }\n\n &-boxes {\n display: flex;\n align-items: center;\n column-gap: ~~8px~~;\n\n &-shake {\n animation: otpInputShake 0.4s ease-in-out;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n &-boxWrapper {\n display: flex;\n align-items: center;\n column-gap: ~~8px~~;\n }\n\n &-box {\n width: ~~40px~~;\n height: ~~48px~~;\n text-align: center;\n font-size: 1.~~25rem~~;\n font-weight: 600;\n font-family: var(--themed-font, inherit);\n color: var(--text-color);\n background: var(--input-background, var(--background));\n border: 1.~~5px~~ solid var(--border-color);\n border-radius: var(--default-border-radius);\n outline: none;\n transition:\n border-color 0.15s,\n box-shadow 0.15s;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 20%, transparent);\n }\n\n &-filled {\n border-color: var(--primary-lighter, var(--border-color));\n }\n\n &-error {\n border-color: var(--error-color);\n\n &:focus {\n border-color: var(--error-color);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);\n }\n }\n\n &:disabled {\n color: var(--disabled-font-color);\n background: var(--disabled-input-color);\n cursor: not-allowed;\n }\n }\n\n &-separator {\n width: ~~10px~~;\n height: 1.~~5px~~;\n background: var(--border-color);\n flex-shrink: 0;\n }\n\n &-disabled &-label {\n color: var(--disabled-font-color);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"otpInput.module.mjs","names":[],"sources":["../../../../package/common/otpInput/otpInput.module.pcss"],"sourcesContent":["@keyframes otpInputShake {\n 10%,\n 90% {\n transform: translateX(-1px);\n }\n\n 20%,\n 80% {\n transform: translateX(2px);\n }\n\n 30%,\n 50%,\n 70% {\n transform: translateX(-4px);\n }\n\n 40%,\n 60% {\n transform: translateX(4px);\n }\n}\n\n.otpInput {\n display: inline-flex;\n flex-direction: column;\n row-gap: 0.5em;\n\n &-label {\n font-size: var(--default-font-size);\n color: var(--text-color);\n }\n\n &-requiredMark {\n color: var(--required-mark-color, var(--error-color));\n }\n\n &-boxes {\n display: flex;\n align-items: center;\n column-gap: 0.5em;\n\n &-shake {\n animation: otpInputShake 0.4s ease-in-out;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n }\n }\n\n &-boxWrapper {\n display: flex;\n align-items: center;\n column-gap: 0.5em;\n }\n\n /* These em are against this box's OWN 1.25em font, not the root's: 40px and 48px of 20px. */\n &-box {\n width: 2em;\n height: 2.4em;\n text-align: center;\n font-size: 1.25em;\n font-weight: 600;\n font-family: var(--themed-font, inherit);\n color: var(--text-color);\n background: var(--input-background, var(--background));\n border: 0.075em solid var(--border-color);\n border-radius: var(--default-border-radius);\n outline: none;\n transition:\n border-color 0.15s,\n box-shadow 0.15s;\n\n &:focus {\n border-color: var(--focus-border-color, var(--primary-color));\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-border-color, var(--primary-color)) 20%, transparent);\n }\n\n &-filled {\n border-color: var(--primary-lighter, var(--border-color));\n }\n\n &-error {\n border-color: var(--error-color);\n\n &:focus {\n border-color: var(--error-color);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-color) 20%, transparent);\n }\n }\n\n &:disabled {\n color: var(--disabled-font-color);\n background: var(--disabled-input-color);\n cursor: not-allowed;\n }\n }\n\n &-separator {\n width: 0.625em;\n height: 0.09375em;\n background: var(--border-color);\n flex-shrink: 0;\n }\n\n &-disabled &-label {\n color: var(--disabled-font-color);\n }\n}\n"],"mappings":""}

package/dist/esm/common/pagination/pagination.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.module.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.module.pcss"],"sourcesContent":[".pagination {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--pagination-gap, 4px);\n\n &-item,\n &-control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n padding: 0 6px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-color);\n font: inherit;\n font-size: var(--default-font-size);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition:\n background-color 0.15s,\n color 0.15s,\n border-color 0.15s;\n\n &:hover:not(:disabled) {\n background: var(--background-accent);\n }\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n }\n\n /* Ties on specificity with the shared `&-item` rule above and wins on source order, so the\n active page keeps its fill through hover too rather than falling back to the hover surface. /\n &-item-active {\n border-color: var(--pagination-active-background, var(--primary-color));\n background: var(--pagination-active-background, var(--primary-color));\n color: var(--pagination-active-color, var(--text-on-primary));\n\n &:hover:not(:disabled) {\n background: var(--pagination-active-background, var(--primary-color));\n }\n\n / The active item sits on the primary fill, where the default primary-color focus ring is\n invisible — same swap OptionPicker makes for its selected option. */\n &:focus-visible {\n outline-color: var(--pagination-active-color, var(--text-on-primary));\n }\n }\n\n &-ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n color: var(--text-dark);\n user-select: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"pagination.module.mjs","names":[],"sources":["../../../../package/common/pagination/pagination.module.pcss"],"sourcesContent":[".pagination {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--pagination-gap, 4px);\n\n &-item,\n &-control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n padding: 0 6px;\n border: 1px solid var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-color);\n font: inherit;\n font-size: var(--default-font-size);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition:\n background-color 0.15s,\n color 0.15s,\n border-color 0.15s;\n\n &:hover:not(:disabled) {\n background: var(--background-accent);\n }\n\n &:focus-visible {\n outline: var(--focus-border-color, var(--primary-color)) solid 2px;\n outline-offset: -2px;\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n }\n\n /* Ties on specificity with the shared `&-item` rule above and wins on source order, so the\n active page keeps its fill through hover too rather than falling back to the hover surface. /\n &-item-active {\n border-color: var(--pagination-active-background, var(--primary-color));\n background: var(--pagination-active-background, var(--primary-color));\n\n / Must follow the shorthand above, which resets background-image. /\n background-image: var(--primary-gradient, none);\n color: var(--pagination-active-color, var(--text-on-primary));\n\n &:hover:not(:disabled) {\n background: var(--pagination-active-background, var(--primary-color));\n background-image: var(--primary-gradient, none);\n }\n\n / The active item sits on the primary fill, where the default primary-color focus ring is\n invisible — same swap OptionPicker makes for its selected option. */\n &:focus-visible {\n outline-color: var(--pagination-active-color, var(--text-on-primary));\n }\n }\n\n &-ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--pagination-size, 36px);\n height: var(--pagination-size, 36px);\n color: var(--text-dark);\n user-select: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/planCanvas/planCanvas.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`planCanvas_7XTdG`,t=`planCanvas-screen_lk83X`,n=`planCanvas-underlay_rpzSl`,r=`planCanvas-grid_49CmH`,i=`planCanvas-rooms_UyjEC`,a=`planCanvas-roomFill_LXlOf`,o=`planCanvas-roomFill-interactive_JSU1E`,s=`planCanvas-roomFill-hovered_7ZXgf`,c=`planCanvas-roomLabel_GrzE3`,l=`planCanvas-roomName_kHAtD`,u=`planCanvas-roomArea_X1Tal`,d=`planCanvas-walls_G9vXB`,f=`planCanvas-wallOutline_eWEN-`,p=`planCanvas-wallFill_iKHyE`,m=`planCanvas-wallCaps_ZpLG4`,h=`planCanvas-roomEdgeCaps_5Y7lq`,g=`planCanvas-roomEdgeSelected_wQk6B`,_=`planCanvas-roomEdgeOutline_Y1ZwL`,v=`planCanvas-roomEdgeFill_Qr9p-`,y=`planCanvas-wallSelected_vFNw8`,b=`planCanvas-wallHovered_CFIAR`,x=`planCanvas-openings_1fyX4`,S=`planCanvas-opening-selected_Wgl4r`,C=`planCanvas-doorLeaf_1BEkI`,w=`planCanvas-doorSwing_QCc5i`,T=`planCanvas-windowPane_5q9oQ`,E=`planCanvas-opening-hovered_NGK0O`,D=`planCanvas-opening-hit_frRch`,O=`planCanvas-opening-hit-interactive_D4ZUY`,k=`planCanvas-opening-outline_HS2wY`,A=`planCanvas-jamb_e-I9r`,j=`planCanvas-jamb-highlighted_rWYxZ`,M=`planCanvas-selection_0a31R`,N={planCanvas:e,"planCanvas-screen":`planCanvas-screen_lk83X`,planCanvasScreen:t,"planCanvas-underlay":`planCanvas-underlay_rpzSl`,planCanvasUnderlay:n,"planCanvas-grid":`planCanvas-grid_49CmH`,planCanvasGrid:r,"planCanvas-rooms":`planCanvas-rooms_UyjEC`,planCanvasRooms:i,"planCanvas-roomFill":`planCanvas-roomFill_LXlOf`,planCanvasRoomFill:a,"planCanvas-roomFill-interactive":`planCanvas-roomFill-interactive_JSU1E`,planCanvasRoomFillInteractive:o,"planCanvas-roomFill-hovered":`planCanvas-roomFill-hovered_7ZXgf`,planCanvasRoomFillHovered:s,"planCanvas-roomLabel":`planCanvas-roomLabel_GrzE3`,planCanvasRoomLabel:c,"planCanvas-roomName":`planCanvas-roomName_kHAtD`,planCanvasRoomName:l,"planCanvas-roomArea":`planCanvas-roomArea_X1Tal`,planCanvasRoomArea:u,"planCanvas-walls":`planCanvas-walls_G9vXB`,planCanvasWalls:d,"planCanvas-wallOutline":`planCanvas-wallOutline_eWEN-`,planCanvasWallOutline:f,"planCanvas-wallFill":`planCanvas-wallFill_iKHyE`,planCanvasWallFill:p,"planCanvas-wallCaps":`planCanvas-wallCaps_ZpLG4`,planCanvasWallCaps:m,"planCanvas-roomEdgeCaps":`planCanvas-roomEdgeCaps_5Y7lq`,planCanvasRoomEdgeCaps:h,"planCanvas-roomEdgeSelected":`planCanvas-roomEdgeSelected_wQk6B`,planCanvasRoomEdgeSelected:g,"planCanvas-roomEdgeOutline":`planCanvas-roomEdgeOutline_Y1ZwL`,planCanvasRoomEdgeOutline:_,"planCanvas-roomEdgeFill":`planCanvas-roomEdgeFill_Qr9p-`,planCanvasRoomEdgeFill:v,"planCanvas-wallSelected":`planCanvas-wallSelected_vFNw8`,planCanvasWallSelected:y,"planCanvas-wallHovered":`planCanvas-wallHovered_CFIAR`,planCanvasWallHovered:b,"planCanvas-openings":`planCanvas-openings_1fyX4`,planCanvasOpenings:x,"planCanvas-opening-selected":`planCanvas-opening-selected_Wgl4r`,planCanvasOpeningSelected:S,"planCanvas-doorLeaf":`planCanvas-doorLeaf_1BEkI`,planCanvasDoorLeaf:C,"planCanvas-doorSwing":`planCanvas-doorSwing_QCc5i`,planCanvasDoorSwing:w,"planCanvas-windowPane":`planCanvas-windowPane_5q9oQ`,planCanvasWindowPane:T,"planCanvas-opening-hovered":`planCanvas-opening-hovered_NGK0O`,planCanvasOpeningHovered:E,"planCanvas-opening-hit":`planCanvas-opening-hit_frRch`,planCanvasOpeningHit:D,"planCanvas-opening-hit-interactive":`planCanvas-opening-hit-interactive_D4ZUY`,planCanvasOpeningHitInteractive:O,"planCanvas-opening-outline":`planCanvas-opening-outline_HS2wY`,planCanvasOpeningOutline:k,"planCanvas-jamb":`planCanvas-jamb_e-I9r`,planCanvasJamb:A,"planCanvas-jamb-highlighted":`planCanvas-jamb-highlighted_rWYxZ`,planCanvasJambHighlighted:j,"planCanvas-selection":`planCanvas-selection_0a31R`,planCanvasSelection:M};export{N as default,e as planCanvas,C as planCanvasDoorLeaf,w as planCanvasDoorSwing,r as planCanvasGrid,A as planCanvasJamb,j as planCanvasJambHighlighted,D as planCanvasOpeningHit,O as planCanvasOpeningHitInteractive,E as planCanvasOpeningHovered,k as planCanvasOpeningOutline,S as planCanvasOpeningSelected,x as planCanvasOpenings,u as planCanvasRoomArea,h as planCanvasRoomEdgeCaps,v as planCanvasRoomEdgeFill,_ as planCanvasRoomEdgeOutline,g as planCanvasRoomEdgeSelected,a as planCanvasRoomFill,s as planCanvasRoomFillHovered,o as planCanvasRoomFillInteractive,c as planCanvasRoomLabel,l as planCanvasRoomName,i as planCanvasRooms,t as planCanvasScreen,M as planCanvasSelection,n as planCanvasUnderlay,m as planCanvasWallCaps,p as planCanvasWallFill,b as planCanvasWallHovered,f as planCanvasWallOutline,y as planCanvasWallSelected,d as planCanvasWalls,T as planCanvasWindowPane};
+var e=`planCanvas_7XTdG`,t=`planCanvas-screen_lk83X`,n=`planCanvas-underlay_rpzSl`,r=`planCanvas-grid_49CmH`,i=`planCanvas-rooms_UyjEC`,a=`planCanvas-roomFill_LXlOf`,o=`planCanvas-roomFill-interactive_JSU1E`,s=`planCanvas-roomFill-hovered_7ZXgf`,c=`planCanvas-roomLabel_GrzE3`,l=`planCanvas-roomName_kHAtD`,u=`planCanvas-roomArea_X1Tal`,d=`planCanvas-walls_G9vXB`,f=`planCanvas-wallOutline_eWEN-`,p=`planCanvas-wallFill_iKHyE`,m=`planCanvas-roomEdgeSelected_wQk6B`,h=`planCanvas-wallCaps_ZpLG4`,g=`planCanvas-roomEdgeCaps_5Y7lq`,_=`planCanvas-roomEdgeOutline_Y1ZwL`,v=`planCanvas-roomEdgeFill_Qr9p-`,y=`planCanvas-wallSelected_vFNw8`,b=`planCanvas-wallHovered_CFIAR`,x=`planCanvas-openings_1fyX4`,S=`planCanvas-opening-selected_Wgl4r`,C=`planCanvas-doorLeaf_1BEkI`,w=`planCanvas-doorSwing_QCc5i`,T=`planCanvas-windowPane_5q9oQ`,E=`planCanvas-opening-hovered_NGK0O`,D=`planCanvas-opening-hit_frRch`,O=`planCanvas-opening-hit-interactive_D4ZUY`,k=`planCanvas-opening-outline_HS2wY`,A=`planCanvas-jamb_e-I9r`,j=`planCanvas-jamb-highlighted_rWYxZ`,M=`planCanvas-selection_0a31R`,N={planCanvas:e,"planCanvas-screen":`planCanvas-screen_lk83X`,planCanvasScreen:t,"planCanvas-underlay":`planCanvas-underlay_rpzSl`,planCanvasUnderlay:n,"planCanvas-grid":`planCanvas-grid_49CmH`,planCanvasGrid:r,"planCanvas-rooms":`planCanvas-rooms_UyjEC`,planCanvasRooms:i,"planCanvas-roomFill":`planCanvas-roomFill_LXlOf`,planCanvasRoomFill:a,"planCanvas-roomFill-interactive":`planCanvas-roomFill-interactive_JSU1E`,planCanvasRoomFillInteractive:o,"planCanvas-roomFill-hovered":`planCanvas-roomFill-hovered_7ZXgf`,planCanvasRoomFillHovered:s,"planCanvas-roomLabel":`planCanvas-roomLabel_GrzE3`,planCanvasRoomLabel:c,"planCanvas-roomName":`planCanvas-roomName_kHAtD`,planCanvasRoomName:l,"planCanvas-roomArea":`planCanvas-roomArea_X1Tal`,planCanvasRoomArea:u,"planCanvas-walls":`planCanvas-walls_G9vXB`,planCanvasWalls:d,"planCanvas-wallOutline":`planCanvas-wallOutline_eWEN-`,planCanvasWallOutline:f,"planCanvas-wallFill":`planCanvas-wallFill_iKHyE`,planCanvasWallFill:p,"planCanvas-roomEdgeSelected":`planCanvas-roomEdgeSelected_wQk6B`,planCanvasRoomEdgeSelected:m,"planCanvas-wallCaps":`planCanvas-wallCaps_ZpLG4`,planCanvasWallCaps:h,"planCanvas-roomEdgeCaps":`planCanvas-roomEdgeCaps_5Y7lq`,planCanvasRoomEdgeCaps:g,"planCanvas-roomEdgeOutline":`planCanvas-roomEdgeOutline_Y1ZwL`,planCanvasRoomEdgeOutline:_,"planCanvas-roomEdgeFill":`planCanvas-roomEdgeFill_Qr9p-`,planCanvasRoomEdgeFill:v,"planCanvas-wallSelected":`planCanvas-wallSelected_vFNw8`,planCanvasWallSelected:y,"planCanvas-wallHovered":`planCanvas-wallHovered_CFIAR`,planCanvasWallHovered:b,"planCanvas-openings":`planCanvas-openings_1fyX4`,planCanvasOpenings:x,"planCanvas-opening-selected":`planCanvas-opening-selected_Wgl4r`,planCanvasOpeningSelected:S,"planCanvas-doorLeaf":`planCanvas-doorLeaf_1BEkI`,planCanvasDoorLeaf:C,"planCanvas-doorSwing":`planCanvas-doorSwing_QCc5i`,planCanvasDoorSwing:w,"planCanvas-windowPane":`planCanvas-windowPane_5q9oQ`,planCanvasWindowPane:T,"planCanvas-opening-hovered":`planCanvas-opening-hovered_NGK0O`,planCanvasOpeningHovered:E,"planCanvas-opening-hit":`planCanvas-opening-hit_frRch`,planCanvasOpeningHit:D,"planCanvas-opening-hit-interactive":`planCanvas-opening-hit-interactive_D4ZUY`,planCanvasOpeningHitInteractive:O,"planCanvas-opening-outline":`planCanvas-opening-outline_HS2wY`,planCanvasOpeningOutline:k,"planCanvas-jamb":`planCanvas-jamb_e-I9r`,planCanvasJamb:A,"planCanvas-jamb-highlighted":`planCanvas-jamb-highlighted_rWYxZ`,planCanvasJambHighlighted:j,"planCanvas-selection":`planCanvas-selection_0a31R`,planCanvasSelection:M};export{N as default,e as planCanvas,C as planCanvasDoorLeaf,w as planCanvasDoorSwing,r as planCanvasGrid,A as planCanvasJamb,j as planCanvasJambHighlighted,D as planCanvasOpeningHit,O as planCanvasOpeningHitInteractive,E as planCanvasOpeningHovered,k as planCanvasOpeningOutline,S as planCanvasOpeningSelected,x as planCanvasOpenings,u as planCanvasRoomArea,g as planCanvasRoomEdgeCaps,v as planCanvasRoomEdgeFill,_ as planCanvasRoomEdgeOutline,m as planCanvasRoomEdgeSelected,a as planCanvasRoomFill,s as planCanvasRoomFillHovered,o as planCanvasRoomFillInteractive,c as planCanvasRoomLabel,l as planCanvasRoomName,i as planCanvasRooms,t as planCanvasScreen,M as planCanvasSelection,n as planCanvasUnderlay,h as planCanvasWallCaps,p as planCanvasWallFill,b as planCanvasWallHovered,f as planCanvasWallOutline,y as planCanvasWallSelected,d as planCanvasWalls,T as planCanvasWindowPane};
 //# sourceMappingURL=planCanvas.module.mjs.map

package/dist/esm/common/planCanvas/planCanvas.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"planCanvas.module.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.module.pcss"],"sourcesContent":["/*\n Every colour comes from a theme variable. The wall fill/outline pair in particular\n * must stay two distinct surfaces, or the two-pass stroke has nothing to reveal.\n /\n\n.planCanvas {\n display: block;\n touch-action: none;\n user-select: none;\n background: var(--plan-canvas-background, var(--background));\n\n &-screen {\n pointer-events: none;\n }\n\n / The storey below, for lining walls up between floors. Faint and dashed so it reads\n as a tracing under the drawing rather than as part of it, and never picks up a\n pointer: it is not this floor's geometry. /\n &-underlay {\n pointer-events: none;\n\n line {\n stroke: var(--plan-underlay-color, var(--text-dark));\n opacity: 0.28;\n stroke-dasharray: 6 5;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n }\n }\n\n &-grid {\n pointer-events: none;\n\n line {\n stroke: var(--plan-grid-color, var(--text-color));\n opacity: 0.1;\n }\n }\n\n / ── Rooms ── /\n\n &-rooms {\n pointer-events: auto;\n }\n\n &-roomFill {\n fill: var(--plan-room-fill, var(--background-accent));\n stroke: none;\n transition:\n fill 0.12s ease-out,\n opacity 0.12s ease-out;\n\n &-interactive {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:focus-visible {\n outline: none;\n stroke: var(--focus-border-color, var(--primary-color));\n stroke-width: 2;\n vector-effect: non-scaling-stroke;\n }\n }\n\n / Hover tints the floor, selection colours the walls: two channels, so both can be\n read at once. A fill answers \"which room\" instantly, where a shared wall is\n ambiguous between the rooms either side of it. /\n &-hovered {\n fill: var(--plan-room-fill-hover, var(--background-accent-light));\n }\n }\n\n &-roomLabel {\n pointer-events: none;\n }\n\n &-roomName {\n fill: var(--text-color);\n font-size: 13px;\n font-weight: 600;\n\n / A halo, so a label stays legible over any room colour a consumer sets. /\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n &-roomArea {\n fill: var(--text-dark);\n font-size: 11px;\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n / ── Walls ── /\n\n &-walls {\n pointer-events: none;\n }\n\n /\n * A ~~mitred~~ ~~corner~~ ~~runs~~ to 1 / ~~sin(angle~~ / 2) ~~times~~ ~~the~~ ~~stroke~~ ~~width, so~~ an acute ~~one~~\n * ~~grows~~ ~~without~~ ~~bound~~ ~~and~~ ~~reads~~ as a ~~spike~~. 4 ~~keeps~~ a ~~true~~ ~~point~~ ~~down~~ to ~~about~~ 29\n * ~~degrees~~ ~~and~~ ~~caps~~ it at ~~twice~~ the ~~wall~~ ~~thickness,~~ ~~which~~ ~~covers~~ ~~every~~ ~~angle~~ ~~a building~~\n * ~~plausibly~~ ~~has;~~ ~~SVG~~ ~~bevels~~ ~~anything~~ ~~sharper~~.\n /\n &-wallOutline path {\n fill: none;\n stroke: var(--plan-wall-~~outline~~, ~~var(--text-color~~));\n stroke-~~linecap~~: ~~butt;\n stroke~~-~~linejoin:~~ ~~miter~~;\n stroke~~-miterlimit~~: var(--plan-wall-~~miter~~-~~limit, 4~~);\n }\n\n / Must match the outline pass exactly: the two are the same shape, and the visible\n outline is what is left of the first after this one covers its middle. /\n &-wallFill path {\n ~~fill: none;\n~~ stroke: var(--plan-wall-fill~~, var(--text~~-~~dark~~));\n ~~stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n~~ }\n\n &-wallCaps line {\n stroke: var(--plan-wall-~~outline, var(--text~~-~~color~~));\n stroke-linecap: butt;\n }\n\n / Drawn from the same geometry as the walls, so it inherits their corners and their\n gaps at doors. /\n &-roomEdgeCaps line {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n stroke-linecap: butt;\n }\n\n ~~&-roomEdgeSelected path {\n fill: none;\n stroke-linecap: butt;\n stroke-linejoin: miter;\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n~~ / Edge darker than body, so the wall keeps the crisp outline every other wall has\n rather than turning into a flat slab, and reads as one highlighted object. /\n &-roomEdgeSelected {\n .planCanvas-roomEdgeOutline {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n\n .planCanvas-roomEdgeFill {\n stroke: var(--plan-room-edge-selected-fill, var(--primary-lighter));\n }\n }\n\n &-wallSelected {\n stroke: var(--primary-color);\n opacity: 0.45;\n stroke-linecap: butt;\n }\n\n &-wallHovered {\n stroke: var(--primary-lighter);\n opacity: 0.35;\n stroke-linecap: butt;\n }\n\n / ── Openings ── /\n\n &-openings {\n pointer-events: auto;\n }\n\n &-opening {\n /\n * State lives on the group so the whole symbol responds, not just the box drawn round\n * it by `-outline`: a door reads as selected when its leaf and swing do, the way the\n * room fill does, rather than by acquiring a rectangle.\n */\n &-selected {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-color);\n }\n\n .planCanvas-doorSwing {\n opacity: 0.9;\n }\n }\n\n &-hovered {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-lighter, var(--primary-color));\n }\n }\n\n &-hit {\n fill: transparent;\n stroke: none;\n pointer-events: none;\n\n &-interactive {\n pointer-events: auto;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-outline {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 2;\n }\n }\n\n &-jamb {\n stroke: var(--plan-wall-~~outline, var(--text~~-~~color~~));\n stroke-linecap: butt;\n\n &-highlighted {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n }\n\n &-doorLeaf {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-linecap: butt;\n }\n\n &-doorSwing {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-dasharray: 6 4;\n opacity: 0.6;\n }\n\n &-windowPane {\n stroke: var(--plan-window-color, var(--info-color));\n stroke-linecap: butt;\n }\n\n &-selection {\n pointer-events: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"planCanvas.module.mjs","names":[],"sources":["../../../../package/common/planCanvas/planCanvas.module.pcss"],"sourcesContent":["/*\n Every colour comes from a theme variable. The wall fill/outline pair in particular\n * must stay two distinct surfaces, or the two-pass stroke has nothing to reveal.\n /\n\n.planCanvas {\n /\n * The wall body and its edge, resolved once: the outline pass, the caps and the jamb\n * faces are the same edge of the same object and must not drift apart. Both mix towards\n * the canvas rather than sitting at the text colour, so a wall reads as mass on the\n * floor instead of as ink drawn over it. `--plan-wall-outline` and `--plan-wall-fill`\n * are still the knobs a consumer sets.\n /\n --plan-wall-edge-resolved: var(--plan-wall-outline, color-mix(in oklab, var(--text-color) 38%, var(--background)));\n --plan-wall-fill-resolved: var(--plan-wall-fill, color-mix(in oklab, var(--text-color) 58%, var(--background)));\n\n display: block;\n touch-action: none;\n user-select: none;\n background: var(--plan-canvas-background, var(--background));\n\n &-screen {\n pointer-events: none;\n }\n\n / The storey below, for lining walls up between floors. Faint and dashed so it reads\n as a tracing under the drawing rather than as part of it, and never picks up a\n pointer: it is not this floor's geometry. /\n &-underlay {\n pointer-events: none;\n\n line {\n stroke: var(--plan-underlay-color, var(--text-dark));\n opacity: 0.28;\n stroke-dasharray: 6 5;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n }\n }\n\n &-grid {\n pointer-events: none;\n\n line {\n stroke: var(--plan-grid-color, var(--text-color));\n opacity: 0.1;\n }\n }\n\n / ── Rooms ── /\n\n &-rooms {\n pointer-events: auto;\n }\n\n &-roomFill {\n fill: var(--plan-room-fill, var(--background-accent));\n stroke: none;\n transition:\n fill 0.12s ease-out,\n opacity 0.12s ease-out;\n\n &-interactive {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:focus-visible {\n outline: none;\n stroke: var(--focus-border-color, var(--primary-color));\n stroke-width: 2;\n vector-effect: non-scaling-stroke;\n }\n }\n\n / Hover tints the floor, selection colours the walls: two channels, so both can be\n read at once. A fill answers \"which room\" instantly, where a shared wall is\n ambiguous between the rooms either side of it. /\n &-hovered {\n fill: var(--plan-room-fill-hover, var(--background-accent-light));\n }\n }\n\n &-roomLabel {\n pointer-events: none;\n }\n\n &-roomName {\n fill: var(--text-color);\n font-size: 13px;\n font-weight: 600;\n\n / A halo, so a label stays legible over any room colour a consumer sets. /\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n &-roomArea {\n fill: var(--text-dark);\n font-size: 11px;\n paint-order: stroke;\n stroke: var(--background);\n stroke-width: 3px;\n stroke-linejoin: round;\n }\n\n / ── Walls ── /\n\n &-walls {\n pointer-events: none;\n }\n\n /\n * Round joins, so the outer corners of the building come out softened and an acute\n * corner cannot fire a mitre spike out of the junction at all. `--plan-wall-join: miter`\n * restores the drafting corner, and `--plan-wall-miter-limit` then caps how far the\n * spike may run. The selection highlight shares the rule: it is drawn from the same\n * geometry over the same walls, so a different join would leave crescents showing.\n /\n &-wallOutline path,\n &-wallFill path,\n &-roomEdgeSelected path {\n fill: none;\n stroke-linecap: butt;\n stroke-linejoin: var(--plan-wall-join, round);\n stroke-miterlimit: var(--plan-wall-miter-limit, 4);\n }\n\n &-wallOutline path {\n stroke: var(--plan-wall-edge-resolved);\n }\n\n / Must match the outline pass exactly: the two are the same shape, and the visible\n outline is what is left of the first after this one covers its middle. /\n &-wallFill path {\n stroke: var(--plan-wall-fill-resolved);\n }\n\n &-wallCaps line {\n stroke: var(--plan-wall-edge-resolved);\n stroke-linecap: butt;\n }\n\n / Drawn from the same geometry as the walls, so it inherits their corners and their\n gaps at doors. /\n &-roomEdgeCaps line {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n stroke-linecap: butt;\n }\n\n / Edge darker than body, so the wall keeps the crisp outline every other wall has\n rather than turning into a flat slab, and reads as one highlighted object. /\n &-roomEdgeSelected {\n .planCanvas-roomEdgeOutline {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n\n .planCanvas-roomEdgeFill {\n stroke: var(--plan-room-edge-selected-fill, var(--primary-lighter));\n }\n }\n\n &-wallSelected {\n stroke: var(--primary-color);\n opacity: 0.45;\n stroke-linecap: butt;\n }\n\n &-wallHovered {\n stroke: var(--primary-lighter);\n opacity: 0.35;\n stroke-linecap: butt;\n }\n\n / ── Openings ── /\n\n &-openings {\n pointer-events: auto;\n }\n\n &-opening {\n /\n * State lives on the group so the whole symbol responds, not just the box drawn round\n * it by `-outline`: a door reads as selected when its leaf and swing do, the way the\n * room fill does, rather than by acquiring a rectangle.\n /\n &-selected {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-color);\n }\n\n .planCanvas-doorSwing {\n opacity: 0.9;\n }\n }\n\n &-hovered {\n .planCanvas-doorLeaf,\n .planCanvas-doorSwing,\n .planCanvas-windowPane {\n stroke: var(--primary-lighter, var(--primary-color));\n }\n }\n\n &-hit {\n fill: transparent;\n stroke: none;\n pointer-events: none;\n\n &-interactive {\n pointer-events: auto;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-outline {\n fill: none;\n stroke: var(--primary-color);\n stroke-width: 2;\n }\n }\n\n / The wall seen in section, so it takes the body colour rather than the edge one: at a\n doorway it is the only thing standing for the wall, and the edge tone disappears. */\n &-jamb {\n stroke: var(--plan-wall-fill-resolved);\n stroke-linecap: butt;\n\n &-highlighted {\n stroke: var(--plan-room-edge-selected, var(--primary-color));\n }\n }\n\n &-doorLeaf {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-linecap: butt;\n }\n\n &-doorSwing {\n fill: none;\n stroke: var(--plan-door-color, var(--text-dark));\n stroke-dasharray: 6 4;\n opacity: 0.6;\n }\n\n &-windowPane {\n stroke: var(--plan-window-color, var(--info-color));\n stroke-linecap: butt;\n }\n\n &-selection {\n pointer-events: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/progressBar/progressBar.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e=`progressBar_LO0sX`,t=`progressBar-fill_rt32j`,n=`progressBar-fill-end_71wL3`,r=`progressBar-label_jWud2`,i=`progressBar-label-custom_sSump`,a={progressBar:e,"progressBar-fill":`progressBar-fill_rt32j`,progressBarFill:t,"progressBar-fill-end":`progressBar-fill-end_71wL3`,progressBarFillEnd:n,"progressBar-label":`progressBar-label_jWud2`,progressBarLabel:r,"progressBar-label-custom":`progressBar-label-custom_sSump`,progressBarLabelCustom:i};export{a as default,e as progressBar,t as progressBarFill,n as progressBarFillEnd,r as progressBarLabel,i as progressBarLabelCustom};
+var e=`progressBar_LO0sX`,t=`progressBar-fill_rt32j`,n=`progressBar-fill-end_71wL3`,r=`progressBar-label_jWud2`,i={progressBar:e,"progressBar-fill":`progressBar-fill_rt32j`,progressBarFill:t,"progressBar-fill-end":`progressBar-fill-end_71wL3`,progressBarFillEnd:n,"progressBar-label":`progressBar-label_jWud2`,progressBarLabel:r};export{i as default,e as progressBar,t as progressBarFill,n as progressBarFillEnd,r as progressBarLabel};
 //# sourceMappingURL=progressBar.module.mjs.map

package/dist/esm/common/progressBar/progressBar.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar {\n min-width: 100px;\n min-height: 10px;\n background-color: var(--progress-bar-track-color, var(--background-accent-light));\n border-radius: var(--default-border-radius);\n overflow: hidden;\n display: flex;\n align-items: stretch;\n\n &-fill {\n background-color: var(--primary-color);\n width: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n transition: width 0.3s ease;\n transform: translateZ(0);\n container-type: inline-size;\n\n &-end {\n border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n }\n }\n\n &-label {\n color: ~~white~~;\n font-size: 12px;\n padding: 0 min(5px, 4cqw);\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n~~\n &-custom {\n mix-blend-mode: difference;\n }\n~~ }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar {\n min-width: 100px;\n min-height: 10px;\n background-color: var(--progress-bar-track-color, var(--background-accent-light));\n border-radius: var(--default-border-radius);\n overflow: hidden;\n display: flex;\n align-items: stretch;\n\n &-fill {\n background-color: var(--primary-color);\n background-image: var(--primary-gradient, none);\n width: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n transition: width 0.3s ease;\n transform: translateZ(0);\n container-type: inline-size;\n\n &-end {\n border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n }\n }\n\n &-label {\n color: var(--text-on-primary);\n font-size: 12px;\n padding: 0 min(5px, 4cqw);\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n"],"mappings":""}

package/dist/esm/common/radioGroup/radioGroup.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import{RadioGroupOrientation as n}from"./radioGroup.types.mjs";import r from"./radioGroup.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{options:d=[],value:f,defaultValue:p,onChange:m=()=>{},orientation:h=n.Vertical,disabled:g=!1,size:_=`18px`,tabIndex:v=0,formValidator:y=null,errorMessage:b=``,isValid:x=!0,className:S,style:C,classNames:w,styles:T,...E}=e(`RadioGroup`,u),D=a([]),O=a(y);i(()=>{O.current=y});let[,k]=o(0),[A,j]=o(p),[M,N]=o(!1),[P,F]=o(!1);i(()=>{if(!y)return;y.validate();let e=()=>k(e=>e+1);return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let I=y?y.touched&&y.hasError():!x||!!b,L=y?y.getCurrentErrorMessage():b||``,R=f!==void 0&&!y,z=y?y.value:R?f:A;function B(e,t){y?y.set(e):R||j(e),m(e,t)}function V(e){e.currentTarget.contains(e.relatedTarget)||(N(!1),O.current&&(O.current.touched=!0))}let H=d.findIndex(e=>e.value===z),U=d.findIndex(e=>!e.disabled),W=H>=0?H:U;function G(e){D.current[e]?.focus()}function K(e,t,n){if(g||d.length===0)return;let r=t;for(let t=0;t<d.length;t++)if(r=(r+e+d.length)%d.length,!d[r].disabled){G(r),B(d[r].value,n);return}}function q(e,t){let n=d[t];switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),K(1,t,e);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),K(-1,t,e);break;case` `:case`Enter`:e.preventDefault(),!g&&!n.disabled&&B(n.value,e)}}return l(`div`,{...E,role:`radiogroup`,"aria-orientation":h,"aria-disabled":g||void 0,"aria-invalid":I||void 0,className:s(r.radioGroup,h===n.Horizontal&&r.radioGroupHorizontal,g&&r.radioGroupDisabled,I&&r.radioGroupError,S,w?.root),style:{"--radio-size":_,...C,...T?.root},onFocus:()=>N(!0),onBlur:V,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[d.map((e,t)=>{let n=e.value===z,i=g||!!e.disabled;return l(`div`,{ref:e=>{D.current[t]=e},role:`radio`,"aria-checked":n,"aria-disabled":i||void 0,tabIndex:i?-1:t===W?v:-1,className:s(r.radioGroupOption,n&&r.radioGroupOptionChecked,i&&r.radioGroupOptionDisabled,w?.option),style:T?.option,onClick:()=>{i||B(e.value)},onKeyDown:e=>q(e,t),children:[c(`div`,{className:s(r.radioGroupRadio,n&&r.radioGroupRadioChecked,w?.radio),style:T?.radio,children:c(`div`,{className:s(r.radioGroupDot,n&&r.radioGroupDotChecked,w?.dot),style:T?.dot})}),(e.label??e.value)!==``&&l(`div`,{className:r.radioGroupText,children:[c(`div`,{className:s(r.radioGroupLabel,w?.label),style:T?.label,children:e.label??e.value}),e.description!=null&&c(`div`,{className:s(r.radioGroupDescription,w?.description),style:T?.description,children:e.description})]})]},String(e.value))}),c(t,{variant:`error`,message:L,isVisible:I&&(M||P)})]})}export{u as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import{RadioGroupOrientation as n}from"./radioGroup.types.mjs";import r from"./radioGroup.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{options:d=[],value:f,defaultValue:p,onChange:m=()=>{},orientation:h=n.Vertical,disabled:g=!1,size:_,tabIndex:v=0,formValidator:y=null,errorMessage:b=``,isValid:x=!0,className:S,style:C,classNames:w,styles:T,...E}=e(`RadioGroup`,u),D=a([]),O=a(y);i(()=>{O.current=y});let[,k]=o(0),[A,j]=o(p),[M,N]=o(!1),[P,F]=o(!1);i(()=>{if(!y)return;y.validate();let e=()=>k(e=>e+1);return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let I=y?y.touched&&y.hasError():!x||!!b,L=y?y.getCurrentErrorMessage():b||``,R=f!==void 0&&!y,z=y?y.value:R?f:A;function B(e,t){y?y.set(e):R||j(e),m(e,t)}function V(e){e.currentTarget.contains(e.relatedTarget)||(N(!1),O.current&&(O.current.touched=!0))}let H=d.findIndex(e=>e.value===z),U=d.findIndex(e=>!e.disabled),W=H>=0?H:U;function G(e){D.current[e]?.focus()}function K(e,t,n){if(g||d.length===0)return;let r=t;for(let t=0;t<d.length;t++)if(r=(r+e+d.length)%d.length,!d[r].disabled){G(r),B(d[r].value,n);return}}function q(e,t){let n=d[t];switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),K(1,t,e);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),K(-1,t,e);break;case` `:case`Enter`:e.preventDefault(),!g&&!n.disabled&&B(n.value,e)}}return l(`div`,{...E,role:`radiogroup`,"aria-orientation":h,"aria-disabled":g||void 0,"aria-invalid":I||void 0,className:s(r.radioGroup,h===n.Horizontal&&r.radioGroupHorizontal,g&&r.radioGroupDisabled,I&&r.radioGroupError,S,w?.root),style:{..._?{"--radio-size":_}:null,...C,...T?.root},onFocus:()=>N(!0),onBlur:V,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[d.map((e,t)=>{let n=e.value===z,i=g||!!e.disabled;return l(`div`,{ref:e=>{D.current[t]=e},role:`radio`,"aria-checked":n,"aria-disabled":i||void 0,tabIndex:i?-1:t===W?v:-1,className:s(r.radioGroupOption,n&&r.radioGroupOptionChecked,i&&r.radioGroupOptionDisabled,w?.option),style:T?.option,onClick:()=>{i||B(e.value)},onKeyDown:e=>q(e,t),children:[c(`div`,{className:s(r.radioGroupRadio,n&&r.radioGroupRadioChecked,w?.radio),style:T?.radio,children:c(`div`,{className:s(r.radioGroupDot,n&&r.radioGroupDotChecked,w?.dot),style:T?.dot})}),(e.label??e.value)!==``&&l(`div`,{className:r.radioGroupText,children:[c(`div`,{className:s(r.radioGroupLabel,w?.label),style:T?.label,children:e.label??e.value}),e.description!=null&&c(`div`,{className:s(r.radioGroupDescription,w?.description),style:T?.description,children:e.description})]})]},String(e.value))}),c(t,{variant:`error`,message:L,isVisible:I&&(M||P)})]})}export{u as default};
 //# sourceMappingURL=radioGroup.mjs.map

package/dist/esm/common/radioGroup/radioGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radioGroup.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useComponentDefaults } from '../configProvider';\nimport { RadioGroupOrientation, type RadioGroupProps, type RadioValue } from './radioGroup.types';\nimport styles from './radioGroup.module.pcss';\n\nfunction RadioGroup(props: RadioGroupProps): ReactElement {\n const {\n options = [],\n value,\n defaultValue,\n onChange = () => {},\n orientation = RadioGroupOrientation.Vertical,\n disabled = false,\n size ~~= '18px'~~,\n tabIndex = 0,\n formValidator = null,\n errorMessage = '',\n isValid = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RadioGroup', props);\n\n const optionRefs = useRef<(HTMLDivElement \| null)[]>([]);\n const fvRef = useRef(formValidator);\n useEffect(() => {\n fvRef.current = formValidator;\n });\n const [, forceUpdate] = useState(0);\n const [internalValue, setInternalValue] = useState<RadioValue \| undefined>(defaultValue);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| '';\n\n const isControlled = value !== undefined && !formValidator;\n const currentValue = (formValidator ? formValidator.value : isControlled ? value : internalValue) as\n \| RadioValue\n \| undefined;\n\n function select(next: RadioValue, event?: React.MouseEvent \| React.KeyboardEvent) {\n if (formValidator) formValidator.set(next);\n else if (!isControlled) setInternalValue(next);\n onChange(next, event);\n }\n\n function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n if (event.currentTarget.contains(event.relatedTarget as Node \| null)) return;\n setIsFocused(false);\n if (fvRef.current) fvRef.current.touched = true;\n }\n\n const selectedIndex = options.findIndex((o) => o.value === currentValue);\n const firstEnabledIndex = options.findIndex((o) => !o.disabled);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;\n\n function focusOption(index: number) {\n optionRefs.current[index]?.focus();\n }\n\n function moveTo(step: 1 \| -1, fromIndex: number, event: React.KeyboardEvent) {\n if (disabled \|\| options.length === 0) return;\n let i = fromIndex;\n for (let count = 0; count < options.length; count++) {\n i = (i + step + options.length) % options.length;\n if (!options[i].disabled) {\n focusOption(i);\n select(options[i].value, event);\n return;\n }\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent, index: number) {\n const option = options[index];\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n if (!disabled && !option.disabled) select(option.value, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role='radiogroup'\n aria-orientation={orientation}\n aria-disabled={disabled \|\| undefined}\n aria-invalid={hasError \|\| undefined}\n className={cx(\n styles.radioGroup,\n orientation === RadioGroupOrientation.Horizontal && styles.radioGroupHorizontal,\n disabled && styles.radioGroupDisabled,\n hasError && styles.radioGroupError,\n className,\n classNames?.root,\n )}\n style={{ '--radio-size': size, ...style, ...slotStyles?.root } as React.CSSProperties}\n onFocus={() => setIsFocused(true)}\n onBlur={handleBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {options.map((option, index) => {\n const checked = option.value === currentValue;\n const optionDisabled = disabled \|\| !!option.disabled;\n return (\n <div\n key={String(option.value)}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n role='radio'\n aria-checked={checked}\n aria-disabled={optionDisabled \|\| undefined}\n tabIndex={optionDisabled ? -1 : index === rovingIndex ? tabIndex : -1}\n className={cx(\n styles.radioGroupOption,\n checked && styles.radioGroupOptionChecked,\n optionDisabled && styles.radioGroupOptionDisabled,\n classNames?.option,\n )}\n style={slotStyles?.option}\n onClick={() => {\n if (!optionDisabled) select(option.value);\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n >\n <div\n className={cx(styles.radioGroupRadio, checked && styles.radioGroupRadioChecked, classNames?.radio)}\n style={slotStyles?.radio}\n >\n <div\n className={cx(styles.radioGroupDot, checked && styles.radioGroupDotChecked, classNames?.dot)}\n style={slotStyles?.dot}\n />\n </div>\n {(option.label ?? option.value) !== '' && (\n <div className={styles.radioGroupText}>\n <div className={cx(styles.radioGroupLabel, classNames?.label)} style={slotStyles?.label}>\n {option.label ?? option.value}\n </div>\n {option.description != null && (\n <div\n className={cx(styles.radioGroupDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {option.description}\n </div>\n )}\n </div>\n )}\n </div>\n );\n })}\n <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused \|\| isHovered)} />\n </div>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"sWAQA,SAAS,EAAW,EAAsC,CACxD,GAAM,CACJ,UAAU,CAAC,EACX,QACA,eACA,eAAiB,CAAC,EAClB,cAAc,EAAsB,SACpC,WAAW,GACX,~~OAAO~~,~~OACP,~~WAAW,EACX,gBAAgB,KAChB,eAAe,GACf,UAAU,GACV,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,aAAc,CAAK,EAEtC,EAAa,EAAkC,CAAC,CAAC,EACjD,EAAQ,EAAO,CAAa,EAClC,MAAgB,CACd,EAAM,QAAU,CAClB,CAAC,EACD,GAAM,EAAG,GAAe,EAAS,CAAC,EAC5B,CAAC,EAAe,GAAoB,EAAiC,CAAY,EACjF,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,EAAW,GAAgB,EAAS,EAAK,EAEhD,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,EAAc,SAAS,EACvB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,IAAM,EAAW,EAAgB,EAAc,SAAW,EAAc,SAAS,EAAI,CAAC,GAAW,CAAC,CAAC,EAC7F,EAAY,EAAgB,EAAc,uBAAuB,EAAI,GAAgB,GAErF,EAAe,IAAU,IAAA,IAAa,CAAC,EACvC,EAAgB,EAAgB,EAAc,MAAQ,EAAe,EAAQ,EAInF,SAAS,EAAO,EAAkB,EAAgD,CAC5E,EAAe,EAAc,IAAI,CAAI,EAC/B,GAAc,EAAiB,CAAI,EAC7C,EAAS,EAAM,CAAK,CACtB,CAEA,SAAS,EAAW,EAAyC,CACvD,EAAM,cAAc,SAAS,EAAM,aAA4B,IACnE,EAAa,EAAK,EACd,EAAM,UAAS,EAAM,QAAQ,QAAU,IAC7C,CAEA,IAAM,EAAgB,EAAQ,UAAW,GAAM,EAAE,QAAU,CAAY,EACjE,EAAoB,EAAQ,UAAW,GAAM,CAAC,EAAE,QAAQ,EACxD,EAAc,GAAiB,EAAI,EAAgB,EAEzD,SAAS,EAAY,EAAe,CAClC,EAAW,QAAQ,EAAM,EAAE,MAAM,CACnC,CAEA,SAAS,EAAO,EAAc,EAAmB,EAA4B,CAC3E,GAAI,GAAY,EAAQ,SAAW,EAAG,OACtC,IAAI,EAAI,EACR,IAAK,IAAI,EAAQ,EAAG,EAAQ,EAAQ,OAAQ,IAE1C,GADA,GAAK,EAAI,EAAO,EAAQ,QAAU,EAAQ,OACtC,CAAC,EAAQ,EAAE,CAAC,SAAU,CACxB,EAAY,CAAC,EACb,EAAO,EAAQ,EAAE,CAAC,MAAO,CAAK,EAC9B,MACF,CAEJ,CAEA,SAAS,EAAc,EAA4B,EAAe,CAChE,IAAM,EAAS,EAAQ,GACvB,OAAQ,EAAM,IAAd,CACE,IAAK,YACL,IAAK,aACH,EAAM,eAAe,EACrB,EAAO,EAAG,EAAO,CAAK,EACtB,MACF,IAAK,UACL,IAAK,YACH,EAAM,eAAe,EACrB,EAAO,GAAI,EAAO,CAAK,EACvB,MACF,IAAK,IACL,IAAK,QACH,EAAM,eAAe,EACjB,CAAC,GAAY,CAAC,EAAO,UAAU,EAAO,EAAO,MAAO,CAAK,CAIjE,CACF,CAEA,OACE,EAAC,MAAD,CACE,GAAI,EACJ,KAAK,aACL,mBAAkB,EAClB,gBAAe,GAAY,IAAA,GAC3B,eAAc,GAAY,IAAA,GAC1B,UAAW,EACT,EAAO,WACP,IAAgB,EAAsB,YAAc,EAAO,qBAC3D,GAAY,EAAO,mBACnB,GAAY,EAAO,gBACnB,EACA,GAAY,IACd,EACA,MAAO,CAAE,eAAgB,~~EAAM~~,GAAG,EAAO,GAAG,GAAY,IAAK,~~EAC7D~~,YAAe,EAAa,EAAI,EAChC,OAAQ,EACR,iBAAoB,EAAa,EAAI,EACrC,iBAAoB,EAAa,EAAK,EAlBxC,SAAA,CAoBG,EAAQ,KAAK,EAAQ,IAAU,CAC9B,IAAM,EAAU,EAAO,QAAU,EAC3B,EAAiB,GAAY,CAAC,CAAC,EAAO,SAC5C,OACE,EAAC,MAAD,CAEE,IAAM,GAAO,CACX,EAAW,QAAQ,GAAS,CAC9B,EACA,KAAK,QACL,eAAc,EACd,gBAAe,GAAkB,IAAA,GACjC,SAAU,EAAiB,GAAK,IAAU,EAAc,EAAW,GACnE,UAAW,EACT,EAAO,iBACP,GAAW,EAAO,wBAClB,GAAkB,EAAO,yBACzB,GAAY,MACd,EACA,MAAO,GAAY,OACnB,YAAe,CACR,GAAgB,EAAO,EAAO,KAAK,CAC1C,EACA,UAAY,GAAM,EAAc,EAAG,CAAK,EAnB1C,SAAA,CAqBE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,GAAW,EAAO,uBAAwB,GAAY,KAAK,EACjG,MAAO,GAAY,MAEnB,SAAA,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAW,EAAO,qBAAsB,GAAY,GAAG,EAC3F,MAAO,GAAY,GACpB,CAAA,CACE,CAAA,GACH,EAAO,OAAS,EAAO,SAAW,IAClC,EAAC,MAAD,CAAK,UAAW,EAAO,eAAvB,SAAA,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,KAAK,EAAG,MAAO,GAAY,MAC/E,SAAA,EAAO,OAAS,EAAO,KACrB,CAAA,EACJ,EAAO,aAAe,MACrB,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,sBAAuB,GAAY,WAAW,EACnE,MAAO,GAAY,YAElB,SAAA,EAAO,WACL,CAAA,CAEJ,CAEJ,CAAA,CAAA,CA5CE,EAAA,OAAO,EAAO,KAAK,CA4CrB,CAET,CAAC,EACD,EAAC,EAAD,CAAS,QAAQ,QAAQ,QAAS,EAAW,UAAW,IAAa,GAAa,EAAa,CAAA,CAC5F,GAET"}
1	+ {"version":3,"file":"radioGroup.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useComponentDefaults } from '../configProvider';\nimport { RadioGroupOrientation, type RadioGroupProps, type RadioValue } from './radioGroup.types';\nimport styles from './radioGroup.module.pcss';\n\nfunction RadioGroup(props: RadioGroupProps): ReactElement {\n const {\n options = [],\n value,\n defaultValue,\n onChange = () => {},\n orientation = RadioGroupOrientation.Vertical,\n disabled = false,\n size,\n tabIndex = 0,\n formValidator = null,\n errorMessage = '',\n isValid = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RadioGroup', props);\n\n const optionRefs = useRef<(HTMLDivElement \| null)[]>([]);\n const fvRef = useRef(formValidator);\n useEffect(() => {\n fvRef.current = formValidator;\n });\n const [, forceUpdate] = useState(0);\n const [internalValue, setInternalValue] = useState<RadioValue \| undefined>(defaultValue);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = formValidator ? formValidator.touched && formValidator.hasError() : !isValid \|\| !!errorMessage;\n const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage \|\| '';\n\n const isControlled = value !== undefined && !formValidator;\n const currentValue = (formValidator ? formValidator.value : isControlled ? value : internalValue) as\n \| RadioValue\n \| undefined;\n\n function select(next: RadioValue, event?: React.MouseEvent \| React.KeyboardEvent) {\n if (formValidator) formValidator.set(next);\n else if (!isControlled) setInternalValue(next);\n onChange(next, event);\n }\n\n function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n if (event.currentTarget.contains(event.relatedTarget as Node \| null)) return;\n setIsFocused(false);\n if (fvRef.current) fvRef.current.touched = true;\n }\n\n const selectedIndex = options.findIndex((o) => o.value === currentValue);\n const firstEnabledIndex = options.findIndex((o) => !o.disabled);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;\n\n function focusOption(index: number) {\n optionRefs.current[index]?.focus();\n }\n\n function moveTo(step: 1 \| -1, fromIndex: number, event: React.KeyboardEvent) {\n if (disabled \|\| options.length === 0) return;\n let i = fromIndex;\n for (let count = 0; count < options.length; count++) {\n i = (i + step + options.length) % options.length;\n if (!options[i].disabled) {\n focusOption(i);\n select(options[i].value, event);\n return;\n }\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent, index: number) {\n const option = options[index];\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n if (!disabled && !option.disabled) select(option.value, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role='radiogroup'\n aria-orientation={orientation}\n aria-disabled={disabled \|\| undefined}\n aria-invalid={hasError \|\| undefined}\n className={cx(\n styles.radioGroup,\n orientation === RadioGroupOrientation.Horizontal && styles.radioGroupHorizontal,\n disabled && styles.radioGroupDisabled,\n hasError && styles.radioGroupError,\n className,\n classNames?.root,\n )}\n style={{ ...(size ? { '--radio-size': size } : null), ...style, ...slotStyles?.root } as React.CSSProperties}\n onFocus={() => setIsFocused(true)}\n onBlur={handleBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {options.map((option, index) => {\n const checked = option.value === currentValue;\n const optionDisabled = disabled \|\| !!option.disabled;\n return (\n <div\n key={String(option.value)}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n role='radio'\n aria-checked={checked}\n aria-disabled={optionDisabled \|\| undefined}\n tabIndex={optionDisabled ? -1 : index === rovingIndex ? tabIndex : -1}\n className={cx(\n styles.radioGroupOption,\n checked && styles.radioGroupOptionChecked,\n optionDisabled && styles.radioGroupOptionDisabled,\n classNames?.option,\n )}\n style={slotStyles?.option}\n onClick={() => {\n if (!optionDisabled) select(option.value);\n }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n >\n <div\n className={cx(styles.radioGroupRadio, checked && styles.radioGroupRadioChecked, classNames?.radio)}\n style={slotStyles?.radio}\n >\n <div\n className={cx(styles.radioGroupDot, checked && styles.radioGroupDotChecked, classNames?.dot)}\n style={slotStyles?.dot}\n />\n </div>\n {(option.label ?? option.value) !== '' && (\n <div className={styles.radioGroupText}>\n <div className={cx(styles.radioGroupLabel, classNames?.label)} style={slotStyles?.label}>\n {option.label ?? option.value}\n </div>\n {option.description != null && (\n <div\n className={cx(styles.radioGroupDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {option.description}\n </div>\n )}\n </div>\n )}\n </div>\n );\n })}\n <Tooltip variant='error' message={errorText} isVisible={hasError && (isFocused \|\| isHovered)} />\n </div>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"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"}

package/dist/esm/common/radioGroup/radioGroup.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n --radio-size: ~~18px~~;\n\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: ~~12px~~;\n width: fit-content;\n\n &-horizontal {\n flex-flow: row wrap;\n gap: ~~20px~~;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: ~~10px~~;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n ~~font-size: var(--default-font-size);\n~~\n &:focus-visible {\n outline: none;\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: 50%;\n border: 1.~~8px~~ solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: ~~1px~~;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--radio-size) * 0.5);\n height: calc(var(--radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: ~~2px~~;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n /* The base is declared here rather than only on the option, so every em below resolves\n against the theme's text size instead of whatever the group happens to sit in. At a 16px\n base these are the 18px dot, 12px row gap and 10px label gap it has always had. /\n font-size: var(--default-font-size);\n\n --custom-radio-size: var(--radio-size, 1.125em);\n --custom-radio-gap: var(--radio-gap, 0.625em);\n\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 0.75em;\n width: fit-content;\n\n &-horizontal {\n flex-flow: row wrap;\n gap: 1.25em;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: var(--custom-radio-gap);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n\n &:focus-visible {\n outline: none;\n border-color: var(--focus-border-color, var(--primary-color));\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--custom-radio-size);\n height: var(--custom-radio-size);\n border-radius: 50%;\n border: 0.1125em solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 0.0625em;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--custom-radio-size) 0.5);\n height: calc(var(--custom-radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 0.125em;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n"],"mappings":""}

package/dist/esm/common/rating/rating.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n width: fit-content;\n gap: 0.15em;\n font-size: ~~20px~~;\n outline: none;\n touch-action: pan-y;\n user-select: none;\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-lighter);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-disabled,\n &-readOnly {\n pointer-events: none;\n }\n\n &-item {\n position: relative;\n display: inline-flex;\n width: 1em;\n height: 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-iconEmpty {\n width: 1em;\n height: 1em;\n color: var(--rating-empty-color, var(--background-accent-light));\n }\n\n &-iconFilledClip {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-iconFilled {\n width: 1em;\n height: 1em;\n color: var(--rating-filled-color, var(--primary-color));\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"rating.module.mjs","names":[],"sources":["../../../../package/common/rating/rating.module.pcss"],"sourcesContent":[".rating {\n /* calc, not em: this is the element that sets the base, so an em here would measure\n whatever the rating happens to sit in instead of the theme's text size. /\n --custom-rating-size: var(--rating-size, calc(var(--default-font-size) 1.25));\n\n display: inline-flex;\n align-items: center;\n align-self: flex-start;\n width: fit-content;\n gap: 0.15em;\n font-size: var(--custom-rating-size);\n outline: none;\n touch-action: pan-y;\n user-select: none;\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-lighter);\n border-radius: var(--default-border-radius);\n }\n\n &-disabled {\n opacity: 0.5;\n }\n\n &-disabled,\n &-readOnly {\n pointer-events: none;\n }\n\n &-item {\n position: relative;\n display: inline-flex;\n width: 1em;\n height: 1em;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-iconEmpty {\n width: 1em;\n height: 1em;\n color: var(--rating-empty-color, var(--background-accent-light));\n }\n\n &-iconFilledClip {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n }\n\n &-iconFilled {\n width: 1em;\n height: 1em;\n color: var(--rating-filled-color, var(--primary-color));\n }\n}\n"],"mappings":""}