@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/createDateOfMonth.js

@@ -1,73 +0,0 @@
-import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import dayjsLib from 'dayjs'; // Only needed for types
-/**
- * Creates a moment object from a Date with optional timezone and UTC settings.
- */
-function dateMoment(date, settings) {
-    return getMoment(date, undefined, {
-        timezone: settings?.timezone,
-        utc: settings?.utc,
-    });
-}
-/**
- * Determines if the given day matches "today" (manual or actual).
- */
-function getIsToday(dayMoment, todayDate, todayManual) {
-    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
-    return todayManual === dayDateFormat || todayDate === dayDateFormat;
-}
-/**
- * Determines if a date should be disabled based on limits and included/excluded lists.
- */
-function getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates) {
-    const dayDateFormat = dayMoment.format('DD-MM-YYYY');
-    if (minDate?.isValid() && dayMoment.isBefore(minDate))
-        return true;
-    if (maxDate?.isValid() && dayMoment.isAfter(maxDate))
-        return true;
-    if (excludeDates?.includes(dayDateFormat))
-        return true;
-    if (includeDates && !includeDates.includes(dayDateFormat))
-        return true;
-    return false;
-}
-/**
- * Generates a DateOfMonth object with metadata for a specific day, including
- * whether it's part of the current month, disabled, or today.
- *
- * @param date - The day to convert.
- * @param settings - Optional configuration settings.
- * @param monthType - Specifies if the day belongs to the current, previous, or next month.
- * @param manipulateDate - Optional function to customize the resulting date object.
- * @returns A DateOfMonth object representing the day.
- */
-export default function createDateOfMonth(date, settings, monthType = 'currentMonth', manipulateDate) {
-    const minDate = settings?.minDate ? dateMoment(settings.minDate, settings) : undefined;
-    const maxDate = settings?.maxDate ? dateMoment(settings.maxDate, settings) : undefined;
-    const excludeDates = settings?.excludeDates?.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'));
-    const includeDates = settings?.includeDates?.map((item) => dateMoment(item, settings).format('DD-MM-YYYY'));
-    const todayDate = dateMoment(undefined, settings).format('DD-MM-YYYY');
-    const todayManual = settings?.today
-        ? dateMoment(settings.today, settings).format('DD-MM-YYYY')
-        : undefined;
-    const dayMoment = dateMoment(date, settings);
-    let dataToExport = {
-        id: `${dayMoment.valueOf()}`,
-        date: dayMoment.toDate(),
-        isCurrentMonth: true,
-        disabled: getIsDateDisabled(dayMoment, minDate, maxDate, excludeDates, includeDates),
-        today: getIsToday(dayMoment, todayDate, todayManual),
-    };
-    if (monthType === 'lastMonth') {
-        dataToExport.isLastMonth = true;
-        dataToExport.isCurrentMonth = false;
-    }
-    else if (monthType === 'nextMonth') {
-        dataToExport.isNextMonth = true;
-        dataToExport.isCurrentMonth = false;
-    }
-    if (manipulateDate) {
-        dataToExport = manipulateDate(dataToExport, settings);
-    }
-    return dataToExport;
-}

package/dist/stories/components/Info/Calendar/utils/createDateOfMonth/index.mdx

