@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

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

@@ -1,43 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import CalendarDateChip from '../CalendarDateChip.svelte';
-import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
-import { Button, getMoment } from '../../../../../../../../index.js';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: CalendarDateChip,
-    tags: ['autodocs'],
-    argTypes: storyCalendarDateChipArgTypes,
-});
-</script>
-
-<!-- Custom Content  -->
-<Story name="customCalendarDateChipContent" asChild>
-  <CalendarDateChip
-    dayOfMonth={{
-      id: '1',
-      date: getMoment().toDate(),
-      isCurrentMonth: true,
-    }}
-  >
-    {#snippet customCalendarDateChipContent(dayOfMonth)}
-      🗓️{Number(getMoment(dayOfMonth.date).format('D'))}
-    {/snippet}
-  </CalendarDateChip>
-</Story>
-
-<!-- Custom Chip  -->
-<Story name="customCalendarDateChip" asChild>
-  <CalendarDateChip
-    dayOfMonth={{
-      id: '1',
-      date: getMoment().toDate(),
-      isCurrentMonth: true,
-    }}
-  >
-    {#snippet customCalendarDateChip(dayOfMonth)}
-      <Button size="small" variant="text" outline>
-        {Number(getMoment(dayOfMonth.date).format('D'))}
-      </Button>
-    {/snippet}
-  </CalendarDateChip>
-</Story>

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

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Customize = InstanceType<typeof Customize>;
-export default Customize;

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

@@ -1,26 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import CalendarDateChip from '../CalendarDateChip.svelte';
-import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
-import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: CalendarDateChip,
-    tags: ['autodocs'],
-    argTypes: storyCalendarDateChipArgTypes,
-});
-</script>
-
-<Story name="Select" asChild>
-  <CalendarDateChip
-    dayOfMonth={{
-      id: '1',
-      date: getMoment().toDate(),
-      isCurrentMonth: true,
-    }}
-    onselect={(value, dayOfMonth, e) => {
-      const target = e.target as HTMLButtonElement;
-      alert(`CalendarDateChip Select, ${getMoment(value).format('DD-MM-YYYY')}`);
-      console.log('CalendarDateChip Select', dayOfMonth, target);
-    }}
-  />
-</Story>

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

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Events = InstanceType<typeof Events>;
-export default Events;

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

@@ -1,31 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import CalendarDateChip from '../CalendarDateChip.svelte';
-  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
-  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: CalendarDateChip,
-    tags: ['autodocs'],
-    argTypes: storyCalendarDateChipArgTypes,
-    args: {
-      dayOfMonth: {
-        id: '1',
-        date: getMoment().toDate(),
-        isCurrentMonth: true,
-      },
-    },
-  });
-</script>
-
-<!-- Hover to see the result -->
-<Story name="Roundness 1" />
-
-<Story name="Roundness 2" args={{ roundness: 2 }} />
-
-<Story name="Roundness 3" args={{ roundness: 3 }} />
-
-<Story name="Roundness 0" args={{ roundness: 0 }} />
-
-<Story name="Roundness Full" args={{ roundness: 'full', compact: true }} />

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

@@ -1,26 +0,0 @@
-export default Roundness;
-type Roundness = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

@@ -1,24 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import CalendarDateChip from '../CalendarDateChip.svelte';
-  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
-  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: CalendarDateChip,
-    tags: ['autodocs'],
-    argTypes: storyCalendarDateChipArgTypes,
-    args: {
-      dayOfMonth: {
-        id: '1',
-        date: getMoment().toDate(),
-        isCurrentMonth: true,
-      },
-    },
-  });
-</script>
-
-<Story name="Normal" />
-<Story name="Small" args={{ size: 'small' }} />
-<Story name="Large" args={{ size: 'large' }} />

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

@@ -1,26 +0,0 @@
-export default Size;
-type Size = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Size: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

@@ -1,96 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import CalendarDateChip from '../CalendarDateChip.svelte';
-  import { storyCalendarDateChipArgTypes } from '../CalendarDateChip.stories.svelte';
-  import getMoment from '../../../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: CalendarDateChip,
-    tags: ['autodocs'],
-    argTypes: storyCalendarDateChipArgTypes,
-    args: {
-      dayOfMonth: {
-        id: '1',
-        date: getMoment().toDate(),
-        isCurrentMonth: true,
-      },
-    },
-  });
-</script>
-
-<Story
-  name="Today"
-  args={{
-    dayOfMonth: {
-      id: '1',
-      date: getMoment().toDate(),
-      isCurrentMonth: true,
-      today: true,
-    },
-  }}
-/>
-
-<!-- Dont highlight today. Show it as a plain date -->
-<Story
-  name="HideToday"
-  args={{
-    showToday: false,
-    dayOfMonth: {
-      id: '1',
-      date: getMoment().toDate(),
-      isCurrentMonth: true,
-      today: true,
-    },
-  }}
-/>
-
-<Story
-  name="LastMonth"
-  args={{
-    dayOfMonth: {
-      id: '1',
-      date: getMoment().toDate(),
-      isLastMonth: true,
-      isCurrentMonth: false,
-    },
-  }}
-/>
-
-<Story
-  name="HideLastMonth"
-  args={{
-    showLastMonth: false,
-    dayOfMonth: {
-      id: '1',
-      date: getMoment().toDate(),
-      isLastMonth: true,
-      isCurrentMonth: false,
-    },
-  }}
-/>
-
-<Story
-  name="NextMonth"
-  args={{
-    dayOfMonth: {
-      id: '1',
-      date: getMoment().toDate(),
-      isNextMonth: true,
-      isCurrentMonth: false,
-    },
-  }}
-/>
-
-<Story
-  name="HideNextMonth"
-  args={{
-    showNextMonth: false,
-    dayOfMonth: {
-      id: '1',
-      date: getMoment().toDate(),
-      isNextMonth: true,
-      isCurrentMonth: false,
-    },
-  }}
-/>

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

