@nuxt/ui 2.18.3 → 3.0.0-alpha.0

package/dist/runtime/ui.config/overlays/notification.d.ts

@@ -1,50 +0,0 @@
-declare const _default: {
-    wrapper: string;
-    container: string;
-    inner: string;
-    title: string;
-    description: string;
-    actions: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    padding: string;
-    gap: string;
-    ring: string;
-    icon: {
-        base: string;
-        color: string;
-    };
-    avatar: {
-        base: string;
-        size: "md";
-    };
-    progress: {
-        base: string;
-        background: string;
-    };
-    transition: {
-        enterActiveClass: string;
-        enterFromClass: string;
-        enterToClass: string;
-        leaveActiveClass: string;
-        leaveFromClass: string;
-        leaveToClass: string;
-    };
-    default: {
-        color: string;
-        icon: any;
-        timeout: number;
-        closeButton: {
-            icon: string;
-            color: "gray";
-            variant: "link";
-            padded: boolean;
-        };
-        actionButton: {
-            size: "xs";
-            color: "white";
-        };
-    };
-};
-export default _default;

package/dist/runtime/ui.config/overlays/notification.js

@@ -1,50 +0,0 @@
-export default {
-  wrapper: "w-full pointer-events-auto",
-  container: "relative overflow-hidden",
-  inner: "w-0 flex-1",
-  title: "text-sm font-medium text-gray-900 dark:text-white",
-  description: "mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400",
-  actions: "flex items-center gap-2 mt-3 flex-shrink-0",
-  background: "bg-white dark:bg-gray-900",
-  shadow: "shadow-lg",
-  rounded: "rounded-lg",
-  padding: "p-4",
-  gap: "gap-3",
-  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
-  icon: {
-    base: "flex-shrink-0 w-5 h-5",
-    color: "text-{color}-500 dark:text-{color}-400"
-  },
-  avatar: {
-    base: "flex-shrink-0 self-center",
-    size: "md"
-  },
-  progress: {
-    base: "absolute bottom-0 end-0 start-0 h-1",
-    background: "bg-{color}-500 dark:bg-{color}-400"
-  },
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: "transform ease-out duration-300 transition",
-    enterFromClass: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2",
-    enterToClass: "translate-y-0 opacity-100 sm:translate-x-0",
-    leaveActiveClass: "transition ease-in duration-100",
-    leaveFromClass: "opacity-100",
-    leaveToClass: "opacity-0"
-  },
-  default: {
-    color: "primary",
-    icon: null,
-    timeout: 5e3,
-    closeButton: {
-      icon: "i-heroicons-x-mark-20-solid",
-      color: "gray",
-      variant: "link",
-      padded: false
-    },
-    actionButton: {
-      size: "xs",
-      color: "white"
-    }
-  }
-};

package/dist/runtime/ui.config/overlays/notifications.d.ts

@@ -1,7 +0,0 @@
-declare const _default: {
-    wrapper: string;
-    position: string;
-    width: string;
-    container: string;
-};
-export default _default;

package/dist/runtime/ui.config/overlays/notifications.js

@@ -1,6 +0,0 @@
-export default {
-  wrapper: "fixed flex flex-col justify-end z-[55]",
-  position: "bottom-0 end-0",
-  width: "w-full sm:w-96",
-  container: "px-4 sm:px-6 py-6 space-y-3 overflow-y-auto"
-};

package/dist/runtime/ui.config/overlays/popover.d.ts

@@ -1,47 +0,0 @@
-declare const _default: {
-    wrapper: string;
-    container: string;
-    trigger: string;
-    width: string;
-    background: string;
-    shadow: string;
-    rounded: string;
-    ring: string;
-    base: string;
-    transition: {
-        enterActiveClass: string;
-        enterFromClass: string;
-        enterToClass: string;
-        leaveActiveClass: string;
-        leaveFromClass: string;
-        leaveToClass: string;
-    };
-    overlay: {
-        base: string;
-        background: string;
-        transition: {
-            enterActiveClass: string;
-            enterFromClass: string;
-            enterToClass: string;
-            leaveActiveClass: string;
-            leaveFromClass: string;
-            leaveToClass: string;
-        };
-    };
-    popper: {
-        strategy: string;
-    };
-    default: {
-        openDelay: number;
-        closeDelay: number;
-    };
-    arrow: {
-        base: string;
-        ring: string;
-        rounded: string;
-        background: string;
-        shadow: string;
-        placement: string;
-    };
-};
-export default _default;

package/dist/runtime/ui.config/overlays/popover.js

