@casinogate/ui 1.11.14 → 2.0.1

package/dist/composed/select/types.d.ts

@@ -0,0 +1,89 @@
+import type { SelectContentProps, SelectTriggerProps } from '../../primitives/select/types.js';
+import type { SelectMultipleRootProps, SelectSingleRootProps } from 'bits-ui';
+import type { Component, Snippet } from 'svelte';
+export type SelectItem = {
+    value: string;
+    label: string;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+    disabled?: boolean;
+    textValue?: string;
+    group?: string;
+};
+export type SelectGroup = {
+    key: string;
+    label?: string;
+    order?: number;
+};
+type SelectItemSnippetArgs<TItem extends SelectItem> = {
+    item: TItem;
+    props: Record<string, unknown>;
+    selected: boolean;
+    highlighted: boolean;
+};
+type SelectTriggerSnippetArgs<TItem extends SelectItem> = {
+    props: Record<string, unknown>;
+    label: string;
+    selectedItems: TItem[];
+};
+type SelectLabelSnippetArgs<TItem extends SelectItem> = {
+    placeholder: string;
+    value: string | string[];
+    selectedItems: TItem[];
+};
+type SelectSharedProps<TItem extends SelectItem> = {
+    items?: TItem[];
+    groups?: SelectGroup[];
+    placeholder?: string;
+    item?: Snippet<[SelectItemSnippetArgs<TItem>]>;
+    trigger?: Snippet<[SelectTriggerSnippetArgs<TItem>]>;
+    label?: Snippet<[SelectLabelSnippetArgs<TItem>]>;
+    empty?: Snippet | string;
+    clearable?: boolean;
+    contentProps?: Omit<SelectContentProps, 'class' | 'children' | 'child' | 'ref'>;
+    contentRef?: HTMLDivElement | null;
+    contentClass?: string;
+    triggerClass?: string;
+    triggerProps?: Omit<SelectTriggerProps, 'class' | 'children' | 'child' | 'ref'>;
+    disabledPortal?: boolean;
+};
+export type SelectSingleProps<TItem extends SelectItem = SelectItem> = Omit<SelectSingleRootProps, 'value' | 'onValueChange'> & SelectSharedProps<TItem> & {
+    value?: string;
+    onSelect?: (value: string, item: TItem | null) => void;
+};
+export type SelectMultipleProps<TItem extends SelectItem = SelectItem> = Omit<SelectMultipleRootProps, 'value' | 'onValueChange'> & SelectSharedProps<TItem> & {
+    value?: string[];
+    onSelect?: (value: string[], item: TItem | null) => void;
+};
+export type SelectProps<TItem extends SelectItem = SelectItem> = SelectSingleProps<TItem> | SelectMultipleProps<TItem>;
+export type SelectAsyncCallbackParams = {
+    page: number;
+    pageSize: number;
+};
+export type SelectAsyncCallbackResult<TItem extends SelectItem = SelectItem> = {
+    items: TItem[];
+    hasMore: boolean;
+};
+export type SelectAsyncCallback<TItem extends SelectItem = SelectItem> = (params: SelectAsyncCallbackParams) => Promise<SelectAsyncCallbackResult<TItem>>;
+type SelectAsyncSharedProps<TItem extends SelectItem> = Omit<SelectSharedProps<TItem>, 'items'> & {
+    loading?: Snippet;
+    pageSize?: number;
+    callback: SelectAsyncCallback<TItem>;
+    initialItems?: TItem[];
+    loadImmediate?: boolean;
+    dependsOn?: () => unknown;
+    clearOnDependencyChange?: boolean;
+    onChangeDependency?: (value: unknown) => void;
+};
+export type SelectAsyncSingleProps<TItem extends SelectItem = SelectItem> = Omit<SelectSingleRootProps, 'value' | 'onValueChange'> & SelectAsyncSharedProps<TItem> & {
+    value?: string;
+    onSelect?: (value: string, item: TItem | null) => void;
+};
+export type SelectAsyncMultipleProps<TItem extends SelectItem = SelectItem> = Omit<SelectMultipleRootProps, 'value' | 'onValueChange'> & SelectAsyncSharedProps<TItem> & {
+    value?: string[];
+    onSelect?: (value: string[], item: TItem | null) => void;
+};
+export type SelectAsyncProps<TItem extends SelectItem = SelectItem> = SelectAsyncSingleProps<TItem> | SelectAsyncMultipleProps<TItem>;
+export {};

