@sellmate/design-system 1.0.78 → 1.2.0

package/package.json

@@ -1,103 +1,117 @@
 {
- "name": "@sellmate/design-system",
- "version": "1.0.78",
- "description": "Sellmate Design System - Web Components Library built with Stencil",
- "keywords": [
-  "web-components",
-  "stencil",
-  "design-system",
-  "ui-library"
- ],
- "main": "dist/index.cjs.js",
- "module": "dist/index.js",
- "types": "dist/types/index.d.ts",
- "collection": "dist/collection/collection-manifest.json",
- "collection:main": "dist/collection/index.js",
- "unpkg": "dist/design-system/design-system.esm.js",
- "exports": {
-  ".": {
-   "import": "./dist/design-system/design-system.esm.js",
-   "require": "./dist/design-system/design-system.cjs.js"
+  "name": "@sellmate/design-system",
+  "version": "1.2.0",
+  "description": "Sellmate Design System - Web Components Library built with Stencil",
+  "keywords": [
+    "web-components",
+    "stencil",
+    "design-system",
+    "ui-library"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/design-system/design-system.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/design-system/design-system.esm.js",
+      "require": "./dist/design-system/design-system.cjs.js"
+    },
+    "./utils": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs.js"
+    },
+    "./styles.css": "./dist/design-system/design-system.css",
+    "./dist/components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./dist/components/*": "./dist/components/*",
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    },
+    "./hydrate": {
+      "types": "./hydrate/index.d.ts",
+      "import": "./hydrate/index.mjs",
+      "require": "./hydrate/index.js",
+      "default": "./hydrate/index.js"
+    }
   },
-  "./utils": {
-   "types": "./dist/types/index.d.ts",
-   "import": "./dist/esm/index.js",
-   "require": "./dist/cjs/index.cjs.js"
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
   },
-  "./styles.css": "./dist/design-system/design-system.css",
-  "./dist/components/*": "./dist/components/*",
-  "./loader": {
-   "import": "./loader/index.js",
-   "require": "./loader/index.cjs",
-   "types": "./loader/index.d.ts"
+  "homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
+  "bugs": {
+    "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
   },
-  "./hydrate": {
-   "types": "./hydrate/index.d.ts",
-   "import": "./hydrate/index.mjs",
-   "require": "./hydrate/index.js",
-   "default": "./hydrate/index.js"
+  "files": [
+    "dist/",
+    "loader/",
+    "hydrate/"
+  ],
+  "scripts": {
+    "build": "stencil build && node ../../scripts/patch-react-ssr-wrappers.mjs",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test:spec": "stencil test --spec",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "test:scenarios": "node ../../scripts/generate-test-scenarios.mjs",
+    "generate": "stencil generate",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "format": "prettier --check src",
+    "format:fix": "prettier --write src",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@eslint/js": "^9.39.4",
+    "@stencil/core": "4.43.2",
+    "@stencil/eslint-plugin": "^1.2.0",
+    "@stencil/sass": "^3.2.2",
+    "@storybook/addon-a11y": "^9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-vitest": "^9.1.10",
+    "@storybook/web-components-vite": "^9.1.10",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "chromatic": "^13.3.4",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-storybook": "^9.1.10",
+    "globals": "^15.15.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "lit": "^3.3.2",
+    "puppeteer": "^24.3.0",
+    "storybook": "^9.1.20",
+    "typescript-eslint": "^8.59.0"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "MeeKyeong Kim",
+    "email": "kmeijjing@gmail.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@stencil/react-output-target": "^1.2.0",
+    "@stencil/vue-output-target": "^0.11.8",
+    "nanoid": "^5.1.6"
   }
- },
- "repository": {
-  "type": "git",
-  "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system.git"
- },
- "homepage": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/blob/main/README.md?ref_type=heads",
- "bugs": {
-  "url": "https://gitlab.corp.sellmate.co.kr/sellmate/frontend/design-system/-/issues"
- },
- "files": [
-  "dist/",
-  "loader/",
-  "hydrate/"
- ],
- "scripts": {
-  "build": "stencil build && node ../../scripts/patch-react-ssr-wrappers.mjs",
-  "start": "stencil build --dev --watch --serve",
-  "test": "stencil test --spec --e2e",
-  "test.watch": "stencil test --spec --e2e --watchAll",
-  "test:scenarios": "node ../../scripts/generate-test-scenarios.mjs",
-  "generate": "stencil generate",
-  "storybook": "storybook dev -p 6006",
-  "build-storybook": "storybook build",
-  "chromatic": "npx chromatic --project-token=chpt_01fe2963e7b8982"
- },
- "devDependencies": {
-  "@chromatic-com/storybook": "^4.1.1",
-  "@stencil/core": "4.43.2",
-  "@stencil/eslint-plugin": "^1.1.0",
-  "@stencil/sass": "^3.2.2",
-  "@storybook/addon-a11y": "^9.1.10",
-  "@storybook/addon-docs": "^9.1.10",
-  "@storybook/addon-vitest": "^9.1.10",
-  "@storybook/web-components-vite": "^9.1.10",
-  "@types/jest": "^29.5.14",
-  "@types/node": "^22.13.5",
-  "@types/react": "^19.2.2",
-  "@types/react-dom": "^19.2.2",
-  "chromatic": "^13.3.4",
-  "eslint": "^9.37.0",
-  "eslint-config-prettier": "^10.1.8",
-  "eslint-plugin-import": "^2.32.0",
-  "eslint-plugin-jsx-a11y": "^6.10.2",
-  "eslint-plugin-prettier": "^5.5.4",
-  "eslint-plugin-simple-import-sort": "^12.1.1",
-  "eslint-plugin-storybook": "^9.1.10",
-  "jest": "^29.7.0",
-  "jest-cli": "^29.7.0",
-  "puppeteer": "^24.3.0"
- },
- "license": "MIT",
- "author": {
-  "name": "MeeKyeong Kim",
-  "email": "kmeijjing@gmail.com"
- },
- "publishConfig": {
-  "access": "public"
- },
- "dependencies": {
-  "@stencil/react-output-target": "^1.2.0",
-  "@stencil/vue-output-target": "^0.11.8",
-  "nanoid": "^5.1.6"
- }
 }