@@ -1,41 +0,0 @@
-import { arrow } from "../popper.js";
-export default {
-  wrapper: "relative",
-  container: "z-50 group",
-  trigger: "inline-flex w-full",
-  width: "",
-  background: "bg-white dark:bg-gray-900",
-  shadow: "shadow-lg",
-  rounded: "rounded-md",
-  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
-  base: "overflow-hidden focus:outline-none relative",
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: "transition ease-out duration-200",
-    enterFromClass: "opacity-0 translate-y-1",
-    enterToClass: "opacity-100 translate-y-0",
-    leaveActiveClass: "transition ease-in duration-150",
-    leaveFromClass: "opacity-100 translate-y-0",
-    leaveToClass: "opacity-0 translate-y-1"
-  },
-  overlay: {
-    base: "fixed inset-0 transition-opacity z-50",
-    background: "bg-gray-200/75 dark:bg-gray-800/75",
-    transition: {
-      enterActiveClass: "ease-out duration-200",
-      enterFromClass: "opacity-0",
-      enterToClass: "opacity-100",
-      leaveActiveClass: "ease-in duration-150",
-      leaveFromClass: "opacity-100",
-      leaveToClass: "opacity-0"
-    }
-  },
-  popper: {
-    strategy: "fixed"
-  },
-  default: {
-    openDelay: 0,
-    closeDelay: 0
-  },
-  arrow
-};

package/dist/runtime/ui.config/overlays/slideover.d.ts

@@ -1,35 +0,0 @@
-declare const _default: {
-    wrapper: string;
-    overlay: {
-        base: string;
-        background: string;
-        transition: {
-            enter: string;
-            enterFrom: string;
-            enterTo: string;
-            leave: string;
-            leaveFrom: string;
-            leaveTo: string;
-        };
-    };
-    base: string;
-    background: string;
-    ring: string;
-    rounded: string;
-    padding: string;
-    shadow: string;
-    width: string;
-    height: string;
-    translate: {
-        base: string;
-        left: string;
-        right: string;
-        top: string;
-        bottom: string;
-    };
-    transition: {
-        enter: string;
-        leave: string;
-    };
-};
-export default _default;

package/dist/runtime/ui.config/overlays/slideover.js

@@ -1,36 +0,0 @@
-export default {
-  wrapper: "fixed inset-0 flex z-50",
-  overlay: {
-    base: "fixed inset-0 transition-opacity",
-    background: "bg-gray-200/75 dark:bg-gray-800/75",
-    // Syntax for `<TransitionRoot>` component https://headlessui.com/v1/vue/transition#basic-example
-    transition: {
-      enter: "ease-in-out duration-500",
-      enterFrom: "opacity-0",
-      enterTo: "opacity-100",
-      leave: "ease-in-out duration-500",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0"
-    }
-  },
-  base: "relative flex-1 flex flex-col w-full focus:outline-none",
-  background: "bg-white dark:bg-gray-900",
-  ring: "",
-  rounded: "",
-  padding: "",
-  shadow: "shadow-xl",
-  width: "w-screen max-w-md",
-  height: "h-screen max-h-96",
-  translate: {
-    base: "translate-x-0",
-    left: "-translate-x-full rtl:translate-x-full",
-    right: "translate-x-full rtl:-translate-x-full",
-    top: "-translate-y-full",
-    bottom: "translate-y-full"
-  },
-  // Syntax for `<TransitionRoot>` component https://headlessui.com/v1/vue/transition#basic-example
-  transition: {
-    enter: "transform transition ease-in-out duration-300",
-    leave: "transform transition ease-in-out duration-200"
-  }
-};

package/dist/runtime/ui.config/overlays/tooltip.d.ts

@@ -1,37 +0,0 @@
-declare const _default: {
-    wrapper: string;
-    container: string;
-    width: string;
-    background: string;
-    color: string;
-    shadow: string;
-    rounded: string;
-    ring: string;
-    base: string;
-    shortcuts: string;
-    middot: string;
-    transition: {
-        enterActiveClass: string;
-        enterFromClass: string;
-        enterToClass: string;
-        leaveActiveClass: string;
-        leaveFromClass: string;
-        leaveToClass: string;
-    };
-    popper: {
-        strategy: string;
-    };
-    default: {
-        openDelay: number;
-        closeDelay: number;
-    };
-    arrow: {
-        base: string;
-        ring: string;
-        rounded: string;
-        background: string;
-        shadow: string;
-        placement: string;
-    };
-};
-export default _default;

package/dist/runtime/ui.config/overlays/tooltip.js

