@flightlesslabs/dodo-ui 0.18.0 → 0.19.1

package/dist/stories/components/Form/Search/WithIcon/WithIcon.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default WithIcon;
+type WithIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const WithIcon: $$__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/Form/Select/Select.svelte

@@ -176,6 +176,7 @@ function onKeyBoardEnter(e, selectedItemIndex) {
           value={searchable ? searchTerm : selectedOption?.label}
           {readonly}
           variant={searchable ? 'input' : 'button'}
+          {size}
         >
           {#snippet customInputContent()}
             {#if customInputContentTyped}

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

@@ -70,11 +70,11 @@ export interface SelectProps {
     onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
     /** custom Content Formatting for variant button */
     customInputContent?: (val: SelectOption) => Snippet;
-    /** custom Content Formatting for variant button */
+    /** custom Menu Item Content */
     customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
     /** Custom Popup Content */
     customPopupContent?: (options: SelectOption[], selectedOption: SelectOption, onselect: (val: SelectOption) => void) => Snippet;
-    /** custom Content Formatting for variant button */
+    /** custom Placeholder MenuItem Content */
     customPlaceholderMenuItemContent?: () => Snippet;
     /** PopperPopup Max height. Use css compatible value */
     popupMaxHeight?: string;
@@ -89,7 +89,7 @@ export interface SelectProps {
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: DropdownArrowPosition;
+    dropdownArrowPosition?: IconPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -102,7 +102,7 @@ export interface SelectProps {
     open?: boolean;
 }
 import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
-import type { DropdownArrowPosition } from '../../../../types/special.js';
+import type { IconPosition } from '../../../../types/special.js';
 declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

@@ -39,6 +39,7 @@ function onblurMod(e) {
       {name}
       {id}
       {disabled}
+      {size}
       bind:ref
       bind:focused
       {oninput}

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

@@ -1,5 +1,5 @@
 import type { ComponentSize } from '../../../../types/size.js';
-import type { DropdownArrowPosition } from '../../../../types/special.js';
+import type { IconPosition } from '../../../../types/special.js';
 import { type Snippet } from 'svelte';
 import type { EventHandler } from 'svelte/elements';
 export type AccordianToggleEvent = Event & {
@@ -25,7 +25,7 @@ export interface AccordianProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: DropdownArrowPosition;
+    dropdownArrowPosition?: IconPosition;
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
 }

package/dist/stories/developer tools/components/UtilityIcon/Size/Size.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import UtilityIcon from '../UtilityIcon.svelte';
+  import { storyUtilityIconArgTypes } from '../UtilityIcon.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: UtilityIcon,
+    tags: ['autodocs'],
+    argTypes: storyUtilityIconArgTypes,
+  });
+</script>
+
+<Story name="Normal">
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>

package/dist/stories/developer tools/components/UtilityIcon/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+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/developer tools/components/UtilityIcon/UtilityIcon.stories.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import UtilityIcon from './UtilityIcon.svelte';
+import Icon from '@iconify/svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyUtilityIconArgTypes = {
+    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: UtilityIcon,
+    tags: ['autodocs'],
+    argTypes: storyUtilityIconArgTypes,
+});
+</script>
+
+<!-- Button with default style -->
+<Story name="Default">
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>

package/dist/stories/developer tools/components/UtilityIcon/UtilityIcon.stories.svelte.d.ts

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

package/dist/stories/developer tools/components/UtilityIcon/UtilityIcon.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, size = 'normal', id, class: className = '', disabled = false, ref = $bindable(), } = $props();
+</script>
+
+<span
+  class={['dodo-ui-UtilityIcon', `size--${size}`, className].join(' ')}
+  class:disabled
+  {id}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</span>
+
+<style>:global(:root) {
+  --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-400);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-500);
+}
+
+.dodo-ui-UtilityIcon {
+  outline: none;
+  transition: all 150ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  color: var(--dodo-color-neutral-600);
+  font-family: inherit;
+}
+.dodo-ui-UtilityIcon.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+  width: var(--dodo-ui-element-height-normal);
+  font-size: 1rem;
+}
+.dodo-ui-UtilityIcon.size--small {
+  height: var(--dodo-ui-element-height-small);
+  width: var(--dodo-ui-element-height-small);
+  font-size: 0.9rem;
+}
+.dodo-ui-UtilityIcon.size--large {
+  height: var(--dodo-ui-element-height-large);
+  width: var(--dodo-ui-element-height-large);
+  font-size: 1.1rem;
+}
+.dodo-ui-UtilityIcon.disabled {
+  cursor: initial;
+  color: var(--dodo-ui-UtilityIcon-disabled-color);
+}</style>