package/readme.md

@@ -29,7 +29,7 @@ Include this script in your HTML:
 Then use any component:
 
 ```html
-<sd-button>Click me</sd-button>
+<sd-button name="primary_sm" label="Click me"></sd-button>
 ```
 
 ### ES Module Import
@@ -38,7 +38,13 @@ Then use any component:
 import '@sellmate/design-system/dist/design-system/design-system.esm.js';
 
 function App() {
- return <sd-button label="Click me" onClick={() => console.log('clicked')}></sd-button>;
+  return (
+    <sd-button
+      name="primary_sm"
+      label="Click me"
+      onClick={() => console.log('clicked')}
+    ></sd-button>
+  );
 }
 
 export default App;
@@ -54,11 +60,11 @@ defineCustomElements();
 
 ## Available Components
 
-- **sd-button** - Button component
+- **sd-button** - Button component (preset-based)
 - **sd-input** - Input field component
 - **sd-checkbox** - Checkbox component
 - **sd-select** - Select dropdown component
-- **sd-table-backup** - Data table component
+- **sd-table** - Data table component
 - **sd-tag** - Tag/badge component
 - **sd-icon** - Icon component
 - **sd-tooltip** - Tooltip component
@@ -81,7 +87,7 @@ npm install @sellmate/design-system-react
 import { SdButton } from '@sellmate/design-system-react';
 
 export function App() {
- return <SdButton>Click me</SdButton>;
+  return <SdButton name="primary_sm" label="Click me" />;
 }
 ```
 
@@ -95,14 +101,14 @@ npm install @sellmate/design-system-vue
 
 ```vue
 <template>
