@ukic/canary-web-components 3.0.0-canary.4 → 3.0.0-canary.5

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cf27b16.js');
 const dateHelpers = require('./date-helpers-c9551119.js');
-const helpers = require('./helpers-a67ad3a4.js');
+const helpers = require('./helpers-c80f6ce4.js');
 
 const chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
@@ -118,7 +118,7 @@ const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear,
                     index.h("path", { d: "M11.3333 5.33341H3.21996L6.94663 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L3.21996 6.66675H11.3333V5.33341Z", fill: "currentColor" }))))));
 };
 
-const icDatePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem);--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.ic-date-picker-large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.ic-date-picker-small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-architectural-white);z-index:var(--ic-z-index-date-picker);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.ic-date-picker-small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.ic-date-picker-large) .calendar-container{min-width:21rem;max-width:25.5rem}:host .calendar-container.above{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{flex-wrap:wrap;display:inline-flex;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.ic-date-picker-small) .month-picker,:host(.ic-date-picker-small) .year-picker{width:13.125rem}:host(.ic-date-picker-large) .month-picker,:host(.ic-date-picker-large) .year-picker{width:20rem}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width)}:host .prev-decade .year-button svg{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .prev-decade .year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg)}:host(.ic-date-picker-small) .prev-decade .year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade .year-button svg{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .next-decade .year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg)}:host(.ic-date-picker-small) .next-decade .year-button::part(button),:host(.ic-date-picker-large) .next-decade .year-button::part(button){padding-left:var(--ic-space-xl)}:host .bottom-buttons{padding-top:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-date-picker-small) .bottom-buttons{padding-top:var(--ic-space-xxs)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-date-picker-large) .calendar{width:19.25rem}:host(.ic-date-picker-small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0}:host(.ic-date-picker-small) .calendar-days-container{padding:var(--ic-space-xxxs) 0}:host(.ic-date-picker-large) .calendar-days-container{padding:var(--ic-space-xs) 0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}:host(.ic-date-picker-small) .calendar-day-header,:host(.ic-date-picker-large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .calendar-day-header ic-typography{--ic-typography-color:var(--ic-color-text-tertiary);text-align:center}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.ic-date-picker-small) .day-button-container{width:2rem;height:2rem}:host(.ic-date-picker-large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-architectural-white);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.ic-date-picker-large) .day-button{width:2.25rem;height:2.25rem}:host(.ic-date-picker-small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;--ic-typography-color:var(--ic-color-text-primary)}:host .day-button.outside-range ic-typography{--ic-typography-color:var(--ic-architectural-400)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{--ic-typography-color:var(--ic-color-text-primary)}:host .day-button:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-action-dark-bg-pressed)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-action-default)}:host .day-button.selected ic-typography{--ic-typography-color:var(--ic-color-white-text)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-action-default-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-action-default-pressed)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-action-default)}:host(.ic-date-picker-small) .day-button.today::after{bottom:0.35rem}:host(.ic-date-picker-large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-architectural-white)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-border-hc)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
+const icDatePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem);--ic-input-label-helpertext-padding:var(--ic-space-xxs)}:host(.ic-date-picker-large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.ic-date-picker-small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-color:var(--ic-date-picker-calendar-border);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-date-picker-calendar-bg);z-index:var(--ic-z-index-date-picker);box-sizing:border-box;box-shadow:var(--ic-date-picker-calendar-elevation);margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.ic-date-picker-small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.ic-date-picker-large) .calendar-container{min-width:21rem;max-width:25.5rem}:host .calendar-container.above{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{flex-wrap:wrap;display:inline-flex;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.ic-date-picker-small) .month-picker,:host(.ic-date-picker-small) .year-picker{width:13.125rem}:host(.ic-date-picker-large) .month-picker,:host(.ic-date-picker-large) .year-picker{width:20rem}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width)}:host .prev-decade .year-button svg{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .prev-decade .year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg)}:host(.ic-date-picker-small) .prev-decade .year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade .year-button svg{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .next-decade .year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg)}:host(.ic-date-picker-small) .next-decade .year-button::part(button),:host(.ic-date-picker-large) .next-decade .year-button::part(button){padding-left:var(--ic-space-xl)}:host .bottom-buttons{padding-top:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-date-picker-small) .bottom-buttons{padding-top:var(--ic-space-xxs)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.ic-date-picker-large) .calendar{width:19.25rem}:host(.ic-date-picker-small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0}:host(.ic-date-picker-small) .calendar-days-container{padding:var(--ic-space-xxxs) 0}:host(.ic-date-picker-large) .calendar-days-container{padding:var(--ic-space-xs) 0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}:host(.ic-date-picker-small) .calendar-day-header,:host(.ic-date-picker-large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .calendar-day-header ic-typography{--ic-typography-color:var(--ic-date-picker-calendar-label);text-align:center}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.ic-date-picker-small) .day-button-container{width:2rem;height:2rem}:host(.ic-date-picker-large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-date-picker-calendar-bg);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.ic-date-picker-large) .day-button{width:2.25rem;height:2.25rem}:host(.ic-date-picker-small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;--ic-typography-color:var(--ic-date-picker-date-label-default)}:host .day-button.outside-range ic-typography{--ic-typography-color:var(--ic-date-picker-date-label-disabled)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{--ic-typography-color:var(--ic-date-picker-date-label-default)}:host .day-button:hover:not(.disabled){background-color:var(--ic-date-picker-date-default-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-date-picker-date-default-bg-pressed)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-date-picker-date-active-bg-default)}:host .day-button.selected ic-typography{--ic-typography-color:var(--ic-date-picker-date-label-selected)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-date-picker-date-active-bg-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-date-picker-date-active-bg-pressed)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-date-picker-default-underline)}:host(.ic-date-picker-small) .day-button.today::after{bottom:0.35rem}:host(.ic-date-picker-large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-date-picker-selected-underline)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-border-hc)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
 
 const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
 const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
