@temp-spotwork/ui 1.6.9 → 1.7.1

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

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

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../index-CktvVE7I.js";
+import { f as o } from "../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { w as n, e as i } from "../../../index-DM2Ov9_y.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 g } from "../../../atoms/icons/icons.js";
+import { Icons as F } 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,43 +8,44 @@ 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";
-const $ = ({
-  value: a,
-  onChange: e,
-  placeholder: i,
-  disabled: o = !1,
-  className: c,
-  style: m,
+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,
   preventBrowserSuggestions: u = !1
 }) => {
-  const [f, t] = x(!1), p = () => {
+  const [f, t] = x(!1), d = () => {
     t(!0);
-  }, d = () => {
+  }, n = () => {
     t(!1);
   };
   return /* @__PURE__ */ b(
     "div",
     {
       className: s(
-        `h-[3rem] flex items-center gap-xs px-xs bg-surface-default ${l.base} border-bcolor-default `,
+        `${w} ${l.base} border-bcolor-default w-full px-md`,
         f && l.active,
-        o && "bg-surface-disabled border-bcolor-disabled",
-        c
+        e && "bg-surface-disabled border-bcolor-disabled",
+        m
       ),
-      style: m,
+      style: c,
       children: [
-        /* @__PURE__ */ r(g, { disabled: !0, icon: "MagnifyingGlassSmall", color: o ? "disabled" : "active" }),
+        /* @__PURE__ */ r(F, { disabled: !0, icon: "MagnifyingGlassSmall", color: e ? "disabled" : "active" }),
         /* @__PURE__ */ r(
           "input",
           {
             type: "text",
-            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,
+            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,
             autoComplete: u ? "off" : "on"
           }
         )
@@ -53,5 +54,5 @@ const $ = ({
   );
 };
 export {
-  $ as ContextSearch
+  k 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-CktvVE7I.js";
+import { w as o, u as r, e as s } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as t } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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,3 +12,5 @@ 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,10 +1,11 @@
-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 = {
+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 = {
   title: "@spotwork-ui/molecules/Sidebar",
-  component: s,
+  component: d,
   parameters: {
     layout: "fullscreen"
   },
@@ -27,16 +28,16 @@ const f = {
       description: "If true, no overlay is rendered. If false, renders the overlay with background."
     }
   }
-}, 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: [
+}, 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: [
       {
         icon: "Clock",
         label: "Clock",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/clock"
       },
@@ -44,26 +45,26 @@ const f = {
         icon: "Maximize",
         label: "Maximize",
         isActive: !0,
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/maximize"
       },
       {
         icon: "CalendarSmall",
         label: "Calendar",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/calendar"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, 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: [
+}, 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: [
       {
         icon: "Clock",
         label: "Clock",
@@ -114,44 +115,44 @@ const f = {
         },
         link: "/help"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, 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: [
+}, 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: [
       {
         icon: "Clock",
         label: "Clock",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/clock"
       },
       {
         icon: "Maximize",
         label: "Maximize",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/maximize"
       },
       {
         icon: "CalendarSmall",
         label: "Calendar",
-        onClick: (l) => {
-          console.log("Clicked:", l);
+        onClick: (t) => {
+          console.log("Clicked:", t);
         },
         link: "/calendar"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, 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: [
+}, 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: [
       {
         icon: "Clock",
         label: "Clock",
@@ -234,73 +235,110 @@ const f = {
         },
         link: "/feedback"
       }
-    ], open: t, setOpen: i })
+    ], open: l, setOpen: a })
   ] });
-}, S = {
-  render: (o) => /* @__PURE__ */ n(m, { args: o }),
+}, T = {
+  render: (o) => /* @__PURE__ */ n(u, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, I = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, O = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, x = {
-  render: (o) => /* @__PURE__ */ n(p, { args: o }),
+}, z = {
+  render: (o) => /* @__PURE__ */ n(g, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, y = {
-  render: (o) => /* @__PURE__ */ n(C, { args: o }),
+}, D = {
+  render: (o) => /* @__PURE__ */ n(y, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, O = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, M = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 300,
     overlayTransparent: !0
   }
-}, T = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, B = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "30rem",
     transitionDuration: 300,
     overlayTransparent: !1
   }
-}, v = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, N = {
+  render: (o) => /* @__PURE__ */ n(c, { args: o }),
   args: {
     width: "22.5rem",
     transitionDuration: 1e3,
     overlayTransparent: !1
   }
-}, w = {
-  render: (o) => /* @__PURE__ */ n(a, { args: o }),
+}, W = {
+  render: (o) => /* @__PURE__ */ n(c, { 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 {
-  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
+  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
 };

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

@@ -1,30 +1,30 @@
-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 { 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 "../../../styles/colors/colors.js";
 import { surface as C } from "../../../styles/colors/colormap.js";
 function z({
-  open: a,
-  setOpen: c,
+  open: i,
+  setOpen: t,
   topItems: d,
-  bottomItems: l = [],
-  transitionDuration: m = 300,
-  width: f = "22.5rem",
-  overlayTransparent: i = !1
+  bottomItems: a = [],
+  transitionDuration: f = 300,
+  width: u = "22.5rem",
+  overlayTransparent: n = !1
 }) {
-  const u = g(a, {
+  const m = v(i, {
     from: { opacity: 0, transform: "translateX(-100%)" },
     enter: { opacity: 1, transform: "translateX(0%)" },
     leave: { opacity: 1 },
     config: {
-      duration: m
+      duration: f
     }
   });
-  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,
+  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,
         {
           forceMount: !0,
           className: "DialogOverlay fixed inset-0 top-[6rem] z-50",
@@ -34,17 +34,38 @@ function z({
           }
         }
       ) }),
-      /* @__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(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(
-          s.div,
+          c.div,
           {
-            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"}`,
+            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"}`,
             children: [
-              /* @__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)) })
+              /* @__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
+              )) })
             ]
           }
         )

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

@@ -1,4 +1,4 @@
-import { f as o } from "../../../../index-CktvVE7I.js";
+import { f as o } from "../../../../index-DM2Ov9_y.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-CktvVE7I.js";
+import { f as c } from "../../../index-DM2Ov9_y.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-CktvVE7I.js → index-DM2Ov9_y.js}

@@ -20302,6 +20302,10 @@ 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() {
@@ -21180,6 +21184,10 @@ 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);
@@ -24165,6 +24173,7 @@ 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.9",
+  "version": "1.7.1",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -89,5 +89,9 @@
     "react-imask": "^7.6.0",
     "react-spring": "^9.7.3",
     "tailwindcss-animate": "^1.0.7"
+  },
+  "optionalDependencies": {
+    "@ast-grep/napi-linux-x64-gnu": "0.36.3",
+    "@rollup/rollup-linux-x64-gnu": "4.46.2"
   }
 }