singularity-components 0.1.140 → 0.1.193

package/dist/components/templates/container/container.js

@@ -0,0 +1,58 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../utils/index.js";
+function Container({
+  children,
+  as: Component = "div",
+  className,
+  ...rest
+}) {
+  const childArray = React.Children.toArray(children);
+  const header = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Header
+  );
+  const content = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Content
+  );
+  const footer = childArray.find(
+    (child) => React.isValidElement(child) && child.type === Footer
+  );
+  const gridRows = cn(
+    "sg:grid",
+    header && footer && "sg:grid-rows-[auto_1fr_auto]",
+    header && !footer && "sg:grid-rows-[auto_1fr]",
+    !header && footer && "sg:grid-rows-[1fr_auto]",
+    !header && !footer && "sg:grid-rows-[1fr]",
+    className
+  );
+  return /* @__PURE__ */ jsxs(Component, { className: gridRows, ...rest, children: [
+    header,
+    content,
+    footer
+  ] });
+}
+function Header({ children, as: Component, ...props }) {
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Content({ children, as: Component, ...props }) {
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Footer({ children, as: Component, ...props }) {
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+Container.Header = Header;
+Container.Content = Content;
+Container.Footer = Footer;
+export {
+  Container
+};
+//# sourceMappingURL=container.js.map

package/dist/components/templates/container/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/container/container.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../../utils/index\";\nimport type { PropsWithChildren } from \"react\";\n\ntype Prop = {\n  children?: React.ReactNode;\n  as?: \"body\" | \"div\";\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction Container({\n  children,\n  as: Component = \"div\",\n  className,\n  ...rest\n}: PropsWithChildren<Prop>) {\n  const childArray = React.Children.toArray(children);\n\n  const header = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Header,\n  );\n  const content = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Content,\n  );\n  const footer = childArray.find(\n    (child) => React.isValidElement(child) && child.type === Footer,\n  );\n\n  const gridRows = cn(\n    \"sg:grid\",\n    header && footer && \"sg:grid-rows-[auto_1fr_auto]\",\n    header && !footer && \"sg:grid-rows-[auto_1fr]\",\n    !header && footer && \"sg:grid-rows-[1fr_auto]\",\n    !header && !footer && \"sg:grid-rows-[1fr]\",\n    className,\n  );\n\n  return (\n    <Component className={gridRows} {...rest}>\n      {header}\n      {content}\n      {footer}\n    </Component>\n  );\n}\n\ntype ChildProp = {\n  children?: React.ReactNode;\n  as?: React.ElementType;\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction Header({ children, as: Component, ...props }: ChildProp) {\n  if (Component) {\n    return <Component {...props}>{children}</Component>;\n  }\n  return <>{children}</>;\n}\n\nfunction Content({ children, as: Component, ...props }: ChildProp) {\n  if (Component) {\n    return <Component {...props}>{children}</Component>;\n  }\n  return <>{children}</>;\n}\n\nfunction Footer({ children, as: Component, ...props }: ChildProp) {\n  if (Component) {\n    return <Component {...props}>{children}</Component>;\n  }\n  return <>{children}</>;\n}\n\nContainer.Header = Header;\nContainer.Content = Content;\nContainer.Footer = Footer;\n\nexport { Container };\n"],"mappings":"AAqCI,SAiBK,UAFE,KAfP;AArCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AAQnB,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAElD,QAAM,SAAS,WAAW;AAAA,IACxB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AACA,QAAM,UAAU,WAAW;AAAA,IACzB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AACA,QAAM,SAAS,WAAW;AAAA,IACxB,CAAC,UAAU,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS;AAAA,EAC3D;AAEA,QAAM,WAAW;AAAA,IACf;AAAA,IACA,UAAU,UAAU;AAAA,IACpB,UAAU,CAAC,UAAU;AAAA,IACrB,CAAC,UAAU,UAAU;AAAA,IACrB,CAAC,UAAU,CAAC,UAAU;AAAA,IACtB;AAAA,EACF;AAEA,SACE,qBAAC,aAAU,WAAW,UAAW,GAAG,MACjC;AAAA;AAAA,IACA;AAAA,IACA;AAAA,KACH;AAEJ;AAOA,SAAS,OAAO,EAAE,UAAU,IAAI,WAAW,GAAG,MAAM,GAAc;AAChE,MAAI,WAAW;AACb,WAAO,oBAAC,aAAW,GAAG,OAAQ,UAAS;AAAA,EACzC;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,SAAS,QAAQ,EAAE,UAAU,IAAI,WAAW,GAAG,MAAM,GAAc;AACjE,MAAI,WAAW;AACb,WAAO,oBAAC,aAAW,GAAG,OAAQ,UAAS;AAAA,EACzC;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,SAAS,OAAO,EAAE,UAAU,IAAI,WAAW,GAAG,MAAM,GAAc;AAChE,MAAI,WAAW;AACb,WAAO,oBAAC,aAAW,GAAG,OAAQ,UAAS;AAAA,EACzC;AACA,SAAO,gCAAG,UAAS;AACrB;AAEA,UAAU,SAAS;AACnB,UAAU,UAAU;AACpB,UAAU,SAAS;","names":[]}

package/dist/components/templates/footer/footer.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Footer(): react_jsx_runtime.JSX.Element;
+
+export { Footer };

package/dist/components/templates/footer/footer.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Layout, TextSpan } from "../../primitives/index.js";
+function Footer() {
+  return /* @__PURE__ */ jsx(Layout, { as: "footer", className: "sg:border-t sg:mt-auto sg:py-12", children: /* @__PURE__ */ jsx(Layout.Col1, { className: "sg:text-center", children: /* @__PURE__ */ jsxs(TextSpan, { size: "xl", fontweight: "bold", foreground: "primary", children: [
+    "filion",
+    /* @__PURE__ */ jsx(TextSpan, { size: "xl", fontweight: "bold", foreground: "secondary", children: "." })
+  ] }) }) });
+}
+export {
+  Footer
+};
+//# sourceMappingURL=footer.js.map

