flowbite-svelte 1.30.1 → 1.32.0

package/dist/skeleton/VideoPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { size = "sm", class: className }: VideoPlaceholderProps = $props();
 
-  const theme = getTheme("videoPlaceholder");
+  const theme = $derived(getTheme("videoPlaceholder"));
 
   const base = $derived(videoPlaceholder({ size, class: clsx(theme, className) }));
 </script>

package/dist/skeleton/WidgetPlaceholder.svelte

@@ -6,7 +6,7 @@
 
   let { class: className, classes }: WidgetPlaceholderProps = $props();
 
-  const theme = getTheme("widgetPlaceholder");
+  const theme = $derived(getTheme("widgetPlaceholder"));
 
   const { base, wrapper, vLine, hLine } = widgetPlaceholder({});
 </script>

package/dist/speed-dial/SpeedDial.svelte

@@ -33,7 +33,7 @@
     }
   );
 
-  const theme = getTheme("speedDial");
+  const theme = $derived(getTheme("speedDial"));
 
   $effect(() => {
     setContext<SpeedCtxType>("speed-dial", { pill, tooltip, textOutside });

package/dist/speed-dial/SpeedDialButton.svelte

@@ -37,7 +37,7 @@
 
   let tooltip = $derived<Placement | "none">(_tooltip ?? context.tooltip);
 
-  const theme = getTheme("speedDialButton");
+  const theme = $derived(getTheme("speedDialButton"));
 
   let { base, span } = $derived(speedDialButton({ textOutside, noTooltip: tooltip === "none" }));
   let spanCls = $derived(tooltip === "none" || textOutside ? span({ class: clsx(theme?.span, styling.span) }) : "sr-only");

package/dist/spinner/Spinner.svelte

@@ -6,7 +6,7 @@
 
   let { type = "default", color = "primary", size = "8", class: className, currentFill = "inherit", currentColor = "currentColor", ...restProps }: SpinnerProps = $props();
 
-  const theme = getTheme("spinner");
+  const theme = $derived(getTheme("spinner"));
   let spinnerClass = $derived(spinner({ type, color, size, class: clsx(theme, className) }));
 </script>
 

package/dist/split-pane/Divider.svelte

@@ -7,8 +7,8 @@
 
   let { direction, index, onMouseDown, onTouchStart, onKeyDown, isDragging, currentSize, class: className = "" }: DividerProps = $props();
 
-  const themePane = getTheme("divider");
-  const themeDividerHitArea = getTheme("dividerHitArea");
+  const themeDivider = $derived(getTheme("divider"));
+  const themeDividerHitArea = $derived(getTheme("dividerHitArea"));
 
   const isHorizontal = $derived(direction === "horizontal");
   const roundedSize = $derived(Math.round(currentSize));
@@ -25,7 +25,7 @@
   aria-valuemin="0"
   aria-valuemax="100"
   aria-valuetext={`${roundedSize} percent`}
-  class={divider({ direction, isDragging, class: clsx(themePane, className) })}
+  class={divider({ direction, isDragging, class: clsx(themeDivider, className) })}
   onmousedown={(e) => onMouseDown(e, index)}
   use:nonPassiveTouch={(e) => onTouchStart(e, index)}
   onkeydown={(e) => onKeyDown(e, index)}
@@ -37,7 +37,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2258)
+[DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2259)
 ## Props
 @prop direction
 @prop index

package/dist/split-pane/Divider.svelte.d.ts

@@ -2,7 +2,7 @@ import type { DividerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2258)
+ * [DividerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2259)
  * ## Props
  * @prop direction
  * @prop index

package/dist/split-pane/Pane.svelte

@@ -8,7 +8,7 @@
 
   let { children, class: className = "", style = "" }: PaneProps = $props();
 
-  const theme = getTheme("pane");
+  const theme = $derived(getTheme("pane"));
 
   const context = getSplitPaneContext();
   const paneIndex = context ? context.registerPane() : 0;
@@ -47,7 +47,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2252)
+[PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2253)
 ## Props
 @prop children
 @prop class: className = ""

