@wikicasa-dev/components 2.1.4-alpha.8 → 2.1.4-alpha.9

package/dist/index.d.ts

@@ -43,7 +43,6 @@ import { default as SwiperSlide } from './components/carousel/SwiperSlide';
 import { default as BaseBreadcrumb } from './UIKit/BaseBreadcrumb';
 import { default as NavigationBar } from './UIKit/Navigation/NavigationBar';
 import { default as NavigationBarItem } from './UIKit/Navigation/NavigationBarItem';
-import { buttonPlugin } from './plugins/buttonPlugin';
 export * from './UIKit/types';
 export type { ChartOptions, ChartData } from 'chart.js';
-export { NavigationBar, NavigationBarItem, DoughnutChart, LineChart, BaseAccordion, BaseAccordionBtn, BaseAccordionContent, BaseAccordionItem, SelectItem, BaseAlert, BaseAutocomplete, BaseBadge, BaseButton, AccessibleSelect, BaseComplexToggle, BaseDropDown, BaseFloatingLabel, BaseCard, BaseIcon, BaseInput, BasePagination, BasePaper, BasePin, BaseSelect, BaseSlider, BaseTab, BaseTextarea, BaseToggle, BaseTooltip, BaseUploadFile, CheckboxBtn, CheckboxGroup, RadioButton, RadioGroup, SwiperCarousel, SwiperSlide, IntersectionObservable, IntersectionObserver, BaseModal, BaseSnackbar, BaseTabView, BaseShimmerLoader, ShimmerMultiLine, StaticSpinner, BaseBreadcrumb, buttonPlugin };
+export { NavigationBar, NavigationBarItem, DoughnutChart, LineChart, BaseAccordion, BaseAccordionBtn, BaseAccordionContent, BaseAccordionItem, SelectItem, BaseAlert, BaseAutocomplete, BaseBadge, BaseButton, AccessibleSelect, BaseComplexToggle, BaseDropDown, BaseFloatingLabel, BaseCard, BaseIcon, BaseInput, BasePagination, BasePaper, BasePin, BaseSelect, BaseSlider, BaseTab, BaseTextarea, BaseToggle, BaseTooltip, BaseUploadFile, CheckboxBtn, CheckboxGroup, RadioButton, RadioGroup, SwiperCarousel, SwiperSlide, IntersectionObservable, IntersectionObserver, BaseModal, BaseSnackbar, BaseTabView, BaseShimmerLoader, ShimmerMultiLine, StaticSpinner, BaseBreadcrumb, };

package/dist/index.js

@@ -1,13 +1,13 @@
 import './assets/packages/components/lib/UIKit/Navigation/NavigationBar.css';import './assets/packages/components/lib/UIKit/BaseBreadcrumb.css';import './assets/packages/components/lib/UIKit/ShimmerLoader/BaseShimmerLoader.css';import './assets/packages/components/lib/UIKit/BaseModal.css';import './assets/packages/components/lib/UIKit/BaseSelect.css';import './assets/packages/components/lib/UIKit/BasePin.css';import './assets/packages/components/lib/UIKit/BaseInput.css';import './assets/packages/components/lib/UIKit/BaseFloatingLabel.css';import './assets/packages/components/lib/UIKit/BaseBadge.css';import './assets/packages/components/lib/UIKit/BaseAlert.css';import './assets/packages/components/src/tailwind.css';/* empty css                                     */
 import { default as i } from "./packages/components/lib/UIKit/Accordion/BaseAccordion.vue.js";
 import { default as n } from "./packages/components/lib/UIKit/Accordion/BaseAccordionBtn.vue.js";
-import { default as b } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
+import { default as S } from "./packages/components/lib/UIKit/Accordion/BaseAccordionContent.vue.js";
 import { default as g } from "./packages/components/lib/UIKit/Accordion/BaseAccordionItem.vue.js";
 import { default as h } from "./packages/components/lib/UIKit/BaseSelect/SelectItem.vue.js";
 import { default as I } from "./packages/components/lib/UIKit/Checkbox/CheckboxBtn.vue.js";
 import { default as v } from "./packages/components/lib/UIKit/Checkbox/CheckboxGroup.vue.js";
 import { default as L } from "./packages/components/lib/UIKit/Tab/BaseTab.vue.js";
