@platformscode/core 0.0.48 → 0.0.50

package/dist/collection/components/dga-card-v2/dga-card-v2.js

@@ -87,7 +87,7 @@ export class DgaCardV2 {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: 'bb06f2b400779ee878fe356acbb5987c25846464', id: this.componentId, style: this.rootStyles }, h("div", Object.assign({ key: '8d711ecdc63ab698b6d945b46a6c8e1572474a65', class: `card ${this.disabled ? 'disabled' : ''} ${this.isFocused ? 'focused' : ''} card--${this.effect}`, onMouseEnter: this.onMouseEnterHandler, onMouseLeave: this.onMouseLeaveHandler }, (this.type === 'selectable' ? { onClick: this.onCheckboxChange } : {}), { style: this.cardStyles }), this.type === 'selectable' && (h("div", { key: 'e653a0d9a80f74cfb1086c7883cc3feeaff1fbd4', class: "card__checkbox-container" }, h("dga-checkbox", { key: '0011694eef4200cda9cd5b954c94922d05c17b39', checked: this.isSelected, color: "brand", onChange: this.onCheckboxChange }))), h("slot", { key: 'c37ff84e463ed72559dacaf6bf8f89b1c6aa83bf', name: 'card-content' }), this.type === 'default' && h("slot", { key: '59ac41e1470bac8a1acd4e8e66008c5de6de1848', name: 'card-actions' }))));
+        return (h(Host, { key: 'b3cf7be36254d48019e14dc943e877b2a24cdd55', id: this.componentId, style: this.rootStyles }, h("div", Object.assign({ key: '4be28fe16ebf66b1d77b5c9def28c85f1be7c877', class: `card ${this.disabled ? 'disabled' : ''} ${this.isFocused ? 'focused' : ''} card--${this.effect}`, onMouseEnter: this.onMouseEnterHandler, onMouseLeave: this.onMouseLeaveHandler }, (this.type === 'selectable' ? { onClick: this.onCheckboxChange } : {}), { style: this.cardStyles }), this.type === 'selectable' && (h("div", { key: '230790bac6c0704835da70b140bdbbed8f8df90e', class: "card__checkbox-container" }, h("dga-checkbox", { key: '80851ec1f48eaba8a5025a477dd0c1ea21d03a34', checked: this.isSelected, color: "brand", onChange: this.onCheckboxChange }))), h("slot", { key: 'dd61b4d598e7182e64825018dcf595292ea7b811', name: 'card-content' }), this.type === 'default' && h("slot", { key: '63a9a08e5c3ceaea106524d4311b55cf97316c03', name: 'card-actions' }))));
     }
     static get is() { return "dga-card-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-carousel/dga-carousel.js

@@ -91,20 +91,20 @@ export class DgaCarousel {
         }
     }
     render() {
-        return (h(Host, { key: 'ce574c18fa1b13998decce1da7d2d0b01c51f3c7', class: `KCarousel KCarousel--${this.variant} KCarousel--${this.size}`, dir: this.Dir }, this.variant !== 'dots-only' && (h("div", { key: '6c6c6d4f3161a5693c139893faac56cec7ac05e0', class: "KCarousel-body" }, this.variant === 'arrows' && (h("a", { key: '3d7327f1634aede07324a9fdf13db234bd98c147', class: {
+        return (h(Host, { key: '4b2fd50424d1187980c1a5a3ca785acc64450259', class: `KCarousel KCarousel--${this.variant} KCarousel--${this.size}`, dir: this.Dir }, this.variant !== 'dots-only' && (h("div", { key: '70d9bbcfc3c037de5f75f60076010d2e9940e7f6', class: "KCarousel-body" }, this.variant === 'arrows' && (h("a", { key: 'b6ece7176cb2cbe5dbbc03ba77a90856d54b8748', class: {
                 'KCarousel-arrow': true,
                 'KCarousel-arrow--active': this.showLeftArrow(),
                 [this.isRTL() ? 'right' : 'left']: true,
                 [`KCarousel-arrow--${this.arrowsVariant}`]: true,
-            }, onClick: () => this.changeSlide(this.DIRECTION.LEFT) }, h("dga-icon", { key: 'a79671e8dda87c8911a4b4bc46ce611c836f4554', icon: this.isRTL() ? arrowRight01Stroke : arrowLeft01Stroke, size: 24 }))), h("div", { key: 'e48103332021ea42ec5cd651b97c561fad3951a9', class: "KCarousel-container", style: { overflow: 'hidden', maxWidth: `${this.childWidth}px` } }, h("div", { key: 'ed50b07154841fe6baa38dda729b316111e78182', style: {
+            }, onClick: () => this.changeSlide(this.DIRECTION.LEFT) }, h("dga-icon", { key: '306ec974567bb18fd062289f2ff9b88bb6884712', icon: this.isRTL() ? arrowRight01Stroke : arrowLeft01Stroke, size: 24 }))), h("div", { key: '3165dc2a5f5e08edd9211115120f420f968b92c7', class: "KCarousel-container", style: { overflow: 'hidden', maxWidth: `${this.childWidth}px` } }, h("div", { key: '1a5869d7d3f74c74eaf92b3bd47d1c265ccc2738', style: {
                 display: 'flex',
                 transition: `transform ${this.transitionDuration}ms ease-in-out`,
-            }, class: "KCarousel-slides", ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '9e21fcf4da484a6e41834979bf60b3cf4afbf27c' }))), this.variant === 'arrows' && (h("a", { key: '528f9d0e84877d5257567b98a17d26087f9efa98', class: {
+            }, class: "KCarousel-slides", ref: (el) => (this.slidesContainer = el) }, h("slot", { key: '5c8f375d0c035ca80b8f1938ec4d5f14e77325d8' }))), this.variant === 'arrows' && (h("a", { key: '9c218197eaabee5cf9d83577a3eb1a9af2bce40c', class: {
                 'KCarousel-arrow': true,
                 'KCarousel-arrow--active': this.showRightArrow(),
                 [this.isRTL() ? 'left' : 'right']: true,
                 [`KCarousel-arrow--${this.arrowsVariant}`]: true,
-            }, onClick: () => this.changeSlide(this.DIRECTION.RIGHT) }, h("dga-icon", { key: 'cdb37c23d32e7081657772d02d71903ae4d2b96f', icon: this.isRTL() ? arrowLeft01Stroke : arrowRight01Stroke, size: 24 }))))), ['dots', 'dots-only'].includes(this.variant) && (h("div", { key: '486b8a0644b36736f9535f3807f7d6cfa0d04df7', class: "KCarousel-dots" }, Array.from({ length: this.childrenLength }).map((_, index) => (h("span", { class: {
+            }, onClick: () => this.changeSlide(this.DIRECTION.RIGHT) }, h("dga-icon", { key: '494f33870b0eb838f1dad52ba8cc58d778bd45e0', icon: this.isRTL() ? arrowLeft01Stroke : arrowRight01Stroke, size: 24 }))))), ['dots', 'dots-only'].includes(this.variant) && (h("div", { key: '68a576f94084cb1c139a1f057ab598d753450a4a', class: "KCarousel-dots" }, Array.from({ length: this.childrenLength }).map((_, index) => (h("span", { class: {
                 'KCarousel-dot': true,
                 'is-active': this.isHighlighted(index),
             }, onClick: () => {

package/dist/collection/components/dga-carousel-item/dga-carousel-item.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class CarouselItem {
     render() {
-        return (h(Host, { key: 'd0bbd72e283ba2e1178ab091d05ef6964ba66f5c' }, h("slot", { key: '34e7e9c6e9982cbf3e8bb4176a8b3ef249ac9d5a' })));
+        return (h(Host, { key: '5de58bac361baad96bcf735c15a133801854c0ca' }, h("slot", { key: 'dbddb8ae8602b5f95991d784ce7816e56b936bde' })));
     }
     static get is() { return "dga-carousel-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-carousel-v2/dga-carousel-v2.js

@@ -93,7 +93,7 @@ export class DgaCarousel {
         }
     }
     render() {
-        return (h("section", { key: '7af2922fcaafdc8f1fa4fc4c71b34c004e19a3df', class: "embla" }, h("div", { key: 'f41ed501e5c03ac5d7af7ce44d1365071b7de27d', class: "embla__viewport" }, h("div", { key: 'e5c7dcd8bbf2c70ce2d7d400070b4e32fe48438b', class: "embla__container" }, h("div", { key: 'e8cf8726bf5339977c9697ecfc32f98160e6a2d4', class: "embla__slide" }, h("div", { key: '852c48fb901229ac7afee8cbcd8b628f43f29943', class: "embla__slide__number" }, "1")), h("div", { key: '78fbfc3452afb770ad72c642dbc2fede4f4326fc', class: "embla__slide" }, h("div", { key: 'e509e1e7e5cef9d02963227879a5f2442bd22493', class: "embla__slide__number" }, "2")), h("div", { key: '4f58024b457bb4a788a841d77c07ce0e1dc8f949', class: "embla__slide" }, h("div", { key: 'a779fb0da770ac819742df8a84106dde7452fa26', class: "embla__slide__number" }, "3")), h("div", { key: 'ba00b3d76378efe7ad4ba41f70aaaeb7910a500d', class: "embla__slide" }, h("div", { key: '737370adb1bd1a8687194e324ad3389dbded70c5', class: "embla__slide__number" }, "4")), h("div", { key: '6fb29fd74f6d80bdf5040cf753d4ebe4de68ff6e', class: "embla__slide" }, h("div", { key: '1b8fa93178d9fa4126b88248bab653e26e11afbf', class: "embla__slide__number" }, "5")))), h("div", { key: 'c36815fecbee1bc073a58b70edcf403f906314fa', class: "embla__controls" }, h("div", { key: '7b001a3469652b927a976abc0aaff13ce89ead4e', class: "embla__buttons" }, h("button", { key: '917cd1ab3394fe02021ab3a58fbd4155766ff543', class: "embla__button embla__button--prev", type: "button" }, h("dga-icon", { key: 'b071be52cea9657ced0c3a4b8dc9928213dc5b61', class: "embla__button__svg", icon: arrowLeft01Stroke, size: 24, color: '#161616' })), h("button", { key: 'c4d2d158ff93a3d668f8ca3fba15289fc5d95873', class: "embla__button embla__button--next", type: "button" }, h("dga-icon", { key: 'd1dd145ab34135d16af66a1007cbb2627cce4390', class: "embla__button__svg", icon: arrowRight01Stroke, size: 24, color: '#161616' }))), h("div", { key: '4d5de2c4e3e78f18c6d08202ed810e4a9fdc2afa', class: "embla__dots" }))));
+        return (h("section", { key: '61c5e3b9305652a043142e451e799f9f57c56c46', class: "embla" }, h("div", { key: '4bef104735871dc60c68335a89e555b396cecf23', class: "embla__viewport" }, h("div", { key: '6f5249dca7f155e431722ab673c9293c64b365ed', class: "embla__container" }, h("div", { key: '7523f2c229bb849babbcfce09361d5196083818c', class: "embla__slide" }, h("div", { key: 'e803610163877ea26eee307cd652e4fd0a299828', class: "embla__slide__number" }, "1")), h("div", { key: '4071a972deba78e191e9b9d0790b8d7e13de7a2b', class: "embla__slide" }, h("div", { key: 'd8abe4bdf2d853ac19f6917186f93807e578d217', class: "embla__slide__number" }, "2")), h("div", { key: '8b63aabfbec2cd9781a426272c73db38a887ffdd', class: "embla__slide" }, h("div", { key: 'fc5b37aa45a3a4c32e71790b6772ce8303966c42', class: "embla__slide__number" }, "3")), h("div", { key: '5e192dac489c40a3d278229a8e567e735d3cf136', class: "embla__slide" }, h("div", { key: 'b8913089aee2532fb013a7ea5640e3756fc24a1f', class: "embla__slide__number" }, "4")), h("div", { key: '743e687116a4126e16647779604b0f9ae5ec0ebf', class: "embla__slide" }, h("div", { key: 'b4cb00c0222346f6653f29013460ff4be7c5ec34', class: "embla__slide__number" }, "5")))), h("div", { key: '1afa5de757b7010573fbef83bf5b3afb83a89dd9', class: "embla__controls" }, h("div", { key: '9bfe3ab1d57b5b5dabd39c412df8aee42cb44cd1', class: "embla__buttons" }, h("button", { key: '8f56208226aa23960e00d2fbb122c4d1ebba8992', class: "embla__button embla__button--prev", type: "button" }, h("dga-icon", { key: 'ee7511529678b94ce4362aa274eac62a483eaaec', class: "embla__button__svg", icon: arrowLeft01Stroke, size: 24, color: '#161616' })), h("button", { key: '71e655e65bccccba408c22b163510e29e9abc3b1', class: "embla__button embla__button--next", type: "button" }, h("dga-icon", { key: 'a68f568c9c48c55ec75627f133b83ecf8b2669d6', class: "embla__button__svg", icon: arrowRight01Stroke, size: 24, color: '#161616' }))), h("div", { key: '1465b01a4a745cc089d7137e97ed2596dc698127', class: "embla__dots" }))));
     }
     static get is() { return "dga-carousel-v2"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-checkbox/dga-checkbox.js

@@ -52,18 +52,18 @@ export class DgaCheckbox {
         const { el, disabled } = this;
         const dir = isRTL(el) ? 'rtl' : 'ltr';
         console.log(dir);
-        return (h("label", { key: '3797b3159f1762ec3005b0bb7be0395aabfb70b8', ref: el => (this.labelRef = el), class: `checkbox ${this.color ? `checkbox--${this.color}` : ''} checkbox--${this.size}`,
+        return (h("label", { key: 'db91d78fcf976079261b8d0db86f464c94497718', ref: el => (this.labelRef = el), class: `checkbox ${this.color ? `checkbox--${this.color}` : ''} checkbox--${this.size}`,
             // onMouseDown={this.handleActive}
             // onMouseUp={this.handleRemoveActive}
             // onMouseOut={this.handleRemoveActive}
             // onChange={() => this.handleRemoveActive}
             //   htmlFor={id}
-            tabindex: disabled ? undefined : 0 }, h("div", { key: '17c96adea1d5ebf061806842f58e7624813c067e', class: "checkbox-main" }, h("div", { key: '89ce5e9f693fd89351860987bf7eb9678455ccb1', class: "checkbox-main__content" }, h("input", { key: '70bfa3c78cc49ba9daf61b9c09b784cd9dd16832', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, onFocus: this.handleFocus, onBlur: this.handleFocusOut, onChange: e => {
+            tabindex: disabled ? undefined : 0 }, h("div", { key: '0e9b81ab063746bfee3cf2dc00ead61e3ecc8f1a', class: "checkbox-main" }, h("div", { key: '10f71c2ff6f649cae2007cdbf87a31c5bc8a7b6c', class: "checkbox-main__content" }, h("input", { key: '87a7138f8aba5728c68ea1cffce846de6e6feee1', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, onFocus: this.handleFocus, onBlur: this.handleFocusOut, onChange: e => {
                 var _a;
                 (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, e);
                 const target = e.target;
                 this.isChecked = target.checked;
-            }, onInput: this.onInput, checked: this.isChecked }), h("div", { key: 'aff55b7ce81ac8e026c49f32316e30c3ad1fd0e1', class: "checkbox-container" }, h("span", { key: '5f8405912600898f88f3cc0916399d83113e62bc', class: "checkbox-icon checkbox__checked-icon", style: { display: this.isChecked ? 'inline-block' : 'none' } }, this.Indeterminate ? h("dga-icon", { icon: minusSignSolid }) : h("dga-icon", { icon: tick03Solid })), h("span", { key: '567f0194c26122f3dc8b0b65a19f459f4c7b3af1', class: "checkbox-icon checkbox__indeterminate-icon", style: { display: this.isChecked ? 'none' : 'inline-block' } }, h("dga-icon", { key: 'eaf50145a577853a66e62347051565704f223203', icon: remove01Solid }))), !this.helperText ? (this.label && h("span", { class: "checkbox__label" }, this.label)) : (h("div", { class: "dga-flex-column" }, h("span", { class: "checkbox__label" }, this.label), h("span", { class: "checkbox__helper-text" }, this.helperText)))), this.alertMessage && (h("div", { key: '825873d64a81a9289906c461e2f9c9c3dfcf320f', class: "checkbox__warning" }, h("span", { key: '448af70ab9d3d3a00d7fdd9cc61b49121fc21813', class: "checkbox__warning-icon" }, h("dga-icon", { key: 'f5eb84f41cf0b3691256787fafaab7d347246652', icon: alertCircleStroke, size: 16 })), h("span", { key: 'a46d8f245aab571aa7c398b90d07d41bceba59d1', class: "checkbox__warning-text" }, this.alertText))))));
+            }, onInput: this.onInput, checked: this.isChecked }), h("div", { key: '3cbeacd3d5533fac1d042bfb701f68180096c512', class: "checkbox-container" }, h("span", { key: '766abbcf5f74e2c23b810f895088971b0dbb1922', class: "checkbox-icon checkbox__checked-icon", style: { display: this.isChecked ? 'inline-block' : 'none' } }, this.Indeterminate ? h("dga-icon", { icon: minusSignSolid }) : h("dga-icon", { icon: tick03Solid })), h("span", { key: '265d11d898142d0c9d314fd9dde05f888625cbed', class: "checkbox-icon checkbox__indeterminate-icon", style: { display: this.isChecked ? 'none' : 'inline-block' } }, h("dga-icon", { key: '5dcef6545f46d6402d67dd3f397e167695433769', icon: remove01Solid }))), !this.helperText ? (this.label && h("span", { class: "checkbox__label" }, this.label)) : (h("div", { class: "dga-flex-column" }, h("span", { class: "checkbox__label" }, this.label), h("span", { class: "checkbox__helper-text" }, this.helperText)))), this.alertMessage && (h("div", { key: 'e0e392c277333a32b0a7ddbc466664dfd196c837', class: "checkbox__warning" }, h("span", { key: '415d8fdbb970d4788cb074f160bb41148e41c4fc', class: "checkbox__warning-icon" }, h("dga-icon", { key: '7c29080eaea262fa0a0ad68984de0f2586c43099', icon: alertCircleStroke, size: 16 })), h("span", { key: '6c64ffdd8f03da322181c1c04d1a3f5665d6348d', class: "checkbox__warning-text" }, this.alertText))))));
     }
     static get is() { return "dga-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-chip/dga-chip.js

@@ -45,7 +45,7 @@ export class DgaChip {
         (_a = this.sxStyleManager) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     render() {
-        return (h(Host, { key: 'bdba45ba852ba72db3f98bbd64902d81823faa8c', id: this.componentId, style: this.rootStyles }, h("span", { key: '81a88ca7b90a201b6a44f34d42694b7f9bf578d8', tabindex: "0", class: `chip chip--${this.variant} chip--${this.size} ${this.rounded ? 'chip--rounded' : ''} ${this.disabled ? 'disabled' : ''} ${this.pressed ? 'pressed' : ''} ${this.isSelected ? "selected" : ""}`, onMouseDown: () => (this.pressed = true), onMouseUp: () => (this.pressed = false), "aria-disabled": this.disabled, onClick: () => {
+        return (h(Host, { key: 'ca437e61e2faa34b41190047fcc958c855523f02', id: this.componentId, style: this.rootStyles }, h("span", { key: '9c8dc1d7f33906e9ac92e03a6ff88bd4a37309f4', tabindex: "0", class: `chip chip--${this.variant} chip--${this.size} ${this.rounded ? 'chip--rounded' : ''} ${this.disabled ? 'disabled' : ''} ${this.pressed ? 'pressed' : ''} ${this.isSelected ? "selected" : ""}`, onMouseDown: () => (this.pressed = true), onMouseUp: () => (this.pressed = false), "aria-disabled": this.disabled, onClick: () => {
                 if (this.isSelected) {
                     this.isSelectedState = false;
                 }
@@ -53,7 +53,7 @@ export class DgaChip {
                     this.isSelectedState = true;
                 }
                 this.onChange(this.isSelectedState);
-            } }, this.leadIcon ? h("span", { class: "chip-icon" }, this.renderIcon(this.leadIcon, this.leadIconProps)) : '', this.label, this.trailIcon ? h("span", { class: "chip-icon" }, this.renderIcon(this.trailIcon, this.trailIconProps)) : '', h("slot", { key: '79d670e5c02ceaabad9e5e186b2a5dd5530ef3ad' }))));
+            } }, this.leadIcon ? h("span", { class: "chip-icon" }, this.renderIcon(this.leadIcon, this.leadIconProps)) : '', this.label, this.trailIcon ? h("span", { class: "chip-icon" }, this.renderIcon(this.trailIcon, this.trailIconProps)) : '', h("slot", { key: '6049782878082c1b42053b24d956a7eb1b8d4e0b' }))));
     }
     static get is() { return "dga-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-circular-progress-bar/dga-circular-progress-bar.js

@@ -26,7 +26,7 @@ export class DgaCircularProgressBar {
         const radius = (this.sizes[this.size] - strokeWidth) / 2;
         const dashArray = 2 * Math.PI * radius;
         const dashOffset = dashArray * (1 - this.percentage / 100);
-        return (h("div", { key: 'b2edc7efa097357c6dfaae93710d4c0b512d8bc2', class: "circular-progress-bar", "aria-size": this.size, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: 'd3fedd514d8e1556a5b04703bc301b2efa89e6ea', class: "circular-progress-bar__label" }, this.variant === 'success' && h("dga-icon", { key: 'dae2a4468f23ec4f9539a4fcbdfde79ca55d8824', icon: checkmarkCircle02Solid, size: this.iconSizes[this.size], color: "#067647" }), this.variant === 'error' && h("dga-icon", { key: '5b779c378024aa96a2b0ca2b8f766e1952b2bc4c', icon: multiplicationSignCircleSolid, size: this.iconSizes[this.size], color: "#B42318" }), this.variant !== 'success' && this.variant !== 'error' && h("h4", { key: '294c73e40a96a56a96f35f3c0bd4019c01ac20a9', class: "circular-progress-bar__label--percentage" }, this.percentage, "%"), this.text && h("h5", { key: '761b5bfffdd29ef854ce0e6bbc85de862134bd32', class: `circular-progress-bar__label--text ${this.variant}` }, this.text)), h("svg", { key: '8261b96a8d05b53fea4e92da83853640f65a5a08', width: this.sizes[this.size], height: this.sizes[this.size], viewBox: `0 0 ${this.sizes[this.size]} ${this.sizes[this.size]}` }, h("circle", { key: '1ced1d324d057a39dce521ec5268cbabf8a5e47a', class: "track", fill: "none", stroke: "#e6e6e6", r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth }), h("circle", { key: '0af43ab3622f784a2fa42f147b794aa467ca165f', class: `tail tail--${this.variant}`, fill: "none", stroke: "currentColor", r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth, "stroke-linecap": 'round', "stroke-dasharray": dashArray, "stroke-dashoffset": dashOffset, transform: `rotate(-180 ${this.sizes[this.size] / 2} ${this.sizes[this.size] / 2})`, style: {
+        return (h("div", { key: 'a2127cb974652381299b2515470ac70c7a894e69', class: "circular-progress-bar", "aria-size": this.size, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: 'dbbd6d378dcf3fe852d1c4cf0f345993da0d4217', class: "circular-progress-bar__label" }, this.variant === 'success' && h("dga-icon", { key: '4e4ee86c5e2be36c4ab7e87fde74e7d44e1f4883', icon: checkmarkCircle02Solid, size: this.iconSizes[this.size], color: "#067647" }), this.variant === 'error' && h("dga-icon", { key: 'a7897e5504a3b72db7d170687080e5ab6347886b', icon: multiplicationSignCircleSolid, size: this.iconSizes[this.size], color: "#B42318" }), this.variant !== 'success' && this.variant !== 'error' && h("h4", { key: 'ddbd676dc325c49ae922afc881157cfe0880592d', class: "circular-progress-bar__label--percentage" }, this.percentage, "%"), this.text && h("h5", { key: 'cce5b2a3f4c9b903c171a4abeccc0ca128b18f79', class: `circular-progress-bar__label--text ${this.variant}` }, this.text)), h("svg", { key: '34ba8c77d52087064226cc52fea95e553f49da46', width: this.sizes[this.size], height: this.sizes[this.size], viewBox: `0 0 ${this.sizes[this.size]} ${this.sizes[this.size]}` }, h("circle", { key: '6ebae2adfc6b9e9901a09347e53a590815b1e802', class: "track", fill: "none", stroke: "#e6e6e6", r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth }), h("circle", { key: 'b671f53ac918ce5f71912feb33f2aad1bab5241f', class: `tail tail--${this.variant}`, fill: "none", stroke: "currentColor", r: radius, cx: this.sizes[this.size] / 2, cy: this.sizes[this.size] / 2, "stroke-width": strokeWidth, "stroke-linecap": 'round', "stroke-dasharray": dashArray, "stroke-dashoffset": dashOffset, transform: `rotate(-180 ${this.sizes[this.size] / 2} ${this.sizes[this.size] / 2})`, style: {
                 transition: 'stroke-dashoffset 0.5s ease',
             } }))));
     }

package/dist/collection/components/dga-codeSnippet/dga-codeSnippet.js

@@ -35,17 +35,17 @@ export class CodeSnippet {
         }
     }
     render() {
-        return (h("div", { key: '12f6471e339749fbea2e0d6f30bc977ae7ba1217', class: "code-snippet-container" }, this.showTabList && (h("div", { key: '24078a88c2b7880fd82289e4cf38dbda645fb539', class: "code-snippet-tabs" }, h("dga-tabs", { key: '6259df4d0b8cd17cdcaf81fb092f2d0f85d6bc69', divider: true, orientation: "horizontal", size: "lg", tabsList: Object.keys(this.snippets).map(tab => ({
+        return (h("div", { key: 'ce73923556f916d0bfa605c745044e8ffca483d6', class: "code-snippet-container" }, this.showTabList && (h("div", { key: '51eeb0541400556f44755559ee06202774c65faf', class: "code-snippet-tabs" }, h("dga-tabs", { key: '09c06a91095329b863e914a8dc5777c97d68c739', divider: true, orientation: "horizontal", size: "lg", tabsList: Object.keys(this.snippets).map(tab => ({
                 label: tab,
                 onClick: () => this.handleTabClick(tab),
-            })) }))), h("pre", { key: '5eebbe3fa17ca36c8aa76b5e34385ac4f9261cdb', class: "code-snippet-code-display" }, h("dga-button-v2", { key: '4d9881c101455c3ca549037dc0a03380e2e43618', size: "lg", iconOnly: true, variant: 'subtle', leadIcon: true, leadIconProps: {
+            })) }))), h("pre", { key: '79f2a0b519cffde2ee9b7cdd3e29225db312069f', class: "code-snippet-code-display" }, h("dga-button-v2", { key: '75ca3f58a7b8d07eba4f26371ea79af91432802e', size: "lg", iconOnly: true, variant: 'subtle', leadIcon: true, leadIconProps: {
                 name: 'copy-01',
                 size: 24,
                 color: '#161616',
                 variant: 'stroke',
-            }, class: `code-snippet-icon ${this.type}`, onClick: () => this.handleCopy(), onColor: false }), h("code", { key: 'bb7055245faf7cac9c769f37b2f0e4b700439d66', style: {
+            }, class: `code-snippet-icon ${this.type}`, onClick: () => this.handleCopy(), onColor: false }), h("code", { key: 'c10578da53d13dbde56dba9dad9731dcd12d8e37', style: {
                 height: this.showButton && this.type === 'multi-line' && !this.showMore ? '150px' : 'auto',
-            } }, this.renderWithLineNumbers(this.snippets[this.activeTab])), this.showButton && this.type === 'multi-line' && (h("div", { key: '2955624377bc184f02436c95ae0684b19b8b06e0', class: "code-snippet-wrapper" }, h("dga-button-v2", { key: 'a5ba156db1d12e76df1c0f0ac78337200fdfeb37', label: this.showMore ? 'Show Less' : 'Show More', size: "md", trailIcon: true, variant: 'subtle', trailIconProps: { name: !this.showMore ? 'arrow-down-01' : 'arrow-up-01', size: 20, color: '#161616', variant: 'stroke' }, onClick: () => (this.showMore = !this.showMore), onColor: false }))))));
+            } }, this.renderWithLineNumbers(this.snippets[this.activeTab])), this.showButton && this.type === 'multi-line' && (h("div", { key: '8bf4f16e1b8036bc365015f1a9f5a368f5c43fed', class: "code-snippet-wrapper" }, h("dga-button-v2", { key: 'fbe4b8e7f7260b041af049c54232157158643812', label: this.showMore ? 'Show Less' : 'Show More', size: "md", trailIcon: true, variant: 'subtle', trailIconProps: { name: !this.showMore ? 'arrow-down-01' : 'arrow-up-01', size: 20, color: '#161616', variant: 'stroke' }, onClick: () => (this.showMore = !this.showMore), onColor: false }))))));
     }
     static get is() { return "dga-codesnippet"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-collapse/dga-collapse.js

@@ -35,7 +35,7 @@ export class DgaCollapse {
     }
     render() {
         const styles = Object.assign(Object.assign({ overflow: 'hidden', transition: `height ${this.transitionDuration} ${this.transitionType}`, height: `${this.height}px` }, (this.height === 'auto' ? { height: 'auto' } : {})), this.customStyle);
-        return (h("div", { key: 'aaa6a14e472c65cfcbf25e6def0d98633e72cbad', ref: (el) => this.containerRef = el, "aria-hidden": !this.open, style: styles }, h("slot", { key: '0d62c977873d3feee2f4fe44318682d5f534be9b' })));
+        return (h("div", { key: '3216259253795625abadf278ce1b954d9f269932', ref: (el) => this.containerRef = el, "aria-hidden": !this.open, style: styles }, h("slot", { key: '1fd2d53b96c7ebf3e3c1ab47444e16d718b47441' })));
     }
     static get is() { return "dga-collapse"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dga-content-switcher/dga-content-switcher-item.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaContentSwitcherItem {
     render() {
-        return h("slot", { key: '276717c2abf56035ab4aaada1440adbc2fec178d' });
+        return h("slot", { key: '83516f09f1675ae6bc38dd7ea81717b8df682d5b' });
     }
     static get is() { return "dga-content-switcher-item"; }
     static get properties() {

package/dist/collection/components/dga-content-switcher/dga-content-switcher-panel.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DgaContentSwitcherPanel {
     render() {
-        return (h("div", { key: 'c9cb4fa384215722b786c2fdd64681c2d09fe641', class: "content-switcher-panel", hidden: this.value !== this.index }, h("slot", { key: '54afc3fdc6803147345935ca933be15669acd2e9' })));
+        return (h("div", { key: 'a5b0f5fc828acf1f689061956b9a27a11a30b95f', class: "content-switcher-panel", hidden: this.value !== this.index }, h("slot", { key: '49b4ec1bf9d71364b92e607d03cd868cc92373e4' })));
     }
     static get is() { return "dga-content-switcher-panel"; }
     static get properties() {

package/dist/collection/components/dga-content-switcher/dga-content-switcher.js

@@ -26,7 +26,7 @@ export class DgaContentSwitcher {
         };
     }
     render() {
-        return (h("div", { key: 'ec05f9006f9f4b7d7b3257cad274aa8c96a68e0a', class: "content-switcher" }, h("div", { key: '1180cf2c5396c71a9f87325cc0cac43f53822604', class: "content-switcher__items" }, this.items.map((item, index) => {
+        return (h("div", { key: 'e39602a5ce36dfdc3aec7d38e5d1a0ceb02e26a3', class: "content-switcher" }, h("div", { key: 'ab4118494678a34e03ebc236a7026ad49a7971d6', class: "content-switcher__items" }, this.items.map((item, index) => {
             const selected = index === this.selected;
             const itemType = index === 0 ? 'first' : index === this.items.length - 1 ? 'last' : 'mid';
             const className = `content-switcher__item content-switcher__item--${itemType} ${this.onColor ? 'content-switcher__item--on-color' : ''} content-switcher__item--${this.size} ${selected ? 'content-switcher__item--selected' : ''}`;

package/dist/collection/components/dga-data-table/dga-data-table-usage.js

@@ -4,7 +4,7 @@ export class DgaDateFieldUsage {
         this.value = '';
     }
     render() {
-        return (h("div", { key: 'b062256824f94b73767ddf851b50e428f9ed0f32' }, h("h1", { key: '196afebf7bd556d2a8bb81f6c0c65b066bdfc94f' }, "Date Field Example"), h("div", { key: 'd6376196c5786e3f32040cc12aaebd727b7679ba', style: { padding: '50px' } }, h("div", { key: 'd34aecd7b026bba6336211a3bbcf24149fde82b0', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("dga-data-table", { key: 'c53c962fe81e55351e5799195c68abb34b8a404b', cells: [
+        return (h("div", { key: 'c7cb60800f522860957ae4cc8674705d57be9f73' }, h("h1", { key: '5059ae1fc980d4a90da5b810e8a4852a4540e183' }, "Date Field Example"), h("div", { key: '226f9f4cae021a7a4e45863fda58fdf4f30020e7', style: { padding: '50px' } }, h("div", { key: '9e30b1f97ba4d8b110b825a10429edad4bd888d3', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, h("dga-data-table", { key: '437ee01120e0e1f4faaa04447f59a98e8a6dec2d', cells: [
                 {
                     colSpan: 1,
                     isFilter: true,

package/dist/collection/components/dga-data-table/dga-table.body.js

@@ -115,7 +115,7 @@ export class DgaTableBody {
     //         this.selected = index;
     //     };
     render() {
-        return (h("tbody", { key: 'b91da2a8e4a83c1cc7cc9e562f3eed9d39066309' }, h("slot", { key: '7976254c2d428d10c6b2629b585e209845b15167' })));
+        return (h("tbody", { key: 'ebc8990f89416352620ee02c81d343b27ad7555d' }, h("slot", { key: 'dc722e11b272dfc589a5bfda1fef3b7af32969be' })));
     }
     static get is() { return "dga-table-body"; }
     static get properties() {

package/dist/collection/components/dga-data-table/dga-table.js

@@ -92,7 +92,7 @@ export class DgaTable {
         this.sortedData = cloneData;
     }
     render() {
-        return (h("div", { key: 'f1d1ca5641ef3da824d37f45bdd804fba90a0a75', class: `table-wrapper ${this.contained ? 'table-contained' : ''}` }, h("table", { key: 'ddab82fd0bc409b6f8f851e6cf8dc7e1a33097d9', class: ` azm-table ${this.contained ? 'table-contained' : ''}`, style: { direction: this.direction ? 'rtl' : 'ltr' } }, h("slot", { key: 'd206296cddd14ab6863fee91dac155623ec809f8' }))));
+        return (h("div", { key: '9ca8290b89d1ed34e3e0e6b46d72706eb4f3a449', class: `table-wrapper ${this.contained ? 'table-contained' : ''}` }, h("table", { key: '2ea9b4d7e3924c8557d6cfdff2f178b7c53af7b9', class: ` azm-table ${this.contained ? 'table-contained' : ''}`, style: { direction: this.direction ? 'rtl' : 'ltr' } }, h("slot", { key: 'b68d4d24e96676ef9d9231013beeb3a73dd61d7e' }))));
     }
     static get is() { return "dga-table"; }
     static get properties() {

package/dist/collection/components/dga-date-field/dga-date-field.css

@@ -2446,7 +2446,6 @@ a:focus {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-xs);
-  mix-blend-mode: multiply;
   margin-left: calc(-1 * var(--spacing-2));
   margin-right: var(--spacing-2);
   border: 0;
@@ -2658,12 +2657,10 @@ a:focus {
 .breadcrumb-dropdown-item:hover {
   border-radius: var(--radius-xs);
   background: var(--button-background-neutral-hovered);
-  mix-blend-mode: multiply;
 }
 .breadcrumb-dropdown-item:active {
   border-radius: var(--radius-xs);
   background: var(--button-background-neutral-pressed, #E5E7EB);
-  mix-blend-mode: multiply;
 }
 
 .date-picker-dropdown {

package/dist/collection/components/dga-datepicker/DateCell.js

@@ -35,7 +35,7 @@ export class DateCell {
             className += ' date-cell--mid-range--first-child';
         if (this.isLastRangeChild)
             className += ' date-cell--mid-range--last-child';
-        return (h("button", { key: '36011e938444f5b50b5067f2aed264f62d2fe571', type: "button", class: className, onClick: () => this.handleClick(), onMouseDown: this.handleAddPressed, onMouseUp: this.handleRemovePressed, onMouseOut: this.handleRemovePressed, disabled: !this.isCurrentMonth }, h("div", { key: '3ba233f0d2879ff1a19e122b92f8d7e7a774a670', class: "date-cell__label" }, h("span", { key: 'ace2b315a842323d6192cc0d6cc840232feeb1d8' }, this.date.getDate()))));
+        return (h("button", { key: 'f559843cbb88bb7d05985c3cb7832499ab8e9f24', type: "button", class: className, onClick: () => this.handleClick(), onMouseDown: this.handleAddPressed, onMouseUp: this.handleRemovePressed, onMouseOut: this.handleRemovePressed, disabled: !this.isCurrentMonth }, h("div", { key: '7d61c94afc9724d2eceb259cc1ea8ca8079da563', class: "date-cell__label" }, h("span", { key: '417c72c3d3b413c6cefe2b188a44570d98d3bd63' }, this.date.getDate()))));
     }
     static get is() { return "date-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-datepicker/MonthNavigator.js

@@ -80,21 +80,21 @@ export class MonthNavigator {
         }
     }
     render() {
-        return (h("div", { key: '05f91c167831ecd51edde537819a782991aa7e8c', class: "date-picker__navigator" }, h("div", { key: '6f85058b32117e4374ee1a6df57911bdba22684e', class: "date-picker__navigator-label" }, this.currentMonth.toLocaleDateString(this.RTL ? 'ar' : 'default', {
+        return (h("div", { key: 'd6b076674b8b8b39e56f478f066e9d6bd9dc5c83', class: "date-picker__navigator" }, h("div", { key: '2a41bdf13926e6ca8968a828d7e19628fba2e40a', class: "date-picker__navigator-label" }, this.currentMonth.toLocaleDateString(this.RTL ? 'ar' : 'default', {
             month: 'long',
             // year: 'numeric',
-        }), " ", h("span", { key: 'c7bb108bcad4c576b74af519aaff1d1119bd5324', class: "year-selector", onClick: this.toggleYearsDropdown, style: {
+        }), " ", h("span", { key: '365a10ce53d41df062b6de483fbddea8893bfc13', class: "year-selector", onClick: this.toggleYearsDropdown, style: {
                 cursor: 'pointer',
                 position: 'relative',
                 display: 'inline-flex',
                 alignItems: 'center'
             } }, this.currentMonth.getFullYear(), this.isYearsDropdownOpen && (
         // {true && (
-        h("ul", { key: 'e6c111d31c15ba50ebc0b6a647c7e179cc54a2d0', class: "dga-breadcrumb-dropdown", ref: (el) => this.yearDropdownRef = el }, this.yearsList.map(year => (h("li", { key: year, class: `dga-breadcrumb-dropdown-item ${year === this.currentMonth.getFullYear() ? 'selected-year' : ''}` }, h("a", { onClick: (e) => this.handleYearSelect(year, e) }, h("span", { class: "link__label" }, year))))))))), this.showArrows && (h("div", { key: '639faa59a241cf05a94378c40d356d9af9b4d3f2', class: "date-picker__navigator-buttons" }, h("dga-button-v2", { key: 'bc024b6dccd796467c06b2c47a96f36dc4c2d0e1', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
+        h("ul", { key: '2d9951e3cbffbfda673c2184edc56f40f3b38986', class: "dga-breadcrumb-dropdown", ref: (el) => this.yearDropdownRef = el }, this.yearsList.map(year => (h("li", { key: year, class: `dga-breadcrumb-dropdown-item ${year === this.currentMonth.getFullYear() ? 'selected-year' : ''}` }, h("a", { onClick: (e) => this.handleYearSelect(year, e) }, h("span", { class: "link__label" }, year))))))))), this.showArrows && (h("div", { key: '1d3619c88bb5670abeedf857b5fcfc45a1d328da', class: "date-picker__navigator-buttons" }, h("dga-button-v2", { key: 'b80917f61e80f24dd37bbb21c7f58a4aaf74c85a', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'arrow-left-02',
                 variant: 'stroke',
                 type: 'rounded',
-            }, onClick: this.handlePrevClick }), h("dga-button-v2", { key: 'd06fdabf45bd9ce5d092893eaba9b6e10866d7bd', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
+            }, onClick: this.handlePrevClick }), h("dga-button-v2", { key: 'bcf1de404bc30e58c42a62b36bf15b313c994bcf', variant: "subtle", size: "lg", iconOnly: true, leadIcon: true, leadIconProps: {
                 name: 'arrow-right-02',
                 variant: 'stroke',
                 type: 'rounded',

package/dist/collection/components/dga-datepicker/dga-datepicker.css

@@ -2406,7 +2406,6 @@ a:focus {
   align-items: center;
   gap: var(--spacing-none);
   background-color: transparent;
-  mix-blend-mode: multiply;
   color: var(--text-default);
 }
 .date-cell__label span {
@@ -2554,16 +2553,13 @@ a:focus {
 .dga-breadcrumb-dropdown-item:hover {
   border-radius: var(--radius-xs);
   background: var(--button-background-neutral-hovered);
-  mix-blend-mode: multiply;
 }
 .dga-breadcrumb-dropdown-item:active {
   border-radius: var(--radius-xs);
   background: var(--button-background-neutral-pressed, #e5e7eb);
-  mix-blend-mode: multiply;
 }
 .dga-breadcrumb-dropdown-item.selected-year {
   background: var(--button-background-neutral-pressed, #e5e7eb);
-  mix-blend-mode: multiply;
 }
 .dga-breadcrumb-dropdown-item > .dropdown__option-icon {
   opacity: 0;

package/dist/collection/components/dga-datepicker/dga-datepicker.js

@@ -139,10 +139,10 @@ export class DgaDatepicker {
         }
     }
     render() {
-        return (h(Host, { key: 'f0812ac63e5caa26783e67831dc7e2208e4a5b14' }, h("div", { key: 'f589640720a85391d84a05288af4fa498f38b0e8', class: "date-picker-root dga-flex-column", "data-dual-view": this.dualMonthView, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: 'c1bf689dc017da87f6ba6ff4e95401bbcb5c7b83', class: "dga-flex" }, this.qickOptions && this.range && (h("div", { key: 'da181f17bcd69eae2132a33c361c7648aea2ff0b', class: "date-picker-root__quick-options" }, h("span", { key: '1ff373c626945f90ec64f66e4e4d400b76924b7f', class: "text-md-regular" }, this.RTL ? 'اختصارات' : 'Qick options'), h("ul", { key: 'bb119659c7612b663ce00b04f6bdcc4b928bd71c', class: "options-list" }, defaultStaticRanges.map(({ label, range }) => (h("li", { key: label[this.RTL ? 'ar' : 'en'] }, h("button", { class: "text-md-medium", onClick: () => {
+        return (h(Host, { key: '32296ec57c310e566d84304a373cc777365ae4bd' }, h("div", { key: '18adf8cbaa6ba627ed311e8ae8ade28e7ede183d', class: "date-picker-root dga-flex-column", "data-dual-view": this.dualMonthView, dir: this.RTL ? 'rtl' : 'ltr' }, h("div", { key: 'd74f6f4cda21adc226e7cf80e868283a91ab2816', class: "dga-flex" }, this.qickOptions && this.range && (h("div", { key: '927a7fa8daef178ad1ff854ca60a19646f14d793', class: "date-picker-root__quick-options" }, h("span", { key: 'c46b14b5e3a0be912eb5c6bfad86dc5a4b7a8bc0', class: "text-md-regular" }, this.RTL ? 'اختصارات' : 'Qick options'), h("ul", { key: '30b9b41847ce8d9dc70029d64e8816c19a67219f', class: "options-list" }, defaultStaticRanges.map(({ label, range }) => (h("li", { key: label[this.RTL ? 'ar' : 'en'] }, h("button", { class: "text-md-medium", onClick: () => {
                 this.rangeDates = range();
                 console.log(range, "rrrrrrrrrrrrrrrrrrrraaaaaaaaaaaaaaaaaange");
-            } }, label[this.RTL ? 'ar' : 'en']))))))), h("div", { key: 'c729cd8077cb81817a1ce6272a82980e5dd7ab64', class: "date-picker-root__main" }, this.inputField && (h("div", { key: '87aa2f852d1a493a8d12116ad271669da1042e2d', class: "date-picker-root__main__inputs" }, h("dga-text-input", { key: '086c83548a6c76de616f7c5153774b542e7e452a', placeholder: "Month DD, YYYY", name: "startDate", value: this.inputDates.startDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
+            } }, label[this.RTL ? 'ar' : 'en']))))))), h("div", { key: '499a0251e1e834a392e286a4a2abab34a4d2770c', class: "date-picker-root__main" }, this.inputField && (h("div", { key: '25aab9df580d51702674e6d2cb14b96afdbaeada', class: "date-picker-root__main__inputs" }, h("dga-text-input", { key: '8d32b42797391b3fdff3e9e05dc3c58694189b36', placeholder: "Month DD, YYYY", name: "startDate", value: this.inputDates.startDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
                 if (validateInputDate(e.target.value)) {
                     const date = new Date(e.target.value);
                     if (this.range) {
@@ -165,7 +165,7 @@ export class DgaDatepicker {
                         this.selectedDate = date;
                     }
                 }
-            } }), this.range && (h("dga-text-input", { key: 'd8ce83659c1979ad80b1a7ab2f163bc8695f469e', placeholder: "Month DD, YYYY", name: "endDate", value: this.inputDates.endDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
+            } }), this.range && (h("dga-text-input", { key: 'a85561f46604773cf5f216ea530c09e99b6125aa', placeholder: "Month DD, YYYY", name: "endDate", value: this.inputDates.endDate, onChange: (e) => this.handleInputDate(e), onBlur: (e) => {
                 if (validateInputDate(e.target.value)) {
                     const date = new Date(e.target.value);
                     if (this.range) {
@@ -199,19 +199,19 @@ export class DgaDatepicker {
                         this.selectedDate = date;
                     }
                 }
-            } })))), h("div", { key: '050e7b752430fee82527c958aebc808f80064c6e', class: "date-picker-root__main__content-wrapper" }, h("div", { key: 'b35b034d99420de0f38e4bc3c78556a31a574a0f', class: "date-picker" }, h("month-navigator", { key: '94cfec65382bc3d0d80ea6f2afc3245c133d202c', RTL: this.RTL, currentMonth: this.currentMonth, onChange: (date) => this.handleChangeMonth(date), showArrows: !this.dualMonthView }), h("div", { key: 'e051726d29c5b10ffa270ef742ece69ae71b8d33', class: "date-picker__weekdays" }, daysMap[this.RTL ? 'ar' : 'en'].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: 'bdf730f57ea22f32dd0e8be903482c86cf184213', class: "date-picker__date-grid" }, this.days.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(), isSelected: (this.range)
+            } })))), h("div", { key: '5c01955adfe4c4956e11360a85247585343441f8', class: "date-picker-root__main__content-wrapper" }, h("div", { key: 'd2d01afbee7000ef84f733e87cdfd428472fab89', class: "date-picker" }, h("month-navigator", { key: 'a13194be8a5be5d09442c830df8a0a2d9d970d10', RTL: this.RTL, currentMonth: this.currentMonth, onChange: (date) => this.handleChangeMonth(date), showArrows: !this.dualMonthView }), h("div", { key: '53a1f6a994400288579a4bb762ee48ce61b0377b', class: "date-picker__weekdays" }, daysMap[this.RTL ? 'ar' : 'en'].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '56502150805266cd4c26bee86515ba28c74d2804', class: "date-picker__date-grid" }, this.days.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.currentMonth.getMonth(), isSelected: (this.range)
                 ? (!!this.rangeDates.startDate &&
                     compareDatesWithoutTime(date, this.rangeDates.startDate)) ||
                     (!!this.rangeDates.endDate &&
                         compareDatesWithoutTime(date, this.rangeDates.endDate))
                 : this.selectedDate
                     ? compareDatesWithoutTime(date, this.selectedDate)
-                    : false, isToday: new Date().toDateString() === date.toDateString(), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), midRange: this.isMidRange(date), onSelect: (date) => this.handleSelectDate(date) }))))), this.dualMonthView && (h("div", { key: '27b6fdd58270fbc90822b78e408b4a8ac9b0334e', class: "date-picker" }, h("month-navigator", { key: '76fecd6b8c0ebb5b5314c3ca1f896b1c20b1a89f', currentMonth: this.nextMonth, onChange: (date) => {
+                    : false, isToday: new Date().toDateString() === date.toDateString(), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), midRange: this.isMidRange(date), onSelect: (date) => this.handleSelectDate(date) }))))), this.dualMonthView && (h("div", { key: '2e1e84ff8d043bf31a3a25879e44dc6482fce83e', class: "date-picker" }, h("month-navigator", { key: 'c77df016858f929b72acd9efb77b947bc4966c58', currentMonth: this.nextMonth, onChange: (date) => {
                 const newMonth = date.getMonth() === this.currentMonth.getMonth()
                     ? new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() - 1)
                     : new Date(this.currentMonth.getFullYear(), this.currentMonth.getMonth() + 1);
                 this.handleChangeMonth(newMonth);
-            }, showArrows: true }), h("div", { key: 'f469c26989165b0fbf9a1679d390b80b78aaa431', class: "date-picker__weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: '2445dbfd49a9150a1f773492fa51eace253a3daa', class: "date-picker__date-grid" }, this.nextMonthDays.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.nextMonth.getMonth(), isSelected: this.range
+            }, showArrows: true }), h("div", { key: 'c726968c53e48fd36d0a3615691ac47938ba8fe3', class: "date-picker__weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (h("div", { key: day, class: "date-picker__weekday" }, day)))), h("div", { key: 'e31762fb2620d7047165d879fa2ce09a64a4c8df', class: "date-picker__date-grid" }, this.nextMonthDays.map((date) => (h("date-cell", { key: date.toString(), date: date, isCurrentMonth: date.getMonth() === this.nextMonth.getMonth(), isSelected: this.range
                 ? (!!this.rangeDates.startDate &&
                     date.getTime() ===
                         this.rangeDates.startDate.getTime()) ||
@@ -219,7 +219,7 @@ export class DgaDatepicker {
                         date.getTime() === this.rangeDates.endDate.getTime())
                 : this.selectedDate
                     ? date.getTime() === this.selectedDate.getTime()
-                    : false, isToday: new Date().toDateString() === date.toDateString(), midRange: this.isMidRange(date), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), onSelect: (date) => this.handleSelectDate(date) }))))))))), this.submitButton && (h("div", { key: '2304ec1af3e43079f56144ccd3aa5a3a9317f683', class: "date-picker-root__main__buttons" }, h("dga-button-v2", { key: 'a46f48da80ff8416d2f9f4c7beed5f85992ad349', label: "Cancel", onClick: this.onCancel, size: "lg", variant: "secondary-outline" }), h("dga-button-v2", { key: '87fe9c1b8b0fc1c1f34bedfb041a8bf54342853a', label: "Submit", onClick: this.onSubmit, size: "lg", variant: "neutral" }))))));
+                    : false, isToday: new Date().toDateString() === date.toDateString(), midRange: this.isMidRange(date), isFirstRangeChild: this.isFirstRangeChild(date), isLastRangeChild: this.isLastRangeChild(date), onSelect: (date) => this.handleSelectDate(date) }))))))))), this.submitButton && (h("div", { key: 'aeef03d207c40a512497d446696a7f62195b967d', class: "date-picker-root__main__buttons" }, h("dga-button-v2", { key: '604a3f0d0045bc318d51ee568d1c064beee8b177', label: "Cancel", onClick: this.onCancel, size: "lg", variant: "secondary-outline" }), h("dga-button-v2", { key: '2414764957f47a6579dfb37368d159b5b7f3f48d', label: "Submit", onClick: this.onSubmit, size: "lg", variant: "neutral" }))))));
     }
     static get is() { return "dga-datepicker"; }
     static get originalStyleUrls() {

package/dist/collection/components/dga-digital-signature/dga-digital-signature.css

@@ -2482,13 +2482,13 @@ a:focus {
   gap: 24px;
   padding: var(--spacing-md, 8px) var(--spacing-3xl, 24px);
   border-radius: var(--radius-md, 8px);
-  background: #fff;
+  background: var(--background-white, #FFF);
 }
 @media screen and (max-width: 768px) {
   .digital_more_content {
     margin-top: 24px;
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    gap: var(--spacing-3xl, 24px);
     gap: 16px;
     padding: var(--spacing-md, 16px);
   }
@@ -2526,7 +2526,6 @@ a:focus {
   .digital_more_content .digital_more_content_content p {
     font-size: 14px;
     line-height: 20px;
-    text-align: center;
     width: 100%;
   }
 }