@vuu-ui/vuu-ui-controls 2.1.19-beta.2 → 2.1.19-beta.3

package/src/column-picker/ColumnSearch.css.js

@@ -1,61 +0,0 @@
-const css = `
-.vuuColumnSearch {
-  --vuuList-borderWidth: 0;
-  --vuuColumnListItem-border: none;
-  --vuuMeasuredContainer-flex: 1 1 1px;
-  background: var(--salt-container-primary-background);
-  border: solid 1px var(--salt-container-primary-borderColor);
-  border-radius: 4px;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 4px 12px 12px;
-  display: flex;
-
-  & .vuuIcon, & .saltSwitch, & .vuuColumnList-header, & .vuuColumnList-colHeadings {
-    display: none;
-  }
-
-  & .vuuList-viewport {
-    padding-right: var(--salt-spacing-100);
-  }
-
-  & .vuuColumnListItem {
-    padding-left: var(--salt-spacing-100);
-  }
-
-  & ::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-
-  & ::-webkit-scrollbar-track {
-    background: none;
-    margin-top: 15px;
-    margin-bottom: 15px;
-  }
-
-  & ::-webkit-scrollbar-thumb {
-    background: #d9d9d9;
-    border-radius: 4px;
-  }
-}
-
-.vuuColumnSearch-inputField {
-  --vuu-icon-size: 16px;
-  flex: 0 0 40px;
-  margin-right: 8px;
-}
-
-.vuuColumnSearch-list {
-  --vuuMeasuredContainer-flex: 1 1 1px;
-  background-color: var(--salt-container-primary-background);
-  flex: auto;
-}
-
-.vuuColumnSearch .vuuTableCell {
-  padding: 0;
-}
-
-
-`;
-export default css;

package/src/column-picker/ColumnSearch.js

@@ -1,66 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox, Input, ListBox, Option } from "@salt-ds/core";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { forwardRef, useCallback, useRef } from "react";
-import ColumnSearch_0 from "./ColumnSearch.css";
-import { queryClosest } from "@vuu-ui/vuu-utils";
-const classBase = "vuuColumnSearch";
-const searchIcon = /*#__PURE__*/ jsx("span", {
-    "data-icon": "search"
-});
-const ColumnSearch_ColumnSearch = /*#__PURE__*/ forwardRef(function({ autoFocus = false, className, columns, onChange, onSelectionChange, selected, ...htmlAttributes }, forwardedRef) {
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-column-picker",
-        css: ColumnSearch_0,
-        window: targetWindow
-    });
-    const selectedValues = useRef([]);
-    const searchCallbackRef = useCallback((el)=>{
-        setTimeout(()=>{
-            el?.querySelector("input")?.focus();
-        }, 100);
-    }, []);
-    const handleChange = useCallback((e)=>{
-        const input = e.target;
-        const { columnName } = queryClosest(input, "[data-column-name]", true).dataset;
-        if (columnName) {
-            if (input.checked) selectedValues.current = selectedValues.current.concat(columnName);
-            else selectedValues.current = selectedValues.current.filter((val)=>val !== columnName);
-            onSelectionChange?.(e, selectedValues.current);
-        }
-    }, [
-        onSelectionChange
-    ]);
-    return /*#__PURE__*/ jsxs("div", {
-        ...htmlAttributes,
-        className: clsx(classBase, className),
-        ref: forwardedRef,
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: `${classBase}-inputField`,
-                children: /*#__PURE__*/ jsx(Input, {
-                    startAdornment: searchIcon,
-                    ref: autoFocus ? searchCallbackRef : null
-                })
-            }),
-            /*#__PURE__*/ jsx(ListBox, {
-                children: columns.map((column)=>/*#__PURE__*/ jsxs(Option, {
-                        "data-column-name": column,
-                        value: column,
-                        children: [
-                            /*#__PURE__*/ jsx(Checkbox, {
-                                onChange: handleChange
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                children: column
-                            })
-                        ]
-                    }, column))
-            })
-        ]
-    });
-});
-export { ColumnSearch_ColumnSearch as ColumnSearch };

