@sellmate/design-system 1.0.46 → 1.0.47

package/dist/cjs/sd-tag.cjs.entry.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const tag = {
+	xs: {
+		height: "20",
+		paddingX: "6",
+		gap: "4",
+		icon: "12",
+		typography: {
+			fontSize: "11",
+			fontWeight: "500",
+			lineHeight: "18"},
+		radius: "6"
+	},
+	sm: {
+		height: "24",
+		paddingX: "8",
+		gap: "4",
+		icon: "16",
+		typography: {
+			fontSize: "12",
+			fontWeight: "700",
+			lineHeight: "20"},
+		radius: "6"
+	},
+	md: {
+		height: "28",
+		paddingX: "12",
+		gap: "6",
+		icon: "16",
+		typography: {
+			fontSize: "14",
+			fontWeight: "700",
+			lineHeight: "24"},
+		radius: "8"
+	},
+	red: {
+		bg: "#FB4444",
+		content: "#FCEFEF"
+	},
+	orange: {
+		bg: "#FF6B00",
+		content: "#FEF1EA"
+	},
+	yellow: {
+		bg: "#916C0D",
+		content: "#FFF7DD"
+	},
+	green: {
+		bg: "#00973C",
+		content: "#E8F9EF"
+	},
+	blue: {
+		bg: "#0075FF",
+		content: "#E6F1FF"
+	},
+	darkblue: {
+		bg: "#006AC1",
+		content: "#EAF5FE"
+	},
+	indigo: {
+		bg: "#004290",
+		content: "#EFF6FF"
+	},
+	grey: {
+		bg: "#737373",
+		content: "#EEEEEE"
+	}
+};
+var tagTokens = {
+	tag: tag
+};
+
+const TAG_SHAPES = ['square', 'pill'];
+const TAG_SIZES = ['xs', 'sm', 'md'];
+const TAG_COLORS = [
+    'grey',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'darkblue',
+    'indigo',
+];
+const TAG_COLOR_CONFIG = {
+    grey: { background: tagTokens.tag.grey.content, content: tagTokens.tag.grey.bg, icon: tagTokens.tag.grey.bg },
+    red: { background: tagTokens.tag.red.content, content: tagTokens.tag.red.bg, icon: tagTokens.tag.red.bg },
+    orange: { background: tagTokens.tag.orange.content, content: tagTokens.tag.orange.bg, icon: tagTokens.tag.orange.bg },
+    yellow: { background: tagTokens.tag.yellow.content, content: tagTokens.tag.yellow.bg, icon: tagTokens.tag.yellow.bg },
+    green: { background: tagTokens.tag.green.content, content: tagTokens.tag.green.bg, icon: tagTokens.tag.green.bg },
+    blue: { background: tagTokens.tag.blue.content, content: tagTokens.tag.blue.bg, icon: tagTokens.tag.blue.bg },
+    darkblue: { background: tagTokens.tag.darkblue.content, content: tagTokens.tag.darkblue.bg, icon: tagTokens.tag.darkblue.bg },
+    indigo: { background: tagTokens.tag.indigo.content, content: tagTokens.tag.indigo.bg, icon: tagTokens.tag.indigo.bg },
+};
+const SQUARE_SIZE_CONFIG = {
+    xs: {
+        height: `${tagTokens.tag.xs.height}px`,
+        paddingX: `${tagTokens.tag.xs.paddingX}px`,
+        gap: `${tagTokens.tag.xs.gap}px`,
+        fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.xs.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.xs.icon),
+        radius: `${tagTokens.tag.xs.radius}px`,
+    },
+    sm: {
+        height: `${tagTokens.tag.sm.height}px`,
+        paddingX: `${tagTokens.tag.sm.paddingX}px`,
+        gap: `${tagTokens.tag.sm.gap}px`,
+        fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.sm.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.sm.icon),
+        radius: `${tagTokens.tag.sm.radius}px`,
+    },
+    md: {
+        height: `${tagTokens.tag.md.height}px`,
+        paddingX: `${tagTokens.tag.md.paddingX}px`,
+        gap: `${tagTokens.tag.md.gap}px`,
+        fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
+        fontWeight: tagTokens.tag.md.typography.fontWeight,
+        lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
+        iconSize: Number(tagTokens.tag.md.icon),
+        radius: `${tagTokens.tag.md.radius}px`,
+    },
+};
+const PILL_SIZE_CONFIG = {
+    xs: { ...SQUARE_SIZE_CONFIG.xs, radius: '999px' },
+    sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
+    md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
+};
+const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
+    const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
+    return [
+        `${shape}_${size}_${color}`,
+        {
+            shape,
+            size,
+            color,
+            ...sizeConfig,
+            ...TAG_COLOR_CONFIG[color],
+        },
+    ];
+}))));
+const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
+
+const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}`;
+
+const SdTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    name = 'square_sm_grey';
+    label = '';
+    icon;
+    isLeft = true;
+    get resolvedConfig() {
+        if (!isTagName(this.name)) {
+            throw new Error(`Invalid sd-tag name: ${this.name}`);
+        }
+        return TAG_CONFIG[this.name];
+    }
+    renderIcon(color, size) {
+        if (!this.icon)
+            return null;
+        return index.h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
+    }
+    render() {
+        const config = this.resolvedConfig;
+        const iconNode = this.renderIcon(config.icon, config.iconSize);
+        return (index.h("span", { key: 'd54a1ff06a6012b9774184f7578cf2765322847c', class: "sd-tag", style: {
+                '--sd-tag-background': config.background,
+                '--sd-tag-content': config.content,
+                '--sd-tag-height': config.height,
+                '--sd-tag-padding-x': config.paddingX,
+                '--sd-tag-gap': config.gap,
+                '--sd-tag-font-size': config.fontSize,
+                '--sd-tag-font-weight': config.fontWeight,
+                '--sd-tag-line-height': config.lineHeight,
+                '--sd-tag-radius': config.radius,
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, index.h("span", { key: '1660447d9b14b42e1220bfc5c3c0f8918a0f29a0', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+    }
+};
+SdTag.style = sdTagCss();
+
+exports.sd_tag = SdTag;

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -71,8 +71,12 @@ const SdTextLink = class {
     };
     render() {
         const typo = this.underline ? TEXT_LINK_TYPOGRAPHY.underline : TEXT_LINK_TYPOGRAPHY.default;
-        const contentColor = this.disabled ? TEXT_LINK_COLORS.content.disabled : TEXT_LINK_COLORS.content.default;
-        const iconColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : (this.iconColor || TEXT_LINK_COLORS.icon.default);
+        const contentColor = this.disabled
+            ? TEXT_LINK_COLORS.content.disabled
+            : TEXT_LINK_COLORS.content.default;
+        const iconColor = this.disabled
+            ? TEXT_LINK_COLORS.icon.disabled
+            : this.iconColor || TEXT_LINK_COLORS.icon.default;
         const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
         const cssVars = {
             '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
@@ -82,16 +86,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (index.h("span", { key: '3345bf7ddd99b9eeca4e8e6014f88e5f4505665e', class: {
+        return (index.h("span", { key: '280bf34fb5caa781e9856daf40fb8060bc2c5ad1', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: 'e8f1cf6482745bce5856988d5e30702d807335db', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: '09293467bc7289dd587a5ed0fc4b2cedbc1d925a', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '10330d4acc1e323997804146629e3397605b9d58', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '360d18168152ef09d2e94c78682f962f66136b1b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'bb24813bd296ffbdbf9d46ee18382ebea1338a0a', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: 'e5ee0dc6b5510b8b4e28e33f8a8c7515c1e9ec44', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '01def7dd04278fce78f9eb49efd857999fa255db', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '6989fe375a6f3fa02e57c13e0fbf8d1bfa4180ef', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/cjs/sd-textarea.cjs.entry.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var index = require('./index-Qvv0fGgj.js');
+
+const sdTextareaCss = () => `sd-textarea{display:block}sd-textarea .sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #AAAAAA;border-radius:4px;background:white}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:4px 8px;font-family:inherit;font-size:12px;line-height:20px;color:#333333;resize:vertical}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:#AAAAAA}sd-textarea .sd-textarea--hovered .sd-textarea__content,sd-textarea .sd-textarea--focused .sd-textarea__content{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}sd-textarea .sd-textarea--disabled{cursor:not-allowed !important;box-shadow:none !important}sd-textarea .sd-textarea--disabled .sd-textarea__content{background:#EEEEEE !important;border:1px solid #CCCCCC !important;color:#888888 !important}sd-textarea .sd-textarea--disabled .sd-textarea__content .sd-textarea__native{cursor:not-allowed !important;color:#888888 !important}sd-textarea .sd-textarea .sd-textarea__footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__help-text{font-size:12px;line-height:20px;font-weight:400;color:#222222}sd-textarea .sd-textarea .sd-textarea__counter{color:#CCCCCC;margin-left:auto}`;
+
+const SdTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.input = index.createEvent(this, "sdUpdate");
+        this.focus = index.createEvent(this, "sdFocus");
+        this.blur = index.createEvent(this, "sdBlur");
+    }
+    get host() { return index.getElement(this); }
+    value = null;
+    name;
+    disabled = false;
+    autoFocus = false;
+    textareaClass = '';
+    helpText;
+    maxLength;
+    placeholder = '입력해 주세요.';
+    internalValue = null;
+    focused = false;
+    hovered = false;
+    nativeEl = undefined;
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdFocus() {
+        this.nativeEl?.focus();
+    }
+    async getNativeElement() {
+        return this.nativeEl || null;
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.internalValue = target.value;
+    }
+    handleFocus(type, event) {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    }
+    getTextareaStatus() {
+        if (this.disabled)
+            return 'sd-textarea--disabled';
+        if (this.hovered)
+            return 'sd-textarea--hovered';
+        if (this.focused)
+            return 'sd-textarea--focused';
+        return '';
+    }
+    getMaxLengthCounter() {
+        if (this.maxLength === undefined) {
+            return null;
+        }
+        const currentLength = (this.internalValue || '').length;
+        return `${currentLength}/${this.maxLength}`;
+    }
+    hasFooter() {
+        return this.helpText !== undefined || this.maxLength !== undefined;
+    }
+    render() {
+        const maxLengthCounter = this.getMaxLengthCounter();
+        return (index.h("div", { key: 'ac860221577a4451a7ebcc796c02ff1f013a039d', class: {
+                'sd-textarea': true,
+                [this.getTextareaStatus()]: true,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '752ebb2e4f3f806216a522e8e743ed535e59962d', class: "sd-textarea__content" }, index.h("textarea", { key: '71edd37275617e81e2f8511fd325023469813611', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: 'f386d7825022ad451fe23783eb341eb5ad4e5a4f', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'f526ff0fee23af6e7ccf6dff34c0926745c02950', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: 'adc899695ff0bc4eec7c95e97fcf6baf078abf0e', class: "sd-textarea__counter" }, maxLengthCounter)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdTextarea.style = sdTextareaCss();
+
+exports.sd_textarea = SdTextarea;

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: 'ea70acd97b25230c2c2ae74504381fe00d458043', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '14a9440ade2a9de3437b54f9b4af31d2d8357e08', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/cjs/sd-toast.cjs.entry.js

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: 'd8e1a82c9daebbe6b262bedcecd3fcdb5d9cdff6', style: {
+        return (index.h("div", { key: '22514e8517b4f12400e09d9d64c2c2b8906cb273', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'ef1c9243616c34947bd03a8de734b28fd7d32bd4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'ef4ff52c084175eb34f1e88b69258b72966af947', class: "sd-toast__icon" }, index.h("sd-icon", { key: '7c8f49358fb158807f09855c169ec99f3dcd9469', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'b229d53142ab92037b8c409da478305bba954710', class: "sd-toast__content" }, index.h("span", { key: '1c623880c6e6e7d5d5a0fbaab980774cc494ab82', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '9ff007a2436fd16519e22f024486a40a3c9f6ff9', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '4b2371414437c7f3c9c70ec3b44879d0b6bbc212', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '3aed44c8b9bf783445cb49d4fc513b086f5fc428', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, index.h("div", { key: 'f8b8d0050d2775488f4d70e5054237f4e3f7b0b4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a511007335db6e8c2131b554a5b77e2e0a383d73', class: "sd-toast__icon" }, index.h("sd-icon", { key: '86df116f1a3533bac738adbaefa5c1aed93a4535', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '0a4db0a2bc7b3bcd741006dcc8228079e000f1a3', class: "sd-toast__content" }, index.h("span", { key: '66be2d5dcd83dd47036d08b0be65f8823acd53b4', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'b69bc8b1ee31dd860005e39cd56ccc97c505af67', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '300eaefa372b13693cdcb5a2248d1bf6b8f8ec8d', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '529a461269955fc5547bf8d7fa622838aa5b8237', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'c8e3adb9201066f7e39ff49df97e80cd4a716345', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '8fb523287f4d593a455a2366632797098401398e', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '63d34a72c01e478d55b4a64ff375e6f8eebc560a', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '450cb27e4d66c4b9b8a2f0d56efa3eeabc9dcced', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '60d9d2c1feca4256b7a279bc64e52da8e9f81995', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'd25f6af7f9c6ea95e423a39ff44c394ad9624fe6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '52383a1ca0f17666fdc386beed30512e7349b470', class: "sd-toggle__label" }, this.label), index.h("div", { key: '32c76872e30e2d8b1b06e096c394ee1d3dfc4381', class: "sd-toggle__track" }, index.h("div", { key: '0ec405309e322492ed7af4e0ddf115da87d03150', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '4a2174a50db389a4ff8de2fae632039350abf0d7', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'a35acaa1a6372a69103faa3dc9b18b9db5d33584', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'af39b9be93e5ce35574d0a13766e83e6b6d1fdd1', class: "sd-toggle__label" }, this.label), index.h("div", { key: '90eaed6cf788d947454a58fee4fe37d41aeb9aca', class: "sd-toggle__track" }, index.h("div", { key: '4830da4dc05be1f7c1c147b330e8e0f10daa4045', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/useDatePicker-cK_XK_P6.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const daysInMonth = (date) => {
+    const year = Number(date.split('-')[0]);
+    const month = Number(date.split('-')[1]);
+    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
+
+const getToday = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+const today = getToday();
+
+const useDatePicker = () => {
+    const formatDate = (year, month, day) => {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    };
+    const createCalendar = (year, month) => {
+        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const prevMonthDays = Array.from({ length: firstDayIndex });
+        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
+        const afterMonthDays = Array.from({ length: remainingDays });
+        return { days, prevMonthDays, afterMonthDays };
+    };
+    const calculateYearMonth = (year, month, type) => {
+        let newYear = year;
+        let newMonth = type === 'prev' ? month - 1 : month + 1;
+        if (newMonth < 1) {
+            newYear = year - 1;
+            newMonth = 12;
+        }
+        else if (newMonth > 12) {
+            newYear = year + 1;
+            newMonth = 1;
+        }
+        return { newYear, newMonth };
+    };
+    return { formatDate, createCalendar, calculateYearMonth };
+};
+
+exports.today = today;
+exports.useDatePicker = useDatePicker;

package/dist/collection/collection-manifest.json

@@ -12,6 +12,7 @@
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",
     "components/sd-tabs/sd-tabs.js",
+    "components/sd-action-modal/sd-action-modal.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-button-v2/sd-button-v2.js",

package/dist/collection/components/assets/Add.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Add = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M12.0005 3.98682C12.4146 3.98682 12.7503 4.32273 12.7505 4.73682V11.2505H19.2632C19.6774 11.2505 20.0132 11.5863 20.0132 12.0005C20.0132 12.4147 19.6774 12.7505 19.2632 12.7505H12.7505V19.2632C12.7505 19.6774 12.4147 20.0132 12.0005 20.0132C11.5863 20.0132 11.2505 19.6774 11.2505 19.2632V12.7505H4.73682C4.32273 12.7503 3.98682 12.4146 3.98682 12.0005C3.98682 11.5864 4.32273 11.2506 4.73682 11.2505H11.2505V4.73682C11.2506 4.32273 11.5864 3.98682 12.0005 3.98682Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Alert.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Alert = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.4755 3.338C13.642 2.65802 15.107 3.49955 15.1073 4.84972V19.1495C15.1071 20.4613 13.7164 21.3068 12.5516 20.7032L5.90027 17.2569H4.77332C3.25468 17.2568 2.02338 16.0256 2.02332 14.5069V9.93273C2.02332 8.41402 3.25464 7.18286 4.77332 7.18273H5.87878L12.4755 3.338ZM13.6073 4.84972C13.607 4.65712 13.3978 4.53707 13.2313 4.6339L6.83289 8.36241V16.0499L13.2421 19.3712C13.4084 19.4573 13.6071 19.3368 13.6073 19.1495V4.84972ZM4.77332 8.68273C4.08307 8.68286 3.52332 9.24245 3.52332 9.93273V14.5069C3.52338 15.1972 4.08311 15.7568 4.77332 15.7569H5.33289V8.68273H4.77332Z", fill: "currentColor" }), h("path", { d: "M18.7274 7.16124C19.0245 6.87261 19.5065 6.87261 19.8036 7.16124C22.7006 9.97598 22.7006 14.5398 19.8036 17.3546C19.5065 17.643 19.0245 17.643 18.7274 17.3546C18.4304 17.066 18.4305 16.5983 18.7274 16.3097C21.0306 14.0721 21.0306 10.4437 18.7274 8.20616C18.4304 7.91753 18.4303 7.44986 18.7274 7.16124Z", fill: "currentColor" }), h("path", { d: "M16.5214 9.3048C16.8184 9.01632 17.2995 9.01632 17.5966 9.3048C19.2754 10.9358 19.2754 13.5801 17.5966 15.211C17.2995 15.4994 16.8184 15.4994 16.5214 15.211C16.2243 14.9225 16.2244 14.4548 16.5214 14.1661C17.6058 13.1124 17.6058 11.4034 16.5214 10.3497C16.2243 10.0611 16.2243 9.59343 16.5214 9.3048Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/AlignKorean.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const AlignKorean = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.74994 11.5C8.16415 11.5 8.49994 11.8358 8.49994 12.25V13.5H10.7499C11.1642 13.5 11.4999 13.8358 11.4999 14.25C11.4999 14.6642 11.1642 15 10.7499 15H8.49994C9.88065 15 10.9999 16.1193 10.9999 17.5C10.9999 18.8807 9.88065 20 8.49994 20H6.74994C5.36923 20 4.24994 18.8807 4.24994 17.5C4.24994 16.1193 5.36923 15 6.74994 15H4.24994C3.83573 15 3.49994 14.6642 3.49994 14.25C3.49994 13.8358 3.83573 13.5 4.24994 13.5H6.99994V12.25C6.99994 11.8358 7.33573 11.5 7.74994 11.5ZM6.74994 16.5C6.19765 16.5 5.74994 16.9477 5.74994 17.5C5.74994 18.0523 6.19765 18.5 6.74994 18.5H8.49994C9.05222 18.5 9.49994 18.0523 9.49994 17.5C9.49994 16.9477 9.05222 16.5 8.49994 16.5H6.74994Z", fill: "currentColor" }), h("path", { d: "M17.2499 4C17.6642 4 17.9999 4.33579 17.9999 4.75V17.3047L19.1943 15.9873C19.4724 15.6803 19.9469 15.6565 20.2538 15.9346C20.5608 16.2127 20.5837 16.6872 20.3056 16.9941L17.8056 19.7539C17.6634 19.9107 17.4616 20 17.2499 20C17.0383 20 16.8364 19.9107 16.6943 19.7539L14.1943 16.9941C13.9162 16.6872 13.9391 16.2127 14.246 15.9346C14.553 15.6565 15.0275 15.6803 15.3056 15.9873L16.4999 17.3047V4.75C16.4999 4.33579 16.8357 4 17.2499 4Z", fill: "currentColor" }), h("path", { d: "M9.24994 4C10.2164 4 10.9999 4.7835 10.9999 5.75V10.25C10.9999 10.6642 10.6642 11 10.2499 11C9.83573 11 9.49994 10.6642 9.49994 10.25V5.75C9.49994 5.61193 9.38801 5.5 9.24994 5.5H4.24994C3.83573 5.5 3.49994 5.16421 3.49994 4.75C3.49994 4.33579 3.83573 4 4.24994 4H9.24994Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Archive.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Archive = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.7998 2.0498C5.21396 2.0498 5.54971 2.38568 5.5498 2.7998V6.64258H10.4502V5.91797C10.4502 5.48024 10.6226 5.05999 10.9297 4.74805C11.2431 4.42976 11.6715 4.25 12.1182 4.25H14.7422C15.4983 4.25008 16.1694 4.73573 16.4053 5.4541L16.4873 5.70312C16.5211 5.8056 16.6167 5.875 16.7246 5.875H18.2002C19.1666 5.8751 19.9502 6.65856 19.9502 7.625V10.5C19.9502 11.4664 19.1666 12.2499 18.2002 12.25H12.2002C11.2337 12.25 10.4502 11.4665 10.4502 10.5V8.14258H5.5498V17.2998C5.5498 17.4378 5.66182 17.5497 5.7998 17.5498H10.4502V15.6182C10.4502 15.1804 10.6226 14.7602 10.9297 14.4482C11.2431 14.1299 11.6714 13.9502 12.1182 13.9502H14.7422C15.4983 13.9503 16.1694 14.4359 16.4053 15.1543L16.4873 15.4033C16.5211 15.5057 16.6167 15.5752 16.7246 15.5752H18.2002C19.1666 15.5753 19.9502 16.3588 19.9502 17.3252V20.2002C19.9501 21.1665 19.1665 21.9501 18.2002 21.9502H12.2002C11.2338 21.9502 10.4503 21.1666 10.4502 20.2002V19.0498H5.7998C4.83339 19.0497 4.0498 18.2662 4.0498 17.2998V2.7998C4.0499 2.38574 4.38574 2.0499 4.7998 2.0498ZM12.1182 15.4502C12.0733 15.4502 12.0295 15.468 11.998 15.5C11.9672 15.5313 11.9502 15.5742 11.9502 15.6182V20.2002C11.9503 20.3382 12.0622 20.4502 12.2002 20.4502H18.2002C18.3381 20.4501 18.4501 20.3381 18.4502 20.2002V17.3252C18.4502 17.1872 18.3382 17.0753 18.2002 17.0752H16.7246C15.9685 17.0752 15.2974 16.5894 15.0615 15.8711L14.9805 15.6221C14.9468 15.5195 14.8501 15.4503 14.7422 15.4502H12.1182ZM12.1182 5.75C12.0733 5.75 12.0295 5.76787 11.998 5.7998C11.9672 5.83115 11.9502 5.874 11.9502 5.91797V10.5C11.9502 10.6381 12.0621 10.75 12.2002 10.75H18.2002C18.3382 10.7499 18.4502 10.638 18.4502 10.5V7.625C18.4502 7.48699 18.3382 7.3751 18.2002 7.375H16.7246C15.9684 7.375 15.2974 6.88934 15.0615 6.1709L14.9805 5.92188C14.9468 5.81931 14.8501 5.75008 14.7422 5.75H12.1182Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/ArrowDown.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const ArrowDown = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.2502 2.77502C11.2502 2.36081 11.586 2.02502 12.0002 2.02502C12.4143 2.02513 12.7502 2.36088 12.7502 2.77502V19.4147L18.6701 13.4948C18.963 13.2021 19.4378 13.2019 19.7307 13.4948C20.0233 13.7876 20.0233 14.2625 19.7307 14.5553L12.5305 21.7555C12.3899 21.8961 12.199 21.9752 12.0002 21.9752C11.8014 21.9752 11.6105 21.896 11.4699 21.7555L4.26972 14.5553C3.97683 14.2624 3.97683 13.7876 4.26972 13.4948C4.56261 13.2019 5.03737 13.2019 5.33027 13.4948L11.2502 19.4147V2.77502Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/ArrowLeft.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const ArrowLeft = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M9.44492 4.26967C9.73782 3.97687 10.2126 3.97681 10.5055 4.26967C10.7982 4.56254 10.7982 5.03735 10.5055 5.33022L4.58554 11.2501H21.2252C21.6393 11.2502 21.9752 11.586 21.9752 12.0001C21.9751 12.4142 21.6392 12.75 21.2252 12.7501H4.58554L10.5055 18.6701C10.7981 18.963 10.7983 19.4378 10.5055 19.7306C10.2127 20.0233 9.7378 20.0232 9.44492 19.7306L2.24472 12.5304C2.10411 12.3898 2.02505 12.199 2.02499 12.0001C2.02499 11.8013 2.10413 11.6105 2.24472 11.4699L9.44492 4.26967Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/ArrowRight.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const ArrowRight = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M13.4947 4.26972C13.7876 3.97683 14.2624 3.97683 14.5553 4.26972L21.7555 11.4699C21.896 11.6105 21.9752 11.8014 21.9752 12.0002C21.9751 12.199 21.8961 12.3899 21.7555 12.5305L14.5553 19.7307C14.2624 20.0233 13.7876 20.0233 13.4947 19.7307C13.2019 19.4378 13.202 18.963 13.4947 18.6701L19.4146 12.7502H2.77499C2.36085 12.7502 2.0251 12.4143 2.02499 12.0002C2.02499 11.586 2.36078 11.2502 2.77499 11.2502H19.4146L13.4947 5.33027C13.2018 5.03737 13.2018 4.56261 13.4947 4.26972Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/ArrowUp.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const ArrowUp = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.2502 21.2252V4.58557L5.33025 10.5055C5.03738 10.7983 4.56257 10.7983 4.2697 10.5055C3.97684 10.2126 3.9769 9.73785 4.2697 9.44495L11.4699 2.24475L11.5842 2.151C11.7064 2.06953 11.8511 2.02502 12.0002 2.02502C12.199 2.02508 12.3898 2.10414 12.5304 2.24475L19.7306 9.44495C20.0232 9.73783 20.0233 10.2127 19.7306 10.5055C19.4378 10.7983 18.963 10.7981 18.6701 10.5055L12.7502 4.58557V21.2252C12.7501 21.6393 12.4142 21.9751 12.0002 21.9752C11.586 21.9752 11.2503 21.6393 11.2502 21.2252Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/AttachFile.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const AttachFile = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M12.6523 3.07379C14.3559 1.37019 17.1185 1.37033 18.8222 3.07379C20.5259 4.77745 20.5259 7.54005 18.8222 9.24371L11.2519 16.814C10.1291 17.9368 8.30824 17.9368 7.18548 16.814C6.06307 15.6913 6.06305 13.8713 7.18548 12.7486L14.2509 5.68316C14.5438 5.39039 15.0186 5.39041 15.3115 5.68316C15.6043 5.97602 15.6043 6.45081 15.3115 6.74371L8.24603 13.8091C7.70938 14.346 7.7094 15.2166 8.24603 15.7535C8.783 16.2904 9.65437 16.2904 10.1913 15.7535L17.7617 8.18316C18.8794 7.06538 18.8792 5.25321 17.7617 4.13531C16.6438 3.01743 14.8317 3.01743 13.7138 4.13531L5.11614 12.732C3.45641 14.3917 3.45641 17.083 5.11614 18.7427L5.25677 18.8843C6.91645 20.544 9.60777 20.5439 11.2675 18.8843L18.748 11.4039C19.0409 11.1112 19.5157 11.1111 19.8085 11.4039C20.1013 11.6967 20.1012 12.1715 19.8085 12.4644L12.3281 19.9449C10.0825 22.1903 6.44169 22.1904 4.19622 19.9449L4.0556 19.8033C1.81008 17.5578 1.81008 13.917 4.0556 11.6714L12.6523 3.07379Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Barcode.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Barcode = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M5.25 3C5.66421 3 6 3.33579 6 3.75V20.25C6 20.6642 5.66421 21 5.25 21H3.75C3.33579 21 3 20.6642 3 20.25V3.75C3 3.33579 3.33579 3 3.75 3H5.25Z", fill: "currentColor" }), h("path", { d: "M7.5 3C7.91421 3 8.25 3.33579 8.25 3.75V20.25C8.25 20.6642 7.91421 21 7.5 21C7.08579 21 6.75 20.6642 6.75 20.25V3.75C6.75 3.33579 7.08579 3 7.5 3Z", fill: "currentColor" }), h("path", { d: "M9.75 3C10.1642 3 10.5 3.33579 10.5 3.75V20.25C10.5 20.6642 10.1642 21 9.75 21C9.33579 21 9 20.6642 9 20.25V3.75C9 3.33579 9.33579 3 9.75 3Z", fill: "currentColor" }), h("path", { d: "M13.5 3C13.9142 3 14.25 3.33579 14.25 3.75V20.25C14.25 20.6642 13.9142 21 13.5 21H12C11.5858 21 11.25 20.6642 11.25 20.25V3.75C11.25 3.33579 11.5858 3 12 3H13.5Z", fill: "currentColor" }), h("path", { d: "M15.75 3C16.1642 3 16.5 3.33579 16.5 3.75V20.25C16.5 20.6642 16.1642 21 15.75 21C15.3358 21 15 20.6642 15 20.25V3.75C15 3.33579 15.3358 3 15.75 3Z", fill: "currentColor" }), h("path", { d: "M20.25 3C20.6642 3 21 3.33579 21 3.75V20.25C21 20.6642 20.6642 21 20.25 21H18.75C18.3358 21 18 20.6642 18 20.25V3.75C18 3.33579 18.3358 3 18.75 3H20.25Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Bell.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Bell = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M14.8 18.8086C14.9105 18.8086 15.0008 18.8985 14.9944 19.0088C14.8972 20.6781 13.5938 22 12.0002 22C10.4066 22 9.10324 20.6781 9.00609 19.0088C8.99968 18.8985 9.08997 18.8086 9.20043 18.8086H14.8Z", fill: "currentColor" }), h("path", { d: "M12.0002 2C12.5525 2.00002 13.0002 2.44772 13.0002 3V4.20898C15.9941 4.69573 18.2815 7.3314 18.2815 10.5107V14.1582C18.2815 15.0811 19.1207 15.8005 19.7629 16.4531C20.4046 17.1057 19.6388 17.957 18.7307 17.957H5.26976C4.36161 17.957 3.59581 17.1057 4.23754 16.4531C4.87979 15.8005 5.71898 15.0811 5.71898 14.1582V10.5107C5.71898 7.33139 8.00632 4.69572 11.0002 4.20898V3C11.0002 2.44772 11.4479 2 12.0002 2Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Board.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Board = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M15 14.25C15.4142 14.25 15.75 14.5858 15.75 15C15.75 15.4142 15.4142 15.75 15 15.75H9C8.58579 15.75 8.25 15.4142 8.25 15C8.25 14.5858 8.58579 14.25 9 14.25H15Z", fill: "currentColor" }), h("path", { d: "M15 10.25C15.4142 10.25 15.75 10.5858 15.75 11C15.75 11.4142 15.4142 11.75 15 11.75H9C8.58579 11.75 8.25 11.4142 8.25 11C8.25 10.5858 8.58579 10.25 9 10.25H15Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.75 2.0498C14.5699 2.0498 15.2733 2.54394 15.582 3.25H18.2002C19.1665 3.25021 19.9502 4.03363 19.9502 5V20.2002C19.9501 21.1665 19.1664 21.95 18.2002 21.9502H5.7998C4.83346 21.9501 4.04991 21.1665 4.0498 20.2002V5C4.0498 4.03356 4.83339 3.2501 5.7998 3.25H8.41797C8.72672 2.54394 9.43009 2.0498 10.25 2.0498H13.75ZM5.7998 4.75C5.66182 4.7501 5.5498 4.86199 5.5498 5V20.2002C5.54991 20.3381 5.66188 20.4501 5.7998 20.4502H18.2002C18.338 20.45 18.4501 20.338 18.4502 20.2002V5C18.4502 4.86206 18.3381 4.75021 18.2002 4.75H15.6211C15.3371 5.50881 14.6079 6.0498 13.75 6.0498H10.25C9.39207 6.0498 8.66292 5.50881 8.37891 4.75H5.7998ZM10.25 3.5498C9.97392 3.5498 9.7501 3.77375 9.75 4.0498C9.75 4.32595 9.97386 4.5498 10.25 4.5498H13.75C14.0261 4.5498 14.25 4.32595 14.25 4.0498C14.2499 3.77375 14.0261 3.5498 13.75 3.5498H10.25Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Box.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Box = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.4014 2.21916C11.7875 2.07874 12.2115 2.07886 12.5977 2.21916L20.7979 5.20158C21.4894 5.45308 21.9502 6.11024 21.9502 6.84612V17.1547C21.95 17.8904 21.4893 18.5478 20.7979 18.7992L12.5977 21.7807C12.2114 21.9211 11.7876 21.9211 11.4014 21.7807L3.20215 18.7992C2.51079 18.5478 2.04997 17.8904 2.0498 17.1547V6.84612C2.0498 6.1103 2.51067 5.45312 3.20215 5.20158L11.4014 2.21916ZM3.5498 17.1547C3.54997 17.2596 3.61626 17.3532 3.71484 17.3891L11.25 20.1293V9.66545L8.15039 8.63225V11.4252C8.15018 11.8391 7.81429 12.175 7.40039 12.1752C6.98631 12.1752 6.6506 11.8393 6.65039 11.4252V8.13225L3.5498 7.09905V17.1547ZM12.75 9.66545V20.1293L20.2852 17.3891C20.3838 17.3532 20.45 17.2597 20.4502 17.1547V7.09905L12.75 9.66545ZM15.9854 5.04729C15.914 5.12066 15.8279 5.18189 15.7266 5.22209L9.75195 7.5844L12 8.3344L18.7949 6.06877L15.9854 5.04729ZM12.085 3.62932C12.0299 3.6094 11.9691 3.6093 11.9141 3.62932L5.2041 6.06877L7.54004 6.84709L13.9561 4.30901L12.085 3.62932Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/Camera.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Camera = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 7.75C14.6234 7.75 16.75 9.87665 16.75 12.5C16.75 15.1234 14.6234 17.25 12 17.25C9.37665 17.25 7.25 15.1234 7.25 12.5C7.25 9.87665 9.37665 7.75 12 7.75ZM12 9.25C10.2051 9.25 8.75 10.7051 8.75 12.5C8.75 14.2949 10.2051 15.75 12 15.75C13.7949 15.75 15.25 14.2949 15.25 12.5C15.25 10.7051 13.7949 9.25 12 9.25Z", fill: "currentColor" }), h("path", { d: "M19.1426 8.17871C19.6685 8.17871 20.0947 8.60492 20.0947 9.13086C20.0947 9.65685 19.6686 10.083 19.1426 10.083C18.6167 10.0829 18.1904 9.65677 18.1904 9.13086C18.1905 8.605 18.6167 8.17884 19.1426 8.17871Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14.5352 2.66699C15.1603 2.66705 15.7382 3.00059 16.0508 3.54199L17.123 5.39941C17.1677 5.47635 17.2499 5.52428 17.3389 5.52441H20C21.5188 5.52441 22.75 6.75563 22.75 8.27441V18.084C22.7497 19.6025 21.5186 20.834 20 20.834H4C2.48141 20.834 1.25031 19.6025 1.25 18.084V8.27441C1.25 6.75563 2.48122 5.52441 4 5.52441H6.43945C6.52862 5.52441 6.61154 5.47653 6.65625 5.39941L7.72852 3.54199C8.04113 3.00055 8.61893 2.66699 9.24414 2.66699H14.5352ZM9.24414 4.16699C9.15482 4.16699 9.072 4.21464 9.02734 4.29199L7.95508 6.14941C7.64241 6.69058 7.06448 7.02441 6.43945 7.02441H4C3.30964 7.02441 2.75 7.58406 2.75 8.27441V18.084C2.75031 18.7741 3.30984 19.334 4 19.334H20C20.6902 19.334 21.2497 18.7741 21.25 18.084V8.27441C21.25 7.58406 20.6904 7.02441 20 7.02441H17.3389C16.7139 7.02428 16.1358 6.69064 15.8232 6.14941L14.752 4.29199C14.7073 4.21469 14.6244 4.16705 14.5352 4.16699H9.24414Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/CancelFill.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const CancelFill = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M15.9697 6.96973C16.2626 6.67683 16.7374 6.67683 17.0303 6.96973C17.3232 7.26262 17.3232 7.73738 17.0303 8.03027L13.0605 12L17.0303 15.9697C17.3229 16.2626 17.3231 16.7375 17.0303 17.0303C16.7375 17.3231 16.2626 17.3229 15.9697 17.0303L12 13.0605L8.03027 17.0303C7.73736 17.3229 7.26253 17.3231 6.96973 17.0303C6.67692 16.7375 6.6771 16.2626 6.96973 15.9697L10.9395 12L6.96973 8.03027C6.67683 7.73738 6.67683 7.26262 6.96973 6.96973C7.26262 6.67683 7.73738 6.67683 8.03027 6.96973L12 10.9395L15.9697 6.96973Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12 1.0498C18.0474 1.04991 22.9501 5.95263 22.9502 12C22.9501 18.0474 18.0474 22.9501 12 22.9502C5.95266 22.9501 1.04991 18.0473 1.0498 12C1.0499 5.95265 5.95265 1.04994 12 1.0498ZM12 2.5498C6.78108 2.54994 2.5499 6.78107 2.5498 12C2.54991 17.2189 6.78109 21.4501 12 21.4502C17.2189 21.4501 21.4501 17.2189 21.4502 12C21.4501 6.78106 17.2189 2.54991 12 2.5498Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/CancelOutline.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const CancelOutline = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM17.0303 6.96973C16.7374 6.67684 16.2626 6.67684 15.9697 6.96973L12 10.9395L8.03027 6.96973C7.73738 6.67684 7.26262 6.67684 6.96973 6.96973C6.67683 7.26262 6.67684 7.73738 6.96973 8.03027L10.9395 12L6.96973 15.9697C6.67711 16.2626 6.67693 16.7375 6.96973 17.0303C7.26253 17.323 7.73738 17.3229 8.03027 17.0303L12 13.0605L15.9697 17.0303C16.2626 17.3228 16.7375 17.3231 17.0303 17.0303C17.3231 16.7375 17.3228 16.2626 17.0303 15.9697L13.0605 12L17.0303 8.03027C17.3231 7.7374 17.3231 7.26262 17.0303 6.96973Z", fill: "currentColor" })));
+};

package/dist/collection/components/assets/CaretDown.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const CaretDown = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.8033 17.754L2.72757 6.40942C2.59557 6.24442 2.71304 6 2.92435 6H21.0757C21.287 6 21.4045 6.24442 21.2725 6.40942L12.1968 17.754C12.0959 17.8801 11.9041 17.8801 11.8033 17.754Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+};

package/dist/collection/components/assets/CaretLeft.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const CaretLeft = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M6.24594 12.1968L17.5905 21.2725C17.7555 21.4045 18 21.287 18 21.0757V2.92435C18 2.71304 17.7555 2.59557 17.5905 2.72757L6.24594 11.8033C6.11984 11.9041 6.11984 12.0959 6.24594 12.1968Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+};

package/dist/collection/components/assets/CaretRight.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const CaretRight = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M17.754 12.1968L6.40942 21.2725C6.24442 21.4045 6 21.287 6 21.0757L6 2.92435C6 2.71304 6.24442 2.59557 6.40942 2.72757L17.754 11.8033C17.8801 11.9041 17.8801 12.0959 17.754 12.1968Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+};

package/dist/collection/components/assets/CaretUp.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const CaretUp = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M11.8033 6.24594L2.72757 17.5905C2.59557 17.7555 2.71304 18 2.92435 18H21.0757C21.287 18 21.4045 17.7555 21.2725 17.5905L12.1968 6.24594C12.0959 6.11984 11.9041 6.11984 11.8033 6.24594Z", fill: "currentColor", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));
+};

package/dist/collection/components/assets/Check.js

@@ -0,0 +1,5 @@
+import { h } from "@stencil/core";
+export const Check = (props) => {
+    const { size = 24, ...rest } = props;
+    return (h("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest }, h("path", { d: "M20.6621 5.86456C20.955 5.57167 21.4298 5.57168 21.7227 5.86456C22.0156 6.15746 22.0156 6.63222 21.7227 6.92511L10.5859 18.0618C10.1954 18.4523 9.56241 18.4523 9.17188 18.0618L2.27735 11.1683C1.98445 10.8754 1.98445 10.3996 2.27735 10.1068C2.57018 9.81416 3.04506 9.81416 3.3379 10.1068L9.87891 16.6478L20.6621 5.86456Z", fill: "currentColor" })));
+};