@dust-tt/sparkle 0.2.454 → 0.2.456

package/src/components/PriceTable.tsx

@@ -24,14 +24,6 @@ const colorTable = {
   emerald: "s-bg-brand-tea-green",
 };
 
-// const colorTable = {
-//   pink: "s-bg-brand-support-rose",
-//   amber: "s-bg-brand-support-golden ",
-//   sky: "s-bg-brand-support-blue",
-//   blue: "s-bg-brand-support-blue",
-//   emerald: "s-bg-brand-support-green",
-// };
-
 const textColorTable = {
   pink: " s-text-brand-red-rose",
   amber: "s-text-brand-orange-golden",

package/src/components/index.ts

@@ -87,7 +87,6 @@ export { Div3D, Hover3D } from "./Hover3D";
 export { Hoverable } from "./Hoverable";
 export { Icon } from "./Icon";
 export { IconButton } from "./IconButton";
-export { IconToggleButton } from "./IconToggleButton";
 export { Input } from "./Input";
 export { Label } from "./Label";
 export type { LinkWrapperProps } from "./LinkWrapper";

package/src/stories/Avatar.stories.tsx

@@ -48,10 +48,10 @@ export const AvatarExample = () => (
     <div className="s-flex s-gap-4">
       <Avatar size="xs" emoji="❤️" backgroundColor="s-bg-red-100" />
       <Avatar size="sm" emoji="💀" backgroundColor="s-bg-gray-800" />
-      <Avatar size="md" emoji="😂" backgroundColor="s-bg-amber-200" />
+      <Avatar size="md" emoji="😂" backgroundColor="s-bg-info-200" />
       <Avatar size="lg" emoji="🧑‍🚀" backgroundColor="s-bg-gray-200" />
-      <Avatar size="xl" emoji="👕" backgroundColor="s-bg-sky-200" />
-      <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-sky-200" />
+      <Avatar size="xl" emoji="👕" backgroundColor="s-bg-blue-200" />
+      <Avatar size="xxl" emoji="👕" backgroundColor="s-bg-blue-200" />
     </div>
     <div className="s-flex s-gap-4">
       <Avatar size="sm" name="Eleanor Wright" />

package/src/stories/ColorPalette.stories.tsx

@@ -18,6 +18,16 @@ const semanticColorFamilies = [
   "warning",
   "info",
 ] as const;
+const extendedColorFamilies = [
+  "blue",
+  "violet",
+  "pink",
+  "red",
+  "orange",
+  "golden",
+  "lime",
+  "emerald",
+] as const;
 
 // Shades to display for each color
 const shades = [
@@ -34,6 +44,21 @@ const shades = [
   "950",
 ] as const;
 
+const semanticShades = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950",
+  "muted",
+] as const;
+
 const ColorSwatch = ({
   colorClass,
   label,
@@ -63,9 +88,15 @@ const ColorSwatch = ({
   </div>
 );
 
-export const ColorPalette = () => {
+export const UIColorPalette = () => {
   return (
     <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">UI Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          Colors to use in the UI for all direct color references.
+        </p>
+      </div>
       {colorFamilies.map((family) => (
         <div key={family} className="s-flex s-flex-col s-gap-4">
           <h3 className="s-text-lg s-font-semibold s-capitalize">{family}</h3>
@@ -88,11 +119,17 @@ export const ColorPalette = () => {
 export const SemanticColorPalette = () => {
   return (
     <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">Semantic Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          Colors to use in the UI for all functional elements.
+        </p>
+      </div>
       {semanticColorFamilies.map((family) => (
         <div key={family} className="s-flex s-flex-col s-gap-4">
           <h3 className="s-text-lg s-font-semibold s-capitalize">{family}</h3>
           <div className="s-flex s-flex-wrap s-gap-4">
-            {shades.map((shade) => (
+            {semanticShades.map((shade) => (
               <div key={shade}>
                 <ColorSwatch
                   colorClass={`s-bg-${family}-${shade} dark:s-bg-${family}-${shade}-night`}
@@ -153,6 +190,16 @@ const brandColorFamilies = [
 export const BrandColorPalette = () => {
   return (
     <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">Brand Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          Colors to use in Marketing / Brand situations:
+        </p>
+        <ul className="s-ml-4 s-list-disc s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          <li>Block colors on the website</li>
+          <li>Communication in the product</li>
+        </ul>
+      </div>
       {brandColorFamilies.map((family) => (
         <div key={family.name} className="s-flex s-flex-col s-gap-4">
           <h3 className="s-text-lg s-font-semibold s-capitalize">
@@ -173,3 +220,37 @@ export const BrandColorPalette = () => {
     </div>
   );
 };
+
+export const ExtendedColorPalette = () => {
+  return (
+    <div className="s-flex s-flex-col s-gap-8">
+      <div className="s-flex s-flex-col s-gap-2">
+        <h2 className="s-text-xl s-font-semibold">Extended Color Palette</h2>
+        <p className="s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          These colors are available for product-specific use cases where
+          semantic colors might not be appropriate. Use them when you need to
+          create visual distinctions, such as:
+        </p>
+        <ul className="s-ml-4 s-list-disc s-text-sm s-text-primary-600 dark:s-text-primary-400">
+          <li>Avatar background colors</li>
+          <li>Data visualization</li>
+        </ul>
+      </div>
+      {extendedColorFamilies.map((family) => (
+        <div key={family} className="s-flex s-flex-col s-gap-4">
+          <h3 className="s-text-lg s-font-semibold s-capitalize">{family}</h3>
+          <div className="s-flex s-flex-wrap s-gap-4">
+            {shades.map((shade) => (
+              <div key={shade}>
+                <ColorSwatch
+                  colorClass={`s-bg-${family}-${shade} dark:s-bg-${family}-${shade}-night`}
+                  label={`${family}-${shade}`}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/stories/ColorPicker.stories.tsx

@@ -11,46 +11,6 @@ const meta = {
 export default meta;
 
 const colors = [
-  "bg-amber-100",
-  "bg-amber-200",
-  "bg-amber-300",
-  "bg-amber-400",
-  "bg-amber-500",
-  "bg-amber-600",
-  "bg-amber-700",
-  "bg-amber-800",
-  "bg-blue-100",
-  "bg-blue-200",
-  "bg-blue-300",
-  "bg-blue-400",
-  "bg-blue-500",
-  "bg-blue-600",
-  "bg-blue-700",
-  "bg-blue-800",
-  "bg-cyan-100",
-  "bg-cyan-200",
-  "bg-cyan-300",
-  "bg-cyan-400",
-  "bg-cyan-500",
-  "bg-cyan-600",
-  "bg-cyan-700",
-  "bg-cyan-800",
-  "bg-emerald-100",
-  "bg-emerald-200",
-  "bg-emerald-300",
-  "bg-emerald-400",
-  "bg-emerald-500",
-  "bg-emerald-600",
-  "bg-emerald-700",
-  "bg-emerald-800",
-  "bg-fuchsia-100",
-  "bg-fuchsia-200",
-  "bg-fuchsia-300",
-  "bg-fuchsia-400",
-  "bg-fuchsia-500",
-  "bg-fuchsia-600",
-  "bg-fuchsia-700",
-  "bg-fuchsia-800",
   "bg-gray-100",
   "bg-gray-200",
   "bg-gray-300",
@@ -59,38 +19,22 @@ const colors = [
   "bg-gray-600",
   "bg-gray-700",
   "bg-gray-800",
-  "bg-green-100",
-  "bg-green-200",
-  "bg-green-300",
-  "bg-green-400",
-  "bg-green-500",
-  "bg-green-600",
-  "bg-green-700",
-  "bg-green-800",
-  "bg-indigo-100",
-  "bg-indigo-200",
-  "bg-indigo-300",
-  "bg-indigo-400",
-  "bg-indigo-500",
-  "bg-indigo-600",
-  "bg-indigo-700",
-  "bg-indigo-800",
-  "bg-lime-100",
-  "bg-lime-200",
-  "bg-lime-300",
-  "bg-lime-400",
-  "bg-lime-500",
-  "bg-lime-600",
-  "bg-lime-700",
-  "bg-lime-800",
-  "bg-orange-100",
-  "bg-orange-200",
-  "bg-orange-300",
-  "bg-orange-400",
-  "bg-orange-500",
-  "bg-orange-600",
-  "bg-orange-700",
-  "bg-orange-800",
+  "bg-blue-100",
+  "bg-blue-200",
+  "bg-blue-300",
+  "bg-blue-400",
+  "bg-blue-500",
+  "bg-blue-600",
+  "bg-blue-700",
+  "bg-blue-800",
+  "bg-violet-100",
+  "bg-violet-200",
+  "bg-violet-300",
+  "bg-violet-400",
+  "bg-violet-500",
+  "bg-violet-600",
+  "bg-violet-700",
+  "bg-violet-800",
   "bg-pink-100",
   "bg-pink-200",
   "bg-pink-300",
@@ -99,14 +43,6 @@ const colors = [
   "bg-pink-600",
   "bg-pink-700",
   "bg-pink-800",
-  "bg-purple-100",
-  "bg-purple-200",
-  "bg-purple-300",
-  "bg-purple-400",
-  "bg-purple-500",
-  "bg-purple-600",
-  "bg-purple-700",
-  "bg-purple-800",
   "bg-red-100",
   "bg-red-200",
   "bg-red-300",
@@ -115,54 +51,38 @@ const colors = [
   "bg-red-600",
   "bg-red-700",
   "bg-red-800",
-  "bg-rose-100",
-  "bg-rose-200",
-  "bg-rose-300",
-  "bg-rose-400",
-  "bg-rose-500",
-  "bg-rose-600",
-  "bg-rose-700",
-  "bg-rose-800",
-  "bg-sky-100",
-  "bg-sky-200",
-  "bg-sky-300",
-  "bg-sky-400",
-  "bg-sky-500",
-  "bg-sky-600",
-  "bg-sky-700",
-  "bg-sky-800",
-  "bg-stone-100",
-  "bg-stone-200",
-  "bg-stone-300",
-  "bg-stone-400",
-  "bg-stone-500",
-  "bg-stone-600",
-  "bg-stone-700",
-  "bg-stone-800",
-  "bg-teal-100",
-  "bg-teal-200",
-  "bg-teal-300",
-  "bg-teal-400",
-  "bg-teal-500",
-  "bg-teal-600",
-  "bg-teal-700",
-  "bg-teal-800",
-  "bg-violet-100",
-  "bg-violet-200",
-  "bg-violet-300",
-  "bg-violet-400",
-  "bg-violet-500",
-  "bg-violet-600",
-  "bg-violet-700",
-  "bg-violet-800",
-  "bg-yellow-100",
-  "bg-yellow-200",
-  "bg-yellow-300",
-  "bg-yellow-400",
-  "bg-yellow-500",
-  "bg-yellow-600",
-  "bg-yellow-700",
-  "bg-yellow-800",
+  "bg-orange-100",
+  "bg-orange-200",
+  "bg-orange-300",
+  "bg-orange-400",
+  "bg-orange-500",
+  "bg-orange-600",
+  "bg-orange-700",
+  "bg-orange-800",
+  "bg-golden-100",
+  "bg-golden-200",
+  "bg-golden-300",
+  "bg-golden-400",
+  "bg-golden-500",
+  "bg-golden-600",
+  "bg-golden-700",
+  "bg-golden-800",
+  "bg-lime-100",
+  "bg-lime-200",
+  "bg-lime-300",
+  "bg-lime-400",
+  "bg-lime-500",
+  "bg-lime-600",
+  "bg-lime-700",
+  "bg-lime-800",
+  "bg-emerald-100",
+  "bg-emerald-200",
+  "bg-emerald-300",
+  "bg-emerald-400",
+  "bg-emerald-500",
+  "bg-emerald-600",
+  "bg-emerald-700",
+  "bg-emerald-800",
 ];
 
 export const ColorPickerExample = () => (

package/src/stories/ContentMessage.stories.tsx

@@ -29,15 +29,15 @@ const meta = {
     },
     variant: {
       options: [
-        "amber",
-        "slate",
-        "emerald",
-        "pink",
-        "purple",
+        "primary",
         "warning",
-        "sky",
-        "action",
-        "red",
+        "success",
+        "highlight",
+        "info",
+        "green",
+        "blue",
+        "rose",
+        "golden",
       ],
       control: { type: "select" },
       description: "Visual style variant",

package/src/stories/DataTable.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
 import {
   ColumnDef,
   PaginationState,
+  RowSelectionState,
   SortingState,
 } from "@tanstack/react-table";
 import React, { useCallback, useMemo, useState } from "react";
@@ -19,7 +20,7 @@ import {
   Input,
   ScrollableDataTable,
 } from "@sparkle/components/";
-import { MenuItem } from "@sparkle/components/DataTable";
+import { createSelectionColumn, MenuItem } from "@sparkle/components/DataTable";
 import { FolderIcon } from "@sparkle/icons";
 
 const meta = {
@@ -45,6 +46,7 @@ type Data = {
     React.ComponentPropsWithoutRef<typeof DropdownMenu>,
     "modal"
   >;
+  id?: number;
   roundedAvatar?: boolean;
 };
 
@@ -529,6 +531,7 @@ const createData = (start: number, count: number) => {
   return Array(count)
     .fill(0)
     .map((_, i) => ({
+      id: i,
       name: `Item ${start + i + 1}`,
       usedBy: Math.floor(Math.random() * 100),
       addedBy: `UserUserUserUserUserUserUserUserUserUserUser ${Math.floor(Math.random() * 10) + 1}`,
@@ -542,6 +545,7 @@ const createData = (start: number, count: number) => {
 
 export const ScrollableDataTableExample = () => {
   const [filter, setFilter] = useState("");
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [data, setData] = useState(() => createData(0, 50));
   const [isLoading, setIsLoading] = useState(false);
 
@@ -559,6 +563,11 @@ export const ScrollableDataTableExample = () => {
   const columnsWithSize = columns.map((column, index) => {
     return { ...column, meta: { sizeRatio: index % 2 === 0 ? 15 : 10 } };
   });
+
+  const columnsWithSelection: ColumnDef<Data>[] = useMemo(
+    () => [createSelectionColumn<Data>(), ...columnsWithSize],
+    []
+  );
   return (
     <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
       <h3 className="s-text-lg s-font-medium">
@@ -577,10 +586,13 @@ export const ScrollableDataTableExample = () => {
           data={data}
           filter={filter}
           filterColumn="name"
-          columns={columnsWithSize}
+          columns={columnsWithSelection}
           onLoadMore={loadMore}
           isLoading={isLoading}
           maxHeight="s-max-h-[500px]"
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
         />
 
         <div className="s-text-sm s-text-muted-foreground">
@@ -590,3 +602,49 @@ export const ScrollableDataTableExample = () => {
     </div>
   );
 };
+
+export const DataTableWithRowSelectionExample = () => {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [data] = useState<Data[]>(() => createData(0, 10));
+  const [filter, setFilter] = useState("");
+
+  const columnsWithSelection: ColumnDef<Data>[] = useMemo(
+    () => [createSelectionColumn<Data>(), ...columns],
+    []
+  );
+
+  return (
+    <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6">
+      <h3 className="s-text-lg s-font-medium">DataTable with Row Selection</h3>
+
+      <div className="s-flex s-flex-col s-gap-4">
+        <Input
+          name="filter"
+          placeholder="Filter"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+        />
+
+        <DataTable
+          data={data}
+          filter={filter}
+          filterColumn="name"
+          columns={columnsWithSelection}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          enableRowSelection={true}
+        />
+
+        <div className="s-rounded-md s-border s-bg-muted/50 s-p-2">
+          <h4 className="s-mb-2 s-font-medium">Selection State:</h4>
+          <pre className="s-overflow-auto s-text-xs">
+            {JSON.stringify(rowSelection, null, 2)}
+          </pre>
+          <p className="s-mt-2 s-text-sm">
+            Selected {Object.keys(rowSelection).length} of {data.length} rows
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

package/dist/esm/components/IconToggleButton.d.ts

@@ -1,17 +0,0 @@
-import React, { ComponentType, MouseEventHandler } from "react";
-import { Tooltip } from "./Tooltip";
-type IconToggleButtonProps = {
-    variant?: "secondary" | "tertiary";
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    size?: "xs" | "sm" | "md";
-    tooltip?: string;
-    tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
-    icon: ComponentType;
-    iconSelected?: ComponentType;
-    className?: string;
-    disabled?: boolean;
-    selected?: boolean;
-};
-export declare function IconToggleButton({ variant, onClick, disabled, tooltip, tooltipPosition, icon, iconSelected, className, selected, size, }: IconToggleButtonProps): React.JSX.Element;
-export {};
-//# sourceMappingURL=IconToggleButton.d.ts.map

package/dist/esm/components/IconToggleButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACnC,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/D,IAAI,EAAE,aAAa,CAAC;IACpB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAkCF,wBAAgB,gBAAgB,CAAC,EAC/B,OAAoB,EACpB,OAAO,EACP,QAAgB,EAChB,OAAO,EACP,eAAuB,EACvB,IAAI,EACJ,YAAY,EACZ,SAAc,EACd,QAAgB,EAChB,IAAW,GACZ,EAAE,qBAAqB,qBA0CvB"}

package/dist/esm/components/IconToggleButton.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { classNames, cn } from "../lib/utils";
-import { Icon } from "./Icon";
-import { Tooltip } from "./Tooltip";
-var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
-var iconClasses = {
-    secondary: {
-        idle: cn("s-text-foreground", "dark:s-text-foreground-night"),
-        selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
-        hover: cn("hover:s-text-highlight-400", "dark:hover:s-text-highlight-400-night"),
-        active: cn("active:s-text-highlight-600", "dark:active:s-text-highlight-600-night"),
-        disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
-    },
-    tertiary: {
-        idle: cn("s-text-primary-600", "dark:s-text-primary-600-night"),
-        selected: cn("s-text-highlight-500", "dark:s-text-highlight-500-night"),
-        hover: cn("hover:s-text-highlight-400", "dark:hover:s-text-highlight-400-night"),
-        active: cn("active:s-text-highlight-600", "dark:active:s-text-highlight-600-night"),
-        disabled: cn("s-text-primary-500", "dark:s-text-primary-500-night"),
-    },
-};
-export function IconToggleButton(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? "top" : _d, icon = _a.icon, iconSelected = _a.iconSelected, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.selected, selected = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? "sm" : _g;
-    var iconGroup = iconClasses[variant];
-    var finalIconClasses = classNames(className, baseClasses, disabled
-        ? iconGroup.disabled
-        : selected
-            ? iconGroup.selected
-            : iconGroup.idle, disabled ? "" : selected ? "" : iconGroup.hover, disabled ? "" : iconGroup.active);
-    var IconButtonToggleContent = (React.createElement("button", { className: finalIconClasses, onClick: function (e) {
-            if (!disabled) {
-                onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
-            }
-        }, disabled: disabled }, icon && (React.createElement(Icon, { visual: selected && iconSelected ? iconSelected : icon, size: size }))));
-    return tooltip ? (React.createElement(Tooltip, { trigger: IconButtonToggleContent, label: tooltip, side: tooltipPosition })) : (IconButtonToggleContent);
-}
-//# sourceMappingURL=IconToggleButton.js.map

package/dist/esm/components/IconToggleButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.js","sourceRoot":"","sources":["../../../src/components/IconToggleButton.tsx"],"names":[],"mappings":"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"}

package/dist/esm/stories/IconToggleButton.stories.d.ts

@@ -1,11 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { IconToggleButton } from "../index_with_tw_base";
-declare const meta: {
-    title: string;
-    component: typeof IconToggleButton;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const IconToggleButtonSecondary: Story;
-export declare const IconToggleButtonTertiary: Story;
-//# sourceMappingURL=IconToggleButton.stories.d.ts.map

package/dist/esm/stories/IconToggleButton.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/IconToggleButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAiB,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAExE,QAAA,MAAM,IAAI;;;CAG+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAOtC,CAAC"}

package/dist/esm/stories/IconToggleButton.stories.js

@@ -1,24 +0,0 @@
-import { Cog6ToothIcon, IconToggleButton } from "../index_with_tw_base";
-var meta = {
-    title: "Primitives/IconToggleButton",
-    component: IconToggleButton,
-};
-export default meta;
-export var IconToggleButtonSecondary = {
-    args: {
-        variant: "secondary",
-        tooltip: "This a secondary IconButton",
-        icon: Cog6ToothIcon,
-        iconSelected: Cog6ToothIcon,
-        selected: false,
-    },
-};
-export var IconToggleButtonTertiary = {
-    args: {
-        variant: "tertiary",
-        tooltip: "This a tertiary IconButton",
-        icon: Cog6ToothIcon,
-        selected: false,
-    },
-};
-//# sourceMappingURL=IconToggleButton.stories.js.map

package/dist/esm/stories/IconToggleButton.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconToggleButton.stories.js","sourceRoot":"","sources":["../../../src/stories/IconToggleButton.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAExE,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;CACY,CAAC;AAE1C,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,IAAM,yBAAyB,GAAU;IAC9C,IAAI,EAAE;QACJ,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,6BAA6B;QACtC,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,aAAa;QAC3B,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,wBAAwB,GAAU;IAC7C,IAAI,EAAE;QACJ,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,4BAA4B;QACrC,IAAI,EAAE,aAAa;QACnB,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC"}