@casinogate/ui 1.3.7 → 1.5.0

package/dist/components/breadcrumb/components/breadcrumb.page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { BreadcrumbStylesContext } from '../styles.js';
+  import type { BreadcrumbPageProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: BreadcrumbPageProps = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-page"
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={cn(BreadcrumbStylesContext.get().current.page(), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

package/dist/components/breadcrumb/components/breadcrumb.page.svelte.d.ts

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

package/dist/components/breadcrumb/components/breadcrumb.root.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { boxWith } from 'svelte-toolbelt';
+  import { BreadcrumbStylesContext, breadcrumbVariants } from '../styles.js';
+  import type { BreadcrumbRootProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: BreadcrumbRootProps = $props();
+
+  const variants = $derived(breadcrumbVariants());
+
+  BreadcrumbStylesContext.set(boxWith(() => variants));
+</script>
+
+<nav
+  bind:this={ref}
+  data-slot="breadcrumb"
+  class={cn(variants.root(), className)}
+  aria-label="breadcrumb"
+  {...restProps}
+>
+  {@render children?.()}
+</nav>

package/dist/components/breadcrumb/components/breadcrumb.root.svelte.d.ts

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

package/dist/components/breadcrumb/components/breadcrumb.separator.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  // import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { BreadcrumbStylesContext } from '../styles.js';
+  import type { BreadcrumbSeparatorProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: BreadcrumbSeparatorProps = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-separator"
+  role="presentation"
+  aria-hidden="true"
+  class={cn(BreadcrumbStylesContext.get().current.separator(), className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <Icon.Slash width={14} height={14} />
+  {/if}
+</li>

package/dist/components/breadcrumb/components/breadcrumb.separator.svelte.d.ts

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

package/dist/components/breadcrumb/exports-primitive.d.ts

@@ -0,0 +1,6 @@
+export { default as Item } from './components/breadcrumb.item.svelte';
+export { default as Link } from './components/breadcrumb.link.svelte';
+export { default as List } from './components/breadcrumb.list.svelte';
+export { default as Page } from './components/breadcrumb.page.svelte';
+export { default as Root } from './components/breadcrumb.root.svelte';
+export { default as Separator } from './components/breadcrumb.separator.svelte';

package/dist/components/breadcrumb/exports-primitive.js

@@ -0,0 +1,6 @@
+export { default as Item } from './components/breadcrumb.item.svelte';
+export { default as Link } from './components/breadcrumb.link.svelte';
+export { default as List } from './components/breadcrumb.list.svelte';
+export { default as Page } from './components/breadcrumb.page.svelte';
+export { default as Root } from './components/breadcrumb.root.svelte';
+export { default as Separator } from './components/breadcrumb.separator.svelte';

package/dist/components/breadcrumb/exports.d.ts

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

package/dist/components/breadcrumb/exports.js

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

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

@@ -0,0 +1,3 @@
+export * as BreadcrumbPrimitive from './exports-primitive.js';
+export * as Breadcrumb from './exports.js';
+export type { BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbListProps, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbRootProps, BreadcrumbSeparatorProps, } from './types.js';

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,2 @@
+export * as BreadcrumbPrimitive from './exports-primitive.js';
+export * as Breadcrumb from './exports.js';

package/dist/components/breadcrumb/styles.d.ts

@@ -0,0 +1,62 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            page?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            page?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    list: string[];
+    item: string[];
+    separator: string[];
+    link: string[];
+    page: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+            link?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            page?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    list: string[];
+    item: string[];
+    separator: string[];
+    link: string[];
+    page: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string[];
+    list: string[];
+    item: string[];
+    separator: string[];
+    link: string[];
+    page: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type BreadcrumbVariantsProps = VariantProps<typeof breadcrumbVariants>;
+type BreadcrumbStylesContextValues = ReadableBox<ReturnType<typeof breadcrumbVariants>>;
+export declare const BreadcrumbStylesContext: Context<BreadcrumbStylesContextValues>;
+export {};

package/dist/components/breadcrumb/styles.js

@@ -0,0 +1,18 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const breadcrumbVariants = tv({
+    slots: {
+        root: ['cgui:flex cgui:items-center'],
+        list: ['cgui:flex cgui:items-center'],
+        item: ['cgui:text-caption-2'],
+        separator: ['cgui:text-fg-regular cgui:[&>svg]:size-3.5'],
+        link: [
+            'cgui:text-fg-regular cgui:hover:text-fg-darkest',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:truncate',
+        ],
+        page: ['cgui:text-fg-darkest', 'cgui:truncate'],
+    },
+});
+export const BreadcrumbStylesContext = new Context(keyWithPrefix('breadcrumb-styles'));

package/dist/components/breadcrumb/types.d.ts

@@ -0,0 +1,19 @@
+import type { PrimitiveAnchorAttributes, PrimitiveElementAttributes, PrimitiveLiAttributes, PrimitiveOListAttributes, PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChild, WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { BreadcrumbVariantsProps } from './styles.js';
+type BreadcrumbRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & BreadcrumbVariantsProps;
+export type BreadcrumbRootProps = BreadcrumbRootPropsWithoutHTML & Without<PrimitiveElementAttributes, BreadcrumbRootPropsWithoutHTML>;
+type BreadcrumbListPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type BreadcrumbListProps = BreadcrumbListPropsWithoutHTML & Without<PrimitiveOListAttributes, BreadcrumbListPropsWithoutHTML>;
+type BreadcrumbItemPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type BreadcrumbItemProps = BreadcrumbItemPropsWithoutHTML & Without<PrimitiveLiAttributes, BreadcrumbItemPropsWithoutHTML>;
+type BreadcrumbSeparatorPropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type BreadcrumbSeparatorProps = BreadcrumbSeparatorPropsWithoutHTML & Without<PrimitiveLiAttributes, BreadcrumbSeparatorPropsWithoutHTML>;
+type BreadcrumbLinkPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type BreadcrumbLinkProps = BreadcrumbLinkPropsWithoutHTML & Without<PrimitiveAnchorAttributes, BreadcrumbLinkPropsWithoutHTML>;
+type BreadcrumbPagePropsWithoutHTML = WithElementRef<WithChildren<{}>>;
+export type BreadcrumbPageProps = BreadcrumbPagePropsWithoutHTML & Without<PrimitiveSpanAttributes, BreadcrumbPagePropsWithoutHTML>;
+export type BreadcrumbProps = BreadcrumbRootProps & {
+    path: string[] | string;
+};
+export {};

package/dist/components/breadcrumb/types.js

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

package/dist/components/collapsible/components/collapsaible.svelte.d.ts

@@ -41,4 +41,15 @@ export declare class CollapsibleRootState {
         readonly 'data-disabled': "" | undefined;
     };
 }
+export type CollapsibleTriggerStateOpts = WithRefProps<{}>;
+export declare class CollapsibleTriggerState {
+    static create(opts: CollapsibleTriggerStateOpts): CollapsibleTriggerState;
+    readonly opts: CollapsibleTriggerStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: CollapsibleRootState;
+    constructor(opts: CollapsibleTriggerStateOpts, root: CollapsibleRootState);
+    readonly props: {
+        readonly [x: symbol]: (node: HTMLElement) => () => void;
+    };
+}
 export {};

package/dist/components/collapsible/components/collapsaible.svelte.js

@@ -90,3 +90,19 @@ export class CollapsibleRootState {
         ...this.attachment,
     }));
 }
+export class CollapsibleTriggerState {
+    static create(opts) {
+        return new CollapsibleTriggerState(opts, CollapsibleRootContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        ...this.attachment,
+    }));
+}

package/dist/components/collapsible/components/collapsaible.trigger.svelte

@@ -5,6 +5,8 @@
   import { cn, useId } from '../../../internal/utils/common.js';
 
   import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { CollapsibleTriggerState } from './collapsaible.svelte.js';
 
   const uid = $props.id();
 
@@ -18,15 +20,25 @@
     ...restProps
   }: CollapsibleTriggerProps = $props();
 
+  const triggerState = CollapsibleTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
   const styles = CollapsibleStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-<CollapsiblePrimitive.Trigger bind:ref {id} class={cn(styles.current.trigger(), className)} {...restProps}>
-  {#snippet child(childProps)}
+<CollapsiblePrimitive.Trigger bind:ref {id} class={cn(styles.current.trigger(), className)} {...mergedProps}>
+  {#snippet child({ props: childProps })}
     {#if childSnippet}
-      {@render childSnippet?.(childProps)}
+      {@render childSnippet?.({ props: childProps, open: triggerState.root.opts.value.current })}
     {:else}
-      <button {...childProps.props}>
+      <button {...childProps}>
         {#if iconSnippet !== null}
           <span data-slot="icon" class={styles.current.icon()}>
             {#if iconSnippet}
@@ -37,7 +49,7 @@
           </span>
         {/if}
 
-        {@render childrenSnippet?.()}
+        {@render childrenSnippet?.({ open: triggerState.root.opts.value.current })}
       </button>
     {/if}
   {/snippet}

package/dist/components/collapsible/types.d.ts

@@ -1,9 +1,12 @@
 import type { CollapsibleVariantsProps } from './styles.js';
 import { type CollapsibleContentProps as CollapsibleContentPropsPrimitive, type CollapsibleRootProps as CollapsibleRootPropsPrimitive, type CollapsibleTriggerProps as CollapsibleTriggerPropsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
+import type { WithChild, WithoutChild } from 'svelte-toolbelt';
 export type CollapsibleOpenVariant = 'single' | 'multiple';
 export type CollapsibleRootProps = CollapsibleRootPropsPrimitive & CollapsibleVariantsProps;
 export type CollapsibleContentProps = CollapsibleContentPropsPrimitive;
-export type CollapsibleTriggerProps = CollapsibleTriggerPropsPrimitive & {
+export type CollapsibleTriggerProps = WithChild<WithoutChild<CollapsibleTriggerPropsPrimitive> & {
     icon?: Snippet | null;
-};
+}, {
+    open: boolean;
+}>;

package/dist/components/icons/caret-down.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {width} {height} {...props}>
   <path
-    fill="currentColor"
+    fill={color}
     d="m11.36 14.227l-3.199-3.636c-.395-.45-.019-1.091.64-1.091H15.2c.659 0 1.035.641.64 1.09l-3.2 3.637c-.32.364-.959.364-1.279 0"
   />
 </svg>

package/dist/components/icons/caret-up.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {width} {height} {...props}>
   <path
-    fill="currentColor"
+    fill={color}
     d="m11.36 9.773l-3.199 3.636c-.395.45-.019 1.091.64 1.091H15.2c.659 0 1.035-.641.64-1.09l-3.2-3.637c-.32-.364-.959-.364-1.279 0"
   />
 </svg>

package/dist/components/icons/check.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {width} {height} {...props}>
   <path
     d="M8.94964 15.7264L5.6133 12.3865C5.52606 12.298 5.42215 12.2279 5.30761 12.18C5.19307 12.1321 5.07017 12.1074 4.94603 12.1074C4.8219 12.1074 4.699 12.1321 4.58445 12.18C4.46991 12.2279 4.36601 12.298 4.27876 12.3865C4.19046 12.4738 4.12034 12.5778 4.07249 12.6925C4.02464 12.8071 4 12.9302 4 13.0544C4 13.1787 4.02464 13.3018 4.07249 13.4164C4.12034 13.5311 4.19046 13.6351 4.27876 13.7224L8.27284 17.7209C8.6446 18.093 9.24514 18.093 9.6169 17.7209L19.7212 7.61506C19.8095 7.52772 19.8797 7.4237 19.9275 7.30904C19.9754 7.19437 20 7.07133 20 6.94706C20 6.82279 19.9754 6.69976 19.9275 6.58509C19.8797 6.47042 19.8095 6.36641 19.7212 6.27907C19.634 6.19066 19.5301 6.12048 19.4155 6.07257C19.301 6.02467 19.1781 6 19.054 6C18.9298 6 18.8069 6.02467 18.6924 6.07257C18.5778 6.12048 18.4739 6.19066 18.3867 6.27907L8.94964 15.7264Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/checkmark.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
+  <path
+    d="M8.94964 15.7264L5.6133 12.3865C5.52606 12.298 5.42215 12.2279 5.30761 12.18C5.19307 12.1321 5.07017 12.1074 4.94603 12.1074C4.8219 12.1074 4.699 12.1321 4.58445 12.18C4.46991 12.2279 4.36601 12.298 4.27876 12.3865C4.19046 12.4738 4.12034 12.5778 4.07249 12.6925C4.02464 12.8071 4 12.9302 4 13.0544C4 13.1787 4.02464 13.3018 4.07249 13.4164C4.12034 13.5311 4.19046 13.6351 4.27876 13.7224L8.27284 17.7209C8.6446 18.093 9.24514 18.093 9.6169 17.7209L19.7212 7.61506C19.8095 7.52772 19.8797 7.4237 19.9275 7.30904C19.9754 7.19437 20 7.07133 20 6.94706C20 6.82279 19.9754 6.69976 19.9275 6.58509C19.8797 6.47042 19.8095 6.36641 19.7212 6.27907C19.634 6.19066 19.5301 6.12048 19.4155 6.07257C19.301 6.02467 19.1781 6 19.054 6C18.9298 6 18.8069 6.02467 18.6924 6.07257C18.5778 6.12048 18.4739 6.19066 18.3867 6.27907L8.94964 15.7264Z"
+    fill={color}
+  />
+</svg>

package/dist/components/icons/checkmark.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Checkmark: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Checkmark = ReturnType<typeof Checkmark>;
+export default Checkmark;

package/dist/components/icons/chevron-down.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M4.71888 8.46936C4.78854 8.39952 4.87131 8.3441 4.96243 8.30629C5.05354 8.26849 5.15122 8.24902 5.24988 8.24902C5.34853 8.24902 5.44621 8.26849 5.53733 8.30629C5.62844 8.3441 5.71121 8.39952 5.78088 8.46936L11.9999 14.6899L18.2189 8.46936C18.3597 8.32853 18.5507 8.24942 18.7499 8.24942C18.949 8.24942 19.14 8.32853 19.2809 8.46936C19.4217 8.61019 19.5008 8.8012 19.5008 9.00036C19.5008 9.19953 19.4217 9.39053 19.2809 9.53136L12.5309 16.2814C12.4612 16.3512 12.3784 16.4066 12.2873 16.4444C12.1962 16.4822 12.0985 16.5017 11.9999 16.5017C11.9012 16.5017 11.8035 16.4822 11.7124 16.4444C11.6213 16.4066 11.5385 16.3512 11.4689 16.2814L4.71888 9.53136C4.64903 9.4617 4.59362 9.37893 4.55581 9.28781C4.518 9.1967 4.49854 9.09901 4.49854 9.00036C4.49854 8.90171 4.518 8.80403 4.55581 8.71291C4.59362 8.6218 4.64903 8.53903 4.71888 8.46936Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-left.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M15.9061 5.09436C15.976 5.16403 16.0314 5.2468 16.0692 5.33791C16.107 5.42903 16.1265 5.52671 16.1265 5.62536C16.1265 5.72402 16.107 5.8217 16.0692 5.91281C16.0314 6.00393 15.976 6.0867 15.9061 6.15636L9.68562 12.3754L15.9061 18.5944C16.0469 18.7352 16.1261 18.9262 16.1261 19.1254C16.1261 19.3245 16.0469 19.5155 15.9061 19.6564C15.7653 19.7972 15.5743 19.8763 15.3751 19.8763C15.176 19.8763 14.9849 19.7972 14.8441 19.6564L8.09412 12.9064C8.02427 12.8367 7.96886 12.7539 7.93105 12.6628C7.89324 12.5717 7.87378 12.474 7.87378 12.3754C7.87378 12.2767 7.89324 12.179 7.93105 12.0879C7.96886 11.9968 8.02427 11.914 8.09412 11.8444L14.8441 5.09436C14.9138 5.02452 14.9966 4.96911 15.0877 4.9313C15.1788 4.89349 15.2765 4.87402 15.3751 4.87402C15.4738 4.87402 15.5715 4.89349 15.6626 4.9313C15.7537 4.96911 15.8365 5.02452 15.9061 5.09436Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-right.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M8.09412 19.656C8.02427 19.5863 7.96886 19.5035 7.93105 19.4124C7.89324 19.3213 7.87378 19.2236 7.87378 19.125C7.87378 19.0263 7.89324 18.9286 7.93105 18.8375C7.96886 18.7464 8.02427 18.6636 8.09412 18.594L14.3146 12.375L8.09412 6.15597C7.95329 6.01514 7.87417 5.82413 7.87417 5.62497C7.87417 5.42581 7.95329 5.2348 8.09412 5.09397C8.23495 4.95314 8.42596 4.87402 8.62512 4.87402C8.82428 4.87402 9.01529 4.95314 9.15612 5.09397L15.9061 11.844C15.976 11.9136 16.0314 11.9964 16.0692 12.0875C16.107 12.1786 16.1265 12.2763 16.1265 12.375C16.1265 12.4736 16.107 12.5713 16.0692 12.6624C16.0314 12.7535 15.976 12.8363 15.9061 12.906L9.15612 19.656C9.08645 19.7258 9.00369 19.7812 8.91257 19.819C8.82145 19.8568 8.72377 19.8763 8.62512 19.8763C8.52647 19.8763 8.42879 19.8568 8.33767 19.819C8.24655 19.7812 8.16379 19.7258 8.09412 19.656Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-small-down.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-small-left.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-small-right.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-small-up.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
     d="M11.4697 9.46967C11.7626 9.17678 12.2374 9.17678 12.5303 9.46967L16.5303 13.4697C16.8232 13.7626 16.8232 14.2374 16.5303 14.5303C16.2374 14.8232 15.7626 14.8232 15.4697 14.5303L12 11.0607L8.53033 14.5303C8.23744 14.8232 7.76256 14.8232 7.46967 14.5303C7.17678 14.2374 7.17678 13.7626 7.46967 13.4697L11.4697 9.46967Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/chevron-up.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M19.281 16.2814C19.2113 16.3512 19.1285 16.4066 19.0374 16.4444C18.9463 16.4822 18.8486 16.5017 18.75 16.5017C18.6513 16.5017 18.5536 16.4822 18.4625 16.4444C18.3714 16.4066 18.2886 16.3512 18.219 16.2814L12 10.0609L5.78097 16.2814C5.64014 16.4222 5.44913 16.5013 5.24997 16.5013C5.05081 16.5013 4.8598 16.4222 4.71897 16.2814C4.57814 16.1405 4.49902 15.9495 4.49902 15.7504C4.49902 15.5512 4.57814 15.3602 4.71897 15.2194L11.469 8.46936C11.5386 8.39952 11.6214 8.34411 11.7125 8.3063C11.8036 8.26849 11.9013 8.24902 12 8.24902C12.0986 8.24902 12.1963 8.26849 12.2874 8.3063C12.3785 8.34411 12.4613 8.39952 12.531 8.46936L19.281 15.2194C19.3508 15.289 19.4062 15.3718 19.444 15.4629C19.4818 15.554 19.5013 15.6517 19.5013 15.7504C19.5013 15.849 19.4818 15.9467 19.444 16.0378C19.4062 16.1289 19.3508 16.2117 19.281 16.2814Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/dots.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12C20 13.1046 19.1046 14 18 14Z"
-    fill="currentColor"
+    fill={color}
   />
   <path
     d="M12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14Z"
-    fill="currentColor"
+    fill={color}
   />
   <path
     d="M6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12C8 13.1046 7.10457 14 6 14Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/error.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M12 3C7.041 3 3 7.041 3 12C3 16.959 7.041 21 12 21C16.959 21 21 16.959 21 12C21 7.041 16.959 3 12 3ZM15.024 14.07C15.285 14.331 15.285 14.763 15.024 15.024C14.889 15.159 14.718 15.222 14.547 15.222C14.376 15.222 14.205 15.159 14.07 15.024L12 12.954L9.93 15.024C9.795 15.159 9.624 15.222 9.453 15.222C9.282 15.222 9.111 15.159 8.976 15.024C8.715 14.763 8.715 14.331 8.976 14.07L11.046 12L8.976 9.93C8.715 9.669 8.715 9.237 8.976 8.976C9.237 8.715 9.669 8.715 9.93 8.976L12 11.046L14.07 8.976C14.331 8.715 14.763 8.715 15.024 8.976C15.285 9.237 15.285 9.669 15.024 9.93L12.954 12L15.024 14.07Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/exports.d.ts

@@ -1,6 +1,7 @@
 export { default as CaretDown } from './caret-down.svelte';
 export { default as CaretUp } from './caret-up.svelte';
 export { default as Check } from './check.svelte';
+export { default as Checkmark } from './checkmark.svelte';
 export { default as ChevronDown } from './chevron-down.svelte';
 export { default as ChevronLeft } from './chevron-left.svelte';
 export { default as ChevronRight } from './chevron-right.svelte';
@@ -16,6 +17,7 @@ export { default as Eye } from './eye.svelte';
 export { default as Info } from './info.svelte';
 export { default as Minus } from './minus.svelte';
 export { default as SidebarToggle } from './sidebar-toggle.svelte';
+export { default as Slash } from './slash.svelte';
 export { default as Sort } from './sort.svelte';
 export { default as Spinner } from './spinner.svelte';
 export { default as Success } from './success.svelte';

package/dist/components/icons/exports.js

@@ -1,6 +1,7 @@
 export { default as CaretDown } from './caret-down.svelte';
 export { default as CaretUp } from './caret-up.svelte';
 export { default as Check } from './check.svelte';
+export { default as Checkmark } from './checkmark.svelte';
 export { default as ChevronDown } from './chevron-down.svelte';
 export { default as ChevronLeft } from './chevron-left.svelte';
 export { default as ChevronRight } from './chevron-right.svelte';
@@ -16,6 +17,7 @@ export { default as Eye } from './eye.svelte';
 export { default as Info } from './info.svelte';
 export { default as Minus } from './minus.svelte';
 export { default as SidebarToggle } from './sidebar-toggle.svelte';
+export { default as Slash } from './slash.svelte';
 export { default as Sort } from './sort.svelte';
 export { default as Spinner } from './spinner.svelte';
 export { default as Success } from './success.svelte';