tecitheme 0.13.0 → 0.14.0

package/dist/components/BentoGrid.svelte

@@ -0,0 +1,73 @@
+<script>
+    import { getColorStyles, getGridItemSizeStyles, getGridSizeStyles, getTeciImageURL, makeIdString, triggerWhenVisible } from "../utils";
+    import { onMount } from "svelte";
+    import { cubicInOut } from "svelte/easing";
+    import { writable } from "svelte/store";
+    import { fly } from "svelte/transition";
+    import Button from "./Button.svelte";
+
+  export let data = {};
+
+  let {
+    name,
+    heading,
+    eyebrowText,
+    color,
+    columns,
+    rows,
+    button,
+    items,
+    animateOnScroll = true
+  } = data;
+
+  let id = makeIdString(name);
+
+  // Detect if the heading is visible, then trigger animations
+  let scrollTargetVisible = writable(false);
+  onMount(() => {
+    triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
+  })
+</script>
+
+<div {id} class="py-8 sm:py-12">
+  <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+
+    <!-- Eyebrow Text -->
+    <h2 class="font-semibold {getColorStyles("text", color)} text-center w-full">{eyebrowText}</h2>
+
+    <!-- Heading -->
+    <a id={id+"Heading"} href={`#${id}`} class="mt-2 text-balance text-center text-4xl font-semibold tracking-tight sm:text-5xl w-full text-gray-900 mx-auto"><p>{heading}</p></a>
+
+    <!-- Grid -->
+    <div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 {getGridSizeStyles(columns, rows)}">
+
+      {#each items as item, index}
+        {#if $scrollTargetVisible}
+          <div class="relative {getGridItemSizeStyles(item.width, item.height)}"
+            in:fly={{ delay: index*100, duration: 1500, easing: cubicInOut, x:'100%'}}
+          >
+            <a class="relative flex h-full flex-col overflow-hidden shadow ring-1 ring-black/5 {item.url ? "hover:scale-105 transition ease-in-out delay-75" : ""}" href={item.url} rel="external">
+              
+              <!-- Image -->
+              <img class="h-80 object-cover object-left mask-image-b mask-image-start-90 mask-image-end-100" src={getTeciImageURL(item.image.url)} alt={item.image.alt}>
+
+              <!-- Text -->
+              <div class="p-10 pt-4">
+                <h3 class="text-sm/4 font-semibold {getColorStyles("text", color)}">{item.eyebrowText}</h3>
+                <p class="mt-2 text-lg font-semibold tracking-tight text-gray-900">{item.heading}</p>
+                <p class="mt-2 text-sm">{item.text}</p>
+              </div>
+            </a>
+          </div>
+        {/if}
+      {/each}
+    </div>
+
+    <!-- Button -->
+    {#if button}
+      <div class="mt-10">
+        <Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  BentoGridProps */
+/** @typedef {typeof __propDef.events}  BentoGridEvents */
+/** @typedef {typeof __propDef.slots}  BentoGridSlots */
+export default class BentoGrid extends SvelteComponent<{
+    data?: {};
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BentoGridProps = typeof __propDef.props;
+export type BentoGridEvents = typeof __propDef.events;
+export type BentoGridSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        data?: {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {};
+    bindings?: string;
+};
+export {};

package/dist/components/CTATwoColumn.svelte

@@ -1,52 +1,85 @@
 <script>
-    import { getColorStyles } from "../utils";
+    import { getColorStyles, getTeciImageURL, makeIdString, triggerWhenVisible } from "../utils";
+    import { writable } from "svelte/store";
     import Button from "./Button.svelte";
     import Icon from "./Icon.svelte";
+    import { onMount } from "svelte";
+    import { fade, fly } from "svelte/transition";
+    import { cubicInOut } from "svelte/easing";
 
   export let data = {};
 
   let {
+    name,
     heading,
     text,
     bullets,
     color,
     image,
-    button
+    button,
+    animateOnScroll = true
   } = data;
 
-  let imageUrl = image.url.startsWith("http") ? image.url : `https://files.thunderheadeng.com/www/images/${image.url}?w=600`;
+  let id = makeIdString(name);
+
+  // Detect if the heading is visible, then trigger animations
+  let scrollTargetVisible = writable(false);
+  onMount(() => {
+    triggerWhenVisible(scrollTargetVisible, id+"Heading", !animateOnScroll)
+  })
+
 </script>
 
-<div class="{getColorStyles("background", color)} py-16">
+<div {id} class="{getColorStyles("background", color)} py-16">
   <div class="relative isolate">
     <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
       <div class="mx-auto flex max-w-2xl flex-col gap-16 px-6 py-16 sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20">
 
         <!-- Image -->
-        <img class="h-96 w-full flex-none object-cover shadow-xl lg:aspect-square lg:h-auto lg:max-w-sm" src="{imageUrl}" alt={image.alt}>
+        <img 
+          class="h-96 w-full flex-none object-cover shadow-xl lg:aspect-square lg:h-auto lg:max-w-sm" 
+          src={getTeciImageURL(image.url)} 
+          alt={image.alt}
+        >
 
         <div class="w-full flex-auto">
 
           <!-- Heading -->
-          <h2 class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">{heading}</h2>
+          <a id={id+"Heading"} href={`#${id}`} class="text-4xl font-semibold tracking-tight text-pretty sm:text-5xl">{heading}</a>
 
-          <!-- Text -->
-          <p class="mt-6 text-lg/8 text-pretty ">{text}</p>
+          {#if $scrollTargetVisible}
+            <!-- Text -->
+            <p 
+              class="mt-6 text-lg/8 text-pretty" 
+              in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
+            >
+              {text}
+            </p>
 
-          <!-- Bullet Items -->
-          <ul role="list" class="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base/7 sm:grid-cols-2">
-            {#each bullets as bullet}
-              <li class="flex gap-x-4">
-                <Icon icon="{bullet.icon ? bullet.icon : 'icon-task_alt'}" classes="text-xl"/>
-                {bullet.text}
-              </li>
-            {/each}
-          </ul>
+            <!-- Bullet Items -->
+            <ul 
+              role="list" 
+              class="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base/7 sm:grid-cols-2"
+              in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
+            >
+              {#each bullets as bullet}
+                <li class="flex gap-x-4">
+                  <Icon icon="{bullet.icon ? bullet.icon : 'icon-task_alt'}" classes="text-xl"/>
+                  {bullet.text}
+                </li>
+              {/each}
+            </ul>
+          {/if}
 
           <!-- Button -->
-          <div class="mt-10 flex">
-              <Button url={button.url} text="{button.text} &rarr;" color={button.color} justify={button.justify} fullwidth={button.fullWidth}/>
-          </div>
+          {#if $scrollTargetVisible}
+            <div 
+              class="mt-10 flex"
+              in:fly={{ delay: 300, duration: 1750, easing: cubicInOut, x:"100%"}}
+            >
+                <Button url={button.url} text="{button.text} &rarr;" color={button.color} justify={button.justify} fullwidth={button.fullWidth}/>
+            </div>
+          {/if}
         </div>
 
       </div>

package/dist/components/FeatureAlternatingWithTestimonial.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getColorStyles, makeIdString } from "../utils";
+  import { getColorStyles, makeIdString, triggerWhenVisible } from "../utils";
   import { onMount } from "svelte";
   import { fly, fade } from "svelte/transition";
   import Button from "./Button.svelte";
@@ -18,36 +18,22 @@
     button, //Follows format of Button.svelte
     icon,
     testimonial,
-    textPosition
+    textPosition,
+    animateOnScroll = true
   } = data;
 
   // Initialize Text Position if left undefined
-  textPosition = textPosition ? textPosition : "left"
+  textPosition = textPosition ? textPosition : "left"  
 
   // Detect if the heading is visible, then trigger animations
   let scrollTargetVisible = writable(false);
   onMount(() => {
-    let scrollTarget = document.getElementById(id + "text");
-
-    function updateVisibility() {
-      var rect = scrollTarget.getBoundingClientRect();
-
-      let topVisible = (rect.top >= 0) && (rect.top <= window.innerHeight);
-      let bottomVisible = rect.bottom <= window.innerHeight
-
-      console.log()
-      scrollTargetVisible.update(_ => (topVisible) || (bottomVisible));
-    }
-    updateVisibility();
-
-    addEventListener("scroll", (event) => {
-      updateVisibility()
-    })
+    triggerWhenVisible(scrollTargetVisible, id+"text", !animateOnScroll)
   })
 
 </script>
 
-<div id={id} class="relative overflow-hidden pb-32 pt-16">
+<div id={id} class="relative overflow-hidden py-8 lg:py-12">
 
   <div class="relative">
     <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
@@ -81,7 +67,7 @@
               in:fade={{delay: 200, duration: 750, easing:cubicInOut}}
               out:fade={{delay: 200, duration: 750, easing:cubicInOut}}
             >
-              <h2 class="text-3xl font-bold tracking-tight text-gray-900">{heading}</h2>
+              <a href={`#${id}`} class="text-3xl font-bold tracking-tight text-gray-900">{heading}</a>
               <p class="mt-4 text-lg text-gray-500">{text}</p>
               <div class="mt-6">
                 <Button url={button.url} text={button.text} color={color} justify={button.justify} fullwidth={button.fullwidth}/>
@@ -123,7 +109,7 @@
         >
           {#if !$scrollTargetVisible}
             <div 
-              out:fly={{ delay: 0, duration: 500, easing: cubicInOut, x: textPosition == "left" ? '-100%' : '+100%' }}
+              out:fly={{ delay: 0, duration: 500, easing: cubicInOut, x: textPosition == "left" ? '100%' : '-100%' }}
               class="absolute top-0 bottom-0 w-full bg-gray-200 animate-pulse my-16"
             >
             </div>

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export * from "./utils.js";
 export { default as getContent } from "./get-content.js";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as Banner } from "./components/Banner.svelte";
-export { default as BentoBox } from "./components/BentoBox.svelte";
+export { default as BentoGrid } from "./components/BentoGrid.svelte";
 export { default as Button } from "./components/Button.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Carousel } from "./components/Carousel.svelte";

package/dist/index.js

@@ -5,7 +5,7 @@ export { default as getContent } from './get-content.js';
 // Components
 export { default as Accordion } from './components/Accordion.svelte';
 export { default as Banner } from './components/Banner.svelte';
-export { default as BentoBox } from './components/BentoBox.svelte';
+export { default as BentoGrid } from './components/BentoGrid.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as Carousel } from './components/Carousel.svelte';

package/dist/layouts/blocks.svelte

@@ -1,6 +1,6 @@
 <script>
   import Accordion from "../components/Accordion.svelte";
-  import BentoBox from "../components/BentoBox.svelte";
+  import BentoGrid from "../components/BentoGrid.svelte";
   import CTA from "../components/CTA.svelte";
   import CtaTwoColumn from "../components/CTATwoColumn.svelte";
   import HeadingCentered from "../components/HeadingCentered.svelte";
@@ -28,7 +28,7 @@
 
   let blocks = [
     { ref: "accordion", component: Accordion },
-    { ref: "bento", component: BentoBox },
+    { ref: "bento-grid", component: BentoGrid },
     { ref: "cta", component: CTA },
     { ref: "cta-two-column", component: CtaTwoColumn },
     { ref: "heading-centered", component: HeadingCentered },

package/dist/utils.d.ts

@@ -1,6 +1,60 @@
 export function scrollTo(anchor: any): void;
 export function getColorStyles(type: any, color: any): string;
+/**
+ * Utility function to get the column span style for defining width in a grid. These styles only apply as screen size lg+
+ * @param {*} span The number of rows to span
+ * @returns String containing the proper style class
+ */
+export function getGridItemColumnSpanStyle(span: any): "lg:col-span-1" | "lg:col-span-2" | "lg:col-span-3" | "lg:col-span-4" | "lg:col-span-5" | "lg:col-span-6" | "lg:col-span-7" | "lg:col-span-8" | "lg:col-span-9";
+/**
+ * Utility function to get the Row span style for defining height in a grid. These styles only apply at screen size lg+
+ * @param {*} span The number of rows to span
+ * @returns String containing the proper style class
+ */
+export function getGridItemRowSpanStyle(span: any): "lg:row-span-1" | "lg:row-span-2" | "lg:row-span-3" | "lg:row-span-4" | "lg:row-span-5" | "lg:row-span-6" | "lg:row-span-7" | "lg:row-span-8" | "lg:row-span-9";
+/**
+ * Utility function to get the Column and Row span styles for defining size in a grid. These styles only apply at screen size lg+
+ * @param {*} width The number of columns to span
+ * @param {*} height The number of rows to span
+ * @returns String containing the proper style classes
+ */
+export function getGridItemSizeStyles(width: any, height: any): string;
+/**
+ * Utility function to get the Grid Column Number style for defining the number of columns in a grid. These styles only apply at screen size lg+
+ * @param {*} num The number of columns to set for the grid
+ * @returns String containing the proper style class
+ */
+export function getGridColumnSizeStyle(num: any): "lg:grid-cols-1" | "lg:grid-cols-2" | "lg:grid-cols-3" | "lg:grid-cols-4" | "lg:grid-cols-5" | "lg:grid-cols-6" | "lg:grid-cols-7" | "lg:grid-cols-8" | "lg:grid-cols-9";
+/**
+ * Utility function to get the Grid Row Number style for defining the number of rows in a grid. These styles only apply at screen size lg+
+ * @param {*} num The number of rows to set for the grid
+ * @returns String containing the proper style class
+ */
+export function getGridRowSizeStyle(num: any): "lg:grid-rows-1" | "lg:grid-rows-2" | "lg:grid-rows-3" | "lg:grid-rows-4" | "lg:grid-rows-5" | "lg:grid-rows-6" | "lg:grid-rows-7" | "lg:grid-rows-8" | "lg:grid-rows-9";
+/**
+ * Utility function to get the Grid Size styles for defining size of a grid.
+ * @param {*} columns The number of columns to add to the grid
+ * @param {*} rows The number of rows to add to the grid
+ * @returns String containing the proper style classes
+ */
+export function getGridSizeStyles(columns: any, rows: any): string;
 export function validateEmail(email: any): boolean;
 export function slugFromPath(path: any): void;
 export function buildToC(): boolean;
 export function makeIdString(text: any): string;
+/**
+ * Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged
+ * @param {*} imageSrc The image source string
+ * @param {*} site ('www' or 'support') TECi image folder to pull from
+ */
+export function getTeciImageURL(imageSrc: any, site?: any): any;
+/**
+ * Convenience function that sets the state of a Svelte Store to true when an element is visible on the screen. Useful for triggering animations.
+ *
+ * This state change will happen whenever the HTMLElement defined by elementId becomes visible by entering the bottom of the screen.
+ *
+ * @param {*} store The Svelte Store whose state should change
+ * @param {*} elementId The DOM id of the element whose visibility should trigger the state change. This element should have a specified height at all times, otherwise this state my change at unexpected times.
+ * @param {*} latch If true, the state will always be set to true after the page loads
+ */
+export function triggerWhenVisible(store: any, elementId: any, latch?: any): void;

package/dist/utils.js

@@ -206,6 +206,154 @@ export function getColorStyles(type, color){
   return classes;
 }
 
+/**
+ * Utility function to get the column span style for defining width in a grid. These styles only apply as screen size lg+
+ * @param {*} span The number of rows to span
+ * @returns String containing the proper style class
+ */
+export function getGridItemColumnSpanStyle(span) {
+  switch(span) {
+    case 1:
+      return "lg:col-span-1";
+    case 2:
+      return "lg:col-span-2";
+    case 3:
+      return "lg:col-span-3";
+    case 4:
+      return "lg:col-span-4";
+    case 5:
+      return "lg:col-span-5";
+    case 6:
+      return "lg:col-span-6";
+    case 7:
+      return "lg:col-span-7";
+    case 8:
+      return "lg:col-span-8";
+    case 9:
+      return "lg:col-span-9";
+    case undefined:
+      return "lg:col-span-1";
+    default:
+      return "lg:col-span-1";
+  }
+}
+
+/**
+ * Utility function to get the Row span style for defining height in a grid. These styles only apply at screen size lg+
+ * @param {*} span The number of rows to span
+ * @returns String containing the proper style class
+ */
+export function getGridItemRowSpanStyle(span) {
+  switch(span) {
+    case 1:
+      return "lg:row-span-1";
+    case 2:
+      return "lg:row-span-2";
+    case 3:
+      return "lg:row-span-3";
+    case 4:
+      return "lg:row-span-4";
+    case 5:
+      return "lg:row-span-5";
+    case 6:
+      return "lg:row-span-6";
+    case 7:
+      return "lg:row-span-7";
+    case 8:
+      return "lg:row-span-8";
+    case 9:
+      return "lg:row-span-9";
+    case undefined:
+      return "lg:row-span-1";
+    default:
+      return "lg:row-span-1";
+  }
+}
+
+/**
+ * Utility function to get the Column and Row span styles for defining size in a grid. These styles only apply at screen size lg+
+ * @param {*} width The number of columns to span
+ * @param {*} height The number of rows to span
+ * @returns String containing the proper style classes
+ */
+export function getGridItemSizeStyles(width, height) {
+  return `${getGridItemColumnSpanStyle(width)} ${getGridItemRowSpanStyle(height)}`
+}
+
+/**
+ * Utility function to get the Grid Column Number style for defining the number of columns in a grid. These styles only apply at screen size lg+
+ * @param {*} num The number of columns to set for the grid
+ * @returns String containing the proper style class
+ */
+export function getGridColumnSizeStyle(num) {
+  switch(num) {
+    case 1:
+      return "lg:grid-cols-1";
+    case 2:
+      return "lg:grid-cols-2";
+    case 3:
+      return "lg:grid-cols-3";
+    case 4:
+      return "lg:grid-cols-4";
+    case 5:
+      return "lg:grid-cols-5";
+    case 6:
+      return "lg:grid-cols-6";
+    case 7:
+      return "lg:grid-cols-7";
+    case 8:
+      return "lg:grid-cols-8";
+    case 9:
+      return "lg:grid-cols-9";
+    case undefined:
+      return "lg:grid-cols-1";
+    default:
+      return "lg:grid-cols-1";
+  }
+}
+
+/**
+ * Utility function to get the Grid Row Number style for defining the number of rows in a grid. These styles only apply at screen size lg+
+ * @param {*} num The number of rows to set for the grid
+ * @returns String containing the proper style class
+ */
+export function getGridRowSizeStyle(num) {
+  switch(num) {
+    case 1:
+      return "lg:grid-rows-1";
+    case 2:
+      return "lg:grid-rows-2";
+    case 3:
+      return "lg:grid-rows-3";
+    case 4:
+      return "lg:grid-rows-4";
+    case 5:
+      return "lg:grid-rows-5";
+    case 6:
+      return "lg:grid-rows-6";
+    case 7:
+      return "lg:grid-rows-7";
+    case 8:
+      return "lg:grid-rows-8";
+    case 9:
+      return "lg:grid-rows-9";
+    case undefined:
+      return "lg:grid-rows-1";
+    default:
+      return "lg:grid-rows-1";
+  }
+}
+
+/**
+ * Utility function to get the Grid Size styles for defining size of a grid.
+ * @param {*} columns The number of columns to add to the grid
+ * @param {*} rows The number of rows to add to the grid
+ * @returns String containing the proper style classes
+ */
+export function getGridSizeStyles(columns, rows) {
+  return `${getGridColumnSizeStyle(columns)} ${getGridRowSizeStyle(rows)}`
+}
+
 export function validateEmail(email) {
   const re =
     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -302,3 +450,39 @@ export function makeIdString(text) {
   }
   return null; //Null because most of our components use a null id as a default
 }
+
+/**
+ * Converts a simplified image source string in to the proper TECi Image src. If imageSrc is an absolute url (starts with http) it is returned unchanged
+ * @param {*} imageSrc The image source string
+ * @param {*} site ('www' or 'support') TECi image folder to pull from 
+ */
+export function getTeciImageURL(imageSrc, site = "www") {
+  return imageSrc.startsWith("http") ? imageSrc : `https://files.thunderheadeng.com/${site}/images/${imageSrc}?fmt=auto`
+}
+
+/**
+ * Convenience function that sets the state of a Svelte Store to true when an element is visible on the screen. Useful for triggering animations.
+ * 
+ * This state change will happen whenever the HTMLElement defined by elementId becomes visible by entering the bottom of the screen.
+ * 
+ * @param {*} store The Svelte Store whose state should change
+ * @param {*} elementId The DOM id of the element whose visibility should trigger the state change. This element should have a specified height at all times, otherwise this state my change at unexpected times.
+ * @param {*} latch If true, the state will always be set to true after the page loads
+ */
+export function triggerWhenVisible(store, elementId, latch = false) {
+  let scrollTarget = document.getElementById(elementId);
+
+    function updateVisibility() {
+      var rect = scrollTarget.getBoundingClientRect();
+
+      let topVisible = (rect.top >= 0) && (rect.top <= window.innerHeight);
+      let bottomVisible = rect.bottom <= window.innerHeight
+
+      store.update(_ => ((topVisible) || (bottomVisible)) || latch);
+    }
+    updateVisibility();
+
+    addEventListener("scroll", (event) => {
+      updateVisibility()
+    })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",
@@ -66,6 +66,7 @@
     "vite": "^4.4.3"
   },
   "dependencies": {
+    "@designbycode/tailwindcss-mask-image": "^2.0.3",
     "katex": "^0.16.8",
     "slugify": "^1.6.6",
     "svelte": "^4.0.5"

package/dist/components/BentoBox.svelte

@@ -1,140 +0,0 @@
-<script>
-    import { getColorStyles } from "../utils";
-    import Button from "./Button.svelte";
-
-
-  export let data = {};
-
-  let {
-    cols,
-    rows,
-    items,
-    heading,
-    eyebrowText,
-    color
-  } = data;
-
-  let bentoCols = "lg:grid-cols-3";
-  switch (cols) {
-    case 1:
-      bentoCols = "lg:grid-cols-1"
-      break;
-    case 2:
-      bentoCols = "lg:grid-cols-2"
-      break;
-    case 3:
-      bentoCols = "lg:grid-cols-3"
-      break;
-    case 4:
-      bentoCols = "lg:grid-cols-4"
-      break;
-    case 5:
-      bentoCols = "lg:grid-cols-5"
-      break;
-    case 6:
-      bentoCols = "lg:grid-cols-6"
-      break;
-    case 7:
-      bentoCols = "lg:grid-cols-7"
-      break;
-    case 8:
-      bentoCols = "lg:grid-cols-8"
-      break;
-    case 9:
-      bentoCols = "lg:grid-cols-9"
-      break;
-    default:
-      bentoCols = "lg:grid-cols-3"
-      break;
-  }
-
-  let bentoRows = "lg:grid-rows-2";
-  switch (rows) {
-    case 1:
-      bentoRows = "lg:grid-rows-1"
-      break;
-    case 2:
-      bentoRows = "lg:grid-rows-2"
-      break;
-    case 3:
-      bentoRows = "lg:grid-rows-3"
-      break;
-    case 4:
-      bentoRows = "lg:grid-rows-4"
-      break;
-    case 5:
-      bentoRows = "lg:grid-rows-5"
-      break;
-    case 6:
-      bentoRows = "lg:grid-rows-6"
-      break;
-    case 7:
-      bentoRows = "lg:grid-rows-7"
-      break;
-    case 8:
-      bentoRows = "lg:grid-rows-8"
-      break;
-    case 9:
-      bentoRows = "lg:grid-rows-9"
-      break;
-    default:
-      bentoRows = "lg:grid-rows-2"
-      break;
-  }
-
-</script>
-
-<div class="bg-gray-50 py-24 sm:py-32">
-  <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-
-    <!-- Heading -->
-    <h2 class="text-center text-base/7 font-semibold {getColorStyles("text", color)}">{heading}</h2>
-
-    <!-- Eyebrow Text -->
-    <p class="mx-auto mt-2 max-w-lg text-balance text-center text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl">{eyebrowText}</p>
-
-    <!-- Bento -->
-    <div class="mt-10 grid gap-4 sm:mt-16 {bentoCols} {bentoRows}">
-
-      {#each items as item}
-        {@const imageUrl = item.image.url.startsWith("http") ? item.image.url : `https://files.thunderheadeng.com/www/images/${item.image.url}?fmt=auto`}
-        <!-- Card -->
-        <a class="relative {item.gridClasses}" href={item.url}>
-          <!-- White Background -->
-          <div class="absolute inset-px bg-white"></div>
-
-          <!-- Foreground -->
-          <div class="relative flex h-full flex-col overflow-hidden">
-
-            <!-- Heading and Text -->
-            <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
-              <p class="mt-2 text-lg font-medium tracking-tight max-lg:text-center">{item.heading}</p>
-              <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">{item.text}</p>
-              {#if item.buttonText}
-                <div class="mt-2 mb-2 hidden lg:flex">
-                  <Button text={item.buttonText} color={color} justify="left"/>
-                </div>
-              {/if}
-            </div>
-
-            <!-- Image -->
-            <div class="{item.image.containerClasses}">
-              <div class="{item.image.innerContainerClasses}">
-                <img
-                    class={item.image.classes}
-                    src={imageUrl}
-                    alt="{item.image.alt}"
-                    title="{item.image.alt}"
-                />
-              </div>
-            </div>
-
-          </div>
-
-          <!-- Something that I don't understand. Focus element? -->
-          <div class="pointer-events-none absolute inset-px shadow ring-1 ring-black/5"></div>
-        </a>
-      {/each}
-    </div>
-  </div>
-</div>

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  BentoBoxProps */
-/** @typedef {typeof __propDef.events}  BentoBoxEvents */
-/** @typedef {typeof __propDef.slots}  BentoBoxSlots */
-export default class BentoBox extends SvelteComponent<{
-    data?: {};
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BentoBoxProps = typeof __propDef.props;
-export type BentoBoxEvents = typeof __propDef.events;
-export type BentoBoxSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        data?: {};
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {};
-    bindings?: string;
-};
-export {};