package/dist/split-pane/Pane.svelte.d.ts

@@ -2,7 +2,7 @@ import type { PaneProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2252)
+ * [PaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2253)
  * ## Props
  * @prop children
  * @prop class: className = ""

package/dist/split-pane/SplitPane.svelte

@@ -40,7 +40,7 @@
       transition = transitionProp;
     }
   });
-  const theme = getTheme("splitpane");
+  const theme = $derived(getTheme("splitpane"));
 
   let isDragging = $state(false);
   let startPos = $state(0);
@@ -385,7 +385,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2238)
+[SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2239)
 ## Props
 @prop direction = "horizontal"
 @prop minSize = 100

package/dist/split-pane/SplitPane.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SplitPaneProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2238)
+ * [SplitPaneProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2239)
  * ## Props
  * @prop direction = "horizontal"
  * @prop minSize = 100

package/dist/step-indicator/StepIndicator.svelte

@@ -20,7 +20,7 @@
     ...restProps
   }: StepIndicatorProps = $props();
 
-  const theme = getTheme("stepIndicator");
+  const theme = $derived(getTheme("stepIndicator"));
 
   const { base, label, container, wrapper, step: stepCls, glow: stepGlow, incomplete } = $derived(stepIndicator({ size, color, glow, hideLabel }));
 

package/dist/stepper/BreadcrumbStepper.svelte

@@ -14,7 +14,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("breadcrumbStepper");
+  const theme = $derived(getTheme("breadcrumbStepper"));
 
   const { base, item, indicator } = $derived(breadcrumbStepper());
 

package/dist/stepper/DetailedStepper.svelte

@@ -13,7 +13,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("detailedStepper");
+  const theme = $derived(getTheme("detailedStepper"));
 
   // Override the theme to make current step also highlighted
   const stepperTheme = $derived(() => {

package/dist/stepper/ProgressStepper.svelte

@@ -31,7 +31,7 @@
     }
   });
 
-  const theme = getTheme("progressStepper");
+  const theme = $derived(getTheme("progressStepper"));
 
   const { base, item, circle, line, progressLine } = $derived(progressStepper());
 

package/dist/stepper/Stepper.svelte

@@ -14,7 +14,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("stepper");
+  const theme = $derived(getTheme("stepper"));
 
   const { base, item, content } = $derived(stepper());
 

package/dist/stepper/TimelineStepper.svelte

@@ -15,7 +15,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("timelineStepper");
+  const theme = $derived(getTheme("timelineStepper"));
 
   const { base, item, circle } = $derived(timelineStepper());
 

package/dist/stepper/VerticalStepper.svelte

@@ -14,7 +14,7 @@
     if (current > steps.length && steps.length > 0) current = steps.length;
   });
 
-  const theme = getTheme("verticalStepper");
+  const theme = $derived(getTheme("verticalStepper"));
 
   const { base, card, content } = $derived(verticalStepper());
 

package/dist/table/Table.svelte

@@ -21,7 +21,7 @@
       div: divClass
     }
   );
-  const theme = getTheme("table");
+  const theme = $derived(getTheme("table"));
 
   const { div, table } = $derived(tableCls({ color, shadow }));
 

package/dist/table/TableBodyCell.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, colspan, onclick, ...restProps }: TableBodyCellProps = $props();
 
-  const theme = getTheme("tableBodyCell");
+  const theme = $derived(getTheme("tableBodyCell"));
 </script>
 
 <td {...restProps} class={tableBodyCell({ class: clsx(theme, className) })} colspan={colspan ?? 1}>

package/dist/table/TableBodyRow.svelte

@@ -7,7 +7,7 @@
 
   let { children, class: className, color, striped, hoverable, border, ...restProps }: TableBodyRowProps = $props();
 
-  const theme = getTheme("tableBodyRow");
+  const theme = $derived(getTheme("tableBodyRow"));
 
   const tableCtx = getTableContext();
   // for reactivity with svelte context

package/dist/table/TableHead.svelte