@@ -1,26 +0,0 @@
-export default SpecialChips;
-type SpecialChips = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const SpecialChips: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDateChip/utils/scss/mixins.scss

@@ -1,107 +0,0 @@
-/// Mixin: generate-dodo-ui-calendarDateChip-colors
-/// Generates CSS custom properties for Dodo UI calendarDateChip styles (text & solid)
-/// across different interaction states (default, hover, active).
-/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
-@mixin generate-dodo-ui-calendarDateChip-colors($color-name) {
-  --dodo-ui-CalendarDateChip-#{$color-name}-bg: transparent;
-  --dodo-ui-CalendarDateChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-CalendarDateChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
-
-  --dodo-ui-CalendarDateChip-today-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
-  --dodo-ui-CalendarDateChip-today-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-CalendarDateChip-today-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
-
-  --dodo-ui-CalendarDateChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-CalendarDateChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-700
-  );
-}
-
-/// Mixin: generate-dodo-ui-calendarDateChip-colors
-/// Generates CSS custom properties for Dodo UI calendarDateChip styles (text & solid)
-/// across different interaction states (default, hover, active).
-/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
-@mixin generate-dodo-ui-calendarDateChip-colors-dark($color-name) {
-  --dodo-ui-CalendarDateChip-#{$color-name}-bg: transparent;
-  --dodo-ui-CalendarDateChip-#{$color-name}-hover-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 85%,
-    #fff
-  );
-  --dodo-ui-CalendarDateChip-#{$color-name}-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-100) 85%,
-    #fff
-  );
-
-  --dodo-ui-CalendarDateChip-today-#{$color-name}-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 85%,
-    #fff
-  );
-  --dodo-ui-CalendarDateChip-today-#{$color-name}-hover-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-100) 85%,
-    #fff
-  );
-  --dodo-ui-CalendarDateChip-today-#{$color-name}-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-200) 85%,
-    #fff
-  );
-
-  --dodo-ui-CalendarDateChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarDateChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-CalendarDateChip-selected-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
-}
-
-/// Mixin: generate-dodo-ui-calendarDateChip-color
-/// Auto-generates .color--[theme] > variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-calendarDateChip-color($theme) {
-  &--#{$theme} {
-    .chip:not([disabled]) {
-      background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-bg);
-
-      &:hover {
-        background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-hover-bg);
-      }
-
-      &:active {
-        background-color: var(--dodo-ui-CalendarDateChip-#{$theme}-active-bg);
-      }
-    }
-
-    &.today {
-      .chip:not([disabled]) {
-        background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-today-#{$theme}-active-bg);
-        }
-      }
-    }
-
-    &.selected {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarDateChip-selected-#{$theme}-active-bg);
-        }
-      }
-    }
-  }
-}

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

@@ -1,99 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import CalendarDatesChart from './CalendarDatesChart.svelte';
-import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import { componentColorArray } from '../../../../../../types/colors.js';
-import { calendarWeekNamesArray } from './CalendarWeek/CalendarWeek.svelte';
-import { componentSizeArray } from '../../../../../../types/size.js';
-export const storyCalendarDatesChartArgTypes = {
-    startOfWeek: {
-        control: { type: 'select' },
-        options: calendarWeekNamesArray,
-    },
-    color: {
-        control: { type: 'select' },
-        options: componentColorArray,
-    },
-    size: {
-        control: { type: 'select' },
-        options: componentSizeArray,
-    },
-};
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: CalendarDatesChart,
-    tags: ['autodocs'],
-    argTypes: storyCalendarDatesChartArgTypes,
-    args: {
-        value: getMoment().toDate(),
-    },
-});
-</script>
-
-<!-- Default CalendarDatesChart -->
-<Story name="Default" />
-
-<Story
-  name="StartOfWeek"
-  args={{
-    startOfWeek: 'mon',
-  }}
-/>
-
-<Story
-  name="ActiveMonth"
-  args={{
-    activeMonth: getMoment('01-02-2025', 'DD-MM-YYYY').toDate(),
-  }}
-/>
-
-<Story
-  name="WeekendDays"
-  args={{
-    weekendDays: ['sun'],
-  }}
-/>
-
-<Story
-  name="WeekHeadingColorOnly"
-  args={{
-    weekendDays: ['sun'],
-    weekendDaysColorDays: false,
-  }}
-/>
-
-<Story
-  name="HideSelected"
-  args={{
-    showSelected: false,
-  }}
-/>
-
-<Story
-  name="HideLastMonth"
-  args={{
-    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
-    showLastMonth: false,
-  }}
-/>
-
-<Story
-  name="HideNextMonth"
-  args={{
-    value: getMoment('01-03-2025', 'DD-MM-YYYY').toDate(),
-    showNextMonth: false,
-  }}
-/>
-
-<Story
-  name="ManipulateDate"
-  args={{
-    manipulateDate: (dateToModify: DateOfMonth) => {
-      // Disable all Fridays
-      if (getMoment(dateToModify.date, undefined).day() === 5) {
-        dateToModify.disabled = true;
-      }
-
-      return dateToModify;
-    },
-  }}
-/>

