@flightlesslabs/dodo-ui 0.4.0 → 0.5.0

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

@@ -0,0 +1,59 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import {} from './SimpleSelect.svelte';
+import SimpleSelect from './SimpleSelect.svelte';
+export const storySimpleSelectArgTypes = {
+    type: {
+        control: { type: 'select' },
+        options: ['text', 'tel', 'email', 'password', 'url', 'number'],
+    },
+    roundness: {
+        control: { type: 'select' },
+        options: [false, '1x', '2x', '3x'],
+    },
+    size: {
+        control: { type: 'select' },
+        options: ['normal', 'small', 'large'],
+    },
+};
+export const storySimpleSelectOptions = [
+    {
+        value: 'volvo',
+        label: 'Volvo',
+    },
+    {
+        value: 'saab',
+        label: 'Saab',
+    },
+    {
+        value: 'mercedes',
+        label: 'Mercedes',
+    },
+    {
+        value: 'audi',
+        label: 'Audi',
+    },
+    {
+        value: 'opel',
+        label: 'Opel',
+        disabled: true,
+    },
+];
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: SimpleSelect,
+    tags: ['autodocs'],
+    argTypes: storySimpleSelectArgTypes,
+    args: { options: storySimpleSelectOptions },
+});
+</script>
+
+<!-- SimpleSelect with default style -->
+<Story name="Default" />
+
+<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
+
+<Story name="No Outline" args={{ outline: false }} />
+
+<Story name="Error" args={{ error: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />

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

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

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

@@ -0,0 +1,69 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
+let { size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, onchange, onblur, onfocus, before, after, error = false, value, placeholder, ref = $bindable(), options, } = $props();
+let focused = $state(false);
+function onfocusMod(e) {
+    focused = true;
+    if (onfocus) {
+        onfocus(e);
+    }
+}
+function onblurMod(e) {
+    focused = false;
+    if (onblur) {
+        onblur(e);
+    }
+}
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-SimpleSelect', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
+>
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <select
+      {name}
+      {id}
+      {disabled}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {placeholder}
+      bind:this={ref}
+    >
+      {#each options as option (option.value)}
+        <option value={option.value} disabled={option.disabled} selected={value === option.value}>
+          {option.label}
+        </option>
+      {/each}
+    </select>
+  </InputEnclosure>
+</div>
+
+<style>.dodo-ui-SimpleSelect select {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+}
+.dodo-ui-SimpleSelect.size--normal select {
+  font-size: 1rem;
+  padding: 0 12px;
+}
+.dodo-ui-SimpleSelect.size--small select {
+  padding: 0 8px;
+  font-size: 0.9rem;
+}
+.dodo-ui-SimpleSelect.size--large select {
+  font-size: 1.1rem;
+  padding: 0 14px;
+}</style>

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

@@ -0,0 +1,50 @@
+export type SimpleSelectFocusEvent = FocusEvent & {
+    currentTarget: EventTarget & HTMLSelectElement;
+};
+export type SimpleSelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, FocusEventHandler } from 'svelte/elements';
+interface SimpleSelectProps {
+    /** Select ref */
+    ref?: HTMLSelectElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness | false;
+    /** How round should the border radius be? */
+    options: SimpleSelectOption[];
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** Select value */
+    value?: string;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: 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;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLSelectElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLSelectElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLSelectElement>;
+}
+declare const SimpleSelect: import("svelte").Component<SimpleSelectProps, {}, "ref">;
+type SimpleSelect = ReturnType<typeof SimpleSelect>;
+export default SimpleSelect;

package/dist/stories/components/Form/SimpleSelect/Size/Size.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SimpleSelect from '../SimpleSelect.svelte';
+  import {
+    storySimpleSelectArgTypes,
+    storySimpleSelectOptions,
+  } from '../SimpleSelect.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: SimpleSelect,
+    tags: ['autodocs'],
+    argTypes: storySimpleSelectArgTypes,
+    args: { options: storySimpleSelectOptions },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/dist/stories/components/Form/SimpleSelect/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/components/Form/SimpleSelect/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Icon from '@iconify/svelte';
+
+  import SimpleSelect from '../SimpleSelect.svelte';
+  import {
+    storySimpleSelectArgTypes,
+    storySimpleSelectOptions,
+  } from '../SimpleSelect.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: SimpleSelect,
+    tags: ['autodocs'],
+    argTypes: storySimpleSelectArgTypes,
+    args: { options: storySimpleSelectOptions },
+  });
+</script>
+
+<!-- SimpleSelect icon in front. -->
+<Story name="Icon Before">
+  <SimpleSelect options={storySimpleSelectOptions}>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </SimpleSelect>
+</Story>
+
+<!-- SimpleSelect icon in front. -->
+<Story name="Icon After">
+  <SimpleSelect options={storySimpleSelectOptions}>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </SimpleSelect>
+</Story>