package/src/column-picker/index.js

@@ -1,2 +0,0 @@
-export * from "./ColumnPicker.js";
-export * from "./ColumnSearch.js";

package/src/column-picker/moving-window.js

@@ -1,49 +0,0 @@
-import { WindowRange, metadataKeys } from "@vuu-ui/vuu-utils";
-const { SELECTED: SELECTED } = metadataKeys;
-class MovingWindow {
-    data;
-    rowCount = 0;
-    range;
-    constructor({ from, to }){
-        this.range = new WindowRange(from, to);
-        this.data = new Array(to - from);
-        this.rowCount = 0;
-    }
-    setRowCount = (rowCount)=>{
-        if (rowCount < this.data.length) this.data.length = rowCount;
-        this.rowCount = rowCount;
-    };
-    add(data) {
-        const [index] = data;
-        if (this.isWithinRange(index)) {
-            const internalIndex = index - this.range.from;
-            this.data[internalIndex] = data;
-        }
-    }
-    getAtIndex(index) {
-        return this.range.isWithin(index) && null != this.data[index - this.range.from] ? this.data[index - this.range.from] : void 0;
-    }
-    isWithinRange(index) {
-        return this.range.isWithin(index);
-    }
-    setRange({ from, to }) {
-        if (from !== this.range.from || to !== this.range.to) {
-            const [overlapFrom, overlapTo] = this.range.overlap(from, to);
-            const newData = new Array(Math.max(0, to - from));
-            for(let i = overlapFrom; i < overlapTo; i++){
-                const data = this.getAtIndex(i);
-                if (data) {
-                    const index = i - from;
-                    newData[index] = data;
-                }
-            }
-            this.data = newData;
-            this.range.from = from;
-            this.range.to = to;
-        }
-    }
-    getSelectedRows() {
-        return this.data.filter((row)=>0 !== row[SELECTED]);
-    }
-}
-export { MovingWindow };

package/src/common-hooks/index.js

@@ -1,3 +0,0 @@
-export * from "./useControlled.js";
-export * from "./use-resize-observer.js";
-export * from "./selectionTypes.js";

package/src/common-hooks/selectionTypes.js

@@ -1,8 +0,0 @@
-const isSingleSelection = (s)=>void 0 === s || "default" === s || "deselectable" === s;
-const isMultiSelection = (s)=>"multiple" === s || s?.startsWith("extended") === true;
-const selectionIsDisallowed = (selection)=>"none" === selection;
-const allowMultipleSelection = (selectionStrategy, specialKey = false)=>"multiple" === selectionStrategy || "multiple-special-key" === selectionStrategy && specialKey;
-const deselectionIsAllowed = (selection)=>"none" !== selection && "default" !== selection;
-const hasSelection = (selected)=>void 0 !== selected && selected.length > 0;
-const getFirstSelectedItem = (selected)=>selected[0];
-export { allowMultipleSelection, deselectionIsAllowed, getFirstSelectedItem, hasSelection, isMultiSelection, isSingleSelection, selectionIsDisallowed };

package/src/common-hooks/use-resize-observer.js

