@vkzstudio/muza-ui 1.2.0 → 1.4.0

package/dist/components/UniversalFooter/UniversalFooter.js

@@ -1,44 +1,36 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import * as i from "react";
-import { TypographyLink as w } from "../TypographyLink/TypographyLink.js";
-import { cn as s } from "../../utils/cn.js";
-import { Flex as n } from "../Flex/Flex.js";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import * as s from "react";
+import { PageContainer as N } from "../PageContainer/PageContainer.js";
+import { TypographyLink as C } from "../TypographyLink/TypographyLink.js";
+import { cn as l } from "../../utils/cn.js";
+import { Flex as i } from "../Flex/Flex.js";
 import { Typography as v } from "../Typography/Typography.js";
-const N = [
-  "mx-auto w-full",
-  "max-md:max-w-[calc(100%-2*var(--spacing-layout-p-standard))]",
-  "max-lg:max-w-[calc(100%-2*var(--spacing-layout-p-standard))]",
-  "max-xl:max-w-[58.5rem]",
-  "max-w-[75rem]",
-  "2xl:max-w-[93.75rem]"
-], l = (e, t, r) => {
-  const a = i.useContext(e);
+const n = (t, e, r) => {
+  const a = s.useContext(t);
   if (a === null)
     throw new Error(
-      `\`${t}\` must be used within \`${r}\`.`
+      `\`${e}\` must be used within \`${r}\`.`
     );
   return a;
-}, p = i.createContext(null), d = i.createContext(null), g = i.createContext(null), F = i.createContext(null), U = i.createContext(null), x = i.createContext(null), y = i.createContext(null), C = i.forwardRef(
-  ({ className: e, contentClassName: t, children: r, ...a }, m) => /* @__PURE__ */ o(p.Provider, { value: !0, children: /* @__PURE__ */ o(
+}, p = s.createContext(null), u = s.createContext(null), g = s.createContext(null), F = s.createContext(null), U = s.createContext(null), f = s.createContext(null), y = s.createContext(null), w = s.forwardRef(
+  ({ className: t, contentClassName: e, children: r, ...a }, m) => /* @__PURE__ */ o(p.Provider, { value: !0, children: /* @__PURE__ */ o(
     "footer",
     {
       ref: m,
       "data-slot": "universal-footer",
-      className: s(
-        "w-full bg-surface-dark-def pt-5xl pb-3xl text-text-invert-def",
-        e
+      className: l(
+        "w-full bg-comp-universal-footer-bg pt-5xl pb-3xl text-text-invert-fixed",
+        t
       ),
       ...a,
       children: /* @__PURE__ */ o(
-        n,
+        N,
         {
           "data-slot": "universal-footer-inner",
-          direction: "column",
-          align: "stretch",
-          className: s(
-            "gap-layout-gap-medium",
-            N,
-            t
+          spacingType: "margin",
+          className: l(
+            "flex flex-col items-stretch gap-layout-gap-medium",
+            e
           ),
           children: r
         }
@@ -46,80 +38,80 @@ const N = [
     }
   ) })
 );
-C.displayName = "UniversalFooter";
+w.displayName = "UniversalFooter";
 const S = ({
-  className: e,
-  ...t
-}) => (l(p, "UniversalFooterBody", "UniversalFooter"), /* @__PURE__ */ o(d.Provider, { value: !0, children: /* @__PURE__ */ o(
-  n,
+  className: t,
+  ...e
+}) => (n(p, "UniversalFooterBody", "UniversalFooter"), /* @__PURE__ */ o(u.Provider, { value: !0, children: /* @__PURE__ */ o(
+  i,
   {
     "data-slot": "universal-footer-body",
     direction: "column",
     align: "stretch",
-    className: s("w-full gap-layout-gap-small", e),
-    ...t
+    className: l("w-full gap-layout-gap-small", t),
+    ...e
   }
 ) }));
 S.displayName = "UniversalFooterBody";
 const B = ({
-  className: e,
-  ...t
-}) => (l(
-  d,
+  className: t,
+  ...e
+}) => (n(
+  u,
   "UniversalFooterTop",
   "UniversalFooterBody"
 ), /* @__PURE__ */ o(g.Provider, { value: !0, children: /* @__PURE__ */ o(
-  n,
+  i,
   {
     "data-slot": "universal-footer-top",
     direction: "column",
     align: "start",
     gap: "3xl",
-    className: s(
+    className: l(
       "w-full md:flex-row md:items-center md:justify-between md:gap-2xl",
-      e
+      t
     ),
-    ...t
+    ...e
   }
 ) }));
 B.displayName = "UniversalFooterTop";
 const L = ({
-  className: e,
-  ...t
-}) => (l(
+  className: t,
+  ...e
+}) => (n(
   g,
   "UniversalFooterLogo",
   "UniversalFooterTop"
 ), /* @__PURE__ */ o(
-  n,
+  i,
   {
     "data-slot": "universal-footer-logo",
     align: "center",
-    className: s("shrink-0", e),
-    ...t
+    className: l("shrink-0", t),
+    ...e
   }
 ));
 L.displayName = "UniversalFooterLogo";
 const k = ({
-  className: e,
-  ...t
-}) => (l(
+  className: t,
+  ...e
+}) => (n(
   g,
   "UniversalFooterSocialList",
   "UniversalFooterTop"
 ), /* @__PURE__ */ o(F.Provider, { value: !0, children: /* @__PURE__ */ o(
-  n,
+  i,
   {
     "data-slot": "universal-footer-social-list",
     component: "ul",
     align: "center",
     gap: "sm",
-    className: s("shrink-0", e),
-    ...t
+    className: l("shrink-0", t),
+    ...e
   }
 ) }));
 k.displayName = "UniversalFooterSocialList";
-const T = i.forwardRef(({ className: e, children: t, ...r }, a) => (l(
+const T = s.forwardRef(({ className: t, children: e, ...r }, a) => (n(
   F,
   "UniversalFooterSocialLink",
   "UniversalFooterSocialList"
@@ -128,90 +120,90 @@ const T = i.forwardRef(({ className: e, children: t, ...r }, a) => (l(
   {
     ref: a,
     "data-slot": "universal-footer-social-link",
-    className: s(
+    className: l(
       "flex size-comp-button-h-sm items-center justify-center rounded-comp-button-radius",
       "bg-comp-button-primary-bg-def text-comp-button-primary-text-def transition-colors",
       "hover:bg-comp-button-primary-bg-hover hover:text-comp-button-primary-text-hover",
       "focus-visible-default focus-visible:bg-comp-button-primary-bg-focused focus-visible:text-comp-button-primary-text-focused",
       "active:bg-comp-button-primary-bg-pressed active:text-comp-button-primary-text-pressed",
       "[&>svg]:size-icon-small",
-      e
+      t
     ),
     ...r,
-    children: t
+    children: e
   }
 ) })));
 T.displayName = "UniversalFooterSocialLink";
 const P = ({
-  className: e,
-  ...t
-}) => (l(
-  d,
+  className: t,
+  ...e
+}) => (n(
+  u,
   "UniversalFooterSeparator",
   "UniversalFooterBody"
 ), /* @__PURE__ */ o(
   "hr",
   {
     "data-slot": "universal-footer-separator",
-    className: s(
-      "w-full border-0 border-t border-surface-base-secondary/16",
-      e
+    className: l(
+      "w-full border-0 border-t border-stroke-invert-secondary",
+      t
     ),
-    ...t
+    ...e
   }
 ));
 P.displayName = "UniversalFooterSeparator";
 const j = ({
-  className: e,
-  ...t
-}) => (l(
-  d,
+  className: t,
+  ...e
+}) => (n(
+  u,
   "UniversalFooterSections",
   "UniversalFooterBody"
 ), /* @__PURE__ */ o(U.Provider, { value: !0, children: /* @__PURE__ */ o(
   "div",
   {
     "data-slot": "universal-footer-sections",
-    className: s(
+    className: l(
       "flex w-full flex-col gap-4xl",
-      "md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-4xl md:gap-y-2xl md:[&>:first-child]:row-span-2",
+      "md:grid md:grid-cols-2 md:grid-rows-[auto_1fr] md:items-start md:gap-x-4xl md:gap-y-2xl md:[&>:first-child]:row-span-2",
       "lg:flex lg:flex-row lg:items-start lg:justify-between lg:gap-x-2xl lg:gap-y-0",
-      e
+      t
     ),
-    ...t
+    ...e
   }
 ) }));
 j.displayName = "UniversalFooterSections";
-const z = (e, t) => {
-  const r = i.Children.toArray(e);
+const G = (t, e) => {
+  const r = s.Children.toArray(t);
   if (r.length === 0) return [];
-  const a = Math.max(1, Math.ceil(r.length / t)), m = [];
-  for (let c = 0; c < t; c += 1) {
-    const u = r.slice(c * a, (c + 1) * a);
-    u.length > 0 && m.push(u);
+  const a = Math.max(1, Math.ceil(r.length / e)), m = [];
+  for (let c = 0; c < e; c += 1) {
+    const d = r.slice(c * a, (c + 1) * a);
+    d.length > 0 && m.push(d);
   }
   return m;
-}, R = ({
-  className: e,
-  heading: t,
+}, z = ({
+  className: t,
+  heading: e,
   columns: r = 1,
   children: a,
   ...m
 }) => {
-  l(
+  n(
     U,
     "UniversalFooterSection",
     "UniversalFooterSections"
   );
-  const c = r > 1, u = c ? z(a, r) : null;
-  return /* @__PURE__ */ o(x.Provider, { value: !0, children: /* @__PURE__ */ f(
-    n,
+  const c = r > 1, d = c ? G(a, r) : null;
+  return /* @__PURE__ */ o(f.Provider, { value: !0, children: /* @__PURE__ */ x(
+    i,
     {
       "data-slot": "universal-footer-section",
       direction: "column",
       align: "start",
       gap: "xl",
-      className: e,
+      className: t,
       ...m,
       children: [
         /* @__PURE__ */ o(
@@ -222,18 +214,18 @@ const z = (e, t) => {
             size: "base",
             weight: "medium",
             fixY: !0,
-            className: "text-text-invert-def",
-            children: t
+            className: "text-text-invert-fixed",
+            children: e
           }
         ),
         c ? /* @__PURE__ */ o(
-          n,
+          i,
           {
             direction: "column",
             gap: "xl",
             className: "lg:flex-row lg:items-start lg:gap-7xl",
-            children: u.map((h, b) => /* @__PURE__ */ o(
-              n,
+            children: d.map((h, b) => /* @__PURE__ */ o(
+              i,
               {
                 "data-slot": "universal-footer-section-column",
                 direction: "column",
@@ -244,124 +236,141 @@ const z = (e, t) => {
               b
             ))
           }
-        ) : /* @__PURE__ */ o(n, { direction: "column", align: "start", gap: "xl", children: a })
+        ) : /* @__PURE__ */ o(i, { direction: "column", align: "start", gap: "xl", children: a })
       ]
     }
   ) });
 };
-R.displayName = "UniversalFooterSection";
-const A = i.forwardRef(({ variant: e = "invertSecondary", underline: t = !1, ...r }, a) => (l(p, "UniversalFooterLink", "UniversalFooter"), /* @__PURE__ */ o(
-  w,
+z.displayName = "UniversalFooterSection";
+const R = s.forwardRef(({ variant: t = "invertSecondary", underline: e = !1, ...r }, a) => (n(p, "UniversalFooterLink", "UniversalFooter"), /* @__PURE__ */ o(
+  C,
   {
     ref: a,
     "data-slot": "universal-footer-link",
-    variant: e,
-    underline: t,
+    variant: t,
+    underline: e,
     ...r
   }
 )));
-A.displayName = "UniversalFooterLink";
-const G = ({
-  className: e,
-  ...t
-}) => (l(
-  x,
+R.displayName = "UniversalFooterLink";
+const A = ({
+  className: t,
+  ...e
+}) => (n(
+  f,
   "UniversalFooterContactList",
   "UniversalFooterSection"
 ), /* @__PURE__ */ o(
-  n,
+  i,
   {
     "data-slot": "universal-footer-contact-list",
     direction: "column",
     align: "start",
     gap: "md",
-    className: e,
-    ...t
+    className: t,
+    ...e
   }
 ));
-G.displayName = "UniversalFooterContactList";
+A.displayName = "UniversalFooterContactList";
 const Y = ({
-  className: e,
-  ...t
-}) => (l(
-  x,
+  className: t,
+  ...e
+}) => (n(
+  f,
   "UniversalFooterAppBadges",
   "UniversalFooterSection"
 ), /* @__PURE__ */ o(
-  n,
+  i,
   {
     "data-slot": "universal-footer-app-badges",
     align: "start",
     gap: "md",
-    className: e,
-    ...t
+    className: t,
+    ...e
   }
 ));
 Y.displayName = "UniversalFooterAppBadges";
 const M = ({
-  className: e,
-  ...t
-}) => (l(
-  d,
-  "UniversalFooterBottom",
-  "UniversalFooterBody"
-), /* @__PURE__ */ o(y.Provider, { value: !0, children: /* @__PURE__ */ o(
-  n,
-  {
-    "data-slot": "universal-footer-bottom",
-    direction: "column",
-    align: "start",
-    gap: "4xl",
-    className: s(
-      "w-full md:flex-row md:items-start md:justify-between md:gap-2xl",
-      e
-    ),
-    ...t
-  }
-) }));
+  className: t,
+  children: e,
+  ...r
+}) => {
+  n(
+    u,
+    "UniversalFooterBottom",
+    "UniversalFooterBody"
+  );
+  const a = s.Children.count(e) === 1;
+  return /* @__PURE__ */ o(y.Provider, { value: { isSingleGroup: a }, children: /* @__PURE__ */ o(
+    i,
+    {
+      "data-slot": "universal-footer-bottom",
+      direction: "column",
+      align: a ? "center" : "start",
+      gap: "4xl",
+      className: l(
+        "w-full md:flex-row md:gap-2xl",
+        a ? "md:items-center md:justify-center" : "md:items-start md:justify-between",
+        t
+      ),
+      ...r,
+      children: e
+    }
+  ) });
+};
 M.displayName = "UniversalFooterBottom";
 const $ = ({
-  className: e,
-  label: t,
+  className: t,
+  label: e,
   align: r = "start",
   labelSize: a = "sm",
   children: m,
   ...c
-}) => (l(
-  y,
-  "UniversalFooterBottomGroup",
-  "UniversalFooterBottom"
-), /* @__PURE__ */ f(
-  n,
-  {
-    "data-slot": "universal-footer-bottom-group",
-    direction: "column",
-    align: "start",
-    gap: "sm",
-    className: s(r === "end" && "md:items-end", e),
-    ...c,
-    children: [
-      t != null && /* @__PURE__ */ o(
-        v,
+}) => {
+  const { isSingleGroup: d } = n(
+    y,
+    "UniversalFooterBottomGroup",
+    "UniversalFooterBottom"
+  );
+  return /* @__PURE__ */ x(
+    i,
+    {
+      "data-slot": "universal-footer-bottom-group",
+      direction: "column",
+      align: d ? "center" : "start",
+      gap: "sm",
+      className: l(
         {
-          component: "span",
-          variant: "body",
-          size: a,
-          weight: "regular",
-          fixY: !0,
-          className: "text-text-invert-def opacity-70",
-          children: t
-        }
+          "md:items-start": r === "start",
+          "md:items-end": r === "end",
+          "md:items-center": r === "center"
+        },
+        t
       ),
-      m
-    ]
-  }
-));
+      ...c,
+      children: [
+        e != null && /* @__PURE__ */ o(
+          v,
+          {
+            component: "span",
+            variant: "body",
+            size: a,
+            weight: "regular",
+            fixY: !0,
+            className: "text-text-invert-fixed opacity-70",
+            children: e
+          }
+        ),
+        m
+      ]
+    }
+  );
+};
 $.displayName = "UniversalFooterBottomGroup";
 const E = ({
-  className: e,
-  ...t
-}) => (l(
+  className: t,
+  ...e
+}) => (n(
   p,
   "UniversalFooterCopyright",
   "UniversalFooter"
@@ -374,25 +383,25 @@ const E = ({
     weight: "regular",
     fixY: !0,
     "data-slot": "universal-footer-copyright",
-    className: s(
-      "w-full text-center text-text-invert-def opacity-40",
-      e
+    className: l(
+      "w-full text-center text-text-invert-fixed opacity-40",
+      t
     ),
-    ...t
+    ...e
   }
 ));
 E.displayName = "UniversalFooterCopyright";
 export {
-  C as UniversalFooter,
+  w as UniversalFooter,
   Y as UniversalFooterAppBadges,
   S as UniversalFooterBody,
   M as UniversalFooterBottom,
   $ as UniversalFooterBottomGroup,
-  G as UniversalFooterContactList,
+  A as UniversalFooterContactList,
   E as UniversalFooterCopyright,
-  A as UniversalFooterLink,
+  R as UniversalFooterLink,
   L as UniversalFooterLogo,
-  R as UniversalFooterSection,
+  z as UniversalFooterSection,
   j as UniversalFooterSections,
   P as UniversalFooterSeparator,
   T as UniversalFooterSocialLink,

package/dist/components/UniversalFooter/UniversalFooter.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalFooter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/UniversalFooter/UniversalFooter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,eAAe,EAehB,MAAM,mBAAmB,CAAA;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAqDtC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAA;AA4B7C;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,KAqHpB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KA2DvB,CAAA"}
+{"version":3,"file":"UniversalFooter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/UniversalFooter/UniversalFooter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,eAAe,EAehB,MAAM,mBAAmB,CAAA;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAqDtC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAA;AA4B7C;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,KA8GpB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KA2DvB,CAAA"}