@@ -1,121 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# `createDateOfMonth`
-
-`createDateOfMonth(date, settings, monthType?, manipulateDate?)` creates a single `DateOfMonth` object representing one calendar cell. This is typically used internally by `getDatesOfMonth` but can be useful for custom logic.
-
-## Usage
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Manual usage for one day
-import { createDateOfMonth } from '@flightlesslabs/dodo-ui';
-
-const date = new Date();
-const dateObj = createDateOfMonth(date, {
-minDate: new Date('2025-01-01'),
-timezone: 'UTC',
-}, 'currentMonth');
-`}
-/>
-
----
-
-# Types
-
-## `DateOfMonth`
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Represents a single calendar cell
-type DateOfMonth = {
-  id: string;
-  date: Date;
-  isCurrentMonth: boolean;
-  isLastMonth?: boolean;
-  isNextMonth?: boolean;
-  disabled?: boolean;
-  today?: boolean;
-};
-`}
-/>
-
-## `CreateDatesOfMonthSettings`
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Configuration for calendar generation
-interface CreateDatesOfMonthSettings {
-  startOfWeek?: 'SUN' | 'MON' | 'TUE' | 'WED' | 'THU' | 'FRI' | 'SAT';
-  showLastMonth?: boolean;
-  showNextMonth?: boolean;
-  today?: Date;
-  minDate?: Date;
-  maxDate?: Date;
-  excludeDates?: Date[];
-  includeDates?: Date[];
-  timezone?: string;
-  utc?: boolean;
-}
-`}
-/>
-
-## `CreateDateOfMonthType`
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Indicates the month context of the date
-type CreateDateOfMonthType = 'currentMonth' | 'nextMonth' | 'lastMonth';
-`}
-/>
-
-## `DAYS_OF_WEEK` Enum
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Weekday constants (Sunday = 0)
-export const enum DAYS_OF_WEEK {
-  SUN,
-  MON,
-  TUE,
-  WED,
-  THU,
-  FRI,
-  SAT,
-}
-`}
-/>
-
-## `MONTHS` Enum
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Month constants (January = 0)
-export const enum MONTHS {
-  JAN,
-  FEB,
-  MAR,
-  APR,
-  MAY,
-  JUN,
-  JUL,
-  AUG,
-  SEP,
-  OCT,
-  NOV,
-  DEC,
-}
-`}
-/>

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.d.ts

@@ -1,10 +0,0 @@
-import { type CreateDatesOfMonthSettings, type DateOfMonth } from '../../../../../../index.js';
-/**
- * Generates a calendar grid of dates for a given month.
- *
- * @param date - The base date for the month to generate.
- * @param settings - Optional settings for formatting and display.
- * @param manipulateDate - Optional function to modify each generated DateOfMonth.
- * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
- */
-export default function getDatesOfMonth(date?: Date, settings?: CreateDatesOfMonthSettings, manipulateDate?: (dateToModify: DateOfMonth, settings?: CreateDatesOfMonthSettings) => DateOfMonth): DateOfMonth[][] | null;

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/getDatesOfMonth.js

@@ -1,81 +0,0 @@
-import getMoment from '../../../../../developer tools/helpers/Time/getMoment/getMoment.js';
-import { calendarWeekOptions, createDateOfMonth, } from '../../../../../../index.js';
-/**
- * Divides an array into chunks of a given size.
- *
- * @template T - The type of elements in the array.
- * @param arr - The array to be chunked.
- * @param size - The chunk size.
- * @returns An array of chunks.
- */
-function chunkArray(arr, size) {
-    const result = [];
-    for (let i = 0; i < arr.length; i += size) {
-        result.push(arr.slice(i, i + size));
-    }
-    return result;
-}
-/**
- * Creates a moment object from a Date with optional timezone and UTC settings.
- *
- * @param date - The date to convert.
- * @param settings - Optional settings for timezone and UTC.
- * @returns A moment object with the applied settings.
- */
-function dateMoment(date, settings) {
-    return getMoment(date, undefined, {
-        timezone: settings?.timezone,
-        utc: settings?.utc,
-    });
-}
-/**
- * Generates a calendar grid of dates for a given month.
- *
- * @param date - The base date for the month to generate.
- * @param settings - Optional settings for formatting and display.
- * @param manipulateDate - Optional function to modify each generated DateOfMonth.
- * @returns A 2D array of DateOfMonth objects representing the calendar, or null if invalid.
- */
-export default function getDatesOfMonth(date, settings, manipulateDate) {
-    if (!date) {
-        return null;
-    }
-    const monthMoment = dateMoment(date, settings).startOf('month').startOf('day');
-    if (!monthMoment.isValid()) {
-        return null;
-    }
-    const showNextMonth = settings?.showNextMonth !== false;
-    const showLastMonth = settings?.showLastMonth !== false;
-    const startOfWeek = calendarWeekOptions.find((item) => item.abr3 === settings?.startOfWeek) ||
-        calendarWeekOptions[0];
-    const rawStartOfMonthDay = monthMoment.day();
-    const startOfMonthDay = (rawStartOfMonthDay - startOfWeek.value + 7) % 7;
-    const daysInMonth = monthMoment.daysInMonth();
-    const dates = [];
-    const lastMonth = monthMoment.clone().subtract(startOfMonthDay, 'days');
-    const nextMonth = monthMoment.clone().add(1, 'month');
-    if (showLastMonth) {
-        for (let gap = 0; gap < startOfMonthDay; gap++) {
-            const dayMoment = lastMonth.clone().add(gap, 'days');
-            dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'lastMonth', manipulateDate));
-        }
-    }
-    for (let day = 1; day <= daysInMonth; day++) {
-        const dayMoment = monthMoment.clone().set('date', day);
-        dates.push(createDateOfMonth(dayMoment.toDate(), settings, 'currentMonth', manipulateDate));
-    }
-    const datesDivided = chunkArray(dates, 7);
-    if (showNextMonth) {
-        const lastRow = datesDivided[datesDivided.length - 1];
-        const nextMonthDaysRequired = 7 - lastRow.length;
-        if (nextMonthDaysRequired > 0) {
-            const nextMonthDates = [];
-            for (let gap = 0; gap < nextMonthDaysRequired; gap++) {
-                const dayMoment = nextMonth.clone().add(gap, 'days');
-                nextMonthDates.push(createDateOfMonth(dayMoment.toDate(), settings, 'nextMonth', manipulateDate));
-            }
-            datesDivided[datesDivided.length - 1] = [...lastRow, ...nextMonthDates];
-        }
-    }
-    return datesDivided;
-}

