@flightlesslabs/dodo-ui 0.9.1 → 0.10.0

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/CalendarDateChip.svelte

@@ -0,0 +1,783 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import getMoment from '../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
+let { class: className = '', dayOfMonth, roundness = 1, showLastMonth = true, showNextMonth = true, selected = false, showToday = true, color = 'primary', ref = $bindable(), customCalendarDateChipContent: customCalendarDateChipContentInternal, customCalendarDateChip: customCalendarDateChipInternal, onselect, onselectRange, size = 'normal', weekend, timezone, utc, showValueRange = false, rangeType, } = $props();
+const dayNumber = Number(getMoment(dayOfMonth.date, undefined, { timezone, utc }).format('D'));
+const disabled = dayOfMonth.disabled || false;
+const today = showToday && dayOfMonth.today ? true : false;
+const isRangeStart = rangeType === 'start' || false;
+const isRangeEnd = rangeType === 'end' || false;
+const inRange = dayOfMonth.inRange || false;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarDateChipContentTyped = customCalendarDateChipContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customCalendarDateChipTyped = customCalendarDateChipInternal;
+function onselectMod(e) {
+    if (showValueRange && onselectRange) {
+        onselectRange(dayOfMonth.date, rangeType || 'start', dayOfMonth, e);
+    }
+    else if (onselect) {
+        onselect(dayOfMonth.date, dayOfMonth, e);
+    }
+}
+</script>
+
+{#snippet chipContent()}
+  {#if customCalendarDateChipTyped}
+    {@render customCalendarDateChipTyped(dayOfMonth)}
+  {:else}
+    <button class="chip" {disabled} onclick={onselectMod}>
+      {#if customCalendarDateChipContentTyped}
+        {@render customCalendarDateChipContentTyped(dayOfMonth)}
+      {:else}
+        {dayNumber}
+      {/if}
+    </button>
+  {/if}
+{/snippet}
+
+<li
+  class:disabled
+  class:showLastMonth
+  class:showNextMonth
+  class:today
+  class:selected
+  class:isRangeStart
+  class:isRangeEnd
+  class:inRange
+  class:weekend
+  class={[
+    'dodo-ui-CalendarDateChip',
+    `roundness--${roundness}`,
+    `color--${color}`,
+    `size--${size}`,
+    `${dayOfMonth.isCurrentMonth ? 'isCurrentMonth' : 'isNotCurrentMonth'}`,
+    `${dayOfMonth.isLastMonth ? 'isLastMonth' : ''}`,
+    `${dayOfMonth.isNextMonth ? 'isNextMonth' : ''}`,
+    className,
+  ].join(' ')}
+  bind:this={ref}
+>
+  {#if dayOfMonth.isCurrentMonth}
+    {@render chipContent()}
+  {:else if dayOfMonth.isLastMonth && showLastMonth}
+    {@render chipContent()}
+  {:else if dayOfMonth.isNextMonth && showNextMonth}
+    {@render chipContent()}
+  {/if}
+</li>
+
+<style>:global(:root) {
+  --dodo-ui-CalendarDateChip-disabled-bg: var(--dodo-color-neutral-50);
+  --dodo-ui-CalendarDateChip-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-CalendarDateChip-neutral-bg: transparent;
+  --dodo-ui-CalendarDateChip-neutral-hover-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-CalendarDateChip-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-CalendarDateChip-today-neutral-bg: var(--dodo-color-neutral-50);
+  --dodo-ui-CalendarDateChip-today-neutral-hover-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-CalendarDateChip-today-neutral-active-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-CalendarDateChip-selected-neutral-bg: var(--dodo-color-neutral-500);
+  --dodo-ui-CalendarDateChip-selected-neutral-hover-bg: var(--dodo-color-neutral-600);
+  --dodo-ui-CalendarDateChip-selected-neutral-active-bg: var(
+    --dodo-color-neutral-700
+  );
+  --dodo-ui-CalendarDateChip-primary-bg: transparent;
+  --dodo-ui-CalendarDateChip-primary-hover-bg: var(--dodo-color-primary-100);
+  --dodo-ui-CalendarDateChip-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-CalendarDateChip-today-primary-bg: var(--dodo-color-primary-50);
+  --dodo-ui-CalendarDateChip-today-primary-hover-bg: var(--dodo-color-primary-100);
+  --dodo-ui-CalendarDateChip-today-primary-active-bg: var(--dodo-color-primary-200);
+  --dodo-ui-CalendarDateChip-selected-primary-bg: var(--dodo-color-primary-500);
+  --dodo-ui-CalendarDateChip-selected-primary-hover-bg: var(--dodo-color-primary-600);
+  --dodo-ui-CalendarDateChip-selected-primary-active-bg: var(
+    --dodo-color-primary-700
+  );
+  --dodo-ui-CalendarDateChip-secondary-bg: transparent;
+  --dodo-ui-CalendarDateChip-secondary-hover-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-CalendarDateChip-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-CalendarDateChip-today-secondary-bg: var(--dodo-color-secondary-50);
+  --dodo-ui-CalendarDateChip-today-secondary-hover-bg: var(--dodo-color-secondary-100);
+  --dodo-ui-CalendarDateChip-today-secondary-active-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-CalendarDateChip-selected-secondary-bg: var(--dodo-color-secondary-500);
+  --dodo-ui-CalendarDateChip-selected-secondary-hover-bg: var(--dodo-color-secondary-600);
+  --dodo-ui-CalendarDateChip-selected-secondary-active-bg: var(
+    --dodo-color-secondary-700
+  );
+  --dodo-ui-CalendarDateChip-safe-bg: transparent;
+  --dodo-ui-CalendarDateChip-safe-hover-bg: var(--dodo-color-safe-100);
+  --dodo-ui-CalendarDateChip-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-CalendarDateChip-today-safe-bg: var(--dodo-color-safe-50);
+  --dodo-ui-CalendarDateChip-today-safe-hover-bg: var(--dodo-color-safe-100);
+  --dodo-ui-CalendarDateChip-today-safe-active-bg: var(--dodo-color-safe-200);
+  --dodo-ui-CalendarDateChip-selected-safe-bg: var(--dodo-color-safe-500);
+  --dodo-ui-CalendarDateChip-selected-safe-hover-bg: var(--dodo-color-safe-600);
+  --dodo-ui-CalendarDateChip-selected-safe-active-bg: var(
+    --dodo-color-safe-700
+  );
+  --dodo-ui-CalendarDateChip-warning-bg: transparent;
+  --dodo-ui-CalendarDateChip-warning-hover-bg: var(--dodo-color-warning-100);
+  --dodo-ui-CalendarDateChip-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-CalendarDateChip-today-warning-bg: var(--dodo-color-warning-50);
+  --dodo-ui-CalendarDateChip-today-warning-hover-bg: var(--dodo-color-warning-100);
+  --dodo-ui-CalendarDateChip-today-warning-active-bg: var(--dodo-color-warning-200);
+  --dodo-ui-CalendarDateChip-selected-warning-bg: var(--dodo-color-warning-500);
+  --dodo-ui-CalendarDateChip-selected-warning-hover-bg: var(--dodo-color-warning-600);
+  --dodo-ui-CalendarDateChip-selected-warning-active-bg: var(
+    --dodo-color-warning-700
+  );
+  --dodo-ui-CalendarDateChip-danger-bg: transparent;
+  --dodo-ui-CalendarDateChip-danger-hover-bg: var(--dodo-color-danger-100);
+  --dodo-ui-CalendarDateChip-danger-active-bg: var(--dodo-color-danger-200);
+  --dodo-ui-CalendarDateChip-today-danger-bg: var(--dodo-color-danger-50);
+  --dodo-ui-CalendarDateChip-today-danger-hover-bg: var(--dodo-color-danger-100);
+  --dodo-ui-CalendarDateChip-today-danger-active-bg: var(--dodo-color-danger-200);
+  --dodo-ui-CalendarDateChip-selected-danger-bg: var(--dodo-color-danger-500);
+  --dodo-ui-CalendarDateChip-selected-danger-hover-bg: var(--dodo-color-danger-600);
+  --dodo-ui-CalendarDateChip-selected-danger-active-bg: var(
+    --dodo-color-danger-700
+  );
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-CalendarDateChip-disabled-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-CalendarDateChip-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-CalendarDateChip-neutral-bg: transparent;
+  --dodo-ui-CalendarDateChip-neutral-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-neutral-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-neutral-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-neutral-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-neutral-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-neutral-200) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-selected-neutral-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-CalendarDateChip-selected-neutral-hover-bg: var(--dodo-color-neutral-200);
+  --dodo-ui-CalendarDateChip-selected-neutral-active-bg: var(
+    --dodo-color-neutral-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-neutral-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-neutral-hover-bg: var(
+    --dodo-color-neutral-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-neutral-active-bg: var(
+    --dodo-color-neutral-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-neutral-bg: var(--dodo-color-neutral-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-neutral-hover-bg: var(
+    --dodo-color-neutral-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-neutral-active-bg: var(
+    --dodo-color-neutral-100
+  );
+  --dodo-ui-CalendarDateChip-primary-bg: transparent;
+  --dodo-ui-CalendarDateChip-primary-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-primary-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-primary-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-primary-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-primary-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-primary-200) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-selected-primary-bg: var(--dodo-color-primary-300);
+  --dodo-ui-CalendarDateChip-selected-primary-hover-bg: var(--dodo-color-primary-200);
+  --dodo-ui-CalendarDateChip-selected-primary-active-bg: var(
+    --dodo-color-primary-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-primary-bg: var(--dodo-color-primary-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-primary-hover-bg: var(
+    --dodo-color-primary-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-primary-active-bg: var(
+    --dodo-color-primary-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-primary-bg: var(--dodo-color-primary-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-primary-hover-bg: var(
+    --dodo-color-primary-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-primary-active-bg: var(
+    --dodo-color-primary-100
+  );
+  --dodo-ui-CalendarDateChip-secondary-bg: transparent;
+  --dodo-ui-CalendarDateChip-secondary-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-secondary-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-secondary-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-secondary-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-secondary-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-secondary-200) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-selected-secondary-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-CalendarDateChip-selected-secondary-hover-bg: var(--dodo-color-secondary-200);
+  --dodo-ui-CalendarDateChip-selected-secondary-active-bg: var(
+    --dodo-color-secondary-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-secondary-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-secondary-hover-bg: var(
+    --dodo-color-secondary-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-secondary-active-bg: var(
+    --dodo-color-secondary-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-secondary-bg: var(--dodo-color-secondary-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-secondary-hover-bg: var(
+    --dodo-color-secondary-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-secondary-active-bg: var(
+    --dodo-color-secondary-100
+  );
+  --dodo-ui-CalendarDateChip-safe-bg: transparent;
+  --dodo-ui-CalendarDateChip-safe-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-safe-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-safe-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-safe-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-safe-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-safe-200) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-selected-safe-bg: var(--dodo-color-safe-300);
+  --dodo-ui-CalendarDateChip-selected-safe-hover-bg: var(--dodo-color-safe-200);
+  --dodo-ui-CalendarDateChip-selected-safe-active-bg: var(
+    --dodo-color-safe-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-safe-bg: var(--dodo-color-safe-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-safe-hover-bg: var(
+    --dodo-color-safe-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-safe-active-bg: var(
+    --dodo-color-safe-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-safe-bg: var(--dodo-color-safe-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-safe-hover-bg: var(
+    --dodo-color-safe-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-safe-active-bg: var(
+    --dodo-color-safe-100
+  );
+  --dodo-ui-CalendarDateChip-warning-bg: transparent;
+  --dodo-ui-CalendarDateChip-warning-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-warning-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-warning-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-warning-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-warning-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-warning-200) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-selected-warning-bg: var(--dodo-color-warning-300);
+  --dodo-ui-CalendarDateChip-selected-warning-hover-bg: var(--dodo-color-warning-200);
+  --dodo-ui-CalendarDateChip-selected-warning-active-bg: var(
+    --dodo-color-warning-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-warning-bg: var(--dodo-color-warning-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-warning-hover-bg: var(
+    --dodo-color-warning-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-warning-active-bg: var(
+    --dodo-color-warning-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-warning-bg: var(--dodo-color-warning-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-warning-hover-bg: var(
+    --dodo-color-warning-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-warning-active-bg: var(
+    --dodo-color-warning-100
+  );
+  --dodo-ui-CalendarDateChip-danger-bg: transparent;
+  --dodo-ui-CalendarDateChip-danger-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-danger-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-danger-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-50) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-danger-hover-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-100) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-today-danger-active-bg: color-mix(
+    in oklab,
+    var(--dodo-color-danger-200) 85%,
+    #fff
+  );
+  --dodo-ui-CalendarDateChip-selected-danger-bg: var(--dodo-color-danger-300);
+  --dodo-ui-CalendarDateChip-selected-danger-hover-bg: var(--dodo-color-danger-200);
+  --dodo-ui-CalendarDateChip-selected-danger-active-bg: var(
+    --dodo-color-danger-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-danger-bg: var(--dodo-color-danger-300);
+  --dodo-ui-CalendarDateChip-isRangeStart-danger-hover-bg: var(
+    --dodo-color-danger-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeStart-danger-active-bg: var(
+    --dodo-color-danger-100
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-danger-bg: var(--dodo-color-danger-300);
+  --dodo-ui-CalendarDateChip-isRangeEnd-danger-hover-bg: var(
+    --dodo-color-danger-200
+  );
+  --dodo-ui-CalendarDateChip-isRangeEnd-danger-active-bg: var(
+    --dodo-color-danger-100
+  );
+}
+
+.dodo-ui-CalendarDateChip {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--dodo-color-neutral-800);
+  user-select: none;
+}
+.dodo-ui-CalendarDateChip.roundness--1 .chip {
+  border-radius: var(--dodo-ui-element-roundness-1);
+}
+.dodo-ui-CalendarDateChip.roundness--2 .chip {
+  border-radius: var(--dodo-ui-element-roundness-2);
+}
+.dodo-ui-CalendarDateChip.roundness--3 .chip {
+  border-radius: var(--dodo-ui-element-roundness-3);
+}
+.dodo-ui-CalendarDateChip.roundness--full .chip {
+  border-radius: 50%;
+}
+.dodo-ui-CalendarDateChip.size--normal {
+  width: var(--dodo-ui-element-height-normal);
+  height: var(--dodo-ui-element-height-normal);
+  font-size: 0.8rem;
+}
+.dodo-ui-CalendarDateChip.size--small {
+  width: var(--dodo-ui-element-height-small);
+  height: var(--dodo-ui-element-height-small);
+  font-size: 0.74rem;
+}
+.dodo-ui-CalendarDateChip.size--large {
+  width: var(--dodo-ui-element-height-large);
+  height: var(--dodo-ui-element-height-large);
+  font-size: 1rem;
+}
+.dodo-ui-CalendarDateChip.isNotCurrentMonth .chip {
+  opacity: 0.45;
+}
+.dodo-ui-CalendarDateChip.today .chip {
+  font-weight: 600;
+}
+.dodo-ui-CalendarDateChip.color--neutral .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-neutral-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-neutral-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-neutral-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.today .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-today-neutral-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.today .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-today-neutral-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.today .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-today-neutral-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.selected .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-selected-neutral-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.selected .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-neutral-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.selected .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-neutral-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.isRangeStart .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-neutral-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.isRangeStart .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-neutral-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.isRangeStart .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-neutral-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.isRangeEnd .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-neutral-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.isRangeEnd .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-neutral-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--neutral.isRangeEnd .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-neutral-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-primary-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-primary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-primary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.today .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-today-primary-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.today .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-today-primary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.today .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-today-primary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.selected .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-selected-primary-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.selected .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-primary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.selected .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-primary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.isRangeStart .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-primary-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.isRangeStart .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-primary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.isRangeStart .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-primary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.isRangeEnd .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-primary-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.isRangeEnd .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-primary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--primary.isRangeEnd .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-primary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-secondary-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-secondary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-secondary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.today .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-today-secondary-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.today .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-today-secondary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.today .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-today-secondary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.selected .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-selected-secondary-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.selected .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-secondary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.selected .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-secondary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.isRangeStart .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-secondary-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.isRangeStart .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-secondary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.isRangeStart .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-secondary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.isRangeEnd .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-secondary-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.isRangeEnd .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-secondary-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--secondary.isRangeEnd .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-secondary-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-safe-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-safe-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-safe-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.today .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-today-safe-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.today .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-today-safe-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.today .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-today-safe-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.selected .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-selected-safe-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.selected .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-safe-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.selected .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-safe-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.isRangeStart .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-safe-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.isRangeStart .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-safe-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.isRangeStart .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-safe-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.isRangeEnd .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-safe-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.isRangeEnd .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-safe-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--safe.isRangeEnd .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-safe-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-warning-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-warning-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-warning-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.today .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-today-warning-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.today .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-today-warning-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.today .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-today-warning-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.selected .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-selected-warning-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.selected .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-warning-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.selected .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-warning-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.isRangeStart .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-warning-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.isRangeStart .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-warning-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.isRangeStart .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-warning-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.isRangeEnd .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-warning-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.isRangeEnd .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-warning-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--warning.isRangeEnd .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-warning-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-danger-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-danger-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-danger-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.today .chip:not([disabled]) {
+  background-color: var(--dodo-ui-CalendarDateChip-today-danger-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.today .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-today-danger-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.today .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-today-danger-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.selected .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-selected-danger-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.selected .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-danger-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.selected .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-selected-danger-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.isRangeStart .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-danger-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.isRangeStart .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-danger-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.isRangeStart .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeStart-danger-active-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.isRangeEnd .chip:not([disabled]) {
+  color: var(--dodo-color-constant-white);
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-danger-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.isRangeEnd .chip:not([disabled]):hover {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-danger-hover-bg);
+}
+.dodo-ui-CalendarDateChip.color--danger.isRangeEnd .chip:not([disabled]):active {
+  background-color: var(--dodo-ui-CalendarDateChip-isRangeEnd-danger-active-bg);
+}
+.dodo-ui-CalendarDateChip.weekend .chip {
+  color: var(--dodo-color-danger-600);
+}
+.dodo-ui-CalendarDateChip .chip {
+  cursor: pointer;
+  outline: none;
+  letter-spacing: 0.3px;
+  transition: all 150ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  transition: all 50ms;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: 0;
+  border: 0;
+  color: inherit;
+  font-size: inherit;
+}
+.dodo-ui-CalendarDateChip .chip[disabled] {
+  cursor: initial;
+  background-color: var(--dodo-ui-CalendarDateChip-disabled-bg);
+  color: var(--dodo-ui-CalendarDateChip-disabled-color);
+}
+.dodo-ui-CalendarDateChip .chip[disabled]:hover {
+  background-color: var(--dodo-ui-CalendarDateChip-disabled-bg);
+  color: var(--dodo-ui-CalendarDateChip-disabled-color);
+}
+.dodo-ui-CalendarDateChip .chip[disabled]:active {
+  background-color: var(--dodo-ui-CalendarDateChip-disabled-bg);
+  color: var(--dodo-ui-CalendarDateChip-disabled-color);
+}</style>