package/dist/stories/developer tools/components/UtilityIcon/UtilityIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { Snippet } from 'svelte';
+export interface UtilityIconProps {
+    /** Button contents goes here*/
+    children?: Snippet;
+    /** Button ref */
+    ref?: HTMLSpanElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** Id */
+    id?: string;
+    /** Custom css class*/
+    class?: string;
+}
+declare const UtilityIcon: import("svelte").Component<UtilityIconProps, {}, "ref">;
+type UtilityIcon = ReturnType<typeof UtilityIcon>;
+export default UtilityIcon;

package/dist/types/special.d.ts

@@ -1 +1 @@
-export type DropdownArrowPosition = false | 'before' | 'after';
+export type IconPosition = false | 'before' | 'after';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "scripts": {
     "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
     "build": "vite build && pnpm copy-css && pnpm run prepack",
@@ -53,25 +53,26 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.0",
-    "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.32.0",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.33.0",
     "@storybook/addon-docs": "^9.1.1",
     "@storybook/addon-svelte-csf": "5.0.7",
     "@storybook/addon-vitest": "^9.1.1",
     "@storybook/sveltekit": "^9.1.1",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.27.1",
-    "@sveltejs/package": "^2.4.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@sveltejs/adapter-static": "^3.0.9",
+    "@sveltejs/kit": "^2.27.3",
+    "@sveltejs/package": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.1",
     "@types/file-saver": "^2.0.7",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vueless/storybook-dark-mode": "^9.0.6",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.32.0",
+    "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-storybook": "9.1.1",
     "eslint-plugin-svelte": "^3.11.0",
+    "file-saver": "^2.0.5",
     "globals": "^16.3.0",
     "playwright": "^1.54.2",
     "prettier": "^3.6.2",
@@ -84,7 +85,7 @@
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.0",
-    "vite": "^7.1.0",
+    "vite": "^7.1.1",
     "vitest": "^3.2.4"
   },
   "keywords": [
@@ -92,11 +93,10 @@
   ],
   "volta": {
     "node": "22.15.1",
-    "pnpm": "10.12.1"
+    "pnpm": "10.14.0"
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.1",
-    "dayjs": "^1.11.13",
-    "file-saver": "^2.0.5"
+    "dayjs": "^1.11.13"
   }
 }

package/src/lib/index.ts

@@ -12,7 +12,7 @@ export type { ComponentWeight } from './types/weight.js';
 
 export type { PositionY, PositionX } from './types/position.js';
 
-export type { DropdownArrowPosition } from './types/special.js';
+export type { IconPosition } from './types/special.js';
 
 /** developer tools: helpers: logger */
 export { default as createLogger } from '$lib/stories/developer tools/helpers/logger/logger.js';
@@ -134,6 +134,10 @@ export type { CheckboxProps } from '$lib/stories/components/Form/Checkbox/Checkb
 export { default as Radio } from '$lib/stories/components/Form/Radio/Radio.svelte';
 export type { RadioProps } from '$lib/stories/components/Form/Radio/Radio.svelte';
 
+/** Form: Search */
+export { default as Search } from '$lib/stories/components/Form/Search/Search.svelte';
+export type { SearchProps } from '$lib/stories/components/Form/Search/Search.svelte';
+
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';

package/src/lib/stories/components/Form/DatePicker/DatePicker.svelte

@@ -557,6 +557,7 @@
             : getMoment(value, undefined, { timezone, utc }).format(format)}
           {readonly}
           variant={editable ? 'input' : 'button'}