package/dist/composed/select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/composed/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * as Slider from './root/index.js';
+export type * from './types.js';

package/dist/composed/slider/index.js

@@ -0,0 +1 @@
+export * as Slider from './root/index.js';

package/dist/composed/slider/root/index.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './slider.root.svelte';

package/dist/composed/slider/root/index.js

@@ -0,0 +1 @@
+export { default as Root } from './slider.root.svelte';

package/dist/composed/slider/root/slider.root.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import * as SliderPrimitive from '../../../primitives/slider/components/index.js';
+  import type { SliderRootProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = 'horizontal',
+    size = 'default',
+    disabled = false,
+    showTicks = false,
+    class: className,
+    ...restProps
+  }: SliderRootProps = $props();
+</script>
+
+<SliderPrimitive.Root
+  bind:ref
+  bind:value={value as never}
+  {orientation}
+  {size}
+  {disabled}
+  class={className}
+  {...restProps}
+>
+  {#snippet children({ thumbItems, tickItems })}
+    <SliderPrimitive.Track>
+      <SliderPrimitive.Range />
+    </SliderPrimitive.Track>
+
+    {#each thumbItems as { index } (index)}
+      <SliderPrimitive.Thumb {index} />
+    {/each}
+
+    {#if showTicks}
+      {#each tickItems as { index } (index)}
+        <SliderPrimitive.Tick {index} />
+      {/each}
+    {/if}
+  {/snippet}
+</SliderPrimitive.Root>

package/dist/composed/slider/root/slider.root.svelte.d.ts

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

package/dist/composed/slider/types.d.ts

@@ -0,0 +1,5 @@
+import type { SliderPrimitiveRootProps } from '../../primitives/slider/types.js';
+import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
+export type SliderRootProps = WithoutChildrenOrChild<SliderPrimitiveRootProps> & {
+    showTicks?: boolean;
+};

package/dist/composed/slider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/composed/switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './root/index.js';
+export type * from './types.js';

package/dist/composed/switch/index.js

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

package/dist/composed/switch/root/index.d.ts

@@ -0,0 +1 @@
+export { default as Switch } from './switch.root.svelte';

package/dist/composed/switch/root/index.js

@@ -0,0 +1 @@
+export { default as Switch } from './switch.root.svelte';

package/dist/composed/switch/root/switch.root.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import * as Primitive from '../../../primitives/switch/components/index.js';
+  import type { SwitchProps } from '../types.js';
+
+  let { ref = $bindable(null), checked = $bindable(false), ...restProps }: SwitchProps = $props();
+</script>
+
+<Primitive.Root bind:ref bind:checked {...restProps}>
+  <Primitive.Thumb />
+</Primitive.Root>

package/dist/composed/switch/root/switch.root.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Switch: import("svelte").Component<import("../../../primitives/index.js").SwitchRootProps, {}, "checked" | "ref">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/composed/switch/types.d.ts

@@ -0,0 +1,2 @@
+import type { SwitchRootProps } from '../../primitives/switch/types.js';
+export type SwitchProps = SwitchRootProps;

package/dist/composed/switch/types.js

@@ -0,0 +1 @@
+export {};

package/dist/composed/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * as Toast from './root/index.js';
+export type * from './types.js';

package/dist/composed/toast/index.js

@@ -0,0 +1 @@
+export * as Toast from './root/index.js';

package/dist/composed/toast/root/index.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './toast.root.svelte';

package/dist/composed/toast/root/index.js

@@ -0,0 +1 @@
+export { default as Root } from './toast.root.svelte';

package/dist/composed/toast/root/toast.root.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import * as ToastPrimitive from '../../../primitives/toast/components/index.js';
+  import type { ToastRootProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    variant = 'info',
+    rounded = 'xs',
+    hasIcon = true,
+    title,
+    description,
+    icon,
+    onClose,
+    class: className,
+    ...restProps
+  }: ToastRootProps = $props();
+</script>
+
+<ToastPrimitive.Root bind:ref {variant} {rounded} {hasIcon} class={className} {...restProps}>
+  <ToastPrimitive.Icon {icon} />
+
+  <ToastPrimitive.Body>
+    {#if title}
+      <ToastPrimitive.Title>
+        {#if typeof title === 'string'}
+          {title}
+        {:else}
+          {@render title()}
+        {/if}
+      </ToastPrimitive.Title>
+    {/if}
+
+    {#if description}
+      <ToastPrimitive.Description>
+        {#if typeof description === 'string'}
+          {description}
+        {:else}
+          {@render description()}
+        {/if}
+      </ToastPrimitive.Description>
+    {/if}
+  </ToastPrimitive.Body>
+
+  {#if onClose}
+    <ToastPrimitive.Close onclick={onClose} />
+  {/if}
+</ToastPrimitive.Root>

package/dist/composed/toast/root/toast.root.svelte.d.ts

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

package/dist/composed/toast/types.d.ts

@@ -0,0 +1,14 @@
+import type { ToastPrimitiveRootVariants } from '../../primitives/toast/styles.js';
+import type { Without } from '../../internal/types/common.js';
+import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
+import type { Snippet } from 'svelte';
+import type { WithElementRef } from 'svelte-toolbelt';
+type ToastRootPropsWithoutHTML = WithElementRef<{
+    title?: string | Snippet;
+    description?: string | Snippet;
+    icon?: Snippet;
+    onClose?: () => void;
+    hasIcon?: boolean;
+}> & ToastPrimitiveRootVariants;
+export type ToastRootProps = ToastRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ToastRootPropsWithoutHTML>;
+export {};

package/dist/composed/toast/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/utils/common.d.ts

@@ -1,5 +1,4 @@
-import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
+export { cn } from './tailwindcss.js';
 export declare function noop(): void;
 export declare function noopPromise(): Promise<any>;
 export declare const atom: <T>(factory: () => T) => T;

package/dist/internal/utils/common.js

@@ -1,9 +1,5 @@
 import { useId as useIdBitsUI } from 'bits-ui';
-import { clsx } from 'clsx';
-import { twMerge } from './tailwindcss.js';
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
+export { cn } from './tailwindcss.js';
 export function noop() { }
 export async function noopPromise() { }
 export const atom = (factory) => factory();

package/dist/internal/utils/extract.d.ts

@@ -0,0 +1,3 @@
+import type { MaybeGetter } from 'svelte-toolbelt';
+export declare function extract<T>(value: MaybeGetter<T>): T;
+export declare function extract<T>(value: MaybeGetter<T | undefined>, defaultValue: T): T;

package/dist/internal/utils/extract.js

@@ -0,0 +1,17 @@
+import { isGetter } from './is.js';
+/**
+ * Extracts the value from a getter or a value.
+ * Optionally, a default value can be provided.
+ */
+export function extract(value, defaultValue) {
+    if (isGetter(value)) {
+        const getter = value;
+        const gotten = getter();
+        if (gotten === undefined)
+            return defaultValue;
+        return gotten;
+    }
+    if (value === undefined)
+        return defaultValue;
+    return value;
+}

package/dist/internal/utils/is.d.ts

@@ -0,0 +1,2 @@
+export declare function isFunction(value: unknown): value is (...args: unknown[]) => unknown;
+export declare function isGetter(value: unknown): value is () => unknown;

package/dist/internal/utils/is.js

@@ -0,0 +1,6 @@
+export function isFunction(value) {
+    return typeof value === 'function';
+}
+export function isGetter(value) {
+    return isFunction(value) && value.length === 0;
+}

package/dist/internal/utils/tailwindcss.d.ts

@@ -1,4 +1,9 @@
-import { type TV } from 'tailwind-variants';
-declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+import type { Without } from 'svelte-toolbelt';
+import type { CnOptions, TV, VariantProps } from 'tailwind-variants';
+export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+export declare function cn(...inputs: CnOptions): string;
 export declare const tv: TV;
-export { twMerge };
+export declare const numberToPx: (value: number) => string;
+export declare const numberToRem: (value: number, base?: number) => string;
+export type WithVariants<TSource extends Record<string, any>, TVariants extends VariantProps<any>> = TSource & Without<TVariants, TSource>;
+export type { VariantProps };

package/dist/internal/utils/tailwindcss.js

@@ -1,66 +1,160 @@
 import { extendTailwindMerge, } from 'tailwind-merge';
-import { tv as tvBase } from 'tailwind-variants';
+import { cx, tv as tvBase } from 'tailwind-variants';
+const colorTokens = [
+    'primary-100',
+    'primary-80',
+    'primary-60',
+    'primary-40',
+    'primary-10',
+    'neutral-100',
+    'neutral-80',
+    'neutral-60',
+    'neutral-50',
+    'neutral-40',
+    'neutral-20',
+    'neutral-10',
+    'neutral-0',
+    'system-error-100',
+    'system-error-10',
+    'system-warning-100',
+    'system-warning-10',
+    'system-success-100',
+    'system-success-10',
+    'system-info-100',
+    'system-info-10',
+    'fg-darkest',
+    'fg-dark',
+    'fg-medium',
+    'fg-regular',
+    'fg-semilight',
+    'fg-white',
+    'fg-primary',
+    'fg-error',
+    'fg-success',
+    'fg-warning',
+    'bg-white',
+    'bg-main',
+    'bg-dark',
+    'surface-primary',
+    'surface-primary-active',
+    'surface-primary-light',
+    'surface-primary-light-active',
+    'surface-darkest',
+    'surface-dark',
+    'surface-regular',
+    'surface-semilight',
+    'surface-light',
+    'surface-lightest',
+    'surface-white',
+    'surface-hover',
+    'stroke-default',
+    'stroke-minimum',
+    'stroke-focus',
+    'stroke-primary',
+    'stroke-divider',
+    'stroke-error',
+    'icon-regular',
+    'icon-default',
+    'icon-primary',
+    'icon-focus',
+    'icon-white',
+    'state-error',
+    'state-error-light',
+    'state-warning',
+    'state-warning-light',
+    'state-success',
+    'state-success-light',
+    'state-info',
+    'state-info-light',
+];
+const radiusTokens = ['null', 'xxxs', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'xxl', '2xxl', 'max'];
+const blurTokens = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const shadowTokens = [
+    'base',
+    'toast',
+    'switch-thumb',
+    'segment-thumb',
+    'segment-item',
+    'popover',
+    'select',
+    'dialog',
+    'dropdown',
+    'thumb',
+];
+const fontSizeTokens = ['heading', 'heading-2', 'body', 'body-2', 'caption', 'caption-2'];
+const mapTokens = (prefix, tokens) => tokens.map((token) => `${prefix}-${token}`);
+const colorClassGroups = {
+    accent: mapTokens('accent', colorTokens),
+    'bg-color': mapTokens('bg', colorTokens),
+    'border-color': mapTokens('border', colorTokens),
+    'border-color-b': mapTokens('border-b', colorTokens),
+    'border-color-e': mapTokens('border-e', colorTokens),
+    'border-color-l': mapTokens('border-l', colorTokens),
+    'border-color-r': mapTokens('border-r', colorTokens),
+    'border-color-s': mapTokens('border-s', colorTokens),
+    'border-color-t': mapTokens('border-t', colorTokens),
+    'border-color-x': mapTokens('border-x', colorTokens),
+    'border-color-y': mapTokens('border-y', colorTokens),
+    'caret-color': mapTokens('caret', colorTokens),
+    'divide-color': mapTokens('divide', colorTokens),
+    fill: mapTokens('fill', colorTokens),
+    'inset-ring-color': mapTokens('inset-ring', colorTokens),
+    'outline-color': mapTokens('outline', colorTokens),
+    'placeholder-color': mapTokens('placeholder', colorTokens),
+    'ring-color': mapTokens('ring', colorTokens),
+    'ring-offset-color': mapTokens('ring-offset', colorTokens),
+    'shadow-color': mapTokens('shadow', colorTokens),
+    stroke: mapTokens('stroke', colorTokens),
+    'text-color': mapTokens('text', colorTokens),
+    'text-decoration-color': mapTokens('decoration', colorTokens),
+};
+const radiusClassGroups = {
+    rounded: [{ rounded: radiusTokens }],
+    'rounded-b': [{ 'rounded-b': radiusTokens }],
+    'rounded-bl': [{ 'rounded-bl': radiusTokens }],
+    'rounded-br': [{ 'rounded-br': radiusTokens }],
+    'rounded-e': [{ 'rounded-e': radiusTokens }],
+    'rounded-ee': [{ 'rounded-ee': radiusTokens }],
+    'rounded-es': [{ 'rounded-es': radiusTokens }],
+    'rounded-l': [{ 'rounded-l': radiusTokens }],
+    'rounded-r': [{ 'rounded-r': radiusTokens }],
+    'rounded-s': [{ 'rounded-s': radiusTokens }],
+    'rounded-se': [{ 'rounded-se': radiusTokens }],
+    'rounded-ss': [{ 'rounded-ss': radiusTokens }],
+    'rounded-t': [{ 'rounded-t': radiusTokens }],
+    'rounded-tl': [{ 'rounded-tl': radiusTokens }],
+    'rounded-tr': [{ 'rounded-tr': radiusTokens }],
+};
+const themeClassGroups = {
+    ...colorClassGroups,
+    ...radiusClassGroups,
+    blur: mapTokens('blur', blurTokens),
+    'font-size': mapTokens('text', fontSizeTokens),
+    shadow: mapTokens('shadow', shadowTokens),
+};
 const tailwindMergeConfig = {
     prefix: 'cgui:',
     extend: {
-        classGroups: {
-            'font-size': ['text-heading', 'text-heading-2', 'text-body', 'text-body-2', 'text-caption', 'text-caption-2'],
-            rounded: [
-                'rounded-null',
-                'rounded-xxs',
-                'rounded-xs',
-                'rounded-sm',
-                'rounded-md',
-                'rounded-lg',
-                'rounded-xl',
-                'rounded-2xl',
-                'rounded-xxl',
-                'rounded-2xxl',
-                'rounded-max',
-            ],
-            'border-color': [
-                'border-stroke-default',
-                'border-stroke-minimum',
-                'border-stroke-focus',
-                'border-stroke-primary',
-                'border-stroke-divider',
-                'border-stroke-error',
-                'border-state-error',
-                'border-state-error-light',
-                'border-state-warning',
-                'border-state-warning-light',
-                'border-state-success',
-                'border-state-success-light',
-                'border-state-info',
-                'border-state-info-light',
-            ],
-            blur: ['blur-xxs', 'blur-xs', 'blur-sm', 'blur-md', 'blur-lg', 'blur-xl', 'blur-2xl'],
-            shadow: [
-                'shadow-base',
-                'shadow-toast',
-                'shadow-switch-thumb',
-                'shadow-segment-item',
-                'shadow-popover',
-                'shadow-select',
-                'shadow-dialog',
-                'shadow-dropdown',
-            ],
-        },
+        classGroups: themeClassGroups,
     },
 };
-const tvMergeConfig = {
-    classGroups: tailwindMergeConfig.extend?.classGroups,
+const tailwindVariantsMergeConfig = {
+    classGroups: themeClassGroups,
 };
-const twMerge = extendTailwindMerge(tailwindMergeConfig);
+export const twMerge = extendTailwindMerge(tailwindMergeConfig);
+export function cn(...inputs) {
+    return twMerge(cx(...inputs));
+}
 export const tv = (options, config) => tvBase(options, {
     ...config,
     twMerge: config?.twMerge ?? true,
     twMergeConfig: {
         ...config?.twMergeConfig,
         classGroups: {
-            ...tvMergeConfig.classGroups,
+            ...tailwindVariantsMergeConfig.classGroups,
             ...config?.twMergeConfig?.classGroups,
         },
     },
 });
-export { twMerge };
+export const numberToPx = (value) => `${value}px`;
+export const numberToRem = (value, base = 16) => `${value / base}rem`;

package/dist/{components → primitives}/app-shell/components/app-shell.content.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { AppShellStylesContext } from '../styles.js';
-  import type { AppShellContentProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { appShellContentVariants } from '../styles.js';
+  import type { AppShellContentProps } from '../types.js';
   import { AppShellContentState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,15 @@
   }: AppShellContentProps = $props();
 
   const contentState = AppShellContentState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
-
   const mergedProps = $derived(
-    mergeProps(restProps, contentState.props, { class: cn(variants.current.content(), className) })
+    mergeProps(restProps, contentState.props, { class: cn(appShellContentVariants(), className) })
   );
 </script>
 

package/dist/{components → primitives}/app-shell/components/app-shell.header.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { AppShellHeaderProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
-  import { AppShellStylesContext } from '../styles.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { AppShellStylesContext, appShellHeaderVariants } from '../styles.js';
+  import type { AppShellHeaderProps } from '../types.js';
   import { AppShellHeaderState } from './app-shell.svelte.js';
 
   const uid = $props.id();
@@ -17,17 +17,22 @@
   }: AppShellHeaderProps = $props();
 
   const headerState = AppShellHeaderState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
+    id: boxWith(() => id),
   });
 
-  const variants = AppShellStylesContext.get();
+  const styles = AppShellStylesContext.get();
 
   const mergedProps = $derived(
-    mergeProps(restProps, headerState.props, { class: cn(variants.current.header(), className) })
+    mergeProps(restProps, headerState.props, {
+      class: cn(
+        appShellHeaderVariants({ layout: styles.current.layout, withBorder: styles.current.withBorder }),
+        className
+      ),
+    })
   );
 </script>