@@ -1,34 +0,0 @@
-import { arrow } from "../popper.js";
-export default {
-  wrapper: "relative inline-flex",
-  container: "z-20 group",
-  width: "max-w-xs",
-  background: "bg-white dark:bg-gray-900",
-  color: "text-gray-900 dark:text-white",
-  shadow: "shadow",
-  rounded: "rounded",
-  ring: "ring-1 ring-gray-200 dark:ring-gray-800",
-  base: "[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative",
-  shortcuts: "hidden md:inline-flex flex-shrink-0 gap-0.5",
-  middot: "mx-1 text-gray-700 dark:text-gray-200",
-  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
-  transition: {
-    enterActiveClass: "transition ease-out duration-200",
-    enterFromClass: "opacity-0 translate-y-1",
-    enterToClass: "opacity-100 translate-y-0",
-    leaveActiveClass: "transition ease-in duration-150",
-    leaveFromClass: "opacity-100 translate-y-0",
-    leaveToClass: "opacity-0 translate-y-1"
-  },
-  popper: {
-    strategy: "fixed"
-  },
-  default: {
-    openDelay: 0,
-    closeDelay: 0
-  },
-  arrow: {
-    ...arrow,
-    base: "[@media(pointer:coarse)]:hidden invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2"
-  }
-};

package/dist/runtime/ui.config/popper.d.ts

@@ -1,8 +0,0 @@
-export declare const arrow: {
-    base: string;
-    ring: string;
-    rounded: string;
-    background: string;
-    shadow: string;
-    placement: string;
-};

package/dist/runtime/ui.config/popper.js

@@ -1,9 +0,0 @@
-export const arrow = {
-  base: "invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2",
-  ring: "before:ring-1 before:ring-gray-200 dark:before:ring-gray-800",
-  rounded: "before:rounded-sm",
-  background: "before:bg-gray-200 dark:before:bg-gray-800",
-  shadow: "before:shadow",
-  // eslint-disable-next-line quotes
-  placement: `group-data-[popper-placement*='right']:-left-1 group-data-[popper-placement*='left']:-right-1 group-data-[popper-placement*='top']:-bottom-1 group-data-[popper-placement*='bottom']:-top-1`
-};

package/dist/runtime/ui.css

@@ -1 +0,0 @@
-.dark{color-scheme:dark}a:focus-visible{@apply outline-primary}::-moz-selection{@apply bg-primary/40}::selection{@apply bg-primary/40}

package/dist/runtime/utils/colors.d.ts

@@ -1,11 +0,0 @@
-import type { Config as TWConfig } from 'tailwindcss';
-import defaultColors from 'tailwindcss/colors.js';
-type ColorConfig = Exclude<TWConfig['theme']['colors'], Function>;
-export declare const excludeColors: (colors: ColorConfig | typeof defaultColors) => string[];
-export declare const setGlobalColors: (theme: TWConfig["theme"]) => string[];
-export declare const generateSafelist: (colors: string[], globalColors: string[]) => import("tailwindcss/types/config").SafelistConfig[];
-type SafelistFn = Exclude<NonNullable<Extract<TWConfig['content'], {
-    extract?: unknown;
-}>['extract']>, Record<string, unknown>>;
-export declare const customSafelistExtractor: (prefix: string, content: string, colors: string[], safelistColors: string[]) => ReturnType<SafelistFn>;
-export {};

package/dist/runtime/utils/colors.js

