@temp-spotwork/ui 1.6.8 → 1.6.9

package/dist/components/atoms/avatar/Avatar.stories.js

@@ -1,4 +1,4 @@
-import { f as a } from "../../../index-DM2Ov9_y.js";
+import { f as a } from "../../../index-CktvVE7I.js";
 import { Avatar as r } from "./avatar.js";
 const o = {
   title: "@spotwork-ui/Avatar",

package/dist/components/atoms/badge/badge.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Badge as t } from "./badge.js";
 const e = {
   title: "@spotwork-ui/badge",

package/dist/components/atoms/card-content/label-value-pair/label-value-pair.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { LabelValuePair as r } from "./label-value-pair.js";
 import "../../../styles/colors/colors.js";
 import { glyphColorsKeys as a } from "../../../styles/colors/colormap.js";

package/dist/components/atoms/form/chips/chips.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Chips as r } from "./chips.js";
 const a = {
   title: "@spotwork-ui/chips",

package/dist/components/atoms/form/dropdown-search/dropdown-search.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o, jsxs as l } from "react/jsx-runtime";
-import { f as b } from "../../../../index-DM2Ov9_y.js";
+import { f as b } from "../../../../index-CktvVE7I.js";
 import { useState as u } from "react";
 import { DropdownSearch as c } from "./dropdown-search.js";
 import { Typography as p } from "../../../styles/typography/typography.js";

package/dist/components/atoms/form/stepper/Stepper.stories.js

