@casinogate/ui 1.10.18 → 1.11.0

package/dist/assets/css/root.css

@@ -182,6 +182,9 @@
   .cgui\:pointer-events-none {
     pointer-events: none;
   }
+  .cgui\:invisible {
+    visibility: hidden;
+  }
   .cgui\:absolute {
     position: absolute;
   }
@@ -239,6 +242,9 @@
   .cgui\:z-1 {
     z-index: 1;
   }
+  .cgui\:z-5 {
+    z-index: 5;
+  }
   .cgui\:\!m-0 {
     margin: calc(var(--cgui-spacing) * 0) !important;
   }
@@ -311,6 +317,9 @@
       display: none;
     }
   }
+  .cgui\:block {
+    display: block;
+  }
   .cgui\:flex {
     display: flex;
   }
@@ -323,6 +332,9 @@
   .cgui\:inline-flex {
     display: inline-flex;
   }
+  .cgui\:aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .cgui\:size-1\/2 {
     width: calc(1 / 2 * 100%);
     height: calc(1 / 2 * 100%);
@@ -382,6 +394,12 @@
   .cgui\:h-1\.5 {
     height: calc(var(--cgui-spacing) * 1.5);
   }
+  .cgui\:h-2 {
+    height: calc(var(--cgui-spacing) * 2);
+  }
+  .cgui\:h-2\.5 {
+    height: calc(var(--cgui-spacing) * 2.5);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -436,6 +454,9 @@
   .cgui\:h-34 {
     height: calc(var(--cgui-spacing) * 34);
   }
+  .cgui\:h-100 {
+    height: calc(var(--cgui-spacing) * 100);
+  }
   .cgui\:h-120 {
     height: calc(var(--cgui-spacing) * 120);
   }
@@ -478,18 +499,27 @@
   .cgui\:min-h-11 {
     min-height: calc(var(--cgui-spacing) * 11);
   }
+  .cgui\:min-h-\[1lh\] {
+    min-height: 1lh;
+  }
   .cgui\:w-\(--app-shell-sidebar-width\) {
     width: var(--app-shell-sidebar-width);
   }
   .cgui\:w-1\.5 {
     width: calc(var(--cgui-spacing) * 1.5);
   }
+  .cgui\:w-2 {
+    width: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:w-2\.5 {
     width: calc(var(--cgui-spacing) * 2.5);
   }
   .cgui\:w-3 {
     width: calc(var(--cgui-spacing) * 3);
   }
+  .cgui\:w-3\.5 {
+    width: calc(var(--cgui-spacing) * 3.5);
+  }
   .cgui\:w-4 {
     width: calc(var(--cgui-spacing) * 4);
   }
@@ -559,6 +589,9 @@
   .cgui\:max-w-80 {
     max-width: calc(var(--cgui-spacing) * 80);
   }
+  .cgui\:max-w-84 {
+    max-width: calc(var(--cgui-spacing) * 84);
+  }
   .cgui\:max-w-100 {
     max-width: calc(var(--cgui-spacing) * 100);
   }
@@ -616,6 +649,9 @@
   .cgui\:grow {
     flex-grow: 1;
   }
+  .cgui\:basis-1\/2 {
+    flex-basis: calc(1 / 2 * 100%);
+  }
   .cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
     transform-origin: var(--bits-dropdown-menu-content-transform-origin);
   }
@@ -742,6 +778,12 @@
       margin-block-end: calc(calc(var(--cgui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .cgui\:gap-x-3 {
+    column-gap: calc(var(--cgui-spacing) * 3);
+  }
+  .cgui\:gap-x-4 {
+    column-gap: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -810,6 +852,14 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .cgui\:border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
+  .cgui\:border-5 {
+    border-style: var(--tw-border-style);
+    border-width: 5px;
+  }
   .cgui\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -847,6 +897,9 @@
   .cgui\:border-stroke-error {
     border-color: var(--cg-ui-color-stroke-error);
   }
+  .cgui\:border-stroke-focus {
+    border-color: var(--cg-ui-color-stroke-focus);
+  }
   .cgui\:border-stroke-primary {
     border-color: var(--cg-ui-color-stroke-primary);
   }
@@ -922,6 +975,12 @@
   .cgui\:bg-surface-darkest {
     background-color: var(--cg-ui-color-surface-darkest);
   }
+  .cgui\:bg-surface-darkest\/50 {
+    background-color: var(--cg-ui-color-surface-darkest);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-surface-darkest) 50%, transparent);
+    }
+  }
   .cgui\:bg-surface-hover {
     background-color: var(--cg-ui-color-surface-hover);
   }
@@ -946,6 +1005,12 @@
   .cgui\:bg-surface-primary {
     background-color: var(--cg-ui-color-surface-primary);
   }
+  .cgui\:bg-surface-primary-active {
+    background-color: var(--cg-ui-color-surface-primary-active);
+  }
+  .cgui\:bg-surface-primary-light {
+    background-color: var(--cg-ui-color-surface-primary-light);
+  }
   .cgui\:bg-surface-primary-light-active {
     background-color: var(--cg-ui-color-surface-primary-light-active);
   }
@@ -1231,6 +1296,9 @@
   .cgui\:underline {
     text-decoration-line: underline;
   }
+  .cgui\:opacity-0 {
+    opacity: 0%;
+  }
   .cgui\:opacity-50 {
     opacity: 50%;
   }
@@ -1258,6 +1326,10 @@
     --tw-shadow: var(--cg-ui-shadow-select);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:shadow-thumb {
+    --tw-shadow: var(--cg-ui-shadow-thumb);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-toast {
     --tw-shadow: var(--cg-ui-shadow-toast);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1293,6 +1365,11 @@
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
@@ -1522,6 +1599,13 @@
       }
     }
   }
+  .cgui\:hover\:text-fg-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-fg-white);
+      }
+    }
+  }
   .cgui\:hover\:text-primary-60 {
     &:hover {
       @media (hover: hover) {
@@ -1563,6 +1647,16 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .cgui\:focus-visible\:outline-hidden {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
   .cgui\:active\:scale-95 {
     &:active {
       --tw-scale-x: 95%;
@@ -1626,6 +1720,11 @@
       color: var(--cg-ui-color-fg-primary);
     }
   }
+  .cgui\:data-active\:scale-\[0\.98\] {
+    &[data-active] {
+      scale: 0.98;
+    }
+  }
   .cgui\:data-highlighted\:bg-surface-lightest {
     &[data-highlighted] {
       background-color: var(--cg-ui-color-surface-lightest);
@@ -1636,6 +1735,16 @@
       color: var(--cg-ui-color-fg-primary);
     }
   }
+  .cgui\:data-\[active\]\:bg-surface-dark {
+    &[data-active] {
+      background-color: var(--cg-ui-color-surface-dark);
+    }
+  }
+  .cgui\:data-\[active\]\:text-fg-white {
+    &[data-active] {
+      color: var(--cg-ui-color-fg-white);
+    }
+  }
   .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
     &[data-active=""] {
       background-color: var(--cg-ui-color-surface-white);
@@ -1727,11 +1836,71 @@
       padding-inline-start: calc(var(--cgui-spacing) * 8);
     }
   }
+  .cgui\:data-\[invalid\]\:visible {
+    &[data-invalid] {
+      visibility: visible;
+    }
+  }
+  .cgui\:data-\[invalid\]\:opacity-100 {
+    &[data-invalid] {
+      opacity: 100%;
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-2 {
+    &[data-orientation="horizontal"] {
+      height: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-2\.5 {
+    &[data-orientation="horizontal"] {
+      height: calc(var(--cgui-spacing) * 2.5);
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-3\.5 {
+    &[data-orientation="horizontal"] {
+      height: calc(var(--cgui-spacing) * 3.5);
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-full {
+    &[data-orientation="horizontal"] {
+      height: 100%;
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:w-\[1px\] {
+    &[data-orientation="horizontal"] {
+      width: 1px;
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:h-\[1px\] {
+    &[data-orientation="vertical"] {
+      height: 1px;
+    }
+  }
   .cgui\:data-\[orientation\=vertical\]\:h-auto {
     &[data-orientation="vertical"] {
       height: auto;
     }
   }
+  .cgui\:data-\[orientation\=vertical\]\:w-2 {
+    &[data-orientation="vertical"] {
+      width: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-2\.5 {
+    &[data-orientation="vertical"] {
+      width: calc(var(--cgui-spacing) * 2.5);
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-3\.5 {
+    &[data-orientation="vertical"] {
+      width: calc(var(--cgui-spacing) * 3.5);
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-full {
+    &[data-orientation="vertical"] {
+      width: 100%;
+    }
+  }
   .cgui\:data-\[placeholder\]\:text-fg-regular {
     &[data-placeholder] {
       color: var(--cg-ui-color-fg-regular);
@@ -2097,6 +2266,11 @@
       height: calc(var(--cgui-spacing) * 4);
     }
   }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]\[data-active\]\]\:bg-transparent {
+    & [data-slot="trigger"][data-active] {
+      background-color: transparent;
+    }
+  }
   .cgui\:hover\:\[\&_\[data-slot\=icon\]\]\:text-icon-focus {
     &:hover {
       @media (hover: hover) {
@@ -2513,6 +2687,7 @@
   --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
   --cg-ui-shadow-select: var(--cg-ui-shadow-base);
   --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --cg-ui-shadow-thumb: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 2px 8px rgba(0, 0, 0, 0.25);
   --cg-ui-fz-base: 16;
   --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);

package/dist/assets/css/tailwind/theme.css

@@ -135,6 +135,7 @@
   --shadow-select: var(--cg-ui-shadow-select);
   --shadow-dialog: var(--cg-ui-shadow-dialog);
   --shadow-dropdown: var(--cg-ui-shadow-dropdown);
+  --shadow-thumb: var(--cg-ui-shadow-thumb);
 
   /* -------------------------------------------------------------------------
        Typography

package/dist/assets/css/theme.css

@@ -62,6 +62,9 @@
   --cg-ui-shadow-select: var(--cg-ui-shadow-base);
   --cg-ui-shadow-command: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --cg-ui-shadow-thumb:
+    rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
+    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;
@@ -311,6 +314,7 @@
   --shadow-select: var(--cg-ui-shadow-select);
   --shadow-dialog: var(--cg-ui-shadow-dialog);
   --shadow-dropdown: var(--cg-ui-shadow-dropdown);
+  --shadow-thumb: var(--cg-ui-shadow-thumb);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);

package/dist/assets/css/tokens/primitives.css

@@ -76,6 +76,7 @@
   --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
   --cg-ui-shadow-select: var(--cg-ui-shadow-base);
   --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --cg-ui-shadow-thumb: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 2px 8px rgba(0, 0, 0, 0.25);
 
   /* -------------------------------------------------------------------------
        Typography

package/dist/components/field/components/field.description.svelte

@@ -2,7 +2,7 @@
   import { cn, useId } from '../../../internal/utils/common.js';
 
   import { box, mergeProps } from 'svelte-toolbelt';
-  import { FieldStylesContext } from '../styles.js';
+  import { fieldDescriptionVariants } from '../styles.js';
   import type { FieldDescriptionProps } from '../types.js';
   import { FieldDescriptionState } from './field.svelte.js';
 
@@ -17,8 +17,6 @@
     ...restProps
   }: FieldDescriptionProps = $props();
 
-  const styles = FieldStylesContext.get();
-
   const descriptionState = FieldDescriptionState.create({
     ref: box.with(
       () => ref,
@@ -28,7 +26,7 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, descriptionState.props, { class: cn(styles.current.description(), className) })
+    mergeProps(restProps, descriptionState.props, { class: cn(fieldDescriptionVariants({}), className) })
   );
 </script>
 

package/dist/components/field/components/field.error.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { FieldStylesContext } from '../styles.js';
   import type { FieldErrorProps } from '../types.js';
   import { FieldErrorState } from './field.svelte.js';
 
+  import { fieldErrorVariants } from '../styles.js';
+
   import { box, mergeProps } from 'svelte-toolbelt';
 
   const uid = $props.id();
@@ -17,8 +18,6 @@
     ...restProps
   }: FieldErrorProps = $props();
 
-  const styles = FieldStylesContext.get();
-
   const errorState = FieldErrorState.create({
     ref: box.with(
       () => ref,
@@ -28,16 +27,14 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, errorState.props, { class: cn(styles.current.error(), className) })
+    mergeProps(restProps, errorState.props, { class: cn(fieldErrorVariants({}), className) })
   );
 </script>
 
-{#if errorState.root.opts.invalid.current}
-  {#if child}
-    {@render child({ props: mergedProps })}
-  {:else}
-    <span {...mergedProps}>
-      {@render children?.()}
-    </span>
-  {/if}
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
 {/if}

package/dist/components/field/components/field.label.svelte

@@ -2,7 +2,7 @@
   import type { FieldLabelProps } from '../types.js';
   import { FieldLabelState } from './field.svelte.js';
 
-  import { FieldStylesContext } from '../styles.js';
+  import { fieldLabelVariants } from '../styles.js';
 
   import { cn, useId } from '../../../internal/utils/common.js';
 
@@ -19,8 +19,6 @@
     ...restProps
   }: FieldLabelProps = $props();
 
-  const styles = FieldStylesContext.get();
-
   const labelState = FieldLabelState.create({
     ref: box.with(
       () => ref,
@@ -30,7 +28,7 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, labelState.props, { class: cn(styles.current.label(), className) })
+    mergeProps(restProps, labelState.props, { class: cn(fieldLabelVariants({}), className) })
   );
 </script>
 

package/dist/components/field/components/field.root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps } from 'svelte-toolbelt';
-  import { fieldStyles, FieldStylesContext } from '../styles.js';
+  import { fieldRootVariants } from '../styles.js';
   import type { FieldRootProps } from '../types.js';
   import { FieldRootState } from './field.svelte.js';
 
@@ -32,11 +32,7 @@
     required: box.with(() => required),
   });
 
-  const variants = $derived(fieldStyles());
-
-  FieldStylesContext.set(box.with(() => variants));
-
-  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(fieldRootVariants({}), className) }));
 
   const attrStates = $derived({
     invalid: rootState.opts.invalid.current,

package/dist/components/field/components/field.svelte.d.ts

@@ -52,6 +52,7 @@ export declare class FieldErrorState {
     constructor(opts: FieldErrorStateOpts, root: FieldRootState);
     readonly props: {
         readonly id: string;
+        readonly 'data-invalid': "" | undefined;
         readonly "data-slot": "field-error";
     };
 }

package/dist/components/field/components/field.svelte.js

@@ -1,5 +1,5 @@
 import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
-import { getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
+import { boolAttr, getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
 import { Context } from 'runed';
 import { untrack } from 'svelte';
 import { attachRef } from 'svelte-toolbelt';
@@ -81,6 +81,7 @@ export class FieldErrorState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
+        'data-invalid': boolAttr(this.root.opts.invalid.current),
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.error,
         ...this.attachment,
     }));

package/dist/components/field/components/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Control } from './field.control.svelte';
+export { default as Description } from './field.description.svelte';
+export { default as Error } from './field.error.svelte';
+export { default as Label } from './field.label.svelte';
+export { default as Root } from './field.root.svelte';

package/dist/components/field/components/index.js

@@ -0,0 +1,5 @@
+export { default as Control } from './field.control.svelte';
+export { default as Description } from './field.description.svelte';
+export { default as Error } from './field.error.svelte';
+export { default as Label } from './field.label.svelte';
+export { default as Root } from './field.root.svelte';

package/dist/components/field/composed/basic/basic.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import * as Primitive from '../../components/index.js';
+
+  import type { FieldProps } from '../../types.js';
+
+  let {
+    label,
+    error,
+    description,
+    ref = $bindable(null),
+    children: childrenSnippet,
+    ...restProps
+  }: FieldProps = $props();
+</script>
+
+<Primitive.Root bind:ref {...restProps}>
+  {#if typeof label === 'string'}
+    <Primitive.Label>{label}</Primitive.Label>
+  {:else}
+    {@render label?.()}
+  {/if}
+
+  <Primitive.Control>
+    {#snippet children({ props })}
+      {@render childrenSnippet?.({ props })}
+    {/snippet}
+  </Primitive.Control>
+
+  {#if typeof description === 'string'}
+    <Primitive.Description>{description}</Primitive.Description>
+  {:else}
+    {@render description?.()}
+  {/if}
+
+  {#if typeof error === 'string'}
+    <Primitive.Error>{error}</Primitive.Error>
+  {:else}
+    {@render error?.()}
+  {/if}
+</Primitive.Root>

package/dist/components/field/composed/basic/basic.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldProps } from '../../types.js';
+declare const Basic: import("svelte").Component<FieldProps, {}, "ref">;
+type Basic = ReturnType<typeof Basic>;
+export default Basic;

package/dist/components/field/composed/basic/index.d.ts

@@ -0,0 +1 @@
+export { default as Basic } from './basic.svelte';

package/dist/components/field/composed/basic/index.js

@@ -0,0 +1 @@
+export { default as Basic } from './basic.svelte';

package/dist/components/field/composed/index.d.ts

@@ -0,0 +1 @@
+export * from './basic/index.js';

package/dist/components/field/composed/index.js

@@ -0,0 +1 @@
+export * from './basic/index.js';

package/dist/components/field/field.svelte

@@ -30,15 +30,15 @@
     {/snippet}
   </FieldControl>
 
-  {#if typeof error === 'string'}
-    <FieldError>{error}</FieldError>
-  {:else}
-    {@render error?.()}
-  {/if}
-
   {#if typeof description === 'string'}
     <FieldDescription>{description}</FieldDescription>
   {:else}
     {@render description?.()}
   {/if}
+
+  {#if typeof error === 'string'}
+    <FieldError>{error}</FieldError>
+  {:else}
+    {@render error?.()}
+  {/if}
 </FieldRoot>

package/dist/components/field/index.d.ts

@@ -1,3 +1,3 @@
-export * as FieldPrimitive from './exports-primitive.js';
-export * from './exports.js';
+export * as FieldPrimitive from './components/index.js';
+export * as Field from './composed/index.js';
 export type { FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldProps, FieldRootProps, } from './types.js';

package/dist/components/field/index.js

@@ -1,2 +1,2 @@
-export * as FieldPrimitive from './exports-primitive.js';
-export * from './exports.js';
+export * as FieldPrimitive from './components/index.js';
+export * as Field from './composed/index.js';