@getmicdrop/svelte-components 2.8.1 → 3.1.0

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,56 @@
+<script>
+  /**
+   * Avatar Component - Flowbite-style native implementation
+   *
+   * Displays a user avatar image with optional fallback initials
+   */
+
+  /** @type {string} Image source URL */
+  export let src = "";
+  /** @type {string} Alt text for the image */
+  export let alt = "";
+  /** @type {boolean} Whether to use rounded (circle) shape */
+  export let rounded = false;
+  /** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'} Size variant */
+  export let size = "md";
+  /** @type {string} Fallback initials when no image */
+  export let initials = "";
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  // Size classes
+  const sizeClasses = {
+    xs: "w-6 h-6 text-xs",
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-14 h-14 text-base",
+    xl: "w-20 h-20 text-lg"
+  };
+
+  $: sizeClass = sizeClasses[size] || sizeClasses.md;
+  $: roundedClass = rounded ? "rounded-full" : "rounded";
+</script>
+
+{#if src}
+  <img
+    {src}
+    {alt}
+    class="object-cover {sizeClass} {roundedClass} {className}"
+  />
+{:else if initials}
+  <div
+    class="flex items-center justify-center font-medium text-gray-600 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 {sizeClass} {roundedClass} {className}"
+  >
+    {initials}
+  </div>
+{:else}
+  <!-- Default placeholder -->
+  <div
+    class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 {sizeClass} {roundedClass} {className}"
+  >
+    <svg class="w-1/2 h-1/2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+    </svg>
+  </div>
+{/if}

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

@@ -0,0 +1,37 @@
+export default Avatar;
+type Avatar = SvelteComponent<{
+    class?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    rounded?: boolean | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+    initials?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Avatar: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    rounded?: boolean | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+    initials?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Avatar.svelte.d.ts.map

package/dist/components/Avatar/Avatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Avatar/Avatar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAqEA;;;;;;;;;mBAAqK;6CATxH,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Badges/Badge.stories.svelte

@@ -1,9 +1,10 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
+  
   import Badge from "./Badge.svelte";
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: "Components/Badge",
     component: Badge,
     argTypes: {
@@ -28,12 +29,10 @@
       },
       className: { control: "text" },
     },
-  };
+  });
+
 </script>
 
-<Template let:args>
-  <Badge {...args}>Badge Text</Badge>
-</Template>
 
 <!-- Size Variants -->
 <Story name="Small Badge">

package/dist/components/Badges/Badge.stories.svelte.d.ts

