@dropi/ui 0.1.21 → 0.1.23

package/dist/collection/components/dropi-country-selector/dropi-country-selector.js

@@ -1,429 +0,0 @@
-import { h } from "@stencil/core";
-const COUNTRIES = [
-    { name: 'Afghanistan', code: 'AF', codePhone: '93' },
-    { name: 'Albania', code: 'AL', codePhone: '355' },
-    { name: 'Algeria', code: 'DZ', codePhone: '213' },
-    { name: 'Argentina', code: 'AR', codePhone: '54' },
-    { name: 'Australia', code: 'AU', codePhone: '61' },
-    { name: 'Austria', code: 'AT', codePhone: '43' },
-    { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },
-    { name: 'Bahamas', code: 'BS', codePhone: '1242' },
-    { name: 'Bahrain', code: 'BH', codePhone: '973' },
-    { name: 'Bangladesh', code: 'BD', codePhone: '880' },
-    { name: 'Belgium', code: 'BE', codePhone: '32' },
-    { name: 'Bolivia', code: 'BO', codePhone: '591' },
-    { name: 'Brazil', code: 'BR', codePhone: '55' },
-    { name: 'Cambodia', code: 'KH', codePhone: '855' },
-    { name: 'Canada', code: 'CA', codePhone: '1' },
-    { name: 'Chile', code: 'CL', codePhone: '56' },
-    { name: 'China', code: 'CN', codePhone: '86' },
-    { name: 'Colombia', code: 'CO', codePhone: '57' },
-    { name: 'Costa Rica', code: 'CR', codePhone: '506' },
-    { name: 'Cuba', code: 'CU', codePhone: '53' },
-    { name: 'Czech Republic', code: 'CZ', codePhone: '420' },
-    { name: 'Denmark', code: 'DK', codePhone: '45' },
-    { name: 'Dominican Republic', code: 'DO', codePhone: '1' },
-    { name: 'Ecuador', code: 'EC', codePhone: '593' },
-    { name: 'Egypt', code: 'EG', codePhone: '20' },
-    { name: 'El Salvador', code: 'SV', codePhone: '503' },
-    { name: 'Estonia', code: 'EE', codePhone: '372' },
-    { name: 'Ethiopia', code: 'ET', codePhone: '251' },
-    { name: 'Finland', code: 'FI', codePhone: '358' },
-    { name: 'France', code: 'FR', codePhone: '33' },
-    { name: 'Germany', code: 'DE', codePhone: '49' },
-    { name: 'Ghana', code: 'GH', codePhone: '233' },
-    { name: 'Greece', code: 'GR', codePhone: '30' },
-    { name: 'Guatemala', code: 'GT', codePhone: '502' },
-    { name: 'Honduras', code: 'HN', codePhone: '504' },
-    { name: 'Hong Kong', code: 'HK', codePhone: '852' },
-    { name: 'Hungary', code: 'HU', codePhone: '36' },
-    { name: 'India', code: 'IN', codePhone: '91' },
-    { name: 'Indonesia', code: 'ID', codePhone: '62' },
-    { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },
-    { name: 'Iraq', code: 'IQ', codePhone: '964' },
-    { name: 'Ireland', code: 'IE', codePhone: '353' },
-    { name: 'Israel', code: 'IL', codePhone: '972' },
-    { name: 'Italy', code: 'IT', codePhone: '39' },
-    { name: 'Jamaica', code: 'JM', codePhone: '1876' },
-    { name: 'Japan', code: 'JP', codePhone: '81' },
-    { name: 'Jordan', code: 'JO', codePhone: '962' },
-    { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },
-    { name: 'Kenya', code: 'KE', codePhone: '254' },
-    { name: 'Kuwait', code: 'KW', codePhone: '965' },
-    { name: 'Lebanon', code: 'LB', codePhone: '961' },
-    { name: 'Malaysia', code: 'MY', codePhone: '60' },
-    { name: 'Mexico', code: 'MX', codePhone: '52' },
-    { name: 'Morocco', code: 'MA', codePhone: '212' },
-    { name: 'Netherlands', code: 'NL', codePhone: '31' },
-    { name: 'New Zealand', code: 'NZ', codePhone: '64' },
-    { name: 'Nicaragua', code: 'NI', codePhone: '505' },
-    { name: 'Nigeria', code: 'NG', codePhone: '234' },
-    { name: 'Norway', code: 'NO', codePhone: '47' },
-    { name: 'Pakistan', code: 'PK', codePhone: '92' },
-    { name: 'Panama', code: 'PA', codePhone: '507' },
-    { name: 'Paraguay', code: 'PY', codePhone: '595' },
-    { name: 'Peru', code: 'PE', codePhone: '51' },
-    { name: 'Philippines', code: 'PH', codePhone: '63' },
-    { name: 'Poland', code: 'PL', codePhone: '48' },
-    { name: 'Portugal', code: 'PT', codePhone: '351' },
-    { name: 'Qatar', code: 'QA', codePhone: '974' },
-    { name: 'Romania', code: 'RO', codePhone: '40' },
-    { name: 'Russian Federation', code: 'RU', codePhone: '7' },
-    { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },
-    { name: 'Singapore', code: 'SG', codePhone: '65' },
-    { name: 'South Africa', code: 'ZA', codePhone: '27' },
-    { name: 'Spain', code: 'ES', codePhone: '34' },
-    { name: 'Sri Lanka', code: 'LK', codePhone: '94' },
-    { name: 'Sweden', code: 'SE', codePhone: '46' },
-    { name: 'Switzerland', code: 'CH', codePhone: '41' },
-    { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },
-    { name: 'Thailand', code: 'TH', codePhone: '66' },
-    { name: 'Tunisia', code: 'TN', codePhone: '216' },
-    { name: 'Turkey', code: 'TR', codePhone: '90' },
-    { name: 'Uganda', code: 'UG', codePhone: '256' },
-    { name: 'Ukraine', code: 'UA', codePhone: '380' },
-    { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },
-    { name: 'United Kingdom', code: 'GB', codePhone: '44' },
-    { name: 'United States', code: 'US', codePhone: '1' },
-    { name: 'Uruguay', code: 'UY', codePhone: '598' },
-    { name: 'Venezuela', code: 'VE', codePhone: '58' },
-    { name: 'Viet Nam', code: 'VN', codePhone: '84' },
-    { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },
-];
-/**
- * @component dropi-country-selector
- * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.
- *
- * @example
- * <dropi-country-selector label="País" placeholder="Selecciona un país"></dropi-country-selector>
- */
-export class DropiCountrySelector {
-    /** Label above the select */
-    label = '';
-    /** Placeholder when nothing is selected */
-    placeholder = 'Selecciona un país';
-    /** Pre-selected country code (ISO 3166-1 alpha-2) */
-    currentSelection = '';
-    /** Whether the selector is disabled */
-    disabled = false;
-    /** Show asterisk for required field */
-    showObligatory = false;
-    /** Show error border */
-    hasError = false;
-    /** Helper text below the select */
-    textHelper = '';
-    /** Search term for filtering (matches Angular `searchTerm`) */
-    searchTerm = '';
-    /**
-     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
-     * When provided, its non-null fields override individual props.
-     */
-    selectProperties = null;
-    /** Emitted when a country is selected. Detail is the CountryItem. */
-    onChangeSelect;
-    isOpen = false;
-    selected = null;
-    el;
-    handleDocClick(e) {
-        if (this.isOpen && !e.composedPath().includes(this.el)) {
-            this.isOpen = false;
-        }
-    }
-    searchInputRef;
-    currentSelectionChanged(val) {
-        this.selected = COUNTRIES.find(c => c.code === val) || null;
-    }
-    selectPropertiesChanged(val) {
-        if (!val)
-            return;
-        if (val.label !== undefined)
-            this.label = val.label;
-        if (val.placeholder !== undefined)
-            this.placeholder = val.placeholder;
-        if (val.showObligatory !== undefined)
-            this.showObligatory = val.showObligatory;
-        if (val.textHelper !== undefined)
-            this.textHelper = val.textHelper;
-        if (val.hasError !== undefined)
-            this.hasError = val.hasError;
-    }
-    componentWillLoad() {
-        if (this.selectProperties)
-            this.selectPropertiesChanged(this.selectProperties);
-        if (this.currentSelection)
-            this.currentSelectionChanged(this.currentSelection);
-    }
-    get filtered() {
-        if (!this.searchTerm)
-            return COUNTRIES;
-        const t = this.searchTerm.toLowerCase();
-        return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));
-    }
-    open() {
-        if (this.disabled)
-            return;
-        this.isOpen = !this.isOpen;
-        if (this.isOpen) {
-            setTimeout(() => this.searchInputRef?.focus(), 50);
-        }
-    }
-    select(country) {
-        this.selected = country;
-        this.isOpen = false;
-        this.searchTerm = '';
-        this.currentSelection = country.code;
-        this.onChangeSelect.emit(country);
-    }
-    render() {
-        return (h("div", { key: '5b1c2871c8e203384a7e4110002436131e9b6540', class: "custom-select" }, this.label && (h("label", { key: '40b4b1e5e3d245466ac66b0e5b2fbadaf476a45f' }, this.label, this.showObligatory && h("span", { key: '22734f66b235e18548862c756b005c8f5d901a7d', class: "required" }, "*"))), h("button", { key: '02aaf6f7c145d4e55d347f92cc1228c2623bfb52', type: "button", class: {
-                'select-button': true,
-                'select-completed': !!this.selected,
-                'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '1dd83df0cdbfe0c3b767fa0f7b431ce0a414cb14', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: '8b990d7ad946d88da7a67b142a4420cd80e3deb2', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'b2641514578d7ea447bd7cd5db191dc1b21bc9f1', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: 'd743ec97af3cb4044b48ef4e98bbe90a59fffc35', class: "search-li" }, h("div", { key: '771cbb86ce07908b5e59fa21899d8156180430d8', class: "search-field" }, h("input", { key: '9e5c11ad1ae3e650e3cb10011e1c87e889be65cd', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '56ebb7e45e8898eed09ddd82c770ad30648b8b73', class: "search-icon" }, h("dropi-icon", { key: 'a80e581cd1b3590dc66290a3f43cee9ee5bc5e66', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: 'b9b87b146ef9261ef540a7d39761e6793194baf0', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: '7a5aec8d924adcaf7b3381f486ef7b4ed6245059', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'bd953f772c39334b217229f0c0a887641830a2eb' }, this.textHelper)))));
-    }
-    static get is() { return "dropi-country-selector"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-country-selector.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-country-selector.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label above the select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder when nothing is selected"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'Selecciona un pa\u00EDs'"
-            },
-            "currentSelection": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Pre-selected country code (ISO 3166-1 alpha-2)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "current-selection",
-                "defaultValue": "''"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the selector is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "showObligatory": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show asterisk for required field"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-obligatory",
-                "defaultValue": "false"
-            },
-            "hasError": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show error border"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "has-error",
-                "defaultValue": "false"
-            },
-            "textHelper": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Helper text below the select"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text-helper",
-                "defaultValue": "''"
-            },
-            "searchTerm": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Search term for filtering (matches Angular `searchTerm`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "search-term",
-                "defaultValue": "''"
-            },
-            "selectProperties": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Convenience object prop \u2014 matches Angular `selectProperties: SelectProperties`.\nWhen provided, its non-null fields override individual props."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "select-properties",
-                "defaultValue": "null"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "selected": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "onChangeSelect",
-                "name": "onChangeSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when a country is selected. Detail is the CountryItem."
-                },
-                "complexType": {
-                    "original": "CountryItem",
-                    "resolved": "CountryItem",
-                    "references": {
-                        "CountryItem": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-country-selector/dropi-country-selector.tsx",
-                            "id": "src/components/dropi-country-selector/dropi-country-selector.tsx::CountryItem"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "currentSelection",
-                "methodName": "currentSelectionChanged"
-            }, {
-                "propName": "selectProperties",
-                "methodName": "selectPropertiesChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleDocClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/dropi-date-picker/dropi-date-picker.css

@@ -1,215 +0,0 @@
-:host { display: block; width: 100%; position: relative; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.dp-label {
-  display: block;
-  font-size: var(--font-size-xxs, 10px);
-  color: var(--Gray-Gray-600, #475066);
-  margin-bottom: 4px;
-}
-
-/* Trigger */
-.dp-trigger {
-  width: 100%;
-  height: 44px;
-  display: flex;
-  align-items: center;
-  gap: var(--Size-2, 8px);
-  padding: 0 var(--Size-3, 12px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  cursor: pointer;
-  font-family: inherit;
-  transition: border-color 0.2s;
-}
-.dp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
-.dp-trigger--disabled { background: var(--Gray-Gray-50, #f7f8fa); cursor: not-allowed; opacity: 0.6; }
-
-.dp-trigger__value {
-  flex: 1;
-  text-align: left;
-  font-size: var(--font-size-xs, 12px);
-  color: var(--Gray-Gray-700, #32394d);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.dp-trigger__placeholder { color: var(--Gray-Gray-400, #858ea6); }
-
-/* Popup */
-.dp-popup {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  width: 320px;
-  background: var(--Neutral-White, #ffffff);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-3, 12px);
-  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-  z-index: 300;
-  padding: var(--Size-4, 16px);
-}
-
-/* Navigation */
-.dp-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--Size-4, 16px);
-}
-
-.dp-nav__btn {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  transition: background 0.15s;
-}
-.dp-nav__btn:hover { background: var(--Gray-Gray-50, #f7f8fa); }
-
-.dp-nav__title {
-  font-size: var(--font-size-s, 14px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-700, #32394d);
-  display: flex;
-  gap: 8px;
-}
-
-/* Grid */
-.dp-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  row-gap: 8px;
-  column-gap: 4px;
-}
-
-.dp-day-header {
-  font-size: var(--font-size-s, 14px);
-  color: var(--Gray-Gray-700, #32394d);
-  text-align: center;
-  padding: 8px 0;
-  font-weight: var(--font-weight-bold, 700);
-}
-
-/* Day cells */
-.dp-cell {
-  aspect-ratio: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-xs, 12px);
-  font-family: inherit;
-  border: none;
-  cursor: pointer;
-  background: transparent;
-  color: var(--Gray-Gray-600, #475066);
-  width: 100%;
-  position: relative;
-  z-index: 1;
-  padding: 0;
-}
-
-/* Pseudo-element for the circle (selected / hover / today) */
-.dp-cell::after {
-  content: "";
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  border-radius: 50%;
-  transition: all 0.2s;
-  z-index: -1;
-  background: transparent;
-}
-
-/* Pseudo-element for the continuous light-orange range background */
-.dp-cell::before {
-  content: "";
-  position: absolute;
-  top: 0; bottom: 0;
-  z-index: -2;
-  border-radius: 0;
-  background: transparent;
-}
-
-.dp-cell:hover:not(:disabled)::after {
-  background: var(--Gray-Gray-100, #e6eaf2);
-}
-
-.dp-cell--other-month { color: var(--Gray-Gray-300, #a0a9c0); }
-
-.dp-cell--today {
-  font-weight: var(--font-weight-bold, 700);
-}
-.dp-cell--today::after {
-  background: var(--Gray-Gray-100, #e6eaf2);
-}
-
-.dp-cell--selected {
-  color: var(--Neutral-White, #ffffff);
-  font-weight: var(--font-weight-bold, 700);
-}
-.dp-cell--selected::after {
-  background: var(--Orange-orange-500, #f49a3d) !important;
-}
-
-/* Range modes */
-.dp-cell--range-start, .dp-cell--range-end {
-  color: var(--Neutral-White, #ffffff);
-  font-weight: var(--font-weight-bold, 700);
-}
-.dp-cell--range-start::after, .dp-cell--range-end::after {
-  background: var(--Orange-orange-500, #f49a3d) !important;
-}
-
-.dp-cell--in-range {
-  color: var(--Orange-orange-500, #f49a3d);
-  font-weight: var(--font-weight-bold, 700);
-}
-.dp-cell--in-range::before {
-  left: -2px; right: -2px;
-  background: var(--Orange-orange-50, #fef5ec);
-}
-.dp-cell--range-start::before {
-  left: 50%; right: -2px;
-  background: var(--Orange-orange-50, #fef5ec);
-}
-.dp-cell--range-end::before {
-  left: -2px; right: 50%;
-  background: var(--Orange-orange-50, #fef5ec);
-}
-.dp-cell--range-start.dp-cell--range-end::before {
-  background: transparent;
-}
-
-.dp-cell--disabled { opacity: 0.35; cursor: not-allowed; }
-
-/* Footer */
-.dp-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--Size-3, 12px);
-  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
-  padding-top: var(--Size-2, 8px);
-}
-
-.dp-footer__clear,
-.dp-footer__today {
-  background: none;
-  border: none;
-  padding: 4px 8px;
-  font-size: var(--font-size-xxs, 10px);
-  font-family: inherit;
-  cursor: pointer;
-  border-radius: var(--Border-1, 4px);
-  transition: background 0.15s;
-}
-.dp-footer__clear { color: var(--Gray-Gray-500, #69738c); }
-.dp-footer__today { color: var(--Orange-orange-500, #f49a3d); font-weight: var(--font-weight-bold, 700); }
-.dp-footer__clear:hover { background: var(--Gray-Gray-50, #f7f8fa); }
-.dp-footer__today:hover { background: var(--Orange-orange-50, #fef5ec); }