-import { default as k } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
+import { default as D } from "./packages/components/lib/UIKit/Tab/BaseTabView.vue.js";
 import { default as F } from "./packages/components/lib/UIKit/Radio/RadioButton.vue.js";
 import { default as M } from "./packages/components/lib/UIKit/Radio/RadioGroup.vue.js";
 import { default as O } from "./packages/components/lib/UIKit/AccessibleSelect.vue.js";
@@ -34,7 +34,7 @@ import { default as le } from "./packages/components/lib/UIKit/BaseSelect.vue.js
 import { default as ue } from "./packages/components/lib/UIKit/BaseSlider.vue.js";
 import { default as ie } from "./UIKit/BaseTextarea.js";
 import { default as ne } from "./packages/components/lib/UIKit/BaseToggle.vue.js";
-import { default as be } from "./UIKit/BaseTooltip.js";
+import { default as Se } from "./UIKit/BaseTooltip.js";
 import { default as ge } from "./packages/components/lib/UIKit/BaseUploadFile.vue.js";
 import { default as he } from "./packages/components/lib/UIKit/BaseModal.vue.js";
 /* empty css                                             */
@@ -42,7 +42,7 @@ import { default as Ie } from "./UIKit/BaseSnackbar.js";
 import { default as ve } from "./UIKit/StaticSpinner.js";
 import { default as Le } from "./packages/components/lib/UIKit/ShimmerLoader/BaseShimmerLoader.vue.js";
 /* empty css                                                                   */
-import { default as ke } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
+import { default as De } from "./packages/components/lib/UIKit/ShimmerLoader/ShimmerMultiLine.vue.js";
 import { default as Fe } from "./packages/components/lib/chart/DoughnutChart.vue.js";
 import { default as Me } from "./packages/components/lib/chart/LineChart.vue.js";
 import { default as Oe } from "./packages/components/lib/components/IntersectionObserver/IntersectionObservable.vue.js";
@@ -54,12 +54,11 @@ import { default as Ee } from "./packages/components/lib/UIKit/BaseBreadcrumb.vu
 import { default as Je } from "./packages/components/lib/UIKit/Navigation/NavigationBar.vue.js";
 /* empty css                                                            */
 import { default as Qe } from "./packages/components/lib/UIKit/Navigation/NavigationBarItem.vue.js";
