@roku-ui/preset 0.16.0 → 0.16.1

package/dist/index.cjs

@@ -2,926 +2,10 @@
 
 var fs = require('node:fs');
 var unocss = require('unocss');
-require('magic-string');
 
 var tailwindReset = "/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */\n}\n\n::before,\n::after {\n  --un-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS.\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nMake elements with the HTML hidden attribute stay hidden by default.\n*/\n\n[hidden]:where(:not([hidden=\"until-found\"])) {\n  display: none;\n}\n";
 
-function isString(s) {
-  return typeof s === "string";
-}
-
-function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-function escapeSelector(str) {
-  const length = str.length;
-  let index = -1;
-  let codeUnit;
-  let result = "";
-  const firstCodeUnit = str.charCodeAt(0);
-  while (++index < length) {
-    codeUnit = str.charCodeAt(index);
-    if (codeUnit === 0) {
-      result += "\uFFFD";
-      continue;
-    }
-    if (codeUnit === 37) {
-      result += "\\%";
-      continue;
-    }
-    if (codeUnit === 44) {
-      result += "\\,";
-      continue;
-    }
-    if (
-      // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
-      // U+007F, […]
-      codeUnit >= 1 && codeUnit <= 31 || codeUnit === 127 || index === 0 && codeUnit >= 48 && codeUnit <= 57 || index === 1 && codeUnit >= 48 && codeUnit <= 57 && firstCodeUnit === 45
-    ) {
-      result += `\\${codeUnit.toString(16)} `;
-      continue;
-    }
-    if (
-      // If the character is the first character and is a `-` (U+002D), and
-      // there is no second character, […]
-      index === 0 && length === 1 && codeUnit === 45
-    ) {
-      result += `\\${str.charAt(index)}`;
-      continue;
-    }
-    if (codeUnit >= 128 || codeUnit === 45 || codeUnit === 95 || codeUnit >= 48 && codeUnit <= 57 || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122) {
-      result += str.charAt(index);
-      continue;
-    }
-    result += `\\${str.charAt(index)}`;
-  }
-  return result;
-}
-
-function getStringComponent(str, open, close, separators) {
-  if (str === "")
-    return;
-  if (isString(separators))
-    separators = [separators];
-  if (separators.length === 0)
-    return;
-  const l = str.length;
-  let parenthesis = 0;
-  for (let i = 0; i < l; i++) {
-    switch (str[i]) {
-      case open:
-        parenthesis++;
-        break;
-      case close:
-        if (--parenthesis < 0)
-          return;
-        break;
-      default:
-        for (const separator of separators) {
-          const separatorLength = separator.length;
-          if (separatorLength && separator === str.slice(i, i + separatorLength) && parenthesis === 0) {
-            if (i === 0 || i === l - separatorLength)
-              return;
-            return [
-              str.slice(0, i),
-              str.slice(i + separatorLength)
-            ];
-          }
-        }
-    }
-  }
-  return [
-    str,
-    ""
-  ];
-}
-function getStringComponents(str, separators, limit) {
-  limit = limit ?? 10;
-  const components = [];
-  let i = 0;
-  while (str !== "") {
-    if (++i > limit)
-      return;
-    const componentPair = getStringComponent(str, "(", ")", separators);
-    if (!componentPair)
-      return;
-    const [component, rest] = componentPair;
-    components.push(component);
-    str = rest;
-  }
-  if (components.length > 0)
-    return components;
-}
-
-const cssColorFunctions = ["hsl", "hsla", "hwb", "lab", "lch", "oklab", "oklch", "rgb", "rgba"];
-const alphaPlaceholders = ["%alpha", "<alpha-value>"];
-const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map((v) => escapeRegExp(v)).join("|"));
-function parseCssColor(str = "") {
-  const color = parseColor$1(str);
-  if (color == null || color === false)
-    return;
-  const { type: casedType, components, alpha } = color;
-  const type = casedType.toLowerCase();
-  if (components.length === 0)
-    return;
-  if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length))
-    return;
-  return {
-    type,
-    components: components.map((c) => typeof c === "string" ? c.trim() : c),
-    alpha: typeof alpha === "string" ? alpha.trim() : alpha
-  };
-}
-function colorOpacityToString(color) {
-  const alpha = color.alpha ?? 1;
-  return typeof alpha === "string" && alphaPlaceholders.includes(alpha) ? 1 : alpha;
-}
-function colorToString(color, alphaOverride) {
-  if (typeof color === "string")
-    return color.replace(alphaPlaceholdersRE, `${alphaOverride ?? 1}`);
-  const { components } = color;
-  let { alpha, type } = color;
-  alpha = alphaOverride ?? alpha;
-  type = type.toLowerCase();
-  if (["hsla", "rgba"].includes(type))
-    return `${type}(${components.join(", ")}${alpha == null ? "" : `, ${alpha}`})`;
-  alpha = alpha == null ? "" : ` / ${alpha}`;
-  if (cssColorFunctions.includes(type))
-    return `${type}(${components.join(" ")}${alpha})`;
-  return `color(${type} ${components.join(" ")}${alpha})`;
-}
-function parseColor$1(str) {
-  if (!str)
-    return;
-  let color = parseHexColor(str);
-  if (color != null)
-    return color;
-  color = cssColorKeyword(str);
-  if (color != null)
-    return color;
-  color = parseCssCommaColorFunction(str);
-  if (color != null)
-    return color;
-  color = parseCssSpaceColorFunction(str);
-  if (color != null)
-    return color;
-  color = parseCssColorFunction(str);
-  if (color != null)
-    return color;
-}
-function parseHexColor(str) {
-  const [, body] = str.match(/^#([\da-f]+)$/i) || [];
-  if (!body)
-    return;
-  switch (body.length) {
-    case 3:
-    case 4:
-      const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => n << 4 | n);
-      return {
-        type: "rgb",
-        components: digits.slice(0, 3),
-        alpha: body.length === 3 ? void 0 : Math.round(digits[3] / 255 * 100) / 100
-      };
-    case 6:
-    case 8:
-      const value = Number.parseInt(body, 16);
-      return {
-        type: "rgb",
-        components: body.length === 6 ? [value >> 16 & 255, value >> 8 & 255, value & 255] : [value >> 24 & 255, value >> 16 & 255, value >> 8 & 255],
-        alpha: body.length === 6 ? void 0 : Math.round((value & 255) / 255 * 100) / 100
-      };
-  }
-}
-function cssColorKeyword(str) {
-  const color = {
-    rebeccapurple: [102, 51, 153, 1]
-  }[str];
-  if (color != null) {
-    return {
-      type: "rgb",
-      components: color.slice(0, 3),
-      alpha: color[3]
-    };
-  }
-}
-function parseCssCommaColorFunction(color) {
-  const match = color.match(/^(rgb|rgba|hsl|hsla)\((.+)\)$/i);
-  if (!match)
-    return;
-  const [, type, componentString] = match;
-  const components = getStringComponents(componentString, ",", 5);
-  if (components) {
-    if ([3, 4].includes(components.length)) {
-      return {
-        type,
-        components: components.slice(0, 3),
-        alpha: components[3]
-      };
-    } else if (components.length !== 1) {
-      return false;
-    }
-  }
-}
-const cssColorFunctionsRe = new RegExp(`^(${cssColorFunctions.join("|")})\\((.+)\\)$`, "i");
-function parseCssSpaceColorFunction(color) {
-  const match = color.match(cssColorFunctionsRe);
-  if (!match)
-    return;
-  const [, fn, componentString] = match;
-  const parsed = parseCssSpaceColorValues(`${fn} ${componentString}`);
-  if (parsed) {
-    const { alpha, components: [type, ...components] } = parsed;
-    return {
-      type,
-      components,
-      alpha
-    };
-  }
-}
-function parseCssColorFunction(color) {
-  const match = color.match(/^color\((.+)\)$/);
-  if (!match)
-    return;
-  const parsed = parseCssSpaceColorValues(match[1]);
-  if (parsed) {
-    const { alpha, components: [type, ...components] } = parsed;
-    return {
-      type,
-      components,
-      alpha
-    };
-  }
-}
-function parseCssSpaceColorValues(componentString) {
-  const components = getStringComponents(componentString, " ");
-  if (!components)
-    return;
-  let totalComponents = components.length;
-  if (components[totalComponents - 2] === "/") {
-    return {
-      components: components.slice(0, totalComponents - 2),
-      alpha: components[totalComponents - 1]
-    };
-  }
-  if (components[totalComponents - 2] != null && (components[totalComponents - 2].endsWith("/") || components[totalComponents - 1].startsWith("/"))) {
-    const removed = components.splice(totalComponents - 2);
-    components.push(removed.join(" "));
-    --totalComponents;
-  }
-  const withAlpha = getStringComponents(components[totalComponents - 1], "/", 2);
-  if (!withAlpha)
-    return;
-  if (withAlpha.length === 1 || withAlpha[withAlpha.length - 1] === "")
-    return { components };
-  const alpha = withAlpha.pop();
-  components[totalComponents - 1] = withAlpha.join("/");
-  return {
-    components,
-    alpha
-  };
-}
-
-function createValueHandler(handlers) {
-  const handler = function(str) {
-    const s = this.__options?.sequence || [];
-    this.__options.sequence = [];
-    for (const n of s) {
-      const res = handlers[n](str);
-      if (res != null)
-        return res;
-    }
-  };
-  function addProcessor(that, name) {
-    if (!that.__options) {
-      that.__options = {
-        sequence: []
-      };
-    }
-    that.__options.sequence.push(name);
-    return that;
-  }
-  for (const name of Object.keys(handlers)) {
-    Object.defineProperty(handler, name, {
-      enumerable: true,
-      configurable: true,
-      get() {
-        return addProcessor(this, name);
-      }
-    });
-  }
-  return handler;
-}
-
-const basePositionMap = [
-  "top",
-  "top center",
-  "top left",
-  "top right",
-  "bottom",
-  "bottom center",
-  "bottom left",
-  "bottom right",
-  "left",
-  "left center",
-  "left top",
-  "left bottom",
-  "right",
-  "right center",
-  "right top",
-  "right bottom",
-  "center",
-  "center top",
-  "center bottom",
-  "center left",
-  "center right",
-  "center center"
-];
-Object.assign(
-  {},
-  ...basePositionMap.map((p) => ({ [p.replace(/ /, "-")]: p })),
-  ...basePositionMap.map((p) => ({ [p.replace(/\b(\w)\w+/g, "$1").replace(/ /, "")]: p }))
-);
-const globalKeywords = [
-  "inherit",
-  "initial",
-  "revert",
-  "revert-layer",
-  "unset"
-];
-
-const numberWithUnitRE = /^(-?\d*(?:\.\d+)?)(px|pt|pc|%|r?(?:em|ex|lh|cap|ch|ic)|(?:[sld]?v|cq)(?:[whib]|min|max)|in|cm|mm|rpx)?$/i;
-const numberRE = /^(-?\d*(?:\.\d+)?)$/;
-const unitOnlyRE = /^(px|[sld]?v[wh])$/i;
-const unitOnlyMap = {
-  px: 1,
-  vw: 100,
-  vh: 100,
-  svw: 100,
-  svh: 100,
-  dvw: 100,
-  dvh: 100,
-  lvh: 100,
-  lvw: 100
-};
-const bracketTypeRe = /^\[(color|image|length|size|position|quoted|string):/i;
-
-const cssProps = [
-  // basic props
-  "color",
-  "border-color",
-  "background-color",
-  "outline-color",
-  "text-decoration-color",
-  "flex-grow",
-  "flex",
-  "flex-shrink",
-  "caret-color",
-  "font",
-  "gap",
-  "opacity",
-  "visibility",
-  "z-index",
-  "font-weight",
-  "zoom",
-  "text-shadow",
-  "transform",
-  "box-shadow",
-  "border",
-  // positions
-  "background-position",
-  "left",
-  "right",
-  "top",
-  "bottom",
-  "object-position",
-  // sizes
-  "max-height",
-  "min-height",
-  "max-width",
-  "min-width",
-  "height",
-  "width",
-  "border-width",
-  "margin",
-  "padding",
-  "outline-width",
-  "outline-offset",
-  "font-size",
-  "line-height",
-  "text-indent",
-  "vertical-align",
-  "border-spacing",
-  "letter-spacing",
-  "word-spacing",
-  // enhances
-  "stroke",
-  "filter",
-  "backdrop-filter",
-  "fill",
-  "mask",
-  "mask-size",
-  "mask-border",
-  "clip-path",
-  "clip",
-  "border-radius"
-];
-function round(n) {
-  return +n.toFixed(10);
-}
-function numberWithUnit(str) {
-  const match = str.match(numberWithUnitRE);
-  if (!match)
-    return;
-  const [, n, unit] = match;
-  const num = Number.parseFloat(n);
-  if (unit && !Number.isNaN(num))
-    return `${round(num)}${unit}`;
-}
-function auto(str) {
-  if (str === "auto" || str === "a")
-    return "auto";
-}
-function rem(str) {
-  if (!str)
-    return;
-  if (unitOnlyRE.test(str))
-    return `${unitOnlyMap[str]}${str}`;
-  const match = str.match(numberWithUnitRE);
-  if (!match)
-    return;
-  const [, n, unit] = match;
-  const num = Number.parseFloat(n);
-  if (!Number.isNaN(num)) {
-    if (num === 0)
-      return "0";
-    return unit ? `${round(num)}${unit}` : `${round(num / 4)}rem`;
-  }
-}
-function px(str) {
-  if (unitOnlyRE.test(str))
-    return `${unitOnlyMap[str]}${str}`;
-  const match = str.match(numberWithUnitRE);
-  if (!match)
-    return;
-  const [, n, unit] = match;
-  const num = Number.parseFloat(n);
-  if (!Number.isNaN(num))
-    return unit ? `${round(num)}${unit}` : `${round(num)}px`;
-}
-function number(str) {
-  if (!numberRE.test(str))
-    return;
-  const num = Number.parseFloat(str);
-  if (!Number.isNaN(num))
-    return round(num);
-}
-function percent(str) {
-  if (str.endsWith("%"))
-    str = str.slice(0, -1);
-  if (!numberRE.test(str))
-    return;
-  const num = Number.parseFloat(str);
-  if (!Number.isNaN(num))
-    return `${round(num / 100)}`;
-}
-function fraction(str) {
-  if (!str)
-    return;
-  if (str === "full")
-    return "100%";
-  const [left, right] = str.split("/");
-  const num = Number.parseFloat(left) / Number.parseFloat(right);
-  if (!Number.isNaN(num)) {
-    if (num === 0)
-      return "0";
-    return `${round(num * 100)}%`;
-  }
-}
-function bracketWithType(str, requiredType) {
-  if (str && str.startsWith("[") && str.endsWith("]")) {
-    let base;
-    let hintedType;
-    const match = str.match(bracketTypeRe);
-    if (!match) {
-      base = str.slice(1, -1);
-    } else {
-      if (!requiredType)
-        hintedType = match[1];
-      base = str.slice(match[0].length, -1);
-    }
-    if (!base)
-      return;
-    if (base === '=""')
-      return;
-    if (base.startsWith("--"))
-      base = `var(${base})`;
-    let curly = 0;
-    for (const i of base) {
-      if (i === "[") {
-        curly += 1;
-      } else if (i === "]") {
-        curly -= 1;
-        if (curly < 0)
-          return;
-      }
-    }
-    if (curly)
-      return;
-    switch (hintedType) {
-      case "string":
-        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_");
-      case "quoted":
-        return base.replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(["\\])/g, "\\$1").replace(/^(.+)$/, '"$1"');
-    }
-    return base.replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, "\\_")).replace(/(^|[^\\])_/g, "$1 ").replace(/\\_/g, "_").replace(/(?:calc|clamp|max|min)\((.*)/g, (match2) => {
-      const vars = [];
-      return match2.replace(/var\((--.+?)[,)]/g, (match3, g1) => {
-        vars.push(g1);
-        return match3.replace(g1, "--un-calc");
-      }).replace(/(-?\d*\.?\d(?!-\d.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g, "$1 $2 ").replace(/--un-calc/g, () => vars.shift());
-    });
-  }
-}
-function bracket(str) {
-  return bracketWithType(str);
-}
-function bracketOfColor(str) {
-  return bracketWithType(str, "color");
-}
-function bracketOfLength(str) {
-  return bracketWithType(str, "length");
-}
-function bracketOfPosition(str) {
-  return bracketWithType(str, "position");
-}
-function cssvar(str) {
-  if (/^\$[^\s'"`;{}]/.test(str)) {
-    const [name, defaultValue] = str.slice(1).split(",");
-    return `var(--${escapeSelector(name)}${defaultValue ? `, ${defaultValue}` : ""})`;
-  }
-}
-function time(str) {
-  const match = str.match(/^(-?[0-9.]+)(s|ms)?$/i);
-  if (!match)
-    return;
-  const [, n, unit] = match;
-  const num = Number.parseFloat(n);
-  if (!Number.isNaN(num)) {
-    if (num === 0 && !unit)
-      return "0s";
-    return unit ? `${round(num)}${unit}` : `${round(num)}ms`;
-  }
-}
-function degree(str) {
-  const match = str.match(/^(-?[0-9.]+)(deg|rad|grad|turn)?$/i);
-  if (!match)
-    return;
-  const [, n, unit] = match;
-  const num = Number.parseFloat(n);
-  if (!Number.isNaN(num)) {
-    if (num === 0)
-      return "0";
-    return unit ? `${round(num)}${unit}` : `${round(num)}deg`;
-  }
-}
-function global(str) {
-  if (globalKeywords.includes(str))
-    return str;
-}
-function properties(str) {
-  if (str.split(",").every((prop) => cssProps.includes(prop)))
-    return str;
-}
-function position(str) {
-  if (["top", "left", "right", "bottom", "center"].includes(str))
-    return str;
-}
-
-const valueHandlers = {
-  __proto__: null,
-  auto: auto,
-  bracket: bracket,
-  bracketOfColor: bracketOfColor,
-  bracketOfLength: bracketOfLength,
-  bracketOfPosition: bracketOfPosition,
-  cssvar: cssvar,
-  degree: degree,
-  fraction: fraction,
-  global: global,
-  number: number,
-  numberWithUnit: numberWithUnit,
-  percent: percent,
-  position: position,
-  properties: properties,
-  px: px,
-  rem: rem,
-  time: time
-};
-
-const handler = createValueHandler(valueHandlers);
-const h = handler;
-function getThemeColorForKey(theme, colors, key = "colors") {
-  let obj = theme[key];
-  let index = -1;
-  for (const c of colors) {
-    index += 1;
-    if (obj && typeof obj !== "string") {
-      const camel = colors.slice(index).join("-").replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase());
-      if (obj[camel])
-        return obj[camel];
-      if (obj[c]) {
-        obj = obj[c];
-        continue;
-      }
-    }
-    return void 0;
-  }
-  return obj;
-}
-function getThemeColor(theme, colors, key) {
-  return getThemeColorForKey(theme, colors, key) || getThemeColorForKey(theme, colors, "colors");
-}
-function splitShorthand(body, type) {
-  const [front, rest] = getStringComponent(body, "[", "]", ["/", ":"]) ?? [];
-  if (front != null) {
-    const match = (front.match(bracketTypeRe) ?? [])[1];
-    if (match == null || match === type)
-      return [front, rest];
-  }
-}
-function parseColor(body, theme, key) {
-  const split = splitShorthand(body, "color");
-  if (!split)
-    return;
-  const [main, opacity] = split;
-  const colors = main.replace(/([a-z])(\d)/g, "$1-$2").split(/-/g);
-  const [name] = colors;
-  if (!name)
-    return;
-  let color;
-  const bracket = h.bracketOfColor(main);
-  const bracketOrMain = bracket || main;
-  if (h.numberWithUnit(bracketOrMain))
-    return;
-  if (/^#[\da-f]+$/i.test(bracketOrMain))
-    color = bracketOrMain;
-  else if (/^hex-[\da-fA-F]+$/.test(bracketOrMain))
-    color = `#${bracketOrMain.slice(4)}`;
-  else if (main.startsWith("$"))
-    color = h.cssvar(main);
-  color = color || bracket;
-  if (!color) {
-    const colorData = getThemeColor(theme, [main], key);
-    if (typeof colorData === "string")
-      color = colorData;
-  }
-  let no = "DEFAULT";
-  if (!color) {
-    let colorData;
-    const [scale] = colors.slice(-1);
-    if (/^\d+$/.test(scale)) {
-      no = scale;
-      colorData = getThemeColor(theme, colors.slice(0, -1), key);
-      if (!colorData || typeof colorData === "string")
-        color = void 0;
-      else
-        color = colorData[no];
-    } else {
-      colorData = getThemeColor(theme, colors, key);
-      if (!colorData && colors.length <= 2) {
-        [, no = no] = colors;
-        colorData = getThemeColor(theme, [name], key);
-      }
-      if (typeof colorData === "string")
-        color = colorData;
-      else if (no && colorData)
-        color = colorData[no];
-    }
-  }
-  return {
-    opacity,
-    name,
-    no,
-    color,
-    cssColor: parseCssColor(color),
-    alpha: h.bracket.cssvar.percent(opacity ?? "")
-  };
-}
-function colorResolver(property, varName, key, shouldPass) {
-  return ([, body], { theme, generator }) => {
-    const data = parseColor(body, theme, key);
-    if (!data)
-      return;
-    const { alpha, color, cssColor } = data;
-    const isDev = generator.config.envMode === "dev";
-    const rawColorComment = isDev && color ? ` /* ${color} */` : "";
-    const css = {};
-    if (cssColor) {
-      if (alpha != null) {
-        css[property] = colorToString(cssColor, alpha) + rawColorComment;
-      } else {
-        const opacityVar = `--un-${varName}-opacity`;
-        const result = colorToString(cssColor, `var(${opacityVar})`);
-        if (result.includes(opacityVar))
-          css[opacityVar] = colorOpacityToString(cssColor);
-        css[property] = result + rawColorComment;
-      }
-    } else if (color) {
-      if (alpha != null) {
-        css[property] = colorToString(color, alpha) + rawColorComment;
-      } else {
-        const opacityVar = `--un-${varName}-opacity`;
-        const result = colorToString(color, `var(${opacityVar})`);
-        if (result.includes(opacityVar))
-          css[opacityVar] = 1;
-        css[property] = result + rawColorComment;
-      }
-    }
-    return css;
-  };
-}
-
-const defaultOption = {
-    scrollbarWidth: '8px',
-    scrollbarHeight: '8px',
-    scrollbarTrackRadius: '4px',
-    scrollbarThumbRadius: '4px',
-    scrollbarTrackColor: '#f5f5f5',
-    scrollbarThumbColor: '#ddd',
-    varPrefix: '',
-    prefix: '',
-    numberToUnit: value => `${value / 4}rem`,
-    noCompatible: true,
-};
-const customRules = {
-    'radius': ['track-radius', 'thumb-radius'],
-    'w': ['width'],
-    'h': ['height'],
-    'track-radius': ['track-radius'],
-    'thumb-radius': ['thumb-radius'],
-};
-const numberVarRegex = new RegExp(`^scrollbar-(${Object.keys(customRules).join('|')})-(\\d+)([a-zA-Z]*)$`);
-function presetScrollbar(option) {
-    const config = {
-        ...defaultOption,
-        ...option,
-    };
-    function resolveVar(name) {
-        const prefix = config.varPrefix;
-        return `--${prefix ? `${prefix}-` : ''}scrollbar-${name}`;
-    }
-    const variantsRE = /^(scrollbar(-track|-thumb)?):.+$/;
-    return {
-        name: 'unocss-preset-scrollbar',
-        prefix: config.prefix,
-        shortcuts: [
-            [
-                'scrollbar',
-                [
-                    { overflow: 'auto' },
-                    'scrollbar-custom-property',
-                    'scrollbar-width-auto',
-                    `scrollbar-color-[var(${resolveVar('thumb')})_var(${resolveVar('track')})]`,
-                    `scrollbar-track:scrollbar-background-color-[var(${resolveVar('track')})]`,
-                    `scrollbar-thumb:scrollbar-background-color-[var(${resolveVar('thumb')})]`,
-                    `scrollbar:scrollbar-width-[var(${resolveVar('width')})]`,
-                    `scrollbar:scrollbar-height-[var(${resolveVar('height')})]`,
-                ],
-            ],
-            [
-                'scrollbar-rounded',
-                `
-          scrollbar-track:scrollbar-border-radius-[var(${resolveVar('track-radius')})]
-          scrollbar-thumb:scrollbar-border-radius-[var(${resolveVar('thumb-radius')})]
-        `,
-            ],
-            [
-                'scrollbar-thin',
-                `
-          scrollbar-w-8px
-          scrollbar-h-8px
-          scrollbar-width-thin
-        `,
-            ],
-            [
-                'scrollbar-none',
-                `
-          scrollbar:hidden
-          scrollbar-width-none
-        `,
-            ],
-            [
-                'roku-scrollbar',
-                `scrollbar
-scrollbar-rounded
-scrollbar-thin
-scrollbar-thumb-color-surface-4
-scrollbar-track-color-surface-3
-scrollbar-thumb-hover-color-surface-4
-dark:scrollbar-thumb-color-surface-7
-dark:scrollbar-track-color-surface-8
-dark:scrollbar-thumb-hover-color-surface-5
-        `,
-            ],
-        ],
-        variants: [
-            // ::-webkit-scrollbar-track
-            // ::-webkit-scrollbar-thumb
-            // ::-webkit-scrollbar
-            (matcher) => {
-                if (!variantsRE.test(matcher)) {
-                    return;
-                }
-                const variant = matcher.replace(variantsRE, '$1');
-                return {
-                    matcher: matcher.slice(variant.length + 1),
-                    selector: (s) => {
-                        return `${s}::-webkit-${variant}`;
-                    },
-                };
-            },
-        ],
-        rules: [
-            [
-                /^scrollbar-color-(.+)$/,
-                ([_, prop]) => {
-                    if (config.noCompatible) {
-                        return {};
-                    }
-                    // when use scrollbar-color, ::-webkit-scrollbar styling is disabled.
-                    // https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
-                    return {
-                        'scrollbar-color': handler.bracket.cssvar.auto.fraction.rem(prop),
-                    };
-                },
-            ],
-            [
-                /^scrollbar-width-(auto|thin|none)/,
-                ([_, prop]) => {
-                    const res = {};
-                    if (!config.noCompatible || prop === 'none') {
-                        res['scrollbar-width'] = prop;
-                    }
-                    return res;
-                },
-            ],
-            [
-                /^scrollbar-custom-property$/,
-                ([_]) => ({
-                    [resolveVar('track')]: config.scrollbarTrackColor,
-                    [resolveVar('thumb')]: config.scrollbarThumbColor,
-                    [resolveVar('width')]: config.scrollbarWidth,
-                    [resolveVar('height')]: config.scrollbarHeight,
-                    [resolveVar('track-radius')]: config.scrollbarTrackRadius,
-                    [resolveVar('thumb-radius')]: config.scrollbarThumbRadius,
-                }),
-            ],
-            [
-                /^scrollbar-thumb-color-(.+)$/,
-                colorResolver(resolveVar('thumb'), 'scrollbar-thumb'),
-                { autocomplete: 'scrollbar-thumb-color-$colors' },
-            ],
-            [
-                /^scrollbar-track-color-(.+)$/,
-                colorResolver(resolveVar('track'), 'scrollbar-track'),
-                { autocomplete: 'scrollbar-track-color-$colors' },
-            ],
-            [
-                /^scrollbar-((?:width|height|background-color|border-radius)?)-(\[var.+\])$/,
-                ([_, prop, value,]) => {
-                    return {
-                        [`${prop}`]: handler.bracket(value),
-                    };
-                },
-            ],
-            [
-                numberVarRegex,
-                ([_, type, value, unit,]) => {
-                    const val = unit ? value + unit : config.numberToUnit(Number.parseInt(value));
-                    const vars = customRules[type]
-                        .map(v => resolveVar(v));
-                    return vars.reduce((acc, v) => {
-                        acc[v] = val;
-                        return acc;
-                    }, {});
-                },
-                { autocomplete: `scrollbar-(${Object.keys(customRules).join('|')})-<num>` },
-            ],
-            [
-                /^scrollbar-thumb-hover-color-(.*)$/,
-                ([, color]) => {
-                    return `.scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--r-color-${color})); }`;
-                },
-            ],
-            [
-                'hidden',
-                { display: 'none' },
-            ],
-        ],
-    };
-}
-
-var baseStyle = ":root[data-scheme=\"dark\"] {\r\n    color-scheme: dark;\r\n}\r\n\r\n:root[data-scheme=\"light\"] {\r\n    color-scheme: light;\r\n}\r\n\r\n/* dark */\r\n[data-scheme=\"light\"] [data-scheme=\"dark\"] *, [data-scheme=\"dark\"] *, [data-scheme=\"dark\"] {\r\n    color-scheme: dark;\r\n    --r-surface-background-base-color: rgb(var(--r-color-surface-10));\r\n    --r-surface-background-color: rgb(var(--r-color-surface-9));\r\n    --r-surface-background-variant-color: rgb(var(--r-color-surface-7));\r\n    --r-surface-border-color: rgb(var(--r-color-surface-7));\r\n    --r-surface-text-color: rgb(var(--r-color-surface-3));\r\n    --r-surface-text-dimmed-color: rgb(var(--r-color-surface-5));\r\n\r\n    --r-primary-background-color: rgb(var(--r-color-primary-5));\r\n    --r-secondary-background-color: rgb(var(--r-color-secondary-5));\r\n    --r-tertiary-background-color: rgb(var(--r-color-tertiary-5));\r\n    --r-error-background-color: rgb(var(--r-color-error-5));\r\n\r\n    --r-primary-text-color: rgb(var(--r-color-primary-3));\r\n    --r-secondary-text-color: rgb(var(--r-color-secondary-3));\r\n    --r-tertiary-text-color: rgb(var(--r-color-tertiary-3));\r\n    --r-error-text-color: rgb(var(--r-color-error-3));\r\n\r\n\r\n}\r\n\r\n/* light */\r\n[data-scheme=\"light\"] *, [data-scheme=\"light\"], * {\r\n    color-scheme: light;\r\n    --r-surface-background-base-color: rgb(var(--r-color-surface-0));\r\n    --r-surface-background-color: rgb(var(--r-color-surface-1));\r\n    --r-surface-background-variant-color: rgb(var(--r-color-surface-2));\r\n    --r-surface-border-color: rgb(var(--r-color-surface-3));\r\n    --r-surface-text-color: rgb(var(--r-color-surface-7));\r\n    --r-surface-text-dimmed-color: rgb(var(--r-color-surface-6));\r\n\r\n    --r-primary-background-color: rgb(var(--r-color-primary-4));\r\n    --r-secondary-background-color: rgb(var(--r-color-secondary-4));\r\n    --r-tertiary-background-color: rgb(var(--r-color-tertiary-4));\r\n    --r-error-background-color: rgb(var(--r-color-error-4));\r\n\r\n    --r-primary-text-color: rgb(var(--r-color-primary-6));\r\n    --r-secondary-text-color: rgb(var(--r-color-secondary-6));\r\n    --r-tertiary-text-color: rgb(var(--r-color-tertiary-6));\r\n    --r-error-text-color: rgb(var(--r-color-error-6));\r\n}\r\n\r\n:root {\r\n    color-scheme: light dark;\r\n}";
+var baseStyle = ":root[data-scheme=\"dark\"] {\r\n    color-scheme: dark;\r\n}\r\n\r\n:root[data-scheme=\"light\"] {\r\n    color-scheme: light;\r\n}\r\n\r\n/* dark */\r\n[data-scheme=\"light\"] [data-scheme=\"dark\"] *, [data-scheme=\"dark\"] *, [data-scheme=\"dark\"] {\r\n    color-scheme: dark;\r\n    --r-surface-background-base-color: rgb(var(--r-color-surface-10));\r\n    --r-surface-background-color: rgb(var(--r-color-surface-9));\r\n    --r-surface-background-variant-1-color: rgb(var(--r-color-surface-8));\r\n    --r-surface-background-variant-2-color: rgb(var(--r-color-surface-7));\r\n    --r-surface-border-color: rgb(var(--r-color-surface-7));\r\n    --r-surface-text-color: rgb(var(--r-color-surface-1));\r\n    --r-surface-text-dimmed-color: rgb(var(--r-color-surface-2));\r\n\r\n    --r-primary-background-color: rgb(var(--r-color-primary-5));\r\n    --r-secondary-background-color: rgb(var(--r-color-secondary-5));\r\n    --r-tertiary-background-color: rgb(var(--r-color-tertiary-5));\r\n    --r-error-background-color: rgb(var(--r-color-error-5));\r\n\r\n    --r-primary-text-color: rgb(var(--r-color-primary-3));\r\n    --r-secondary-text-color: rgb(var(--r-color-secondary-3));\r\n    --r-tertiary-text-color: rgb(var(--r-color-tertiary-3));\r\n    --r-error-text-color: rgb(var(--r-color-error-3));\r\n\r\n\r\n}\r\n\r\n/* light */\r\n[data-scheme=\"light\"] *, [data-scheme=\"light\"], * {\r\n    color-scheme: light;\r\n    --r-surface-background-base-color: rgb(var(--r-color-surface-0));\r\n    --r-surface-background-color: rgb(var(--r-color-surface-1));\r\n    --r-surface-background-variant-1-color: rgb(var(--r-color-surface-2));\r\n    --r-surface-background-variant-2-color: rgb(var(--r-color-surface-2));\r\n    --r-surface-border-color: rgb(var(--r-color-surface-3));\r\n    --r-surface-text-color: rgb(var(--r-color-surface-10));\r\n    --r-surface-text-dimmed-color: rgb(var(--r-color-surface-9));\r\n\r\n    --r-primary-background-color: rgb(var(--r-color-primary-4));\r\n    --r-secondary-background-color: rgb(var(--r-color-secondary-4));\r\n    --r-tertiary-background-color: rgb(var(--r-color-tertiary-4));\r\n    --r-error-background-color: rgb(var(--r-color-error-4));\r\n\r\n    --r-primary-text-color: rgb(var(--r-color-primary-6));\r\n    --r-secondary-text-color: rgb(var(--r-color-secondary-6));\r\n    --r-tertiary-text-color: rgb(var(--r-color-tertiary-6));\r\n    --r-error-text-color: rgb(var(--r-color-error-6));\r\n}\r\n\r\n:root {\r\n    color-scheme: light dark;\r\n}";
 
 const colorKeys = ['surface', 'primary', 'secondary', 'tertiary', 'error'];
 const colors = colorKeys.reduce((colors, key) => {
@@ -950,7 +34,8 @@ const rokuPreset = () => () => {
             'custom-input-colors': 'border bg-[var(--l-bg)] dark:bg-[var(--d-bg)] text-[var(--l-text)] dark:text-[var(--d-text)] placeholder-[var(--l-placeholder)] dark:placeholder-[var(--d-placeholder)] border-[var(--l-border)] dark:border-[var(--d-border)] focus:border-[var(--l-border-f)] dark:focus:border-[var(--d-border-f)]',
             'bg-surface': 'bg-[--r-surface-background-color]',
             'bg-surface-base': 'bg-[--r-surface-background-base-color]',
-            'bg-surface-variant': 'bg-[--r-surface-background-variant-color]',
+            'bg-surface-variant-1': 'bg-[--r-surface-background-variant-1-color]',
+            'bg-surface-variant-2': 'bg-[--r-surface-background-variant-2-color]',
             'border-surface': 'border-[--r-surface-border-color]',
             'text-surface': 'text-[--r-surface-text-color]',
             'text-surface-dimmed': 'text-[--r-surface-text-dimmed-color]',
@@ -978,7 +63,6 @@ const rokuPreset = () => () => {
                     'vertical-align': 'middle',
                 },
             }),
-            presetScrollbar({}),
         ],
         content: {
             inline: [file],