@ck-ui/component-library 1.0.17 → 2.0.0

package/dist/components/MAVDropdown/index.js

@@ -1,146 +1,143 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { useState as h, useRef as v, useCallback as D } from "react";
-import { Popover as C } from "../Popover/index.js";
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { useState as _, useRef as k, useCallback as x } from "react";
+import { Popover as D } from "../Popover/index.js";
 import { Tooltip as M } from "../Tooltip/index.js";
-import { mergeClasses as u } from "../../utils/mergeClasses.js";
-import { S as A } from "../../chevron-down-Cm9R64Fe.js";
-import '../../assets/index-PKpDB4Cl.css';const s = {
-  "ckds-mav-dropdown": "_ckds-mav-dropdown_1w4zu_1",
-  "ckds-mav-trigger": "_ckds-mav-trigger_1w4zu_7",
-  "ckds-mav-trigger--open": "_ckds-mav-trigger--open_1w4zu_19",
-  "ckds-mav-trigger-content": "_ckds-mav-trigger-content_1w4zu_27",
-  "ckds-mav-trigger-label": "_ckds-mav-trigger-label_1w4zu_34",
-  "ckds-mav-trigger-selected": "_ckds-mav-trigger-selected_1w4zu_42",
-  "ckds-mav-chevron": "_ckds-mav-chevron_1w4zu_52",
-  "ckds-mav-chevron--open": "_ckds-mav-chevron--open_1w4zu_65",
-  "ckds-mav-popover": "_ckds-mav-popover_1w4zu_69",
-  "ckds-mav-item-list": "_ckds-mav-item-list_1w4zu_77",
-  "ckds-mav-item": "_ckds-mav-item_1w4zu_77",
-  "ckds-mav-item-label": "_ckds-mav-item-label_1w4zu_110",
-  "ckds-mav-item-sublabel": "_ckds-mav-item-sublabel_1w4zu_113",
-  "ckds-mav-item--active": "_ckds-mav-item--active_1w4zu_121"
+import { mergeClasses as v } from "../../utils/mergeClasses.js";
+import { S as C } from "../../chevron-down-Cm9R64Fe.js";
+import '../../assets/index-Dpv0OAoW.css';const s = {
+  "ckds-mav-dropdown": "_ckds-mav-dropdown_1llbq_1",
+  "ckds-mav-trigger": "_ckds-mav-trigger_1llbq_7",
+  "ckds-mav-trigger-content": "_ckds-mav-trigger-content_1llbq_24",
+  "ckds-mav-trigger-label": "_ckds-mav-trigger-label_1llbq_31",
+  "ckds-mav-trigger-selected": "_ckds-mav-trigger-selected_1llbq_39",
+  "ckds-mav-chevron": "_ckds-mav-chevron_1llbq_49",
+  "ckds-mav-chevron--open": "_ckds-mav-chevron--open_1llbq_63",
+  "ckds-mav-popover": "_ckds-mav-popover_1llbq_67",
+  "ckds-mav-item-list": "_ckds-mav-item-list_1llbq_75",
+  "ckds-mav-item": "_ckds-mav-item_1llbq_75",
+  "ckds-mav-item-label": "_ckds-mav-item-label_1llbq_111",
+  "ckds-mav-item-sublabel": "_ckds-mav-item-sublabel_1llbq_114",
+  "ckds-mav-item--active": "_ckds-mav-item--active_1llbq_122"
 };
-function z({ text: t, className: n }) {
-  const r = v(null), [k, o] = h(!1);
-  return /* @__PURE__ */ a(M, { title: k ? t : "", placement: "top", children: /* @__PURE__ */ a(
+function q({ text: a, className: t }) {
+  const n = k(null), [u, o] = _(!1);
+  return /* @__PURE__ */ l(M, { title: u ? a : "", placement: "top", children: /* @__PURE__ */ l(
     "span",
     {
-      ref: r,
-      className: n,
+      ref: n,
+      className: t,
       onMouseEnter: () => {
-        r.current && r.current.scrollWidth > r.current.clientWidth && o(!0);
+        n.current && n.current.scrollWidth > n.current.clientWidth && o(!0);
       },
       onMouseLeave: () => o(!1),
-      children: t
+      children: a
     }
   ) });
 }
-function R({
-  triggerLabel: t = "MAV",
-  selectedItem: n,
-  items: r,
-  onSelect: k,
-  listHeight: o = "200px",
-  className: f
+function A({
+  triggerLabel: a = "MAV",
+  selectedItem: t,
+  items: n,
+  onSelect: u,
+  className: o
 }) {
-  const [l, c] = h(!1), [N, x] = h(!1), g = v(null), i = v(null), p = v(null), E = D(() => {
-    i.current && x(i.current.scrollWidth > i.current.clientWidth);
-  }, []), b = () => {
+  const [r, c] = _(!1), [N, w] = _(!1), h = k(null), i = k(null), p = k(null), E = x(() => {
+    i.current && w(i.current.scrollWidth > i.current.clientWidth);
+  }, []), f = () => {
     p.current && clearTimeout(p.current), c(!0);
-  }, w = () => {
+  }, g = () => {
     p.current = setTimeout(() => c(!1), 120);
   }, T = (e) => {
     (e.key === "Enter" || e.key === " ") && (e.preventDefault(), c((d) => !d)), e.key === "Escape" && c(!1);
   }, y = (e) => {
-    k(e), c(!1);
+    u(e), c(!1);
   };
   return /* @__PURE__ */ m(
     "div",
     {
-      className: u(s["ckds-mav-dropdown"], f),
-      onMouseEnter: b,
-      onMouseLeave: w,
+      className: v(s["ckds-mav-dropdown"], o),
+      onMouseEnter: f,
+      onMouseLeave: g,
       children: [
         /* @__PURE__ */ m(
           "button",
           {
-            ref: g,
+            ref: h,
             type: "button",
-            className: u(
+            className: v(
               s["ckds-mav-trigger"],
-              l && s["ckds-mav-trigger--open"]
+              r && s["ckds-mav-trigger--open"]
             ),
             onKeyDown: T,
             "aria-haspopup": "listbox",
-            "aria-expanded": l,
-            "aria-label": `${t}: ${n.label}, open MAV selector`,
+            "aria-expanded": r,
+            "aria-label": `${a}: ${t.label}, open MAV selector`,
             children: [
               /* @__PURE__ */ m("span", { className: s["ckds-mav-trigger-content"], children: [
-                /* @__PURE__ */ a("span", { className: s["ckds-mav-trigger-label"], children: t }),
-                /* @__PURE__ */ a(M, { title: N ? n.label : "", placement: "bottom", children: /* @__PURE__ */ a(
+                /* @__PURE__ */ l("span", { className: s["ckds-mav-trigger-label"], children: a }),
+                /* @__PURE__ */ l(M, { title: N ? t.label : "", placement: "bottom", children: /* @__PURE__ */ l(
                   "span",
                   {
                     ref: i,
                     className: s["ckds-mav-trigger-selected"],
                     onMouseEnter: E,
-                    children: n.label
+                    children: t.label
                   }
                 ) })
               ] }),
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ l(
                 "span",
                 {
-                  className: u(
+                  className: v(
                     s["ckds-mav-chevron"],
-                    l && s["ckds-mav-chevron--open"]
+                    r && s["ckds-mav-chevron--open"]
                   ),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ a(A, {})
+                  children: /* @__PURE__ */ l(C, {})
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ a(
-          C,
+        /* @__PURE__ */ l(
+          D,
           {
-            open: l,
+            open: r,
             onClose: () => c(!1),
-            anchorRef: g,
+            anchorRef: h,
             align: "left",
             minWidth: "0",
             className: s["ckds-mav-popover"],
-            children: /* @__PURE__ */ a(
+            children: /* @__PURE__ */ l(
               "div",
               {
-                onMouseEnter: b,
-                onMouseLeave: w,
-                children: /* @__PURE__ */ a(
+                onMouseEnter: f,
+                onMouseLeave: g,
+                children: /* @__PURE__ */ l(
                   "ul",
                   {
                     role: "listbox",
-                    "aria-label": `${t} options`,
+                    "aria-label": `${a} options`,
                     className: s["ckds-mav-item-list"],
-                    style: { maxHeight: o },
-                    children: r.map((e) => {
-                      const d = e.key === n.key;
+                    children: n.map((e) => {
+                      const d = e.key === t.key;
                       return /* @__PURE__ */ m(
                         "li",
                         {
                           role: "option",
                           "aria-selected": d,
-                          className: u(
+                          className: v(
                             s["ckds-mav-item"],
                             d && s["ckds-mav-item--active"]
                           ),
                           onClick: () => y(e),
-                          onKeyDown: (_) => {
-                            (_.key === "Enter" || _.key === " ") && (_.preventDefault(), y(e));
+                          onKeyDown: (b) => {
+                            (b.key === "Enter" || b.key === " ") && (b.preventDefault(), y(e));
                           },
                           tabIndex: 0,
                           children: [
-                            /* @__PURE__ */ a(z, { text: e.label, className: s["ckds-mav-item-label"] }),
-                            e.subLabel && /* @__PURE__ */ a(z, { text: e.subLabel, className: s["ckds-mav-item-sublabel"] })
+                            /* @__PURE__ */ l(q, { text: e.label, className: s["ckds-mav-item-label"] }),
+                            e.subLabel && /* @__PURE__ */ l(q, { text: e.subLabel, className: s["ckds-mav-item-sublabel"] })
                           ]
                         },
                         e.key
@@ -156,7 +153,7 @@ function R({
     }
   );
 }
-R.displayName = "MAVDropdown";
+A.displayName = "MAVDropdown";
 export {
-  R as MAVDropdown
+  A as MAVDropdown
 };

package/dist/components/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAc,EACd,KAAe,EACf,QAAkB,GACnB,EAAE,YAAY,kDAmId;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/Popover/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAc,EACd,KAAe,EACf,QAAkB,GACnB,EAAE,YAAY,kDA2Id;AAED,eAAe,OAAO,CAAC"}

package/dist/components/Popover/index.js

@@ -1,74 +1,78 @@
 import { jsx as E } from "react/jsx-runtime";
-import { useRef as g, useState as L, useEffect as u } from "react";
-import '../../assets/index-BkNXS5fR.css';const k = {
+import { useRef as g, useState as L, useLayoutEffect as k, useEffect as f } from "react";
+import '../../assets/index-BkNXS5fR.css';const y = {
   "ckds-popover": "_ckds-popover_erslc_1"
 };
-function h({
-  open: n,
+function z({
+  open: o,
   onClose: i,
-  anchorRef: r,
-  children: l,
-  className: a = "",
+  anchorRef: e,
+  children: m,
+  className: p = "",
   align: s = "right",
-  minWidth: f = "540px"
+  minWidth: v = "540px"
 }) {
-  const d = g(null), [c, p] = L({
+  const c = g(null), [d, l] = L({
     top: 0,
     left: 0
   });
-  if (u(() => {
-    if (!n || !r.current) return;
-    const t = () => {
-      const o = r.current;
-      if (!o) return;
-      const e = o.getBoundingClientRect(), v = e.bottom + 8, w = s === "right" ? e.right : e.left;
-      p({
-        top: v,
+  if (k(() => {
+    if (!o || !e.current) return;
+    const r = e.current.getBoundingClientRect(), t = r.bottom + 8, u = s === "right" ? r.right : r.left;
+    l({ top: t, left: u });
+  }, [o, e, s]), f(() => {
+    if (!o || !e.current) return;
+    const n = () => {
+      const r = e.current;
+      if (!r) return;
+      const t = r.getBoundingClientRect(), u = t.bottom + 8, w = s === "right" ? t.right : t.left;
+      l({
+        top: u,
         left: w
       });
     };
-    return t(), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
+    return window.addEventListener("scroll", n, !0), window.addEventListener("resize", n), () => {
       window.removeEventListener(
         "scroll",
-        t,
+        n,
         !0
       ), window.removeEventListener(
         "resize",
-        t
+        n
       );
     };
-  }, [n, r, s]), u(() => {
-    if (!n) return;
-    const t = (e) => {
-      d.current && !d.current.contains(
-        e.target
-      ) && r.current && !r.current.contains(
-        e.target
+  }, [o, e, s]), f(() => {
+    if (!o) return;
+    const n = (t) => {
+      c.current && !c.current.contains(
+        t.target
+      ) && e.current && !e.current.contains(
+        t.target
       ) && i();
-    }, o = (e) => {
-      e.key === "Escape" && i();
+    }, r = (t) => {
+      t.key === "Escape" && i();
     };
     return document.addEventListener(
       "mousedown",
-      t
+      n
     ), document.addEventListener(
       "keydown",
-      o
+      r
     ), () => {
       document.removeEventListener(
         "mousedown",
-        t
+        n
       ), document.removeEventListener(
         "keydown",
-        o
+        r
       );
     };
-  }, [n, i, r]), !n) return null;
-  const m = {
+  }, [o, i, e]), !o) return null;
+  const a = {
     position: "fixed",
-    top: c.top,
-    left: c.left,
-    minWidth: f,
+    top: d.top,
+    left: d.left,
+    minWidth: v,
     zIndex: 50,
     transform: s === "right" ? "translateX(-100%)" : void 0,
     transformOrigin: s === "right" ? "top right" : "top left"
@@ -76,16 +80,16 @@ function h({
   return /* @__PURE__ */ E(
     "div",
     {
-      ref: d,
-      className: `${k["ckds-popover"]} ${a}`,
-      style: m,
+      ref: c,
+      className: `${y["ckds-popover"]} ${p}`,
+      style: a,
       role: "dialog",
       "aria-modal": "false",
-      children: l
+      children: m
     }
   );
 }
 export {
-  h as Popover,
-  h as default
+  z as Popover,
+  z as default
 };

package/dist/components/ProfileDropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/ProfileDropdown/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAK3E,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,YAAwB,EACxB,IAAI,EACJ,YAAY,EACZ,UAAiC,EACjC,KAAqB,EACrB,YAAY,EACZ,oBAAoB,EACpB,SAAS,GACV,EAAE,oBAAoB,2CA4HtB;yBAtIe,eAAe"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/ProfileDropdown/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAK3E,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,YAAwB,EACxB,IAAI,EACJ,YAAY,EACZ,UAAiC,EACjC,KAAqB,EACrB,YAAY,EACZ,oBAAoB,EACpB,SAAS,GACV,EAAE,oBAAoB,2CA+GtB;yBAzHe,eAAe"}

package/dist/components/ProfileDropdown/index.js

@@ -1,86 +1,84 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { useState as N, useRef as E } from "react";
-import { mergeClasses as a } from "../../utils/mergeClasses.js";
-import { Avatar as f } from "../Avatar/index.js";
+import { mergeClasses as n } from "../../utils/mergeClasses.js";
+import { Avatar as p } from "../Avatar/index.js";
 import { AvatarSizes as t } from "../Avatar/_types/avatar.types.js";
-import { DEFAULT_VIEWS as D, PROFILE_VIEW as S } from "./_types/profileDropdown.types.js";
-import { VIEW_LABELS as x } from "./constants.js";
-import { S as A } from "../../chevron-down-Cm9R64Fe.js";
-import '../../assets/index-Cdmws__2.css';const e = {
-  "ckds-profile-dropdown": "_ckds-profile-dropdown_1vyrh_1",
-  "ckds-profile-trigger": "_ckds-profile-trigger_1vyrh_12",
-  "ckds-profile-trigger--open": "_ckds-profile-trigger--open_1vyrh_24",
-  "ckds-profile-trigger-text": "_ckds-profile-trigger-text_1vyrh_32",
-  "ckds-profile-welcome-label": "_ckds-profile-welcome-label_1vyrh_39",
-  "ckds-profile-user-name": "_ckds-profile-user-name_1vyrh_47",
-  "ckds-profile-chevron": "_ckds-profile-chevron_1vyrh_55",
-  "ckds-profile-chevron--open": "_ckds-profile-chevron--open_1vyrh_68",
-  "ckds-profile-dropdown-panel": "_ckds-profile-dropdown-panel_1vyrh_72",
-  "ckds-profile-panel-row": "_ckds-profile-panel-row_1vyrh_84",
-  "ckds-profile-divider": "_ckds-profile-divider_1vyrh_91",
-  "ckds-profile-role-info": "_ckds-profile-role-info_1vyrh_97",
-  "ckds-profile-role-label": "_ckds-profile-role-label_1vyrh_105",
-  "ckds-profile-role-value": "_ckds-profile-role-value_1vyrh_112",
-  "ckds-profile-view-toggle": "_ckds-profile-view-toggle_1vyrh_122",
-  "ckds-profile-view-btn": "_ckds-profile-view-btn_1vyrh_129",
-  "ckds-profile-view-btn--active": "_ckds-profile-view-btn--active_1vyrh_147",
-  "ckds-profile-org-info": "_ckds-profile-org-info_1vyrh_162",
-  "ckds-profile-org-label": "_ckds-profile-org-label_1vyrh_170",
-  "ckds-profile-org-value": "_ckds-profile-org-value_1vyrh_177",
-  "ckds-profile-change-org-btn": "_ckds-profile-change-org-btn_1vyrh_187"
+import { Tabs as y } from "../Tab/index.js";
+import { CKButton as D } from "../CKButton/index.js";
+import { DEFAULT_VIEWS as x, PROFILE_VIEW as C } from "./_types/profileDropdown.types.js";
+import { VIEW_LABELS as I } from "./constants.js";
+import { S as M } from "../../chevron-down-Cm9R64Fe.js";
+import '../../assets/index-C4-S_v9y.css';const e = {
+  "ckds-profile-dropdown": "_ckds-profile-dropdown_1mtwz_1",
+  "ckds-profile-trigger": "_ckds-profile-trigger_1mtwz_12",
+  "ckds-profile-trigger-text": "_ckds-profile-trigger-text_1mtwz_29",
+  "ckds-profile-welcome-label": "_ckds-profile-welcome-label_1mtwz_36",
+  "ckds-profile-user-name": "_ckds-profile-user-name_1mtwz_44",
+  "ckds-profile-chevron": "_ckds-profile-chevron_1mtwz_52",
+  "ckds-profile-chevron--open": "_ckds-profile-chevron--open_1mtwz_66",
+  "ckds-profile-dropdown-panel": "_ckds-profile-dropdown-panel_1mtwz_70",
+  "ckds-profile-panel-row": "_ckds-profile-panel-row_1mtwz_82",
+  "ckds-profile-divider": "_ckds-profile-divider_1mtwz_89",
+  "ckds-profile-role-info": "_ckds-profile-role-info_1mtwz_94",
+  "ckds-profile-role-label": "_ckds-profile-role-label_1mtwz_102",
+  "ckds-profile-role-value": "_ckds-profile-role-value_1mtwz_109",
+  "ckds-profile-org-info": "_ckds-profile-org-info_1mtwz_159",
+  "ckds-profile-org-label": "_ckds-profile-org-label_1mtwz_167",
+  "ckds-profile-org-value": "_ckds-profile-org-value_1mtwz_174",
+  "ckds-profile-change-org-btn": "_ckds-profile-change-org-btn_1mtwz_184"
 };
-function C({
+function P({
   userName: i,
-  welcomeLabel: p = "Welcome",
-  role: k,
-  organization: _,
-  activeView: v = S.PARTNER,
-  views: h = D,
-  onViewChange: m,
-  onChangeOrganization: g,
-  className: u
+  welcomeLabel: d = "Welcome",
+  role: f,
+  organization: m,
+  activeView: k = C.PARTNER,
+  views: _ = x,
+  onViewChange: g,
+  onChangeOrganization: u,
+  className: w
 }) {
-  const [s, c] = N(!1), d = E(null), y = () => {
-    d.current && clearTimeout(d.current), c(!0);
-  }, b = () => {
-    d.current = setTimeout(() => c(!1), 120);
-  }, w = (o) => {
-    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), c((n) => !n)), o.key === "Escape" && c(!1);
+  const [s, a] = N(!1), c = E(null), h = () => {
+    c.current && clearTimeout(c.current), a(!0);
+  }, v = () => {
+    c.current = setTimeout(() => a(!1), 120);
+  }, z = (o) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a((b) => !b)), o.key === "Escape" && a(!1);
   };
   return /* @__PURE__ */ l(
     "div",
     {
-      className: a(e["ckds-profile-dropdown"], u),
-      onMouseEnter: y,
-      onMouseLeave: b,
+      className: n(e["ckds-profile-dropdown"], w),
+      onMouseEnter: h,
+      onMouseLeave: v,
       children: [
         /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            className: a(
+            className: n(
               e["ckds-profile-trigger"],
               s && e["ckds-profile-trigger--open"]
             ),
-            onKeyDown: w,
+            onKeyDown: z,
             "aria-haspopup": "true",
             "aria-expanded": s,
-            "aria-label": `${p} ${i}, open profile menu`,
+            "aria-label": `${d} ${i}, open profile menu`,
             children: [
-              /* @__PURE__ */ r(f, { name: i, size: t.SMALL }),
+              /* @__PURE__ */ r(p, { name: i, size: t.MEDIUM, color: "blue" }),
               /* @__PURE__ */ l("span", { className: e["ckds-profile-trigger-text"], children: [
-                /* @__PURE__ */ r("span", { className: e["ckds-profile-welcome-label"], children: p }),
+                /* @__PURE__ */ r("span", { className: e["ckds-profile-welcome-label"], children: d }),
                 /* @__PURE__ */ r("span", { className: e["ckds-profile-user-name"], children: i })
               ] }),
               /* @__PURE__ */ r(
                 "span",
                 {
-                  className: a(
+                  className: n(
                     e["ckds-profile-chevron"],
                     s && e["ckds-profile-chevron--open"]
                   ),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ r(A, {})
+                  children: /* @__PURE__ */ r(M, {})
                 }
               )
             ]
@@ -94,34 +92,22 @@ function C({
             "aria-label": "Profile details",
             children: [
               /* @__PURE__ */ l("div", { className: e["ckds-profile-panel-row"], children: [
-                /* @__PURE__ */ r(f, { name: i, size: t.MEDIUM }),
+                /* @__PURE__ */ r(p, { name: i, size: t.MEDIUM, color: "blue" }),
                 /* @__PURE__ */ l("div", { className: e["ckds-profile-role-info"], children: [
                   /* @__PURE__ */ r("span", { className: e["ckds-profile-role-label"], children: "Role" }),
-                  /* @__PURE__ */ r("span", { className: e["ckds-profile-role-value"], children: k })
+                  /* @__PURE__ */ r("span", { className: e["ckds-profile-role-value"], children: f })
                 ] }),
                 /* @__PURE__ */ r(
-                  "div",
+                  y,
                   {
-                    className: e["ckds-profile-view-toggle"],
-                    role: "group",
-                    "aria-label": "Switch view",
-                    children: h.map((o) => {
-                      const n = v === o;
-                      return /* @__PURE__ */ r(
-                        "button",
-                        {
-                          type: "button",
-                          className: a(
-                            e["ckds-profile-view-btn"],
-                            n && e["ckds-profile-view-btn--active"]
-                          ),
-                          onClick: () => m?.(o),
-                          "aria-pressed": n,
-                          children: x[o]
-                        },
-                        o
-                      );
-                    })
+                    value: k,
+                    items: _.map((o) => ({
+                      value: o,
+                      label: I[o]
+                    })),
+                    onChange: (o) => g?.(o),
+                    buttonView: !0,
+                    size: "small"
                   }
                 )
               ] }),
@@ -129,15 +115,16 @@ function C({
               /* @__PURE__ */ l("div", { className: e["ckds-profile-panel-row"], children: [
                 /* @__PURE__ */ l("div", { className: e["ckds-profile-org-info"], children: [
                   /* @__PURE__ */ r("span", { className: e["ckds-profile-org-label"], children: "Organization" }),
-                  /* @__PURE__ */ r("span", { className: e["ckds-profile-org-value"], children: _ })
+                  /* @__PURE__ */ r("span", { className: e["ckds-profile-org-value"], children: m })
                 ] }),
                 /* @__PURE__ */ r(
-                  "button",
+                  D,
                   {
-                    type: "button",
-                    className: e["ckds-profile-change-org-btn"],
-                    onClick: g,
-                    children: "Change Organization"
+                    variant: "primary",
+                    size: "medium",
+                    label: "Change Organization",
+                    onClick: u,
+                    className: e["ckds-profile-change-org-btn"]
                   }
                 )
               ] })
@@ -148,7 +135,7 @@ function C({
     }
   );
 }
-C.displayName = "ProfileDropdown";
+P.displayName = "ProfileDropdown";
 export {
-  C as ProfileDropdown
+  P as ProfileDropdown
 };

package/dist/components/SingleSelectDropdown/_helpers/DropdownFooter.js

@@ -1,12 +1,12 @@
 import "react/jsx-runtime";
-import { D as v } from "../../../DropdownFooter-DL--mVls.js";
+import { D as v } from "../../../DropdownFooter-DIxlKK1Y.js";
 import "../../Avatar/index.js";
 import "../../CKButton/index.js";
 import "../../IconButton/index.js";
 import "../../Stepper/index.js";
 import "react";
 import "../../../index-BR6M9zUI.js";
-import '../../../assets/theme-gJHYUL9y.css';import '../../../assets/styles-DrYTmjez.css';import '../../../assets/styles-CwZG1jzB.css';import '../../../assets/styles-0GdZsGyi.css';import '../../../assets/ReactToastify-GNLSjkBZ.css';/* empty css                              */
+import '../../../assets/theme-CDdq9khQ.css';import '../../../assets/styles-DrYTmjez.css';import '../../../assets/styles-CwZG1jzB.css';import '../../../assets/styles-0GdZsGyi.css';import '../../../assets/ReactToastify-GNLSjkBZ.css';/* empty css                              */
 import "../../GroupedMultiSelect/_helpers/TagContent.js";
 import "../../GroupedMultiSelect/_helpers/OptionRow.js";
 import "../../GroupedSingleSelect/_helpers/OptionRow.js";

package/dist/components/SingleSelectDropdown/index.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import { useState as d, useRef as g, useMemo as V, useEffect as D } from "react";
-import { s as e, D as A } from "../../DropdownFooter-DL--mVls.js";
+import { s as e, D as A } from "../../DropdownFooter-DIxlKK1Y.js";
 import { S as M } from "../../chevron-down-Cm9R64Fe.js";
 import { S as q } from "../../info-icon-ooYw3va_.js";
 import "../Avatar/index.js";
@@ -9,7 +9,7 @@ import "../IconButton/index.js";
 import "../Stepper/index.js";
 import { Tooltip as G } from "../Tooltip/index.js";
 import "../../index-BR6M9zUI.js";
-import '../../assets/theme-gJHYUL9y.css';import '../../assets/styles-DrYTmjez.css';import '../../assets/styles-CwZG1jzB.css';import '../../assets/styles-0GdZsGyi.css';import '../../assets/ReactToastify-GNLSjkBZ.css';/* empty css                           */
+import '../../assets/theme-CDdq9khQ.css';import '../../assets/styles-DrYTmjez.css';import '../../assets/styles-CwZG1jzB.css';import '../../assets/styles-0GdZsGyi.css';import '../../assets/ReactToastify-GNLSjkBZ.css';/* empty css                           */
 import { RadioButton as H } from "../RadioButton/index.js";
 import { Search as J } from "../Search/index.js";
 import "../GroupedMultiSelect/_helpers/TagContent.js";

package/dist/theme/Theme.js

@@ -1,5 +1,5 @@
 import { jsx as e, Fragment as o } from "react/jsx-runtime";
-import '../assets/theme-gJHYUL9y.css';/* empty css                */
+import '../assets/theme-CDdq9khQ.css';/* empty css                */
 const i = ({ children: r }) => /* @__PURE__ */ e(o, { children: r });
 export {
   i as CKThemeProvider