@@ -1,122 +0,0 @@
-import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
-const WidthHeight = [
-    "height",
-    "width"
-];
-const WidthOnly = [
-    "width"
-];
-const HeightOnly = [
-    "height"
-];
-const observedMap = new Map();
-const getTargetSize = (element, size, dimension)=>{
-    switch(dimension){
-        case "height":
-            return size.height;
-        case "clientHeight":
-            return element.clientHeight;
-        case "clientWidth":
-            return element.clientWidth;
-        case "contentHeight":
-            return size.contentHeight;
-        case "contentWidth":
-            return size.contentWidth;
-        case "scrollHeight":
-            return Math.ceil(element.scrollHeight);
-        case "scrollWidth":
-            return Math.ceil(element.scrollWidth);
-        case "width":
-            return size.width;
-        default:
-            return 0;
-    }
-};
-const resizeObserver = new ResizeObserver((entries)=>{
-    for (const entry of entries){
-        const { target, borderBoxSize, contentBoxSize } = entry;
-        const observedTarget = observedMap.get(target);
-        if (observedTarget) {
-            const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
-            const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
-            const { onResize, measurements } = observedTarget;
-            let sizeChanged = false;
-            for (const [dimension, size] of Object.entries(measurements)){
-                const newSize = getTargetSize(target, {
-                    height,
-                    width,
-                    contentHeight,
-                    contentWidth
-                }, dimension);
-                if (newSize !== size) {
-                    sizeChanged = true;
-                    measurements[dimension] = newSize;
-                }
-            }
-            if (sizeChanged) onResize && onResize(measurements);
-        }
-    }
-});
-function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
-    const dimensionsRef = useRef(dimensions);
-    const target = ref.current;
-    const measure = useCallback((target)=>{
-        const { width, height } = target.getBoundingClientRect();
-        const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
-        return dimensionsRef.current.reduce((map, dim)=>{
-            map[dim] = getTargetSize(target, {
-                width,
-                height,
-                contentHeight,
-                contentWidth
-            }, dim);
-            return map;
-        }, {});
-    }, []);
-    useLayoutEffect(()=>{
-        async function registerObserver() {
-            observedMap.set(target, {
-                measurements: {}
-            });
-            await document.fonts.ready;
-            const observedTarget = observedMap.get(target);
-            if (observedTarget) {
-                const measurements = measure(target);
-                observedTarget.measurements = measurements;
-                resizeObserver.observe(target);
-                if (reportInitialSize) onResize(measurements);
-            } else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation", "font-weight:bold; color:red;");
-        }
-        if (target) {
-            observedMap.has(target);
-            registerObserver();
-        }
-        return ()=>{
-            if (target && observedMap.has(target)) {
-                resizeObserver.unobserve(target);
-                observedMap.delete(target);
-            }
-        };
-    }, [
-        measure,
-        target
-    ]);
-    useEffect(()=>{
-        const target = ref.current;
-        const record = observedMap.get(target);
-        if (record) {
-            if (dimensionsRef.current !== dimensions) {
-                dimensionsRef.current = dimensions;
-                const measurements = measure(target);
-                record.measurements = measurements;
-            }
-            record.onResize = onResize;
-        }
-    }, [
-        dimensions,
-        measure,
-        ref,
-        onResize
-    ]);
-}
-export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver };

package/src/common-hooks/useControlled.js

@@ -1,45 +0,0 @@
-import { isValidElement, useCallback, useEffect, useRef, useState } from "react";
-function useControlled({ controlled, default: defaultProp, name, state = "value" }) {
-    const { current: isControlled } = useRef(void 0 !== controlled);
-    const [valueState, setValue] = useState(defaultProp);
-    const value = void 0 !== controlled ? controlled : valueState;
-    const { current: defaultValue } = useRef(defaultProp);
-    useEffect(()=>{
-        if ("production" !== process.env.NODE_ENV) {
-            if (isControlled !== (void 0 !== controlled)) console.error([
-                `Salt: A component is changing the ${isControlled ? "" : "un"}controlled ${state} state of ${name} to be ${isControlled ? "un" : ""}controlled.`,
-                "Elements should not switch from uncontrolled to controlled (or vice versa).",
-                `Decide between using a controlled or uncontrolled ${name} element for the lifetime of the component.`,
-                "The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.",
-                "More info: https://fb.me/react-controlled-components"
-            ].join("\n"));
-        }
-    }, [
-        state,
-        name,
-        controlled
-    ]);
-    useEffect(()=>{
-        if ("production" !== process.env.NODE_ENV) {
-            if (!isControlled && defaultValue !== defaultProp) console.error([
-                `Salt: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. To suppress this warning opt to use a controlled ${name}.`
-            ].join("\n"));
-        }
-    }, [
-        JSON.stringify(defaultProp, ignoreReactElements)
-    ]);
-    const setValueIfUncontrolled = useCallback((newValue)=>{
-        if (!isControlled) setValue(newValue);
-    }, [
-        isControlled
-    ]);
-    return [
-        value,
-        setValueIfUncontrolled,
-        isControlled
-    ];
-}
-function ignoreReactElements(key, value) {
-    return isValidElement(value) ? null : value;
-}
-export { useControlled };

