@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthChip/utils/scss/mixins.scss

@@ -1,91 +0,0 @@
-/// Mixin: generate-dodo-ui-calendarMonthChip-colors
-/// Generates CSS custom properties for Dodo UI calendarMonthChip 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-calendarMonthChip-colors($color-name) {
-  --dodo-ui-CalendarMonthChip-#{$color-name}-bg: transparent;
-  --dodo-ui-CalendarMonthChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-CalendarMonthChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
-
-  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-600
-  );
-  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-700
-  );
-}
-
-/// Mixin: generate-dodo-ui-calendarMonthChip-colors
-/// Generates CSS custom properties for Dodo UI calendarMonthChip 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-calendarMonthChip-colors-dark($color-name) {
-  --dodo-ui-CalendarMonthChip-#{$color-name}-bg: transparent;
-  --dodo-ui-CalendarMonthChip-#{$color-name}-hover-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 85%,
-    #fff
-  );
-  --dodo-ui-CalendarMonthChip-#{$color-name}-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-100) 85%,
-    #fff
-  );
-
-  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-hover-bg: var(
-    --dodo-color-#{$color-name}-200
-  );
-  --dodo-ui-CalendarMonthChip-selected-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
-}
-
-/// Mixin: generate-dodo-ui-calendarMonthChip-color
-/// Auto-generates .color--[theme] > variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-calendarMonthChip-color($theme) {
-  &--#{$theme} {
-    .chip:not([disabled]) {
-      background-color: var(--dodo-ui-CalendarMonthChip-#{$theme}-bg);
-
-      &:hover {
-        background-color: var(--dodo-ui-CalendarMonthChip-#{$theme}-hover-bg);
-      }
-
-      &:active {
-        background-color: var(--dodo-ui-CalendarMonthChip-#{$theme}-active-bg);
-      }
-    }
-
-    &.today {
-      .chip:not([disabled]) {
-        background-color: var(--dodo-ui-CalendarMonthChip-today-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarMonthChip-today-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarMonthChip-today-#{$theme}-active-bg);
-        }
-      }
-    }
-
-    &.selected {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarMonthChip-selected-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarMonthChip-selected-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarMonthChip-selected-#{$theme}-active-bg);
-        }
-      }
-    }
-  }
-}

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarMonthList/CalendarMonthList.svelte

