@embedreach/components 0.1.42 → 0.1.43

package/dist/chunks/index.js

@@ -24227,8 +24227,8 @@ const outline$2 = "reach-styles-module__outline___gFp3i";
 const secondary$2 = "reach-styles-module__secondary___Pd-e3";
 const ghost = "reach-styles-module__ghost___GcnJq";
 const link = "reach-styles-module__link___EgS2H";
-const sizeDefault = "reach-styles-module__sizeDefault___8kU5A";
-const sizeSm = "reach-styles-module__sizeSm___zPIEh";
+const sizeDefault$1 = "reach-styles-module__sizeDefault___8kU5A";
+const sizeSm$1 = "reach-styles-module__sizeSm___zPIEh";
 const sizeLg = "reach-styles-module__sizeLg___D2G8z";
 const sizeIcon = "reach-styles-module__sizeIcon___5XkYW";
 const styles$6 = {
@@ -24239,8 +24239,8 @@ const styles$6 = {
   secondary: secondary$2,
   ghost,
   link,
-  sizeDefault,
-  sizeSm,
+  sizeDefault: sizeDefault$1,
+  sizeSm: sizeSm$1,
   sizeLg,
   sizeIcon
 };
@@ -24269,13 +24269,6 @@ const buttonVariants = cva([styles$6.base], {
 const Button$1 = React.forwardRef(
   ({ className: className2, variant, size: size2, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot$2 : "button";
-    console.log(
-      `BUTTON VARIANTS`,
-      size2,
-      variant,
-      className2,
-      buttonVariants({ variant, size: size2, className: className2 })
-    );
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -24336,7 +24329,7 @@ const BigSelector = ({ onClick, title: title2, subtitle, icon, selected, disable
     "button",
     {
       onClick,
-      className: `flex flex-col items-center justify-center rounded-lg border-[3px] p-4 transition-all duration-300 ease-in-out ${disabled ? "opacity-50 cursor-not-allowed" : selected ? "scale-[1.02] hover:scale-[1.04] border-primary bg-primary/5" : "border-gray-200 hover:border-primary hover:bg-gray-50"}`,
+      className: `flex flex-col items-center justify-center rounded-lg border-[3px] p-4 transition-all duration-300 ease-in-out ${disabled ? "opacity-50 cursor-not-allowed" : selected ? "scale-[1.02] hover:scale-[1.04] [border-color:hsl(var(--reach-primary))] [background-color:hsl(var(--reach-primary)/0.05)]" : "border-gray-200 hover:[border-color:hsl(var(--reach-primary))] hover:bg-gray-50"}`,
       children: [
         icon,
         /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -33132,6 +33125,10 @@ const destructive$1 = "reach-styles-module__destructive___RLaRD";
 const outline$1 = "reach-styles-module__outline___L2VtW";
 const google = "reach-styles-module__google___HcEij";
 const date = "reach-styles-module__date___-6BC4";
+const sizeDefault = "reach-styles-module__sizeDefault___iGTp4";
+const sizeSm = "reach-styles-module__sizeSm___6T2oK";
+const iconOnly = "reach-styles-module__iconOnly___8vUSp";
+const iconOnlySm = "reach-styles-module__iconOnlySm___9ZKv9";
 const container = "reach-styles-module__container___6PQqs";
 const styles$2 = {
   base: base$1,
@@ -33141,6 +33138,10 @@ const styles$2 = {
   outline: outline$1,
   google,
   date,
+  sizeDefault,
+  sizeSm,
+  iconOnly,
+  iconOnlySm,
   container
 };
 const badgeVariants = cva([styles$2.base], {
@@ -33154,11 +33155,11 @@ const badgeVariants = cva([styles$2.base], {
       date: styles$2.date
     },
     size: {
-      default: styles$2["size-default"],
-      sm: styles$2["size-sm"]
+      default: styles$2.sizeDefault,
+      sm: styles$2.sizeSm
     },
     iconOnly: {
-      true: styles$2["icon-only"],
+      true: styles$2.iconOnly,
       false: ""
     }
   },
@@ -33166,7 +33167,7 @@ const badgeVariants = cva([styles$2.base], {
     {
       iconOnly: true,
       size: "sm",
-      class: styles$2["icon-only-sm"]
+      class: styles$2.iconOnlySm
     }
   ],
   defaultVariants: {
@@ -33176,13 +33177,13 @@ const badgeVariants = cva([styles$2.base], {
   }
 });
 const Badge = React.forwardRef(
-  ({ className: className2, variant, size: size2, iconOnly, truncate, ...props }, ref) => {
+  ({ className: className2, variant, size: size2, iconOnly: iconOnly2, truncate, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn$1(
-          badgeVariants({ variant, size: size2, iconOnly }),
+          badgeVariants({ variant, size: size2, iconOnly: iconOnly2 }),
           truncate && "max-w-[90px]",
           className2
         ),
@@ -41950,8 +41951,8 @@ const SelectEmailOrSMS = ({
       /* @__PURE__ */ jsxs(
         Button$1,
         {
-          className: `${buttonStyle} 
-            ${selectedChannels.includes("email") ? ` border-primary` : "bg-white text-black border-gray-200 hover:bg-gray-50"}`,
+          variant: selectedChannels.includes("email") ? "default" : "outline",
+          className: `${buttonStyle}`,
           onClick: toggleEmail,
           children: [
             /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(iconDefinitions.EmailIcon, { size: 15 }) }),
@@ -41962,8 +41963,8 @@ const SelectEmailOrSMS = ({
       /* @__PURE__ */ jsxs(
         Button$1,
         {
-          className: `${buttonStyle} 
-            ${selectedChannels.includes("sms") ? ` border-primary` : "bg-white text-black border-gray-200 hover:bg-gray-50"}`,
+          variant: selectedChannels.includes("sms") ? "default" : "outline",
+          className: `${buttonStyle}`,
           onClick: toggleSMS,
           children: [
             /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(iconDefinitions.SmsIcon, { size: 15 }) }),

package/dist/index.umd.js

@@ -24244,8 +24244,8 @@
   const secondary$2 = "reach-styles-module__secondary___Pd-e3";
   const ghost = "reach-styles-module__ghost___GcnJq";
   const link = "reach-styles-module__link___EgS2H";
-  const sizeDefault = "reach-styles-module__sizeDefault___8kU5A";
-  const sizeSm = "reach-styles-module__sizeSm___zPIEh";
+  const sizeDefault$1 = "reach-styles-module__sizeDefault___8kU5A";
+  const sizeSm$1 = "reach-styles-module__sizeSm___zPIEh";
   const sizeLg = "reach-styles-module__sizeLg___D2G8z";
   const sizeIcon = "reach-styles-module__sizeIcon___5XkYW";
   const styles$6 = {
@@ -24256,8 +24256,8 @@
     secondary: secondary$2,
     ghost,
     link,
-    sizeDefault,
-    sizeSm,
+    sizeDefault: sizeDefault$1,
+    sizeSm: sizeSm$1,
     sizeLg,
     sizeIcon
   };
@@ -24286,13 +24286,6 @@
   const Button$2 = React__namespace.forwardRef(
     ({ className: className2, variant, size: size3, asChild = false, ...props }, ref) => {
       const Comp = asChild ? Slot$2 : "button";
-      console.log(
-        `BUTTON VARIANTS`,
-        size3,
-        variant,
-        className2,
-        buttonVariants({ variant, size: size3, className: className2 })
-      );
       return /* @__PURE__ */ jsxRuntime.jsx(
         Comp,
         {
@@ -24353,7 +24346,7 @@
       "button",
       {
         onClick,
-        className: `flex flex-col items-center justify-center rounded-lg border-[3px] p-4 transition-all duration-300 ease-in-out ${disabled ? "opacity-50 cursor-not-allowed" : selected ? "scale-[1.02] hover:scale-[1.04] border-primary bg-primary/5" : "border-gray-200 hover:border-primary hover:bg-gray-50"}`,
+        className: `flex flex-col items-center justify-center rounded-lg border-[3px] p-4 transition-all duration-300 ease-in-out ${disabled ? "opacity-50 cursor-not-allowed" : selected ? "scale-[1.02] hover:scale-[1.04] [border-color:hsl(var(--reach-primary))] [background-color:hsl(var(--reach-primary)/0.05)]" : "border-gray-200 hover:[border-color:hsl(var(--reach-primary))] hover:bg-gray-50"}`,
         children: [
           icon,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -33149,6 +33142,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   const outline$1 = "reach-styles-module__outline___L2VtW";
   const google = "reach-styles-module__google___HcEij";
   const date = "reach-styles-module__date___-6BC4";
+  const sizeDefault = "reach-styles-module__sizeDefault___iGTp4";
+  const sizeSm = "reach-styles-module__sizeSm___6T2oK";
+  const iconOnly = "reach-styles-module__iconOnly___8vUSp";
+  const iconOnlySm = "reach-styles-module__iconOnlySm___9ZKv9";
   const container = "reach-styles-module__container___6PQqs";
   const styles$2 = {
     base: base$1,
@@ -33158,6 +33155,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     outline: outline$1,
     google,
     date,
+    sizeDefault,
+    sizeSm,
+    iconOnly,
+    iconOnlySm,
     container
   };
   const badgeVariants = cva([styles$2.base], {
@@ -33171,11 +33172,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         date: styles$2.date
       },
       size: {
-        default: styles$2["size-default"],
-        sm: styles$2["size-sm"]
+        default: styles$2.sizeDefault,
+        sm: styles$2.sizeSm
       },
       iconOnly: {
-        true: styles$2["icon-only"],
+        true: styles$2.iconOnly,
         false: ""
       }
     },
@@ -33183,7 +33184,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       {
         iconOnly: true,
         size: "sm",
-        class: styles$2["icon-only-sm"]
+        class: styles$2.iconOnlySm
       }
     ],
     defaultVariants: {
@@ -33193,13 +33194,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     }
   });
   const Badge = React__namespace.forwardRef(
-    ({ className: className2, variant, size: size3, iconOnly, truncate, ...props }, ref) => {
+    ({ className: className2, variant, size: size3, iconOnly: iconOnly2, truncate, ...props }, ref) => {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref,
           className: cn$1(
-            badgeVariants({ variant, size: size3, iconOnly }),
+            badgeVariants({ variant, size: size3, iconOnly: iconOnly2 }),
             truncate && "max-w-[90px]",
             className2
           ),
@@ -41967,8 +41968,8 @@ ${message2 ?? ""}`);
         /* @__PURE__ */ jsxRuntime.jsxs(
           Button$2,
           {
-            className: `${buttonStyle} 
-            ${selectedChannels.includes("email") ? ` border-primary` : "bg-white text-black border-gray-200 hover:bg-gray-50"}`,
+            variant: selectedChannels.includes("email") ? "default" : "outline",
+            className: `${buttonStyle}`,
             onClick: toggleEmail,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(iconDefinitions.EmailIcon, { size: 15 }) }),
@@ -41979,8 +41980,8 @@ ${message2 ?? ""}`);
         /* @__PURE__ */ jsxRuntime.jsxs(
           Button$2,
           {
-            className: `${buttonStyle} 
-            ${selectedChannels.includes("sms") ? ` border-primary` : "bg-white text-black border-gray-200 hover:bg-gray-50"}`,
+            variant: selectedChannels.includes("sms") ? "default" : "outline",
+            className: `${buttonStyle}`,
             onClick: toggleSMS,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(iconDefinitions.SmsIcon, { size: 15 }) }),

package/dist/styles.css

@@ -2253,10 +2253,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
-}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -2655,6 +2651,12 @@ video {
 .running {
   animation-play-state: running;
 }
+.\[background-color\:hsl\(var\(--reach-primary\)\/0\.05\)\] {
+  background-color: hsl(var(--reach-primary)/0.05);
+}
+.\[border-color\:hsl\(var\(--reach-primary\)\)\] {
+  border-color: hsl(var(--reach-primary));
+}
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -2699,9 +2701,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
 }
-.hover\:border-primary:hover {
-  border-color: hsl(var(--primary));
-}
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
@@ -2828,6 +2827,9 @@ video {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:\[border-color\:hsl\(var\(--reach-primary\)\)\]:hover {
+  border-color: hsl(var(--reach-primary));
+}
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
@@ -6078,10 +6080,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity, 1));
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
-}
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
@@ -6482,6 +6480,12 @@ body {
 .running {
   animation-play-state: running;
 }
+.\[background-color\:hsl\(var\(--reach-primary\)\/0\.05\)\] {
+  background-color: hsl(var(--reach-primary)/0.05);
+}
+.\[border-color\:hsl\(var\(--reach-primary\)\)\] {
+  border-color: hsl(var(--reach-primary));
+}
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -6526,9 +6530,6 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
 }
-.hover\:border-primary:hover {
-  border-color: hsl(var(--primary));
-}
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
@@ -6655,6 +6656,9 @@ body {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:\[border-color\:hsl\(var\(--reach-primary\)\)\]:hover {
+  border-color: hsl(var(--reach-primary));
+}
 .focus\:border-indigo-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(99 102 241 / var(--tw-border-opacity, 1));
@@ -7804,14 +7808,14 @@ body {
 }
 
 /* Sizes */
-.reach-styles-module__size-default___xwzus {
+.reach-styles-module__sizeDefault___iGTp4 {
   padding-left: 0.625rem;
   padding-right: 0.625rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
 
-.reach-styles-module__size-sm___-C9aD {
+.reach-styles-module__sizeSm___6T2oK {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
   padding-top: 0.125rem;
@@ -7820,14 +7824,14 @@ body {
 }
 
 /* Icon Only */
-.reach-styles-module__icon-only___z-wMG {
+.reach-styles-module__iconOnly___8vUSp {
   height: 1.25rem;
   width: 1.25rem;
   justify-content: center;
   padding: 0px;
 }
 
-.reach-styles-module__icon-only-sm___23F2h {
+.reach-styles-module__iconOnlySm___9ZKv9 {
   height: 1rem;
   width: 1rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedreach/components",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "private": false,
   "type": "module",
   "main": "./dist/index.umd.js",