package/src/context-panel-provider/ContextPanelProvider.js

@@ -1,80 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState } from "react";
-import { isUnconfiguredProperty, layoutFromJson, useLayoutOperation } from "@vuu-ui/vuu-layout";
-import { Dialog, DialogCloseButton, DialogContent, DialogHeader } from "@salt-ds/core";
-const UndefinedShowContextPanel = ()=>{
-    console.warn("[ContextPanelContext] no implementation for showContextPanel, you need to add a ContextPanelProvider");
-};
-const ContextPanelContext = /*#__PURE__*/ createContext({
-    showContextPanel: UndefinedShowContextPanel
-});
-const ContextPanelProvider = ({ children, hideContextPanel: hideContextPanelProp, showContextPanel: showContextPanelProp })=>{
-    const { hideContextPanel: inheritedHideContextPanel, showContextPanel: inheritedShowContextPanel } = useContext(ContextPanelContext);
-    const { showComponentInContextPanel } = useLayoutOperation();
-    const [dialog, setDialog] = useState(null);
-    const handleOpenChange = useCallback((isOpen)=>{
-        if (!isOpen) setDialog(null);
-    }, []);
-    const hideContextPanel = hideContextPanelProp ?? inheritedHideContextPanel;
-    const showContextPanel = useCallback((elementOrComponentType, title, props)=>{
-        if (showContextPanelProp) showContextPanelProp(elementOrComponentType, title, props);
-        else if (inheritedShowContextPanel !== UndefinedShowContextPanel) inheritedShowContextPanel(elementOrComponentType, title, props);
-        else if (isUnconfiguredProperty(showComponentInContextPanel)) {
-            if ("string" == typeof elementOrComponentType) {
-                const component = "string" == typeof elementOrComponentType ? layoutFromJson({
-                    type: elementOrComponentType,
-                    props
-                }, "") : elementOrComponentType;
-                setDialog(/*#__PURE__*/ jsxs(Dialog, {
-                    open: true,
-                    onOpenChange: handleOpenChange,
-                    children: [
-                        /*#__PURE__*/ jsx(DialogCloseButton, {
-                            appearance: "transparent",
-                            "data-embedded": true,
-                            "data-icon": "close",
-                            onClick: ()=>setDialog(null),
-                            sentiment: "neutral"
-                        }),
-                        /*#__PURE__*/ jsx(DialogHeader, {
-                            header: title
-                        }),
-                        /*#__PURE__*/ jsx(DialogContent, {
-                            children: component
-                        })
-                    ]
-                }));
-            }
-        } else {
-            const component = "string" == typeof elementOrComponentType ? {
-                type: elementOrComponentType,
-                props
-            } : elementOrComponentType;
-            showComponentInContextPanel(component, title);
-        }
-    }, [
-        handleOpenChange,
-        inheritedShowContextPanel,
-        showComponentInContextPanel,
-        showContextPanelProp
-    ]);
-    return /*#__PURE__*/ jsxs(ContextPanelContext.Provider, {
-        value: {
-            hideContextPanel,
-            showContextPanel
-        },
-        children: [
-            children,
-            dialog
-        ]
-    });
-};
-function useContextPanel() {
-    const { showContextPanel } = useContext(ContextPanelContext);
-    return showContextPanel;
-}
-function useHideContextPanel() {
-    const { hideContextPanel } = useContext(ContextPanelContext);
-    return hideContextPanel;
-}
-export { ContextPanelContext, ContextPanelProvider, useContextPanel, useHideContextPanel };

package/src/cycle-state-button/CycleStateButton.js