package/dist/stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.stories.svelte.d.ts

@@ -1,21 +0,0 @@
-import CalendarDatesChart from './CalendarDatesChart.svelte';
-import type { StoryBookArgTypes } from '../../../../../../storybook-types.js';
-export declare const storyCalendarDatesChartArgTypes: StoryBookArgTypes;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CalendarDatesChart: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CalendarDatesChart = InstanceType<typeof CalendarDatesChart>;
-export default CalendarDatesChart;

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

@@ -1,109 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import CalendarDateChip, {} from './CalendarDateChip/CalendarDateChip.svelte';
-import CalendarWeek from './CalendarWeek/CalendarWeek.svelte';
-import { getDatesOfMonth } from '../../../../../../index.js';
-let { class: className = '', ref = $bindable(), value, startOfWeek, timezone, utc, calendarDateChipProps, color, showToday, showLastMonth, showNextMonth, showSelected = true, activeMonth, onselect, customCalendarDateChipContent, customCalendarDateChip, today, minDate, maxDate, excludeDates, includeDates, weekDayNameType, customCalendarWeekContent, customCalendarWeek, size = 'normal', weekendDays, weekendDaysColorDays = true, manipulateDate, } = $props();
-let monthToPick = $state(undefined);
-const daysGroup = $derived(getDatesOfMonth(monthToPick, {
-    startOfWeek,
-    timezone,
-    utc,
-    today,
-    minDate,
-    maxDate,
-    excludeDates,
-    includeDates,
-}, manipulateDate) || []);
-$effect(() => {
-    if (!value) {
-        monthToPick = activeMonth;
-        return;
-    }
-    // Override active month if it's not same as value
-    if (activeMonth &&
-        getMoment(activeMonth, undefined, { timezone, utc }).format('MMM YYYY') !==
-            getMoment(value, undefined, { timezone, utc }).format('MMM YYYY')) {
-        monthToPick = activeMonth;
-    }
-    else {
-        monthToPick = value;
-    }
-});
-</script>
-
-<ul class={['dodo-ui-CalendarDatesChart', `size--${size}`, className].join(' ')} bind:this={ref}>
-  <CalendarWeek
-    nameType={weekDayNameType}
-    {startOfWeek}
-    {customCalendarWeekContent}
-    {customCalendarWeek}
-    {size}
-    {weekendDays}
-  />
-
-  {#each daysGroup as group, index (index)}
-    <li class="daysRow">
-      <ul>
-        {#each group as day (day.id)}
-          <CalendarDateChip
-            dayOfMonth={day}
-            {color}
-            {showToday}
-            {showLastMonth}
-            {showNextMonth}
-            selected={showSelected &&
-            getMoment(value, undefined, { timezone, utc }).format('DD-MM-YYY') ===
-              getMoment(day.date, undefined, { timezone, utc }).format('DD-MM-YYY')
-              ? true
-              : false}
-            {onselect}
-            {customCalendarDateChip}
-            {customCalendarDateChipContent}
-            {size}
-            {timezone}
-            {utc}
-            weekend={weekendDaysColorDays &&
-            weekendDays?.includes(
-              getMoment(day.date, undefined, { timezone, utc })
-                .format('ddd')
-                .toLowerCase() as CalendarWeekNames,
-            )
-              ? true
-              : false}
-            {...calendarDateChipProps}
-          />
-        {/each}
-      </ul>
-    </li>
-  {/each}
-</ul>
-
-<style>.dodo-ui-CalendarDatesChart {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  user-select: none;
-}
-.dodo-ui-CalendarDatesChart ul {
-  padding: 0;
-  display: flex;
-  margin: 0;
-}
-.dodo-ui-CalendarDatesChart .daysRow {
-  display: block;
-  padding: 0;
-  margin: 0;
-}
-.dodo-ui-CalendarDatesChart.size--normal {
-  min-width: calc(var(--dodo-ui-element-height-normal) * 7);
-}
-.dodo-ui-CalendarDatesChart.size--small {
-  min-width: calc(var(--dodo-ui-element-height-small) * 7);
-}
-.dodo-ui-CalendarDatesChart.size--large {
-  min-width: calc(var(--dodo-ui-element-height-large) * 7);
-}</style>