@@ -319,7 +319,7 @@ const DatePicker = class {
         };
         this.renderMonthYearNavButton = (id, flip, disabled) => {
             const buttonSize = this.size;
-            return (index.h("div", { "aria-hidden": "true" }, index.h("ic-button", { id: id, disableTooltip: true, disabled: disabled, onClick: this.monthYearNavClickHandler, class: { flip: flip }, variant: "icon", innerHTML: chevron, size: buttonSize, tabIndex: -1, "aria-hidden": "true", onMouseDown: this.navButtonMouseDownHandler })));
+            return (index.h("div", { "aria-hidden": "true" }, index.h("ic-button", { id: id, disableTooltip: true, disabled: disabled, onClick: this.monthYearNavClickHandler, class: { flip: flip }, variant: "icon-tertiary", innerHTML: chevron, size: buttonSize, tabIndex: -1, "aria-hidden": "true", onMouseDown: this.navButtonMouseDownHandler })));
         };
         this.monthYearNavClickHandler = (ev) => {
             const target = ev.target;
@@ -859,6 +859,7 @@ const DatePicker = class {
         this.showPickerTodayButton = true;
         this.size = "medium";
         this.startOfWeek = helpers.IcWeekDays.Monday;
+        this.theme = "inherit";
         this.validationStatus = "";
         this.validationText = "";
         this.value = "";
@@ -997,7 +998,7 @@ const DatePicker = class {
         this.myCalendarButtonClicked = false;
     }
     render() {
-        const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
+        const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, theme, } = this;
         let monthButtonText = "";
         if (monthPickerVisible) {
             monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
@@ -1023,7 +1024,10 @@ const DatePicker = class {
             yesterday.setDate(minDate.getDate() - 1);
             minDay = yesterday;
         }
-        return (index.h(index.Host, { onKeyDown: this.keyDownHandler, class: { [`ic-date-picker-${size}`]: true } }, index.h("div", { class: "date-input-container" }, index.h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (index.h("div", null, index.h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), index.h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+        return (index.h(index.Host, { onKeyDown: this.keyDownHandler, class: {
+                [`ic-date-picker-${size}`]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, index.h("div", { class: "date-input-container" }, index.h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (index.h("div", null, index.h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), index.h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
                 "calendar-container": true,
                 above: this.showPickerAbove,
             }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, index.h("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("div", { class: {