@flightlesslabs/dodo-ui 0.7.2 → 0.8.0

package/dist/index.d.ts

@@ -38,6 +38,9 @@ export type { FormControlProps } from './stories/components/Form/FormControl/For
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
 export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
+/** Form: Select */
+export { default as Select } from './stories/components/Form/Select/Select.svelte';
+export type { SelectOption, SelectDropdownArrowPosition, SelectProps, } from './stories/components/Form/Select/Select.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';
@@ -49,3 +52,5 @@ export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
 export type { MenuProps } from './stories/components/Layout/Menu/Menu.svelte';
 export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
 export type { MenuItemType, MenuItemProps, } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+export type { DynamicMenuItemOption, DynamicMenuProps, } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';

package/dist/index.js

@@ -22,6 +22,8 @@ export { default as Label } from './stories/components/Form/Label/Label.svelte';
 export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
+/** Form: Select */
+export { default as Select } from './stories/components/Form/Select/Select.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
 /** Layout: Separator */
@@ -29,3 +31,4 @@ export { default as Separator } from './stories/components/Layout/Separator/Sepa
 /** Layout: Menu */
 export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
 export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export { default as DynamicMenu } from './stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';

package/dist/stories/components/Form/Select/Customize/Customize.stories.svelte

@@ -3,6 +3,7 @@ import Select, {} from '../Select.svelte';
 import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
 import { Menu } from '../../../../../index.js';
 import MenuItem from '../../../Layout/Menu/MenuItem/MenuItem.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: Select,
@@ -30,6 +31,19 @@ let value = $state(options[0]);
   </Select>
 </Story>
 
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#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}
+  </Select>
+</Story>
+
 <!-- Format look and feel of Popper menu item.  -->
 <Story name="CustomMenuItem" asChild>
   <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
@@ -51,13 +65,14 @@ let value = $state(options[0]);
 <!-- Format look and feel of Popup.  -->
 <Story name="CustomPopup" asChild>
   <Select {options} {value}>
-    {#snippet customPopupContent(options, selectedOption)}
+    {#snippet customPopupContent(options, selectedOption, onselect)}
       <Menu size="small" separator>
         {#each options as option (option.value)}
           <MenuItem
             type="button"
             disabled={option.disabled}
             selected={selectedOption.value === option.value}
+            onclick={() => onselect(option)}
           >
             <b>{option.label}</b>
           </MenuItem>

package/dist/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte

@@ -0,0 +1,59 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Select, {} from '../Select.svelte';
+import { selectOptions, storySelectArgTypes } from '../Select.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: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story
+  name="PositionAfter"
+  args={{ options, value, onselect: (val: SelectOption) => (value = val) }}
+/>
+
+<Story
+  name="PositionBefore"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    dropdownArrowPosition: 'before',
+  }}
+/>
+
+<Story
+  name="HideArrow"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    dropdownArrowPosition: false,
+  }}
+/>
+
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#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}
+  </Select>
+</Story>

package/dist/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 DropDownArrow: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DropDownArrow = InstanceType<typeof DropDownArrow>;
+export default DropDownArrow;

package/dist/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { selectOptions, storySelectArgTypes } from '../../Select.stories.svelte';
+import Select, {} from '../../Select.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '200px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<!-- Positions will auto adjust depending on the space on top and bottom -->
+<Story
+  name="PositionAutoAdjust"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+  }}
+/>
+
+<!-- Positions will not auto adjust if you use `lockPoistions` -->
+<Story
+  name="LockPoistions"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    lockPoistions: true,
+  }}
+/>
+
+<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
+<Story
+  name="HeightForVerticalPosition"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popperHeightForVerticalPosition: 3,
+  }}
+/>

package/dist/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 AutoPosition: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AutoPosition = InstanceType<typeof AutoPosition>;
+export default AutoPosition;

package/dist/stories/components/Form/Select/Positions/Positions.stories.svelte

@@ -0,0 +1,83 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+import Select, {} from '../Select.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            story: {
+                height: '600px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story
+  name="BottomLeft"
+  args={{ options, value, onselect: (val: SelectOption) => (value = val), popupMaxHeight: '200px' }}
+/>
+
+<Story
+  name="BottomCenter"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionX: 'center',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="BottomRight"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionX: 'right',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="TopLeft"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="TopCenter"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popupPositionX: 'center',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="TopRight"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popupPositionX: 'right',
+    popupMaxHeight: '200px',
+  }}
+/>

package/dist/stories/components/Form/Select/Positions/Positions.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Positions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Positions = InstanceType<typeof Positions>;
+export default Positions;

package/dist/stories/components/Form/Select/Select.svelte

@@ -4,26 +4,35 @@
 <script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import Icon from '@iconify/svelte';