package/dist/stories/components/Info/Calendar/utils/getDatesOfMonth/index.mdx

@@ -1,37 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# `getDatesOfMonth`
-
-`getDatesOfMonth(date, settings, manipulateDate)` generates a 2D array of weeks, each containing `DateOfMonth` objects. It supports options via `CreateDatesOfMonthSettings` and allows injecting custom logic per date.
-
-## Usage
-
-<Source
-  dark
-  language="ts"
-  code={`
-// Basic usage
-import { getDatesOfMonth, getMoment } from '@flightlesslabs/dodo-ui';
-
-const dates = getDatesOfMonth(new Date(), {
-showLastMonth: false,
-showNextMonth: false,
-});
-
-// Using a formatted date
-const dates2 = getDatesOfMonth(
-getMoment('01-02-2025', 'DD-MM-YYYY').toDate()
-);
-
-// With custom manipulation
-const dates3 = getDatesOfMonth(new Date(), {
-timezone: 'America/New_York',
-startOfWeek: 'MON',
-}, (date, settings) => {
-return {
-...date,
-disabled: true,
-};
-});
-`}
-/>

package/dist/stories/components/Info/Calendar/utils/types.d.ts

@@ -1,32 +0,0 @@
-export declare const enum DAYS_OF_WEEK {
-    SUN = 0,
-    MON = 1,
-    TUE = 2,
-    WED = 3,
-    THU = 4,
-    FRI = 5,
-    SAT = 6
-}
-export declare const enum MONTHS {
-    JAN = 0,
-    FEB = 1,
-    MAR = 2,
-    APR = 3,
-    MAY = 4,
-    JUN = 5,
-    JUL = 6,
-    AUG = 7,
-    SEP = 8,
-    OCT = 9,
-    NOV = 10,
-    DEC = 11
-}
-export type DateOfMonth = {
-    id: string;
-    date: Date;
-    isCurrentMonth: boolean;
-    isLastMonth?: boolean;
-    isNextMonth?: boolean;
-    disabled?: boolean;
-    today?: boolean;
-};

package/dist/stories/components/Info/Calendar/utils/types.js

