tailwind-to-style 3.2.2 → 4.0.0

package/dist/utils/index.esm.js

@@ -1,20 +1,106 @@
 /**
- * tailwind-to-style v3.2.2
+ * tailwind-to-style v3.3.0
  * Runtime Tailwind CSS to inline styles converter
  * 
  * @author Bigetion
  * @license MIT
  */
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
 const theme = {
   accentColor: _ref => {
-    let {
-      theme
-    } = _ref;
-    return {
-      ...theme("colors"),
+    let theme = _ref.theme;
+    return _objectSpread2(_objectSpread2({}, theme("colors")), {}, {
       auto: "auto",
       custom: "custom_value"
-    };
+    });
   },
   animation: {
     none: "none",
@@ -33,63 +119,43 @@ const theme = {
     custom: "custom_value"
   },
   backdropBlur: _ref2 => {
-    let {
-      theme
-    } = _ref2;
+    let theme = _ref2.theme;
     return theme("blur");
   },
   backdropBrightness: _ref3 => {
-    let {
-      theme
-    } = _ref3;
+    let theme = _ref3.theme;
     return theme("brightness");
   },
   backdropContrast: _ref4 => {
-    let {
-      theme
-    } = _ref4;
+    let theme = _ref4.theme;
     return theme("contrast");
   },
   backdropGrayscale: _ref5 => {
-    let {
-      theme
-    } = _ref5;
+    let theme = _ref5.theme;
     return theme("grayscale");
   },
   backdropHueRotate: _ref6 => {
-    let {
-      theme
-    } = _ref6;
+    let theme = _ref6.theme;
     return theme("hueRotate");
   },
   backdropInvert: _ref7 => {
-    let {
-      theme
-    } = _ref7;
+    let theme = _ref7.theme;
     return theme("invert");
   },
   backdropOpacity: _ref8 => {
-    let {
-      theme
-    } = _ref8;
+    let theme = _ref8.theme;
     return theme("opacity");
   },
   backdropSaturate: _ref9 => {
-    let {
-      theme
-    } = _ref9;
+    let theme = _ref9.theme;
     return theme("saturate");
   },
   backdropSepia: _ref0 => {
-    let {
-      theme
-    } = _ref0;
+    let theme = _ref0.theme;
     return theme("sepia");
   },
   backgroundColor: _ref1 => {
-    let {
-      theme
-    } = _ref1;
+    let theme = _ref1.theme;
     return theme("colors");
   },
   backgroundImage: {
@@ -104,9 +170,7 @@ const theme = {
     "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))"
   },
   backgroundOpacity: _ref10 => {
-    let {
-      theme
-    } = _ref10;
+    let theme = _ref10.theme;
     return theme("opacity");
   },
   backgroundPosition: {
@@ -138,39 +202,32 @@ const theme = {
     custom: "custom_value"
   },
   borderColor: _ref11 => {
-    let {
-      theme
-    } = _ref11;
-    return {
-      ...theme("colors"),
+    let theme = _ref11.theme;
+    return _objectSpread2(_objectSpread2({}, theme("colors")), {}, {
       DEFAULT: "#e5e7eb"
-    };
+    });
   },
   borderOpacity: _ref12 => {
-    let {
-      theme
-    } = _ref12;
+    let theme = _ref12.theme;
     return theme("opacity");
   },
   borderRadius: {
     none: "0px",
-    sm: "0.125rem",
+    xs: "0.125rem",
+    sm: "0.25rem",
     DEFAULT: "0.25rem",
     md: "0.375rem",
     lg: "0.5rem",
     xl: "0.75rem",
     "2xl": "1rem",
     "3xl": "1.5rem",
+    "4xl": "2rem",
     full: "9999px",
     custom: "custom_value"
   },
   borderSpacing: _ref13 => {
-    let {
-      theme
-    } = _ref13;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref13.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   borderWidth: {
     DEFAULT: "1px",
@@ -181,7 +238,8 @@ const theme = {
     custom: "custom_value"
   },
   boxShadow: {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
     DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
     md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
     lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
@@ -192,9 +250,7 @@ const theme = {
     custom: "custom_value"
   },
   boxShadowColor: _ref14 => {
-    let {
-      theme
-    } = _ref14;
+    let theme = _ref14.theme;
     return theme("colors");
   },
   brightness: {
@@ -212,9 +268,7 @@ const theme = {
     custom: "custom_value"
   },
   caretColor: _ref15 => {
-    let {
-      theme
-    } = _ref15;
+    let theme = _ref15.theme;
     return theme("colors");
   },
   colors: {
@@ -232,7 +286,8 @@ const theme = {
       600: "#475569",
       700: "#334155",
       800: "#1e293b",
-      900: "#0f172a"
+      900: "#0f172a",
+      950: "#020617"
     },
     gray: {
       50: "#f9fafb",
@@ -244,7 +299,8 @@ const theme = {
       600: "#4b5563",
       700: "#374151",
       800: "#1f2937",
-      900: "#111827"
+      900: "#111827",
+      950: "#030712"
     },
     zinc: {
       50: "#fafafa",
@@ -256,7 +312,8 @@ const theme = {
       600: "#52525b",
       700: "#3f3f46",
       800: "#27272a",
-      900: "#18181b"
+      900: "#18181b",
+      950: "#09090b"
     },
     neutral: {
       50: "#fafafa",
@@ -268,7 +325,8 @@ const theme = {
       600: "#525252",
       700: "#404040",
       800: "#262626",
-      900: "#171717"
+      900: "#171717",
+      950: "#0a0a0a"
     },
     stone: {
       50: "#fafaf9",
@@ -280,7 +338,8 @@ const theme = {
       600: "#57534e",
       700: "#44403c",
       800: "#292524",
-      900: "#1c1917"
+      900: "#1c1917",
+      950: "#0c0a09"
     },
     red: {
       50: "#fef2f2",
@@ -292,7 +351,8 @@ const theme = {
       600: "#dc2626",
       700: "#b91c1c",
       800: "#991b1b",
-      900: "#7f1d1d"
+      900: "#7f1d1d",
+      950: "#450a0a"
     },
     orange: {
       50: "#fff7ed",
@@ -304,7 +364,8 @@ const theme = {
       600: "#ea580c",
       700: "#c2410c",
       800: "#9a3412",
-      900: "#7c2d12"
+      900: "#7c2d12",
+      950: "#431407"
     },
     amber: {
       50: "#fffbeb",
@@ -316,7 +377,8 @@ const theme = {
       600: "#d97706",
       700: "#b45309",
       800: "#92400e",
-      900: "#78350f"
+      900: "#78350f",
+      950: "#451a03"
     },
     yellow: {
       50: "#fefce8",
@@ -328,7 +390,8 @@ const theme = {
       600: "#ca8a04",
       700: "#a16207",
       800: "#854d0e",
-      900: "#713f12"
+      900: "#713f12",
+      950: "#422006"
     },
     lime: {
       50: "#f7fee7",
@@ -340,7 +403,8 @@ const theme = {
       600: "#65a30d",
       700: "#4d7c0f",
       800: "#3f6212",
-      900: "#365314"
+      900: "#365314",
+      950: "#1a2e05"
     },
     green: {
       50: "#f0fdf4",
@@ -352,7 +416,8 @@ const theme = {
       600: "#16a34a",
       700: "#15803d",
       800: "#166534",
-      900: "#14532d"
+      900: "#14532d",
+      950: "#052e16"
     },
     emerald: {
       50: "#ecfdf5",
@@ -364,7 +429,8 @@ const theme = {
       600: "#059669",
       700: "#047857",
       800: "#065f46",
-      900: "#064e3b"
+      900: "#064e3b",
+      950: "#022c22"
     },
     teal: {
       50: "#f0fdfa",
@@ -376,7 +442,8 @@ const theme = {
       600: "#0d9488",
       700: "#0f766e",
       800: "#115e59",
-      900: "#134e4a"
+      900: "#134e4a",
+      950: "#042f2e"
     },
     cyan: {
       50: "#ecfeff",
@@ -388,7 +455,8 @@ const theme = {
       600: "#0891b2",
       700: "#0e7490",
       800: "#155e75",
-      900: "#164e63"
+      900: "#164e63",
+      950: "#083344"
     },
     sky: {
       50: "#f0f9ff",
@@ -400,7 +468,8 @@ const theme = {
       600: "#0284c7",
       700: "#0369a1",
       800: "#075985",
-      900: "#0c4a6e"
+      900: "#0c4a6e",
+      950: "#082f49"
     },
     blue: {
       50: "#eff6ff",
@@ -412,7 +481,8 @@ const theme = {
       600: "#2563eb",
       700: "#1d4ed8",
       800: "#1e40af",
-      900: "#1e3a8a"
+      900: "#1e3a8a",
+      950: "#172554"
     },
     indigo: {
       50: "#eef2ff",
@@ -424,7 +494,8 @@ const theme = {
       600: "#4f46e5",
       700: "#4338ca",
       800: "#3730a3",
-      900: "#312e81"
+      900: "#312e81",
+      950: "#1e1b4b"
     },
     violet: {
       50: "#f5f3ff",
@@ -436,7 +507,8 @@ const theme = {
       600: "#7c3aed",
       700: "#6d28d9",
       800: "#5b21b6",
-      900: "#4c1d95"
+      900: "#4c1d95",
+      950: "#2e1065"
     },
     purple: {
       50: "#faf5ff",
@@ -448,7 +520,8 @@ const theme = {
       600: "#9333ea",
       700: "#7e22ce",
       800: "#6b21a8",
-      900: "#581c87"
+      900: "#581c87",
+      950: "#3b0764"
     },
     fuchsia: {
       50: "#fdf4ff",
@@ -460,7 +533,8 @@ const theme = {
       600: "#c026d3",
       700: "#a21caf",
       800: "#86198f",
-      900: "#701a75"
+      900: "#701a75",
+      950: "#4a044e"
     },
     pink: {
       50: "#fdf2f8",
@@ -472,7 +546,8 @@ const theme = {
       600: "#db2777",
       700: "#be185d",
       800: "#9d174d",
-      900: "#831843"
+      900: "#831843",
+      950: "#500724"
     },
     rose: {
       50: "#fff1f2",
@@ -484,7 +559,8 @@ const theme = {
       600: "#e11d48",
       700: "#be123c",
       800: "#9f1239",
-      900: "#881337"
+      900: "#881337",
+      950: "#4c0519"
     },
     custom: "custom_value"
   },
@@ -570,21 +646,15 @@ const theme = {
     "zoom-out": "zoom-out"
   },
   divideColor: _ref16 => {
-    let {
-      theme
-    } = _ref16;
+    let theme = _ref16.theme;
     return theme("borderColor");
   },
   divideOpacity: _ref17 => {
-    let {
-      theme
-    } = _ref17;
+    let theme = _ref17.theme;
     return theme("borderOpacity");
   },
   divideWidth: _ref18 => {
-    let {
-      theme
-    } = _ref18;
+    let theme = _ref18.theme;
     return theme("borderWidth");
   },
   dropShadow: {
@@ -597,13 +667,10 @@ const theme = {
     none: "0 0 #0000"
   },
   fill: _ref19 => {
-    let {
-      theme
-    } = _ref19;
-    return {
-      none: "none",
-      ...theme("colors")
-    };
+    let theme = _ref19.theme;
+    return _objectSpread2({
+      none: "none"
+    }, theme("colors"));
   },
   flex: {
     1: "1 1 0%",
@@ -612,12 +679,10 @@ const theme = {
     none: "none"
   },
   flexBasis: _ref20 => {
-    let {
-      theme
-    } = _ref20;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref20.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -645,7 +710,7 @@ const theme = {
       "10/12": "83.333333%",
       "11/12": "91.666667%",
       full: "100%"
-    };
+    });
   },
   flexGrow: {
     0: "0",
@@ -676,6 +741,17 @@ const theme = {
     "9xl": "8rem",
     custom: "custom_value"
   },
+  fontStretch: {
+    "ultra-condensed": "ultra-condensed",
+    "extra-condensed": "extra-condensed",
+    condensed: "condensed",
+    "semi-condensed": "semi-condensed",
+    normal: "normal",
+    "semi-expanded": "semi-expanded",
+    expanded: "expanded",
+    "extra-expanded": "extra-expanded",
+    "ultra-expanded": "ultra-expanded"
+  },
   fontWeight: {
     thin: "100",
     extralight: "200",
@@ -689,15 +765,11 @@ const theme = {
     custom: "custom_value"
   },
   gap: _ref21 => {
-    let {
-      theme
-    } = _ref21;
+    let theme = _ref21.theme;
     return theme("spacing");
   },
   gradientColorStops: _ref22 => {
-    let {
-      theme
-    } = _ref22;
+    let theme = _ref22.theme;
     return theme("colors");
   },
   gradientColorStopPositions: {
@@ -868,12 +940,10 @@ const theme = {
     12: "repeat(12, minmax(0, 1fr))"
   },
   height: _ref23 => {
-    let {
-      theme
-    } = _ref23;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref23.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -898,7 +968,7 @@ const theme = {
       max: "max-content",
       fit: "fit-content",
       custom: "custom_value"
-    };
+    });
   },
   hueRotate: {
     0: "0deg",
@@ -909,12 +979,10 @@ const theme = {
     180: "180deg"
   },
   inset: _ref24 => {
-    let {
-      theme
-    } = _ref24;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref24.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -922,7 +990,15 @@ const theme = {
       "2/4": "50%",
       "3/4": "75%",
       full: "100%"
-    };
+    });
+  },
+  insetShadow: {
+    xs: "inset 0 1px 1px 0 rgb(0 0 0 / 0.05)",
+    sm: "inset 0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    DEFAULT: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+    md: "inset 0 2px 6px 0 rgb(0 0 0 / 0.08)",
+    lg: "inset 0 4px 8px 0 rgb(0 0 0 / 0.10)",
+    none: "none"
   },
   invert: {
     0: "0",
@@ -969,20 +1045,14 @@ const theme = {
     decimal: "decimal"
   },
   margin: _ref25 => {
-    let {
-      theme
-    } = _ref25;
-    return {
-      auto: "auto",
-      ...theme("spacing")
-    };
+    let theme = _ref25.theme;
+    return _objectSpread2({
+      auto: "auto"
+    }, theme("spacing"));
   },
   maxHeight: _ref26 => {
-    let {
-      theme
-    } = _ref26;
-    return {
-      ...theme("spacing"),
+    let theme = _ref26.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       none: "none",
       full: "100%",
       screen: "100vh",
@@ -992,14 +1062,11 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   maxWidth: _ref27 => {
-    let {
-      theme
-    } = _ref27;
-    return {
-      ...theme("spacing"),
+    let theme = _ref27.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       none: "none",
       xs: "20rem",
       sm: "24rem",
@@ -1017,14 +1084,11 @@ const theme = {
       max: "max-content",
       fit: "fit-content",
       prose: "65ch"
-    };
+    });
   },
   minHeight: _ref28 => {
-    let {
-      theme
-    } = _ref28;
-    return {
-      ...theme("spacing"),
+    let theme = _ref28.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       full: "100%",
       screen: "100vh",
       svh: "100svh",
@@ -1033,19 +1097,16 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   minWidth: _ref29 => {
-    let {
-      theme
-    } = _ref29;
-    return {
-      ...theme("spacing"),
+    let theme = _ref29.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       full: "100%",
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   objectPosition: {
     bottom: "bottom",
@@ -1101,9 +1162,7 @@ const theme = {
     custom: "custom_value"
   },
   outlineColor: _ref30 => {
-    let {
-      theme
-    } = _ref30;
+    let theme = _ref30.theme;
     return theme("colors");
   },
   outlineOffset: {
@@ -1115,9 +1174,7 @@ const theme = {
     custom: "custom_value"
   },
   outlineOpacity: _ref31 => {
-    let {
-      theme
-    } = _ref31;
+    let theme = _ref31.theme;
     return theme("opacity");
   },
   outlineWidth: {
@@ -1129,24 +1186,26 @@ const theme = {
     custom: "custom_value"
   },
   padding: _ref32 => {
-    let {
-      theme
-    } = _ref32;
+    let theme = _ref32.theme;
     return theme("spacing");
   },
+  perspective: {
+    none: "none",
+    dramatic: "100px",
+    near: "300px",
+    normal: "500px",
+    midrange: "800px",
+    distant: "1200px",
+    custom: "custom_value"
+  },
   ringColor: _ref33 => {
-    let {
-      theme
-    } = _ref33;
-    return {
-      DEFAULT: "#3b82f6",
-      ...theme("colors")
-    };
+    let theme = _ref33.theme;
+    return _objectSpread2({
+      DEFAULT: "#3b82f6"
+    }, theme("colors"));
   },
   ringOffsetColor: _ref34 => {
-    let {
-      theme
-    } = _ref34;
+    let theme = _ref34.theme;
     return theme("colors");
   },
   ringOffsetWidth: {
@@ -1158,13 +1217,10 @@ const theme = {
     custom: "custom_value"
   },
   ringOpacity: _ref35 => {
-    let {
-      theme
-    } = _ref35;
-    return {
-      DEFAULT: "0.5",
-      ...theme("opacity")
-    };
+    let theme = _ref35.theme;
+    return _objectSpread2({
+      DEFAULT: "0.5"
+    }, theme("opacity"));
   },
   ringWidth: {
     DEFAULT: "3px",
@@ -1209,19 +1265,21 @@ const theme = {
     custom: "custom_value"
   },
   scrollMargin: _ref36 => {
-    let {
-      theme
-    } = _ref36;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref36.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   scrollPadding: _ref37 => {
-    let {
-      theme
-    } = _ref37;
+    let theme = _ref37.theme;
     return theme("spacing");
   },
+  screens: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+    "3xl": "1920px"
+  },
   sepia: {
     0: "0",
     DEFAULT: "100%"
@@ -1236,12 +1294,8 @@ const theme = {
     custom: "custom_value"
   },
   space: _ref38 => {
-    let {
-      theme
-    } = _ref38;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref38.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   spacing: {
     px: "1px",
@@ -1287,13 +1341,10 @@ const theme = {
     custom: "custom_value"
   },
   stroke: _ref39 => {
-    let {
-      theme
-    } = _ref39;
-    return {
-      none: "none",
-      ...theme("colors")
-    };
+    let theme = _ref39.theme;
+    return _objectSpread2({
+      none: "none"
+    }, theme("colors"));
   },
   strokeWidth: {
     0: "0",
@@ -1302,15 +1353,11 @@ const theme = {
     custom: "custom_value"
   },
   textColor: _ref40 => {
-    let {
-      theme
-    } = _ref40;
+    let theme = _ref40.theme;
     return theme("colors");
   },
   textDecorationColor: _ref41 => {
-    let {
-      theme
-    } = _ref41;
+    let theme = _ref41.theme;
     return theme("colors");
   },
   textDecorationThickness: {
@@ -1324,38 +1371,25 @@ const theme = {
     custom: "custom_value"
   },
   textIndent: _ref42 => {
-    let {
-      theme
-    } = _ref42;
-    return {
-      ...theme("spacing")
-    };
+    let theme = _ref42.theme;
+    return _objectSpread2({}, theme("spacing"));
   },
   textOpacity: _ref43 => {
-    let {
-      theme
-    } = _ref43;
+    let theme = _ref43.theme;
     return theme("opacity");
   },
   textShadowBlur: _ref44 => {
-    let {
-      theme
-    } = _ref44;
+    let theme = _ref44.theme;
     return theme("blur");
   },
   textShadowColor: _ref45 => {
-    let {
-      theme
-    } = _ref45;
-    return {
-      ...theme("colors"),
+    let theme = _ref45.theme;
+    return _objectSpread2(_objectSpread2({}, theme("colors")), {}, {
       DEFAULT: "#e5e7eb"
-    };
+    });
   },
   textShadowOpacity: _ref46 => {
-    let {
-      theme
-    } = _ref46;
+    let theme = _ref46.theme;
     return theme("opacity");
   },
   textShadowX: {
@@ -1373,9 +1407,7 @@ const theme = {
     custom: "custom_value"
   },
   textShadowY: _ref47 => {
-    let {
-      theme
-    } = _ref47;
+    let theme = _ref47.theme;
     return theme("textShadowX");
   },
   textUnderlineOffset: {
@@ -1399,11 +1431,8 @@ const theme = {
     "top-left": "top left"
   },
   translate: _ref48 => {
-    let {
-      theme
-    } = _ref48;
-    return {
-      ...theme("spacing"),
+    let theme = _ref48.theme;
+    return _objectSpread2(_objectSpread2({}, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -1411,15 +1440,13 @@ const theme = {
       "2/4": "50%",
       "3/4": "75%",
       full: "100%"
-    };
+    });
   },
   size: _ref49 => {
-    let {
-      theme
-    } = _ref49;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref49.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -1450,15 +1477,13 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   width: _ref50 => {
-    let {
-      theme
-    } = _ref50;
-    return {
-      auto: "auto",
-      ...theme("spacing"),
+    let theme = _ref50.theme;
+    return _objectSpread2(_objectSpread2({
+      auto: "auto"
+    }, theme("spacing")), {}, {
       "1/2": "50%",
       "1/3": "33.333333%",
       "2/3": "66.666667%",
@@ -1493,7 +1518,7 @@ const theme = {
       min: "min-content",
       max: "max-content",
       fit: "fit-content"
-    };
+    });
   },
   willChange: {
     auto: "auto",
@@ -1613,9 +1638,15 @@ const theme = {
 };
 
 const vars = {
-  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));",
+  // 2D + 3D composite transform (Tailwind v4 extends with 3D axes)
+  transform: "transform: translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) translateZ(var(--transform-translate-z, 0)) rotate(var(--transform-rotate, 0)) rotateX(var(--transform-rotate-x, 0)) rotateY(var(--transform-rotate-y, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1)) scaleZ(var(--transform-scale-z, 1));",
   filter: "filter: blur(var(--blur, 0)) brightness(var(--brightness, 1)) contrast(var(--contrast, 1)) grayscale(var(--grayscale, 0)) hue-rotate(var(--hue-rotate, 0deg)) invert(var(--invert, 0)) saturate(var(--saturate, 1)) sepia(var(--sepia, 0)) drop-shadow(var(--drop-shadow, 0 0 #0000));",
-  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));"
+  backdropFilter: "-webkit-backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0)); backdrop-filter: blur(var(--backdrop-blur, 0)) brightness(var(--backdrop-brightness, 1)) contrast(var(--backdrop-contrast, 1)) grayscale(var(--backdrop-grayscale, 0)) hue-rotate(var(--backdrop-hue-rotate, 0deg)) invert(var(--backdrop-invert, 0)) opacity(var(--backdrop-opacity, 1)) saturate(var(--backdrop-saturate, 1)) sepia(var(--backdrop-sepia, 0));",
+  // Tailwind v4: 3D transform style control
+  transformStyle3d: "transform-style: preserve-3d;",
+  transformStyleFlat: "transform-style: flat;",
+  backfaceVisible: "backface-visibility: visible;",
+  backfaceHidden: "backface-visibility: hidden;"
 };
 
 const configOptions = {
@@ -1623,20 +1654,13 @@ const configOptions = {
   vars
 };
 
-/**
- * User Configuration Management
- * Handles theme extensions and custom plugin registration
- */
-
-
 /**
  * User configuration state
  */
 let userConfig = {
   theme: {
     extend: {}
-  },
-  prefix: ""};
+  }};
 
 // Cache for extended theme to avoid redundant lookups
 const extendedThemeCache = new Map();
@@ -1658,25 +1682,15 @@ function getExtendedTheme(key) {
   return result;
 }
 
-/**
- * Get configured prefix
- * @returns {string} Prefix string
- */
-function getPrefix() {
-  return userConfig.prefix;
-}
-
 function isFunction(functionToCheck) {
   return functionToCheck && {}.toString.call(functionToCheck) === "[object Function]";
 }
 function getConfigOptions() {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    theme = {}
-  } = options;
-  const {
-    extend: themeExtend = {}
-  } = theme;
+  const _options$theme = options.theme,
+    theme = _options$theme === void 0 ? {} : _options$theme;
+  const _theme$extend = theme.extend,
+    themeExtend = _theme$extend === void 0 ? {} : _theme$extend;
   const newTheme = {};
   const themeKeys = Object.keys(configOptions.theme);
   themeKeys.forEach(key => {
@@ -1720,16 +1734,12 @@ function getConfigOptions() {
       });
     }
   });
-
-  // Get user prefix
-  const userPrefix = getPrefix();
-  const finalPrefix = userPrefix || options.prefix || "";
-  return {
-    prefix: finalPrefix,
-    ...configOptions,
-    ...options,
+  const finalPrefix = options.prefix || "";
+  return _objectSpread2(_objectSpread2(_objectSpread2({
+    prefix: finalPrefix
+  }, configOptions), options), {}, {
     theme: newTheme
-  };
+  });
 }
 function generateCssString() {
   let getCssString = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : () => {};
@@ -1752,7 +1762,9 @@ function generateCssString() {
     }
     let str = "";
     Object.entries(nOptions).forEach(_ref => {
-      let [key, value] = _ref;
+      let _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
       str += getStr(key.replace("/", "\\/").replace(".", "\\."), value);
     });
     return str;
@@ -1760,14 +1772,18 @@ function generateCssString() {
   const getCssByColors = function (colors) {
     let getStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => {};
     let str = "";
-    Object.entries(colors).forEach(_ref2 => {
-      let [key1, value1] = _ref2;
+    Object.entries(colors).forEach(_ref3 => {
+      let _ref4 = _slicedToArray(_ref3, 2),
+        key1 = _ref4[0],
+        value1 = _ref4[1];
       if (typeof value1 === "string") {
-        str += `${getStr(key1, value1, hexToRgb(value1))} `;
+        str += "".concat(getStr(key1, value1, hexToRgb(value1)), " ");
       } else if (typeof value1 === "object") {
-        Object.entries(value1).forEach(_ref3 => {
-          let [key2, value2] = _ref3;
-          str += `${getStr(`${key1}-${key2}`, value2, hexToRgb(value2))} `;
+        Object.entries(value1).forEach(_ref5 => {
+          let _ref6 = _slicedToArray(_ref5, 2),
+            key2 = _ref6[0],
+            value2 = _ref6[1];
+          str += "".concat(getStr("".concat(key1, "-").concat(key2), value2, hexToRgb(value2)), " ");
         });
       }
     });