@fast-food/design-system 1.11.0 → 1.12.0

package/dist/fast-food-design-system.es.js

@@ -52,13 +52,13 @@ function Xr() {
       switch (i) {
         case R:
           return "Fragment";
-        case M:
+        case V:
           return "Profiler";
         case A:
           return "StrictMode";
         case W:
           return "Suspense";
-        case V:
+        case G:
           return "SuspenseList";
         case P:
           return "Activity";
@@ -67,7 +67,7 @@ function Xr() {
         switch (typeof i.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), i.$$typeof) {
-          case j:
+          case E:
             return "Portal";
           case D:
             return (i.displayName || "Context") + ".Provider";
@@ -134,7 +134,7 @@ function Xr() {
     }
     function c(i, f) {
       function x() {
-        G || (G = !0, console.error(
+        L || (L = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           f
         ));
@@ -188,13 +188,13 @@ function Xr() {
         if (w)
           if (lr(z)) {
             for (w = 0; w < z.length; w++)
-              E(z[w]);
+              S(z[w]);
             Object.freeze && Object.freeze(z);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else E(z);
+        else S(z);
       if (J.call(f, "key")) {
         z = r(i);
         var N = Object.keys(f).filter(function(ir) {
@@ -232,19 +232,19 @@ React keys must be passed directly to JSX without using spread:
         v
       );
     }
-    function E(i) {
+    function S(i) {
       typeof i == "object" && i !== null && i.$$typeof === O && i._store && (i._store.validated = 1);
     }
-    var S = Wr, O = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), M = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), D = Symbol.for("react.context"), $ = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), V = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), P = Symbol.for("react.activity"), nr = Symbol.for("react.client.reference"), Q = S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, lr = Array.isArray, H = console.createTask ? console.createTask : function() {
+    var j = Wr, O = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), D = Symbol.for("react.context"), $ = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), G = Symbol.for("react.suspense_list"), B = Symbol.for("react.memo"), u = Symbol.for("react.lazy"), P = Symbol.for("react.activity"), nr = Symbol.for("react.client.reference"), Q = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, lr = Array.isArray, H = console.createTask ? console.createTask : function() {
       return null;
     };
-    S = {
+    j = {
       "react-stack-bottom-frame": function(i) {
         return i();
       }
     };
-    var G, C = {}, I = S["react-stack-bottom-frame"].bind(
-      S,
+    var L, C = {}, I = j["react-stack-bottom-frame"].bind(
+      j,
       p
     )(), l = H(t(p)), er = {};
     pr.Fragment = R, pr.jsx = function(i, f, x, w, y) {
@@ -399,25 +399,25 @@ const xr = "-", Qr = (r) => {
   let t = (a) => {
     const p = [];
     let m = 0, c = 0, d = 0, b;
-    for (let j = 0; j < a.length; j++) {
-      let R = a[j];
+    for (let E = 0; E < a.length; E++) {
+      let R = a[E];
       if (m === 0 && c === 0) {
         if (R === kr) {
-          p.push(a.slice(d, j)), d = j + eo;
+          p.push(a.slice(d, E)), d = E + eo;
           continue;
         }
         if (R === "/") {
-          b = j;
+          b = E;
           continue;
         }
       }
       R === "[" ? m++ : R === "]" ? m-- : R === "(" ? c++ : R === ")" && c--;
     }
-    const h = p.length === 0 ? a : a.substring(d), E = ao(h), S = E !== h, O = b && b > d ? b - d : void 0;
+    const h = p.length === 0 ? a : a.substring(d), S = ao(h), j = S !== h, O = b && b > d ? b - d : void 0;
     return {
       modifiers: p,
-      hasImportantModifier: S,
-      baseClassName: E,
+      hasImportantModifier: j,
+      baseClassName: S,
       maybePostfixModifierPosition: O
     };
   };
@@ -465,35 +465,35 @@ const xr = "-", Qr = (r) => {
   let d = "";
   for (let b = c.length - 1; b >= 0; b -= 1) {
     const h = c[b], {
-      isExternal: E,
-      modifiers: S,
+      isExternal: S,
+      modifiers: j,
       hasImportantModifier: O,
-      baseClassName: j,
+      baseClassName: E,
       maybePostfixModifierPosition: R
     } = o(h);
-    if (E) {
+    if (S) {
       d = h + (d.length > 0 ? " " + d : d);
       continue;
     }
-    let A = !!R, M = t(A ? j.substring(0, R) : j);
-    if (!M) {
+    let A = !!R, V = t(A ? E.substring(0, R) : E);
+    if (!V) {
       if (!A) {
         d = h + (d.length > 0 ? " " + d : d);
         continue;
       }
-      if (M = t(j), !M) {
+      if (V = t(E), !V) {
         d = h + (d.length > 0 ? " " + d : d);
         continue;
       }
       A = !1;
     }
-    const Z = p(S).join(":"), D = O ? Z + wr : Z, $ = D + M;
+    const Z = p(j).join(":"), D = O ? Z + wr : Z, $ = D + V;
     if (m.includes($))
       continue;
     m.push($);
-    const W = a(M, A);
-    for (let V = 0; V < W.length; ++V) {
-      const B = W[V];
+    const W = a(V, A);
+    for (let G = 0; G < W.length; ++G) {
+      const B = W[G];
       m.push(D + B);
     }
     d = h + (d.length > 0 ? " " + d : d);
@@ -517,7 +517,7 @@ const Nr = (r) => {
 function co(r, ...e) {
   let o, t, a, p = m;
   function m(d) {
-    const b = e.reduce((h, E) => E(h), r());
+    const b = e.reduce((h, S) => S(h), r());
     return o = mo(b), t = o.cache.get, a = o.cache.set, p = c, c(d);
   }
   function c(d) {
@@ -534,19 +534,19 @@ function co(r, ...e) {
 const q = (r) => {
   const e = (o) => o[r] || [];
   return e.isThemeGetter = !0, e;
-}, Or = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Ir = /^\((?:(\w[\w-]*):)?(.+)\)$/i, uo = /^\d+\/\d+$/, fo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, go = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, bo = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, ho = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, wo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, rr = (r) => uo.test(r), g = (r) => !!r && !Number.isNaN(Number(r)), U = (r) => !!r && Number.isInteger(Number(r)), gr = (r) => r.endsWith("%") && g(r.slice(0, -1)), L = (r) => fo.test(r), ko = () => !0, xo = (r) => (
+}, Or = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Ir = /^\((?:(\w[\w-]*):)?(.+)\)$/i, uo = /^\d+\/\d+$/, fo = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, go = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, bo = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/, ho = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, wo = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, rr = (r) => uo.test(r), g = (r) => !!r && !Number.isNaN(Number(r)), U = (r) => !!r && Number.isInteger(Number(r)), gr = (r) => r.endsWith("%") && g(r.slice(0, -1)), F = (r) => fo.test(r), ko = () => !0, xo = (r) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   go.test(r) && !bo.test(r)
-), Mr = () => !1, yo = (r) => ho.test(r), vo = (r) => wo.test(r), zo = (r) => !s(r) && !n(r), qo = (r) => or(r, Lr, Mr), s = (r) => Or.test(r), X = (r) => or(r, Fr, xo), br = (r) => or(r, To, g), Er = (r) => or(r, Vr, Mr), Ro = (r) => or(r, Gr, vo), ur = (r) => or(r, $r, yo), n = (r) => Ir.test(r), mr = (r) => tr(r, Fr), Eo = (r) => tr(r, Ao), Sr = (r) => tr(r, Vr), So = (r) => tr(r, Lr), jo = (r) => tr(r, Gr), fr = (r) => tr(r, $r, !0), or = (r, e, o) => {
+), Mr = () => !1, yo = (r) => ho.test(r), vo = (r) => wo.test(r), zo = (r) => !s(r) && !n(r), qo = (r) => or(r, Lr, Mr), s = (r) => Or.test(r), X = (r) => or(r, Fr, xo), br = (r) => or(r, To, g), Sr = (r) => or(r, Vr, Mr), Ro = (r) => or(r, Gr, vo), ur = (r) => or(r, $r, yo), n = (r) => Ir.test(r), mr = (r) => tr(r, Fr), So = (r) => tr(r, Ao), jr = (r) => tr(r, Vr), jo = (r) => tr(r, Lr), Eo = (r) => tr(r, Gr), fr = (r) => tr(r, $r, !0), or = (r, e, o) => {
   const t = Or.exec(r);
   return t ? t[1] ? e(t[1]) : o(t[2]) : !1;
 }, tr = (r, e, o = !1) => {
   const t = Ir.exec(r);
   return t ? t[1] ? e(t[1]) : o : !1;
 }, Vr = (r) => r === "position" || r === "percentage", Gr = (r) => r === "image" || r === "url", Lr = (r) => r === "length" || r === "size" || r === "bg-size", Fr = (r) => r === "length", To = (r) => r === "number", Ao = (r) => r === "family-name", $r = (r) => r === "shadow", Co = () => {
-  const r = q("color"), e = q("font"), o = q("text"), t = q("font-weight"), a = q("tracking"), p = q("leading"), m = q("breakpoint"), c = q("container"), d = q("spacing"), b = q("radius"), h = q("shadow"), E = q("inset-shadow"), S = q("text-shadow"), O = q("drop-shadow"), j = q("blur"), R = q("perspective"), A = q("aspect"), M = q("ease"), Z = q("animate"), D = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], $ = () => [
+  const r = q("color"), e = q("font"), o = q("text"), t = q("font-weight"), a = q("tracking"), p = q("leading"), m = q("breakpoint"), c = q("container"), d = q("spacing"), b = q("radius"), h = q("shadow"), S = q("inset-shadow"), j = q("text-shadow"), O = q("drop-shadow"), E = q("blur"), R = q("perspective"), A = q("aspect"), V = q("ease"), Z = q("animate"), D = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], $ = () => [
     "center",
     "top",
     "bottom",
@@ -564,13 +564,13 @@ const q = (r) => {
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], W = () => [...$(), n, s], V = () => ["auto", "hidden", "clip", "visible", "scroll"], B = () => ["auto", "contain", "none"], u = () => [n, s, d], P = () => [rr, "full", "auto", ...u()], nr = () => [U, "none", "subgrid", n, s], Q = () => ["auto", {
+  ], W = () => [...$(), n, s], G = () => ["auto", "hidden", "clip", "visible", "scroll"], B = () => ["auto", "contain", "none"], u = () => [n, s, d], P = () => [rr, "full", "auto", ...u()], nr = () => [U, "none", "subgrid", n, s], Q = () => ["auto", {
     span: ["full", U, n, s]
-  }, U, n, s], J = () => [U, "auto", n, s], lr = () => ["auto", "min", "max", "fr", n, s], H = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], G = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], C = () => ["auto", ...u()], I = () => [rr, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...u()], l = () => [r, n, s], er = () => [...$(), Sr, Er, {
+  }, U, n, s], J = () => [U, "auto", n, s], lr = () => ["auto", "min", "max", "fr", n, s], H = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], L = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], C = () => ["auto", ...u()], I = () => [rr, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...u()], l = () => [r, n, s], er = () => [...$(), jr, Sr, {
     position: [n, s]
   }], i = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
-  }], f = () => ["auto", "cover", "contain", So, qo, {
+  }], f = () => ["auto", "cover", "contain", jo, qo, {
     size: [n, s]
   }], x = () => [gr, mr, X], w = () => [
     // Deprecated since Tailwind CSS v4.0.0
@@ -580,11 +580,11 @@ const q = (r) => {
     b,
     n,
     s
-  ], y = () => ["", g, mr, X], T = () => ["solid", "dashed", "dotted", "double"], K = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], v = () => [g, gr, Sr, Er], z = () => [
+  ], y = () => ["", g, mr, X], T = () => ["solid", "dashed", "dotted", "double"], K = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], v = () => [g, gr, jr, Sr], z = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
-    j,
+    E,
     n,
     s
   ], N = () => ["none", g, n, s], Y = () => ["none", g, n, s], ir = () => [g, n, s], cr = () => [rr, "full", ...u()];
@@ -593,22 +593,22 @@ const q = (r) => {
     theme: {
       animate: ["spin", "ping", "pulse", "bounce"],
       aspect: ["video"],
-      blur: [L],
-      breakpoint: [L],
+      blur: [F],
+      breakpoint: [F],
       color: [ko],
-      container: [L],
-      "drop-shadow": [L],
+      container: [F],
+      "drop-shadow": [F],
       ease: ["in", "out", "in-out"],
       font: [zo],
       "font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
-      "inset-shadow": [L],
+      "inset-shadow": [F],
       leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
       perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
-      radius: [L],
-      shadow: [L],
+      radius: [F],
+      shadow: [F],
       spacing: ["px", g],
-      text: [L],
-      "text-shadow": [L],
+      text: [F],
+      "text-shadow": [F],
       tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
     },
     classGroups: {
@@ -718,21 +718,21 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/overflow
        */
       overflow: [{
-        overflow: V()
+        overflow: G()
       }],
       /**
        * Overflow X
        * @see https://tailwindcss.com/docs/overflow
        */
       "overflow-x": [{
-        "overflow-x": V()
+        "overflow-x": G()
       }],
       /**
        * Overflow Y
        * @see https://tailwindcss.com/docs/overflow
        */
       "overflow-y": [{
-        "overflow-y": V()
+        "overflow-y": G()
       }],
       /**
        * Overscroll Behavior
@@ -997,14 +997,14 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/justify-items
        */
       "justify-items": [{
-        "justify-items": [...G(), "normal"]
+        "justify-items": [...L(), "normal"]
       }],
       /**
        * Justify Self
        * @see https://tailwindcss.com/docs/justify-self
        */
       "justify-self": [{
-        "justify-self": ["auto", ...G()]
+        "justify-self": ["auto", ...L()]
       }],
       /**
        * Align Content
@@ -1018,7 +1018,7 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/align-items
        */
       "align-items": [{
-        items: [...G(), {
+        items: [...L(), {
           baseline: ["", "last"]
         }]
       }],
@@ -1027,7 +1027,7 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/align-self
        */
       "align-self": [{
-        self: ["auto", ...G(), {
+        self: ["auto", ...L(), {
           baseline: ["", "last"]
         }]
       }],
@@ -1043,14 +1043,14 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/place-items
        */
       "place-items": [{
-        "place-items": [...G(), "baseline"]
+        "place-items": [...L(), "baseline"]
       }],
       /**
        * Place Self
        * @see https://tailwindcss.com/docs/place-self
        */
       "place-self": [{
-        "place-self": ["auto", ...G()]
+        "place-self": ["auto", ...L()]
       }],
       // Spacing
       /**
@@ -1311,7 +1311,7 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [Eo, s, e]
+        font: [So, s, e]
       }],
       /**
        * Font Variant Numeric
@@ -1566,7 +1566,7 @@ const q = (r) => {
           }, U, n, s],
           radial: ["", n, s],
           conic: [U, n, s]
-        }, jo, Ro]
+        }, Eo, Ro]
       }],
       /**
        * Background Color
@@ -1953,7 +1953,7 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       "inset-shadow": [{
-        "inset-shadow": ["none", E, fr, ur]
+        "inset-shadow": ["none", S, fr, ur]
       }],
       /**
        * Inset Box Shadow Color
@@ -2020,7 +2020,7 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/text-shadow
        */
       "text-shadow": [{
-        "text-shadow": ["none", S, fr, ur]
+        "text-shadow": ["none", j, fr, ur]
       }],
       /**
        * Text Shadow Color
@@ -2489,7 +2489,7 @@ const q = (r) => {
        * @see https://tailwindcss.com/docs/transition-timing-function
        */
       ease: [{
-        ease: ["linear", "initial", M, n, s]
+        ease: ["linear", "initial", V, n, s]
       }],
       /**
        * Transition Delay
@@ -3015,21 +3015,21 @@ const q = (r) => {
     },
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
-}, _o = /* @__PURE__ */ co(Co), _ = (...r) => _o(_r(r)), jr = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, Tr = _r, F = (r, e) => (o) => {
+}, _o = /* @__PURE__ */ co(Co), _ = (...r) => _o(_r(r)), Er = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, Tr = _r, M = (r, e) => (o) => {
   var t;
   if ((e == null ? void 0 : e.variants) == null) return Tr(r, o == null ? void 0 : o.class, o == null ? void 0 : o.className);
   const { variants: a, defaultVariants: p } = e, m = Object.keys(a).map((b) => {
-    const h = o == null ? void 0 : o[b], E = p == null ? void 0 : p[b];
+    const h = o == null ? void 0 : o[b], S = p == null ? void 0 : p[b];
     if (h === null) return null;
-    const S = jr(h) || jr(E);
-    return a[b][S];
+    const j = Er(h) || Er(S);
+    return a[b][j];
   }), c = o && Object.entries(o).reduce((b, h) => {
-    let [E, S] = h;
-    return S === void 0 || (b[E] = S), b;
+    let [S, j] = h;
+    return j === void 0 || (b[S] = j), b;
   }, {}), d = e == null || (t = e.compoundVariants) === null || t === void 0 ? void 0 : t.reduce((b, h) => {
-    let { class: E, className: S, ...O } = h;
-    return Object.entries(O).every((j) => {
-      let [R, A] = j;
+    let { class: S, className: j, ...O } = h;
+    return Object.entries(O).every((E) => {
+      let [R, A] = E;
       return Array.isArray(A) ? A.includes({
         ...p,
         ...c
@@ -3039,12 +3039,12 @@ const q = (r) => {
       }[R] === A;
     }) ? [
       ...b,
-      E,
-      S
+      S,
+      j
     ] : b;
   }, []);
   return Tr(r, m, d, o == null ? void 0 : o.class, o == null ? void 0 : o.className);
-}, Po = F(
+}, Po = M(
   `
     rounded-md
     font-semibold
@@ -3129,15 +3129,15 @@ const q = (r) => {
     ...c,
     children: r
   }
-), Oo = F(
+), Oo = M(
   "text-sm text-black dark:text-white font-semibold"
-), et = ({ className: r, ...e }) => /* @__PURE__ */ k.jsx(
+), it = ({ className: r, ...e }) => /* @__PURE__ */ k.jsx(
   "label",
   {
     className: _(Oo({ className: r })),
     ...e
   }
-), Io = F("", {
+), Io = M("", {
   variants: {
     variant: {
       default: "text-black dark:text-white",
@@ -3149,7 +3149,7 @@ const q = (r) => {
   defaultVariants: {
     variant: "default"
   }
-}), it = ({
+}), at = ({
   children: r,
   className: e,
   variant: o,
@@ -3161,7 +3161,7 @@ const q = (r) => {
     ...t,
     children: r
   }
-), Mo = F("", {
+), Mo = M("", {
   variants: {
     variant: {
       default: "text-gray-900 dark:text-gray-50",
@@ -5056,7 +5056,7 @@ const Ar = {
   }
 );
 Go.displayName = "Icon";
-const Lo = F(
+const Lo = M(
   [
     "block",
     "w-full",
@@ -5125,7 +5125,7 @@ const Lo = F(
   )
 );
 Fo.displayName = "Input";
-const $o = F(
+const $o = M(
   [
     "block",
     "w-full",
@@ -5193,7 +5193,7 @@ const $o = F(
   )
 );
 Wo.displayName = "Textarea";
-const Yo = F(
+const Yo = M(
   [
     "block",
     "w-full",
@@ -5265,7 +5265,7 @@ const Yo = F(
   )
 );
 Uo.displayName = "Select";
-const Do = F(
+const Do = M(
   [
     "form-checkbox",
     "rounded",
@@ -5341,7 +5341,7 @@ const Do = F(
   }
 );
 Bo.displayName = "Checkbox";
-const Jo = F(
+const Jo = M(
   [
     "form-radio",
     "rounded-full",
@@ -5429,7 +5429,7 @@ const Xo = ({
   "absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform duration-200",
   r ? "translate-x-4" : "translate-x-0",
   e ? "bg-gray-100" : ""
-), Ko = () => "ml-3 text-sm font-medium text-gray-900", at = ({
+), Ko = () => "ml-3 text-sm font-medium text-gray-900", pt = ({
   checked: r,
   onChange: e,
   disabled: o = !1,
@@ -5455,12 +5455,33 @@ const Xo = ({
   ),
   /* @__PURE__ */ k.jsx("span", { className: Zo({ checked: r, disabled: o }), children: /* @__PURE__ */ k.jsx("span", { className: Qo({ checked: r, disabled: o }) }) }),
   m && /* @__PURE__ */ k.jsx("span", { className: Ko(), children: m })
-] }), rt = [
+] }), rt = M("text-xs mt-1 block", {
+  variants: {
+    error: {
+      true: "text-red-600",
+      false: "text-gray-500"
+    }
+  },
+  defaultVariants: {
+    error: !1
+  }
+}), mt = ({
+  children: r,
+  error: e = !1,
+  className: o
+}) => /* @__PURE__ */ k.jsx(
+  "span",
+  {
+    className: rt({ error: e, className: o }),
+    role: e ? "alert" : void 0,
+    children: r
+  }
+), ot = [
   { label: "Home", route: "/" },
   { label: "Plataforma", route: "/plataforma" },
   { label: "Contato", route: "/contato" },
   { label: "Carreira", route: "/carreira" }
-], ot = ({ onNavigate: r }) => /* @__PURE__ */ k.jsx(
+], tt = ({ onNavigate: r }) => /* @__PURE__ */ k.jsx(
   "header",
   {
     style: {
@@ -5485,7 +5506,7 @@ const Xo = ({
         children: [
           /* @__PURE__ */ k.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 32 }, children: [
             /* @__PURE__ */ k.jsx("span", { style: { fontWeight: 700, fontSize: 22, letterSpacing: 1 }, children: "Fast Food Manager" }),
-            rt.map((e) => /* @__PURE__ */ k.jsx(
+            ot.map((e) => /* @__PURE__ */ k.jsx(
               "button",
               {
                 onClick: () => r == null ? void 0 : r(e.route),
@@ -5526,7 +5547,7 @@ const Xo = ({
       }
     )
   }
-), pt = ({
+), st = ({
   children: r,
   showHeader: e = !0,
   headerProps: o,
@@ -5541,7 +5562,7 @@ const Xo = ({
       background: "var(--background)"
     },
     children: [
-      e && /* @__PURE__ */ k.jsx(ot, { ...o }),
+      e && /* @__PURE__ */ k.jsx(tt, { ...o }),
       /* @__PURE__ */ k.jsx(
         "main",
         {
@@ -5577,15 +5598,17 @@ const Xo = ({
 export {
   No as Button,
   Bo as Checkbox,
-  ot as Header,
+  tt as Header,
+  mt as HelperText,
   Go as Icon,
   Fo as Input,
-  et as Label,
-  pt as Layout,
+  it as Label,
+  st as Layout,
   Ho as Radio,
   Uo as Select,
-  at as Switch,
+  pt as Switch,
   Wo as Textarea,
-  it as Title,
+  at as Title,
+  rt as helperTextStyles,
   _ as mergeClassNames
 };

package/dist/styles/tailwind.css

@@ -3,6 +3,35 @@
 @import './tokens-typography.css';
 @import './scrollbar.css';
 
+/* Reset CSS e regras globais */
+html,
+body {
+  height: 100%;
+  min-height: 100vh;
+  width: 100%;
+  min-width: 320px;
+  margin: 0;
+  padding: 0;
+  background: var(--background);
+  color: var(--foreground, #000);
+  font-family: var(--font-family-sans, system-ui, sans-serif);
+  box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+#root {
+  min-height: 100vh;
+  min-width: 100vw;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fast-food/design-system",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,9 @@
       "import": "./dist/fast-food-design-system.cjs.js",
       "require": "./dist/fast-food-design-system.cjs.js"
     },
-    "./styles/colors.css": "./dist/styles/colors.css"
+    "./styles/colors.css": "./dist/styles/colors.css",
+    "./styles/tailwind.css": "./dist/styles/tailwind.css",
+    "./dist/styles/tailwind.css": "./dist/styles/tailwind.css"
   },
   "files": [
     "dist",