seblify 0.2.0 → 0.3.0

package/dist/design-system/reserved-props/allowed-options.d.ts

@@ -1,14 +1,16 @@
 import type { Snippet } from 'svelte';
 import { CustomCssSize } from './complex-types';
 type SizeKeys = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-type ToneOptions = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
-type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start';
-type VariantOptions = 'solid' | 'soft' | 'tint' | 'plain';
+type ToneOptions = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
+type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end-top' | 'end' | 'end-bottom' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start-bottom' | 'start' | 'start-top';
+type VariantOptions = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
 type BorderOptions = 'none' | 'solid' | 'dash';
-type ShapeOptions = 'pill' | 'dot';
+type ShapeOptions = 'pill' | 'dot' | 'floating' | 'line' | 'slim' | 'long' | 'flat';
 type AlignOptions = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 type DirOptions = 'ltr' | 'rtl' | 'auto';
+type AnimationOptions = 'none' | 'smooth' | 'snappy' | 'bouncy';
+type OrientationOptions = 'horizontal' | 'vertical';
 export type SeblifyReservedPropOptions = {
     class: string;
     as: keyof HTMLElementTagNameMap;
@@ -26,15 +28,20 @@ export type SeblifyReservedPropOptions = {
     step: number;
     length: number;
     open: boolean;
+    visible: boolean;
+    expanded: boolean;
     checked: boolean;
     disabled: boolean;
+    multiple: boolean;
+    wrap: boolean;
     border: BorderOptions & {};
-    radius: (SizeKeys | 'none' | 'full') & {};
+    radius: ((SizeKeys | 'none' | 'full') & {}) | CustomCssSize;
     shape: ShapeOptions & {};
     tone: ToneOptions & {};
     variant: VariantOptions & {};
     size: (SizeKeys & {}) | CustomCssSize;
     padding: ((SizeKeys | 'none') & {}) | CustomCssSize;
+    animation: AnimationOptions & {};
     gap: ((SizeKeys | 'none') & {}) | CustomCssSize;
     rowGap: ((SizeKeys | 'none') & {}) | CustomCssSize;
     columnGap: ((SizeKeys | 'none') & {}) | CustomCssSize;
@@ -42,5 +49,6 @@ export type SeblifyReservedPropOptions = {
     align: AlignOptions & {};
     justify: JustifyOptions & {};
     dir: DirOptions & {};
+    orientation: OrientationOptions & {};
 };
 export {};

package/dist/design-system/theme/tokens.js

@@ -113,6 +113,30 @@ const themeTokens = [
         value: '#ffffff',
         description: 'Text or foreground placed on accent fills.',
     },
+    {
+        name: '--seblify-color-fill-secondary',
+        category: 'Fill',
+        value: '#5b5fc7',
+        description: 'Secondary accent fill for alternate selected states.',
+    },
+    {
+        name: '--seblify-color-fill-secondary-text',
+        category: 'Fill',
+        value: '#ffffff',
+        description: 'Text or foreground placed on secondary fills.',
+    },
+    {
+        name: '--seblify-color-fill-strong',
+        category: 'Fill',
+        value: '#172033',
+        description: 'Strong neutral fill for high-contrast emphasis.',
+    },
+    {
+        name: '--seblify-color-fill-strong-text',
+        category: 'Fill',
+        value: '#ffffff',
+        description: 'Text or foreground placed on strong neutral fills.',
+    },
     {
         name: '--seblify-color-info-surface',
         category: 'Status',
@@ -131,6 +155,24 @@ const themeTokens = [
         value: '#102f55',
         description: 'Text on info status surfaces.',
     },
+    {
+        name: '--seblify-color-secondary-surface',
+        category: 'Status',
+        value: '#f0efff',
+        description: 'Secondary tone surface.',
+    },
+    {
+        name: '--seblify-color-secondary-border',
+        category: 'Status',
+        value: '#c8c6f4',
+        description: 'Secondary tone border.',
+    },
+    {
+        name: '--seblify-color-secondary-text',
+        category: 'Status',
+        value: '#2f316f',
+        description: 'Text on secondary tone surfaces.',
+    },
     {
         name: '--seblify-color-success-surface',
         category: 'Status',
@@ -215,5 +257,11 @@ const themeTokens = [
         value: '0 10px 24px rgb(20 61 37 / 14%)',
         description: 'Soft shadow for status messages.',
     },
+    {
+        name: '--seblify-z-index-tooltip',
+        category: 'Layer',
+        value: '30',
+        description: 'Layer for portaled tooltip bubbles.',
+    },
 ];
 export default themeTokens;

package/dist/icons/generated/alarm-snooze.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.88 3.38938L6.6 1.85938L2 5.70937L3.29 7.23937L7.88 3.38938ZM22 5.71937L17.4 1.85938L16.11 3.38938L20.71 7.24937L22 5.71937ZM12 3.99937C9.61305 3.99937 7.32387 4.94759 5.63604 6.63541C3.94821 8.32324 3 10.6124 3 12.9994C3 15.3863 3.94821 17.6755 5.63604 19.3633C7.32387 21.0512 9.61305 21.9994 12 21.9994C14.3869 21.9994 16.6761 21.0512 18.364 19.3633C20.0518 17.6755 21 15.3863 21 12.9994C21 10.6124 20.0518 8.32324 18.364 6.63541C16.6761 4.94759 14.3869 3.99937 12 3.99937ZM12 19.9994C10.1435 19.9994 8.36301 19.2619 7.05025 17.9491C5.7375 16.6364 5 14.8559 5 12.9994C5 11.1429 5.7375 9.36238 7.05025 8.04963C8.36301 6.73687 10.1435 5.99937 12 5.99937C13.8565 5.99937 15.637 6.73687 16.9497 8.04963C18.2625 9.36238 19 11.1429 19 12.9994C19 14.8559 18.2625 16.6364 16.9497 17.9491C15.637 19.2619 13.8565 19.9994 12 19.9994ZM9 10.9994H12.63L9 15.1994V16.9994H15V14.9994H11.37L15 10.7994V8.99937H9V10.9994Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/alarm-snooze.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const AlarmSnooze: import("svelte").Component<Props, {}, "">;
+type AlarmSnooze = ReturnType<typeof AlarmSnooze>;
+export default AlarmSnooze;

package/dist/icons/generated/alarm.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 19.9994C10.1435 19.9994 8.36301 19.2619 7.05025 17.9491C5.7375 16.6364 5 14.8559 5 12.9994C5 11.1429 5.7375 9.36238 7.05025 8.04963C8.36301 6.73687 10.1435 5.99937 12 5.99937C13.8565 5.99937 15.637 6.73687 16.9497 8.04963C18.2625 9.36238 19 11.1429 19 12.9994C19 14.8559 18.2625 16.6364 16.9497 17.9491C15.637 19.2619 13.8565 19.9994 12 19.9994ZM12 3.99937C9.61305 3.99937 7.32387 4.94759 5.63604 6.63541C3.94821 8.32324 3 10.6124 3 12.9994C3 15.3863 3.94821 17.6755 5.63604 19.3633C7.32387 21.0512 9.61305 21.9994 12 21.9994C14.3869 21.9994 16.6761 21.0512 18.364 19.3633C20.0518 17.6755 21 15.3863 21 12.9994C21 10.6124 20.0518 8.32324 18.364 6.63541C16.6761 4.94759 14.3869 3.99937 12 3.99937ZM12.5 7.99937H11V13.9994L15.75 16.8494L16.5 15.6194L12.5 13.2494V7.99937ZM7.88 3.38938L6.6 1.85938L2 5.70937L3.29 7.23937L7.88 3.38938ZM22 5.71937L17.4 1.85938L16.11 3.38938L20.71 7.24937L22 5.71937Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/alarm.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const Alarm: import("svelte").Component<Props, {}, "">;
+type Alarm = ReturnType<typeof Alarm>;
+export default Alarm;

package/dist/icons/generated/alert-octagon-outline.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.27 3L3 8.27V15.73L8.27 21H15.73C17.5 19.24 21 15.73 21 15.73V8.27L15.73 3M9.1 5H14.9L19 9.1V14.9L14.9 19H9.1L5 14.9V9.1M11 15H13V17H11V15ZM11 7H13V13H11V7Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/alert-octagon-outline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const AlertOctagonOutline: import("svelte").Component<Props, {}, "">;
+type AlertOctagonOutline = ReturnType<typeof AlertOctagonOutline>;
+export default AlertOctagonOutline;

package/dist/icons/generated/alert-octagon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 13H11V7H13M11 15H13V17H11M15.73 3H8.27L3 8.27V15.73L8.27 21H15.73L21 15.73V8.27L15.73 3Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/alert-octagon.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const AlertOctagon: import("svelte").Component<Props, {}, "">;
+type AlertOctagon = ReturnType<typeof AlertOctagon>;
+export default AlertOctagon;

package/dist/icons/generated/arrow-bottom-left-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.07 19L9.24 16.18L19 6.42L17.58 5L7.82 14.76L5 11.94V19H12.07Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-bottom-left-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowBottomLeftThin: import("svelte").Component<Props, {}, "">;
+type ArrowBottomLeftThin = ReturnType<typeof ArrowBottomLeftThin>;
+export default ArrowBottomLeftThin;

package/dist/icons/generated/arrow-bottom-right-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.93 19L14.76 16.18L5 6.42L6.42 5L16.18 14.76L19 11.94V19H11.93Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-bottom-right-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowBottomRightThin: import("svelte").Component<Props, {}, "">;
+type ArrowBottomRightThin = ReturnType<typeof ArrowBottomRightThin>;
+export default ArrowBottomRightThin;

package/dist/icons/generated/arrow-down-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.0293 13.9207H11.0293V5.0007L13.0393 4.9707V13.9207H17.0293L12.0293 18.9207L7.0293 13.9207Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-down-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowDownThin: import("svelte").Component<Props, {}, "">;
+type ArrowDownThin = ReturnType<typeof ArrowDownThin>;
+export default ArrowDownThin;

package/dist/icons/generated/arrow-left-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0508 16.9395V12.9395H18.9708L19.0008 10.9295H10.0508V6.93945L5.05078 11.9395L10.0508 16.9395Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-left-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowLeftThin: import("svelte").Component<Props, {}, "">;
+type ArrowLeftThin = ReturnType<typeof ArrowLeftThin>;
+export default ArrowLeftThin;

package/dist/icons/generated/arrow-right-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0008 16.9395V12.9395H5.08078L5.05078 10.9295H14.0008V6.93945L19.0008 11.9395L14.0008 16.9395Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-right-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowRightThin: import("svelte").Component<Props, {}, "">;
+type ArrowRightThin = ReturnType<typeof ArrowRightThin>;
+export default ArrowRightThin;

package/dist/icons/generated/arrow-top-left-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.07 5L9.24 7.83L19 17.59L17.58 19L7.82 9.25L5 12.07V5H12.07Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-top-left-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowTopLeftThin: import("svelte").Component<Props, {}, "">;
+type ArrowTopLeftThin = ReturnType<typeof ArrowTopLeftThin>;
+export default ArrowTopLeftThin;

package/dist/icons/generated/arrow-top-right-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.93 5L14.76 7.83L5 17.59L6.42 19L16.18 9.25L19 12.07V5H11.93Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-top-right-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowTopRightThin: import("svelte").Component<Props, {}, "">;
+type ArrowTopRightThin = ReturnType<typeof ArrowTopRightThin>;
+export default ArrowTopRightThin;

package/dist/icons/generated/arrow-up-thin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.0293 9.9707H11.0293V18.8907L13.0393 18.9207V9.9707H17.0293L12.0293 4.9707L7.0293 9.9707Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/arrow-up-thin.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const ArrowUpThin: import("svelte").Component<Props, {}, "">;
+type ArrowUpThin = ReturnType<typeof ArrowUpThin>;
+export default ArrowUpThin;

package/dist/icons/generated/bell-outline.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 21H14C14 22.1 13.1 23 12 23C10.9 23 10 22.1 10 21ZM21 19V20H3V19L5 17V11C5 7.9 7 5.2 10 4.3V4C10 2.9 10.9 2 12 2C13.1 2 14 2.9 14 4V4.3C17 5.2 19 7.9 19 11V17L21 19ZM17 11C17 8.2 14.8 6 12 6C9.2 6 7 8.2 7 11V18H17V11Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/bell-outline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const BellOutline: import("svelte").Component<Props, {}, "">;
+type BellOutline = ReturnType<typeof BellOutline>;
+export default BellOutline;

package/dist/icons/generated/bell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 19V20H3V19L5 17V11C5 7.9 7.03 5.17 10 4.29C10 4.19 10 4.1 10 4C10 3.46957 10.2107 2.96086 10.5858 2.58579C10.9609 2.21071 11.4696 2 12 2C12.5304 2 13.0391 2.21071 13.4142 2.58579C13.7893 2.96086 14 3.46957 14 4C14 4.1 14 4.19 14 4.29C16.97 5.17 19 7.9 19 11V17L21 19ZM14 21C14 21.5304 13.7893 22.0391 13.4142 22.4142C13.0391 22.7893 12.5304 23 12 23C11.4696 23 10.9609 22.7893 10.5858 22.4142C10.2107 22.0391 10 21.5304 10 21" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/bell.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const Bell: import("svelte").Component<Props, {}, "">;
+type Bell = ReturnType<typeof Bell>;
+export default Bell;

package/dist/icons/generated/book-open-blank-variant-outline.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5ZM11 7.5C9.64 6.9 7.84 6.5 6.5 6.5C5.3 6.5 4.1 6.65 3 7V18.5C4.1 18.15 5.3 18 6.5 18C7.84 18 9.64 18.4 11 19V7.5ZM13 19C14.36 18.4 16.16 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C16.16 6.5 14.36 6.9 13 7.5V19Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/book-open-blank-variant-outline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const BookOpenBlankVariantOutline: import("svelte").Component<Props, {}, "">;
+type BookOpenBlankVariantOutline = ReturnType<typeof BookOpenBlankVariantOutline>;
+export default BookOpenBlankVariantOutline;

package/dist/icons/generated/book-open-blank-variant.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 20C8.2 20 10.65 20.65 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5C19.89 4.65 18.67 4.5 17.5 4.5C15.55 4.5 13.45 4.9 12 6C10.55 4.9 8.45 4.5 6.5 4.5C5.33 4.5 4.11 4.65 3 5C2.25 5.25 1.6 5.55 1 6V20.6C1 20.85 1.25 21.1 1.5 21.1C1.6 21.1 1.65 21.1 1.75 21.05C3.15 20.3 4.85 20 6.5 20ZM12 19.5V8C13.35 7.15 15.8 6.5 17.5 6.5C18.7 6.5 19.9 6.65 21 7V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/book-open-blank-variant.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const BookOpenBlankVariant: import("svelte").Component<Props, {}, "">;
+type BookOpenBlankVariant = ReturnType<typeof BookOpenBlankVariant>;
+export default BookOpenBlankVariant;

package/dist/icons/generated/book-open-page-variant-outline.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 1L14 6V17L19 12.5V1ZM21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5ZM10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/book-open-page-variant-outline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const BookOpenPageVariantOutline: import("svelte").Component<Props, {}, "">;
+type BookOpenPageVariantOutline = ReturnType<typeof BookOpenPageVariantOutline>;
+export default BookOpenPageVariantOutline;

package/dist/icons/generated/book-open-page-variant.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 2L14 6.5V17.5L19 13V2ZM6.5 5C4.55 5 2.45 5.4 1 6.5V21.16C1 21.41 1.25 21.66 1.5 21.66C1.6 21.66 1.65 21.59 1.75 21.59C3.1 20.94 5.05 20.5 6.5 20.5C8.45 20.5 10.55 20.9 12 22C13.35 21.15 15.8 20.5 17.5 20.5C19.15 20.5 20.85 20.81 22.25 21.56C22.35 21.61 22.4 21.59 22.5 21.59C22.75 21.59 23 21.34 23 21.09V6.5C22.4 6.05 21.75 5.75 21 5.5V19C19.9 18.65 18.7 18.5 17.5 18.5C15.8 18.5 13.35 19.15 12 20V6.5C10.55 5.4 8.45 5 6.5 5Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/book-open-page-variant.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const BookOpenPageVariant: import("svelte").Component<Props, {}, "">;
+type BookOpenPageVariant = ReturnType<typeof BookOpenPageVariant>;
+export default BookOpenPageVariant;

package/dist/icons/generated/book-open-variant-outline.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import IconGlyph from '../../components/display/media/icon/IconGlyph.svelte';
+
+  interface Props {
+    label?: string;
+    size?: number | string;
+  }
+
+  let { label, size }: Props = $props();
+  const source = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21.5C10.65 20.65 8.2 20 6.5 20C4.85 20 3.15 20.3 1.75 21.05C1.65 21.1 1.6 21.1 1.5 21.1C1.25 21.1 1 20.85 1 20.6V6C1.6 5.55 2.25 5.25 3 5C4.11 4.65 5.33 4.5 6.5 4.5C8.45 4.5 10.55 4.9 12 6C13.45 4.9 15.55 4.5 17.5 4.5C18.67 4.5 19.89 4.65 21 5C21.75 5.25 22.4 5.55 23 6V20.6C23 20.85 22.75 21.1 22.5 21.1C22.4 21.1 22.35 21.1 22.25 21.05C20.85 20.3 19.15 20 17.5 20C15.8 20 13.35 20.65 12 21.5ZM11 7.5C9.64 6.9 7.84 6.5 6.5 6.5C5.3 6.5 4.1 6.65 3 7V18.5C4.1 18.15 5.3 18 6.5 18C7.84 18 9.64 18.4 11 19V7.5ZM13 19C14.36 18.4 16.16 18 17.5 18C18.7 18 19.9 18.15 21 18.5V7C19.9 6.65 18.7 6.5 17.5 6.5C16.16 6.5 14.36 6.9 13 7.5V19ZM14 16.35C14.96 16 16.12 15.83 17.5 15.83C18.54 15.83 19.38 15.91 20 16.07V14.57C19.13 14.41 18.29 14.33 17.5 14.33C16.16 14.33 15 14.5 14 14.76V16.35ZM14 13.69C14.96 13.34 16.12 13.16 17.5 13.16C18.54 13.16 19.38 13.24 20 13.4V11.9C19.13 11.74 18.29 11.67 17.5 11.67C16.22 11.67 15.05 11.82 14 12.12V13.69ZM14 11C14.96 10.67 16.12 10.5 17.5 10.5C18.41 10.5 19.26 10.59 20 10.78V9.23C19.13 9.08 18.29 9 17.5 9C16.18 9 15 9.15 14 9.46V11Z" fill="black"/>
+</svg>
+`;
+</script>
+
+<IconGlyph {label} {size} {source} />

package/dist/icons/generated/book-open-variant-outline.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    label?: string;
+    size?: number | string;
+}
+declare const BookOpenVariantOutline: import("svelte").Component<Props, {}, "">;
+type BookOpenVariantOutline = ReturnType<typeof BookOpenVariantOutline>;
+export default BookOpenVariantOutline;