@@ -1,299 +0,0 @@
-import { omit } from "./lodash.js";
-import { kebabCase, camelCase, upperFirst } from "scule";
-import defaultColors from "tailwindcss/colors.js";
-const colorsToExclude = [
-  "inherit",
-  "transparent",
-  "current",
-  "white",
-  "black",
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-  "cool"
-];
-const safelistByComponent = {
-  alert: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
-  }],
-  avatar: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }],
-  badge: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`)
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`)
-  }],
-  button: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-50`),
-    variants: ["hover", "disabled"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-100`),
-    variants: ["hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark", "dark:disabled"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`),
-    variants: ["disabled", "dark:hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-600`),
-    variants: ["hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-900`),
-    variants: ["dark:hover"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-950`),
-    variants: ["dark", "dark:hover", "dark:disabled"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark", "dark:disabled"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`),
-    variants: ["dark:hover", "disabled"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-600`),
-    variants: ["hover"]
-  }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`outline-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  input: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark", "dark:focus"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus"]
-  }],
-  radio: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  checkbox: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  toggle: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  range: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-400`),
-    variants: ["dark:focus-visible"]
-  }, {
-    pattern: new RegExp(`ring-(${colorsAsRegex2})-500`),
-    variants: ["focus-visible"]
-  }],
-  progress: (colorsAsRegex2) => [{
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }],
-  meter: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }],
-  notification: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`text-(${colorsAsRegex2})-500`)
-  }],
-  chip: (colorsAsRegex2) => [{
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-400`),
-    variants: ["dark"]
-  }, {
-    pattern: new RegExp(`bg-(${colorsAsRegex2})-500`)
-  }]
-};
-const safelistComponentAliasesMap = {
-  "USelect": "UInput",
-  "USelectMenu": "UInput",
-  "UTextarea": "UInput",
-  "URadioGroup": "URadio",
-  "UMeterGroup": "UMeter"
-};
-const colorsAsRegex = (colors) => colors.join("|");
-export const excludeColors = (colors) => {
-  return Object.entries(omit(colors, colorsToExclude)).filter(([, value]) => typeof value === "object").map(([key]) => kebabCase(key));
-};
-export const setGlobalColors = (theme) => {
-  const globalColors = {
-    ...theme.colors || defaultColors,
-    ...theme.extend?.colors
-  };
-  globalColors.primary = theme.extend.colors.primary = {
-    50: "rgb(var(--color-primary-50) / <alpha-value>)",
-    100: "rgb(var(--color-primary-100) / <alpha-value>)",
-    200: "rgb(var(--color-primary-200) / <alpha-value>)",
-    300: "rgb(var(--color-primary-300) / <alpha-value>)",
-    400: "rgb(var(--color-primary-400) / <alpha-value>)",
-    500: "rgb(var(--color-primary-500) / <alpha-value>)",
-    600: "rgb(var(--color-primary-600) / <alpha-value>)",
-    700: "rgb(var(--color-primary-700) / <alpha-value>)",
-    800: "rgb(var(--color-primary-800) / <alpha-value>)",
-    900: "rgb(var(--color-primary-900) / <alpha-value>)",
-    950: "rgb(var(--color-primary-950) / <alpha-value>)",
-    DEFAULT: "rgb(var(--color-primary-DEFAULT) / <alpha-value>)"
-  };
-  if (globalColors.gray) {
-    globalColors.cool = theme.extend.colors.cool = defaultColors.gray;
-  }
-  globalColors.gray = theme.extend.colors.gray = {
-    50: "rgb(var(--color-gray-50) / <alpha-value>)",
-    100: "rgb(var(--color-gray-100) / <alpha-value>)",
-    200: "rgb(var(--color-gray-200) / <alpha-value>)",
-    300: "rgb(var(--color-gray-300) / <alpha-value>)",
-    400: "rgb(var(--color-gray-400) / <alpha-value>)",
-    500: "rgb(var(--color-gray-500) / <alpha-value>)",
-    600: "rgb(var(--color-gray-600) / <alpha-value>)",
-    700: "rgb(var(--color-gray-700) / <alpha-value>)",
-    800: "rgb(var(--color-gray-800) / <alpha-value>)",
-    900: "rgb(var(--color-gray-900) / <alpha-value>)",
-    950: "rgb(var(--color-gray-950) / <alpha-value>)"
-  };
-  return excludeColors(globalColors);
-};
-export const generateSafelist = (colors, globalColors) => {
-  const baseSafelist = Object.keys(safelistByComponent).flatMap((component) => safelistByComponent[component](colorsAsRegex(colors)));
-  const formsSafelist = ["input", "radio", "checkbox", "toggle", "range"].flatMap((component) => safelistByComponent[component](colorsAsRegex(["red"])));
-  return [
-    ...baseSafelist,
-    ...formsSafelist,
-    // Ensure all global colors are safelisted for the Notification (toast.add)
-    ...safelistByComponent["notification"](colorsAsRegex(globalColors)),
-    // Gray safelist for Avatar & Notification
-    "bg-gray-500",
-    "dark:bg-gray-400",
-    "text-gray-500",
-    "dark:text-gray-400"
-  ];
-};
-export const customSafelistExtractor = (prefix, content, colors, safelistColors) => {
-  const classes = [];
-  const regex = /<([A-Za-z][A-Za-z0-9]*(?:-[A-Za-z][A-Za-z0-9]*)*)\s+(?![^>]*:color\b)[^>]*\bcolor=["']([^"']+)["'][^>]*>/gs;
-  const matches = content.matchAll(regex);
-  const components = Object.keys(safelistByComponent).map((component) => `${prefix}${component.charAt(0).toUpperCase() + component.slice(1)}`);
-  for (const match of matches) {
-    const [, component, color] = match;
-    const camelComponent = upperFirst(camelCase(component));
-    if (!colors.includes(color) || safelistColors.includes(color)) {
-      continue;
-    }
-    let name = safelistComponentAliasesMap[camelComponent] ? safelistComponentAliasesMap[camelComponent] : camelComponent;
-    if (!components.includes(name)) {
-      continue;
-    }
-    name = name.replace(prefix, "").toLowerCase();
-    const matchClasses = safelistByComponent[name](color).flatMap((group) => {
-      return typeof group === "string" ? "" : ["", ...group.variants || []].flatMap((variant) => {
-        const matches2 = group.pattern.source.match(/\(([^)]+)\)/g);
-        return matches2.map((match2) => {
-          const colorOptions = match2.substring(1, match2.length - 1).split("|");
-          return colorOptions.map((color2) => `${variant ? variant + ":" : ""}` + group.pattern.source.replace(match2, color2));
-        }).flat();
-      });
-    });
-    classes.push(...matchClasses);
-  }
-  return classes;
-};