singularity-components 0.1.55 → 0.1.57

package/dist/main.cjs

@@ -32,11 +32,15 @@ var main_exports = {};
 __export(main_exports, {
   Badge: () => Badge,
   Button: () => Button,
-  Demo: () => Demo,
-  Layout: () => Layout
+  Heading: () => Heading,
+  Layout: () => Layout,
+  Text: () => Text
 });
 module.exports = __toCommonJS(main_exports);
 
+// lib/components/ui/heading/heading.tsx
+var import_class_variance_authority = require("class-variance-authority");
+
 // lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -47,16 +51,100 @@ function cn(...inputs) {
   return twMergeWithPrefix((0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs)));
 }
 
-// lib/components/Demo.tsx
+// lib/components/ui/heading/heading.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Demo = ({ text }) => {
+var headingVariants = (0, import_class_variance_authority.cva)("", {
+  variants: {
+    variant: {
+      h1: "sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl",
+      h2: "sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0",
+      h3: "sg-text-2xl sg-font-semibold sg-tracking-tight",
+      h4: "sg-text-xl sg-font-semibold sg-tracking-tight"
+    },
+    foreground: {
+      default: "sg-text-foreground",
+      muted: "sg-text-muted-foreground",
+      primary: "sg-text-primary"
+    }
+  },
+  defaultVariants: {
+    variant: "h2",
+    foreground: "default"
+  }
+});
+var Heading = ({
+  children,
+  as = "h2",
+  variant,
+  foreground,
+  className,
+  ...props
+}) => {
+  const Component = as;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    Component,
+    {
+      className: cn(headingVariants({ variant, foreground, className })),
+      ...props,
+      children
+    }
+  );
+};
+
+// lib/components/ui/text/text.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var textVariants = (0, import_class_variance_authority2.cva)("", {
+  variants: {
+    size: {
+      xs: "sg-text-xs",
+      sm: "sg-text-sm",
+      base: "sg-text-base",
+      lg: "sg-text-lg",
+      xl: "sg-text-xl"
+    },
+    foreground: {
+      default: "sg-text-foreground",
+      muted: "sg-text-muted-foreground",
+      primary: "sg-text-primary",
+      secondary: "sg-text-secondary-foreground",
+      destructive: "sg-text-destructive",
+      accent: "sg-text-accent-foreground"
+    },
+    weight: {
+      normal: "sg-font-normal",
+      medium: "sg-font-medium",
+      semibold: "sg-font-semibold",
+      bold: "sg-font-bold"
+    }
+  },
+  defaultVariants: {
+    size: "base",
+    foreground: "default",
+    weight: "normal"
+  }
+});
+var Text = ({
+  children,
+  size,
+  foreground,
+  weight,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "p",
     {
       className: cn(
-        "sg-text-orange-500 sg-p-4 sg-p-3 sg-text-white sg-bg-black"
+        textVariants({
+          size,
+          foreground,
+          weight,
+          className
+        })
       ),
-      children: text
+      ...props,
+      children
     }
   );
 };
