@sellmate/design-system 1.0.62 → 1.0.63

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 var component_button = require('./component.button-cqV-iCG5.js');
 var resolveColor = require('./resolveColor-LhfOKtTZ.js');
-var tooltipArrow = require('./tooltipArrow-CRCpqOYA.js');
+var tooltipArrow = require('./tooltipArrow-DhevfDPX.js');
 
-const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);background:var(--sd-button-bg-disabled, #E1E1E1);color:var(--sd-button-content-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
+const sdButtonCss = () => `sd-button{display:inline-flex;width:fit-content;height:fit-content}.sd-button{--sd-button-height:34px;--sd-button-padding-x:20px;--sd-button-gap:8px;--sd-button-font-family:inherit;--sd-button-font-size:16px;--sd-button-font-weight:500;--sd-button-text-decoration:none;--sd-button-label-min-width:auto;--sd-button-icon-only-size:var(--sd-button-height);text-decoration:none;cursor:pointer;border-radius:var(--sd-button-button-radius-sm, 4px);transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border:none;padding:0 var(--sd-button-padding-x);min-width:var(--sd-button-min-width, auto);min-height:var(--sd-button-height);font-family:var(--sd-button-font-family);font-size:var(--sd-button-font-size);font-weight:var(--sd-button-font-weight);text-decoration:var(--sd-button-text-decoration)}.sd-button--xs{--sd-button-height:var(--sd-button-button-xs-height, 24px);--sd-button-padding-x:var(--sd-button-button-xs-padding-x, 8px);--sd-button-gap:var(--sd-button-button-xs-gap, 4px);--sd-button-font-family:var(--sd-button-button-xs-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-xs-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-xs-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-xs-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-xs-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));line-height:20px}.sd-button--sm{--sd-button-height:var(--sd-button-button-sm-height, 28px);--sd-button-padding-x:var(--sd-button-button-sm-padding-x, 12px);--sd-button-gap:var(--sd-button-button-sm-gap, 6px);--sd-button-font-family:var(--sd-button-button-sm-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-sm-typography-font-size, 12px);--sd-button-font-weight:var(--sd-button-button-sm-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-sm-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-sm-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));line-height:20px}.sd-button--md{--sd-button-height:var(--sd-button-button-md-height, 34px);--sd-button-padding-x:var(--sd-button-button-md-padding-x, 20px);--sd-button-gap:var(--sd-button-button-md-gap, 8px);--sd-button-font-family:var(--sd-button-button-md-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-md-typography-font-size, 16px);--sd-button-font-weight:var(--sd-button-button-md-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-md-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-md-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-md-width, var(--sd-button-height));line-height:26px}.sd-button--lg{--sd-button-height:var(--sd-button-button-lg-height, 62px);--sd-button-padding-x:var(--sd-button-button-lg-padding-x, 28px);--sd-button-gap:var(--sd-button-button-lg-gap, 12px);--sd-button-font-family:var(--sd-button-button-lg-typography-font-family, inherit);--sd-button-font-size:var(--sd-button-button-lg-typography-font-size, 18px);--sd-button-font-weight:var(--sd-button-button-lg-typography-font-weight, 500);--sd-button-text-decoration:var(--sd-button-button-lg-typography-text-decoration, none);--sd-button-label-min-width:var(--sd-button-label-lg-min-width, auto);--sd-button-icon-only-size:var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));line-height:30px}.sd-button--has-label{--sd-button-min-width:var(--sd-button-label-min-width, auto)}.sd-button--primary{background-color:var(--button-color);color:white;transition:filter 0.2s ease}.sd-button--primary::before{content:"";position:absolute;inset:0;background:#000000;opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--primary:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.25}.sd-button--outline{background:white;border:var(--sd-button-button-border-width-default, 1px) solid var(--button-color);color:var(--button-color)}.sd-button--outline::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--outline:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--outline .sd-button__content{position:relative;z-index:1}.sd-button--ghost{background-color:transparent;color:var(--button-color);border-color:transparent}.sd-button--ghost::before{content:"";position:absolute;inset:0;background:var(--button-color);opacity:0;transition:opacity 0.2s ease;z-index:0}.sd-button--ghost:hover:not(.sd-button--disabled):not(.sd-button--loading)::before{opacity:0.15}.sd-button--ghost .sd-button__content{position:relative;z-index:1}.sd-button--disabled{border:var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);background:var(--sd-button-button-bg-disabled, #E1E1E1);color:var(--sd-button-button-text-disabled, #888888);cursor:not-allowed !important}.sd-button--icon-only{padding:0;width:var(--sd-button-icon-only-size, var(--sd-button-height));min-width:var(--sd-button-icon-only-size, var(--sd-button-height));height:var(--sd-button-icon-only-size, var(--sd-button-height))}.sd-button--no-hover:hover::before{opacity:0 !important}.sd-button .sd-button__content{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-button-gap);z-index:1;font-weight:inherit}`;
 
 const ICON_SIZES = {
     xs: Number(component_button.buttonTokens.button.xs.icon),
@@ -77,7 +77,17 @@ const field = {
 				fontSize: "12",
 				lineHeight: "20"
 			}
-		}},
+		},
+		md: {
+			height: "36",
+			gap: "8",
+			icon: "16",
+			typography: {
+				fontWeight: "700",
+				fontSize: "16",
+				lineHeight: "26"}
+		}
+	},
 	addonLabel: {
 		gap: "6",
 		paddingX: "12",
@@ -98,7 +108,28 @@ var fieldTokens = {
 	field: field
 };
 
-const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control{border:1px solid var(--sd-system-color-field-border-hover) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-system-space-field-sm-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-system-radius-field-sm) - 1px) 0 0 calc(var(--sd-system-radius-field-sm) - 1px)}sd-field .sd-field__wrapper{width:100%;height:var(--sd-system-size-field-sm-height);display:flex;align-items:center;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);cursor:pointer;-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:100%;display:flex;flex:1;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-system-radius-field-sm);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control,sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
+const sm = fieldTokens.field.label.sm;
+const md = fieldTokens.field.label.md;
+const FIELD_LABEL_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        gap: sm.gap,
+        icon: sm.icon,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        gap: md.gap,
+        icon: md.icon,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+
+const sdFieldCss = () => `sd-field{display:inline-flex;flex-flow:column nowrap;height:fit-content;width:100%}sd-field .sd-field *:focus,sd-field .sd-field *:focus-visible,sd-field .sd-field *:focus-within{outline:none !important}sd-field .sd-field.sd-field--disabled{cursor:not-allowed}sd-field .sd-field.sd-field--disabled .sd-field__wrapper{cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside{border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control{background-color:#E1E1E1;border-color:#CCCCCC;color:#888888;cursor:not-allowed !important}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label{display:flex;align-items:center;height:var(--sd-field-label-height);margin-right:var(--sd-field-label-margin-right)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__icon{margin-right:var(--sd-field-label-gap)}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__text{font-size:var(--sd-field-label-font-size);line-height:var(--sd-field-label-line-height);font-weight:var(--sd-field-label-font-weight);color:var(--sd-system-color-field-text-default);white-space:nowrap}sd-field .sd-field--has-label .sd-field__wrapper .sd-field__label__tooltip{margin-left:var(--sd-field-label-gap)}sd-field .sd-field--has-addon .sd-field__control .sd-field__addon{display:flex;gap:var(--sd-field-addon-gap);align-items:center;white-space:nowrap;padding:0 var(--sd-field-addon-padding-x);font-size:var(--sd-field-addon-font-size);line-height:var(--sd-field-addon-line-height);font-weight:var(--sd-field-addon-font-weight);background:var(--sd-field-addon-bg);border-right:var(--sd-field-addon-border-width) solid var(--sd-field-addon-border-color);border-radius:calc(var(--sd-field-control-radius) - 1px) 0 0 calc(var(--sd-field-control-radius) - 1px)}sd-field .sd-field__wrapper{width:100%;display:flex;align-items:flex-start;flex-flow:row nowrap;position:relative;color:var(--sd-system-color-field-text-default);-webkit-user-select:none;user-select:none}sd-field .sd-field__wrapper .sd-field__main{flex:1;min-width:0;display:flex;flex-direction:column}sd-field .sd-field__wrapper .sd-field__control{position:relative;height:var(--sd-field-wrapper-height);display:flex;min-width:0;border:1px solid var(--sd-system-color-field-border-default);border-radius:var(--sd-field-control-radius);background:var(--sd-system-color-field-bg-default)}sd-field .sd-field--error .sd-field__wrapper .sd-field__control:not(:hover){border:1px solid var(--sd-system-color-field-border-danger) !important}sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-success) !important}sd-field .sd-field:not(.sd-field--disabled) .sd-field__wrapper .sd-field__control:hover{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control{border:1px solid var(--sd-system-color-field-border-focus) !important;box-shadow:0px 0px 4px 0px rgba(0, 113, 255, 0.4)}sd-field .sd-field .sd-field__error-message{color:var(--sd-textinput-textinput-text-error-message);font-size:var(--sd-textinput-textinput-error-message-typography-font-size);line-height:var(--sd-textinput-textinput-error-message-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}sd-field .sd-field .sd-field__hint{color:var(--sd-textinput-textinput-text-hint);font-size:var(--sd-textinput-textinput-hint-typography-font-size);line-height:var(--sd-textinput-textinput-hint-typography-line-height);margin-top:var(--sd-textinput-textinput-contents-gap)}`;
 
 const FORM_PARENT_TAGS = [
     'sd-select',
@@ -128,6 +159,7 @@ const SdField = class {
     hint = '';
     errorMessage = '';
     width = '';
+    size = 'sm';
     // props - label
     label = '';
     addonLabel = '';
@@ -228,14 +260,20 @@ const SdField = class {
     render() {
         const addon = this.addonLabel;
         const addonTokens = fieldTokens.field.addonLabel;
-        const labelTokens = fieldTokens.field.label.sm;
+        const size = this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm';
+        const labelTokens = FIELD_LABEL_SIZE_MAP[size];
+        const sizeCssVars = {
+            '--sd-field-wrapper-height': `var(--sd-system-size-field-${size}-height)`,
+            '--sd-field-control-radius': `var(--sd-system-radius-field-${size})`,
+            '--sd-field-label-margin-right': `var(--sd-system-space-field-${size}-gap)`,
+        };
         const labelCssVars = this.label
             ? {
                 '--sd-field-label-height': `${labelTokens.height}px`,
                 '--sd-field-label-gap': `${labelTokens.gap}px`,
-                '--sd-field-label-font-size': `${labelTokens.typography.fontSize}px`,
-                '--sd-field-label-line-height': `${labelTokens.typography.lineHeight}px`,
-                '--sd-field-label-font-weight': labelTokens.typography.fontWeight,
+                '--sd-field-label-font-size': `${labelTokens.fontSize}px`,
+                '--sd-field-label-line-height': `${labelTokens.lineHeight}px`,
+                '--sd-field-label-font-weight': labelTokens.fontWeight,
             }
             : {};
         const addonCssVars = addon
@@ -252,25 +290,25 @@ const SdField = class {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (index.h("div", { key: '3e4be9c9f1744faa0f763f0adc86c70bdceb8bbd', class: {
+        return (index.h("div", { key: '72ffdb42c88b90eb60637b10c1330dc509ece812', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...labelCssVars, ...addonCssVars } }, index.h("div", { key: '240f8ffc487da6aa694aae2e2568a5c178233069', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: '8d8273dfcf65dd7fe0dd6e565313470b491970a0', class: {
-                'sd-field__control': true,
-                'sd-field__control--has-addon': !!addon,
-            }, style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, index.h("div", { key: 'fb5d90aea5a4988ec58984b4a85ed609f032549e', class: "sd-field__wrapper" }, this.renderLabel(this.label), index.h("div", { key: 'c0372be3a39ca1d6cebfe5e765d120751e39d03e', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, addon && index.h("div", { key: 'b08657bb5fe753defdd273464a5faeabc1a7e57e', class: "sd-field__addon" }, addon), index.h("slot", { key: '77c653b18f1cf4b3280e8deeff483ca22fbc0330' }))), this.errorMsg || this.errorMessage ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && index.h("div", { class: "sd-field__hint" }, this.hint))));
+                : {} }, index.h("div", { key: 'd203154db0eef4e73908d78ba3667710c51b6595', class: {
+                'sd-field__control': true,
+                'sd-field__control--has-addon': !!addon,
+            } }, addon && index.h("div", { key: '851b996010c4f0402df8b6bfe9ced0c8444bc591', class: "sd-field__addon" }, addon), index.h("slot", { key: '081b95a99090c3c1d2d28170500ac7be15452876' })), this.errorMsg || this.errorMessage ? (index.h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && index.h("div", { class: "sd-field__hint" }, this.hint))))));
     }
     renderLabel(label) {
         if (!label)
             return null;
-        return (index.h("label", { class: "sd-field__label" }, this.icon && (index.h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(fieldTokens.field.label.sm.icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), index.h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (index.h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
+        return (index.h("label", { class: "sd-field__label" }, this.icon && (index.h("sd-icon", { name: this.icon.name, size: this.icon.size ?? Number(FIELD_LABEL_SIZE_MAP[(this.size in FIELD_LABEL_SIZE_MAP ? this.size : 'sm')].icon), color: this.icon.color, rotate: this.icon.rotate, class: "sd-field__label__icon" })), index.h("div", { class: "sd-field__label__text" }, label), this.labelTooltip && (index.h("sd-tooltip", { class: "sd-field__label__tooltip", ...this.labelTooltipProps }, this.labelTooltip))));
     }
 };
 SdField.style = sdFieldCss();
@@ -541,14 +579,14 @@ const SdTooltip = class {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (index.h(index.Fragment, { key: '26a3cf140fdbc66fe79d9258f99082cdf0c79c60' }, index.h("div", { key: 'a47fb4ca41deecc63db4bc8d8e93419da8867e22', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: 'a728edde03eee82a0b4c72ea77a9cb918b27f709', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '7afcb975b1045126fd19d2f6186a43d744de5922', ref: el => (this.menuEl = el), class: {
+        return (index.h(index.Fragment, { key: '097722e57d6a808193e8fc0d48cebc80ee13848a' }, index.h("div", { key: '92c6fd83098faec1cfa405ace12530d0cb408395', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (index.h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (index.h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (index.h("sd-floating-portal", { key: 'd05d011181a8c183690607c974208e708ccba184', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, index.h("div", { key: '281c3994d52fcd1d6194edd12bd64ac9a42f5e71', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: '5c650247061d57b01adf3e53ddaa6d92c35a5e53', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '2bd40b24cd9c6015f1a3c5548b619c48b10df758' })), index.h("div", { key: 'cce2db4ea12874ab11ac0bd04fb4080b2778c9b3', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, index.h("i", { key: '87374c0a423bc037decdc820e118c65ea7b3f75f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, index.h(tooltipArrow.TooltipArrow, { key: '9cdd8215849973011a2339ed80bfb2863b1e374e' })), index.h("div", { key: '4f764958e07a8b2ed0ea093609f5a42d86fa3f3c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
 };
 SdTooltip.style = sdTooltipCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var resolveColor = require('./resolveColor-LhfOKtTZ.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 
@@ -11,7 +11,7 @@ const SdCard = class {
     bordered = false;
     sdClass = '';
     render() {
-        return (index.h(index.Fragment, { key: '1097b68c59997cb041057ff7b77330275c52f7c7' }, index.h("div", { key: 'a6eb3be04f9bcad7f712c0f28ff9750ebfd5697a', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'c2b5ae153d520f4078bb6e7ab4cd41f83eb32ad3' }))));
+        return (index.h(index.Fragment, { key: 'dd37653555ffeab3b249575c8a1cbe9aa70498b1' }, index.h("div", { key: 'eb0cea509b62fe1942d8ddfb955fee920b5c51a5', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, index.h("slot", { key: 'a792a49e58b1b1756f11d0bb6e7441674c63455e' }))));
     }
 };
 SdCard.style = sdCardCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const checkbox = {
 	size: "16",
@@ -28,9 +28,17 @@ const checkbox = {
 		},
 		icon: {
 			"default": "#FFFFFF",
-			disabled: "#BBBBBB"}},
+			disabled: "#BBBBBB",
+			inverse: "#FFFFFF"
+		},
+		border: {
+			inverse: "#FFFFFF"
+		}
+	},
 	label: {
-		"default": "#222222"},
+		"default": "#222222",
+		inverse: "#FFFFFF"
+	},
 	bg: {
 		disabled: "#E1E1E1"
 	},
@@ -65,15 +73,18 @@ const CHECKBOX_COLORS = {
         bg: checkboxTokens.checkbox.checked.bg.default,
         icon: checkboxTokens.checkbox.checked.icon.default,
         iconDisabled: checkboxTokens.checkbox.checked.icon.disabled,
+        iconInverse: checkboxTokens.checkbox.checked.icon.inverse,
+        borderInverse: checkboxTokens.checkbox.checked.border.inverse,
     },
     label: checkboxTokens.checkbox.label.default,
+    labelInverse: checkboxTokens.checkbox.label.inverse,
     disabled: {
         bg: checkboxTokens.checkbox.bg.disabled,
         border: checkboxTokens.checkbox.border.disabled,
     },
 };
 
-const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}`;
+const sdCheckboxCss = () => `sd-checkbox{display:block;height:var(--sd-checkbox-line-height);line-height:0}sd-checkbox .sd-checkbox{cursor:pointer;display:inline-flex;align-items:center;gap:var(--sd-checkbox-gap);height:var(--sd-checkbox-line-height);max-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox>input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}sd-checkbox .sd-checkbox>input:focus-visible+.sd-checkbox__bg{box-shadow:0 0 0 2px white, 0 0 0 4px var(--sd-checkbox-checked-bg);outline:none}sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg{border-color:var(--sd-checkbox-unchecked-border-hover);background:var(--sd-checkbox-unchecked-bg-hover)}sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg{border-color:transparent;background:var(--sd-checkbox-disabled-bg)}sd-checkbox .sd-checkbox__bg{width:var(--sd-checkbox-size);height:var(--sd-checkbox-size);border-radius:var(--sd-checkbox-radius);border:var(--sd-checkbox-border-width) solid var(--sd-checkbox-unchecked-border);box-sizing:border-box;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;line-height:0}sd-checkbox .sd-checkbox__label{font-size:var(--sd-checkbox-font-size);font-weight:var(--sd-checkbox-font-weight);color:var(--sd-checkbox-label-color);line-height:var(--sd-checkbox-line-height)}sd-checkbox .sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg{border-color:var(--sd-checkbox-checked-bg);background:var(--sd-checkbox-checked-bg)}sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg,sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg{background:var(--sd-checkbox-unchecked-bg)}sd-checkbox .sd-checkbox--disabled{cursor:not-allowed}sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg{background:var(--sd-checkbox-disabled-bg);border-color:var(--sd-checkbox-disabled-border)}sd-checkbox .sd-checkbox--inverse .sd-checkbox__label{color:var(--sd-checkbox-inverse-label)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--unchecked .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse.sd-checkbox--checked .sd-checkbox__bg,sd-checkbox .sd-checkbox--inverse.sd-checkbox--indeterminate .sd-checkbox__bg{background:transparent;border-color:var(--sd-checkbox-inverse-border)}sd-checkbox .sd-checkbox--inverse:hover.sd-checkbox--unchecked .sd-checkbox__bg{background:rgba(255, 255, 255, 0.12);border-color:var(--sd-checkbox-inverse-border)}`;
 
 const SdCheckbox = class {
     constructor(hostRef) {
@@ -87,6 +98,8 @@ const SdCheckbox = class {
     val;
     /** 비활성화 여부 */
     disabled = false;
+    /** 어두운 배경 위에서 사용하는 inverse(흰색) 스타일 */
+    inverse = false;
     /** 표시할 라벨 텍스트 */
     label = '';
     /** 내부 체크 상태 */
@@ -109,6 +122,9 @@ const SdCheckbox = class {
         if (this.disabled) {
             classes.push('sd-checkbox--disabled');
         }
+        if (this.inverse) {
+            classes.push('sd-checkbox--inverse');
+        }
         return classes.join(' ');
     }
     updateCheckedState(value) {
@@ -167,8 +183,17 @@ const SdCheckbox = class {
             '--sd-checkbox-label-color': CHECKBOX_COLORS.label,
             '--sd-checkbox-disabled-bg': CHECKBOX_COLORS.disabled.bg,
             '--sd-checkbox-disabled-border': CHECKBOX_COLORS.disabled.border,
+            '--sd-checkbox-inverse-border': CHECKBOX_COLORS.checked.borderInverse,
+            '--sd-checkbox-inverse-icon': CHECKBOX_COLORS.checked.iconInverse,
+            '--sd-checkbox-inverse-label': CHECKBOX_COLORS.labelInverse,
         };
-        return (index.h("label", { key: 'b343ac293abfb6a7834cccc597cd30e56e3a161c', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: '89d3c5ec214af16680f2111e5e85fcb228ff2223', type: "checkbox", ref: el => { this.inputEl = el; }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), index.h("div", { key: '8eef48a269cbbf8c479d60a53996b09cc4aa8f20', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled ? CHECKBOX_COLORS.checked.iconDisabled : CHECKBOX_COLORS.checked.icon })) : null), this.label && index.h("span", { key: '43bf36ec3a3890f68ef699dbb73b48eb6a98451d', class: "sd-checkbox__label" }, this.label)));
+        return (index.h("label", { key: '1a1c4dac0a2ce24ae51ce0baba74a7add387aa2f', class: this.checkboxClasses, style: cssVars }, index.h("input", { key: '4a45bc9bbaaf6ddaebf3445045ab7b1f789f81d5', type: "checkbox", ref: el => {
+                this.inputEl = el;
+            }, value: this.val, checked: !!this.isChecked, disabled: this.disabled, onChange: this.handleChange, name: this.val?.toString() || 'checkbox', "aria-label": this.label || 'checkbox', "aria-checked": this.isChecked === null ? 'mixed' : this.isChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }), index.h("div", { key: '7d8ae7276470bf4543cdee1a0b25793f07d23c66', class: "sd-checkbox__bg" }, this.isChecked !== false ? (index.h("sd-icon", { name: this.isChecked === true ? 'check' : 'minus', size: Number(CHECKBOX_LAYOUT.iconSize), color: this.disabled
+                ? CHECKBOX_COLORS.checked.iconDisabled
+                : this.inverse
+                    ? CHECKBOX_COLORS.checked.iconInverse
+                    : CHECKBOX_COLORS.checked.icon })) : null), this.label && index.h("span", { key: 'd791d977073b0916917c7ce770cf73c1ff81f3bd', class: "sd-checkbox__label" }, this.label)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-circle-progress.cjs.entry.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.js');
+
+const spinner = {
+	color: {
+		track: "#EEEEEE",
+		arc: "#2D8DFF"
+	}
+};
+var spinnerTokens = {
+	spinner: spinner
+};
+
+// TODO: error/complete 색상 및 inverse 흰색은 토큰 반영 후 교체
+const CIRCLE_PROGRESS_COLOR_MAP = {
+    primary: {
+        arc: spinnerTokens.spinner.color.arc,
+        track: spinnerTokens.spinner.color.track,
+    },
+    inverse: {
+        arc: '#FFFFFF',
+        track: 'transparent',
+    },
+    error: {
+        arc: '#E30000',
+        track: spinnerTokens.spinner.color.track,
+    },
+    complete: {
+        arc: '#01BB4B',
+        track: spinnerTokens.spinner.color.track,
+    },
+};
+const CIRCLE_PROGRESS_VIEWBOX_SIZE = 80;
+const CIRCLE_PROGRESS_RADIUS = 34;
+const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
+const CIRCLE_PROGRESS_CIRCUMFERENCE = 2 * Math.PI * CIRCLE_PROGRESS_RADIUS;
+
+const sdCircleProgressCss = () => `@charset "UTF-8";sd-circle-progress{display:inline-flex;width:80px;height:80px}sd-circle-progress .sd-circle-progress{width:100%;height:100%}sd-circle-progress .sd-circle-progress__track{stroke:var(--sd-circle-progress-track)}sd-circle-progress .sd-circle-progress__arc{stroke:var(--sd-circle-progress-arc);transform:rotate(-90deg);transform-origin:center center;transition:stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease}sd-circle-progress{}sd-circle-progress[indeterminate] .sd-circle-progress{animation:sd-circle-progress-spin 2s linear infinite;transform-origin:center center}sd-circle-progress[indeterminate] .sd-circle-progress__arc{transform:none;transition:none;animation:sd-circle-progress-spin-path 1.5s ease-in-out infinite}@keyframes sd-circle-progress-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes sd-circle-progress-spin-path{0%{stroke-dasharray:1, 340;stroke-dashoffset:0}50%{stroke-dasharray:151, 340;stroke-dashoffset:-60}100%{stroke-dasharray:151, 340;stroke-dashoffset:-211}}`;
+
+const SdCircleProgress = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    indeterminate = false;
+    value = 0;
+    type = 'primary';
+    get clampedValue() {
+        if (!Number.isFinite(this.value))
+            return 0;
+        return Math.max(0, Math.min(100, this.value));
+    }
+    render() {
+        const colors = CIRCLE_PROGRESS_COLOR_MAP[this.type] ?? CIRCLE_PROGRESS_COLOR_MAP.primary;
+        const hostStyle = {
+            '--sd-circle-progress-track': colors.track,
+            '--sd-circle-progress-arc': colors.arc,
+        };
+        const arcStyle = {};
+        if (!this.indeterminate) {
+            const filled = (this.clampedValue / 100) * CIRCLE_PROGRESS_CIRCUMFERENCE;
+            arcStyle.strokeDasharray = `${filled} ${CIRCLE_PROGRESS_CIRCUMFERENCE}`;
+            arcStyle.strokeDashoffset = '0';
+        }
+        const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
+        return (index.h(index.Host, { key: 'fb876909febfc95bb69c58031ac37419baa07137', style: hostStyle }, index.h("svg", { key: '3bb8130bab317a74c1553dd2ceb52b8c0f65f69f', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '5904f93a6b1c333dbcbd805140d5e65b5af20080', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: '4d8a1d352e4003a75dd63f67a66a05f595ae5700', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
+    }
+};
+SdCircleProgress.style = sdCircleProgressCss();
+
+exports.sd_circle_progress = SdCircleProgress;

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -0,0 +1,186 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.js');
+var component_modal = require('./component.modal-BFelrSMx.js');
+
+const CONFIRM_MODAL_DEFAULT_BUTTON = {
+    positive: 'primary_md',
+    negative: 'danger_md',
+    default: 'neutral_outline_md',
+};
+const CONFIRM_MODAL_ICON_MAP = {
+    positive: 'notificationOutline',
+    negative: 'warningOutline',
+    default: null,
+};
+const CONFIRM_MODAL_ICON_COLOR = {
+    positive: component_modal.modalTokens.modal.confirm.positive.icon,
+    negative: component_modal.modalTokens.modal.confirm.negative.icon,
+    default: '',
+};
+const TITLE_ICON_SIZE = Number(component_modal.modalTokens.modal.confirm.title.icon);
+const SUB_BUTTON_PRESET = 'neutral_outline_md';
+
+const sdConfirmModalCss = () => `sd-confirm-modal{display:block;width:fit-content;min-width:520px}sd-confirm-modal .sd-confirm-modal{position:relative;padding:var(--sd-modal-modal-confirm-padding-y) var(--sd-modal-modal-confirm-padding-x);border-radius:var(--sd-modal-modal-radius);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2);background:var(--sd-modal-modal-bg)}sd-confirm-modal .sd-confirm-modal__close-button{position:absolute;top:12px;right:12px}sd-confirm-modal .sd-confirm-modal__icon{display:block;width:var(--sd-modal-modal-confirm-title-icon);height:var(--sd-modal-modal-confirm-title-icon);margin:0 auto var(--sd-modal-modal-confirm-title-gap) auto}sd-confirm-modal .sd-confirm-modal__title{color:var(--sd-modal-modal-confirm-title-color);font-size:var(--sd-modal-modal-confirm-title-typography-font-size);font-weight:var(--sd-modal-modal-confirm-title-typography-font-weight);line-height:var(--sd-modal-modal-confirm-title-typography-line-height);text-align:center;margin:0 0 var(--sd-modal-modal-confirm-body-gap) 0}sd-confirm-modal .sd-confirm-modal__body{display:flex;flex-direction:column;gap:var(--sd-modal-modal-confirm-body-gap)}sd-confirm-modal .sd-confirm-modal__message-text{color:var(--sd-modal-modal-confirm-message-color);font-size:12px;font-weight:400;line-height:20px;text-align:center;margin:0}sd-confirm-modal .sd-confirm-modal__content-box{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid #e1e1e1;border-radius:8px;background:white}sd-confirm-modal .sd-confirm-modal__slot-label{font-size:14px;font-weight:700;line-height:22px;color:var(--sd-modal-modal-confirm-message-color)}sd-confirm-modal .sd-confirm-modal__button{display:flex;justify-content:center;gap:var(--sd-modal-modal-confirm-button-gap);margin-top:40px}`;
+
+const SdConfirmModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.close = index.createEvent(this, "sdClose", 7);
+        this.cancel = index.createEvent(this, "sdCancel", 7);
+        this.ok = index.createEvent(this, "sdOk", 7);
+    }
+    get el() { return index.getElement(this); }
+    hasSlottedContent = false;
+    customContentRef;
+    slotObserver;
+    type = 'positive';
+    modalTitle = '';
+    titleClass = '';
+    topMessage = [];
+    bottomMessage = [];
+    mainButtonName;
+    mainButtonLabel = '확인';
+    subButtonLabel = '';
+    tagPreset = 'square_sm_grey';
+    tagLabel = '';
+    slotLabel = '';
+    tagContents;
+    close;
+    cancel;
+    ok;
+    componentWillLoad() {
+        this.syncHasSlottedContent();
+    }
+    componentDidLoad() {
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.slotObserver = new MutationObserver(() => this.syncHasSlottedContent());
+        this.slotObserver.observe(this.el, {
+            childList: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        if (this.customContentRef && this.tagContents instanceof HTMLElement) {
+            if (typeof this.customContentRef.replaceChildren === 'function') {
+                this.customContentRef.replaceChildren(this.tagContents);
+            }
+            else {
+                this.customContentRef.innerHTML = '';
+                this.customContentRef.appendChild(this.tagContents);
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.slotObserver?.disconnect();
+    }
+    get resolvedMainButton() {
+        return this.mainButtonName ?? CONFIRM_MODAL_DEFAULT_BUTTON[this.type];
+    }
+    get hasTagContent() {
+        return !!(this.tagLabel || this.slotLabel);
+    }
+    get showContentBox() {
+        return !!this.tagContents || this.hasTagContent || this.hasSlottedContent;
+    }
+    syncHasSlottedContent() {
+        const hasSlottedContent = Array.from(this.el.childNodes).some(node => !(node.nodeType === Node.ELEMENT_NODE &&
+            node.classList.contains('sd-confirm-modal')) &&
+            (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())));
+        if (hasSlottedContent !== this.hasSlottedContent) {
+            this.hasSlottedContent = hasSlottedContent;
+        }
+    }
+    render() {
+        const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
+        const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
+        return (index.h("div", { key: 'c95e6e3992e9d63c19f27624e92c00b5046503e0', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'edab233c28ebcfc181062d78cb80ec27a3ace8b4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '4ea2ef8ac6027a6455367b39b6d3cc6cf073f0a8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '5a25a6f0812a6932949a2667db2af1b69d772293', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'b431572003c129a0d44095a317532b535753abd3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'cd425d24bde982323a0156ff18f4dcdc81660dd5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '9486cf19dc6692228f615112b0777b6167c1a8de', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+                this.customContentRef = el;
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '7218d8bf72e26f36f88db68f57818911bb09056d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'e16de1bb3c851988050b12ac07c7adcedab560da', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '8c14b099e6b8a93673ff3eb2f0931a45c98d620a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: 'fb9a3984f0476d2fceca98bac186d0a52a0ab206', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+    }
+};
+SdConfirmModal.style = sdConfirmModalCss();
+
+const LOADING_MODAL_LAYOUT = {
+    minWidth: Number(component_modal.modalTokens.modal.loading.width),
+    minHeight: Number(component_modal.modalTokens.modal.loading.height),
+    gap: Number(component_modal.modalTokens.modal.loading.gap),
+    contentSize: Number(component_modal.modalTokens.modal.loading.content),
+    radius: Number(component_modal.modalTokens.modal.radius),
+};
+const LOADING_MODAL_COLORS = {
+    bg: component_modal.modalTokens.modal.bg,
+    messageColor: component_modal.modalTokens.modal.loading.message.color,
+    errorIcon: component_modal.modalTokens.modal.confirm.negative.icon};
+const LOADING_MODAL_TYPOGRAPHY = {
+    fontFamily: component_modal.modalTokens.modal.loading.message.typography.fontFamily,
+    fontSize: Number(component_modal.modalTokens.modal.loading.message.typography.fontSize),
+    fontWeight: Number(component_modal.modalTokens.modal.loading.message.typography.fontWeight),
+    lineHeight: Number(component_modal.modalTokens.modal.loading.message.typography.lineHeight),
+};
+const LOADING_MODAL_DEFAULT_MESSAGE = {
+    loading: '작업을 진행하고 있습니다. 잠시만 기다려 주세요.',
+    error: '작업에 실패하였습니다. 다시 시도해 주세요.',
+};
+const LOADING_MODAL_DEFAULT_BUTTON_LABEL = {
+    loading: '작업 취소',
+    error: '다시 시도',
+};
+const LOADING_MODAL_BUTTON_PRESET = 'neutral_outline_sm';
+
+const sdLoadingModalCss = () => `sd-loading-modal{display:inline-block}sd-loading-modal .sd-loading-modal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sd-loading-modal-gap);min-width:var(--sd-loading-modal-min-width);min-height:var(--sd-loading-modal-min-height);width:var(--sd-loading-modal-width, auto);height:var(--sd-loading-modal-height, auto);border-radius:var(--sd-loading-modal-radius);background:var(--sd-loading-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-loading-modal .sd-loading-modal__content{display:flex;align-items:center;justify-content:center;width:var(--sd-loading-modal-content-size);height:var(--sd-loading-modal-content-size)}sd-loading-modal .sd-loading-modal__message{margin:0;color:var(--sd-loading-modal-message-color);font-family:var(--sd-loading-modal-message-font-family);font-size:var(--sd-loading-modal-message-font-size);font-weight:var(--sd-loading-modal-message-font-weight);line-height:var(--sd-loading-modal-message-line-height);text-align:center}sd-loading-modal .sd-loading-modal__button{display:flex;justify-content:center}`;
+
+const SdLoadingModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.click = index.createEvent(this, "sdClick", 7);
+    }
+    state = 'loading';
+    message = '';
+    buttonLabel = '';
+    width;
+    height;
+    click;
+    get resolvedMessage() {
+        return this.message || LOADING_MODAL_DEFAULT_MESSAGE[this.state];
+    }
+    get resolvedButtonLabel() {
+        return this.buttonLabel || LOADING_MODAL_DEFAULT_BUTTON_LABEL[this.state];
+    }
+    handleClick = () => {
+        this.click.emit();
+    };
+    toCssSize(value) {
+        if (value === undefined || value === null || value === '')
+            return undefined;
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+    render() {
+        const cssVars = {
+            '--sd-loading-modal-min-width': `${LOADING_MODAL_LAYOUT.minWidth}px`,
+            '--sd-loading-modal-min-height': `${LOADING_MODAL_LAYOUT.minHeight}px`,
+            '--sd-loading-modal-gap': `${LOADING_MODAL_LAYOUT.gap}px`,
+            '--sd-loading-modal-content-size': `${LOADING_MODAL_LAYOUT.contentSize}px`,
+            '--sd-loading-modal-radius': `${LOADING_MODAL_LAYOUT.radius}px`,
+            '--sd-loading-modal-bg': LOADING_MODAL_COLORS.bg,
+            '--sd-loading-modal-message-color': LOADING_MODAL_COLORS.messageColor,
+            '--sd-loading-modal-message-font-family': LOADING_MODAL_TYPOGRAPHY.fontFamily,
+            '--sd-loading-modal-message-font-size': `${LOADING_MODAL_TYPOGRAPHY.fontSize}px`,
+            '--sd-loading-modal-message-font-weight': `${LOADING_MODAL_TYPOGRAPHY.fontWeight}`,
+            '--sd-loading-modal-message-line-height': `${LOADING_MODAL_TYPOGRAPHY.lineHeight}px`,
+            '--sd-loading-modal-error-color': LOADING_MODAL_COLORS.errorIcon,
+        };
+        const hostStyle = {
+            ...cssVars,
+            '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
+            '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
+        };
+        return (index.h(index.Host, { key: 'dcc53b3421a88970ce4ad8258285a896da0e400c', style: hostStyle }, index.h("div", { key: 'bb2319b861392c8a88587b7654f2c6227b226cc7', class: "sd-loading-modal" }, index.h("div", { key: 'f3064846c06d2cd1e9d2474dc16fe80773c4a8f7', class: "sd-loading-modal__content" }, this.state === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("p", { key: '932c71930b4484d652266f85556e7eb2195a81c9', class: "sd-loading-modal__message" }, this.resolvedMessage), index.h("div", { key: 'e06cfa7729b72f881789d573f38116ac5086e062', class: "sd-loading-modal__button" }, index.h("sd-button-v2", { key: '63684aa367e552df0e020ce4766d6c34c1361427', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick })))));
+    }
+};
+SdLoadingModal.style = sdLoadingModalCss();
+
+exports.sd_confirm_modal = SdConfirmModal;
+exports.sd_loading_modal = SdLoadingModal;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
-var sdDatePicker_config = require('./sd-date-picker.config-DWC_aiD2.js');
+var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
 const sdDatePickerCalendarCss = () => `sd-date-picker-calendar{display:block}sd-date-picker-calendar .sd-date-picker-calendar{display:flex;flex-direction:column;gap:var(--calendar-gap);height:328px;padding:var(--calendar-padding);background:var(--calendar-bg);border-radius:var(--calendar-radius);box-shadow:2px 2px 12px 2px rgba(0, 0, 0, 0.2);user-select:none}sd-date-picker-calendar .sd-date-picker-calendar__header{display:flex;align-items:center;justify-content:center;gap:var(--calendar-header-gap);font-size:var(--calendar-header-font-size);line-height:var(--calendar-header-line-height);font-weight:var(--calendar-header-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group{display:inline-flex;align-items:center;gap:var(--calendar-gap)}sd-date-picker-calendar .sd-date-picker-calendar__nav-group-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__label{display:inline-flex;align-items:center;justify-content:center;min-width:40px;text-align:center}sd-date-picker-calendar .sd-date-picker-calendar__label-month{width:100%}sd-date-picker-calendar .sd-date-picker-calendar__divider{display:inline-block;width:1px;height:16px;background:var(--calendar-header-divider)}sd-date-picker-calendar .sd-date-picker-calendar__week{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size))}sd-date-picker-calendar .sd-date-picker-calendar__week-cell{display:inline-flex;align-items:center;justify-content:center;height:20px;font-size:var(--calendar-week-font-size);line-height:var(--calendar-week-line-height);font-weight:var(--calendar-week-font-weight);color:var(--calendar-week-color)}sd-date-picker-calendar .sd-date-picker-calendar__grid{display:grid;grid-template-columns:repeat(7, var(--calendar-day-size));row-gap:var(--calendar-grid-row-gap)}sd-date-picker-calendar .sd-date-picker-calendar__day{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-size);height:32px;padding:0;border:none;background:transparent;cursor:pointer;font-size:var(--calendar-day-font-size);line-height:var(--calendar-day-line-height);font-weight:var(--calendar-day-font-weight);color:var(--calendar-day-text)}sd-date-picker-calendar .sd-date-picker-calendar__day-circle{display:inline-flex;align-items:center;justify-content:center;width:var(--calendar-day-circle-size);height:var(--calendar-day-circle-size);border-radius:calc(var(--calendar-day-circle-radius) * 1px);border:1px solid transparent;box-sizing:border-box}sd-date-picker-calendar .sd-date-picker-calendar__day:not(:disabled):hover .sd-date-picker-calendar__day-circle{border-radius:16px;border:1px solid var(--calendar-day-hover-border)}sd-date-picker-calendar .sd-date-picker-calendar__day--today .sd-date-picker-calendar__day-circle{font-weight:700}sd-date-picker-calendar .sd-date-picker-calendar__day--selected .sd-date-picker-calendar__day-circle{border-radius:16px;background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--selected:not(:disabled):hover .sd-date-picker-calendar__day-circle{background:var(--calendar-day-select-bg);color:var(--calendar-day-select-text)}sd-date-picker-calendar .sd-date-picker-calendar__day--disabled{color:var(--calendar-day-disabled-text);background:none !important;cursor:not-allowed}sd-date-picker-calendar .sd-date-picker-calendar__day--empty{visibility:hidden;pointer-events:none}`;
 
@@ -142,7 +142,7 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (index.h("div", { key: 'df2517386d844ade51de158c511a7f2ec77714f9', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '16185a3b082fdf59f7ea325a96cf9d7f67622278', class: "sd-date-picker-calendar__header" }, index.h("div", { key: 'bf6839f659dd01238310721284fae78f2189de8a', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '474514e32f4ce65b07e704f246a60104f0adec0e', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '51c0f67e762a2a9efd166eaeb066d28e6b412f7d', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: '9fbb3f071917370764886ab63f2f39d90ff7224d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'b9afde6cc30bf791d487d16b67a50d4a270601f6', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '3d9c647a135376c524036eec85dc80c143225e2d', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: '233351d0151458b088264872fca2bb75fa3d3d4f', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '26913dd888a4a3589edc3ae63345c2e02e418aa5', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: '7700394ff1c9f19a5559e829fb016f2d2a97b242', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '7d2b2577092fb2f817bbd6fcb711425992d4ba34', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: 'c6784bcbf7c939eb1848cfa20f87f17534ade21e', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (index.h("div", { key: '9e47bf6790f947639b1868a653c9d451905d4a49', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '641a9726b22aff0e465347bf3363fdd6f3110919', class: "sd-date-picker-calendar__header" }, index.h("div", { key: '71e4838be05148f989af7ccb692482db425c38d7', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '060795c43807ee50b13448ac559fb7945a48d8be', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '5cf2c070134aa04dc5f9d506b91bdff759d9453b', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'dd3c9d26bc4b79673e12b90d2a7d563e4adda707', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: '962ee5b8adbcbf988bc94b81b3dd0fe4e388a588', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '54d1fcfbcbe1e232cbea5cdd9a948045207771c7', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: 'ff8011dbf88a257ba4b47dbcd1a3b8c414b4e7b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '2594eed1efacc8b3bdf648ab7527a81608e2321d', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'a83692da9caeaef4c02c777d43f769026182d5a2', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: 'bc131a11ed98ac84dee775090ca24be794fece55', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: 'bc4deb734c9c01806ae7e75640f97d76c9e79f64', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);