-import { DynamicInput, Menu, MenuItem, Popper, } from '../../../../index.js';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', } = $props();
+import { DynamicInput, DynamicMenu, Popper, } from '../../../../index.js';
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, customDropdownArrowIcon: customDropdownArrowIconInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', dropdownArrowPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, } = $props();
+function convertOptionsToDynamicMenuItemOptions(options) {
+    const newOptions = options.map((option) => ({
+        id: `opt-${option.value}`,
+        disabled: option.disabled,
+        label: option.label,
+        meta: option,
+        type: 'button',
+    }));
+    return newOptions;
+}
 let open = $state(false);
 let onInputStart = $state(false);
 const selectedOption = $derived(value);
 let searchTerm = $state(value?.label.trim() || '');
-let options = $state(optionsRaw);
+let options = $state(convertOptionsToDynamicMenuItemOptions(optionsRaw));
 let menuRef = $state(undefined);
-let menuItemIndex = $state(0);
 $effect(() => {
     if (!onInputStart) {
-        options = optionsRaw;
+        options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
         return;
     }
     const searchTermSimplified = searchTerm.trim().toLowerCase();
     if (!searchTermSimplified) {
-        options = optionsRaw;
+        options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
         return;
     }
-    options = optionsRaw.filter((item) => item.label.trim().toLowerCase().includes(searchTermSimplified));
+    options = convertOptionsToDynamicMenuItemOptions(optionsRaw).filter((item) => item?.meta?.label.trim().toLowerCase().includes(searchTermSimplified));
 });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customInputContentTyped = customInputContentInternal;
@@ -33,20 +42,14 @@ let customMenuItemContentTyped = customMenuItemContentInternal;
 let customPopupContentTyped = customPopupContentInternal;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
 function closeMenu() {
     open = false;
-    menuItemIndex = 0;
     ref?.blur();
 }
 function openMenu() {
     open = true;
-    const menuItemIndexNew = options.findIndex((item) => item.value === selectedOption?.value);
-    if (menuItemIndexNew < 0) {
-        menuItemIndex = 0;
-    }
-    else {
-        menuItemIndex = menuItemIndexNew;
-    }
 }
 function onfocusMod(e) {
     openMenu();
@@ -88,7 +91,8 @@ function onclearMod(e) {
         onclear(e);
     }
 }