@@ -1,124 +0,0 @@
-<script lang="ts" module>
-  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
-
-  export interface CalendarMonthListProps {
-    /** CalendarMonthList ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Selcted month Value */
-    value?: CalendarMonthNames;
-    /** onselect event handler */
-    onselect?: (value: CalendarMonthNames, e: ButtonClickEvent) => void;
-    /** oncancel event handler */
-    oncancel?: (e: ButtonClickEvent) => void;
-    /** Custom Calendar Chip Content */
-    customCalendarMonthChipContent?: (value: CalendarMonthNames) => Snippet;
-    /** Custom Calendar Chip */
-    customCalendarMonthChip?: (value: CalendarMonthNames) => Snippet;
-    /** How large should the Component be? */
-    size?: ComponentSize;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** disabled Months */
-    disabledMonths?: CalendarMonthNames[];
-    /** calendarMonthChipProps: calendarMonthChip component props */
-    calendarMonthChipProps?: Partial<CalendarMonthChipProps>;
-    /** show controls */
-    showControls?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { Snippet } from 'svelte';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import {
-    calendarMonthOptions,
-    type CalendarMonthNames,
-  } from '../CalendarControls/CalendarMonthSelector/CalendarMonthSelector.svelte';
-  import type { CalendarMonthChipProps } from './CalendarMonthChip/CalendarMonthChip.svelte';
-  import CalendarMonthChip from './CalendarMonthChip/CalendarMonthChip.svelte';
-  import { Button } from '$lib/index.js';
-  import Icon from '@iconify/svelte';
-
-  let {
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    value,
-    disabledMonths = [],
-    onselect,
-    calendarMonthChipProps,
-    size = 'normal',
-    color,
-    customCalendarMonthChipContent,
-    customCalendarMonthChip,
-    oncancel,
-    showControls = true,
-  }: CalendarMonthListProps = $props();
-</script>
-
-<div class={['dodo-ui-CalendarMonthList', `size--${size}`, className].join(' ')} bind:this={ref}>
-  {#if showControls}
-    <div class="Controls">
-      <Button {size} {color} variant="text" name="BackButton" onclick={oncancel} roundness={2}>
-        {#snippet before()}
-          <Icon icon="material-symbols:arrow-back-rounded" width="24" height="24" />
-        {/snippet}
-
-        Back
-      </Button>
-    </div>
-  {/if}
-
-  <ul>
-    {#each calendarMonthOptions as month (month.value)}
-      <CalendarMonthChip
-        value={month.abr3}
-        selected={value === month.abr3 ? true : false}
-        disabled={disabledMonths.includes(month.abr3)}
-        {onselect}
-        {size}
-        {color}
-        {customCalendarMonthChipContent}
-        {customCalendarMonthChip}
-        {...calendarMonthChipProps}
-      />
-    {/each}
-  </ul>
-</div>
-
-<style lang="scss">
-  .dodo-ui-CalendarMonthList {
-    user-select: none;
-
-    ul {
-      margin: 0;
-      padding: 0;
-      flex-wrap: wrap;
-      display: inline-flex;
-    }
-
-    :global(.dodo-ui-CalendarMonthChip) {
-      width: 33.333%;
-    }
-
-    .Controls {
-      margin-bottom: calc(var(--dodo-ui-space) * 2);
-    }
-
-    &.size {
-      &--normal {
-        width: calc(var(--dodo-ui-element-height-normal) * 7);
-      }
-
-      &--small {
-        width: calc(var(--dodo-ui-element-height-small) * 7);
-      }
-
-      &--large {
-        width: calc(var(--dodo-ui-element-height-large) * 7);
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/CalendarYearChip.svelte

@@ -1,227 +0,0 @@
-<script lang="ts" module>
-  export interface CalendarYearChipProps {
-    /** CalendarDatesChart ref */
-    ref?: HTMLLIElement;
-    /** Custom css class */
-    class?: string;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** Month value */
-    value: string;
-    /** Is Date Selected */
-    selected?: boolean;
-    /** onselect event handler */
-    onselect?: (value: string, e: ButtonClickEvent) => void;
-    /** Custom Calendar Chip Content */
-    customCalendarYearChipContent?: (value: string) => Snippet;
-    /** Custom Calendar Chip Content */
-    customCalendarYearChip?: (value: string) => Snippet;
-    /** How large should the Calendar Chip be? */
-    size?: ComponentSize;
-    /** Disabled */
-    disabled?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import type { ComponentColor } from '$lib/types/colors.js';
-
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { Snippet } from 'svelte';
-  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
-  import type { ComponentSize } from '$lib/types/size.js';
-
-  let {
-    class: className = '',
-    roundness = 2,
-    selected = false,
-    color = 'primary',
-    ref = $bindable<HTMLLIElement>(),
-    customCalendarYearChipContent: customCalendarYearChipContentInternal,
-    customCalendarYearChip: customCalendarYearChipInternal,
-    onselect,
-    size = 'normal',
-    value,
-    disabled = false,
-  }: CalendarYearChipProps = $props();
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarYearChipContentTyped = customCalendarYearChipContentInternal as any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customCalendarYearChipTyped = customCalendarYearChipInternal as any;
-
-  $effect(() => {
-    if (!selected) {
-      return;
-    }
-
-    if (!ref) {
-      return;
-    }
-
-    ref.scrollIntoView({ block: 'center' });
-  });
-</script>
-
-{#snippet chipContent()}
-  {#if customCalendarYearChipTyped}
-    {@render customCalendarYearChipTyped(value)}
-  {:else}
-    <button class="chip" {disabled} onclick={onselect ? (e) => onselect(value, e) : undefined}>
-      {#if customCalendarYearChipContentTyped}
-        {@render customCalendarYearChipContentTyped(value)}
-      {:else}
-        {value}
-      {/if}
-    </button>
-  {/if}
-{/snippet}
-
-<li
-  class:disabled
-  class:selected
-  class={[
-    'dodo-ui-CalendarYearChip',
-    `roundness--${roundness}`,
-    `color--${color}`,
-    `size--${size}`,
-    className,
-  ].join(' ')}
-  bind:this={ref}
->
-  {@render chipContent()}
-</li>
-
-<style lang="scss">
-  @use 'utils/scss/mixins.scss' as *;
-
-  :global(:root) {
-    --dodo-ui-CalendarYearChip-disabled-bg: var(--dodo-color-neutral-50);
-    --dodo-ui-CalendarYearChip-disabled-color: var(--dodo-color-neutral-400);
-
-    @include generate-dodo-ui-calendarYearChip-colors(neutral);
-    @include generate-dodo-ui-calendarYearChip-colors(primary);
-    @include generate-dodo-ui-calendarYearChip-colors(secondary);
-    @include generate-dodo-ui-calendarYearChip-colors(safe);
-    @include generate-dodo-ui-calendarYearChip-colors(warning);
-    @include generate-dodo-ui-calendarYearChip-colors(danger);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-CalendarYearChip-disabled-bg: var(--dodo-color-neutral-200);
-    --dodo-ui-CalendarYearChip-disabled-color: var(--dodo-color-neutral-400);
-
-    @include generate-dodo-ui-calendarYearChip-colors-dark(neutral);
-    @include generate-dodo-ui-calendarYearChip-colors-dark(primary);
-    @include generate-dodo-ui-calendarYearChip-colors-dark(secondary);
-    @include generate-dodo-ui-calendarYearChip-colors-dark(safe);
-    @include generate-dodo-ui-calendarYearChip-colors-dark(warning);
-    @include generate-dodo-ui-calendarYearChip-colors-dark(danger);
-  }
-
-  .dodo-ui-CalendarYearChip {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--dodo-color-neutral-800);
-    user-select: none;
-
-    &.roundness {
-      &--1 {
-        .chip {
-          border-radius: var(--dodo-ui-element-roundness-1);
-        }
-      }
-
-      &--2 {
-        .chip {
-          border-radius: var(--dodo-ui-element-roundness-2);
-        }
-      }
-
-      &--3 {
-        .chip {
-          border-radius: var(--dodo-ui-element-roundness-3);
-        }
-      }
-
-      &--full {
-        .chip {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    &.size {
-      &--normal {
-        width: var(--dodo-ui-element-height-normal);
-        height: var(--dodo-ui-element-height-normal);
-        font-size: 1rem;
-      }
-
-      &--small {
-        width: var(--dodo-ui-element-height-small);
-        height: var(--dodo-ui-element-height-small);
-        font-size: 0.9rem;
-      }
-
-      &--large {
-        width: var(--dodo-ui-element-height-large);
-        height: var(--dodo-ui-element-height-large);
-        font-size: 1.1rem;
-      }
-    }
-
-    &.color {
-      @include generate-dodo-ui-calendarYearChip-color(neutral);
-      @include generate-dodo-ui-calendarYearChip-color(primary);
-      @include generate-dodo-ui-calendarYearChip-color(secondary);
-      @include generate-dodo-ui-calendarYearChip-color(safe);
-      @include generate-dodo-ui-calendarYearChip-color(warning);
-      @include generate-dodo-ui-calendarYearChip-color(danger);
-    }
-
-    .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;
-
-      &[disabled] {
-        cursor: initial;
-        background-color: var(--dodo-ui-CalendarYearChip-disabled-bg);
-        color: var(--dodo-ui-CalendarYearChip-disabled-color);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarYearChip-disabled-bg);
-          color: var(--dodo-ui-CalendarYearChip-disabled-color);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarYearChip-disabled-bg);
-          color: var(--dodo-ui-CalendarYearChip-disabled-color);
-        }
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearChip/utils/scss/mixins.scss

@@ -1,87 +0,0 @@
-/// Mixin: generate-dodo-ui-calendarYearChip-colors
-/// Generates CSS custom properties for Dodo UI calendarYearChip 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-calendarYearChip-colors($color-name) {
-  --dodo-ui-CalendarYearChip-#{$color-name}-bg: transparent;
-  --dodo-ui-CalendarYearChip-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-CalendarYearChip-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
-
-  --dodo-ui-CalendarYearChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-CalendarYearChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-CalendarYearChip-selected-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-700
-  );
-}
-
-/// Mixin: generate-dodo-ui-calendarYearChip-colors
-/// Generates CSS custom properties for Dodo UI calendarYearChip 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-calendarYearChip-colors-dark($color-name) {
-  --dodo-ui-CalendarYearChip-#{$color-name}-bg: transparent;
-  --dodo-ui-CalendarYearChip-#{$color-name}-hover-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 85%,
-    #fff
-  );
-  --dodo-ui-CalendarYearChip-#{$color-name}-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-100) 85%,
-    #fff
-  );
-
-  --dodo-ui-CalendarYearChip-selected-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-CalendarYearChip-selected-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-CalendarYearChip-selected-#{$color-name}-active-bg: var(
-    --dodo-color-#{$color-name}-100
-  );
-}
-
-/// Mixin: generate-dodo-ui-calendarYearChip-color
-/// Auto-generates .color--[theme] > variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-calendarYearChip-color($theme) {
-  &--#{$theme} {
-    .chip:not([disabled]) {
-      background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-bg);
-
-      &:hover {
-        background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-hover-bg);
-      }
-
-      &:active {
-        background-color: var(--dodo-ui-CalendarYearChip-#{$theme}-active-bg);
-      }
-    }
-
-    &.today {
-      .chip:not([disabled]) {
-        background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarYearChip-today-#{$theme}-active-bg);
-        }
-      }
-    }
-
-    &.selected {
-      .chip:not([disabled]) {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-bg);
-
-        &:hover {
-          background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-hover-bg);
-        }
-
-        &:active {
-          background-color: var(--dodo-ui-CalendarYearChip-selected-#{$theme}-active-bg);
-        }
-      }
-    }
-  }
-}

package/src/lib/stories/components/Info/Calendar/SubComponents/CalendarYearList/CalendarYearList.svelte

@@ -1,150 +0,0 @@
-<script lang="ts" module>
-  import type { ButtonClickEvent } from '$lib/stories/components/Form/Button/Button.svelte';
-
-  export interface CalendarYearListProps {
-    /** CalendarYearList ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Selcted year Value */
-    value?: string;
-    /** onselect event handler */
-    onselect?: (value: string, e: ButtonClickEvent) => void;
-    /** oncancel event handler */
-    oncancel?: (e: ButtonClickEvent) => void;
-    /** Custom Calendar Chip Content */
-    customCalendarYearChipContent?: (value: string) => Snippet;
-    /** Custom Calendar Chip */
-    customCalendarYearChip?: (value: string) => Snippet;
-    /** How large should the Component be? */
-    size?: ComponentSize;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** calendarYearChipProps: calendarYearChip component props */
-    calendarYearChipProps?: Partial<CalendarYearChipProps>;
-    /** Minimum allowed date, rest of the dates will be disabled  */
-    minDate?: Date;
-    /** Maxium allowed date, rest of the dates will be disabled  */
-    maxDate?: Date;
-    /** show controls */
-    showControls?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { Snippet } from 'svelte';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { CalendarYearChipProps } from './CalendarYearChip/CalendarYearChip.svelte';
-  import CalendarYearChip from './CalendarYearChip/CalendarYearChip.svelte';
-  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
-  import { Button } from '$lib/index.js';
-  import Icon from '@iconify/svelte';
-
-  let {
-    class: className = '',
-    ref = $bindable<HTMLDivElement>(),
-    value,
-    onselect,
-    calendarYearChipProps,
-    size = 'normal',
-    color,
-    customCalendarYearChipContent,
-    customCalendarYearChip,
-    minDate = getMoment('1910-01-01', 'YYYY-MM-DD', { utc: true }).toDate(),
-    maxDate = getMoment(undefined, undefined, { utc: true }).add(100, 'years').toDate(),
-    oncancel,
-    showControls = true,
-  }: CalendarYearListProps = $props();
-
-  function getYears(startYear: number, endYear: number) {
-    let newYears: string[] = [];
-
-    for (let index = startYear; index <= endYear; index++) {
-      newYears.push(index.toString());
-    }
-
-    return newYears;
-  }
-
-  const startYear = $derived(Number(getMoment(minDate).format('YYYY')));
-  const endYear = $derived(Number(getMoment(maxDate).format('YYYY')));
-  const years = $derived<string[]>(getYears(startYear, endYear));
-</script>
-
-<div class={['dodo-ui-CalendarYearList', `size--${size}`, className].join(' ')} bind:this={ref}>
-  {#if showControls}
-    <div class="Controls">
-      <Button {size} {color} variant="text" name="BackButton" onclick={oncancel} roundness={2}>
-        {#snippet before()}
-          <Icon icon="material-symbols:arrow-back-rounded" width="24" height="24" />
-        {/snippet}
-
-        Back
-      </Button>
-    </div>
-  {/if}
-
-  <ul>
-    {#each years as year (year)}
-      <CalendarYearChip
-        value={year}
-        selected={value === year ? true : false}
-        {onselect}
-        {size}
-        {color}
-        {customCalendarYearChipContent}
-        {customCalendarYearChip}
-        {...calendarYearChipProps}
-      />
-    {/each}
-  </ul>
-</div>
-
-<style lang="scss">
-  .dodo-ui-CalendarYearList {
-    user-select: none;
-
-    ul {
-      margin: 0;
-      padding: 0;
-      flex-wrap: wrap;
-      display: inline-flex;
-      overflow-y: auto;
-    }
-
-    :global(.dodo-ui-CalendarYearChip) {
-      width: 33.333%;
-    }
-
-    .Controls {
-      margin-bottom: calc(var(--dodo-ui-space) * 2);
-    }
-
-    &.size {
-      &--normal {
-        width: calc(var(--dodo-ui-element-height-normal) * 7);
-
-        ul {
-          max-height: calc(var(--dodo-ui-element-height-normal) * 5);
-        }
-      }
-
-      &--small {
-        width: calc(var(--dodo-ui-element-height-small) * 7);
-
-        ul {
-          max-height: calc(var(--dodo-ui-element-height-small) * 5);
-        }
-      }
-
-      &--large {
-        width: calc(var(--dodo-ui-element-height-large) * 7);
-
-        ul {
-          max-height: calc(var(--dodo-ui-element-height-large) * 5);
-        }
-      }
-    }
-  }
-</style>