-import { buttonPlugin as Xe } from "./plugins/buttonPlugin.js";
 export {
   O as AccessibleSelect,
   i as BaseAccordion,
   n as BaseAccordionBtn,
-  b as BaseAccordionContent,
+  S as BaseAccordionContent,
   g as BaseAccordionItem,
   U as BaseAlert,
   j as BaseAutocomplete,
@@ -81,10 +80,10 @@ export {
   ue as BaseSlider,
   Ie as BaseSnackbar,
   L as BaseTab,
-  k as BaseTabView,
+  D as BaseTabView,
   ie as BaseTextarea,
   ne as BaseToggle,
-  be as BaseTooltip,
+  Se as BaseTooltip,
   ge as BaseUploadFile,
   I as CheckboxBtn,
   v as CheckboxGroup,
@@ -97,9 +96,8 @@ export {
   F as RadioButton,
   M as RadioGroup,
   h as SelectItem,
-  ke as ShimmerMultiLine,
+  De as ShimmerMultiLine,
   ve as StaticSpinner,
   je as SwiperCarousel,
-  ye as SwiperSlide,
-  Xe as buttonPlugin
+  ye as SwiperSlide
 };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.1.4-alpha.8",
+  "version": "2.1.4-alpha.9",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "plugins"
   ],
   "sideEffects": [
     "**/*.css"
@@ -28,6 +29,9 @@
     "./chart/*": {
       "import": "./dist/chart/*.js",
       "types": "./dist/chart/*.d.ts"
+    },
+    "./buttonPlugin": {
+      "import": "./plugins/buttonPlugin.ts"
     }
   },
   "repository": {

package/plugins/buttonPlugin.ts

@@ -0,0 +1,290 @@
+import plugin from "tailwindcss/plugin";
+
+const colors = {
+  //New colors
+  primary: { value: "#F20282", hover: "#E30C79", outlineHover: "#FFF8FB" },
+  secondary: { value: "#2b5dff", hover: "#244FD9" },
+  lightgray: { value: "#C1C8D5", hover: "" },
+  ghost: { value: "#FAFBFF", hover: "" },
+
+  //Old colors
+  darkPrimary: { value: "#2A3761", hover: "" },
+  lavender: { value: "#E9EFFE", hover: "" },
+  cultured: { value: "#F4F7FF", hover: "" },
+  carbon: { value: "#3C474D", hover: "" },
+  gray: { value: "#6D7687", hover: "" },
+  black: { value: "#222222", hover: "" },
+  warning: { value: "#FFD167", hover: "" },
+  white: { value: "#FFF", hover: "" },
+  danger: { value: "#FA4F64", hover: "" },
+} as const;
+
+export const buttonPlugin = plugin(({ addComponents, theme }) => {
+  addComponents({
+    ".btn": {
+      "--btn-px": "25px",
+      "--btn-py": "11px",
+      "--btn-bg-color": "transparent",
+      "--btn-text-color": colors.black.value,
+      "--btn-border-color": "unset",
+      "--btn-border-width": "0",
+      "--btn-border-radius": "24px",
+      "--btn-border-style": "solid",
+      "--btn-height": "40px",
+      "--btn-width": "auto",
+      "--btn-font-size": theme("fontSize.16"),
+      "--btn-transition":
+        "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
+      "--btn-font-weight": `${theme("fontWeight.semibold")}`,
+      display: "inline-flex",
+      "align-items": "center",
+      "justify-content": "center",
+      "font-size": "var(--btn-font-size)",
+      "font-weight": "var(--btn-font-weight)",
+      "white-space": "nowrap",
+      border:
+        "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
+      "border-radius": "var(--btn-border-radius)",
+      cursor: "pointer",
+      height: "var(--btn-height)",
+      width: "var(--btn-width)",
+      "background-color": "var(--btn-bg-color)",
+      color: "var(--btn-text-color)",
+      padding: "var(--btn-py) var(--btn-px)",
+      transition: "var(--btn-transition)",
+      "line-height": "1",
+      "-webkit-tap-highlight-color": "transparent",
+      "&.btn-lg": {
+        "--btn-height": "48px",
+        "--btn-px": "24px",
+        "--btn-py": "12px",
+      },
+      "&.btn-sm": {
+        "--btn-px": "24px",
+        "--btn-py": "8px",
+        "--btn-height": "40px",
+      },
+      "&.btn-rounded": {
+        "--btn-px": "0",
+        "--btn-py": "0",
+      },
+      "&.btn-outline": {
+        "--btn-border-width": "1px",
+        "--btn-bg-color": colors.white.value,
+      },
+      "&.btn-primary": {
+        ...createBtn(
+          {
+            bgColor: colors.primary.value,
+            textColor: colors.white.value,
+            hoverBgColor: colors.primary.hover,
+            hoverDisabledBgColor: colors.primary.value,
+          },
+          {
+            mainColor: colors.white.hover,
+            textColor: colors.primary.value,
+            hoverBgColor: colors.primary.outlineHover,
+          },
+        ),
+        "text-transform": "uppercase",
+      },
+      "&.btn-secondary": createBtn(
+        {
+          bgColor: colors.secondary.value,
+          textColor: colors.white.value,
+          hoverBgColor: colors.secondary.hover,
+          hoverDisabledBgColor: colors.secondary.value,
+        },
+        {
+          mainColor: colors.secondary.value,
+          textColor: colors.secondary.value,
+        },
+      ),
+      "&.btn-ternary": {
+        ...createBtn({
+          bgColor: colors.white.value,
+          textColor: colors.secondary.value,
+          hoverBgColor: colors.white.value,
+          hoverDisabledBgColor: colors.secondary.value,
+          hoverTextColor: colors.secondary.hover,
+        }),
+        "--btn-border-color": colors.lightgray.value,
+        "--btn-border-width": "1px",
+        "--btn-border-radius": "24px",
+      },
+      "&.btn-quaternary": {
+        "--btn-px": "0",
+        "--btn-py": "0",
+        "--btn-text-color": colors.secondary.value,
+        "--btn-height": "auto",
+        "&:hover": {
+          "text-decoration": "underline",
+          "--btn-text-color": colors.secondary.hover,
+        },
+        "&:disabled": {
+          "--btn-bg-color": "transparent",
+          "--btn-text-color": colors.lightgray.value,
+        },
+      },
+      "&.btn-single-selection": {
+        "--btn-px": "16px",
+        "--btn-py": "8px",
+        "--btn-border-radius": theme("borderRadius.2xs"),
+        "--btn-border-color": colors.lightgray.value,
+        "--btn-border-width": "1px",
+        "--btn-font-weight": theme("fontWeight.regular"),
+        "&:hover": {
+          "--btn-border-color": colors.secondary.value,
+        },
+        "&:active,&.active,&[data-active='true']": {
+          "--btn-bg-color": colors.ghost.value,
+          "--btn-text-color": colors.secondary.value,
+          "--btn-border-color": colors.secondary.value,
+        },
+      },
+    },
+    //OLD style. Kept for retro-compatibility
+    ".btn-light": createBtn({
+      textColor: colors.primary.value,
+      bgColor: colors.white.value,
+      hoverTextColor: colors.primary.value,
+      hoverBgColor: "#FAFAFA",
+      hoverDisabledBgColor: colors.white.value,
+    }),
+    ".btn-warning": createBtn({
+      bgColor: colors.warning.value,
+      textColor: "#2A3761",
+      hoverBgColor: "#F2C761",
+      hoverDisabledBgColor: colors.warning.value,
+    }),
+    ".btn-danger": createBtn(
+      {
+        bgColor: colors.danger.value,
+        textColor: colors.white.value,
+        hoverBgColor: "#E0485A",
+        hoverDisabledBgColor: colors.danger.value,
+      },
+      {
+        mainColor: colors.danger.value,
+        textColor: colors.danger.value,
+      },
+    ),
+    ".btn-multi-selection": {
+      "--btn-py": "10px",
+      "--btn-height": "40px",
+      "font-weight": theme("fontWeight.regular"),
+      "--btn-border-radius": theme("borderRadius.xs"),
+      "--btn-border-color": "#EAEFFD",
+      "--btn-border-width": "1px",
+      "white-space": "normal",
+      ...createBtn({
+        textColor: colors.black.value,
+        bgColor: "#F5F7FA",
+        hoverBgColor: colors.lavender.value,
+        hoverDisabledBgColor: colors.white.value,
+        hoverBorderColor: "#385CF6",
+      }),
+    },
+
+    ".btn-facile": {
+      "--btn-facile-color": "#FF6600",
+      "--btn-facile-hover-color": "#b34700",
+      ...createBtn({
+        bgColor: "var(--btn-facile-color)",
+        textColor: colors.white.value,
+        hoverBgColor: "var(--btn-facile-hover-color)",
+        hoverTextColor: colors.white.value,
+        hoverDisabledBgColor: "var(--btn-facile-color)",
+      }),
+    },
+    ".btn-show-more": {
+      "--btn-border-radius": "0",
+      "--btn-border-color": colors.white.value,
+      ...createBtn({
+        textColor: "#2B5DFF",
+        bgColor: colors.white.value,
+        hoverTextColor: "#3646B3",
+        hoverBgColor: colors.white.value,
+        hoverDisabledBgColor: colors.white.value,
+      }),
+    },
+    ".btn-transparent": {
+      "--border-color": "transparent",
+      "--btn-px": "0",
+      "--btn-py": "0",
+      "&:hover": {
+        "--btn-bg-color": "transparent",
+        "--border-color": "transparent",
+      },
+    },
+  });
+});
+
+type BtnAttributes = {
+  bgColor: string;
+  textColor: string;
+  hoverBgColor: string;
+  hoverTextColor?: string;
+  /* The border color will be applied to desktop mode */
+  hoverBorderColor?: string;
+  activeBorderColor?: string;
+  activeBgColor?: string;
+  activeTextColor?: string;
+  hoverDisabledBgColor: string;
+};
+type BtnOutlineVariantAttributes = {
+  /* If present, it will be used to set the color to borders, text and background */
+  mainColor?: string;
+  borderColor?: string;
+  textColor?: string;
+  /* The hover bg color will be activated only from tablet mode on */
+  hoverBgColor?: string;
+  hoverDisabledBgColor?: string;
+  /* The hover text color will be activated only from tablet mode on */
+  hoverTextColor?: string;
+  activeBgColor?: string;
+  activeTextColor?: string;
+};
+
+const createBtn = (
+  btnProps: BtnAttributes,
+  btnOutlineProps?: BtnOutlineVariantAttributes,
+): any => ({
+  "--btn-bg-color": btnProps.bgColor,
+  "--btn-text-color": btnProps.textColor,
+  "&:disabled": {
+    cursor: "not-allowed",
+  },
+  "&:hover:not(:disabled)": {
+    "--btn-text-color": btnProps.hoverTextColor,
+    "--btn-bg-color": btnProps.hoverBgColor,
+  },
+  ...(btnOutlineProps
+    ? {
+        "&.btn-outline": createOutlineVariant(btnOutlineProps),
+      }
+    : {}),
+});
+
+const createOutlineVariant = (props: BtnOutlineVariantAttributes): any => ({
+  "--btn-border-color": props.mainColor ?? props.borderColor,
+  "--btn-text-color": props.textColor,
+  "--btn-bg-color": "#fff",
+  //By default, the active section is the same of the hover section in desktop mode
+  "&:active": {
+    "--btn-bg-color":
+      (props.mainColor ?? props.activeBgColor ?? props.hoverBgColor) +
+      " !important",
+    //By default, on active the text is white
+    ...(props.activeTextColor || props.hoverTextColor
+      ? {
+          "--btn-text-color": props.activeTextColor ?? props.hoverTextColor,
+        }
+      : {}),
+  },
+  "&:hover": {
+    //By default, the text color is white
+    ...(props.hoverBgColor ? { "--btn-bg-color": props.hoverBgColor } : {}),
+    "--btn-text-color": props.hoverTextColor ?? props.textColor,
+  },
+});

package/dist/_virtual/_commonjsHelpers.js

@@ -1,6 +0,0 @@
-function e(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
-}
-export {
-  e as getDefaultExportFromCjs
-};

package/dist/_virtual/create-plugin.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/createPlugin.js

@@ -1,4 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};

package/dist/_virtual/plugin.js

@@ -1,7 +0,0 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/.pnpm/tailwindcss@3.4.15_ts-node@10.9.2_@types_node@24.0.1_typescript@5.8.3_/node_modules/tailwindcss/plugin.js";
-var t = o();
-const p = /* @__PURE__ */ r(t);
-export {
-  p as default
-};

package/dist/node_modules/.pnpm/tailwindcss@3.4.15_ts-node@10.9.2_@types_node@24.0.1_typescript@5.8.3_/node_modules/tailwindcss/lib/public/create-plugin.js

@@ -1,25 +0,0 @@
-import { __exports as r } from "../../../../../../../_virtual/create-plugin.js";
-import { __require as _ } from "../util/createPlugin.js";
-var u;
-function o() {
-  return u ? r : (u = 1, function(t) {
-    Object.defineProperty(t, "__esModule", {
-      value: !0
-    }), Object.defineProperty(t, "default", {
-      enumerable: !0,
-      get: function() {
-        return a;
-      }
-    });
-    const n = /* @__PURE__ */ i(_());
-    function i(e) {
-      return e && e.__esModule ? e : {
-        default: e
-      };
-    }
-    const a = n.default;
-  }(r), r);
-}
-export {
-  o as __require
-};

package/dist/node_modules/.pnpm/tailwindcss@3.4.15_ts-node@10.9.2_@types_node@24.0.1_typescript@5.8.3_/node_modules/tailwindcss/lib/util/createPlugin.js

@@ -1,34 +0,0 @@
-import { __exports as u } from "../../../../../../../_virtual/createPlugin.js";
-var c;
-function f() {
-  return c ? u : (c = 1, function(i) {
-    Object.defineProperty(i, "__esModule", {
-      value: !0
-    }), Object.defineProperty(i, "default", {
-      enumerable: !0,
-      get: function() {
-        return _;
-      }
-    });
-    function o(e, n) {
-      return {
-        handler: e,
-        config: n
-      };
-    }
-    o.withOptions = function(e, n = () => ({})) {
-      const r = function(t) {
-        return {
-          __options: t,
-          handler: e(t),
-          config: n(t)
-        };
-      };
-      return r.__isOptionsFunction = !0, r.__pluginFunction = e, r.__configFunction = n, r;
-    };
-    const _ = o;
-  }(u), u);
-}
-export {
-  f as __require
-};

package/dist/node_modules/.pnpm/tailwindcss@3.4.15_ts-node@10.9.2_@types_node@24.0.1_typescript@5.8.3_/node_modules/tailwindcss/plugin.js

@@ -1,11 +0,0 @@
-import { __require as i } from "./lib/public/create-plugin.js";
-var r, u;
-function a() {
-  if (u) return r;
-  u = 1;
-  let e = i();
-  return r = (e.__esModule ? e : { default: e }).default, r;
-}
-export {
-  a as __require
-};

package/dist/plugins/buttonPlugin.d.ts

@@ -1,4 +0,0 @@
-export declare const buttonPlugin: {
-    handler: import('tailwindcss/types/config').PluginCreator;
-    config?: Partial<import('tailwindcss/types/config').Config>;
-};

package/dist/plugins/buttonPlugin.js

@@ -1,232 +0,0 @@
-import n from "../_virtual/plugin.js";
-const o = {
-  //New colors
-  primary: { value: "#F20282", hover: "#E30C79", outlineHover: "#FFF8FB" },
-  secondary: { value: "#2b5dff", hover: "#244FD9" },
-  lightgray: { value: "#C1C8D5" },
-  ghost: { value: "#FAFBFF" },
-  lavender: { value: "#E9EFFE" },
-  black: { value: "#222222" },
-  warning: { value: "#FFD167" },
-  white: { value: "#FFF", hover: "" },
-  danger: { value: "#FA4F64" }
-}, b = n(({ addComponents: r, theme: t }) => {
-  r({
-    ".btn": {
-      "--btn-px": "25px",
-      "--btn-py": "11px",
-      "--btn-bg-color": "transparent",
-      "--btn-text-color": o.black.value,
-      "--btn-border-color": "unset",
-      "--btn-border-width": "0",
-      "--btn-border-radius": "24px",
-      "--btn-border-style": "solid",
-      "--btn-height": "40px",
-      "--btn-width": "auto",
-      "--btn-font-size": t("fontSize.16"),
-      "--btn-transition": "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
-      "--btn-font-weight": `${t("fontWeight.semibold")}`,
-      display: "inline-flex",
-      "align-items": "center",
-      "justify-content": "center",
-      "font-size": "var(--btn-font-size)",
-      "font-weight": "var(--btn-font-weight)",
-      "white-space": "nowrap",
-      border: "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
-      "border-radius": "var(--btn-border-radius)",
-      cursor: "pointer",
-      height: "var(--btn-height)",
-      width: "var(--btn-width)",
-      "background-color": "var(--btn-bg-color)",
-      color: "var(--btn-text-color)",
-      padding: "var(--btn-py) var(--btn-px)",
-      transition: "var(--btn-transition)",
-      "line-height": "1",
-      "-webkit-tap-highlight-color": "transparent",
-      "&.btn-lg": {
-        "--btn-height": "48px",
-        "--btn-px": "24px",
-        "--btn-py": "12px"
-      },
-      "&.btn-sm": {
-        "--btn-px": "24px",
-        "--btn-py": "8px",
-        "--btn-height": "40px"
-      },
-      "&.btn-rounded": {
-        "--btn-px": "0",
-        "--btn-py": "0"
-      },
-      "&.btn-outline": {
-        "--btn-border-width": "1px",
-        "--btn-bg-color": o.white.value
-      },
-      "&.btn-primary": {
-        ...e(
-          {
-            bgColor: o.primary.value,
-            textColor: o.white.value,
-            hoverBgColor: o.primary.hover
-          },
-          {
-            mainColor: o.white.hover,
-            textColor: o.primary.value,
-            hoverBgColor: o.primary.outlineHover
-          }
-        ),
-        "text-transform": "uppercase"
-      },
-      "&.btn-secondary": e(
-        {
-          bgColor: o.secondary.value,
-          textColor: o.white.value,
-          hoverBgColor: o.secondary.hover
-        },
-        {
-          mainColor: o.secondary.value,
-          textColor: o.secondary.value
-        }
-      ),
-      "&.btn-ternary": {
-        ...e({
-          bgColor: o.white.value,
-          textColor: o.secondary.value,
-          hoverBgColor: o.white.value,
-          hoverTextColor: o.secondary.hover
-        }),
-        "--btn-border-color": o.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-border-radius": "24px"
-      },
-      "&.btn-quaternary": {
-        "--btn-px": "0",
-        "--btn-py": "0",
-        "--btn-text-color": o.secondary.value,
-        "--btn-height": "auto",
-        "&:hover": {
-          "text-decoration": "underline",
-          "--btn-text-color": o.secondary.hover
-        },
-        "&:disabled": {
-          "--btn-bg-color": "transparent",
-          "--btn-text-color": o.lightgray.value
-        }
-      },
-      "&.btn-single-selection": {
-        "--btn-px": "16px",
-        "--btn-py": "8px",
-        "--btn-border-radius": t("borderRadius.2xs"),
-        "--btn-border-color": o.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-font-weight": t("fontWeight.regular"),
-        "&:hover": {
-          "--btn-border-color": o.secondary.value
-        },
-        "&:active,&.active,&[data-active='true']": {
-          "--btn-bg-color": o.ghost.value,
-          "--btn-text-color": o.secondary.value,
-          "--btn-border-color": o.secondary.value
-        }
-      }
-    },
-    //OLD style. Kept for retro-compatibility
-    ".btn-light": e({
-      textColor: o.primary.value,
-      bgColor: o.white.value,
-      hoverTextColor: o.primary.value,
-      hoverBgColor: "#FAFAFA"
-    }),
-    ".btn-warning": e({
-      bgColor: o.warning.value,
-      textColor: "#2A3761",
-      hoverBgColor: "#F2C761"
-    }),
-    ".btn-danger": e(
-      {
-        bgColor: o.danger.value,
-        textColor: o.white.value,
-        hoverBgColor: "#E0485A"
-      },
-      {
-        mainColor: o.danger.value,
-        textColor: o.danger.value
-      }
-    ),
-    ".btn-multi-selection": {
-      "--btn-py": "10px",
-      "--btn-height": "40px",
-      "font-weight": t("fontWeight.regular"),
-      "--btn-border-radius": t("borderRadius.xs"),
-      "--btn-border-color": "#EAEFFD",
-      "--btn-border-width": "1px",
-      "white-space": "normal",
-      ...e({
-        textColor: o.black.value,
-        bgColor: "#F5F7FA",
-        hoverBgColor: o.lavender.value
-      })
-    },
-    ".btn-facile": {
-      "--btn-facile-color": "#FF6600",
-      "--btn-facile-hover-color": "#b34700",
-      ...e({
-        bgColor: "var(--btn-facile-color)",
-        textColor: o.white.value,
-        hoverBgColor: "var(--btn-facile-hover-color)",
-        hoverTextColor: o.white.value
-      })
-    },
-    ".btn-show-more": {
-      "--btn-border-radius": "0",
-      "--btn-border-color": o.white.value,
-      ...e({
-        textColor: "#2B5DFF",
-        bgColor: o.white.value,
-        hoverTextColor: "#3646B3",
-        hoverBgColor: o.white.value
-      })
-    },
-    ".btn-transparent": {
-      "--border-color": "transparent",
-      "--btn-px": "0",
-      "--btn-py": "0",
-      "&:hover": {
-        "--btn-bg-color": "transparent",
-        "--border-color": "transparent"
-      }
-    }
-  });
-}), e = (r, t) => ({
-  "--btn-bg-color": r.bgColor,
-  "--btn-text-color": r.textColor,
-  "&:disabled": {
-    cursor: "not-allowed"
-  },
-  "&:hover:not(:disabled)": {
-    "--btn-text-color": r.hoverTextColor,
-    "--btn-bg-color": r.hoverBgColor
-  },
-  ...t ? {
-    "&.btn-outline": l(t)
-  } : {}
-}), l = (r) => ({
-  "--btn-border-color": r.mainColor ?? r.borderColor,
-  "--btn-text-color": r.textColor,
-  "--btn-bg-color": "#fff",
-  //By default, the active section is the same of the hover section in desktop mode
-  "&:active": {
-    "--btn-bg-color": (r.mainColor ?? r.activeBgColor ?? r.hoverBgColor) + " !important",
-    //By default, on active the text is white
-    ...r.activeTextColor || r.hoverTextColor ? {
-      "--btn-text-color": r.activeTextColor ?? r.hoverTextColor
-    } : {}
-  },
-  "&:hover": {
-    //By default, the text color is white
-    ...r.hoverBgColor ? { "--btn-bg-color": r.hoverBgColor } : {},
-    "--btn-text-color": r.hoverTextColor ?? r.textColor
-  }
-});
-export {
-  b as buttonPlugin
-};