+          {size}
         >
           {#snippet customInputContent()}
             {#if customInputContentTyped}

package/src/lib/stories/components/Form/NumericInput/NumericInput.svelte

@@ -281,6 +281,7 @@
       {readonly}
       variant="input"
       bind:value
+      {size}
     />
   </InputEnclosure>
 </div>

package/src/lib/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -179,6 +179,7 @@
       bind:value
       {readonly}
       variant="input"
+      {size}
     />
 
     {#if passwordToggle && !disabled}

package/src/lib/stories/components/Form/Search/Search.svelte

@@ -0,0 +1,285 @@
+<script lang="ts" module>
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+
+  import type { Snippet } from 'svelte';
+  import type {
+    ChangeEventHandler,
+    ClipboardEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+    KeyboardEventHandler,
+  } from 'svelte/elements';
+
+  export interface SearchProps {
+    /** Input ref */
+    ref?: HTMLInputElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** Input value */
+    value?: string;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** onsearch event handler */
+    onsearch?: () => void;
+    /** onclear event handler */
+    onclear?: () => void;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
+    /** custom Search Icon */
+    customSearchIcon?: () => Snippet;
+    /** search Icon Position */
+    searchIconPosition?: IconPosition;
+  }
+</script>
+
+<script lang="ts">
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import { type DynamicInputFocusEvent } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+  import type { TextInputFocusEvent, TextInputKeyboardEvent } from '../TextInput/TextInput.svelte';
+  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+  import Icon from '@iconify/svelte';
+  import UtilityIcon from '$lib/stories/developer tools/components/UtilityIcon/UtilityIcon.svelte';
+  import type { IconPosition } from '$lib/types/special.js';
+
+  let {
+    size = 'normal',
+    roundness = 1,
+    outline = true,
+    name,
+    id,
+    class: className = '',
+    disabled = false,
+    onsearch,
+    onclear,
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onpaste,
+    oncopy,
+    oncut,
+    onkeydown,
+    onkeypress,
+    onkeyup,
+    before,
+    after,
+    error = false,
+    value = $bindable<string>(),
+    placeholder,
+    ref = $bindable<HTMLInputElement>(),
+    readonly = false,
+    customSearchIcon,
+    searchIconPosition = 'before',
+  }: SearchProps = $props();
+
+  let focused: boolean = $state(false);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customSearchIconTyped = customSearchIcon as any;
+
+  function onfocusMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
+    if (onfocus) {
+      onfocus(eTyped);
+    }
+  }
+
+  function onblurMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
+
+    if (onblur) {
+      onblur(eTyped);
+    }
+  }
+
+  function onkeydownMod(e: TextInputKeyboardEvent) {
+    const eTyped = e as TextInputKeyboardEvent;
+
+    if (onkeydown) {
+      onkeydown(eTyped);
+    }
+
+    if (e.key === 'Enter' && onsearch) {
+      e.preventDefault();
+
+      onsearch();
+      return;
+    }
+
+    if (e.key === 'Escape' && onclear) {
+      e.preventDefault();
+
+      onclear();
+      return;
+    }
+  }
+</script>
+
+{#snippet searchIcon()}
+  <UtilityIcon {size} {disabled}>
+    {#if customSearchIconTyped}
+      {@render customSearchIconTyped()}
+    {:else}
+      <Icon icon="material-symbols:search-rounded" width="24" height="24" />
+    {/if}
+  </UtilityIcon>
+{/snippet}
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-Search', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
+>
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    {#if searchIconPosition === 'before'}
+      <div class="SearchIcon before">
+        {@render searchIcon()}
+      </div>
+    {/if}
+
+    <input
+      type="search"
+      {name}
+      {id}
+      {disabled}
+      bind:this={ref}
+      bind:focused
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      onkeydown={onkeydownMod}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
+      {placeholder}
+      bind:value
+      {readonly}
+    />
+
+    {#if value && onclear && !disabled}
+      <div class="SearchClear">
+        <UtilityButton {size} title="Clear" onclick={onclear}>
+          <Icon icon="material-symbols:close-small" width="24" height="24" />
+        </UtilityButton>
+      </div>
+    {/if}
+
+    {#if searchIconPosition === 'after'}
+      <div class="SearchIcon after">
+        {@render searchIcon()}
+      </div>
+    {/if}
+  </InputEnclosure>
+</div>
+
+<style lang="scss">
+  .dodo-ui-Search {
+    input {
+      flex: 1;
+      border: 0;
+      outline: 0;
+      height: 100%;
+      background-color: transparent;
+      font-family: inherit;
+      color: inherit;
+      letter-spacing: 0.3px;
+      margin: 0;
+
+      &::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration {
+        display: none;
+      }
+    }
+
+    .SearchIcon {
+      display: flex;
+    }
+
+    &.size {
+      &--normal {
+        .SearchIcon {
+          &.before {
+            margin-right: calc(calc(var(--dodo-ui-space-small) * 2) * -1);
+          }
+        }
+
+        input {
+          font-size: 1rem;
+          padding: 0 calc(var(--dodo-ui-space-small) * 2);
+        }
+      }
+
+      &--small {
+        .SearchIcon {
+          &.before {
+            margin-right: calc(var(--dodo-ui-space) * -1);
+          }
+        }
+
+        input {
+          padding: 0 var(--dodo-ui-space);
+          font-size: 0.9rem;
+        }
+      }
+
+      &--large {
+        .SearchIcon {
+          &.before {
+            margin-right: calc(calc(var(--dodo-ui-space) * 2) * -1);
+          }
+        }
+
+        input {
+          font-size: 1.1rem;
+          padding: 0 calc(var(--dodo-ui-space) * 2);
+        }
+      }
+    }
+  }
+</style>