@aivenio/aquarium 6.1.1 → 6.3.0

package/dist/atoms.mjs

@@ -646,8 +646,8 @@ var tokens_default = {
     medium: "rgba(235,235,235,1)",
     intense: "rgba(181,181,183,1)",
     primary: {
-      muted: "rgba(240,254,254,1)",
-      default: "rgba(240,254,254,1)",
+      muted: "rgba(217,249,248,1)",
+      default: "rgba(217,249,248,1)",
       graphic: "rgba(46,208,205,1)",
       intense: "rgba(0,128,124,1)",
       inverse: "rgba(0,128,124,1)",
@@ -691,7 +691,7 @@ var tokens_default = {
       inverse: "rgba(198,42,42,1)"
     },
     status: {
-      announcement: "rgba(240,254,254,1)",
+      announcement: "rgba(217,249,248,1)",
       info: "rgba(233,249,253,1)",
       warning: "rgba(255,249,230,1)",
       danger: "rgba(255,241,241,1)",
@@ -809,6 +809,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,1)",
+    variable: "rgba(123,45,139,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",
@@ -3086,7 +3087,7 @@ var choiceChipClasses = tv10({
     label: "Aquarium-ChoiceChip inline-flex cursor-pointer",
     input: "peer appearance-none",
     chip: [
-      "inline-flex items-center border rounded-full transition whitespace-nowrap hover:bg-primary-hover",
+      "inline-flex items-center border rounded-full transition whitespace-nowrap hover:bg-primary-active",
       "peer-focus-visible:ring-2 peer-focus-visible:ring-info-default peer-focus-visible:ring-offset-1",
       "peer-disabled:cursor-not-allowed peer-disabled:text-inactive peer-disabled:bg-muted peer-disabled:hover:bg-muted"
     ]
@@ -3098,7 +3099,7 @@ var choiceChipClasses = tv10({
     },
     dense: {
       true: { chip: "typography-small py-2 px-3 gap-x-2" },
-      false: { chip: "typography-small py-3 px-5 gap-x-3" }
+      false: { chip: "typography-default py-3 px-5 gap-x-3" }
     }
   },
   defaultVariants: {
@@ -3148,7 +3149,9 @@ var commandPaletteStyles = tv11({
     searchContainer: "flex items-center gap-x-3 p-5 border-b border-muted",
     searchInput: "outline-none grow bg-transparent [&::-webkit-search-cancel-button]:hidden",
     itemIcon: "text-muted group-data-[focused]:text-default",
-    emptyState: "p-6 text-center text-muted typography-default"
+    emptyState: "p-6 text-center text-muted typography-default",
+    breadcrumbHeader: "typography-small font-semibold",
+    breadcrumbBackButton: "text-muted"
   }
 });
 var EmptyState = ({ className, children, ...rest }) => {
@@ -3455,7 +3458,7 @@ var toolbarContainerClasses = tv14({
   base: "col-span-full flex items-stretch py-4 px-l2 border-b border-muted",
   variants: {
     sticky: {
-      true: "sticky top-[47px] bg-layer z-10",
+      true: "sticky top-[43px] bg-layer z-10",
       false: ""
     }
   }
@@ -6623,38 +6626,46 @@ var InputGroup = ({ cols = "1", children, ...rest }) => {
 // src/atoms/Modal/Modal.tsx
 import React38 from "react";
 import { tv as tv18 } from "tailwind-variants";
-var bodyMaskClasses = tv18({
-  variants: {
-    position: {
-      before: [
-        'before:content-[""]',
-        "before:pointer-events-none",
-        "before:sticky",
-        "before:top-0",
-        "before:left-0",
-        "before:h-5",
-        "before:flex-shrink-0",
-        "before:bg-gradient-to-b",
-        "before:from-overlay",
-        "before:to-transparent",
-        "before:z-10"
-      ],
-      after: [
-        'after:content-[""]',
-        "after:pointer-events-none",
-        "after:sticky",
-        "after:bottom-3",
-        "after:left-0",
-        "after:h-5",
-        "after:flex-shrink-0",
-        "after:bg-gradient-to-t",
-        "after:from-overlay",
-        "after:to-transparent",
-        "after:z-10"
-      ]
+
+// src/utils/useScrollFade.ts
+import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState2 } from "react";
+var useScrollFade = () => {
+  const topSentinelRef = useRef2(null);
+  const bottomSentinelRef = useRef2(null);
+  const observerRef = useRef2(null);
+  const [showTopFade, setShowTopFade] = useState2(false);
+  const [showBottomFade, setShowBottomFade] = useState2(false);
+  const containerRef = useCallback((container2) => {
+    observerRef.current?.disconnect();
+    if (!container2) {
+      return;
     }
-  }
-});
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.target === topSentinelRef.current) {
+            setShowTopFade(!entry.isIntersecting);
+          } else if (entry.target === bottomSentinelRef.current) {
+            setShowBottomFade(!entry.isIntersecting);
+          }
+        });
+      },
+      { root: container2, threshold: 0 }
+    );
+    if (topSentinelRef.current) {
+      observerRef.current.observe(topSentinelRef.current);
+    }
+    if (bottomSentinelRef.current) {
+      observerRef.current.observe(bottomSentinelRef.current);
+    }
+  }, []);
+  useEffect4(() => {
+    return () => observerRef.current?.disconnect();
+  }, []);
+  return { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade };
+};
+
+// src/atoms/Modal/Modal.tsx
 var modalStyles = tv18({
   slots: {
     overlay: "inset-0 overflow-y-auto z-modal fixed",
@@ -6666,11 +6677,7 @@ var modalStyles = tv18({
     title: "",
     subtitle: "max-w-[700px]",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
-    body: [
-      "grow overflow-y-auto text-default flex flex-col outline-none",
-      bodyMaskClasses({ position: "before" }),
-      bodyMaskClasses({ position: "after" })
-    ],
+    body: "grow overflow-y-auto text-default flex flex-col outline-none",
     bodyContent: "px-7 grow",
     footer: "px-7 pt-4 pb-6",
     actions: "flex gap-3 justify-end"
@@ -6714,10 +6721,48 @@ var modalStyles = tv18({
       false: {
         headerImage: "bg-medium"
       }
+    },
+    showTopFade: {
+      true: {
+        body: [
+          'before:content-[""]',
+          "before:pointer-events-none",
+          "before:sticky",
+          "before:top-0",
+          "before:left-0",
+          "before:h-5",
+          "before:-mb-5",
+          "before:flex-shrink-0",
+          "before:bg-gradient-to-b",
+          "before:from-overlay",
+          "before:to-transparent",
+          "before:z-10"
+        ]
+      }
+    },
+    showBottomFade: {
+      true: {
+        body: [
+          'after:content-[""]',
+          "after:pointer-events-none",
+          "after:sticky",
+          "after:bottom-0",
+          "after:left-0",
+          "after:h-[60px]",
+          "after:-mt-[60px]",
+          "after:flex-shrink-0",
+          "after:bg-gradient-to-t",
+          "after:from-overlay",
+          "after:to-transparent",
+          "after:z-10"
+        ]
+      }
     }
   },
   defaultVariants: {
-    isResponsive: true
+    isResponsive: true,
+    showTopFade: false,
+    showBottomFade: false
   },
   compoundVariants: [
     {
@@ -6827,10 +6872,31 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ React38.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
+var ModalBody = ({
+  children,
+  className,
+  noFooter = false,
+  maxHeight,
+  style,
+  size,
+  ...rest
+}) => {
   const { body, bodyContent } = modalStyles({ size });
-  return /* @__PURE__ */ React38.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ React38.createElement("div", { className: bodyContent({ noFooter }) }, children));
+  const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
+  return /* @__PURE__ */ React38.createElement(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      className: body({ className, showTopFade, showBottomFade }),
+      style: { maxHeight, ...style }
+    },
+    /* @__PURE__ */ React38.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
+    /* @__PURE__ */ React38.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ React38.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
+  );
 };
+Modal.Body = ModalBody;
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
   return /* @__PURE__ */ React38.createElement("div", { ...rest, className: footer({ className }) }, children);

package/dist/charts.cjs

@@ -219,8 +219,8 @@ var tokens_default = {
     medium: "rgba(235,235,235,1)",
     intense: "rgba(181,181,183,1)",
     primary: {
-      muted: "rgba(240,254,254,1)",
-      default: "rgba(240,254,254,1)",
+      muted: "rgba(217,249,248,1)",
+      default: "rgba(217,249,248,1)",
       graphic: "rgba(46,208,205,1)",
       intense: "rgba(0,128,124,1)",
       inverse: "rgba(0,128,124,1)",
@@ -264,7 +264,7 @@ var tokens_default = {
       inverse: "rgba(198,42,42,1)"
     },
     status: {
-      announcement: "rgba(240,254,254,1)",
+      announcement: "rgba(217,249,248,1)",
       info: "rgba(233,249,253,1)",
       warning: "rgba(255,249,230,1)",
       danger: "rgba(255,241,241,1)",
@@ -382,6 +382,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,1)",
+    variable: "rgba(123,45,139,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",

package/dist/charts.mjs

@@ -79,8 +79,8 @@ var tokens_default = {
     medium: "rgba(235,235,235,1)",
     intense: "rgba(181,181,183,1)",
     primary: {
-      muted: "rgba(240,254,254,1)",
-      default: "rgba(240,254,254,1)",
+      muted: "rgba(217,249,248,1)",
+      default: "rgba(217,249,248,1)",
       graphic: "rgba(46,208,205,1)",
       intense: "rgba(0,128,124,1)",
       inverse: "rgba(0,128,124,1)",
@@ -124,7 +124,7 @@ var tokens_default = {
       inverse: "rgba(198,42,42,1)"
     },
     status: {
-      announcement: "rgba(240,254,254,1)",
+      announcement: "rgba(217,249,248,1)",
       info: "rgba(233,249,253,1)",
       warning: "rgba(255,249,230,1)",
       danger: "rgba(255,241,241,1)",
@@ -242,6 +242,7 @@ var tokens_default = {
   code: {
     background: "rgba(250,250,250,1)",
     text: "rgba(45,46,48,1)",
+    variable: "rgba(123,45,139,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",

package/dist/src/atoms/ChoiceChip/ChoiceChip.js

@@ -17,7 +17,7 @@ const choiceChipClasses = tv({
         label: 'Aquarium-ChoiceChip inline-flex cursor-pointer',
         input: 'peer appearance-none',
         chip: [
-            'inline-flex items-center border rounded-full transition whitespace-nowrap hover:bg-primary-hover',
+            'inline-flex items-center border rounded-full transition whitespace-nowrap hover:bg-primary-active',
             'peer-focus-visible:ring-2 peer-focus-visible:ring-info-default peer-focus-visible:ring-offset-1',
             'peer-disabled:cursor-not-allowed peer-disabled:text-inactive peer-disabled:bg-muted peer-disabled:hover:bg-muted',
         ],
@@ -29,7 +29,7 @@ const choiceChipClasses = tv({
         },
         dense: {
             true: { chip: 'typography-small py-2 px-3 gap-x-2' },
-            false: { chip: 'typography-small py-3 px-5 gap-x-3' },
+            false: { chip: 'typography-default py-3 px-5 gap-x-3' },
         },
     },
     defaultVariants: {
@@ -48,4 +48,4 @@ export const ChoiceChip = (_a) => {
         React.createElement("input", { type: selectionMode, name: name, value: value, className: input(), checked: selected, onChange: handleChange, disabled: disabled }),
         React.createElement("span", { className: chip() }, children)));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hvaWNlQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaG9pY2VDaGlwL0Nob2ljZUNoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUMzQixLQUFLLEVBQUU7UUFDTCxLQUFLLEVBQUUsZ0RBQWdEO1FBQ3ZELEtBQUssRUFBRSxzQkFBc0I7UUFDN0IsSUFBSSxFQUFFO1lBQ0osa0dBQWtHO1lBQ2xHLGlHQUFpRztZQUNqRyxrSEFBa0g7U0FDbkg7S0FDRjtJQUNELFFBQVEsRUFBRTtRQUNSLFFBQVEsRUFBRTtZQUNSLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxpRUFBaUUsRUFBRTtZQUNqRixLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsbUNBQW1DLEVBQUU7U0FDckQ7UUFDRCxLQUFLLEVBQUU7WUFDTCxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsb0NBQW9DLEVBQUU7WUFDcEQsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLG9DQUFvQyxFQUFFO1NBQ3REO0tBQ0Y7SUFDRCxlQUFlLEVBQUU7UUFDZixRQUFRLEVBQUUsS0FBSztRQUNmLEtBQUssRUFBRSxLQUFLO0tBQ2I7Q0FDRixDQUFDLENBQUM7QUEwRUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUE4QixDQUFDLEVBWXJELEVBQUUsRUFBRTtRQVppRCxFQUNwRCxRQUFRLEVBQ1IsS0FBSyxFQUNMLGFBQWEsR0FBRyxVQUFVLEVBQzFCLGNBQWMsR0FBRyxLQUFLLEVBQ3RCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxRQUFRLEVBQ1IsWUFBWSxFQUFFLFNBQVMsT0FFeEIsRUFESSxJQUFJLGNBWDZDLDBIQVlyRCxDQURRO0lBRVAsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsR0FBRyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3RGLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLGlCQUFpQixDQUFDLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFFdEUsTUFBTSxZQUFZLEdBQUcsR0FBRyxFQUFFO1FBQ3hCLFdBQVcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3pCLENBQUMsQ0FBQztJQUVGLE9BQU8sQ0FDTCw2Q0FBTyxTQUFTLEVBQUUsS0FBSyxFQUFFLGdCQUFjLFNBQVMsSUFBTSxJQUFJO1FBQ3hELCtCQUNFLElBQUksRUFBRSxhQUFhLEVBQ25CLElBQUksRUFBRSxJQUFJLEVBQ1YsS0FBSyxFQUFFLEtBQUssRUFDWixTQUFTLEVBQUUsS0FBSyxFQUFFLEVBQ2xCLE9BQU8sRUFBRSxRQUFRLEVBQ2pCLFFBQVEsRUFBRSxZQUFZLEVBQ3RCLFFBQVEsRUFBRSxRQUFRLEdBQ2xCO1FBQ0YsOEJBQU0sU0FBUyxFQUFFLElBQUksRUFBRSxJQUFHLFFBQVEsQ0FBUSxDQUNwQyxDQUNULENBQUM7QUFDSixDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hvaWNlQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9DaG9pY2VDaGlwL0Nob2ljZUNoaXAudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztJQUMzQixLQUFLLEVBQUU7UUFDTCxLQUFLLEVBQUUsZ0RBQWdEO1FBQ3ZELEtBQUssRUFBRSxzQkFBc0I7UUFDN0IsSUFBSSxFQUFFO1lBQ0osbUdBQW1HO1lBQ25HLGlHQUFpRztZQUNqRyxrSEFBa0g7U0FDbkg7S0FDRjtJQUNELFFBQVEsRUFBRTtRQUNSLFFBQVEsRUFBRTtZQUNSLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxpRUFBaUUsRUFBRTtZQUNqRixLQUFLLEVBQUUsRUFBRSxJQUFJLEVBQUUsbUNBQW1DLEVBQUU7U0FDckQ7UUFDRCxLQUFLLEVBQUU7WUFDTCxJQUFJLEVBQUUsRUFBRSxJQUFJLEVBQUUsb0NBQW9DLEVBQUU7WUFDcEQsS0FBSyxFQUFFLEVBQUUsSUFBSSxFQUFFLHNDQUFzQyxFQUFFO1NBQ3hEO0tBQ0Y7SUFDRCxlQUFlLEVBQUU7UUFDZixRQUFRLEVBQUUsS0FBSztRQUNmLEtBQUssRUFBRSxLQUFLO0tBQ2I7Q0FDRixDQUFDLENBQUM7QUEwRUgsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUE4QixDQUFDLEVBWXJELEVBQUUsRUFBRTtRQVppRCxFQUNwRCxRQUFRLEVBQ1IsS0FBSyxFQUNMLGFBQWEsR0FBRyxVQUFVLEVBQzFCLGNBQWMsR0FBRyxLQUFLLEVBQ3RCLE9BQU8sRUFDUCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEtBQUssRUFDTCxRQUFRLEVBQ1IsWUFBWSxFQUFFLFNBQVMsT0FFeEIsRUFESSxJQUFJLGNBWDZDLDBIQVlyRCxDQURRO0lBRVAsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsR0FBRyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsY0FBYyxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ3RGLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxHQUFHLGlCQUFpQixDQUFDLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFFdEUsTUFBTSxZQUFZLEdBQUcsR0FBRyxFQUFFO1FBQ3hCLFdBQVcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3pCLENBQUMsQ0FBQztJQUVGLE9BQU8sQ0FDTCw2Q0FBTyxTQUFTLEVBQUUsS0FBSyxFQUFFLGdCQUFjLFNBQVMsSUFBTSxJQUFJO1FBQ3hELCtCQUNFLElBQUksRUFBRSxhQUFhLEVBQ25CLElBQUksRUFBRSxJQUFJLEVBQ1YsS0FBSyxFQUFFLEtBQUssRUFDWixTQUFTLEVBQUUsS0FBSyxFQUFFLEVBQ2xCLE9BQU8sRUFBRSxRQUFRLEVBQ2pCLFFBQVEsRUFBRSxZQUFZLEVBQ3RCLFFBQVEsRUFBRSxRQUFRLEdBQ2xCO1FBQ0YsOEJBQU0sU0FBUyxFQUFFLElBQUksRUFBRSxJQUFHLFFBQVEsQ0FBUSxDQUNwQyxDQUNULENBQUM7QUFDSixDQUFDLENBQUMifQ==

package/dist/src/atoms/CommandPalette/CommandPalette.d.ts

@@ -8,6 +8,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
             searchContainer?: import("tailwind-merge").ClassNameValue;
             searchInput?: import("tailwind-merge").ClassNameValue;
             itemIcon?: import("tailwind-merge").ClassNameValue;
+            breadcrumbHeader?: import("tailwind-merge").ClassNameValue;
+            breadcrumbBackButton?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
@@ -19,6 +21,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
             searchContainer?: import("tailwind-merge").ClassNameValue;
             searchInput?: import("tailwind-merge").ClassNameValue;
             itemIcon?: import("tailwind-merge").ClassNameValue;
+            breadcrumbHeader?: import("tailwind-merge").ClassNameValue;
+            breadcrumbBackButton?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -28,6 +32,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
     searchInput: string;
     itemIcon: string;
     emptyState: string;
+    breadcrumbHeader: string;
+    breadcrumbBackButton: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
@@ -37,6 +43,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
             searchContainer?: import("tailwind-merge").ClassNameValue;
             searchInput?: import("tailwind-merge").ClassNameValue;
             itemIcon?: import("tailwind-merge").ClassNameValue;
+            breadcrumbHeader?: import("tailwind-merge").ClassNameValue;
+            breadcrumbBackButton?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}>, {
@@ -48,6 +56,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
             searchContainer?: import("tailwind-merge").ClassNameValue;
             searchInput?: import("tailwind-merge").ClassNameValue;
             itemIcon?: import("tailwind-merge").ClassNameValue;
+            breadcrumbHeader?: import("tailwind-merge").ClassNameValue;
+            breadcrumbBackButton?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -57,6 +67,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
     searchInput: string;
     itemIcon: string;
     emptyState: string;
+    breadcrumbHeader: string;
+    breadcrumbBackButton: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     modal: string;
     dialog: string;
@@ -64,6 +76,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
     searchInput: string;
     itemIcon: string;
     emptyState: string;
+    breadcrumbHeader: string;
+    breadcrumbBackButton: string;
 }, undefined, import("tailwind-variants/dist/config").TVConfig<unknown, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
@@ -73,6 +87,8 @@ export declare const commandPaletteStyles: import("tailwind-variants").TVReturnT
             searchContainer?: import("tailwind-merge").ClassNameValue;
             searchInput?: import("tailwind-merge").ClassNameValue;
             itemIcon?: import("tailwind-merge").ClassNameValue;
+            breadcrumbHeader?: import("tailwind-merge").ClassNameValue;
+            breadcrumbBackButton?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}>, unknown, unknown, undefined>>;

package/dist/src/atoms/CommandPalette/CommandPalette.js

@@ -20,6 +20,8 @@ export const commandPaletteStyles = tv({
         searchInput: 'outline-none grow bg-transparent [&::-webkit-search-cancel-button]:hidden',
         itemIcon: 'text-muted group-data-[focused]:text-default',
         emptyState: 'p-6 text-center text-muted typography-default',
+        breadcrumbHeader: 'typography-small font-semibold',
+        breadcrumbBackButton: 'text-muted',
     },
 });
 const EmptyState = (_a) => {
@@ -30,4 +32,4 @@ const EmptyState = (_a) => {
 export const CommandPalette = {
     EmptyState,
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29tbWFuZFBhbGV0dGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvQ29tbWFuZFBhbGV0dGUvQ29tbWFuZFBhbGV0dGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxlQUFlO0FBRWYsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsRUFBRSxDQUFDO0lBQ3JDLEtBQUssRUFBRTtRQUNMLEtBQUssRUFBRSwyQkFBMkI7UUFDbEMsTUFBTSxFQUFFLDhEQUE4RDtRQUN0RSxlQUFlLEVBQUUscURBQXFEO1FBQ3RFLFdBQVcsRUFBRSwyRUFBMkU7UUFDeEYsUUFBUSxFQUFFLDhDQUE4QztRQUN4RCxVQUFVLEVBQUUsK0NBQStDO0tBQzVEO0NBQ0YsQ0FBQyxDQUFDO0FBTUgsTUFBTSxVQUFVLEdBQXVCLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsU0FBUyxFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFDcEUsTUFBTSxFQUFFLFVBQVUsRUFBRSxHQUFHLG9CQUFvQixFQUFFLENBQUM7SUFDOUMsT0FBTyxDQUNMLDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsU0FBUyxFQUFFLENBQUMsS0FDaEQsUUFBUSxJQUFJLG9CQUFvQixDQUM3QixDQUNQLENBQUM7QUFDSixDQUFDLENBQUM7QUFRRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQWdDO0lBQ3pELFVBQVU7Q0FDWCxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29tbWFuZFBhbGV0dGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvYXRvbXMvQ29tbWFuZFBhbGV0dGUvQ29tbWFuZFBhbGV0dGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUV2QyxlQUFlO0FBRWYsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsRUFBRSxDQUFDO0lBQ3JDLEtBQUssRUFBRTtRQUNMLEtBQUssRUFBRSwyQkFBMkI7UUFDbEMsTUFBTSxFQUFFLDhEQUE4RDtRQUN0RSxlQUFlLEVBQUUscURBQXFEO1FBQ3RFLFdBQVcsRUFBRSwyRUFBMkU7UUFDeEYsUUFBUSxFQUFFLDhDQUE4QztRQUN4RCxVQUFVLEVBQUUsK0NBQStDO1FBQzNELGdCQUFnQixFQUFFLGdDQUFnQztRQUNsRCxvQkFBb0IsRUFBRSxZQUFZO0tBQ25DO0NBQ0YsQ0FBQyxDQUFDO0FBTUgsTUFBTSxVQUFVLEdBQXVCLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsU0FBUyxFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFDcEUsTUFBTSxFQUFFLFVBQVUsRUFBRSxHQUFHLG9CQUFvQixFQUFFLENBQUM7SUFDOUMsT0FBTyxDQUNMLDZDQUFTLElBQUksSUFBRSxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsU0FBUyxFQUFFLENBQUMsS0FDaEQsUUFBUSxJQUFJLG9CQUFvQixDQUM3QixDQUNQLENBQUM7QUFDSixDQUFDLENBQUM7QUFRRixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQWdDO0lBQ3pELFVBQVU7Q0FDWCxDQUFDIn0=

package/dist/src/atoms/DataList/DataList.js

@@ -96,7 +96,7 @@ const toolbarContainerClasses = tv({
     base: 'col-span-full flex items-stretch py-4 px-l2 border-b border-muted',
     variants: {
         sticky: {
-            true: 'sticky top-[47px] bg-layer z-10',
+            true: 'sticky top-[43px] bg-layer z-10',
             false: '',
         },
     },

package/dist/src/atoms/Modal/Modal.d.ts

@@ -77,6 +77,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     overlay: string;
     backdrop: string;
@@ -87,7 +97,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string;
     subtitle: string;
     closeButtonContainer: string;
-    body: string[];
+    body: string;
     bodyContent: string;
     footer: string;
     actions: string;
@@ -131,6 +141,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     kind: {
         dialog: {
@@ -171,6 +191,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }>, {
     kind: {
         dialog: {
@@ -211,6 +241,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     overlay: string;
     backdrop: string;
@@ -221,7 +261,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string;
     subtitle: string;
     closeButtonContainer: string;
-    body: string[];
+    body: string;
     bodyContent: string;
     footer: string;
     actions: string;
@@ -265,6 +305,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     overlay: string;
     backdrop: string;
@@ -275,7 +325,7 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
     title: string;
     subtitle: string;
     closeButtonContainer: string;
-    body: string[];
+    body: string;
     bodyContent: string;
     footer: string;
     actions: string;
@@ -319,6 +369,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }, {
     kind: {
         dialog: {
@@ -359,6 +419,16 @@ export declare const modalStyles: import("tailwind-variants").TVReturnType<{
             headerImage: string;
         };
     };
+    showTopFade: {
+        true: {
+            body: string[];
+        };
+    };
+    showBottomFade: {
+        true: {
+            body: string[];
+        };
+    };
 }>, unknown, unknown, undefined>>;
 export declare const Modal: ComposedModalProps & React.FC<DivProps & ModalProps>;
 export {};