@@ -1,30 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Button } from "@salt-ds/core";
-import clsx from "clsx";
-import { forwardRef, useCallback } from "react";
-const classBase = "vuuCycleStateButton";
-const getNextValue = (value, valueList)=>{
-    const index = valueList.map((v)=>v.toUpperCase()).indexOf(value.toUpperCase());
-    if (index === valueList.length - 1) return valueList[0];
-    return valueList[index + 1];
-};
-const CycleStateButton_CycleStateButton = /*#__PURE__*/ forwardRef(function({ className, onChange, onCommit, value = "", values, ...buttonProps }, forwardedRef) {
-    const handleClick = useCallback(async (evt)=>{
-        const nextValue = getNextValue(value, values);
-        onChange?.(nextValue);
-        onCommit?.(evt, nextValue);
-    }, [
-        onChange,
-        onCommit,
-        value,
-        values
-    ]);
-    return /*#__PURE__*/ jsx(Button, {
-        ...buttonProps,
-        className: clsx(classBase, className, `${classBase}-${value.toLowerCase()}`),
-        onClick: handleClick,
-        ref: forwardedRef,
-        children: value
-    });
-});
-export { CycleStateButton_CycleStateButton as CycleStateButton };

package/src/cycle-state-button/index.js

@@ -1 +0,0 @@
-export * from "./CycleStateButton.js";

package/src/date-input/DateInput.css.js

