analytica-frontend-lib 1.1.7 → 1.1.8

package/dist/Whiteboard/index.d.mts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+/**
+ * Whiteboard image item interface
+ */
+interface WhiteboardImage {
+    id: string;
+    imageUrl: string;
+    title?: string;
+}
+/**
+ * Whiteboard component props interface
+ */
+interface WhiteboardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Array of images to display in the whiteboard */
+    images: WhiteboardImage[];
+    /** Whether to show download button on images */
+    showDownload?: boolean;
+    /** Custom className for the container */
+    className?: string;
+    /** Callback when download button is clicked */
+    onDownload?: (image: WhiteboardImage) => void;
+    /** Maximum number of images to display per row on desktop */
+    imagesPerRow?: 2 | 3 | 4;
+}
+/**
+ * Whiteboard component for displaying classroom board images
+ * @param props Component properties
+ * @returns Whiteboard component
+ */
+declare const Whiteboard: ({ images, showDownload, className, onDownload, imagesPerRow, ...rest }: WhiteboardProps) => react_jsx_runtime.JSX.Element;
+
+export { type WhiteboardImage, type WhiteboardProps, Whiteboard as default };

package/dist/Whiteboard/index.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+/**
+ * Whiteboard image item interface
+ */
+interface WhiteboardImage {
+    id: string;
+    imageUrl: string;
+    title?: string;
+}
+/**
+ * Whiteboard component props interface
+ */
+interface WhiteboardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Array of images to display in the whiteboard */
+    images: WhiteboardImage[];
+    /** Whether to show download button on images */
+    showDownload?: boolean;
+    /** Custom className for the container */
+    className?: string;
+    /** Callback when download button is clicked */
+    onDownload?: (image: WhiteboardImage) => void;
+    /** Maximum number of images to display per row on desktop */
+    imagesPerRow?: 2 | 3 | 4;
+}
+/**
+ * Whiteboard component for displaying classroom board images
+ * @param props Component properties
+ * @returns Whiteboard component
+ */
+declare const Whiteboard: ({ images, showDownload, className, onDownload, imagesPerRow, ...rest }: WhiteboardProps) => react_jsx_runtime.JSX.Element;
+
+export { type WhiteboardImage, type WhiteboardProps, Whiteboard as default };

package/dist/Whiteboard/index.js