@@ -64,9 +152,9 @@ var Demo = ({ text }) => {
 // lib/components/ui/button/button.tsx
 var React = __toESM(require("react"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
-var import_class_variance_authority = require("class-variance-authority");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var buttonVariants = (0, import_class_variance_authority.cva)(
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority3.cva)(
   "sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0",
   {
     variants: {
@@ -94,7 +182,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
 var Button = React.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -107,9 +195,9 @@ var Button = React.forwardRef(
 Button.displayName = "Button";
 
 // lib/components/ui/badge/badge.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority2.cva)(
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority4.cva)(
   "sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2",
   {
     variants: {
@@ -126,68 +214,104 @@ var badgeVariants = (0, import_class_variance_authority2.cva)(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // lib/components/ui/layout/layout.tsx
 var React2 = __toESM(require("react"), 1);
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var layoutVariants = (0, import_class_variance_authority3.cva)("sg-grid sg-gap-4 ", {
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var bgColor = {
+  transparent: "sg-bg-transparent",
+  white: "sg-bg-white",
+  black: "sg-bg-black",
+  orange: "sg-bg-orange",
+  purple: "sg-bg-purple"
+};
+var layoutVariants = (0, import_class_variance_authority5.cva)("sg-grid sg-gap-4 sg-grid-cols-1", {
   variants: {
     variant: {
-      "100": "sg-grid-cols-1",
-      "66-33": "sg-grid-cols-1 md:sg-grid-cols-2",
-      "50-50": "sg-grid-cols-1 md:sg-grid-cols-2",
-      "33-33-33": "sg-grid-cols-1 md:sg-grid-cols-2",
-      "25-25-25-25": "sg-grid-cols-1 md:sg-grid-cols-2"
-    }
+      "100": "",
+      "66-33": "md:sg-grid-cols-2",
+      "50-50": "md:sg-grid-cols-2",
+      "33-33-33": "md:sg-grid-cols-3",
+      "25-25-25-25": "md:sg-grid-cols-4"
+    },
+    fill: {
+      full: "sg-w-full sg-p-4",
+      col: "sg-mx-auto sg-max-w-[960px] sg-p-4 md:sg-p-0"
+    },
+    padding: {
+      "": "",
+      none: "sg-p-0"
+    },
+    bgcolor: bgColor
   },
   defaultVariants: {
-    variant: "100"
+    variant: "100",
+    fill: "col",
+    padding: "",
+    bgcolor: "transparent"
   }
 });
 function Layout({
   children,
   className,
-  variant = "100"
+  variant,
+  fill,
+  padding,
+  bgcolor
 }) {
   const allowedInLayout = (content) => {
     if (content.type === Layout.Col1) {
       return true;
-    } else if (content.type === Layout.Col2 && (variant === "66-33" || variant === "50-50")) {
+    } else if (content.type === Layout.Col2 && (variant === "66-33" || variant === "50-50" || variant === "33-33-33" || variant === "25-25-25-25")) {
       return true;
     } else if (content.type === Layout.Col3 && (variant === "33-33-33" || variant === "25-25-25-25")) {
       return true;
     } else if (content.type === Layout.Col4 && variant === "25-25-25-25") {
       return true;
     }
-    console.error("Content not allowed in column for layout", content.type);
+    console.error(
+      "Content not allowed in column for variant",
+      variant,
+      content.type
+    );
     return false;
   };
   const renderColumn = (content) => {
     if (!allowedInLayout(content)) {
       return;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: content });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "sg-mx-auto sg-max-w-[960px]", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(layoutVariants({ variant }), className), children: React2.Children.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(bgColor[bgcolor ?? "transparent"], className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn(layoutVariants({ variant, fill, padding, bgcolor })), children: React2.Children.map(
     children,
-    (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {})
+    (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {})
   ) }) });
 }
-function Col({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+function Col1({ children }) {
+  return children;
+}
+function Col2({ children }) {
+  return children;
+}
+function Col3({ children }) {
+  return children;
+}
+function Col4({ children }) {
+  return children;
 }
-Layout.Col1 = Col;
-Layout.Col2 = Col;
-Layout.Col3 = Col;
-Layout.Col4 = Col;
+Layout.Col1 = Col1;
+Layout.Col2 = Col2;
+Layout.Col3 = Col3;
+Layout.Col4 = Col4;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
   Button,
-  Demo,
-  Layout
+  Heading,
+  Layout,
+  Text
 });
 //# sourceMappingURL=main.cjs.map

package/dist/main.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/main.ts","../lib/utils.ts","../lib/components/Demo.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import \"./tailwind.css\";\n\nexport { Demo } from \"./components/Demo\";\n\nexport { Button } from \"./components/ui/button/button\";\nexport { Badge } from \"./components/ui/badge/badge\";\n\nexport { Layout } from \"./components/ui/layout/layout\";\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\nimport {} from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  const twMergeWithPrefix = extendTailwindMerge({\r\n    prefix: \"sg-\",\r\n  });\r\n\r\n  return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import { cn } from \"../utils\";\n\ntype props = {\n  text?: string;\n};\n\nexport const Demo = ({ text }: props) => {\n  return (\n    <div\n      className={cn(\n        \"sg-text-orange-500 sg-p-4 sg-p-3 sg-text-white sg-bg-black\"\n      )}\n    >\n      {text}\n    </div>\n  );\n};\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n  \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n        secondary:\n          \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n        destructive:\n          \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n        outline:\n          \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n        ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n        link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n      },\n      size: {\n        default: \"sg-h-9 sg-px-4 sg-py-2\",\n        sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n        lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n        icon: \"sg-h-9 sg-w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends OmitClassProperty<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"className\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n  \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n        purple:\n          \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n        green:\n          \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n        outline: \"sg-text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n    VariantProps<typeof badgeVariants> {\n  className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { TailwindMarginClass } from \"../../../lib/types\";\nimport { PropsWithChildren } from \"react\";\n\nconst layoutVariants = cva(\"sg-grid sg-gap-4 \", {\n  variants: {\n    variant: {\n      \"100\": \"sg-grid-cols-1\",\n      \"66-33\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n      \"50-50\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n      \"33-33-33\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n      \"25-25-25-25\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"100\",\n  },\n});\n\nexport interface LayoutProps extends VariantProps<typeof layoutVariants> {\n  fullWidth?: boolean;\n  className?: TailwindMarginClass;\n}\n\nfunction Layout({\n  children,\n  className,\n  variant = \"100\",\n}: PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (variant === \"66-33\" || variant === \"50-50\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (variant === \"33-33-33\" || variant === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && variant === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\"Content not allowed in column for layout\", content.type);\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return <div>{content}</div>;\n  };\n\n  return (\n    <div className=\"sg-mx-auto sg-max-w-[960px]\">\n      <div className={cn(layoutVariants({ variant }), className)}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </div>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n};\n\nfunction Col({ children }: colProp) {\n  return <>{children}</>;\n}\n\nLayout.Col1 = Col;\nLayout.Col2 = Col;\nLayout.Col3 = Col;\nLayout.Col4 = Col;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","React","import_class_variance_authority","import_jsx_runtime"]}
+{"version":3,"sources":["../lib/main.ts","../lib/components/ui/heading/heading.tsx","../lib/utils.ts","../lib/components/ui/text/text.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import \"./tailwind.css\";\n\nexport * from \"./components\";\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst headingVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      h1: \"sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl\",\r\n      h2: \"sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0\",\r\n      h3: \"sg-text-2xl sg-font-semibold sg-tracking-tight\",\r\n      h4: \"sg-text-xl sg-font-semibold sg-tracking-tight\",\r\n    },\r\n    foreground: {\r\n      default: \"sg-text-foreground\",\r\n      muted: \"sg-text-muted-foreground\",\r\n      primary: \"sg-text-primary\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"h2\",\r\n    foreground: \"default\",\r\n  },\r\n});\r\n\r\nexport interface HeadingProps\r\n  extends OmitClassProperty<\r\n      React.HTMLAttributes<HTMLHeadingElement>,\r\n      \"className\"\r\n    >,\r\n    VariantProps<typeof headingVariants> {\r\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n  className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Heading: React.FC<HeadingProps> = ({\r\n  children,\r\n  as = \"h2\",\r\n  variant,\r\n  foreground,\r\n  className,\r\n  ...props\r\n}) => {\r\n  const Component = as;\r\n\r\n  return (\r\n    <Component\r\n      className={cn(headingVariants({ variant, foreground, className }))}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </Component>\r\n  );\r\n};\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\nimport {} from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  const twMergeWithPrefix = extendTailwindMerge({\r\n    prefix: \"sg-\",\r\n  });\r\n\r\n  return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst textVariants = cva(\"\", {\r\n  variants: {\r\n    size: {\r\n      xs: \"sg-text-xs\",\r\n      sm: \"sg-text-sm\",\r\n      base: \"sg-text-base\",\r\n      lg: \"sg-text-lg\",\r\n      xl: \"sg-text-xl\",\r\n    },\r\n    foreground: {\r\n      default: \"sg-text-foreground\",\r\n      muted: \"sg-text-muted-foreground\",\r\n      primary: \"sg-text-primary\",\r\n      secondary: \"sg-text-secondary-foreground\",\r\n      destructive: \"sg-text-destructive\",\r\n      accent: \"sg-text-accent-foreground\",\r\n    },\r\n    weight: {\r\n      normal: \"sg-font-normal\",\r\n      medium: \"sg-font-medium\",\r\n      semibold: \"sg-font-semibold\",\r\n      bold: \"sg-font-bold\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"base\",\r\n    foreground: \"default\",\r\n    weight: \"normal\",\r\n  },\r\n});\r\n\r\nexport interface TextProps\r\n  extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\r\n    VariantProps<typeof textVariants> {\r\n  className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Text: React.FC<TextProps> = ({\r\n  children,\r\n  size,\r\n  foreground,\r\n  weight,\r\n  className,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <p\r\n      className={cn(\r\n        textVariants({\r\n          size,\r\n          foreground,\r\n          weight,\r\n          className,\r\n        })\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n  \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n        secondary:\n          \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n        destructive:\n          \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n        outline:\n          \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n        ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n        link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n      },\n      size: {\n        default: \"sg-h-9 sg-px-4 sg-py-2\",\n        sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n        lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n        icon: \"sg-h-9 sg-w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends OmitClassProperty<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"className\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n  \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n        purple:\n          \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n        green:\n          \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n        outline: \"sg-text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n    VariantProps<typeof badgeVariants> {\n  className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { TailwindMarginClass } from \"../../../lib/types\";\nimport { PropsWithChildren } from \"react\";\n\nconst bgColor = {\n  transparent: \"sg-bg-transparent\",\n  white: \"sg-bg-white\",\n  black: \"sg-bg-black\",\n  orange: \"sg-bg-orange\",\n  purple: \"sg-bg-purple\",\n};\n\nconst layoutVariants = cva(\"sg-grid sg-gap-4 sg-grid-cols-1\", {\n  variants: {\n    variant: {\n      \"100\": \"\",\n      \"66-33\": \"md:sg-grid-cols-2\",\n      \"50-50\": \"md:sg-grid-cols-2\",\n      \"33-33-33\": \"md:sg-grid-cols-3\",\n      \"25-25-25-25\": \"md:sg-grid-cols-4\",\n    },\n    fill: {\n      full: \"sg-w-full sg-p-4\",\n      col: \"sg-mx-auto sg-max-w-[960px] sg-p-4 md:sg-p-0\",\n    },\n    padding: {\n      \"\": \"\",\n      none: \"sg-p-0\",\n    },\n    bgcolor: bgColor,\n  },\n  defaultVariants: {\n    variant: \"100\",\n    fill: \"col\",\n    padding: \"\",\n    bgcolor: \"transparent\",\n  },\n});\n\nexport interface LayoutProps extends VariantProps<typeof layoutVariants> {\n  className?: TailwindMarginClass;\n}\n\nfunction Layout({\n  children,\n  className,\n  variant,\n  fill,\n  padding,\n  bgcolor,\n}: PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (variant === \"66-33\" ||\n        variant === \"50-50\" ||\n        variant === \"33-33-33\" ||\n        variant === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (variant === \"33-33-33\" || variant === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && variant === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\n      \"Content not allowed in column for variant\",\n      variant,\n      content.type\n    );\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return <div>{content}</div>;\n  };\n\n  return (\n    <div className={cn(bgColor[bgcolor ?? \"transparent\"], className)}>\n      <div className={cn(layoutVariants({ variant, fill, padding, bgcolor }))}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </div>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n};\n\nfunction Col1({ children }: colProp) {\n  return children;\n}\nfunction Col2({ children }: colProp) {\n  return children;\n}\nfunction Col3({ children }: colProp) {\n  return children;\n}\nfunction Col4({ children }: colProp) {\n  return children;\n}\n\nLayout.Col1 = Col1;\nLayout.Col2 = Col2;\nLayout.Col3 = Col3;\nLayout.Col4 = Col4;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","React","import_class_variance_authority","import_jsx_runtime"]}

package/dist/main.css

@@ -392,6 +392,9 @@ video {
 .sg-w-9 {
   width: 2.25rem;
 }
+.sg-w-full {
+  width: 100%;
+}
 .sg-max-w-\[960px\] {
   max-width: 960px;
 }
@@ -440,11 +443,14 @@ video {
 .sg-bg-red {
   background-color: hsl(var(--sg-red));
 }
+.sg-bg-transparent {
+  background-color: transparent;
+}
 .sg-bg-white {
   background-color: hsl(var(--sg-white));
 }
-.sg-p-3 {
-  padding: 0.75rem;
+.sg-p-0 {
+  padding: 0px;
 }
 .sg-p-4 {
   padding: 1rem;
@@ -473,20 +479,62 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.sg-text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.sg-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+.sg-text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+.sg-text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.sg-text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
 .sg-text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.sg-text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .sg-text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.sg-font-bold {
+  font-weight: 700;
+}
+.sg-font-extrabold {
+  font-weight: 800;
+}
 .sg-font-medium {
   font-weight: 500;
 }
+.sg-font-normal {
+  font-weight: 400;
+}
 .sg-font-semibold {
   font-weight: 600;
 }
+.sg-tracking-tight {
+  letter-spacing: -0.025em;
+}
+.sg-text-accent-foreground {
+  color: hsl(var(--accent-foreground));
+}
+.sg-text-destructive {
+  color: hsl(var(--destructive));
+}
 .sg-text-foreground {
   color: hsl(var(--sg-foreground));
 }
@@ -505,8 +553,8 @@ video {
 .sg-text-red-foreground {
   color: hsl(var(--sg-red-foreground));
 }
-.sg-text-white {
-  color: hsl(var(--sg-white));
+.sg-text-secondary-foreground {
+  color: hsl(var(--secondary-foreground));
 }
 .sg-underline-offset-4 {
   text-underline-offset: 4px;
@@ -550,6 +598,9 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+.first\:sg-mt-0:first-child {
+  margin-top: 0px;
+}
 .hover\:sg-bg-accent:hover {
   background-color: hsl(var(--accent));
 }
@@ -623,6 +674,21 @@ video {
   .md\:sg-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .md\:sg-grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .md\:sg-grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .md\:sg-p-0 {
+    padding: 0px;
+  }
+}
+@media (min-width: 1024px) {
+  .lg\:sg-text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
 }
 .\[\&_svg\]\:sg-pointer-events-none svg {
   pointer-events: none;

package/dist/main.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/tailwind.css"],"sourcesContent":["*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}/*\n! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n  :root {\n    --sg-black: 0 0% 15%;\n    --sg-white: 30 20% 98%;\n    --sg-gray: 30 10% 70%;\n    --sg-orange: 33 75% 54%;\n    --sg-orange-foreground: 0 0% 20%;\n    --sg-purple: 250 45% 58%;\n    --sg-purple-foreground: 250 50% 98%;\n    --sg-red: 0 65% 51%;\n    --sg-red-foreground: 0 0% 98%;\n    --sg-green: 120 45% 45%;\n    --sg-green-foreground: 120 50% 98%;\n\n    --sg-primary: var(--sg-orange);\n    --sg-background: var(--sg-white);\n    --sg-foreground: var(--sg-black);\n\n    --sg-border: var(--sg-primary);\n    --sg-ring: 210 65% 55%;\n    --sg-radius: 0.5rem;\n\n    /* --background: 0 0% 100%;\n    --foreground: 222.2 47.4% 11.2%; */\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 47.4% 11.2%;\n    --input: 214.3 31.8% 91.4%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 47.4% 11.2%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 100% 50%;\n    --destructive-foreground: 210 40% 98%;\n    /* --ring: 215 20.2% 65.1%; */\n\n    --test1: 1px;\n  }\n\n    :root body {\n      background-color: hsl(var(--sg-background));\n    }\n.sg-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.sg-inline-flex {\n  display: inline-flex;\n}\n.sg-grid {\n  display: grid;\n}\n.sg-h-10 {\n  height: 2.5rem;\n}\n.sg-h-8 {\n  height: 2rem;\n}\n.sg-h-9 {\n  height: 2.25rem;\n}\n.sg-w-9 {\n  width: 2.25rem;\n}\n.sg-max-w-\\[960px\\] {\n  max-width: 960px;\n}\n.sg-grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.sg-items-center {\n  align-items: center;\n}\n.sg-justify-center {\n  justify-content: center;\n}\n.sg-gap-2 {\n  gap: 0.5rem;\n}\n.sg-gap-4 {\n  gap: 1rem;\n}\n.sg-whitespace-nowrap {\n  white-space: nowrap;\n}\n.sg-rounded-md {\n  border-radius: 0.375rem;\n}\n.sg-border {\n  border-width: 1px;\n}\n.sg-border-orange {\n  border-color: hsl(var(--sg-orange));\n}\n.sg-border-transparent {\n  border-color: transparent;\n}\n.sg-bg-black {\n  background-color: hsl(var(--sg-black));\n}\n.sg-bg-green {\n  background-color: hsl(var(--sg-green));\n}\n.sg-bg-orange {\n  background-color: hsl(var(--sg-orange));\n}\n.sg-bg-purple {\n  background-color: hsl(var(--sg-purple));\n}\n.sg-bg-red {\n  background-color: hsl(var(--sg-red));\n}\n.sg-bg-white {\n  background-color: hsl(var(--sg-white));\n}\n.sg-p-3 {\n  padding: 0.75rem;\n}\n.sg-p-4 {\n  padding: 1rem;\n}\n.sg-px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.sg-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.sg-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.sg-px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.sg-py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.sg-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.sg-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.sg-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.sg-font-medium {\n  font-weight: 500;\n}\n.sg-font-semibold {\n  font-weight: 600;\n}\n.sg-text-foreground {\n  color: hsl(var(--sg-foreground));\n}\n.sg-text-green-foreground {\n  color: hsl(var(--sg-green-foreground));\n}\n.sg-text-orange-foreground {\n  color: hsl(var(--sg-orange-foreground));\n}\n.sg-text-primary {\n  color: hsl(var(--primary));\n}\n.sg-text-purple-foreground {\n  color: hsl(var(--sg-purple-foreground));\n}\n.sg-text-red-foreground {\n  color: hsl(var(--sg-red-foreground));\n}\n.sg-text-white {\n  color: hsl(var(--sg-white));\n}\n.sg-underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.sg-shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sg-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sg-transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n/* @layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply font-sans antialiased bg-background text-foreground;\n  }\n} */\n.hover\\:sg-bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:sg-bg-gray\\/20:hover {\n  background-color: hsl(var(--sg-gray) / 0.2);\n}\n.hover\\:sg-bg-green\\/80:hover {\n  background-color: hsl(var(--sg-green) / 0.8);\n}\n.hover\\:sg-bg-orange\\/80:hover {\n  background-color: hsl(var(--sg-orange) / 0.8);\n}\n.hover\\:sg-bg-orange\\/90:hover {\n  background-color: hsl(var(--sg-orange) / 0.9);\n}\n.hover\\:sg-bg-purple\\/80:hover {\n  background-color: hsl(var(--sg-purple) / 0.8);\n}\n.hover\\:sg-bg-purple\\/90:hover {\n  background-color: hsl(var(--sg-purple) / 0.9);\n}\n.hover\\:sg-bg-red\\/90:hover {\n  background-color: hsl(var(--sg-red) / 0.9);\n}\n.hover\\:sg-text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:sg-underline:hover {\n  text-decoration-line: underline;\n}\n.focus\\:sg-outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:sg-ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:sg-ring-ring:focus {\n  --tw-ring-color: hsl(var(--sg-ring));\n}\n.focus\\:sg-ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:sg-outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:sg-ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:sg-ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--sg-ring));\n}\n.disabled\\:sg-pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:sg-opacity-50:disabled {\n  opacity: 0.5;\n}\n@media (min-width: 768px) {\n\n  .md\\:sg-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n.\\[\\&_svg\\]\\:sg-pointer-events-none svg {\n  pointer-events: none;\n}\n.\\[\\&_svg\\]\\:sg-size-4 svg {\n  width: 1rem;\n  height: 1rem;\n}\n.\\[\\&_svg\\]\\:sg-shrink-0 svg {\n  flex-shrink: 0;\n}\n"],"mappings":";AAAA;AAAG;AAAU;AACX,yBAAuB;AACvB,yBAAuB;AACvB,oBAAkB;AAClB,oBAAkB;AAClB,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AACd,gBAAc;AACd;AACA;AACA;AACA,+BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAAwB;AACxB,0BAAwB;AACxB,mBAAiB,IAAI,GAAG,IAAI,IAAI,EAAE;AAClC,2BAAyB,EAAE,EAAE;AAC7B,oBAAkB,EAAE,EAAE;AACtB,eAAa,EAAE,EAAE;AACjB,uBAAqB,EAAE,EAAE;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEA;AACE,yBAAuB;AACvB,yBAAuB;AACvB,oBAAkB;AAClB,oBAAkB;AAClB,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AACd,gBAAc;AACd;AACA;AACA;AACA,+BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAAwB;AACxB,0BAAwB;AACxB,mBAAiB,IAAI,GAAG,IAAI,IAAI,EAAE;AAClC,2BAAyB,EAAE,EAAE;AAC7B,oBAAkB,EAAE,EAAE;AACtB,eAAa,EAAE,EAAE;AACjB,uBAAqB,EAAE,EAAE;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAOA;AACA;AACA;AACE,cAAY;AACZ,gBAAc;AACd,gBAAc;AACd,gBAAc;AAChB;AAEA;AACA;AACE,gBAAc;AAChB;AAYA;AACA;AACE,eAAa;AACb,4BAA0B;AAC1B,iBAAe;AACf,eAAa;AACV,YAAU;AACb;AAAA,IAAa,aAAa;AAAA,IAAE,SAAS;AAAA,IAAE,UAAU;AAAA,IAAE,mBAAmB;AAAA,IAAE,gBAAgB;AAAA,IAAE,iBAAiB;AAAA,IAAE;AAC7G,yBAAuB;AACvB,2B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A,CAAC;AACC,WAAS;AACX;AACA,CAAC;AACC,UAAQ;AACV;AACA,CAAC;AACC,UAAQ;AACV;AACA,CAAC;AACC,UAAQ;AACV;AACA,CAAC;AACC,SAAO;AACT;AACA,CAAC;AACC,aAAW;AACb;AACA,CAAC;AACC,yBAAuB,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE;AAC7C;AACA,CAAC;AACC,eAAa;AACf;AACA,CAAC;AACC,mBAAiB;AACnB;AACA,CAAC;AACC,OAAK;AACP;AACA,CAAC;AACC,OAAK;AACP;AACA,CAAC;AACC,eAAa;AACf;AACA,CAAC;AACC,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AAChB;AACA,CAAC;AACC,gBAAc,IAAI,IAAI;AACxB;AACA,CAAC;AACC,gBAAc;AAChB;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,eAAa;AACb,kBAAgB;AAClB;AACA,CAAC;AACC,eAAa;AACb,kBAAgB;AAClB;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,eAAa;AACf;AACA,CAAC;AACC,eAAa;AACf;AACA,CAAC;AACC,SAAO,IAAI,IAAI;AACjB;AACA,CAAC;AACC,SAAO,IAAI,IAAI;AACjB;AACA,CAAC;AACC,SAAO,IAAI,IAAI;AACjB;AACA,CAAC;AACC,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","names":[]}
+{"version":3,"sources":["../lib/tailwind.css"],"sourcesContent":["*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n  --tw-contain-size:  ;\n  --tw-contain-layout:  ;\n  --tw-contain-paint:  ;\n  --tw-contain-style:  ;\n}/*\n! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n  :root {\n    --sg-black: 0 0% 15%;\n    --sg-white: 30 20% 98%;\n    --sg-gray: 30 10% 70%;\n    --sg-orange: 33 75% 54%;\n    --sg-orange-foreground: 0 0% 20%;\n    --sg-purple: 250 45% 58%;\n    --sg-purple-foreground: 250 50% 98%;\n    --sg-red: 0 65% 51%;\n    --sg-red-foreground: 0 0% 98%;\n    --sg-green: 120 45% 45%;\n    --sg-green-foreground: 120 50% 98%;\n\n    --sg-primary: var(--sg-orange);\n    --sg-background: var(--sg-white);\n    --sg-foreground: var(--sg-black);\n\n    --sg-border: var(--sg-primary);\n    --sg-ring: 210 65% 55%;\n    --sg-radius: 0.5rem;\n\n    /* --background: 0 0% 100%;\n    --foreground: 222.2 47.4% 11.2%; */\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 47.4% 11.2%;\n    --input: 214.3 31.8% 91.4%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 47.4% 11.2%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 100% 50%;\n    --destructive-foreground: 210 40% 98%;\n    /* --ring: 215 20.2% 65.1%; */\n\n    --test1: 1px;\n  }\n\n    :root body {\n      background-color: hsl(var(--sg-background));\n    }\n.sg-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n.sg-inline-flex {\n  display: inline-flex;\n}\n.sg-grid {\n  display: grid;\n}\n.sg-h-10 {\n  height: 2.5rem;\n}\n.sg-h-8 {\n  height: 2rem;\n}\n.sg-h-9 {\n  height: 2.25rem;\n}\n.sg-w-9 {\n  width: 2.25rem;\n}\n.sg-w-full {\n  width: 100%;\n}\n.sg-max-w-\\[960px\\] {\n  max-width: 960px;\n}\n.sg-grid-cols-1 {\n  grid-template-columns: repeat(1, minmax(0, 1fr));\n}\n.sg-items-center {\n  align-items: center;\n}\n.sg-justify-center {\n  justify-content: center;\n}\n.sg-gap-2 {\n  gap: 0.5rem;\n}\n.sg-gap-4 {\n  gap: 1rem;\n}\n.sg-whitespace-nowrap {\n  white-space: nowrap;\n}\n.sg-rounded-md {\n  border-radius: 0.375rem;\n}\n.sg-border {\n  border-width: 1px;\n}\n.sg-border-orange {\n  border-color: hsl(var(--sg-orange));\n}\n.sg-border-transparent {\n  border-color: transparent;\n}\n.sg-bg-black {\n  background-color: hsl(var(--sg-black));\n}\n.sg-bg-green {\n  background-color: hsl(var(--sg-green));\n}\n.sg-bg-orange {\n  background-color: hsl(var(--sg-orange));\n}\n.sg-bg-purple {\n  background-color: hsl(var(--sg-purple));\n}\n.sg-bg-red {\n  background-color: hsl(var(--sg-red));\n}\n.sg-bg-transparent {\n  background-color: transparent;\n}\n.sg-bg-white {\n  background-color: hsl(var(--sg-white));\n}\n.sg-p-0 {\n  padding: 0px;\n}\n.sg-p-4 {\n  padding: 1rem;\n}\n.sg-px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.sg-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.sg-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.sg-px-8 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.sg-py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.sg-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.sg-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n.sg-text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n.sg-text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n.sg-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.sg-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.sg-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.sg-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n.sg-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.sg-font-bold {\n  font-weight: 700;\n}\n.sg-font-extrabold {\n  font-weight: 800;\n}\n.sg-font-medium {\n  font-weight: 500;\n}\n.sg-font-normal {\n  font-weight: 400;\n}\n.sg-font-semibold {\n  font-weight: 600;\n}\n.sg-tracking-tight {\n  letter-spacing: -0.025em;\n}\n.sg-text-accent-foreground {\n  color: hsl(var(--accent-foreground));\n}\n.sg-text-destructive {\n  color: hsl(var(--destructive));\n}\n.sg-text-foreground {\n  color: hsl(var(--sg-foreground));\n}\n.sg-text-green-foreground {\n  color: hsl(var(--sg-green-foreground));\n}\n.sg-text-orange-foreground {\n  color: hsl(var(--sg-orange-foreground));\n}\n.sg-text-primary {\n  color: hsl(var(--primary));\n}\n.sg-text-purple-foreground {\n  color: hsl(var(--sg-purple-foreground));\n}\n.sg-text-red-foreground {\n  color: hsl(var(--sg-red-foreground));\n}\n.sg-text-secondary-foreground {\n  color: hsl(var(--secondary-foreground));\n}\n.sg-underline-offset-4 {\n  text-underline-offset: 4px;\n}\n.sg-shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sg-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.sg-transition-colors {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n@keyframes enter {\n\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n/* @layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply font-sans antialiased bg-background text-foreground;\n  }\n} */\n.first\\:sg-mt-0:first-child {\n  margin-top: 0px;\n}\n.hover\\:sg-bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:sg-bg-gray\\/20:hover {\n  background-color: hsl(var(--sg-gray) / 0.2);\n}\n.hover\\:sg-bg-green\\/80:hover {\n  background-color: hsl(var(--sg-green) / 0.8);\n}\n.hover\\:sg-bg-orange\\/80:hover {\n  background-color: hsl(var(--sg-orange) / 0.8);\n}\n.hover\\:sg-bg-orange\\/90:hover {\n  background-color: hsl(var(--sg-orange) / 0.9);\n}\n.hover\\:sg-bg-purple\\/80:hover {\n  background-color: hsl(var(--sg-purple) / 0.8);\n}\n.hover\\:sg-bg-purple\\/90:hover {\n  background-color: hsl(var(--sg-purple) / 0.9);\n}\n.hover\\:sg-bg-red\\/90:hover {\n  background-color: hsl(var(--sg-red) / 0.9);\n}\n.hover\\:sg-text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:sg-underline:hover {\n  text-decoration-line: underline;\n}\n.focus\\:sg-outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:sg-ring-2:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:sg-ring-ring:focus {\n  --tw-ring-color: hsl(var(--sg-ring));\n}\n.focus\\:sg-ring-offset-2:focus {\n  --tw-ring-offset-width: 2px;\n}\n.focus-visible\\:sg-outline-none:focus-visible {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus-visible\\:sg-ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:sg-ring-ring:focus-visible {\n  --tw-ring-color: hsl(var(--sg-ring));\n}\n.disabled\\:sg-pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:sg-opacity-50:disabled {\n  opacity: 0.5;\n}\n@media (min-width: 768px) {\n\n  .md\\:sg-grid-cols-2 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .md\\:sg-grid-cols-3 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n\n  .md\\:sg-grid-cols-4 {\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n  }\n\n  .md\\:sg-p-0 {\n    padding: 0px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .lg\\:sg-text-5xl {\n    font-size: 3rem;\n    line-height: 1;\n  }\n}\n.\\[\\&_svg\\]\\:sg-pointer-events-none svg {\n  pointer-events: none;\n}\n.\\[\\&_svg\\]\\:sg-size-4 svg {\n  width: 1rem;\n  height: 1rem;\n}\n.\\[\\&_svg\\]\\:sg-shrink-0 svg {\n  flex-shrink: 0;\n}\n"],"mappings":";AAAA;AAAG;AAAU;AACX,yBAAuB;AACvB,yBAAuB;AACvB,oBAAkB;AAClB,oBAAkB;AAClB,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AACd,gBAAc;AACd;AACA;AACA;AACA,+BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAAwB;AACxB,0BAAwB;AACxB,mBAAiB,IAAI,GAAG,IAAI,IAAI,EAAE;AAClC,2BAAyB,EAAE,EAAE;AAC7B,oBAAkB,EAAE,EAAE;AACtB,eAAa,EAAE,EAAE;AACjB,uBAAqB,EAAE,EAAE;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAEA;AACE,yBAAuB;AACvB,yBAAuB;AACvB,oBAAkB;AAClB,oBAAkB;AAClB,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AACd,gBAAc;AACd;AACA;AACA;AACA,+BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAAwB;AACxB,0BAAwB;AACxB,mBAAiB,IAAI,GAAG,IAAI,IAAI,EAAE;AAClC,2BAAyB,EAAE,EAAE;AAC7B,oBAAkB,EAAE,EAAE;AACtB,eAAa,EAAE,EAAE;AACjB,uBAAqB,EAAE,EAAE;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAOA;AACA;AACA;AACE,cAAY;AACZ,gBAAc;AACd,gBAAc;AACd,gBAAc;AAChB;AAEA;AACA;AACE,gBAAc;AAChB;AAYA;AACA;AACE,eAAa;AACb,4BAA0B;AAC1B,iBAAe;AACf,eAAa;AACV,YAAU;AACb;AAAA,IAAa,aAAa;AAAA,IAAE,SAAS;AAAA,IAAE,UAAU;AAAA,IAAE,mBAAmB;AAAA,IAAE,gBAAgB;AAAA,IAAE,iBAAiB;AAAA,IAAE;AAC7G,yBAAuB;AACvB,2B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A,CAAC;AACC,WAAS;AACX;AACA,CAAC;AACC,UAAQ;AACV;AACA,CAAC;AACC,UAAQ;AACV;AACA,CAAC;AACC,UAAQ;AACV;AACA,CAAC;AACC,SAAO;AACT;AACA,CAAC;AACC,SAAO;AACT;AACA,CAAC;AACC,aAAW;AACb;AACA,CAAC;AACC,yBAAuB,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE;AAC7C;AACA,CAAC;AACC,eAAa;AACf;AACA,CAAC;AACC,mBAAiB;AACnB;AACA,CAAC;AACC,OAAK;AACP;AACA,CAAC;AACC,OAAK;AACP;AACA,CAAC;AACC,eAAa;AACf;AACA,CAAC;AACC,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AAChB;AACA,CAAC;AACC,gBAAc,IAAI,IAAI;AACxB;AACA,CAAC;AACC,gBAAc;AAChB;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,oBAAkB;AACpB;AACA,CAAC;AACC,oBAAkB,IAAI,IAAI;AAC5B;AACA,CAAC;AACC,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,gBAAc;AACd,iBAAe;AACjB;AACA,CAAC;AACC,eAAa;AACb,kBAAgB;AAClB;AACA,CAAC;AACC,eAAa;AACb,kBAAgB;AAClB;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,aAAW;AACX,eAAa;AACf;AACA,CAAC;AACC,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","names":[]}

package/dist/main.d.cts

@@ -1,13 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import React__default, { PropsWithChildren } from 'react';
 import { VariantProps } from 'class-variance-authority';
-
-type props = {
-    text?: string;
-};
-declare const Demo: ({ text }: props) => react_jsx_runtime.JSX.Element;
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ValidBreakpoint = "" | "sm:" | "md:" | "lg:" | "xl:" | "2xl:";
 type ValidMarginDirection = "m-" | "mx-" | "my-" | "mt-" | "mr-" | "mb-" | "ml-";
@@ -15,8 +10,28 @@ type ValidMarginSize = "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "
 type TailwindMarginClass = "" | `${ValidBreakpoint}${ValidMarginDirection}${ValidMarginSize}`;
 type OmitClassProperty<T1, T2 extends string> = Omit<T1, T2>;
 
+declare const headingVariants: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | null | undefined;
+    foreground?: "default" | "muted" | "primary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface HeadingProps extends OmitClassProperty<React__default.HTMLAttributes<HTMLHeadingElement>, "className">, VariantProps<typeof headingVariants> {
+    as?: "h1" | "h2" | "h3" | "h4";
+    className?: TailwindMarginClass;
+}
+declare const Heading: React__default.FC<HeadingProps>;
+
+declare const textVariants: (props?: ({
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | null | undefined;
+    foreground?: "accent" | "default" | "muted" | "primary" | "secondary" | "destructive" | null | undefined;
+    weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends OmitClassProperty<React__default.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof textVariants> {
+    className?: TailwindMarginClass;
+}
+declare const Text: React__default.FC<TextProps>;
+
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends OmitClassProperty<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">, VariantProps<typeof buttonVariants> {
@@ -35,21 +50,22 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
 
 declare const layoutVariants: (props?: ({
     variant?: "100" | "66-33" | "50-50" | "33-33-33" | "25-25-25-25" | null | undefined;
+    fill?: "full" | "col" | null | undefined;
+    padding?: "" | "none" | null | undefined;
+    bgcolor?: "purple" | "transparent" | "white" | "black" | "orange" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LayoutProps extends VariantProps<typeof layoutVariants> {
-    fullWidth?: boolean;
     className?: TailwindMarginClass;
 }
-declare function Layout({ children, className, variant, }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
+declare function Layout({ children, className, variant, fill, padding, bgcolor, }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
-    var Col1: typeof Col;
-    var Col2: typeof Col;
-    var Col3: typeof Col;
-    var Col4: typeof Col;
+    var Col1: ({ children }: colProp) => React.ReactNode;
+    var Col2: ({ children }: colProp) => React.ReactNode;
+    var Col3: ({ children }: colProp) => React.ReactNode;
+    var Col4: ({ children }: colProp) => React.ReactNode;
 }
 type colProp = {
     children?: React.ReactNode;
 };
-declare function Col({ children }: colProp): react_jsx_runtime.JSX.Element;
 
-export { Badge, Button, Demo, Layout };
+export { Badge, Button, Heading, Layout, Text };

package/dist/main.d.ts

@@ -1,13 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import { PropsWithChildren } from 'react';
+import React__default, { PropsWithChildren } from 'react';
 import { VariantProps } from 'class-variance-authority';
-
-type props = {
-    text?: string;
-};
-declare const Demo: ({ text }: props) => react_jsx_runtime.JSX.Element;
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ValidBreakpoint = "" | "sm:" | "md:" | "lg:" | "xl:" | "2xl:";
 type ValidMarginDirection = "m-" | "mx-" | "my-" | "mt-" | "mr-" | "mb-" | "ml-";
@@ -15,8 +10,28 @@ type ValidMarginSize = "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "3.5" | "
 type TailwindMarginClass = "" | `${ValidBreakpoint}${ValidMarginDirection}${ValidMarginSize}`;
 type OmitClassProperty<T1, T2 extends string> = Omit<T1, T2>;
 
+declare const headingVariants: (props?: ({
+    variant?: "h1" | "h2" | "h3" | "h4" | null | undefined;
+    foreground?: "default" | "muted" | "primary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface HeadingProps extends OmitClassProperty<React__default.HTMLAttributes<HTMLHeadingElement>, "className">, VariantProps<typeof headingVariants> {
+    as?: "h1" | "h2" | "h3" | "h4";
+    className?: TailwindMarginClass;
+}
+declare const Heading: React__default.FC<HeadingProps>;
+
+declare const textVariants: (props?: ({
+    size?: "xs" | "sm" | "base" | "lg" | "xl" | null | undefined;
+    foreground?: "accent" | "default" | "muted" | "primary" | "secondary" | "destructive" | null | undefined;
+    weight?: "normal" | "medium" | "semibold" | "bold" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TextProps extends OmitClassProperty<React__default.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof textVariants> {
+    className?: TailwindMarginClass;
+}
+declare const Text: React__default.FC<TextProps>;
+
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "primary" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends OmitClassProperty<React.ButtonHTMLAttributes<HTMLButtonElement>, "className">, VariantProps<typeof buttonVariants> {
@@ -35,21 +50,22 @@ declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_
 
 declare const layoutVariants: (props?: ({
     variant?: "100" | "66-33" | "50-50" | "33-33-33" | "25-25-25-25" | null | undefined;
+    fill?: "full" | "col" | null | undefined;
+    padding?: "" | "none" | null | undefined;
+    bgcolor?: "purple" | "transparent" | "white" | "black" | "orange" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LayoutProps extends VariantProps<typeof layoutVariants> {
-    fullWidth?: boolean;
     className?: TailwindMarginClass;
 }
-declare function Layout({ children, className, variant, }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
+declare function Layout({ children, className, variant, fill, padding, bgcolor, }: PropsWithChildren<LayoutProps>): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
-    var Col1: typeof Col;
-    var Col2: typeof Col;
-    var Col3: typeof Col;
-    var Col4: typeof Col;
+    var Col1: ({ children }: colProp) => React.ReactNode;
+    var Col2: ({ children }: colProp) => React.ReactNode;
+    var Col3: ({ children }: colProp) => React.ReactNode;
+    var Col4: ({ children }: colProp) => React.ReactNode;
 }
 type colProp = {
     children?: React.ReactNode;
 };
-declare function Col({ children }: colProp): react_jsx_runtime.JSX.Element;
 
-export { Badge, Button, Demo, Layout };
+export { Badge, Button, Heading, Layout, Text };

package/dist/main.js

@@ -1,3 +1,6 @@
+// lib/components/ui/heading/heading.tsx
+import { cva } from "class-variance-authority";
+
 // lib/utils.ts
 import { clsx } from "clsx";
 import { extendTailwindMerge, twMerge } from "tailwind-merge";
@@ -8,16 +11,100 @@ function cn(...inputs) {
   return twMergeWithPrefix(twMerge(clsx(inputs)));
 }
 
-// lib/components/Demo.tsx
+// lib/components/ui/heading/heading.tsx
 import { jsx } from "react/jsx-runtime";
-var Demo = ({ text }) => {
+var headingVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl",
+      h2: "sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0",
+      h3: "sg-text-2xl sg-font-semibold sg-tracking-tight",
+      h4: "sg-text-xl sg-font-semibold sg-tracking-tight"
+    },
+    foreground: {
+      default: "sg-text-foreground",
+      muted: "sg-text-muted-foreground",
+      primary: "sg-text-primary"
+    }
+  },
+  defaultVariants: {
+    variant: "h2",
+    foreground: "default"
+  }
+});
+var Heading = ({
+  children,
+  as = "h2",
+  variant,
+  foreground,
+  className,
+  ...props
+}) => {
+  const Component = as;
   return /* @__PURE__ */ jsx(
-    "div",
+    Component,
+    {
+      className: cn(headingVariants({ variant, foreground, className })),
+      ...props,
+      children
+    }
+  );
+};
+
+// lib/components/ui/text/text.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var textVariants = cva2("", {
+  variants: {
+    size: {
+      xs: "sg-text-xs",
+      sm: "sg-text-sm",
+      base: "sg-text-base",
+      lg: "sg-text-lg",
+      xl: "sg-text-xl"
+    },
+    foreground: {
+      default: "sg-text-foreground",
+      muted: "sg-text-muted-foreground",
+      primary: "sg-text-primary",
+      secondary: "sg-text-secondary-foreground",
+      destructive: "sg-text-destructive",
+      accent: "sg-text-accent-foreground"
+    },
+    weight: {
+      normal: "sg-font-normal",
+      medium: "sg-font-medium",
+      semibold: "sg-font-semibold",
+      bold: "sg-font-bold"
+    }
+  },
+  defaultVariants: {
+    size: "base",
+    foreground: "default",
+    weight: "normal"
+  }
+});
+var Text = ({
+  children,
+  size,
+  foreground,
+  weight,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "p",
     {
       className: cn(
-        "sg-text-orange-500 sg-p-4 sg-p-3 sg-text-white sg-bg-black"
+        textVariants({
+          size,
+          foreground,
+          weight,
+          className
+        })
       ),
-      children: text
+      ...props,
+      children
     }
   );
 };
@@ -25,9 +112,9 @@ var Demo = ({ text }) => {
 // lib/components/ui/button/button.tsx
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var buttonVariants = cva(
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva3(
   "sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0",
   {
     variants: {
@@ -55,7 +142,7 @@ var buttonVariants = cva(
 var Button = React.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx3(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
@@ -68,9 +155,9 @@ var Button = React.forwardRef(
 Button.displayName = "Button";
 
 // lib/components/ui/badge/badge.tsx
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var badgeVariants = cva2(
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var badgeVariants = cva4(
   "sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2",
   {
     variants: {
@@ -87,67 +174,103 @@ var badgeVariants = cva2(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx3("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx4("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // lib/components/ui/layout/layout.tsx
 import * as React2 from "react";
-import { cva as cva3 } from "class-variance-authority";
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
-var layoutVariants = cva3("sg-grid sg-gap-4 ", {
+import { cva as cva5 } from "class-variance-authority";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+var bgColor = {
+  transparent: "sg-bg-transparent",
+  white: "sg-bg-white",
+  black: "sg-bg-black",
+  orange: "sg-bg-orange",
+  purple: "sg-bg-purple"
+};
+var layoutVariants = cva5("sg-grid sg-gap-4 sg-grid-cols-1", {
   variants: {
     variant: {
-      "100": "sg-grid-cols-1",
-      "66-33": "sg-grid-cols-1 md:sg-grid-cols-2",
-      "50-50": "sg-grid-cols-1 md:sg-grid-cols-2",
-      "33-33-33": "sg-grid-cols-1 md:sg-grid-cols-2",
-      "25-25-25-25": "sg-grid-cols-1 md:sg-grid-cols-2"
-    }
+      "100": "",
+      "66-33": "md:sg-grid-cols-2",
+      "50-50": "md:sg-grid-cols-2",
+      "33-33-33": "md:sg-grid-cols-3",
+      "25-25-25-25": "md:sg-grid-cols-4"
+    },
+    fill: {
+      full: "sg-w-full sg-p-4",
+      col: "sg-mx-auto sg-max-w-[960px] sg-p-4 md:sg-p-0"
+    },
+    padding: {
+      "": "",
+      none: "sg-p-0"
+    },
+    bgcolor: bgColor
   },
   defaultVariants: {
-    variant: "100"
+    variant: "100",
+    fill: "col",
+    padding: "",
+    bgcolor: "transparent"
   }
 });
 function Layout({
   children,
   className,
-  variant = "100"
+  variant,
+  fill,
+  padding,
+  bgcolor
 }) {
   const allowedInLayout = (content) => {
     if (content.type === Layout.Col1) {
       return true;
-    } else if (content.type === Layout.Col2 && (variant === "66-33" || variant === "50-50")) {
+    } else if (content.type === Layout.Col2 && (variant === "66-33" || variant === "50-50" || variant === "33-33-33" || variant === "25-25-25-25")) {
       return true;
     } else if (content.type === Layout.Col3 && (variant === "33-33-33" || variant === "25-25-25-25")) {
       return true;
     } else if (content.type === Layout.Col4 && variant === "25-25-25-25") {
       return true;
     }
-    console.error("Content not allowed in column for layout", content.type);
+    console.error(
+      "Content not allowed in column for variant",
+      variant,
+      content.type
+    );
     return false;
   };
   const renderColumn = (content) => {
     if (!allowedInLayout(content)) {
       return;
     }
-    return /* @__PURE__ */ jsx4("div", { children: content });
+    return /* @__PURE__ */ jsx5("div", { children: content });
   };
-  return /* @__PURE__ */ jsx4("div", { className: "sg-mx-auto sg-max-w-[960px]", children: /* @__PURE__ */ jsx4("div", { className: cn(layoutVariants({ variant }), className), children: React2.Children.map(
+  return /* @__PURE__ */ jsx5("div", { className: cn(bgColor[bgcolor ?? "transparent"], className), children: /* @__PURE__ */ jsx5("div", { className: cn(layoutVariants({ variant, fill, padding, bgcolor })), children: React2.Children.map(
     children,
-    (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ jsx4(Fragment, {})
+    (child) => React2.isValidElement(child) ? renderColumn(child) : /* @__PURE__ */ jsx5(Fragment, {})
   ) }) });
 }
-function Col({ children }) {
-  return /* @__PURE__ */ jsx4(Fragment, { children });
+function Col1({ children }) {
+  return children;
+}
+function Col2({ children }) {
+  return children;
+}
+function Col3({ children }) {
+  return children;
+}
+function Col4({ children }) {
+  return children;
 }
-Layout.Col1 = Col;
-Layout.Col2 = Col;
-Layout.Col3 = Col;
-Layout.Col4 = Col;
+Layout.Col1 = Col1;
+Layout.Col2 = Col2;
+Layout.Col3 = Col3;
+Layout.Col4 = Col4;
 export {
   Badge,
   Button,
-  Demo,
-  Layout
+  Heading,
+  Layout,
+  Text
 };
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../lib/utils.ts","../lib/components/Demo.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\nimport {} from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  const twMergeWithPrefix = extendTailwindMerge({\r\n    prefix: \"sg-\",\r\n  });\r\n\r\n  return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import { cn } from \"../utils\";\n\ntype props = {\n  text?: string;\n};\n\nexport const Demo = ({ text }: props) => {\n  return (\n    <div\n      className={cn(\n        \"sg-text-orange-500 sg-p-4 sg-p-3 sg-text-white sg-bg-black\"\n      )}\n    >\n      {text}\n    </div>\n  );\n};\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n  \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n        secondary:\n          \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n        destructive:\n          \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n        outline:\n          \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n        ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n        link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n      },\n      size: {\n        default: \"sg-h-9 sg-px-4 sg-py-2\",\n        sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n        lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n        icon: \"sg-h-9 sg-w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends OmitClassProperty<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"className\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n  \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n        purple:\n          \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n        green:\n          \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n        outline: \"sg-text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n    VariantProps<typeof badgeVariants> {\n  className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { TailwindMarginClass } from \"../../../lib/types\";\nimport { PropsWithChildren } from \"react\";\n\nconst layoutVariants = cva(\"sg-grid sg-gap-4 \", {\n  variants: {\n    variant: {\n      \"100\": \"sg-grid-cols-1\",\n      \"66-33\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n      \"50-50\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n      \"33-33-33\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n      \"25-25-25-25\": \"sg-grid-cols-1 md:sg-grid-cols-2\",\n    },\n  },\n  defaultVariants: {\n    variant: \"100\",\n  },\n});\n\nexport interface LayoutProps extends VariantProps<typeof layoutVariants> {\n  fullWidth?: boolean;\n  className?: TailwindMarginClass;\n}\n\nfunction Layout({\n  children,\n  className,\n  variant = \"100\",\n}: PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (variant === \"66-33\" || variant === \"50-50\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (variant === \"33-33-33\" || variant === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && variant === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\"Content not allowed in column for layout\", content.type);\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return <div>{content}</div>;\n  };\n\n  return (\n    <div className=\"sg-mx-auto sg-max-w-[960px]\">\n      <div className={cn(layoutVariants({ variant }), className)}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </div>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n};\n\nfunction Col({ children }: colProp) {\n  return <>{children}</>;\n}\n\nLayout.Col1 = Col;\nLayout.Col2 = Col;\nLayout.Col3 = Col;\nLayout.Col4 = Col;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["jsx","cva","jsx","cva","React","cva","jsx","cva"]}
+{"version":3,"sources":["../lib/components/ui/heading/heading.tsx","../lib/utils.ts","../lib/components/ui/text/text.tsx","../lib/components/ui/button/button.tsx","../lib/components/ui/badge/badge.tsx","../lib/components/ui/layout/layout.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst headingVariants = cva(\"\", {\r\n  variants: {\r\n    variant: {\r\n      h1: \"sg-text-4xl sg-font-extrabold sg-tracking-tight lg:sg-text-5xl\",\r\n      h2: \"sg-text-3xl sg-font-semibold sg-tracking-tight sg-transition-colors first:sg-mt-0\",\r\n      h3: \"sg-text-2xl sg-font-semibold sg-tracking-tight\",\r\n      h4: \"sg-text-xl sg-font-semibold sg-tracking-tight\",\r\n    },\r\n    foreground: {\r\n      default: \"sg-text-foreground\",\r\n      muted: \"sg-text-muted-foreground\",\r\n      primary: \"sg-text-primary\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    variant: \"h2\",\r\n    foreground: \"default\",\r\n  },\r\n});\r\n\r\nexport interface HeadingProps\r\n  extends OmitClassProperty<\r\n      React.HTMLAttributes<HTMLHeadingElement>,\r\n      \"className\"\r\n    >,\r\n    VariantProps<typeof headingVariants> {\r\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\r\n  className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Heading: React.FC<HeadingProps> = ({\r\n  children,\r\n  as = \"h2\",\r\n  variant,\r\n  foreground,\r\n  className,\r\n  ...props\r\n}) => {\r\n  const Component = as;\r\n\r\n  return (\r\n    <Component\r\n      className={cn(headingVariants({ variant, foreground, className }))}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </Component>\r\n  );\r\n};\r\n","import { clsx, type ClassValue } from \"clsx\";\r\nimport { extendTailwindMerge, twMerge } from \"tailwind-merge\";\r\nimport {} from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  const twMergeWithPrefix = extendTailwindMerge({\r\n    prefix: \"sg-\",\r\n  });\r\n\r\n  return twMergeWithPrefix(twMerge(clsx(inputs)));\r\n}\r\n","import React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"../../../utils\";\r\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\r\n\r\nconst textVariants = cva(\"\", {\r\n  variants: {\r\n    size: {\r\n      xs: \"sg-text-xs\",\r\n      sm: \"sg-text-sm\",\r\n      base: \"sg-text-base\",\r\n      lg: \"sg-text-lg\",\r\n      xl: \"sg-text-xl\",\r\n    },\r\n    foreground: {\r\n      default: \"sg-text-foreground\",\r\n      muted: \"sg-text-muted-foreground\",\r\n      primary: \"sg-text-primary\",\r\n      secondary: \"sg-text-secondary-foreground\",\r\n      destructive: \"sg-text-destructive\",\r\n      accent: \"sg-text-accent-foreground\",\r\n    },\r\n    weight: {\r\n      normal: \"sg-font-normal\",\r\n      medium: \"sg-font-medium\",\r\n      semibold: \"sg-font-semibold\",\r\n      bold: \"sg-font-bold\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"base\",\r\n    foreground: \"default\",\r\n    weight: \"normal\",\r\n  },\r\n});\r\n\r\nexport interface TextProps\r\n  extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\r\n    VariantProps<typeof textVariants> {\r\n  className?: TailwindMarginClass;\r\n}\r\n\r\nexport const Text: React.FC<TextProps> = ({\r\n  children,\r\n  size,\r\n  foreground,\r\n  weight,\r\n  className,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <p\r\n      className={cn(\r\n        textVariants({\r\n          size,\r\n          foreground,\r\n          weight,\r\n          className,\r\n        })\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst buttonVariants = cva(\n  \"sg-inline-flex sg-items-center sg-justify-center sg-gap-2 sg-whitespace-nowrap sg-rounded-md sg-text-sm sg-font-medium sg-transition-colors focus-visible:sg-outline-none focus-visible:ring-offset-2 focus-visible:sg-ring-2 focus-visible:sg-ring-ring disabled:sg-pointer-events-none disabled:sg-opacity-50 [&_svg]:sg-pointer-events-none [&_svg]:sg-size-4 [&_svg]:sg-shrink-0\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/90\",\n        secondary:\n          \"sg-bg-purple sg-text-purple-foreground sg-shadow-sm hover:sg-bg-purple/90\",\n        destructive:\n          \"sg-bg-red sg-text-red-foreground sg-shadow-sm hover:sg-bg-red/90\",\n        outline:\n          \"sg-border sg-border-orange sg-bg-white sg-shadow-sm hover:sg-bg-gray/20\",\n        ghost: \"hover:sg-bg-accent hover:sg-text-accent-foreground\",\n        link: \"sg-text-primary sg-underline-offset-4 hover:sg-underline\",\n      },\n      size: {\n        default: \"sg-h-9 sg-px-4 sg-py-2\",\n        sm: \"sg-h-8 sg-rounded-md sg-px-3 sg-text-xs\",\n        lg: \"sg-h-10 sg-rounded-md sg-px-8\",\n        icon: \"sg-h-9 sg-w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends OmitClassProperty<\n      React.ButtonHTMLAttributes<HTMLButtonElement>,\n      \"className\"\n    >,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  className?: TailwindMarginClass;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { OmitClassProperty, TailwindMarginClass } from \"../../../lib/types\";\n\nconst badgeVariants = cva(\n  \"sg-inline-flex sg-items-center sg-rounded-md sg-border sg-px-2.5 sg-py-0.5 sg-text-xs sg-font-semibold sg-transition-colors focus:sg-outline-none focus:sg-ring-2 focus:sg-ring-ring focus:sg-ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"sg-border-transparent sg-bg-orange sg-text-orange-foreground sg-shadow hover:sg-bg-orange/80\",\n        purple:\n          \"sg-border-transparent sg-bg-purple sg-text-purple-foreground sg-shadow hover:sg-bg-purple/80\",\n        green:\n          \"sg-border-transparent sg-bg-green sg-text-green-foreground sg-shadow hover:sg-bg-green/80\",\n        outline: \"sg-text-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends OmitClassProperty<React.HTMLAttributes<HTMLDivElement>, \"className\">,\n    VariantProps<typeof badgeVariants> {\n  className?: TailwindMarginClass;\n}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../../utils\";\nimport { TailwindMarginClass } from \"../../../lib/types\";\nimport { PropsWithChildren } from \"react\";\n\nconst bgColor = {\n  transparent: \"sg-bg-transparent\",\n  white: \"sg-bg-white\",\n  black: \"sg-bg-black\",\n  orange: \"sg-bg-orange\",\n  purple: \"sg-bg-purple\",\n};\n\nconst layoutVariants = cva(\"sg-grid sg-gap-4 sg-grid-cols-1\", {\n  variants: {\n    variant: {\n      \"100\": \"\",\n      \"66-33\": \"md:sg-grid-cols-2\",\n      \"50-50\": \"md:sg-grid-cols-2\",\n      \"33-33-33\": \"md:sg-grid-cols-3\",\n      \"25-25-25-25\": \"md:sg-grid-cols-4\",\n    },\n    fill: {\n      full: \"sg-w-full sg-p-4\",\n      col: \"sg-mx-auto sg-max-w-[960px] sg-p-4 md:sg-p-0\",\n    },\n    padding: {\n      \"\": \"\",\n      none: \"sg-p-0\",\n    },\n    bgcolor: bgColor,\n  },\n  defaultVariants: {\n    variant: \"100\",\n    fill: \"col\",\n    padding: \"\",\n    bgcolor: \"transparent\",\n  },\n});\n\nexport interface LayoutProps extends VariantProps<typeof layoutVariants> {\n  className?: TailwindMarginClass;\n}\n\nfunction Layout({\n  children,\n  className,\n  variant,\n  fill,\n  padding,\n  bgcolor,\n}: PropsWithChildren<LayoutProps>) {\n  const allowedInLayout = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ): boolean => {\n    if (content.type === Layout.Col1) {\n      return true;\n    } else if (\n      content.type === Layout.Col2 &&\n      (variant === \"66-33\" ||\n        variant === \"50-50\" ||\n        variant === \"33-33-33\" ||\n        variant === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (\n      content.type === Layout.Col3 &&\n      (variant === \"33-33-33\" || variant === \"25-25-25-25\")\n    ) {\n      return true;\n    } else if (content.type === Layout.Col4 && variant === \"25-25-25-25\") {\n      return true;\n    }\n\n    console.error(\n      \"Content not allowed in column for variant\",\n      variant,\n      content.type\n    );\n    return false;\n  };\n\n  const renderColumn = (\n    content: React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  ) => {\n    if (!allowedInLayout(content)) {\n      return;\n    }\n    return <div>{content}</div>;\n  };\n\n  return (\n    <div className={cn(bgColor[bgcolor ?? \"transparent\"], className)}>\n      <div className={cn(layoutVariants({ variant, fill, padding, bgcolor }))}>\n        {React.Children.map(children, (child) =>\n          React.isValidElement(child) ? renderColumn(child) : <></>\n        )}\n      </div>\n    </div>\n  );\n}\n\ntype colProp = {\n  children?: React.ReactNode;\n};\n\nfunction Col1({ children }: colProp) {\n  return children;\n}\nfunction Col2({ children }: colProp) {\n  return children;\n}\nfunction Col3({ children }: colProp) {\n  return children;\n}\nfunction Col4({ children }: colProp) {\n  return children;\n}\n\nLayout.Col1 = Col1;\nLayout.Col2 = Col2;\nLayout.Col3 = Col3;\nLayout.Col4 = Col4;\n\nexport { Layout, layoutVariants };\n"],"mappings":"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","names":["cva","jsx","cva","cva","jsx","cva","cva","jsx","cva","React","cva","jsx","cva"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "singularity-components",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "main": "./dist/main.js",
   "module": "./dist/main.mjs",
   "types": "./dist/main.d.ts",
@@ -33,7 +33,6 @@
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",