@@ -1,195 +0,0 @@
-const css = `
-.saltDateInput {
-  --input-border: none;
-  --input-borderColor: var(--salt-editable-borderColor);
-  --input-borderStyle: var(--salt-editable-borderStyle);
-  --input-outlineColor: var(--salt-focused-outlineColor);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--saltDateInput-background, var(--input-background));
-  border: var(--input-border);
-  border-radius: var(--salt-palette-corner-weak, 0);
-  color: var(--saltDateInput-color, var(--salt-content-primary-foreground));
-  align-items: center;
-  gap: var(--salt-spacing-50);
-  font-family: var(--salt-text-fontFamily);
-  font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));
-  height: var(--saltDateInput-height, var(--salt-size-base));
-  line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));
-  min-height: var(--saltDateInput-minHeight, var(--salt-size-base));
-  min-width: var(--saltDateInput-minWidth, 4em);
-  padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));
-  padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));
-  box-sizing: border-box;
-  width: 100%;
-  display: inline-flex;
-  position: relative;
-  overflow: hidden;
-}
-
-.saltDateInput:hover {
-  --input-borderStyle: var(--salt-editable-borderStyle-hover);
-  --input-borderColor: var(--salt-editable-borderColor-hover);
-  background: var(--saltDateInput-background-hover, var(--input-background-hover));
-  cursor: var(--salt-editable-cursor-hover);
-}
-
-.saltDateInput:active {
-  --input-borderColor: var(--salt-editable-borderColor-active);
-  --input-borderStyle: var(--salt-editable-borderStyle-active);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  background: var(--saltDateInput-background-active, var(--input-background-active));
-  cursor: var(--salt-editable-cursor-active);
-}
-
-.saltDateInput-primary {
-  --input-background: var(--salt-editable-primary-background);
-  --input-background-active: var(--salt-editable-primary-background-active);
-  --input-background-hover: var(--salt-editable-primary-background-hover);
-  --input-background-disabled: var(--salt-editable-primary-background-disabled);
-  --input-background-readonly: var(--salt-editable-primary-background-readonly);
-}
-
-.saltDateInput-secondary {
-  --input-background: var(--salt-editable-secondary-background);
-  --input-background-active: var(--salt-editable-secondary-background-active);
-  --input-background-hover: var(--salt-editable-secondary-background-active);
-  --input-background-disabled: var(--salt-editable-secondary-background-disabled);
-  --input-background-readonly: var(--salt-editable-secondary-background-readonly);
-}
-
-.saltDateInput-error, .saltDateInput-error:hover {
-  --input-background: var(--salt-status-error-background);
-  --input-background-active: var(--salt-status-error-background);
-  --input-background-hover: var(--salt-status-error-background);
-  --input-borderColor: var(--salt-status-error-borderColor);
-  --input-outlineColor: var(--salt-status-error-borderColor);
-}
-
-.saltDateInput-warning, .saltDateInput-warning:hover {
-  --input-background: var(--salt-status-warning-background);
-  --input-background-active: var(--salt-status-warning-background);
-  --input-background-hover: var(--salt-status-warning-background);
-  --input-borderColor: var(--salt-status-warning-borderColor);
-  --input-outlineColor: var(--salt-status-warning-borderColor);
-}
-
-.saltDateInput-success, .saltDateInput-success:hover {
-  --input-background: var(--salt-status-success-background);
-  --input-background-active: var(--salt-status-success-background);
-  --input-background-hover: var(--salt-status-success-background);
-  --input-borderColor: var(--salt-status-success-borderColor);
-  --input-outlineColor: var(--salt-status-success-borderColor);
-}
-
-.saltDateInput-input {
-  box-sizing: content-box;
-  color: inherit;
-  cursor: inherit;
-  font: inherit;
-  height: 100%;
-  letter-spacing: var(--saltDateInput-letterSpacing, 0);
-  text-align: left;
-  background: none;
-  border: none;
-  width: min-content;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  display: block;
-  overflow: hidden;
-}
-
-.saltDateInput-input:focus {
-  outline: none;
-}
-
-.saltDateInput-input::selection {
-  background: var(--salt-content-foreground-highlight);
-}
-
-.saltDateInput-input::placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
-}
-
-.saltDateInput-focused {
-  --input-borderColor: var(--input-outlineColor);
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-  outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
-}
-
-.saltDateInput.saltDateInput-readOnly {
-  --input-borderColor: var(--salt-editable-borderColor-readonly);
-  --input-borderStyle: var(--salt-editable-borderStyle-readonly);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-readonly);
-  cursor: var(--salt-editable-cursor-readonly);
-}
-
-.saltDateInput-focused.saltDateInput-disabled {
-  --input-borderWidth: var(--salt-size-border);
-  outline: none;
-}
-
-.saltDateInput-focused.saltDateInput-readOnly {
-  --input-borderWidth: var(--salt-size-border);
-}
-
-.saltDateInput-disabled .saltDateInput-input::selection {
-  background: none;
-}
-
-.saltDateInput.saltDateInput-disabled, .saltDateInput.saltDateInput-disabled:hover, .saltDateInput.saltDateInput-disabled:active {
-  --input-borderColor: var(--salt-editable-borderColor-disabled);
-  --input-borderStyle: var(--salt-editable-borderStyle-disabled);
-  --input-borderWidth: var(--salt-size-border);
-  background: var(--input-background-disabled);
-  cursor: var(--salt-editable-cursor-disabled);
-  color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
-}
-
-.saltDateInput-activationIndicator {
-  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.saltDateInput.saltDateInput-bordered {
-  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);
-  --input-borderWidth: 0;
-}
-
-.saltDateInput-bordered.saltDateInput-focused, .saltDateInput-bordered:active {
-  --input-borderWidth: var(--salt-editable-borderWidth-active);
-}
-
-.saltDateInput-bordered.saltDateInput-readOnly, .saltDateInput-bordered.saltDateInput-disabled:hover {
-  --input-borderWidth: 0;
-}
-
-.saltDateInput-endAdornmentContainer {
-  padding-left: var(--salt-spacing-100);
-  column-gap: var(--salt-spacing-100);
-  align-items: end;
-  margin-left: auto;
-  display: inline-flex;
-}
-
-.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
-  margin-left: calc(-1 * var(--salt-spacing-50));
-}
-
-.saltDateInput-endAdornmentContainer .saltButton:last-child {
-  margin-right: calc(var(--salt-spacing-50) * -1);
-}
-
-.saltDateInput-endAdornmentContainer > .saltButton {
-  --saltButton-padding: var(--salt-spacing-50);
-  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
-}
-
-
-`;
-export default css;