@@ -1,23 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { Badge as component };
-    export namespace argTypes {
-        namespace size {
-            let control: string;
-            let options: string[];
-        }
-        namespace variant {
-            let control_1: string;
-            export { control_1 as control };
-            let options_1: string[];
-            export { options_1 as options };
-        }
-        namespace className {
-            let control_2: string;
-            export { control_2 as control };
-        }
-    }
-}
 export default Badge;
 type Badge = SvelteComponent<{
     [x: string]: never;

package/dist/components/Badges/Badge.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA;;;;mBAAiH;kBAhG7F,gBAAgB;6CAuFS,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Badge.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAoGA;;;;mBAAiH;kBA9F7F,gBAAgB;6CAqFS,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/Badges/Badge.svelte

@@ -1,15 +1,22 @@
 <script>
+  /**
+   * Badge Component - Flowbite Native (Pure Tailwind)
+   *
+   * Variants: neutral, success, warning, error, info
+   * Roles: host, headliner, feature, special-guest, opener, guest, teacher, assistant
+   * Sizes: xs, sm, md (default), lg
+   * Shapes: rounded (default), pill
+   */
   import { createEventDispatcher } from "svelte";
   import { classNames } from "./../../utils/utils.js";
 
   const dispatch = createEventDispatcher();
 
-  export let size = "medium";
+  /** @type {"xs"|"sm"|"md"|"lg"} Size variant */
+  export let size = "md";
   export let className = "";
-  /** @type {string|number} Semantic variant or tier number (1-5) */
+  /** @type {string} Semantic variant for colors */
   export let variant = "neutral";
-  /** @type {string|null} Event display type: "square" or "circle" */
-  export let event = null;
   /** @type {string|null} Custom text color (hex) */
   export let textColor = null;
   /** @type {string|null} Custom background color (hex or rgba) */
@@ -18,111 +25,92 @@
   export let showDot = false;
   /** @type {boolean} Pill mode for counts/notifications (circular, minimal padding) */
   export let pill = false;
-  /** @type {"rounded"|"pill"} Border radius style - rounded-rect or full pill */
+  /** @type {"rounded"|"pill"} Border radius style - default or full pill */
   export let shape = "rounded";
+  /** @type {boolean} Large size (Flowbite API compatibility) */
+  export let large = false;
 
-  $: sizeClass = (() => {
-    switch (size) {
+  // Legacy size name mapping
+  const sizeMap = { "small": "sm", "medium": "md", "large": "lg" };
+  $: resolvedSize = large ? "lg" : (sizeMap[size] || size);
+
+  // Flowbite-native size classes
+  $: sizeClasses = (() => {
+    switch (resolvedSize) {
       case "xs":
-        return "badge-xs";
-      case "small":
-        return "badge-sm";
-      case "medium":
-        return "badge-md";
-      case "large":
-        return "badge-lg";
+        return "text-xs px-1.5 py-0.5 font-medium";
+      case "sm":
+        return "text-xs px-2 py-0.5 font-medium";
+      case "md":
+        return "text-xs px-2.5 py-0.5 font-medium";
+      case "lg":
+        return "text-sm px-3 py-0.5 font-medium";
       default:
-        return "badge-md";
+        return "text-xs px-2.5 py-0.5 font-medium";
     }
   })();
 
-  $: shapeClass = pill ? "badge-pill" : (shape === "pill" ? "badge-shape-pill" : "badge-shape-rounded");
-
-  // Handle tier numbers (1-5) as variants
-  $: normalizedVariant = (() => {
-    if (typeof variant === "number" || !isNaN(Number(variant))) {
-      const tierNum = Number(variant);
-      switch (tierNum) {
-        case 1: return "tier-1";
-        case 2: return "tier-2";
-        case 3: return "tier-3";
-        case 4: return "tier-4";
-        case 5: return "tier-5";
-        default: return "neutral";
-      }
-    }
-    return String(variant).toLowerCase();
+  // Shape classes using Tailwind
+  $: shapeClasses = (() => {
+    if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
+    return shape === "pill" ? "rounded-full" : "rounded";
   })();
 
-  $: variantClass = (() => {
+  // Normalize variant to lowercase
+  $: normalizedVariant = String(variant).toLowerCase();
+
+  // Flowbite-native color classes for each variant
+  $: variantClasses = (() => {
     switch (normalizedVariant) {
-      // Role variants
+      // Role variants (Micdrop-specific, mapped to Flowbite colors)
       case "host":
-        return "badge-host";
+        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300"; // red
       case "headliner":
-        return "badge-headliner";
+        return "text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300"; // purple
       case "feature":
-        return "badge-feature";
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300"; // blue (default)
       case "special-guest":
-        return "badge-special-guest";
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300"; // green
       case "opener":
-        return "badge-opener";
+        return "text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300"; // orange
       case "guest":
-        return "badge-guest";
+        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300"; // gray
       case "teacher":
-        return "badge-teacher";
+        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300"; // yellow
       case "assistant":
-        return "badge-assistant";
-      // Status variants
+        return "text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300"; // indigo
+
+      // Status variants (semantic → Flowbite color)
       case "success":
-        return "badge-success";
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300"; // green
       case "warning":
-        return "badge-warning";
+        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300"; // yellow
       case "error":
       case "danger":
-        return "badge-error";
+        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300"; // red
       case "info":
-        return "badge-info";
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300"; // blue
+
       // Search result type variants
       case "event":
-        return "badge-event-type";
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
       case "venue":
-        return "badge-venue";
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
       case "user":
-        return "badge-user";
+        return "text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300";
       case "order":
-        return "badge-order";
+        return "text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300";
       case "performer":
-        return "badge-performer";
-      // Notification count
+        return "text-pink-800 bg-pink-100 dark:bg-pink-900 dark:text-pink-300";
+
+      // Notification count (solid background)
       case "notification":
-        return "badge-notification";
-      // Tier variants (for lineup position badges)
-      case "tier-1":
-        return "badge-tier-1";
-      case "tier-2":
-        return "badge-tier-2";
-      case "tier-3":
-        return "badge-tier-3";
-      case "tier-4":
-        return "badge-tier-4";
-      case "tier-5":
-        return "badge-tier-5";
-      case "neutral":
-      default:
-        return "badge-neutral";
-    }
-  })();
+        return "text-white bg-red-500 dark:bg-red-600";
 
-  $: eventClass = (() => {
-    if (!event) return "";
-    switch (event) {
-      case "square":
-        return "badge-event-square";
-      case "circle":
-        return "badge-event-circle";
+      // Neutral / default
+      case "neutral":
       default:
-        return "";
+        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300"; // gray
     }
   })();
 
@@ -139,295 +127,42 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class={classNames(
-    "badge",
-    sizeClass,
-    variantClass,
-    eventClass,
-    shapeClass,
+    "inline-flex items-center gap-1.5",
+    sizeClasses,
+    variantClasses,
+    shapeClasses,
     className
   )}
   style={customStyle}
   on:click={(e) => dispatch("click", e)}
 >
   {#if showDot}
-    <span class="badge-dot"></span>
+    <span class="w-1.5 h-1.5 rounded-full bg-current flex-shrink-0"></span>
   {/if}
   <slot name="leftIcon" />
   <slot />
 </div>
 
 <!--
-  Usage: <Badge variant="host">Host</Badge>
-
-  With icon: <Badge variant="success"><CheckIcon slot="leftIcon" />Verified</Badge>
-  With dot:  <Badge variant="success" showDot>On Sale</Badge>
-
-  Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
-  Status variants: success, warning, error, info, neutral
-  Tier variants: 1, 2, 3, 4, 5 (pass as number or string)
-  Event types: event="square" or event="circle"
-  Sizes: xs, small, medium, large
-  Shape: shape="rounded" (default, rounded-rect) or shape="pill" (full pill)
-  Pill mode: pill={true} for notification counts (circular, minimal padding)
-  Custom colors: textColor="#hex" bgColor="rgba(...)"
+  Badge Component - Flowbite Native (Pure Tailwind)
+
+  Usage:
+    <Badge variant="success">Active</Badge>
+    <Badge variant="host">Host</Badge>
+    <Badge large>Large Badge</Badge>
+
+  With icon:
+    <Badge variant="success"><CheckIcon slot="leftIcon" />Verified</Badge>
+
+  With status dot:
+    <Badge variant="success" showDot>On Sale</Badge>
+
+  Props:
+    variant: neutral | success | warning | error | info
+    roles:   host | headliner | feature | special-guest | opener | guest | teacher | assistant
+    size:    xs | sm | md | lg (or legacy: small | medium | large)
+    large:   boolean (Flowbite API compatibility)
+    shape:   rounded | pill
+    pill:    boolean (notification count style)
+    showDot: boolean (status indicator dot)
 -->
-
-<style>
-  /* Base badge styles */
-  .badge {
-    cursor: pointer;
-    gap: 0.375rem;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  /* Status dot */
-  .badge-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 9999px;
-    background-color: currentColor;
-    flex-shrink: 0;
-  }
-
-  /* Size variants */
-  .badge-xs {
-    padding: 2px 6px;
-    font-size: 10px;
-    line-height: 12px;
-    font-weight: 500;
-  }
-
-  .badge-sm {
-    padding: 2px 8px;
-    font-size: 11px;
-    line-height: 14px;
-    font-weight: 500;
-  }
-
-  .badge-md {
-    padding: 4px 10px;
-    font-size: 12px;
-    line-height: 16px;
-    font-weight: 600;
-  }
-
-  .badge-lg {
-    padding: 6px 14px;
-    font-size: 14px;
-    line-height: 18px;
-    font-weight: 500;
-  }
-
-  /* Shape variants - rounded-rect is default */
-  .badge-shape-rounded {
-    border-radius: 4px;
-  }
-
-  /* Full pill shape */
-  .badge-shape-pill {
-    border-radius: 9999px;
-  }
-
-  /* Pill mode for counts/notifications */
-  .badge-pill {
-    border-radius: 9999px;
-    min-width: 20px;
-    height: 20px;
-    padding: 0 6px;
-    font-size: 11px;
-    line-height: 20px;
-    font-weight: 600;
-    justify-content: center;
-  }
-
-  .badge-pill.badge-xs {
-    min-width: 16px;
-    height: 16px;
-    padding: 0 4px;
-    font-size: 10px;
-    line-height: 16px;
-  }
-
-  .badge-pill.badge-sm {
-    min-width: 18px;
-    height: 18px;
-    padding: 0 5px;
-    font-size: 10px;
-    line-height: 18px;
-  }
-
-  .badge-pill.badge-lg {
-    min-width: 24px;
-    height: 24px;
-    padding: 0 8px;
-    font-size: 12px;
-    line-height: 24px;
-  }
-
-  /* Role variants */
-  .badge-host {
-    color: #dc2626;
-    background-color: #fef2f2;
-  }
-
-  .badge-headliner {
-    color: #9333ea;
-    background-color: #faf5ff;
-  }
-
-  .badge-feature {
-    color: #2563eb;
-    background-color: #eff6ff;
-  }
-
-  .badge-special-guest {
-    color: #16a34a;
-    background-color: #f0fdf4;
-  }
-
-  .badge-opener {
-    color: #ea580c;
-    background-color: #fff7ed;
-  }
-
-  .badge-guest {
-    color: #4b5563;
-    background-color: #f9fafb;
-  }
-
-  .badge-teacher {
-    color: #ca8a04;
-    background-color: #fefce8;
-  }
-
-  .badge-assistant {
-    color: #4f46e5;
-    background-color: #eef2ff;
-  }
-
-  /* Status variants */
-  .badge-success {
-    color: #16a34a;
-    background-color: #f0fdf4;
-  }
-
-  .badge-warning {
-    color: #ca8a04;
-    background-color: #fefce8;
-  }
-
-  .badge-error {
-    color: #dc2626;
-    background-color: #fef2f2;
-  }
-
-  .badge-info {
-    color: #2563eb;
-    background-color: #eff6ff;
-  }
-
-  .badge-neutral {
-    color: #4b5563;
-    background-color: #f9fafb;
-  }
-
-  /* Search result type variants */
-  .badge-event-type {
-    color: #1e40af;
-    background-color: #dbeafe;
-  }
-
-  .badge-venue {
-    color: #166534;
-    background-color: #dcfce7;
-  }
-
-  .badge-user {
-    color: #7e22ce;
-    background-color: #f3e8ff;
-  }
-
-  .badge-order {
-    color: #c2410c;
-    background-color: #ffedd5;
-  }
-
-  .badge-performer {
-    color: #be185d;
-    background-color: #fce7f3;
-  }
-
-  /* Notification count variant */
-  .badge-notification {
-    color: #ffffff;
-    background-color: #ef4444;
-  }
-
-  /* Tier variants (lineup position badges) - colors match local frontend implementation */
-  .badge-tier-1 {
-    color: rgba(108, 43, 217, 1);
-    background-color: rgba(108, 43, 217, 0.15);
-  }
-
-  .badge-tier-2 {
-    color: rgba(255, 146, 46, 1);
-    background-color: rgba(255, 146, 46, 0.15);
-  }
-
-  .badge-tier-3 {
-    color: rgba(2, 132, 254, 1);
-    background-color: rgba(2, 132, 254, 0.15);
-  }
-
-  .badge-tier-4 {
-    color: rgba(21, 160, 51, 1);
-    background-color: rgba(21, 160, 51, 0.15);
-  }
-
-  .badge-tier-5 {
-    color: rgba(255, 102, 102, 1);
-    background-color: rgba(255, 102, 102, 0.15);
-  }
-
-  /* Event display types */
-  .badge-event-square {
-    padding: 4px;
-    border-radius: 4px;
-    border: 0.8px solid rgba(2, 132, 254, 0.5);
-    box-shadow:
-      0px 20px 6px 0px rgba(0, 0, 0, 0),
-      0px 13px 5px 0px rgba(0, 0, 0, 0.02),
-      0px 7px 4px 0px rgba(0, 0, 0, 0.08),
-      0px 3px 3px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 14px;
-  }
-
-  .badge-event-circle {
-    padding: 4px;
-    border-radius: 9999px;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-  }
-
-  @media only screen and (max-width: 640px) {
-    .badge-event-square {
-      padding: 2px;
-      font-size: 8px;
-      line-height: 10px;
-      font-weight: 200;
-    }
-
-    .badge-event-circle {
-      padding: 2px;
-      font-size: 8px;
-      gap: 0px;
-      font-weight: 500;
-      line-height: 8px;
-    }
-  }
-</style>