@@ -1,25 +0,0 @@
-export var DAYS_OF_WEEK;
-(function (DAYS_OF_WEEK) {
-    DAYS_OF_WEEK[DAYS_OF_WEEK["SUN"] = 0] = "SUN";
-    DAYS_OF_WEEK[DAYS_OF_WEEK["MON"] = 1] = "MON";
-    DAYS_OF_WEEK[DAYS_OF_WEEK["TUE"] = 2] = "TUE";
-    DAYS_OF_WEEK[DAYS_OF_WEEK["WED"] = 3] = "WED";
-    DAYS_OF_WEEK[DAYS_OF_WEEK["THU"] = 4] = "THU";
-    DAYS_OF_WEEK[DAYS_OF_WEEK["FRI"] = 5] = "FRI";
-    DAYS_OF_WEEK[DAYS_OF_WEEK["SAT"] = 6] = "SAT";
-})(DAYS_OF_WEEK || (DAYS_OF_WEEK = {}));
-export var MONTHS;
-(function (MONTHS) {
-    MONTHS[MONTHS["JAN"] = 0] = "JAN";
-    MONTHS[MONTHS["FEB"] = 1] = "FEB";
-    MONTHS[MONTHS["MAR"] = 2] = "MAR";
-    MONTHS[MONTHS["APR"] = 3] = "APR";
-    MONTHS[MONTHS["MAY"] = 4] = "MAY";
-    MONTHS[MONTHS["JUN"] = 5] = "JUN";
-    MONTHS[MONTHS["JUL"] = 6] = "JUL";
-    MONTHS[MONTHS["AUG"] = 7] = "AUG";
-    MONTHS[MONTHS["SEP"] = 8] = "SEP";
-    MONTHS[MONTHS["OCT"] = 9] = "OCT";
-    MONTHS[MONTHS["NOV"] = 10] = "NOV";
-    MONTHS[MONTHS["DEC"] = 11] = "DEC";
-})(MONTHS || (MONTHS = {}));

package/dist/stories/components/Layout/Accordian/Accordian.stories.svelte

@@ -1,52 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Accordian from './Accordian.svelte';
-import { componentSizeArray } from '../../../../types/size.js';
-export const storyAccordianArgTypes = {
-    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: Accordian,
-    tags: ['autodocs'],
-    argTypes: storyAccordianArgTypes,
-});
-</script>
-
-<Story name="Default" asChild>
-  <Accordian>
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-  </Accordian>
-</Story>
-
-<Story name="Open by Default" asChild>
-  <Accordian defaultOpen={true}>
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-  </Accordian>
-</Story>
-
-<Story name="Full Width Summary" asChild>
-  <Accordian fullWidthSummary>
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-  </Accordian>
-</Story>

package/dist/stories/components/Layout/Accordian/Accordian.stories.svelte.d.ts

@@ -1,21 +0,0 @@
-import Accordian from './Accordian.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storyAccordianArgTypes: 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 Accordian: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Accordian = InstanceType<typeof Accordian>;
-export default Accordian;

package/dist/stories/components/Layout/Accordian/Accordian.svelte