@@ -1,4 +1,4 @@
-import { f as e } from "../../../../index-DM2Ov9_y.js";
+import { f as e } from "../../../../index-CktvVE7I.js";
 import { Stepper as o } from "./stepper.js";
 const a = {
   title: "@spotwork-ui/Stepper",

package/dist/components/atoms/form/time-picker/time-picker.stories.js

@@ -2,7 +2,7 @@ import { jsx as o, jsxs as l } from "react/jsx-runtime";
 import { useState as d } from "react";
 import { TimePicker as m } from "./time-picker.js";
 import { m as t } from "../../../../index-CYyrKZeH.js";
-import { w as i, e as s, u as c } from "../../../../index-DM2Ov9_y.js";
+import { w as i, e as s, u as c } from "../../../../index-CktvVE7I.js";
 const n = (e) => {
   const [r, a] = d(e.value || /* @__PURE__ */ new Date());
   return /* @__PURE__ */ l("div", { className: "space-y-4", children: [

package/dist/components/atoms/icons/icons.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Icons as l } from "./icons.js";
 import "./iconsSVGs/Large/Profile.js";
 import "./iconsSVGs/Small/Profile.js";

package/dist/components/atoms/message/message.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Message as r } from "./message.js";
 const e = {
   title: "@spotwork-ui/message",

package/dist/components/atoms/navigation/navigation-item/navigation-item.js

@@ -6,10 +6,10 @@ import { Icons as n } from "../../icons/icons.js";
 import "../../icons/iconsSVGs/Large/Profile.js";
 import "../../icons/iconsSVGs/Small/Profile.js";
 import { t as u } from "../../../../bundle-mjs-CAy1p0fn.js";
-import { LoadingSpinner as g } from "../../../molecules/button/loading-spinner.js";
-function $({
-  label: r,
-  icon: t,
+import { LoadingSpinner as h } from "../../../molecules/button/loading-spinner.js";
+function j({
+  label: t,
+  icon: r,
   isActive: o = !1,
   isNavigation: s = !1,
   isLoading: m = !1,
@@ -23,24 +23,24 @@ function $({
         d,
         "flex items-center min-w-[14rem]",
         // horizontal layout
-        o ? "bg-surface-active" : "cursor-pointer group-focus:bg-surface-active"
+        o ? "bg-surface-active" : "cursor-pointer"
       ),
-      onFocus: () => a(!0),
-      onBlur: () => a(!1),
+      onMouseOver: () => a(!0),
+      onMouseOut: () => a(!1),
       "data-testid": "navigationItem-container",
       children: [
-        t && /* @__PURE__ */ e("span", { className: "mr-2", children: /* @__PURE__ */ e(
+        r && /* @__PURE__ */ e("span", { className: "mr-2", children: /* @__PURE__ */ e(
           n,
           {
-            icon: t,
-            id: `navitem-${r}-start-icon`,
+            icon: r,
+            id: `navitem-${t}-start-icon`,
             color: o ? "active" : "default"
           }
         ) }),
-        /* @__PURE__ */ e(p, { swStyle: 3, color: o ? "active" : "default", className: "whitespace-nowrap", children: r }),
+        /* @__PURE__ */ e(p, { swStyle: 3, color: o ? "active" : "default", className: "whitespace-nowrap", children: t }),
         /* @__PURE__ */ i("div", { className: "ml-auto flex items-center gap-2", children: [
           m && /* @__PURE__ */ e(
-            g,
+            h,
             {
               size: c
             }
@@ -49,7 +49,7 @@ function $({
             n,
             {
               icon: "ChevronRight",
-              id: `navitem-${r}-end-icon`,
+              id: `navitem-${t}-end-icon`,
               color: "default",
               disabled: !0
             }
@@ -60,5 +60,5 @@ function $({
   );
 }
 export {
-  $ as NavigationItem
+  j as NavigationItem
 };

package/dist/components/atoms/tab/Tab.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Tab as r } from "./tab.js";
 const e = {
   title: "@spotwork-ui/Tab",

package/dist/components/molecules/button/Button.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Button as t } from "./button.js";
 const e = {
   title: "@spotwork-ui/Button",

package/dist/components/molecules/collapsible-card/Collapsiblecard.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { CollapsibleCard as r } from "./collapsible-card.js";
 const e = {
   title: "@spotwork-ui/Collapsiblecard",

package/dist/components/molecules/conversation/message-editor/MessageEditor.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { MessageEditor as r } from "./message-editor.js";
 const e = {
   title: "@spotwork-ui/MessageEditor",

package/dist/components/molecules/conversation/message-group-composer/MessageGroupComposer.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { MessageGroupComposer as r } from "./message-group-composer.js";
 const t = {
   title: "@spotwork-ui/MessageGroupComposer",

package/dist/components/molecules/datatables/cell/Cell.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Cell as r } from "./cell.js";
 const e = {
   title: "@spotwork-ui/Cell",

package/dist/components/molecules/datatables/row/Row.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Row as r } from "./row.js";
 const e = {
   title: "@spotwork-ui/Row",

package/dist/components/molecules/datatables/row-header/RowHeader.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { RowHeader as r } from "./row-header.js";
 const e = {
   title: "@spotwork-ui/RowHeader",

package/dist/components/molecules/dataviz/donut-chart/DonutChart.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { DonutChart as t } from "./donut-chart.js";
 const e = {
   title: "@spotwork-ui/DonutChart",

package/dist/components/molecules/dataviz/dot-matrix/DotMatrix.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { DotMatrix as t } from "./dot-matrix.js";
 const e = {
   title: "@spotwork-ui/DotMatrix",

package/dist/components/molecules/dataviz/single-stacked-bar/SingleStackedBar.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { SingleStackedBar as r } from "./single-stacked-bar.js";
 const e = {
   title: "@spotwork-ui/SingleStackedBar",

package/dist/components/molecules/dialog/dialog.stories.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { w as n, e as i } from "../../../index-DM2Ov9_y.js";
+import { w as n, e as i } from "../../../index-CktvVE7I.js";
 import { useState as l } from "react";
 import { Dialog as s } from "./dialog.js";
 const a = (t) => {

package/dist/components/molecules/filter/context-search/context-search.js

@@ -1,6 +1,6 @@
 import { jsxs as b, jsx as r } from "react/jsx-runtime";
 import { useState as x } from "react";
-import { Icons as F } from "../../../atoms/icons/icons.js";
+import { Icons as g } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
 import { t as s } from "../../../../bundle-mjs-CAy1p0fn.js";
@@ -8,44 +8,43 @@ import { outlinedBorder as l } from "../../../styles/defaults/defaults.js";
 import "../../../../purify.es-eYFoHPwR.js";
 import { styleMap as v } from "../../../styles/typography/style.js";
 import "../../../styles/colors/colormap.js";
-import { textFieldContainer as w } from "../../../atoms/form/textfield/styles.js";
-const k = ({
-  value: i,
-  onChange: o,
-  placeholder: a,
-  disabled: e = !1,
-  className: m,
-  style: c,
+const $ = ({
+  value: a,
+  onChange: e,
+  placeholder: i,
+  disabled: o = !1,
+  className: c,
+  style: m,
   preventBrowserSuggestions: u = !1
 }) => {
-  const [f, t] = x(!1), d = () => {
+  const [f, t] = x(!1), p = () => {
     t(!0);
-  }, n = () => {
+  }, d = () => {
     t(!1);
   };
   return /* @__PURE__ */ b(
     "div",
     {
       className: s(
-        `${w} ${l.base} border-bcolor-default w-full px-md`,
+        `h-[3rem] flex items-center gap-xs px-xs bg-surface-default ${l.base} border-bcolor-default `,
         f && l.active,
-        e && "bg-surface-disabled border-bcolor-disabled",
-        m
+        o && "bg-surface-disabled border-bcolor-disabled",
+        c
       ),
-      style: c,
+      style: m,
       children: [
-        /* @__PURE__ */ r(F, { disabled: !0, icon: "MagnifyingGlassSmall", color: e ? "disabled" : "active" }),
+        /* @__PURE__ */ r(g, { disabled: !0, icon: "MagnifyingGlassSmall", color: o ? "disabled" : "active" }),
         /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            className: s(`w-full h-[2.5rem] focus:outline-none ${v[5]}`),
-            placeholder: a,
-            onFocus: d,
-            onBlur: n,
-            onChange: (p) => o == null ? void 0 : o(p.target.value),
-            value: i,
-            disabled: e,
+            className: s(`focus:outline-none w-full ${v[1]}`),
+            placeholder: i,
+            onFocus: p,
+            onBlur: d,
+            onChange: (n) => e == null ? void 0 : e(n.target.value),
+            value: a,
+            disabled: o,
             autoComplete: u ? "off" : "on"
           }
         )
@@ -54,5 +53,5 @@ const k = ({
   );
 };
 export {
-  k as ContextSearch
+  $ as ContextSearch
 };

package/dist/components/molecules/filter/date-selector/DateSelector.stories.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import { w as o, u as r, e as s } from "../../../../index-DM2Ov9_y.js";
+import { w as o, u as r, e as s } from "../../../../index-CktvVE7I.js";
 import { useState as i } from "react";
 import { DateSelector as d } from "./date-selector.js";
 const n = (e) => {

package/dist/components/molecules/filter/range-selector/RangeSelector.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { RangeSelector as r } from "./range-selector.js";
 const a = {
   title: "@spotwork-ui/RangeSelector",

package/dist/components/molecules/form/radiogroup/radiogroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import { f as t } from "../../../../index-DM2Ov9_y.js";
+import { f as t } from "../../../../index-CktvVE7I.js";
 import { Radiogroup as s } from "./radiogroup.js";
 import { useState as d } from "react";
 import { Icons as r } from "../../../atoms/icons/icons.js";

package/dist/components/molecules/link/Link.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../index-CktvVE7I.js";
 import { Link as r } from "./link.js";
 const e = {
   title: "@spotwork-ui/Link",

package/dist/components/molecules/navigation/header/Header.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Header as r } from "./header.js";
 const e = {
   title: "@spotwork-ui/Header",

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.d.ts

@@ -12,5 +12,3 @@ export declare const TransparentOverlay: Story;
 export declare const CustomWidth: Story;
 export declare const SlowTransition: Story;
 export declare const FastTransition: Story;
-export declare const KeyboardNavigation: Story;
-export declare const NewTabNavigation: Story;

package/dist/components/molecules/navigation/sidebar/Sidebar.stories.js

@@ -1,11 +1,10 @@
-import { jsx as n, jsxs as k } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { w as b, u as i, e as m, s as w } from "../../../../index-DM2Ov9_y.js";
-import { Sidebar as d } from "./sidebar.js";
-import { Button as C } from "../../button/button.js";
-const I = {
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { Sidebar as s } from "./sidebar.js";
+import { Button as d } from "../../button/button.js";
+const f = {
   title: "@spotwork-ui/molecules/Sidebar",
-  component: d,
+  component: s,
   parameters: {
     layout: "fullscreen"
   },
@@ -28,16 +27,16 @@ const I = {
       description: "If true, no overlay is rendered. If false, renders the overlay with background."
     }
   }
-}, u = ({ args: o }) => {
-  const [l, a] = p(!1);
-  return /* @__PURE__ */ k("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(C, { text: "Open Sidebar", onClick: () => a(!0) }),
-    /* @__PURE__ */ n(d, { ...o, topItems: [
+}, m = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
-        onClick: (t) => {
-          console.log("Clicked:", t);
+        onClick: (l) => {
+          console.log("Clicked:", l);
         },
         link: "/clock"
       },
@@ -45,26 +44,26 @@ const I = {
         icon: "Maximize",
         label: "Maximize",
         isActive: !0,
-        onClick: (t) => {
-          console.log("Clicked:", t);
+        onClick: (l) => {
+          console.log("Clicked:", l);
         },
         link: "/maximize"
       },
       {
         icon: "CalendarSmall",
         label: "Calendar",
-        onClick: (t) => {
-          console.log("Clicked:", t);
+        onClick: (l) => {
+          console.log("Clicked:", l);
         },
         link: "/calendar"
       }
-    ], open: l, setOpen: a })
+    ], open: t, setOpen: i })
   ] });
-}, c = ({ args: o }) => {
-  const [l, a] = p(!1);
-  return /* @__PURE__ */ k("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(C, { text: "Open Sidebar with Top & Bottom Items", onClick: () => a(!0) }),
-    /* @__PURE__ */ n(d, { ...o, topItems: [
+}, a = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar with Top & Bottom Items", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
@@ -115,44 +114,44 @@ const I = {
         },
         link: "/help"
       }
-    ], open: l, setOpen: a })
+    ], open: t, setOpen: i })
   ] });
-}, g = ({ args: o }) => {
-  const [l, a] = p(!1);
-  return /* @__PURE__ */ k("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(C, { text: "Open Sidebar (Top Items Only)", onClick: () => a(!0) }),
-    /* @__PURE__ */ n(d, { ...o, topItems: [
+}, p = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar (Top Items Only)", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
-        onClick: (t) => {
-          console.log("Clicked:", t);
+        onClick: (l) => {
+          console.log("Clicked:", l);
         },
         link: "/clock"
       },
       {
         icon: "Maximize",
         label: "Maximize",
-        onClick: (t) => {
-          console.log("Clicked:", t);
+        onClick: (l) => {
+          console.log("Clicked:", l);
         },
         link: "/maximize"
       },
       {
         icon: "CalendarSmall",
         label: "Calendar",
-        onClick: (t) => {
-          console.log("Clicked:", t);
+        onClick: (l) => {
+          console.log("Clicked:", l);
         },
         link: "/calendar"
       }
-    ], open: l, setOpen: a })
+    ], open: t, setOpen: i })
   ] });
-}, y = ({ args: o }) => {
-  const [l, a] = p(!1);
-  return /* @__PURE__ */ k("div", { className: "p-4", children: [
-    /* @__PURE__ */ n(C, { text: "Open Sidebar with Many Items", onClick: () => a(!0) }),
-    /* @__PURE__ */ n(d, { ...o, topItems: [
+}, C = ({ args: o }) => {
+  const [t, i] = r(!1);
+  return /* @__PURE__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ n(d, { text: "Open Sidebar with Many Items", onClick: () => i(!0) }),
+    /* @__PURE__ */ n(s, { ...o, topItems: [
       {
         icon: "Clock",
         label: "Clock",
@@ -235,108 +234,73 @@ const I = {
         },
         link: "/feedback"
       }
-    ], open: l, setOpen: a })
+    ], open: t, setOpen: i })
   ] });
-}, T = {
-  render: (o) => /* @__PURE__ */ n(u, { args: o }),
+}, S = {
+  render: (o) => /* @__PURE__ */ n(m, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, O = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+}, I = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, z = {
-  render: (o) => /* @__PURE__ */ n(g, { args: o }),
+}, x = {
+  render: (o) => /* @__PURE__ */ n(p, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, D = {
-  render: (o) => /* @__PURE__ */ n(y, { args: o }),
+}, y = {
+  render: (o) => /* @__PURE__ */ n(C, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, M = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+}, O = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !0
   }
-}, B = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+}, T = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
   args: {
     width: "30rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, N = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+}, v = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 1e3,
     overlayTransparent: !1
   }
-}, W = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
+}, w = {
+  render: (o) => /* @__PURE__ */ n(a, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 150,
     overlayTransparent: !1
   }
-}, H = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
-  args: {
-    width: "22.5rem",
-    transitionDuration: 300,
-    overlayTransparent: !1
-  },
-  play: async ({ canvasElement: o }) => {
-    const a = await b(o).getByRole("button", { name: /Open Sidebar/i });
-    await i.click(a), await new Promise((r) => setTimeout(r, 500)), await i.tab();
-    const s = o.ownerDocument.activeElement;
-    await m(s).toHaveTextContent("Maximize"), await i.tab(), await i.tab();
-    const t = o.ownerDocument.activeElement;
-    await m(t).toHaveTextContent("Calendar"), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab(), await i.tab();
-    const e = o.ownerDocument.activeElement;
-    await m(e).toHaveTextContent("Clock");
-  }
-}, A = {
-  render: (o) => /* @__PURE__ */ n(c, { args: o }),
-  args: {
-    width: "22.5rem",
-    transitionDuration: 300,
-    overlayTransparent: !1
-  },
-  play: async ({ canvasElement: o, step: l }) => {
-    const a = b(o), s = b(o.ownerDocument.body), t = await a.getByRole("button", { name: /Open Sidebar/i }), e = w(window, "open").mockImplementation(() => null);
-    await l("Open Sidebar", async () => {
-      await i.click(t), await new Promise((r) => setTimeout(r, 500));
-    }), await l("Command + Click Maximize item", async () => {
-      const r = await s.findByRole("link", { name: /Maximize/i });
-      await i.keyboard("{Control>}"), await i.click(r), await i.keyboard("{/Control}"), await m(e).toHaveBeenCalledWith("/maximize", "_blank");
-    }), e.mockRestore();
-  }
 };
 export {
-  T as Basic,
-  B as CustomWidth,
-  W as FastTransition,
-  H as KeyboardNavigation,
-  D as ManyItems,
-  A as NewTabNavigation,
-  N as SlowTransition,
-  z as TopItemsOnly,
-  M as TransparentOverlay,
-  O as WithTopAndBottomItems,
-  I as default
+  S as Basic,
+  T as CustomWidth,
+  w as FastTransition,
+  y as ManyItems,
+  v as SlowTransition,
+  x as TopItemsOnly,
+  O as TransparentOverlay,
+  I as WithTopAndBottomItems,
+  f as default
 };

package/dist/components/molecules/navigation/sidebar/sidebar.js

@@ -1,30 +1,30 @@
-import { jsx as r, jsxs as o, Fragment as h } from "react/jsx-runtime";
-import { NavigationItem as s } from "../../../atoms/navigation/navigation-item/navigation-item.js";
-import { u as v, a as c } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
-import { R as b, P as p, O as x, C as N, T as k, D as y } from "../../../../index-C0ZrzaoZ.js";
+import { jsx as e, jsxs as o, Fragment as h } from "react/jsx-runtime";
+import { NavigationItem as t } from "../../../atoms/navigation/navigation-item/navigation-item.js";
+import { u as g, a as s } from "../../../../react-spring_web.modern-BLL8Qmtg.js";
+import { R as v, P as x, O as b, C as N, T as y, D as k } from "../../../../index-C0ZrzaoZ.js";
 import "../../../styles/colors/colors.js";
 import { surface as C } from "../../../styles/colors/colormap.js";
 function z({
-  open: i,
-  setOpen: t,
+  open: a,
+  setOpen: c,
   topItems: d,
-  bottomItems: a = [],
-  transitionDuration: f = 300,
-  width: u = "22.5rem",
-  overlayTransparent: n = !1
+  bottomItems: l = [],
+  transitionDuration: m = 300,
+  width: f = "22.5rem",
+  overlayTransparent: i = !1
 }) {
-  const m = v(i, {
+  const u = g(a, {
     from: { opacity: 0, transform: "translateX(-100%)" },
     enter: { opacity: 1, transform: "translateX(0%)" },
     leave: { opacity: 1 },
     config: {
-      duration: f
+      duration: m
     }
   });
-  return /* @__PURE__ */ r(b, { open: i, onOpenChange: t, modal: !n, children: /* @__PURE__ */ r(p, { children: m(
-    (l, g) => g ? /* @__PURE__ */ o(h, { children: [
-      !n && /* @__PURE__ */ r(c.div, { style: { opacity: l.opacity }, children: /* @__PURE__ */ r(
-        x,
+  return /* @__PURE__ */ e(v, { open: a, onOpenChange: c, modal: !i, children: /* @__PURE__ */ e(x, { children: u(
+    (n, p) => p ? /* @__PURE__ */ o(h, { children: [
+      !i && /* @__PURE__ */ e(s.div, { style: { opacity: n.opacity }, children: /* @__PURE__ */ e(
+        b,
         {
           forceMount: !0,
           className: "DialogOverlay fixed inset-0 top-[6rem] z-50",
@@ -34,38 +34,17 @@ function z({
           }
         }
       ) }),
-      /* @__PURE__ */ o(N, { forceMount: !0, "data-state": i ? "open" : "close", children: [
-        /* @__PURE__ */ r(k, { className: "sr-only", children: "Navigation Sidebar" }),
-        /* @__PURE__ */ r(y, { className: "sr-only", children: "Navigation menu with links to different sections" }),
+      /* @__PURE__ */ o(N, { forceMount: !0, "data-state": a ? "open" : "close", children: [
+        /* @__PURE__ */ e(y, { className: "sr-only", children: "Navigation Sidebar" }),
+        /* @__PURE__ */ e(k, { className: "sr-only", children: "Navigation menu with links to different sections" }),
         /* @__PURE__ */ o(
-          c.div,
+          s.div,
           {
-            style: { transform: l.transform, width: u },
-            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none flex flex-col ${n ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
+            style: { transform: n.transform, width: f },
+            className: `fixed top-[6rem] left-0 h-screen z-50 bg-surface-default focus:outline-none flex flex-col ${i ? "border-[0.1rem] border-bcolor-divider" : "shadow-[0rem_1rem_1rem_0rem_#B0B0B0] border-t-[0.1rem] border-bcolor-divider"}`,
             children: [
-              /* @__PURE__ */ r("div", { className: "flex flex-col gap-xs p-md flex-1", children: d.map((e) => /* @__PURE__ */ o(
-                "a",
-                {
-                  href: e.link,
-                  onClick: () => e.onClick(e.link),
-                  className: "group focus-visible:ring-2 focus-visible:ring-shadow-active focus:outline-none rounded hover:bg-bcolor-divider block no-underline",
-                  children: [
-                    "                        ",
-                    /* @__PURE__ */ r(s, { ...e, isNavigation: !0 })
-                  ]
-                },
-                e.label
-              )) }),
-              a.length > 0 && /* @__PURE__ */ r("div", { className: "flex flex-col gap-lg p-md", children: a.map((e) => /* @__PURE__ */ r(
-                "a",
-                {
-                  href: e.link,
-                  onClick: () => e.onClick(e.link),
-                  className: "group focus-visible:ring-2 focus-visible:ring-shadow-active focus:outline-none rounded hover:bg-bcolor-divider block no-underline",
-                  children: /* @__PURE__ */ r(s, { ...e, isNavigation: !0 })
-                },
-                e.label
-              )) })
+              /* @__PURE__ */ e("div", { className: "flex flex-col gap-xs p-md flex-1", children: d.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) }),
+              l.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-lg p-md", children: l.map((r) => /* @__PURE__ */ e("div", { onClick: () => r.onClick(r.link), children: /* @__PURE__ */ e(t, { ...r, isNavigation: !0 }) }, r.label)) })
             ]
           }
         )

package/dist/components/molecules/notifications/content/Content.stories.js

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-DM2Ov9_y.js";
+import { f as o } from "../../../../index-CktvVE7I.js";
 import { Content as t } from "./content.js";
 const e = {
   title: "@spotwork-ui/Content",

package/dist/components/molecules/tab-group/tabgroup.stories.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { f as c } from "../../../index-DM2Ov9_y.js";
+import { f as c } from "../../../index-CktvVE7I.js";
 import { useState as r } from "react";
 import { TabGroup as s } from "./tab-group.js";
 import { Typography as n } from "../../styles/typography/typography.js";

package/dist/{index-DM2Ov9_y.js → index-CktvVE7I.js}

@@ -20302,10 +20302,6 @@ var mocks = /* @__PURE__ */ new Set();
 function isMockFunction(ne) {
   return typeof ne == "function" && "_isMockFunction" in ne && ne._isMockFunction;
 }
-function spyOn(ne, pt, yt) {
-  let ir = yt ? { [{ get: "getter", set: "setter" }[yt]]: pt } : pt, io = C2(ne, ir);
-  return enhanceSpy(io);
-}
 var callOrder = 0;
 function enhanceSpy(ne) {
   let pt = ne, yt, ir = [], io = [], uo = [], fo = T(ne), _o = { get calls() {
@@ -21184,10 +21180,6 @@ var listeners = /* @__PURE__ */ new Set();
 function onMockCall(ne) {
   return listeners.add(ne), () => void listeners.delete(ne);
 }
-var spyOn2 = (...ne) => {
-  let pt = spyOn(...ne);
-  return reactiveMock(pt);
-};
 function fn2(ne) {
   let pt = ne ? fn(ne) : fn();
   return reactiveMock(pt);
@@ -24173,7 +24165,6 @@ scope.__STORYBOOK_TEST_ON_MOCK_CALL__ = onMockCall;
 export {
   expect3 as e,
   fn2 as f,
-  spyOn2 as s,
   userEvent2 as u,
   within as w
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.6.8",
+  "version": "1.6.9",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",