package/dist/components/templates/footer/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/footer/footer.tsx"],"sourcesContent":["import { Layout, TextSpan } from \"../../primitives/index\";\r\n\r\nfunction Footer() {\r\n  return (\r\n    <Layout as=\"footer\" className=\"sg:border-t sg:mt-auto sg:py-12\">\r\n      <Layout.Col1 className=\"sg:text-center\">\r\n        <TextSpan size=\"xl\" fontweight=\"bold\" foreground=\"primary\">\r\n          filion\r\n          <TextSpan size=\"xl\" fontweight=\"bold\" foreground=\"secondary\">\r\n            .\r\n          </TextSpan>\r\n        </TextSpan>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n\r\nexport { Footer };\r\n"],"mappings":"AAMQ,SAEE,KAFF;AANR,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,SAAS;AAChB,SACE,oBAAC,UAAO,IAAG,UAAS,WAAU,mCAC5B,8BAAC,OAAO,MAAP,EAAY,WAAU,kBACrB,+BAAC,YAAS,MAAK,MAAK,YAAW,QAAO,YAAW,WAAU;AAAA;AAAA,IAEzD,oBAAC,YAAS,MAAK,MAAK,YAAW,QAAO,YAAW,aAAY,eAE7D;AAAA,KACF,GACF,GACF;AAEJ;","names":[]}

package/dist/components/templates/form/form.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Form(): react_jsx_runtime.JSX.Element;
+
+export { Form as default };