@@ -1,121 +0,0 @@
-<script lang="ts" module>import Icon from '@iconify/svelte';
-import { onMount } from 'svelte';
-</script>
-
-<script lang="ts">"use strict";
-let { class: className = '', ref = $bindable(), ontoggle, open = $bindable(), defaultOpen, summary, children, size = 'normal', fullWidthSummary = false, customDropdownArrowIcon: customDropdownArrowIconInternal, dropdownArrowPosition = 'before', } = $props();
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
-let isUserInteraction = $state(false);
-function ontoggleMod(e) {
-    if (isUserInteraction) {
-        if (ontoggle) {
-            ontoggle(e);
-        }
-    }
-    isUserInteraction = false;
-}
-function onsummaryclick() {
-    isUserInteraction = true;
-}
-onMount(() => {
-    if (open === true) {
-        ref.open = true;
-    }
-    else if (open === false) {
-        ref.open = false;
-    }
-    else if (defaultOpen === true) {
-        ref.open = true;
-    }
-    else if (defaultOpen === false) {
-        ref.open = false;
-    }
-});
-</script>
-
-{#snippet dropdownArrowIcon()}
-  {#if customDropdownArrowIconTyped}
-    {@render customDropdownArrowIconTyped(open)}
-  {:else}
-    <div class="IconOpen">
-      <Icon icon="material-symbols:arrow-drop-up-rounded" width="32" height="32" />
-    </div>
-    <div class="IconClose">
-      <Icon icon="material-symbols:arrow-drop-down-rounded" width="32" height="32" />
-    </div>
-  {/if}
-{/snippet}
-
-<details
-  class:fullWidthSummary
-  class={['dodo-ui-Accordian', `size--${size}`, className].join(' ')}
-  bind:this={ref}
-  {open}
-  ontoggle={ontoggleMod}
->
-  {#if summary}
-    <summary onclick={onsummaryclick}>
-      {#if dropdownArrowPosition === 'before'}
-        <div class:open class="DropdownArrow before">
-          {@render dropdownArrowIcon()}
-        </div>
-      {/if}
-      {@render summary()}
-      {#if dropdownArrowPosition === 'after'}
-        <div class:open class="DropdownArrow after">
-          {@render dropdownArrowIcon()}
-        </div>
-      {/if}
-    </summary>
-  {/if}
-
-  {#if children}
-    <div class="AccordianContent">
-      {@render children()}
-    </div>
-  {/if}
-</details>
-
-<style>.dodo-ui-Accordian {
-  color: var(--dodo-color-neutral-900);
-  width: 100%;
-}
-.dodo-ui-Accordian summary {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-}
-.dodo-ui-Accordian.fullWidthSummary summary {
-  display: flex;
-  width: 100%;
-}
-.dodo-ui-Accordian[open] .IconOpen {
-  display: flex;
-}
-.dodo-ui-Accordian[open] .IconClose {
-  display: none;
-}
-.dodo-ui-Accordian:not([open]) .IconOpen {
-  display: none;
-}
-.dodo-ui-Accordian:not([open]) .IconClose {
-  display: flex;
-}
-.dodo-ui-Accordian.size--normal summary {
-  font-size: 1rem;
-  min-height: var(--dodo-ui-element-height-normal);
-}
-.dodo-ui-Accordian.size--small summary {
-  font-size: 0.9rem;
-  min-height: var(--dodo-ui-element-height-small);
-}
-.dodo-ui-Accordian.size--large summary {
-  font-size: 1.1rem;
-  min-height: var(--dodo-ui-element-height-large);
-}
-.dodo-ui-Accordian .AccordianContent {
-  margin-top: var(--dodo-ui-space);
-}</style>

package/dist/stories/components/Layout/Accordian/Accordian.svelte.d.ts

@@ -1,34 +0,0 @@
-import type { ComponentSize } from '../../../../types/size.js';
-import type { IconPosition } from '../../../../types/special.js';
-import { type Snippet } from 'svelte';
-import type { EventHandler } from 'svelte/elements';
-export type AccordianToggleEvent = Event & {
-    currentTarget: EventTarget & HTMLDetailsElement;
-};
-export interface AccordianProps {
-    /** Contents goes here */
-    children?: Snippet;
-    /** Accordian summary */
-    summary?: Snippet;
-    /** summary full width */
-    fullWidthSummary?: boolean;
-    /** Accordian ref */
-    ref?: HTMLDetailsElement;
-    /** Custom css class */
-    class?: string;
-    /** The toggle event handler */
-    ontoggle?: EventHandler<Event, HTMLDetailsElement>;
-    /**  Open state, for dynmaic Accordians */
-    open?: boolean;
-    /** default Open, for static Accordians */
-    defaultOpen?: boolean;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: IconPosition;
-    /** Dropdown Arrow Icon */
-    customDropdownArrowIcon?: (open: boolean) => Snippet;
-}
-declare const Accordian: import("svelte").Component<AccordianProps, {}, "ref" | "open">;
-type Accordian = ReturnType<typeof Accordian>;
-export default Accordian;

package/dist/stories/components/Layout/Accordian/Customize/Customize.stories.svelte

@@ -1,69 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Accordian from '../Accordian.svelte';
-import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
-import Icon from '@iconify/svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Accordian,
-    tags: ['autodocs'],
-    argTypes: storyAccordianArgTypes,
-});
-let open = $state(true);
-</script>
-
-<Story name="DropdownArrowPositionBefore" asChild>
-  <Accordian>
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-  </Accordian>
-</Story>
-
-<Story name="DropdownArrowPositionAfter" asChild>
-  <Accordian dropdownArrowPosition="after">
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-  </Accordian>
-</Story>
-
-<Story name="HideDropdownArrow" asChild>
-  <Accordian dropdownArrowPosition={false}>
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-  </Accordian>
-</Story>
-
-<!-- Format look and feel Dropdown Arrow icon  -->
-<Story name="CustomDropdownArrowIcon" asChild>
-  <Accordian {open} ontoggle={() => (open = !open)}>
-    {#snippet summary()}
-      Click me!
-    {/snippet}
-
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
-    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
-    at harum, explicabo et doloremque.
-
-    {#snippet customDropdownArrowIcon(open)}
-      {#if open}
-        <Icon icon="mingcute:up-fill" width="24" height="24" />
-      {:else}
-        <Icon icon="mingcute:down-fill" width="24" height="24" />
-      {/if}
-    {/snippet}
-  </Accordian>
-</Story>