@@ -0,0 +1,151 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Whiteboard/Whiteboard.tsx
+var Whiteboard_exports = {};
+__export(Whiteboard_exports, {
+  default: () => Whiteboard_default
+});
+module.exports = __toCommonJS(Whiteboard_exports);
+var import_react = require("react");
+var import_phosphor_react = require("phosphor-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Whiteboard/Whiteboard.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var IMAGE_WIDTH = 225;
+var IMAGE_HEIGHT = 90;
+var Whiteboard = ({
+  images,
+  showDownload = true,
+  className,
+  onDownload,
+  imagesPerRow = 2,
+  ...rest
+}) => {
+  const [imageErrors, setImageErrors] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const handleDownload = (0, import_react.useCallback)(
+    (image) => {
+      if (onDownload) {
+        onDownload(image);
+      } else {
+        const link = document.createElement("a");
+        link.href = image.imageUrl;
+        link.download = image.title || `whiteboard-${image.id}`;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    },
+    [onDownload]
+  );
+  const handleImageError = (0, import_react.useCallback)((imageId) => {
+    setImageErrors((prev) => new Set(prev).add(imageId));
+  }, []);
+  const gridColsClass = images?.length === 1 ? "grid-cols-1" : {
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+  }[imagesPerRow];
+  if (!images || images.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center p-8 bg-white border border-gray-100 rounded-xl",
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-white border border-gray-100 p-4 gap-2 rounded-xl w-fit mx-auto",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: "relative group overflow-hidden bg-gray-100 rounded-lg",
+          style: {
+            width: `${IMAGE_WIDTH}px`
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "relative",
+                style: {
+                  width: `${IMAGE_WIDTH}px`,
+                  height: `${IMAGE_HEIGHT}px`
+                },
+                children: imageErrors.has(image.id) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "img",
+                    {
+                      src: image.imageUrl,
+                      alt: image.title || `Whiteboard ${image.id}`,
+                      className: "absolute inset-0 w-full h-full object-cover",
+                      loading: "lazy",
+                      onError: () => handleImageError(image.id)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" })
+                ] })
+              }
+            ),
+            showDownload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleDownload(image),
+                className: "absolute bottom-3 right-3 flex items-center justify-center bg-black/20 backdrop-blur-sm rounded hover:bg-black/30 transition-colors duration-200 group/button w-6 h-6",
+                "aria-label": `Download ${image.title || "imagem"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_phosphor_react.DownloadSimple,
+                  {
+                    size: 24,
+                    weight: "regular",
+                    className: "text-white group-hover/button:scale-110 transition-transform duration-200"
+                  }
+                )
+              }
+            )
+          ]
+        },
+        image.id
+      )) })
+    }
+  );
+};
+var Whiteboard_default = Whiteboard;
+//# sourceMappingURL=index.js.map

package/dist/Whiteboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Whiteboard/Whiteboard.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { HTMLAttributes, useCallback, useState } from 'react';\nimport { DownloadSimple } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n// Design constants for critical layout dimensions\nconst IMAGE_WIDTH = 225;\nconst IMAGE_HEIGHT = 90;\n\n/**\n * Whiteboard image item interface\n */\nexport interface WhiteboardImage {\n  id: string;\n  imageUrl: string;\n  title?: string;\n}\n\n/**\n * Whiteboard component props interface\n */\nexport interface WhiteboardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Array of images to display in the whiteboard */\n  images: WhiteboardImage[];\n  /** Whether to show download button on images */\n  showDownload?: boolean;\n  /** Custom className for the container */\n  className?: string;\n  /** Callback when download button is clicked */\n  onDownload?: (image: WhiteboardImage) => void;\n  /** Maximum number of images to display per row on desktop */\n  imagesPerRow?: 2 | 3 | 4;\n}\n\n/**\n * Whiteboard component for displaying classroom board images\n * @param props Component properties\n * @returns Whiteboard component\n */\nconst Whiteboard = ({\n  images,\n  showDownload = true,\n  className,\n  onDownload,\n  imagesPerRow = 2,\n  ...rest\n}: WhiteboardProps) => {\n  // State to track images that failed to load\n  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());\n\n  /**\n   * Handle image download\n   */\n  const handleDownload = useCallback(\n    (image: WhiteboardImage) => {\n      if (onDownload) {\n        onDownload(image);\n      } else {\n        const link = document.createElement('a');\n        link.href = image.imageUrl;\n        link.download = image.title || `whiteboard-${image.id}`;\n        link.target = '_blank';\n        link.rel = 'noopener noreferrer';\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n      }\n    },\n    [onDownload]\n  );\n\n  /**\n   * Handle image loading error\n   */\n  const handleImageError = useCallback((imageId: string) => {\n    setImageErrors((prev) => new Set(prev).add(imageId));\n  }, []);\n\n  const gridColsClass =\n    images?.length === 1\n      ? 'grid-cols-1'\n      : {\n          2: 'grid-cols-1 sm:grid-cols-2',\n          3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n          4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n        }[imagesPerRow];\n\n  // Let CSS handle sizing responsively\n\n  if (!images || images.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center p-8 bg-white border border-gray-100 rounded-xl',\n          className\n        )}\n        {...rest}\n      >\n        <p className=\"text-gray-400 text-sm\">Nenhuma imagem disponível</p>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col bg-white border border-gray-100 p-4 gap-2 rounded-xl w-fit mx-auto',\n        className\n      )}\n      {...rest}\n    >\n      <div className={cn('grid gap-4', gridColsClass)}>\n        {images.map((image) => (\n          <div\n            key={image.id}\n            className=\"relative group overflow-hidden bg-gray-100 rounded-lg\"\n            style={{\n              width: `${IMAGE_WIDTH}px`,\n            }}\n          >\n            <div\n              className=\"relative\"\n              style={{\n                width: `${IMAGE_WIDTH}px`,\n                height: `${IMAGE_HEIGHT}px`,\n              }}\n            >\n              {imageErrors.has(image.id) ? (\n                <div className=\"absolute inset-0 flex items-center justify-center bg-gray-200\">\n                  <p className=\"text-gray-500 text-sm text-center px-2\">\n                    Imagem indisponível\n                  </p>\n                </div>\n              ) : (\n                <>\n                  <img\n                    src={image.imageUrl}\n                    alt={image.title || `Whiteboard ${image.id}`}\n                    className=\"absolute inset-0 w-full h-full object-cover\"\n                    loading=\"lazy\"\n                    onError={() => handleImageError(image.id)}\n                  />\n                  <div className=\"absolute inset-0 bg-gradient-to-t from-black/20 to-transparent\" />\n                </>\n              )}\n            </div>\n            {showDownload && (\n              <button\n                type=\"button\"\n                onClick={() => handleDownload(image)}\n                className=\"absolute bottom-3 right-3 flex items-center justify-center bg-black/20 backdrop-blur-sm rounded hover:bg-black/30 transition-colors duration-200 group/button w-6 h-6\"\n                aria-label={`Download ${image.title || 'imagem'}`}\n              >\n                <DownloadSimple\n                  size={24}\n                  weight=\"regular\"\n                  className=\"text-white group-hover/button:scale-110 transition-transform duration-200\"\n                />\n              </button>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Whiteboard;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/Whiteboard/index.mjs

@@ -0,0 +1,130 @@
+// src/components/Whiteboard/Whiteboard.tsx
+import { useCallback, useState } from "react";
+import { DownloadSimple } from "phosphor-react";
+
+// src/utils/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Whiteboard/Whiteboard.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var IMAGE_WIDTH = 225;
+var IMAGE_HEIGHT = 90;
+var Whiteboard = ({
+  images,
+  showDownload = true,
+  className,
+  onDownload,
+  imagesPerRow = 2,
+  ...rest
+}) => {
+  const [imageErrors, setImageErrors] = useState(/* @__PURE__ */ new Set());
+  const handleDownload = useCallback(
+    (image) => {
+      if (onDownload) {
+        onDownload(image);
+      } else {
+        const link = document.createElement("a");
+        link.href = image.imageUrl;
+        link.download = image.title || `whiteboard-${image.id}`;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    },
+    [onDownload]
+  );
+  const handleImageError = useCallback((imageId) => {
+    setImageErrors((prev) => new Set(prev).add(imageId));
+  }, []);
+  const gridColsClass = images?.length === 1 ? "grid-cols-1" : {
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+  }[imagesPerRow];
+  if (!images || images.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center p-8 bg-white border border-gray-100 rounded-xl",
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsx("p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col bg-white border border-gray-100 p-4 gap-2 rounded-xl w-fit mx-auto",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative group overflow-hidden bg-gray-100 rounded-lg",
+          style: {
+            width: `${IMAGE_WIDTH}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "relative",
+                style: {
+                  width: `${IMAGE_WIDTH}px`,
+                  height: `${IMAGE_HEIGHT}px`
+                },
+                children: imageErrors.has(image.id) ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: image.imageUrl,
+                      alt: image.title || `Whiteboard ${image.id}`,
+                      className: "absolute inset-0 w-full h-full object-cover",
+                      loading: "lazy",
+                      onError: () => handleImageError(image.id)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" })
+                ] })
+              }
+            ),
+            showDownload && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleDownload(image),
+                className: "absolute bottom-3 right-3 flex items-center justify-center bg-black/20 backdrop-blur-sm rounded hover:bg-black/30 transition-colors duration-200 group/button w-6 h-6",
+                "aria-label": `Download ${image.title || "imagem"}`,
+                children: /* @__PURE__ */ jsx(
+                  DownloadSimple,
+                  {
+                    size: 24,
+                    weight: "regular",
+                    className: "text-white group-hover/button:scale-110 transition-transform duration-200"
+                  }
+                )
+              }
+            )
+          ]
+        },
+        image.id
+      )) })
+    }
+  );
+};
+var Whiteboard_default = Whiteboard;
+export {
+  Whiteboard_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Whiteboard/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Whiteboard/Whiteboard.tsx","../../src/utils/utils.ts"],"sourcesContent":["import { HTMLAttributes, useCallback, useState } from 'react';\nimport { DownloadSimple } from 'phosphor-react';\nimport { cn } from '../../utils/utils';\n\n// Design constants for critical layout dimensions\nconst IMAGE_WIDTH = 225;\nconst IMAGE_HEIGHT = 90;\n\n/**\n * Whiteboard image item interface\n */\nexport interface WhiteboardImage {\n  id: string;\n  imageUrl: string;\n  title?: string;\n}\n\n/**\n * Whiteboard component props interface\n */\nexport interface WhiteboardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Array of images to display in the whiteboard */\n  images: WhiteboardImage[];\n  /** Whether to show download button on images */\n  showDownload?: boolean;\n  /** Custom className for the container */\n  className?: string;\n  /** Callback when download button is clicked */\n  onDownload?: (image: WhiteboardImage) => void;\n  /** Maximum number of images to display per row on desktop */\n  imagesPerRow?: 2 | 3 | 4;\n}\n\n/**\n * Whiteboard component for displaying classroom board images\n * @param props Component properties\n * @returns Whiteboard component\n */\nconst Whiteboard = ({\n  images,\n  showDownload = true,\n  className,\n  onDownload,\n  imagesPerRow = 2,\n  ...rest\n}: WhiteboardProps) => {\n  // State to track images that failed to load\n  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());\n\n  /**\n   * Handle image download\n   */\n  const handleDownload = useCallback(\n    (image: WhiteboardImage) => {\n      if (onDownload) {\n        onDownload(image);\n      } else {\n        const link = document.createElement('a');\n        link.href = image.imageUrl;\n        link.download = image.title || `whiteboard-${image.id}`;\n        link.target = '_blank';\n        link.rel = 'noopener noreferrer';\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n      }\n    },\n    [onDownload]\n  );\n\n  /**\n   * Handle image loading error\n   */\n  const handleImageError = useCallback((imageId: string) => {\n    setImageErrors((prev) => new Set(prev).add(imageId));\n  }, []);\n\n  const gridColsClass =\n    images?.length === 1\n      ? 'grid-cols-1'\n      : {\n          2: 'grid-cols-1 sm:grid-cols-2',\n          3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',\n          4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',\n        }[imagesPerRow];\n\n  // Let CSS handle sizing responsively\n\n  if (!images || images.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center p-8 bg-white border border-gray-100 rounded-xl',\n          className\n        )}\n        {...rest}\n      >\n        <p className=\"text-gray-400 text-sm\">Nenhuma imagem disponível</p>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex flex-col bg-white border border-gray-100 p-4 gap-2 rounded-xl w-fit mx-auto',\n        className\n      )}\n      {...rest}\n    >\n      <div className={cn('grid gap-4', gridColsClass)}>\n        {images.map((image) => (\n          <div\n            key={image.id}\n            className=\"relative group overflow-hidden bg-gray-100 rounded-lg\"\n            style={{\n              width: `${IMAGE_WIDTH}px`,\n            }}\n          >\n            <div\n              className=\"relative\"\n              style={{\n                width: `${IMAGE_WIDTH}px`,\n                height: `${IMAGE_HEIGHT}px`,\n              }}\n            >\n              {imageErrors.has(image.id) ? (\n                <div className=\"absolute inset-0 flex items-center justify-center bg-gray-200\">\n                  <p className=\"text-gray-500 text-sm text-center px-2\">\n                    Imagem indisponível\n                  </p>\n                </div>\n              ) : (\n                <>\n                  <img\n                    src={image.imageUrl}\n                    alt={image.title || `Whiteboard ${image.id}`}\n                    className=\"absolute inset-0 w-full h-full object-cover\"\n                    loading=\"lazy\"\n                    onError={() => handleImageError(image.id)}\n                  />\n                  <div className=\"absolute inset-0 bg-gradient-to-t from-black/20 to-transparent\" />\n                </>\n              )}\n            </div>\n            {showDownload && (\n              <button\n                type=\"button\"\n                onClick={() => handleDownload(image)}\n                className=\"absolute bottom-3 right-3 flex items-center justify-center bg-black/20 backdrop-blur-sm rounded hover:bg-black/30 transition-colors duration-200 group/button w-6 h-6\"\n                aria-label={`Download ${image.title || 'imagem'}`}\n              >\n                <DownloadSimple\n                  size={24}\n                  weight=\"regular\"\n                  className=\"text-white group-hover/button:scale-110 transition-transform duration-200\"\n                />\n              </button>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Whiteboard;\n","import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}

package/dist/index.css

@@ -547,6 +547,9 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -1681,6 +1684,9 @@
   .border-exam-4 {
     border-color: var(--color-exam-4);
   }
+  .border-gray-100 {
+    border-color: var(--color-gray-100);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -2047,6 +2053,12 @@
   .bg-background-muted {
     background-color: var(--color-background-muted);
   }
+  .bg-black\/20 {
+    background-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+  }
   .bg-black\/30 {
     background-color: color-mix(in srgb, #000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2173,6 +2185,9 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
@@ -2563,6 +2578,13 @@
     --tw-gradient-position: to top in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .from-black\/20 {
+    --tw-gradient-from: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 20%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-black\/70 {
     --tw-gradient-from: color-mix(in srgb, #000 70%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3730,6 +3752,16 @@
       }
     }
   }
+  .group-hover\/button\:scale-110 {
+    &:is(:where(.group\/button):hover *) {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .placeholder\:text-text-600 {
     &::-moz-placeholder {
       color: var(--color-text-600);
@@ -4616,6 +4648,16 @@
       }
     }
   }
+  .hover\:bg-black\/30 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 30%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -8176,6 +8218,11 @@
       max-width: 100px;
     }
   }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .sm\:flex-row {
     @media (width >= 40rem) {
       flex-direction: row;