package/dist/components/templates/form/form.js

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  Checkbox,
+  Input,
+  Layout,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea
+} from "../../primitives/index.js";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet
+} from "../../primitives/forms/field.js";
+const months = [
+  { label: "MM", value: null },
+  { label: "01", value: "01" },
+  { label: "02", value: "02" },
+  { label: "03", value: "03" },
+  { label: "04", value: "04" },
+  { label: "05", value: "05" },
+  { label: "06", value: "06" },
+  { label: "07", value: "07" },
+  { label: "08", value: "08" },
+  { label: "09", value: "09" },
+  { label: "10", value: "10" },
+  { label: "11", value: "11" },
+  { label: "12", value: "12" }
+];
+const years = [
+  { label: "YYYY", value: null },
+  { label: "2024", value: "2024" },
+  { label: "2025", value: "2025" },
+  { label: "2026", value: "2026" },
+  { label: "2027", value: "2027" },
+  { label: "2028", value: "2028" },
+  { label: "2029", value: "2029" }
+];
+function Form() {
+  return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx(Layout.Col1, { children: /* @__PURE__ */ jsx("form", { children: /* @__PURE__ */ jsxs(FieldGroup, { children: [
+    /* @__PURE__ */ jsxs(FieldSet, { children: [
+      /* @__PURE__ */ jsx(FieldLegend, { children: "Payment Method" }),
+      /* @__PURE__ */ jsx(FieldDescription, { children: "All transactions are secure and encrypted" }),
+      /* @__PURE__ */ jsxs(FieldGroup, { children: [
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-card-name-43j", children: "Name on Card" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "checkout-7j9-card-name-43j",
+              placeholder: "Evil Rabbit",
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-card-number-uw1", children: "Card Number" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "checkout-7j9-card-number-uw1",
+              placeholder: "1234 5678 9012 3456",
+              required: true
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldDescription, { children: "Enter your 16-digit card number" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-exp-month-ts6", children: "Month" }),
+            /* @__PURE__ */ jsxs(Select, { items: months, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-exp-month-ts6", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: months.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-exp-year-f59", children: "Year" }),
+            /* @__PURE__ */ jsxs(Select, { items: years, children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "checkout-7j9-exp-year-f59", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectGroup, { children: years.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.value, children: item.label }, item.value)) }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Field, { children: [
+            /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-cvv", children: "CVV" }),
+            /* @__PURE__ */ jsx(Input, { id: "checkout-7j9-cvv", placeholder: "123", required: true })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FieldSeparator, {}),
+    /* @__PURE__ */ jsxs(FieldSet, { children: [
+      /* @__PURE__ */ jsx(FieldLegend, { children: "Billing Address" }),
+      /* @__PURE__ */ jsx(FieldDescription, { children: "The billing address associated with your payment method" }),
+      /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "checkout-7j9-same-as-shipping-wgm",
+            defaultChecked: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            htmlFor: "checkout-7j9-same-as-shipping-wgm",
+            className: "font-normal",
+            children: "Same as shipping address"
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(FieldSet, { children: /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-7j9-optional-comments", children: "Comments" }),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          id: "checkout-7j9-optional-comments",
+          placeholder: "Add any additional comments",
+          className: "resize-none"
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", children: [
+      /* @__PURE__ */ jsx(Button, { type: "submit", children: "Submit" }),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", type: "button", children: "Cancel" })
+    ] })
+  ] }) }) }) });
+}
+export {
+  Form as default
+};
+//# sourceMappingURL=form.js.map

package/dist/components/templates/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/form/form.tsx"],"sourcesContent":["import {\r\n  Button,\r\n  Checkbox,\r\n  Input,\r\n  Layout,\r\n  Select,\r\n  SelectContent,\r\n  SelectGroup,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n  Textarea,\r\n} from \"../../primitives/index\";\r\nimport {\r\n  Field,\r\n  FieldDescription,\r\n  FieldGroup,\r\n  FieldLabel,\r\n  FieldLegend,\r\n  FieldSeparator,\r\n  FieldSet,\r\n} from \"../../primitives/forms/field\";\r\n\r\nconst months = [\r\n  { label: \"MM\", value: null },\r\n  { label: \"01\", value: \"01\" },\r\n  { label: \"02\", value: \"02\" },\r\n  { label: \"03\", value: \"03\" },\r\n  { label: \"04\", value: \"04\" },\r\n  { label: \"05\", value: \"05\" },\r\n  { label: \"06\", value: \"06\" },\r\n  { label: \"07\", value: \"07\" },\r\n  { label: \"08\", value: \"08\" },\r\n  { label: \"09\", value: \"09\" },\r\n  { label: \"10\", value: \"10\" },\r\n  { label: \"11\", value: \"11\" },\r\n  { label: \"12\", value: \"12\" },\r\n];\r\n\r\nconst years = [\r\n  { label: \"YYYY\", value: null },\r\n  { label: \"2024\", value: \"2024\" },\r\n  { label: \"2025\", value: \"2025\" },\r\n  { label: \"2026\", value: \"2026\" },\r\n  { label: \"2027\", value: \"2027\" },\r\n  { label: \"2028\", value: \"2028\" },\r\n  { label: \"2029\", value: \"2029\" },\r\n];\r\n\r\nexport default function Form() {\r\n  return (\r\n    <Layout>\r\n      <Layout.Col1>\r\n        <form>\r\n          <FieldGroup>\r\n            <FieldSet>\r\n              <FieldLegend>Payment Method</FieldLegend>\r\n              <FieldDescription>\r\n                All transactions are secure and encrypted\r\n              </FieldDescription>\r\n              <FieldGroup>\r\n                <Field>\r\n                  <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\r\n                    Name on Card\r\n                  </FieldLabel>\r\n                  <Input\r\n                    id=\"checkout-7j9-card-name-43j\"\r\n                    placeholder=\"Evil Rabbit\"\r\n                    required\r\n                  />\r\n                </Field>\r\n                <Field>\r\n                  <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\r\n                    Card Number\r\n                  </FieldLabel>\r\n                  <Input\r\n                    id=\"checkout-7j9-card-number-uw1\"\r\n                    placeholder=\"1234 5678 9012 3456\"\r\n                    required\r\n                  />\r\n                  <FieldDescription>\r\n                    Enter your 16-digit card number\r\n                  </FieldDescription>\r\n                </Field>\r\n                <div className=\"grid grid-cols-3 gap-4\">\r\n                  <Field>\r\n                    <FieldLabel htmlFor=\"checkout-exp-month-ts6\">\r\n                      Month\r\n                    </FieldLabel>\r\n                    <Select items={months}>\r\n                      <SelectTrigger id=\"checkout-exp-month-ts6\">\r\n                        <SelectValue />\r\n                      </SelectTrigger>\r\n                      <SelectContent>\r\n                        <SelectGroup>\r\n                          {months.map((item) => (\r\n                            <SelectItem key={item.value} value={item.value}>\r\n                              {item.label}\r\n                            </SelectItem>\r\n                          ))}\r\n                        </SelectGroup>\r\n                      </SelectContent>\r\n                    </Select>\r\n                  </Field>\r\n                  <Field>\r\n                    <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\r\n                      Year\r\n                    </FieldLabel>\r\n                    <Select items={years}>\r\n                      <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\r\n                        <SelectValue />\r\n                      </SelectTrigger>\r\n                      <SelectContent>\r\n                        <SelectGroup>\r\n                          {years.map((item) => (\r\n                            <SelectItem key={item.value} value={item.value}>\r\n                              {item.label}\r\n                            </SelectItem>\r\n                          ))}\r\n                        </SelectGroup>\r\n                      </SelectContent>\r\n                    </Select>\r\n                  </Field>\r\n                  <Field>\r\n                    <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\r\n                    <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\r\n                  </Field>\r\n                </div>\r\n              </FieldGroup>\r\n            </FieldSet>\r\n            <FieldSeparator />\r\n            <FieldSet>\r\n              <FieldLegend>Billing Address</FieldLegend>\r\n              <FieldDescription>\r\n                The billing address associated with your payment method\r\n              </FieldDescription>\r\n              <FieldGroup>\r\n                <Field orientation=\"horizontal\">\r\n                  <Checkbox\r\n                    id=\"checkout-7j9-same-as-shipping-wgm\"\r\n                    defaultChecked\r\n                  />\r\n                  <FieldLabel\r\n                    htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\r\n                    className=\"font-normal\"\r\n                  >\r\n                    Same as shipping address\r\n                  </FieldLabel>\r\n                </Field>\r\n              </FieldGroup>\r\n            </FieldSet>\r\n            <FieldSet>\r\n              <FieldGroup>\r\n                <Field>\r\n                  <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\r\n                    Comments\r\n                  </FieldLabel>\r\n                  <Textarea\r\n                    id=\"checkout-7j9-optional-comments\"\r\n                    placeholder=\"Add any additional comments\"\r\n                    className=\"resize-none\"\r\n                  />\r\n                </Field>\r\n              </FieldGroup>\r\n            </FieldSet>\r\n            <Field orientation=\"horizontal\">\r\n              <Button type=\"submit\">Submit</Button>\r\n              <Button variant=\"outline\" type=\"button\">\r\n                Cancel\r\n              </Button>\r\n            </Field>\r\n          </FieldGroup>\r\n        </form>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/templates/hero/hero.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HeroProps {
+    title?: React.ReactNode;
+    titleAccent?: string;
+    description?: string;
+    primaryCTA?: {
+        label: string;
+        href: string;
+    };
+    secondaryCTA?: {
+        label: string;
+        href: string;
+    };
+}
+declare function Hero({ title, titleAccent, description, primaryCTA, secondaryCTA, }: HeroProps): react_jsx_runtime.JSX.Element;
+
+export { Hero as default };

package/dist/components/templates/hero/hero.js

@@ -0,0 +1,301 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Layout,
+  LinkButton,
+  Stack,
+  Heading,
+  Text,
+  TextSpan
+} from "../../primitives/index.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+function seededRandom(seed) {
+  const x = Math.sin(seed * 9999) * 1e4;
+  return x - Math.floor(x);
+}
+function round(num, decimals = 4) {
+  return Number(num.toFixed(decimals));
+}
+function generateSparkles(count) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    left: round(seededRandom(i) * 100),
+    top: round(seededRandom(i + 1) * 100),
+    size: round(seededRandom(i + 2) * 4 + 2),
+    delay: round(seededRandom(i + 3) * 5),
+    duration: round(seededRandom(i + 4) * 2 + 1.5)
+  }));
+}
+function Hero({
+  title,
+  titleAccent,
+  description,
+  primaryCTA,
+  secondaryCTA
+}) {
+  const heroRef = useRef(null);
+  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
+  const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });
+  const sparkles = useMemo(() => generateSparkles(40), []);
+  const [bursts, setBursts] = useState([]);
+  const burstIdRef = useRef(0);
+  const handleMouseMove = useCallback((e) => {
+    const rect = heroRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setMouse({
+      x: (e.clientX - rect.left) / rect.width,
+      y: (e.clientY - rect.top) / rect.height
+    });
+    setMousePixel({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    });
+  }, []);
+  const handleClick = useCallback((e) => {
+    const rect = heroRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    const count = 18;
+    const newBursts = Array.from(
+      { length: count },
+      (_, i) => ({
+        id: burstIdRef.current++,
+        x: cx,
+        y: cy,
+        angle: 360 / count * i + Math.random() * 20 - 10,
+        speed: Math.random() * 120 + 60,
+        hue: Math.random() * 360,
+        size: Math.random() * 5 + 3
+      })
+    );
+    setBursts((prev) => [...prev, ...newBursts]);
+    setTimeout(() => {
+      setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));
+    }, 800);
+  }, []);
+  return /* @__PURE__ */ jsx(Layout, { type: "container", children: /* @__PURE__ */ jsx(Layout.Col1, { hideDiv: true, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: heroRef,
+      onMouseMove: handleMouseMove,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick(e);
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      "data-testid": "hero-section",
+      className: "sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sg:absolute sg:h-175 sg:w-175 sg:rounded-full sg:opacity-35 sg:blur-[90px] sg:transition-transform sg:duration-500 sg:ease-out",
+                  style: {
+                    background: "hsl(330, 90%, 55%)",
+                    transform: `translate(${mouse.x * 70 - 35}%, ${mouse.y * 60 - 50}%)`,
+                    top: "-10%",
+                    right: "-5%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sg:absolute sg:h-150 sg:w-150 sg:rounded-full sg:opacity-30 sg:blur-[80px] sg:transition-transform sg:duration-700 sg:ease-out",
+                  style: {
+                    background: "hsl(220, 95%, 55%)",
+                    transform: `translate(${mouse.x * -60 + 30}%, ${mouse.y * 50 - 25}%)`,
+                    top: "20%",
+                    left: "-8%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sg:absolute sg:h-137.5 sg:w-137.5 sg:rounded-full sg:opacity-30 sg:blur-[70px] sg:transition-transform sg:duration-900 sg:ease-out",
+                  style: {
+                    background: "hsl(25, 95%, 55%)",
+                    transform: `translate(${mouse.x * 55 - 28}%, ${mouse.y * -55 + 28}%)`,
+                    bottom: "-5%",
+                    right: "15%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sg:absolute sg:h-100 sg:w-100 sg:rounded-full sg:opacity-25 sg:blur-[60px] sg:transition-transform sg:duration-400 sg:ease-out",
+                  style: {
+                    background: "hsl(145, 80%, 45%)",
+                    transform: `translate(${mouse.x * 80 - 40}%, ${mouse.y * 80 - 40}%)`,
+                    top: "5%",
+                    left: "20%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sg:absolute sg:h-125 sg:w-125 sg:rounded-full sg:opacity-25 sg:blur-[75px] sg:transition-transform sg:duration-600 sg:ease-out",
+                  style: {
+                    background: "hsl(270, 85%, 55%)",
+                    transform: `translate(${mouse.x * -45 + 22}%, ${mouse.y * 65 - 32}%)`,
+                    bottom: "10%",
+                    left: "30%"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "sg:absolute sg:h-87.5 sg:w-87.5 sg:rounded-full sg:opacity-20 sg:blur-[50px] sg:transition-transform sg:duration-350 sg:ease-out",
+                  style: {
+                    background: "hsl(50, 95%, 55%)",
+                    transform: `translate(${mouse.x * 90 - 45}%, ${mouse.y * -70 + 35}%)`,
+                    top: "40%",
+                    right: "5%"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none",
+            "aria-hidden": "true",
+            children: sparkles.map((s) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "sg:absolute sg:rounded-full",
+                style: {
+                  left: `${s.left}%`,
+                  top: `${s.top}%`,
+                  width: s.size,
+                  height: s.size,
+                  background: `hsl(${s.id * 47 % 360}, 90%, 70%)`,
+                  boxShadow: `0 0 ${s.size * 2}px hsl(${s.id * 47 % 360}, 90%, 70%)`,
+                  animation: `sparkle ${s.duration}s ${s.delay}s ease-in-out infinite`,
+                  transform: `translate(${(mouse.x - 0.5) * s.size * 8}px, ${(mouse.y - 0.5) * s.size * 8}px)`,
+                  transition: "transform 0.3s ease-out"
+                }
+              },
+              s.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:pointer-events-none",
+            style: {
+              left: mousePixel.x - 150,
+              top: mousePixel.y - 150,
+              width: 300,
+              height: 300,
+              background: "radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 60%)",
+              transition: "left 0.1s ease-out, top 0.1s ease-out"
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:pointer-events-none sg:overflow-hidden",
+            "aria-hidden": "true",
+            children: bursts.map((b) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "sg:absolute sg:rounded-full",
+                style: {
+                  left: b.x,
+                  top: b.y,
+                  width: b.size,
+                  height: b.size,
+                  background: `hsl(${b.hue}, 90%, 65%)`,
+                  boxShadow: `0 0 ${b.size * 3}px hsl(${b.hue}, 90%, 65%)`,
+                  animation: `burst 0.7s ease-out forwards`,
+                  "--burst-x": `${Math.cos(b.angle * Math.PI / 180) * b.speed}px`,
+                  "--burst-y": `${Math.sin(b.angle * Math.PI / 180) * b.speed}px`
+                }
+              },
+              b.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:inset-0 sg:opacity-[0.02] sg:dark:opacity-[0.04] sg:pointer-events-none",
+            style: {
+              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-20 sg:md:py-32", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
+          (title || titleAccent) && /* @__PURE__ */ jsxs(Heading, { variant: "h1", children: [
+            title,
+            " ",
+            titleAccent && /* @__PURE__ */ jsx(TextSpan, { size: "4xl", foreground: "primary", children: titleAccent })
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "lg",
+              foreground: "muted-foreground",
+              className: "sg:mt-6 sg:max-w-xl",
+              children: description
+            }
+          ),
+          (primaryCTA || secondaryCTA) && /* @__PURE__ */ jsxs(Stack, { gap: 3, direction: "row", wrap: "wrap", className: "sg:mt-8", children: [
+            primaryCTA && /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                buttonSize: "lg",
+                to: primaryCTA.href,
+                className: "sg:z-1",
+                children: primaryCTA.label
+              }
+            ),
+            secondaryCTA && /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                variant: "secondary",
+                buttonSize: "lg",
+                to: secondaryCTA.href,
+                className: "sg:z-1",
+                children: secondaryCTA.label
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:bottom-0 sg:left-0 sg:right-0 sg:h-32 sg:bg-linear-to-t sg:from-background sg:to-transparent sg:pointer-events-none",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  Hero as default
+};
+//# sourceMappingURL=hero.js.map

package/dist/components/templates/hero/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/hero/hero.tsx"],"sourcesContent":["\"use client\";\r\nimport {\r\n  Layout,\r\n  LinkButton,\r\n  Stack,\r\n  Heading,\r\n  Text,\r\n  TextSpan,\r\n} from \"../../primitives/index\";\r\nimport { useCallback, useMemo, useRef, useState } from \"react\";\r\n\r\nfunction seededRandom(seed: number) {\r\n  const x = Math.sin(seed * 9999) * 10000;\r\n  return x - Math.floor(x);\r\n}\r\n\r\nfunction round(num: number, decimals = 4) {\r\n  return Number(num.toFixed(decimals));\r\n}\r\n\r\nfunction generateSparkles(count: number) {\r\n  return Array.from({ length: count }, (_, i) => ({\r\n    id: i,\r\n    left: round(seededRandom(i) * 100),\r\n    top: round(seededRandom(i + 1) * 100),\r\n    size: round(seededRandom(i + 2) * 4 + 2),\r\n    delay: round(seededRandom(i + 3) * 5),\r\n    duration: round(seededRandom(i + 4) * 2 + 1.5),\r\n  }));\r\n}\r\n\r\ninterface BurstParticle {\r\n  id: number;\r\n  x: number;\r\n  y: number;\r\n  angle: number;\r\n  speed: number;\r\n  hue: number;\r\n  size: number;\r\n}\r\n\r\ninterface HeroProps {\r\n  title?: React.ReactNode;\r\n  titleAccent?: string;\r\n  description?: string;\r\n  primaryCTA?: { label: string; href: string };\r\n  secondaryCTA?: { label: string; href: string };\r\n}\r\n\r\nexport default function Hero({\r\n  title,\r\n  titleAccent,\r\n  description,\r\n  primaryCTA,\r\n  secondaryCTA,\r\n}: HeroProps) {\r\n  const heroRef = useRef<HTMLElement>(null);\r\n  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });\r\n  const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });\r\n  const sparkles = useMemo(() => generateSparkles(40), []);\r\n  const [bursts, setBursts] = useState<BurstParticle[]>([]);\r\n  const burstIdRef = useRef(0);\r\n\r\n  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n    const rect = heroRef.current?.getBoundingClientRect();\r\n    if (!rect) return;\r\n    setMouse({\r\n      x: (e.clientX - rect.left) / rect.width,\r\n      y: (e.clientY - rect.top) / rect.height,\r\n    });\r\n    setMousePixel({\r\n      x: e.clientX - rect.left,\r\n      y: e.clientY - rect.top,\r\n    });\r\n  }, []);\r\n\r\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n    const rect = heroRef.current?.getBoundingClientRect();\r\n    if (!rect) return;\r\n    const cx = e.clientX - rect.left;\r\n    const cy = e.clientY - rect.top;\r\n    const count = 18;\r\n\r\n    const newBursts: BurstParticle[] = Array.from(\r\n      { length: count },\r\n      (_, i) => ({\r\n        id: burstIdRef.current++,\r\n        x: cx,\r\n        y: cy,\r\n        angle: (360 / count) * i + Math.random() * 20 - 10,\r\n        speed: Math.random() * 120 + 60,\r\n        hue: Math.random() * 360,\r\n        size: Math.random() * 5 + 3,\r\n      }),\r\n    );\r\n\r\n    setBursts((prev) => [...prev, ...newBursts]);\r\n    setTimeout(() => {\r\n      setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));\r\n    }, 800);\r\n  }, []);\r\n\r\n  return (\r\n    <Layout type=\"container\">\r\n      <Layout.Col1 hideDiv>\r\n        <section\r\n          ref={heroRef}\r\n          onMouseMove={handleMouseMove}\r\n          onClick={handleClick}\r\n          onKeyDown={(e) => {\r\n            if (e.key === \"Enter\" || e.key === \" \") {\r\n              e.preventDefault();\r\n              handleClick(e as any);\r\n            }\r\n          }}\r\n          role=\"button\"\r\n          tabIndex={0}\r\n          data-testid=\"hero-section\"\r\n          className=\"sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2\"\r\n        >\r\n          {/* Colorful gradient blobs — follow mouse */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            {/* Hot pink / magenta */}\r\n            <div\r\n              className=\"sg:absolute sg:h-175 sg:w-175 sg:rounded-full sg:opacity-35 sg:blur-[90px] sg:transition-transform sg:duration-500 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(330, 90%, 55%)\",\r\n                transform: `translate(${mouse.x * 70 - 35}%, ${mouse.y * 60 - 50}%)`,\r\n                top: \"-10%\",\r\n                right: \"-5%\",\r\n              }}\r\n            />\r\n            {/* Electric blue */}\r\n            <div\r\n              className=\"sg:absolute sg:h-150 sg:w-150 sg:rounded-full sg:opacity-30 sg:blur-[80px] sg:transition-transform sg:duration-700 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(220, 95%, 55%)\",\r\n                transform: `translate(${mouse.x * -60 + 30}%, ${mouse.y * 50 - 25}%)`,\r\n                top: \"20%\",\r\n                left: \"-8%\",\r\n              }}\r\n            />\r\n            {/* Vivid orange */}\r\n            <div\r\n              className=\"sg:absolute sg:h-137.5 sg:w-137.5 sg:rounded-full sg:opacity-30 sg:blur-[70px] sg:transition-transform sg:duration-900 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(25, 95%, 55%)\",\r\n                transform: `translate(${mouse.x * 55 - 28}%, ${mouse.y * -55 + 28}%)`,\r\n                bottom: \"-5%\",\r\n                right: \"15%\",\r\n              }}\r\n            />\r\n            {/* Lime / green */}\r\n            <div\r\n              className=\"sg:absolute sg:h-100 sg:w-100 sg:rounded-full sg:opacity-25 sg:blur-[60px] sg:transition-transform sg:duration-400 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(145, 80%, 45%)\",\r\n                transform: `translate(${mouse.x * 80 - 40}%, ${mouse.y * 80 - 40}%)`,\r\n                top: \"5%\",\r\n                left: \"20%\",\r\n              }}\r\n            />\r\n            {/* Purple / violet */}\r\n            <div\r\n              className=\"sg:absolute sg:h-125 sg:w-125 sg:rounded-full sg:opacity-25 sg:blur-[75px] sg:transition-transform sg:duration-600 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(270, 85%, 55%)\",\r\n                transform: `translate(${mouse.x * -45 + 22}%, ${mouse.y * 65 - 32}%)`,\r\n                bottom: \"10%\",\r\n                left: \"30%\",\r\n              }}\r\n            />\r\n            {/* Yellow / gold accent */}\r\n            <div\r\n              className=\"sg:absolute sg:h-87.5 sg:w-87.5 sg:rounded-full sg:opacity-20 sg:blur-[50px] sg:transition-transform sg:duration-350 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(50, 95%, 55%)\",\r\n                transform: `translate(${mouse.x * 90 - 45}%, ${mouse.y * -70 + 35}%)`,\r\n                top: \"40%\",\r\n                right: \"5%\",\r\n              }}\r\n            />\r\n          </div>\r\n\r\n          {/* Sparkle / glitter particles */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            {sparkles.map((s) => (\r\n              <div\r\n                key={s.id}\r\n                className=\"sg:absolute sg:rounded-full\"\r\n                style={{\r\n                  left: `${s.left}%`,\r\n                  top: `${s.top}%`,\r\n                  width: s.size,\r\n                  height: s.size,\r\n                  background: `hsl(${(s.id * 47) % 360}, 90%, 70%)`,\r\n                  boxShadow: `0 0 ${s.size * 2}px hsl(${(s.id * 47) % 360}, 90%, 70%)`,\r\n                  animation: `sparkle ${s.duration}s ${s.delay}s ease-in-out infinite`,\r\n                  transform: `translate(${(mouse.x - 0.5) * s.size * 8}px, ${(mouse.y - 0.5) * s.size * 8}px)`,\r\n                  transition: \"transform 0.3s ease-out\",\r\n                }}\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          {/* Cursor spotlight */}\r\n          <div\r\n            className=\"sg:absolute sg:pointer-events-none\"\r\n            style={{\r\n              left: mousePixel.x - 150,\r\n              top: mousePixel.y - 150,\r\n              width: 300,\r\n              height: 300,\r\n              background:\r\n                \"radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 60%)\",\r\n              transition: \"left 0.1s ease-out, top 0.1s ease-out\",\r\n            }}\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          {/* Click burst particles */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:pointer-events-none sg:overflow-hidden\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            {bursts.map((b) => (\r\n              <div\r\n                key={b.id}\r\n                className=\"sg:absolute sg:rounded-full\"\r\n                style={\r\n                  {\r\n                    left: b.x,\r\n                    top: b.y,\r\n                    width: b.size,\r\n                    height: b.size,\r\n                    background: `hsl(${b.hue}, 90%, 65%)`,\r\n                    boxShadow: `0 0 ${b.size * 3}px hsl(${b.hue}, 90%, 65%)`,\r\n                    animation: `burst 0.7s ease-out forwards`,\r\n                    \"--burst-x\": `${Math.cos((b.angle * Math.PI) / 180) * b.speed}px`,\r\n                    \"--burst-y\": `${Math.sin((b.angle * Math.PI) / 180) * b.speed}px`,\r\n                  } as React.CSSProperties\r\n                }\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          {/* Subtle grain texture overlay */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:opacity-[0.02] sg:dark:opacity-[0.04] sg:pointer-events-none\"\r\n            style={{\r\n              backgroundImage:\r\n                \"url(\\\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\\\")\",\r\n            }}\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          <Layout type=\"col\" className=\"sg:py-20 sg:md:py-32\">\r\n            <Layout.Col1 hideDiv>\r\n              {(title || titleAccent) && (\r\n                <Heading variant=\"h1\">\r\n                  {title}{\" \"}\r\n                  {titleAccent && (\r\n                    <TextSpan size=\"4xl\" foreground=\"primary\">\r\n                      {titleAccent}\r\n                    </TextSpan>\r\n                  )}\r\n                </Heading>\r\n              )}\r\n\r\n              {description && (\r\n                <Text\r\n                  size=\"lg\"\r\n                  foreground=\"muted-foreground\"\r\n                  className=\"sg:mt-6 sg:max-w-xl\"\r\n                >\r\n                  {description}\r\n                </Text>\r\n              )}\r\n\r\n              {(primaryCTA || secondaryCTA) && (\r\n                <Stack gap={3} direction=\"row\" wrap=\"wrap\" className=\"sg:mt-8\">\r\n                  {primaryCTA && (\r\n                    <LinkButton\r\n                      buttonSize=\"lg\"\r\n                      to={primaryCTA.href}\r\n                      className=\"sg:z-1\"\r\n                    >\r\n                      {primaryCTA.label}\r\n                    </LinkButton>\r\n                  )}\r\n                  {secondaryCTA && (\r\n                    <LinkButton\r\n                      variant=\"secondary\"\r\n                      buttonSize=\"lg\"\r\n                      to={secondaryCTA.href}\r\n                      className=\"sg:z-1\"\r\n                    >\r\n                      {secondaryCTA.label}\r\n                    </LinkButton>\r\n                  )}\r\n                </Stack>\r\n              )}\r\n            </Layout.Col1>\r\n          </Layout>\r\n\r\n          {/* Bottom fade to background */}\r\n          <div\r\n            className=\"sg:absolute sg:bottom-0 sg:left-0 sg:right-0 sg:h-32 sg:bg-linear-to-t sg:from-background sg:to-transparent sg:pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        </section>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/templates/index.d.ts

@@ -0,0 +1,5 @@
+export { Container } from './container/container.js';
+export { Footer } from './footer/footer.js';
+export { Header, HeaderProps, NavLink } from './navigation/header.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/components/templates/index.js

@@ -0,0 +1,5 @@
+export * from "./container/container.js";
+export * from "./footer/footer.js";
+export * from "./hero/hero.js";
+export * from "./navigation/index.js";
+//# sourceMappingURL=index.js.map

package/dist/components/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/templates/index.ts"],"sourcesContent":["/**\n * Templates index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./container/container\";\nexport * from \"./footer/footer\";\nexport * from \"./hero/hero\";\nexport * from \"./navigation/index\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}