-function onKeyBoardEnter(selectedItemIndex) {
+function onKeyBoardEnter(e, selectedItemIndex) {
+    e.preventDefault();
     const targetOption = options[selectedItemIndex];
     if (!targetOption) {
         return;
@@ -96,86 +100,35 @@ function onKeyBoardEnter(selectedItemIndex) {
     if (targetOption.disabled) {
         return;
     }
-    onselectMod(targetOption);
+    onselectMod(targetOption.meta);
 }
-function onKeyboardNavigation(e) {
-    let keyHit = undefined;
-    if (!menuRef) {
-        return;
-    }
-    if (!open) {
-        return;
-    }
-    switch (e.key) {
-        case 'ArrowDown':
-        case 'ArrowUp':
-        case 'Enter':
-            keyHit = e.key;
-            e.preventDefault();
-            break;
-        default:
-            break;
-    }
-    if (!keyHit) {
-        return;
-    }
-    const listItems = menuRef.querySelectorAll(':scope > li.dodo-ui-MenuItem');
-    if (!listItems.length) {
-        return;
-    }
-    for (let index = 0; index < listItems.length; index++) {
-        const element = listItems[index];
-        element.classList.remove('hover');
-    }
-    let newMenuItemIndex = menuItemIndex;
-    if (keyHit === 'ArrowDown') {
-        if (listItems[newMenuItemIndex + 1]) {
-            newMenuItemIndex = newMenuItemIndex + 1;
-        }
-        else {
-            newMenuItemIndex = 0;
-        }
-    }
-    else if (keyHit === 'ArrowUp') {
-        if (listItems[newMenuItemIndex - 1]) {
-            newMenuItemIndex = newMenuItemIndex - 1;
-        }
-        else {
-            newMenuItemIndex = listItems.length - 1;
-        }
-    }
-    else if (keyHit === 'Enter') {
-        onKeyBoardEnter(newMenuItemIndex);
-        return;
-    }
-    const targetItem = listItems[newMenuItemIndex];
-    targetItem.classList.add('hover');
-    targetItem.focus();
-    targetItem.scrollIntoView({ block: 'nearest' });
-    menuItemIndex = newMenuItemIndex;
-}
-$effect(() => {
-    if (!menuRef) {
-        return;
-    }
-    if (!open) {
-        return;
-    }
-    const targetItem = menuRef.querySelector(':scope > li.dodo-ui-MenuItem.selected');
-    if (targetItem) {
-        targetItem.classList.add('hover');
-        targetItem.focus();
-        targetItem.scrollIntoView({ block: 'nearest' });
-    }
-    window.addEventListener('keydown', onKeyboardNavigation);
-    return () => {
-        window.removeEventListener('keydown', onKeyboardNavigation);
-    };
-});
 </script>
 
+{#snippet selectDropdownArrowIcon()}
+  <UtilityButton {size} title="Dropdown" onclick={onfocusMod}>
+    {#if customDropdownArrowIconTyped}
+      {@render customDropdownArrowIconTyped(open)}
+    {:else if open}
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="28" height="28" />
+    {:else}
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="28" height="28" />
+    {/if}
+  </UtilityButton>
+{/snippet}
+
 <div class={['dodo-ui-Select', className].join(' ')}>
-  <Popper fullWidth {open} {onClickOutside} {...popperProps} {popupMaxHeight} {paperProps}>
+  <Popper
+    fullWidth
+    {open}
+    {onClickOutside}
+    {...popperProps}
+    {popupMaxHeight}
+    {popupPositionX}
+    {popupPositionY}
+    {paperProps}
+    {lockPoistions}
+    {popperHeightForVerticalPosition}
+  >
     <div
       class:outline
       class:disabled
@@ -198,6 +151,12 @@ $effect(() => {
         {before}
         {after}
       >
+        {#if dropdownArrowPosition === 'before'}
+          <div class:before class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
+
         <DynamicInput
           type="text"
           {name}
@@ -232,43 +191,50 @@ $effect(() => {
             </UtilityButton>
           </div>
         {/if}
+
+        {#if dropdownArrowPosition === 'after'}
+          <div class:after class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
       </InputEnclosure>
     </div>
 
     {#snippet popupChildren()}
       {#if customPopupContentTyped}
-        {@render customPopupContentTyped(options, selectedOption)}
+        {@render customPopupContentTyped(optionsRaw, selectedOption, onselectMod)}
       {:else}
-        <Menu bind:ref={menuRef} {...menuProps}>
-          {#if options.length}
-            {#each options as option (option.value)}
-              <MenuItem
-                onclick={() => onselectMod(option)}
-                type="button"
-                disabled={option.disabled}
-                selected={selectedOption?.value === option.value}
-                {...menuItemProps}
-              >
-                {#if customMenuItemContentTyped}
-                  {@render customMenuItemContentTyped(
-                    option,
-                    selectedOption?.value === option.value,
-                  )}
-                {:else}
-                  {option.label}
-                {/if}
-              </MenuItem>
-            {/each}
-          {:else}
-            <MenuItem type="text" disabled={true} {...menuItemProps}>
-              {#if customPlaceholderMenuItemContentTyped}
-                {@render customPlaceholderMenuItemContentTyped()}
-              {:else}
-                {optionsPlaceholder}
-              {/if}
-            </MenuItem>
-          {/if}
-        </Menu>
+        <DynamicMenu
+          bind:ref={menuRef}
+          {menuItemProps}
+          {options}
+          keyboardNavigation
+          onEnter={onKeyBoardEnter}
+          selectedOption={options.find((item) => item.meta?.value === selectedOption?.value)}
+          onclick={(_e, option: DynamicMenuItemOption) => onselectMod(option.meta as SelectOption)}
+          showOptionsPlaceholder
+          {...menuProps}
+        >
+          {#snippet customMenuItemContent(option, selectedOption)}
+            {#if customMenuItemContentTyped}
+              {@render customMenuItemContentTyped(
+                option?.meta as SelectOption,
+                (selectedOption?.meta as SelectOption).value ===
+                  (option?.meta as SelectOption).value,
+              )}
+            {:else}
+              {(option?.meta as SelectOption).label}
+            {/if}
+          {/snippet}
+
+          {#snippet customPlaceholderMenuItemContent()}
+            {#if customPlaceholderMenuItemContentTyped}
+              {@render customPlaceholderMenuItemContentTyped()}
+            {:else}
+              {optionsPlaceholder}
+            {/if}
+          {/snippet}
+        </DynamicMenu>
       {/if}
     {/snippet}
   </Popper>
@@ -277,9 +243,27 @@ $effect(() => {
 <style>.dodo-ui-Select .Select.size--normal .SelectClear.after {
   margin-right: calc(var(--dodo-ui-space-small) * 2);
 }
+.dodo-ui-Select .Select.size--normal .DropdownArrow.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-Select .Select.size--normal .DropdownArrow.before {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
 .dodo-ui-Select .Select.size--small .SelectClear.after {
   margin-right: var(--dodo-ui-space);
 }
+.dodo-ui-Select .Select.size--small .DropdownArrow.after {
+  margin-right: var(--dodo-ui-space);
+}
+.dodo-ui-Select .Select.size--small .DropdownArrow.before {
+  margin-right: var(--dodo-ui-space);
+}
 .dodo-ui-Select .Select.size--large .SelectClear.after {
   margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-Select .Select.size--large .DropdownArrow.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-Select .Select.size--large .DropdownArrow.before {
+  margin-right: calc(var(--dodo-ui-space) * 2);
 }</style>