@@ -8,7 +8,7 @@
 
   let { children, headerSlot, color, striped, border, class: className, headItems, defaultRow = true, ...restProps }: TableHeadProps = $props();
 
-  const theme = getTheme("tableHead");
+  const theme = $derived(getTheme("tableHead"));
 
   const tableCtx = getTableContext();
   // for reactivity with svelte context

package/dist/table/TableHeadCell.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: TableHeadCellProps = $props();
 
-  const theme = getTheme("tableHeadCell");
+  const theme = $derived(getTheme("tableHeadCell"));
 </script>
 
 <th {...restProps} class={tableHeadCell({ class: clsx(theme, className) })}>

package/dist/table/TableSearch.svelte

@@ -46,7 +46,7 @@
     }
   );
 
-  const theme = getTheme("tableSearch");
+  const theme = $derived(getTheme("tableSearch"));
 
   const themeColor = $derived(color === "custom" ? "default" : (color as "default" | "blue" | "green" | "red" | "yellow" | "purple" | "indigo" | "pink"));
 

package/dist/tabs/TabItem.svelte

@@ -8,7 +8,7 @@
 
   let { children, titleSlot, open = $bindable(false), title = "Tab title", key, activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
 
-  const theme = getTheme("tabItem");
+  const theme = $derived(getTheme("tabItem"));
   const tabsCtx = getTabsContext();
 
   if (!tabsCtx) {

package/dist/tabs/Tabs.svelte

@@ -17,7 +17,7 @@
     { ulClass: "class", contentClass: "content" }
   );
 
-  const theme = getTheme("tabs");
+  const theme = $derived(getTheme("tabs"));
   const styling = $derived(classes ?? { content: contentClass });
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
 

package/dist/theme/ThemeProvider.svelte

@@ -10,13 +10,18 @@
 
   let { children, theme }: ThemeProviderProps = $props();
 
-  $effect(() => {
-    if (theme) {
-      setThemeContext(theme);
-    } else {
-      console.log("ThemeProvider: No theme provided");
+  // Create a stable object with a reactive getter that will be tracked
+  // when accessed inside $derived expressions in child components
+  const themeContext: { value?: ThemeConfig } = {
+    get value() {
+      // This getter makes the theme reactive - when accessed in a $derived,
+      // it will track the theme prop and update when it changes
+      return theme;
     }
-  });
+  };
+
+  // Set the context once with the stable object
+  setThemeContext(themeContext);
 </script>
 
 {@render children()}

package/dist/theme/themeUtils.js

@@ -1,8 +1,10 @@
 import { getThemeContext } from "../context";
 import { DEV } from "esm-env";
 export function getTheme(componentKey) {
-    const theme = getThemeContext();
-    return theme?.[componentKey];
+    const themeState = getThemeContext();
+    const theme = themeState && "value" in themeState ? themeState.value : themeState;
+    const finalTheme = theme;
+    return finalTheme?.[componentKey];
 }
 /**
  * Warns about deprecated theme-related props and suggests modern alternatives.

package/dist/timeline/Activity.svelte

@@ -6,7 +6,7 @@
 
   let { children, class: className, ...restProps }: ActivityProps = $props();
 
-  const theme = getTheme("activity");
+  const theme = $derived(getTheme("activity"));
 </script>
 
 <ol {...restProps} class={activity({ class: clsx(theme, className) })}>

package/dist/timeline/ActivityItem.svelte

@@ -34,7 +34,7 @@
     }
   );
 
-  const theme = getTheme("activityItem");
+  const theme = $derived(getTheme("activityItem"));
 
   const { li, span, img, outer, inner, time, title, text } = $derived(activityItem());
 </script>

package/dist/timeline/Group.svelte

@@ -22,7 +22,7 @@
     ol: olClass
   });
 
-  const theme = getTheme("group");
+  const theme = $derived(getTheme("group"));
 
   const { div, time, ol } = $derived(group());
 </script>

package/dist/timeline/GroupItem.svelte

@@ -28,7 +28,7 @@
       a: aClass
     }
   );
-  const theme = getTheme("groupItem");
+  const theme = $derived(getTheme("groupItem"));
 
   const { base, a, img, div, title, span, svg } = $derived(groupItem());
 </script>

package/dist/timeline/Timeline.svelte

@@ -7,11 +7,9 @@
 
   let { children, order = "default", class: className, ...restProps }: TimelineProps = $props();
 
-  const theme = getTheme("timeline");
-
-  $effect(() => {
-    setContext<TimelineVariants["order"]>("order", order);
-  });
+  const theme = $derived(getTheme("timeline"));
+  // svelte-ignore state_referenced_locally
+  setContext<TimelineVariants["order"]>("order", order);
   const olCls = $derived(timeline({ order, class: clsx(theme, className) }));
 </script>
 

package/dist/timeline/TimelineItem.svelte

@@ -15,6 +15,7 @@
     isLast = false,
     svgClass,
     liClass,
+    defaultDivClass,
     divClass,
     timeClass,
     h3Class,
@@ -46,10 +47,12 @@
     connector: connectorClass
   });
 
-  const theme = getTheme("timelineItem");
+  const theme = $derived(getTheme("timelineItem"));
   let order = getContext<TimelineVariants["order"]>("order");
 
-  const { base, div, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+  const { base, div, defaultDiv, time, h3, svg, connector } = $derived(timelineItem({ order, color, isLast }));
+
+  const defaultDivCls = $derived(defaultDivClass ? defaultDivClass : defaultDiv());
 
   function formatDisplayDate(dateStr: string, format: DateFormat) {
     const date = new Date(dateStr);
@@ -101,6 +104,7 @@
       </div>
     {/if}
   {:else if date}
+    <div class={defaultDivCls} aria-hidden="true"></div>
     <time datetime={date} class={time({ class: clsx(theme?.time, styling.time) })}>
       {datePrefix}
       {formatDisplayDate(date, dateFormat)}
@@ -140,6 +144,7 @@
 @prop isLast = false
 @prop svgClass
 @prop liClass
+@prop defaultDivClass
 @prop divClass
 @prop timeClass
 @prop h3Class

package/dist/timeline/TimelineItem.svelte.d.ts

@@ -13,6 +13,7 @@ import type { TimelineItemProps } from "../types";
  * @prop isLast = false
  * @prop svgClass
  * @prop liClass
+ * @prop defaultDivClass
  * @prop divClass
  * @prop timeClass
  * @prop h3Class

package/dist/timeline/theme.d.ts

@@ -247,6 +247,7 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     div: string;
+    defaultDiv: string;
     time: string;
     h3: string;
     svg: string;
@@ -302,6 +303,7 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     div: string;
+    defaultDiv: string;
     time: string;
     h3: string;
     svg: string;
@@ -357,6 +359,7 @@ export declare const timelineItem: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     div: string;
+    defaultDiv: string;
     time: string;
     h3: string;
     svg: string;

package/dist/timeline/theme.js

@@ -28,7 +28,7 @@ export const groupItem = tv({
         img: "me-3 mb-3 w-12 h-12 rounded-full sm:mb-0",
         div: "text-gray-600 dark:text-gray-400",
         title: "text-base font-normal",
-        span: "inline-flex items-center text-xs font-normal text-gray-500 dark:text-gray-400",
+        span: "inline-flex items-center bg-gray-100 border border-gray-200 text-xs font-medium px-1.5 py-0.5 rounded",
         svg: "me-1 h-3 w-3"
     }
 });
@@ -94,6 +94,7 @@ export const timelineItem = tv({
     slots: {
         base: "relative",
         div: "",
+        defaultDiv: "absolute w-2 h-2 bg-gray-200 rounded-full mt-1.5 -start-5 border border-buffer",
         time: "",
         h3: "",
         svg: "w-4 h-4",

package/dist/toast/Toast.svelte

@@ -41,7 +41,7 @@
     }
   );
 
-  const theme = getTheme("toast");
+  const theme = $derived(getTheme("toast"));
 
   const { base, icon: iconVariants, content, close } = $derived(toast({ color, position, align }));
 
@@ -78,7 +78,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
+[ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
 ## Props
 @prop children
 @prop icon

package/dist/toast/Toast.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ToastProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1978)
+ * [ToastProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1979)
  * ## Props
  * @prop children
  * @prop icon

package/dist/toast/ToastContainer.svelte

@@ -6,7 +6,7 @@
 
   let { children, position = "top-right", class: className, ...restProps }: ToastContainerProps = $props();
 
-  const theme = getTheme("toastContainer");
+  const theme = $derived(getTheme("toastContainer"));
 
   const positionClasses = {
     "top-left": "top-4 left-4",
@@ -26,7 +26,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
+[ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1994)
 ## Props
 @prop children
 @prop position = "top-right"

package/dist/toast/ToastContainer.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ToastContainerProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1993)
+ * [ToastContainerProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1994)
  * ## Props
  * @prop children
  * @prop position = "top-right"

package/dist/toolbar/Toolbar.svelte

@@ -7,7 +7,7 @@
 
   let { children, end, color, embedded, class: className, classes, ...restProps }: ToolbarProps = $props();
 
-  const theme = getTheme("toolbar");
+  const theme = $derived(getTheme("toolbar"));
 
   const context = $state({ separators: false });
 

package/dist/toolbar/ToolbarButton.svelte

@@ -6,7 +6,7 @@
 
   let { children, color, name, "aria-label": ariaLabel, size, class: className, ...restProps }: ToolbarButtonProps = $props();
 
-  const theme = getTheme("toolbarButton");
+  const theme = $derived(getTheme("toolbarButton"));
 
   const buttonCls = $derived(
     toolbarButton({

package/dist/toolbar/ToolbarGroup.svelte

@@ -7,7 +7,7 @@
 
   let { children, spacing, padding, position = "middle", class: className, ...restProps }: ToolbarGroupProps = $props();
 
-  const theme = getTheme("toolbarGroup");
+  const theme = $derived(getTheme("toolbarGroup"));
 
   const groupCls = $derived(toolbarGroup({ spacing, padding, position, class: clsx(theme, className) }));
 

package/dist/tooltip/Tooltip.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2000)
+[TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
 ## Props
 @prop type = "dark"
 @prop color = undefined

package/dist/tooltip/Tooltip.svelte.d.ts

@@ -2,7 +2,7 @@ import type { TooltipProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2000)
+ * [TooltipProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2001)
  * ## Props
  * @prop type = "dark"
  * @prop color = undefined

package/dist/tour/Tour.svelte

@@ -23,7 +23,7 @@
     ...restProps
   }: TourProps = $props();
 
-  const theme = getTheme("tour");
+  const theme = $derived(getTheme("tour"));
 
   let highlightStyle = $state<string>("");
   let tooltipStyle = $state<string>("");

package/dist/types.d.ts

@@ -155,6 +155,7 @@ export interface AccordionItemProps extends AccordionItemVariants, HTMLAttribute
     header?: Snippet;
     arrowup?: Snippet;
     arrowdown?: Snippet;
+    headingTag?: "h2" | "h3" | "h4" | "h5" | "h6" | "div";
     activeClass?: string;
     inactiveClass?: string;
     transitionType?: TransitionFunc | "none";
@@ -1685,6 +1686,7 @@ export interface TimelineItemProps extends TimelineItemVariants, HTMLLiAttribute
     date: string;
     svgClass?: string;
     liClass?: string;
+    defaultDivClass?: string;
     divClass?: string;
     timeClass?: string;
     h3Class?: string;

package/dist/typography/a/A.svelte

@@ -6,7 +6,7 @@
 
   let { children, color = "primary", asButton = false, onclick, href = "#", class: className, ...restProps }: AnchorProps = $props();
 
-  const theme = getTheme("anchor");
+  const theme = $derived(getTheme("anchor"));
 
   let linkCls = $derived(anchor({ color, class: clsx(theme, className) }));
 
@@ -43,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2004)
+[AnchorProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2005)
 ## Props
 @prop children
 @prop color = "primary"