@indielayer/ui/lib/components/select/theme/Select.carbon.theme.js

Indielayer UI Components with Tailwind CSS build for Vue 3

const o = {
  classes: {
    wrapper: "",
    box: ({ props: e, data: s }) => {
      const r = ["w-full border-b text-sm px-4 border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
      return !s.errorInternal && !e.disabled && r.push("hover:border-secondary-400 dark:hover:border-secondary-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-secondary-900 text-secondary-700") : r.push("bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), s.errorInternal ? r.push("border-error-500 dark:border-error-400 group-focus:outline-error-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
    },
    content: "p-1",
    search: "p-1 mb-0.5",
    contentBody: "overflow-y-auto max-h-64",
    iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
    icon: ({ props: e }) => {
      const s = ["h-5 w-5"];
      return e.disabled ? s.push("text-secondary-300 dark:text-secondary-500") : s.push("text-secondary-500 dark:text-secondary-400"), s;
    }
  },
  styles: ({ colors: e, css: s }) => {
    const r = e.getPalette("primary");
    return s.get("border", r[500]);
  }
}, t = o;
export {
  t as default
};