@goodhood-web/ui 3.0.0-development.63 → 3.0.0-development.65

package/index.mjs

@@ -31159,100 +31159,105 @@ const UF = "_wrapper_7h7ep_141", zF = "_textAreaInput_7h7ep_148", YF = "_textAre
     );
   });
   return /* @__PURE__ */ R.jsx("div", { className: A0.root, children: n });
-}, oO = "_toggleContainer_14q2u_142", aO = "_toggleLabel_14q2u_149", iO = "_toggleLabel__labelPill_14q2u_173", sO = "_toggleButton_14q2u_181", ia = {
-  "react-datepicker__day-names": "_react-datepicker__day-names_14q2u_120",
-  "react-datepicker__week": "_react-datepicker__week_14q2u_124",
-  "react-datepicker__day--outside-month": "_react-datepicker__day--outside-month_14q2u_131",
-  "react-datepicker": "_react-datepicker_14q2u_120",
+}, oO = "_toggleContainer_5bpeg_142", aO = "_toggleLabel_5bpeg_149", iO = "_toggleLabel__labelPill_5bpeg_174", sO = "_toggleButton_5bpeg_182", ia = {
+  "react-datepicker__day-names": "_react-datepicker__day-names_5bpeg_120",
+  "react-datepicker__week": "_react-datepicker__week_5bpeg_124",
+  "react-datepicker__day--outside-month": "_react-datepicker__day--outside-month_5bpeg_131",
+  "react-datepicker": "_react-datepicker_5bpeg_120",
   toggleContainer: oO,
   toggleLabel: aO,
-  "toggleLabel--outline": "_toggleLabel--outline_14q2u_155",
-  "toggleLabel--filled": "_toggleLabel--filled_14q2u_163",
+  "toggleLabel--outline": "_toggleLabel--outline_5bpeg_156",
+  "toggleLabel--filled": "_toggleLabel--filled_5bpeg_164",
   toggleLabel__labelPill: iO,
-  "toggleLabel__labelPill--large": "_toggleLabel__labelPill--large_14q2u_178",
+  "toggleLabel__labelPill--large": "_toggleLabel__labelPill--large_5bpeg_179",
   toggleButton: sO,
-  "toggleContainer--default": "_toggleContainer--default_14q2u_219",
-  "toggleContainer--medium": "_toggleContainer--medium_14q2u_223",
-  "toggleLabel--horizontal": "_toggleLabel--horizontal_14q2u_227",
-  "toggleLabel--vertical": "_toggleLabel--vertical_14q2u_234",
-  "toggleLabel--vertical__labelPill": "_toggleLabel--vertical__labelPill_14q2u_239",
-  "toggleContainer--large": "_toggleContainer--large_14q2u_244"
+  "toggleContainer--default": "_toggleContainer--default_5bpeg_232",
+  "toggleContainer--medium": "_toggleContainer--medium_5bpeg_236",
+  "toggleLabel--horizontal": "_toggleLabel--horizontal_5bpeg_240",
+  "toggleLabel--vertical": "_toggleLabel--vertical_5bpeg_247",
+  "toggleLabel--vertical__labelPill": "_toggleLabel--vertical__labelPill_5bpeg_252",
+  "toggleContainer--large": "_toggleContainer--large_5bpeg_257"
 }, lO = ({
-  disabled: t,
-  icon: e,
-  iconSize: n = "32",
-  id: r,
-  isSelected: o = !1,
-  label: a,
-  onToggleChange: s,
-  orientation: l = "horizontal",
-  popular: u,
-  style: f = "outline",
-  value: m,
-  variant: g = "default"
+  className: t,
+  disabled: e,
+  icon: n,
+  iconSize: r = "32",
+  id: o,
+  isSelected: a = !1,
+  label: s,
+  onToggleChange: l,
+  orientation: u = "horizontal",
+  popular: f,
+  style: m = "outline",
+  value: g,
+  variant: y = "default"
 }) => {
-  const y = () => {
-    switch (g) {
+  const b = () => {
+    switch (y) {
       case "large":
         return "h5";
       case "medium":
       default:
-        return f === "filled" || o ? "body-semibold" : "body-regular";
+        return m === "filled" || a ? "body-semibold" : "body-regular";
     }
-  }, b = () => {
-    if (e)
-      switch (n) {
+  }, E = () => {
+    if (n)
+      switch (r) {
         case "24":
-          return /* @__PURE__ */ R.jsx(It, { name: e, size: n, role: "presentation" });
+          return /* @__PURE__ */ R.jsx(It, { name: n, size: r, role: "presentation" });
         default:
-          return /* @__PURE__ */ R.jsx(It, { name: e, size: n, role: "presentation" });
+          return /* @__PURE__ */ R.jsx(It, { name: n, size: r, role: "presentation" });
       }
-  }, E = () => {
-    s && s({ id: r, value: m });
+  }, D = () => {
+    l && l({ id: o, value: g });
   };
   return /* @__PURE__ */ R.jsxs(
     "label",
     {
-      htmlFor: `toggle-button-${r}`,
-      "data-testid": `toggle-button-${r}`,
-      className: pe(ia.toggleContainer, ia[`toggleContainer--${g}`]),
+      htmlFor: `toggle-button-${o}`,
+      "data-testid": `toggle-button-${o}`,
+      className: pe(
+        ia.toggleContainer,
+        ia[`toggleContainer--${y}`],
+        t
+      ),
       children: [
         /* @__PURE__ */ R.jsx(
           "input",
           {
             type: "checkbox",
-            id: `toggle-button-${r}`,
+            id: `toggle-button-${o}`,
             className: ia.toggleButton,
-            checked: o,
-            onChange: E,
-            disabled: t
+            checked: a,
+            onChange: D,
+            disabled: e
           }
         ),
         /* @__PURE__ */ R.jsxs(
           Ke,
           {
-            className: pe(ia.toggleLabel, ia[`toggleLabel--${f}`], {
-              [ia[`toggleLabel--${l}`]]: e
+            className: pe(ia.toggleLabel, ia[`toggleLabel--${m}`], {
+              [ia[`toggleLabel--${u}`]]: n
             }),
             as: "p",
-            type: y(),
+            type: b(),
             children: [
-              b(),
-              a
+              E(),
+              s
             ]
           }
         ),
-        u && /* @__PURE__ */ R.jsx(
+        f && /* @__PURE__ */ R.jsx(
           zf,
           {
             className: pe(
               ia.toggleLabel__labelPill,
-              ia[`toggleLabel__labelPill--${g}`],
+              ia[`toggleLabel__labelPill--${y}`],
               {
-                [ia[`toggleLabel__labelPill--${l}`]]: e
+                [ia[`toggleLabel__labelPill--${u}`]]: n
               }
             ),
-            label: u,
+            label: f,
             size: "medium",
             color: "lavender"
           }

package/lib/Atoms/Selectables/SelectablePill/SelectablePill.d.ts

@@ -1,3 +1,3 @@
 import { SelectablePillProps } from './SelectablePill.types';
-declare const SelectablePill: ({ disabled, icon, iconSize, id, isSelected, label, onToggleChange, orientation, popular, style, value, variant, }: SelectablePillProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectablePill: ({ className, disabled, icon, iconSize, id, isSelected, label, onToggleChange, orientation, popular, style, value, variant, }: SelectablePillProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectablePill;

package/lib/Atoms/Selectables/SelectablePill/SelectablePill.types.d.ts

@@ -1,5 +1,6 @@
 import { Icon24, Icon32 } from '../../../Base/Icon/Icon.types';
 export interface SelectablePillProps {
+    className?: string;
     disabled?: boolean;
     icon?: Icon24 | Icon32;
     iconSize?: '24' | '32';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodhood-web/ui",
-  "version": "3.0.0-development.63",
+  "version": "3.0.0-development.65",
   "main": "./index.js",
   "types": "./index.d.ts",
   "repository": "https://github.com/good-hood-gmbh/goodhood-web",