package/dist/stories/components/Form/SimpleSelect/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/TextInput/TextInput.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">let { type = 'text', size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
+<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
+let { type = 'text', size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 function onfocusMod(e) {
     focused = true;
@@ -15,7 +16,6 @@ function onblurMod(e) {
         onblur(e);
     }
 }
-export {};
 </script>
 
 <div
@@ -25,59 +25,28 @@ export {};
   class:focused
   class={['dodo-ui-TextInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-  <input
-    {type}
-    {name}
-    {id}
-    {disabled}
-    {oninput}
-    {onchange}
-    onfocus={onfocusMod}
-    onblur={onblurMod}
-    {onpaste}
-    {oncopy}
-    {oncut}
-    {placeholder}
-    {readonly}
-    bind:value
-    bind:this={ref}
-  />
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <input
+      {type}
+      {name}
+      {id}
+      {disabled}
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      {placeholder}
+      {readonly}
+      bind:value
+      bind:this={ref}
+    />
+  </InputEnclosure>
 </div>
 
-<style>:global(:root) {
-  --dodo-ui-TextInput-border-color: var(--dodo-color-default-500);
-  --dodo-ui-TextInput-focus-border-color: var(--dodo-color-primary-500);
-  --dodo-ui-TextInput-error-border-color: var(--dodo-color-danger-500);
-  --dodo-ui-TextInput-disabled-color: var(--dodo-color-default-400);
-  --dodo-ui-TextInput-disabled-bg: var(--dodo-color-default-200);
-}
-
-:global(.dodo-theme--dark) {
-  --dodo-ui-TextInput-border-color: var(--dodo-color-default-600);
-  --dodo-ui-TextInput-focus-border-color: var(--dodo-color-primary-600);
-  --dodo-ui-TextInput-error-border-color: var(--dodo-color-danger-600);
-  --dodo-ui-TextInput-disabled-bg: var(--dodo-color-default-100);
-  --dodo-ui-TextInput-disabled-color: var(--dodo-color-default-500);
-}
-
-.dodo-ui-TextInput {
-  display: flex;
-  overflow: hidden;
-  color: var(--dodo-color-default-800);
-  transition: all 150ms;
-  border: 0;
-}
-.dodo-ui-TextInput input {
+<style>.dodo-ui-TextInput input {
   flex: 1;
   border: 0;
   outline: 0;
@@ -87,82 +56,15 @@ export {};
   color: inherit;
   letter-spacing: 0.3px;
 }
-.dodo-ui-TextInput.outline {
-  border-style: solid;
-  border-width: var(--dodo-ui-element-border-width);
-  border-color: var(--dodo-ui-TextInput-border-color);
-}
-.dodo-ui-TextInput.focused {
-  border-color: var(--dodo-ui-TextInput-focus-border-color);
-}
-.dodo-ui-TextInput.error {
-  border-color: var(--dodo-ui-TextInput-error-border-color);
-}
-.dodo-ui-TextInput.disabled {
-  cursor: initial;
-  background-color: var(--dodo-ui-TextInput-disabled-bg);
-  color: var(--dodo-ui-TextInput-disabled-color);
-  border-color: var(--dodo-ui-TextInput-disabled-bg);
-}
-.dodo-ui-TextInput .content--after:empty, .dodo-ui-TextInput .content--before:empty {
-  display: none;
-}
-.dodo-ui-TextInput .content--after, .dodo-ui-TextInput .content--before {
-  display: inline-flex;
-  height: 100%;
-  align-items: center;
-}
-.dodo-ui-TextInput.size--normal {
-  height: var(--dodo-ui-element-height-normal);
-}
 .dodo-ui-TextInput.size--normal input {
   font-size: 1rem;
   padding: 0 12px;
 }
-.dodo-ui-TextInput.size--normal .content--before {
-  margin-left: 12px;
-  margin-right: -4px;
-}
-.dodo-ui-TextInput.size--normal .content--after {
-  margin-right: 12px;
-  margin-left: -4px;
-}
-.dodo-ui-TextInput.size--small {
-  height: var(--dodo-ui-element-height-small);
-}
 .dodo-ui-TextInput.size--small input {
   padding: 0 8px;
   font-size: 0.9rem;
 }
-.dodo-ui-TextInput.size--small .content--before {
-  margin-left: 8px;
-  margin-right: -2px;
-}
-.dodo-ui-TextInput.size--small .content--after {
-  margin-right: 8px;
-  margin-left: -2px;
-}
-.dodo-ui-TextInput.size--large {
-  height: var(--dodo-ui-element-height-large);
-}
 .dodo-ui-TextInput.size--large input {
   font-size: 1.1rem;
   padding: 0 14px;
-}
-.dodo-ui-TextInput.size--large .content--before {
-  margin-left: 14px;
-  margin-right: -4px;
-}
-.dodo-ui-TextInput.size--large .content--after {
-  margin-right: 14px;
-  margin-left: -4px;
-}
-.dodo-ui-TextInput.roundness--1x {
-  border-radius: var(--dodo-ui-element-roundness-1x);
-}
-.dodo-ui-TextInput.roundness--2x {
-  border-radius: var(--dodo-ui-element-roundness-2x);
-}
-.dodo-ui-TextInput.roundness--3x {
-  border-radius: var(--dodo-ui-element-roundness-3x);
 }</style>

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

@@ -1,4 +1,3 @@
-export type TextInputRoundness = ComponentRoundness | false;
 export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
 export type TextInputFocusEvent = FocusEvent & {
     currentTarget: EventTarget & HTMLInputElement;
@@ -17,7 +16,7 @@ interface TextInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: TextInputRoundness;
+    roundness?: ComponentRoundness | false;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */

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

@@ -0,0 +1,34 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import InputEnclosure from './InputEnclosure.svelte';
+export const storyInputEnclosureArgTypes = {
+    roundness: {
+        control: { type: 'select' },
+        options: [false, '1x', '2x', '3x'],
+    },
+    size: {
+        control: { type: 'select' },
+        options: ['normal', 'small', 'large'],
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: InputEnclosure,
+    tags: ['autodocs'],
+    argTypes: storyInputEnclosureArgTypes,
+});
+</script>
+
+<!-- An ensloure for Form Inputs [TextInput](?path=/docs/components-form-textinput--docs) -->
+<Story name="Default" />
+
+<Story name="Focused" args={{ focused: true }} />
+
+<Story name="Error" args={{ error: true }} />
+
+<Story name="Disabled" args={{ disabled: true }} />
+
+<Story name="Input example">
+  <InputEnclosure>
+    <input type="text" style="flex: 1; border: 0;" placeholder="Enter name" />
+  </InputEnclosure>
+</Story>

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

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

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

@@ -0,0 +1,120 @@
+<script lang="ts">let { size = 'normal', roundness = '1x', outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
+export {};
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-InputEnclosure', `size--${size}`, `roundness--${roundness}`, className].join(
+    ' ',
+  )}
+  bind:this={ref}
+>
+  {#if before}
+    <span class="content--before">
+      {@render before()}
+    </span>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</div>
+
+<style>:global(:root) {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-500);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-200);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-600);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-500);
+}
+
+.dodo-ui-InputEnclosure {
+  display: flex;
+  overflow: hidden;
+  color: var(--dodo-color-default-800);
+  transition: all 150ms;
+  border: 0;
+}
+.dodo-ui-InputEnclosure.outline {
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: var(--dodo-ui-InputEnclosure-border-color);
+}
+.dodo-ui-InputEnclosure.focused {
+  border-color: var(--dodo-ui-InputEnclosure-focus-border-color);
+}
+.dodo-ui-InputEnclosure.error {
+  border-color: var(--dodo-ui-InputEnclosure-error-border-color);
+}
+.dodo-ui-InputEnclosure.disabled {
+  cursor: initial;
+  background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+  color: var(--dodo-ui-InputEnclosure-disabled-color);
+  border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+}
+.dodo-ui-InputEnclosure .content--after:empty, .dodo-ui-InputEnclosure .content--before:empty {
+  display: none;
+}
+.dodo-ui-InputEnclosure .content--after, .dodo-ui-InputEnclosure .content--before {
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+}
+.dodo-ui-InputEnclosure.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-InputEnclosure.size--normal .content--before {
+  margin-left: 12px;
+  margin-right: -4px;
+}
+.dodo-ui-InputEnclosure.size--normal .content--after {
+  margin-right: 12px;
+  margin-left: -4px;
+}
+.dodo-ui-InputEnclosure.size--small {
+  height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-InputEnclosure.size--small .content--before {
+  margin-left: 8px;
+  margin-right: -2px;
+}
+.dodo-ui-InputEnclosure.size--small .content--after {
+  margin-right: 8px;
+  margin-left: -2px;
+}
+.dodo-ui-InputEnclosure.size--large {
+  height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-InputEnclosure.size--large .content--before {
+  margin-left: 14px;
+  margin-right: -4px;
+}
+.dodo-ui-InputEnclosure.size--large .content--after {
+  margin-right: 14px;
+  margin-left: -4px;
+}
+.dodo-ui-InputEnclosure.roundness--1x {
+  border-radius: var(--dodo-ui-element-roundness-1x);
+}
+.dodo-ui-InputEnclosure.roundness--2x {
+  border-radius: var(--dodo-ui-element-roundness-2x);
+}
+.dodo-ui-InputEnclosure.roundness--3x {
+  border-radius: var(--dodo-ui-element-roundness-3x);
+}</style>