- <SdButton @click="handleClick">Click me</SdButton>
+  <SdButton name="primary_sm" label="Click me" @click="handleClick" />
 </template>
 
 <script setup>
 import { SdButton } from '@sellmate/design-system-vue';
 
 const handleClick = () => {
- console.log('clicked');
+  console.log('clicked');
 };
 </script>
 ```

package/dist/cjs/component.button-cqV-iCG5.js

@@ -1,90 +0,0 @@
-'use strict';
-
-const button = {
-	xs: {
-		icon: "12"
-	},
-	sm: {
-		icon: "16"
-	},
-	md: {
-		icon: "20"
-	},
-	lg: {
-		icon: "24"
-	},
-	border: {
-		disabled: "#CCCCCC"
-	},
-	bg: {
-		disabled: "#E1E1E1"
-	},
-	text: {
-		disabled: "#888888"
-	},
-	brand: {
-		strong: {
-			bg: {
-				"default": "#025497",
-				hover: "#004177"
-			},
-			content: "#FFFFFF",
-			dropdown: {
-				divider: "#006AC1"
-			}
-		},
-		subtle: {
-			bg: {
-				"default": "#1F8AE1",
-				hover: "#006AC1"
-			},
-			content: "#FFFFFF",
-			dropdown: {
-				divider: "#5CB0F3"
-			}
-		},
-		outline: {
-			bg: {
-				"default": "#FFFFFF",
-				hover: "#EAF5FE"
-			},
-			border: "#025497",
-			content: "#025497"
-		}
-	},
-	neutral: {
-		outline: {
-			bg: {
-				"default": "#FFFFFF",
-				hover: "#EEEEEE"
-			},
-			border: "#888888",
-			content: "#222222"
-		}
-	},
-	danger: {
-		strong: {
-			bg: {
-				"default": "#E30000",
-				hover: "#AD0000"
-			},
-			content: "#FFFFFF",
-			dropdown: {
-				divider: "#FF7C7C"
-			}
-		},
-		outline: {
-			bg: {
-				"default": "#FFFFFF",
-				hover: "#FCEFEF"
-			},
-			border: "#E30000",
-			content: "#E30000"
-		}
-	}
-};
-var buttonTokens = {
-	button: button
-};
-
-exports.buttonTokens = buttonTokens;

package/dist/cjs/sd-date-picker-trigger.cjs.entry.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var index = require('./index--F2wGuAi.js');
-var sdDatePicker_config = require('./sd-date-picker.config-CRgCT5dn.js');
-
-const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:0;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
-
-const SdDatePickerTrigger = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.triggerClick = index.createEvent(this, "sdTriggerClick", 7);
-    }
-    displayText = '';
-    placeholder = 'YYYY-MM-DD';
-    disabled = false;
-    size = 'md';
-    triggerClick;
-    handleClick = () => {
-        if (this.disabled)
-            return;
-        this.triggerClick.emit();
-    };
-    render() {
-        const sizeTokens = sdDatePicker_config.DATEPICKER_SIZE_MAP[this.size] ?? sdDatePicker_config.DATEPICKER_SIZE_MAP.md;
-        const hasValue = !!this.displayText;
-        const cssVars = {
-            '--trigger-padding-x': `${sizeTokens.paddingX}px`,
-            '--trigger-gap': `${sizeTokens.gap}px`,
-            '--trigger-icon-size': `${sizeTokens.iconSize}px`,
-            '--trigger-font-size': `${sizeTokens.fontSize}px`,
-            '--trigger-line-height': `${sizeTokens.lineHeight}px`,
-            '--trigger-font-weight': sizeTokens.fontWeight,
-            '--trigger-radius': `${sizeTokens.radius}px`,
-            '--trigger-text-color': this.disabled
-                ? sdDatePicker_config.DATEPICKER_COLORS.text.disabled
-                : hasValue
-                    ? sdDatePicker_config.DATEPICKER_COLORS.text.default
-                    : sdDatePicker_config.DATEPICKER_COLORS.text.hint,
-            '--trigger-icon-color': this.disabled
-                ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
-                : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
-        };
-        return (index.h("div", { key: 'f541c11d4e7385993628e10f0eeb7a339f80e1f6', class: {
-                'sd-date-picker-trigger': true,
-                'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '19c51b2ae2dc354010f6727048fd7a64c17ed36e', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '73a6dd7cd398202edabecd348a4856315e077088', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
-    }
-};
-SdDatePickerTrigger.style = sdDatePickerTriggerCss();
-
-exports.sd_date_picker_trigger = SdDatePickerTrigger;

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -1,117 +0,0 @@
-'use strict';
-
-var index = require('./index--F2wGuAi.js');
-var index$1 = require('./index-BUvXpPc3.js');
-var sdDatePicker_config = require('./sd-date-picker.config-CRgCT5dn.js');
-
-const sdDatePickerCss = () => `sd-date-picker{display:inline-flex}sd-date-picker sd-portal{display:none}sd-date-picker .sd-date-picker{position:relative;width:100%;height:100%}`;
-
-const SdDatePicker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate", 7);
-        this.viewChange = index.createEvent(this, "sdViewChange", 7);
-    }
-    static CLOSE_ANIMATION_DURATION = 150;
-    get el() { return index.getElement(this); }
-    value = null;
-    size = 'sm';
-    placeholder = 'YYYY-MM-DD';
-    selectable;
-    disabled = false;
-    width = '';
-    // sd-field 공통 props
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    hint = '';
-    errorMessage = '';
-    rules = [];
-    error = false;
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    isOpen = false;
-    isAnimatingOut = false;
-    focused = false;
-    hovered = false;
-    update;
-    viewChange;
-    triggerRef;
-    formField;
-    closeAnimationTimer;
-    name = index$1.nanoid();
-    watchIsOpen(newValue) {
-        this.focused = newValue;
-    }
-    async sdValidate() {
-        return this.formField?.sdValidate();
-    }
-    async sdReset() {
-        return this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        return this.formField?.sdResetValidation();
-    }
-    closeDropdown() {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.isAnimatingOut = true;
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.closeAnimationTimer = setTimeout(() => {
-            this.isAnimatingOut = false;
-        }, SdDatePicker.CLOSE_ANIMATION_DURATION);
-    }
-    handleTriggerClick = () => {
-        if (this.disabled)
-            return;
-        if (this.isOpen) {
-            this.closeDropdown();
-        }
-        else {
-            if (this.closeAnimationTimer)
-                clearTimeout(this.closeAnimationTimer);
-            this.isAnimatingOut = false;
-            this.isOpen = true;
-        }
-    };
-    handleSelect = (e) => {
-        this.closeDropdown();
-        this.value = e.detail;
-        const nextValue = this.value;
-        requestAnimationFrame(() => {
-            this.update.emit(nextValue);
-        });
-    };
-    handleViewChange = (e) => {
-        this.viewChange.emit(e.detail);
-    };
-    disconnectedCallback() {
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-    }
-    render() {
-        const sizeTokens = sdDatePicker_config.DATEPICKER_SIZE_MAP[this.size] ?? sdDatePicker_config.DATEPICKER_SIZE_MAP.md;
-        const cssVars = {
-            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
-            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
-            '--sd-system-color-field-border-default': sdDatePicker_config.DATEPICKER_COLORS.border.default,
-            '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
-            '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
-        };
-        return (index.h("sd-field", { key: 'd55b2123cc862d5f12fdd429b02b622946b58cc4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '79e47e4e02e8b30dc2651a9c4aab3950a8662f52', class: "sd-date-picker", ref: el => {
-                this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: '7b09873b1e58aed36d4fb0dadb02d21ea6c2b309', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'fd60a9df30dfc459798a8e537acdf16ed9f94844', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: '0478f726cb51fe533b829f3eb0ce46d2fbf0ba94', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
-    }
-    static get watchers() { return {
-        "isOpen": [{
-                "watchIsOpen": 0
-            }]
-    }; }
-};
-SdDatePicker.style = sdDatePickerCss();
-
-exports.sd_date_picker = SdDatePicker;

package/dist/cjs/sd-date-range-picker.cjs.entry.js

@@ -1,123 +0,0 @@
-'use strict';
-
-var index = require('./index--F2wGuAi.js');
-var index$1 = require('./index-BUvXpPc3.js');
-var sdDatePicker_config = require('./sd-date-picker.config-CRgCT5dn.js');
-
-const sdDateRangePickerCss = () => `sd-date-range-picker{display:inline-flex}sd-date-range-picker sd-portal{display:none}sd-date-range-picker .sd-date-range-picker{position:relative;width:100%;height:100%}`;
-
-const SdDateRangePicker = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.update = index.createEvent(this, "sdUpdate", 7);
-        this.viewChange = index.createEvent(this, "sdViewChange", 7);
-    }
-    static CLOSE_ANIMATION_DURATION = 150;
-    get el() { return index.getElement(this); }
-    value = null;
-    size = 'sm';
-    placeholder = 'YYYY-MM-DD ~ YYYY-MM-DD';
-    selectable;
-    maxRange;
-    disabled = false;
-    width = '';
-    // sd-field 공통 props
-    label = '';
-    labelWidth = '';
-    addonLabel = '';
-    addonAlign = 'start';
-    hint = '';
-    errorMessage = '';
-    rules = [];
-    error = false;
-    icon = undefined;
-    labelTooltip = '';
-    labelTooltipProps = null;
-    isOpen = false;
-    isAnimatingOut = false;
-    focused = false;
-    hovered = false;
-    update;
-    viewChange;
-    triggerRef;
-    formField;
-    closeAnimationTimer;
-    name = index$1.nanoid();
-    watchIsOpen(newValue) {
-        this.focused = newValue;
-    }
-    async sdValidate() {
-        return this.formField?.sdValidate();
-    }
-    async sdReset() {
-        return this.formField?.sdReset();
-    }
-    async sdResetValidate() {
-        return this.formField?.sdResetValidation();
-    }
-    closeDropdown() {
-        if (!this.isOpen)
-            return;
-        this.isOpen = false;
-        this.isAnimatingOut = true;
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-        this.closeAnimationTimer = setTimeout(() => {
-            this.isAnimatingOut = false;
-        }, SdDateRangePicker.CLOSE_ANIMATION_DURATION);
-    }
-    handleTriggerClick = () => {
-        if (this.disabled)
-            return;
-        if (this.isOpen) {
-            this.closeDropdown();
-        }
-        else {
-            if (this.closeAnimationTimer)
-                clearTimeout(this.closeAnimationTimer);
-            this.isAnimatingOut = false;
-            this.isOpen = true;
-        }
-    };
-    handleSelect = (e) => {
-        this.closeDropdown();
-        this.value = e.detail;
-        const nextValue = this.value;
-        requestAnimationFrame(() => {
-            this.update.emit(nextValue);
-        });
-    };
-    handleViewChange = (e) => {
-        this.viewChange.emit(e.detail);
-    };
-    get displayText() {
-        if (!this.value || !this.value[0] || !this.value[1])
-            return '';
-        return `${this.value[0]} ~ ${this.value[1]}`;
-    }
-    disconnectedCallback() {
-        if (this.closeAnimationTimer)
-            clearTimeout(this.closeAnimationTimer);
-    }
-    render() {
-        const sizeTokens = sdDatePicker_config.DATEPICKER_SIZE_MAP[this.size] ?? sdDatePicker_config.DATEPICKER_SIZE_MAP.md;
-        const cssVars = {
-            '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
-            '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
-            '--sd-system-color-field-border-default': sdDatePicker_config.DATEPICKER_COLORS.border.default,
-            '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
-            '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
-        };
-        return (index.h("sd-field", { key: '221d930a7243334d00b281724d3c204159e721a4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '6bc1723f00169bb31cc1a153824fc8bbea6caf98', class: "sd-date-range-picker", ref: el => {
-                this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: 'd1805fe995410ecfce8ca7854cfac5055474d44a', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '22f42d9941e315d598233939a010034138e5bcbb', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-range-picker-calendar", { key: '192a66291e9f318c4bba267b98a427fd0819b1be', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
-    }
-    static get watchers() { return {
-        "isOpen": [{
-                "watchIsOpen": 0
-            }]
-    }; }
-};
-SdDateRangePicker.style = sdDateRangePickerCss();
-
-exports.sd_date_range_picker = SdDateRangePicker;