@temp-spotwork/ui 1.6.0 → 1.6.8

package/dist/components/atoms/avatar/Avatar.stories.d.ts

@@ -5,3 +5,5 @@ declare const meta: Meta<typeof Avatar>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Circular: Story;
+export declare const WithFullName: Story;
+export declare const LargeWithFullName: Story;

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

@@ -1,8 +1,8 @@
-import { f as r } from "../../../index-CktvVE7I.js";
-import { Avatar as o } from "./avatar.js";
-const c = {
+import { f as a } from "../../../index-DM2Ov9_y.js";
+import { Avatar as r } from "./avatar.js";
+const o = {
   title: "@spotwork-ui/Avatar",
-  component: o,
+  component: r,
   parameters: {
     layout: "centered"
   },
@@ -10,13 +10,30 @@ const c = {
   argTypes: {
     backgroundColor: { control: "color" }
   },
-  args: { onClick: r() }
-}, e = {
+  args: { onClick: a() }
+}, i = {
   args: {
+    id: "circular-avatar",
     variant: "circular"
   }
+}, c = {
+  args: {
+    id: "full-name-avatar",
+    variant: "circular",
+    textView: "Steve Bob"
+  }
+}, l = {
+  args: {
+    id: "large-full-name-avatar",
+    variant: "circular",
+    textView: "Steve Bob",
+    size: 9,
+    isActive: !0
+  }
 };
 export {
-  e as Circular,
-  c as default
+  i as Circular,
+  l as LargeWithFullName,
+  c as WithFullName,
+  o as default
 };

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

@@ -1,76 +1,79 @@
-import { jsx as r, Fragment as b, jsxs as U } from "react/jsx-runtime";
-import { Typography as _ } from "../../styles/typography/typography.js";
-import { classesMap as I } from "./styles.js";
-import y from "./statusIndicatorIcon.js";
-import { t as s } from "../../../bundle-mjs-CAy1p0fn.js";
-function Z({
-  id: p,
-  hasBorder: l = !1,
-  variant: i,
-  image: d,
-  textView: E = "NN",
-  isActive: o,
+import { jsx as r, Fragment as E, jsxs as I } from "react/jsx-runtime";
+import { Typography as y } from "../../styles/typography/typography.js";
+import { classesMap as D } from "./styles.js";
+import F from "./statusIndicatorIcon.js";
+import { t as l } from "../../../bundle-mjs-CAy1p0fn.js";
+function w({
+  id: g,
+  hasBorder: i = !1,
+  variant: d,
+  image: m,
+  textView: u = "NN",
+  isActive: n,
   isOnline: v = !1,
-  onClick: c,
+  onClick: s,
   size: t
 }) {
-  const e = i === "circular", a = e ? 5 : 5.5, n = t ? t / a : 1, m = I[i](l), u = !e && l && o ? "border-bcolor-active" : "border-bcolor-divider", S = t && a > t ? 1 : 7, g = () => {
-    c && c(p);
-  }, x = d ? /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  const S = (() => {
+    const o = u.trim().split(/\s+/);
+    return o.length > 1 ? (o[0][0] + o[o.length - 1][0]).toUpperCase() : u;
+  })(), e = d === "circular", a = e ? 5 : 5.5, c = t ? t / a : 1, p = D[d](i), h = !e && i && n ? "border-bcolor-active" : "border-bcolor-divider", A = t && a > t ? 1 : 7, C = () => {
+    s && s(g);
+  }, U = m ? /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
     "img",
     {
-      className: s(m.image, u),
-      src: d,
+      className: l(p.image, h),
+      src: m,
       alt: "avatar-image"
     }
-  ) }) : /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
+  ) }) : /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
     "div",
     {
       "data-testid": "avatar-text-box",
-      className: s(m.textBox, u),
+      className: l(p.textBox, h),
       children: /* @__PURE__ */ r(
-        _,
+        y,
         {
-          swStyle: S,
-          children: E,
+          swStyle: A,
+          children: S,
           color: "visualPlaceholderDefault"
         }
       )
     }
-  ) }), f = 0.25, A = e && v && !o && /* @__PURE__ */ r(
+  ) }), f = 0.25, x = e && v && !n && /* @__PURE__ */ r(
     "div",
     {
       className: "absolute",
       style: {
-        bottom: `${n * f}rem`,
-        right: `${n * f}rem`
+        bottom: `${c * f}rem`,
+        right: `${c * f}rem`
       },
       "data-testid": "avatar-online-status",
-      children: /* @__PURE__ */ r(y, { scalingFactor: n })
+      children: /* @__PURE__ */ r(F, { scalingFactor: c })
     }
-  ), h = c ? "button" : "div", C = () => e && o ? "border-bcolor-active" : "border-[transparent]";
-  return /* @__PURE__ */ U(
-    h,
+  ), b = s ? "button" : "div", _ = () => e && n ? "border-bcolor-active" : "border-[transparent]";
+  return /* @__PURE__ */ I(
+    b,
     {
       "data-testid": "avatar-container",
-      onClick: g,
+      onClick: C,
       style: {
         width: `${t || a}rem`,
         height: `${t || a}rem`
       },
-      className: s(
+      className: l(
         "flex items-center justify-center flex-shrink-0 flex-grow-0 relative",
-        C(),
+        _(),
         "aspect-square"
       ),
-      ...h === "button" ? { type: "button" } : {},
+      ...b === "button" ? { type: "button" } : {},
       children: [
-        x,
-        A
+        U,
+        x
       ]
     }
   );
 }
 export {
-  Z as Avatar
+  w as 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/dateselect/helpers.d.ts

@@ -32,5 +32,5 @@ export declare const eachYearOfInterval: (interval: {
     end: Date;
 }) => Date[];
 export declare const isSameMonth: (shortDate: any, currentDay: any) => boolean;
-export declare const isSameWeek: (dateLeft: any, dateRight: any, weekStartsOn?: number) => boolean;
+export declare const isSameWeek: (dateLeft: string | Date, dateRight: string | Date, weekStartsOn?: number) => boolean;
 export declare const endOfMonth: (date: Date) => Date;

package/dist/components/atoms/form/dateselect/helpers.js

@@ -1,4 +1,4 @@
-const g = (r) => {
+const m = (n) => {
   const t = {
     Jan: "January",
     Feb: "February",
@@ -12,11 +12,11 @@ const g = (r) => {
     Oct: "October",
     Nov: "November",
     Dec: "December"
-  }, [e, n] = r.split("-"), o = t[e];
-  if (!o || !n)
+  }, [e, r] = n.split("-"), o = t[e];
+  if (!o || !r)
     throw new Error("Invalid date format");
-  return `${o} ${n}`;
-}, d = (r) => {
+  return `${o} ${r}`;
+}, p = (n) => {
   const t = {
     Jan: 0,
     Feb: 1,
@@ -30,54 +30,54 @@ const g = (r) => {
     Oct: 9,
     Nov: 10,
     Dec: 11
-  }, [e, n] = r.split("-"), o = parseInt(n, 10), a = t[e];
+  }, [e, r] = n.split("-"), o = parseInt(r, 10), a = t[e];
   return isNaN(o) || a === void 0 ? /* @__PURE__ */ new Date(NaN) : new Date(o, a);
-}, p = (r) => {
-  const t = { month: "short", year: "numeric" }, [e, n] = r.toLocaleDateString("en-US", t).split(" ");
-  return `${e}-${n}`;
-}, D = (r) => {
-  const { start: t, end: e } = r;
+}, D = (n) => {
+  const t = { month: "short", year: "numeric" }, [e, r] = n.toLocaleDateString("en-US", t).split(" ");
+  return `${e}-${r}`;
+}, y = (n) => {
+  const { start: t, end: e } = n;
   if (t > e)
     throw new Error("The start of the interval cannot be after the end");
-  const n = t.getFullYear(), o = t.getMonth(), a = e.getFullYear(), s = e.getMonth(), h = [];
-  for (let c = n; c <= a; c++) {
-    const f = c === n ? o : 0, i = c === a ? s : 11;
+  const r = t.getFullYear(), o = t.getMonth(), a = e.getFullYear(), s = e.getMonth(), h = [];
+  for (let c = r; c <= a; c++) {
+    const f = c === r ? o : 0, i = c === a ? s : 11;
     for (let u = f; u <= i; u++) {
-      const M = String(u + 1).padStart(2, "0"), m = `${c}-${M}-01`;
-      h.push(m);
+      const M = String(u + 1).padStart(2, "0"), g = `${c}-${M}-01`;
+      h.push(g);
     }
   }
   return h;
-}, S = (r) => {
-  const { start: t, end: e } = r;
+}, d = (n) => {
+  const { start: t, end: e } = n;
   if (!(t instanceof Date) || !(e instanceof Date))
     throw new Error("Invalid start or end date");
   if (t > e)
     throw new Error("The start date must be before or equal to the end date");
-  const n = [], o = t.getFullYear(), a = e.getFullYear();
+  const r = [], o = t.getFullYear(), a = e.getFullYear();
   for (let s = o; s <= a; s++)
-    n.push(new Date(s, 0, 1));
-  return n;
-}, y = (r, t) => {
-  const [e, n] = g(r).split(" "), o = parseInt(n, 10), a = (/* @__PURE__ */ new Date(`${e} 1, ${o}`)).getMonth(), s = t.getMonth(), h = t.getFullYear();
+    r.push(new Date(s, 0, 1));
+  return r;
+}, S = (n, t) => {
+  const [e, r] = m(n).split(" "), o = parseInt(r, 10), a = (/* @__PURE__ */ new Date(`${e} 1, ${o}`)).getMonth(), s = t.getMonth(), h = t.getFullYear();
   return s === a && h === o;
-}, l = (r, t) => {
-  const e = new Date(r), n = (e.getDay() - t + 7) % 7;
-  return e.setDate(e.getDate() - n), e.setHours(0, 0, 0, 0), e;
-}, Y = (r, t, e = 0) => {
-  const n = l(r, e), o = l(t, e);
-  return n.getTime() === o.getTime();
-}, w = (r) => {
-  const t = new Date(r);
+}, l = (n, t) => {
+  const e = new Date(n), r = (e.getDay() - t + 7) % 7;
+  return e.setDate(e.getDate() - r), e.setHours(0, 0, 0, 0), e;
+}, w = (n, t, e = 0) => {
+  const r = typeof n == "string" ? new Date(n) : n, o = typeof t == "string" ? new Date(t) : t, a = l(r, e), s = l(o, e);
+  return a.getTime() === s.getTime();
+}, Y = (n) => {
+  const t = new Date(n);
   return t.setMonth(t.getMonth() + 1), t.setDate(0), t.setHours(23, 59, 59, 999), t;
 };
 export {
-  D as eachMonthOfInterval,
-  S as eachYearOfInterval,
-  w as endOfMonth,
-  p as formatDateToMonthYear,
-  g as formatShortMonthYear,
-  y as isSameMonth,
-  Y as isSameWeek,
-  d as parseShortMonthYear
+  y as eachMonthOfInterval,
+  d as eachYearOfInterval,
+  Y as endOfMonth,
+  D as formatDateToMonthYear,
+  m as formatShortMonthYear,
+  S as isSameMonth,
+  w as isSameWeek,
+  p as parseShortMonthYear
 };

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/row.js

@@ -1,17 +1,29 @@
-import { jsxs as i } from "react/jsx-runtime";
-import { rowContainer as m } from "./styles.js";
-import { t as n } from "../../../../bundle-mjs-CAy1p0fn.js";
-function l({ cells: t, rowHeader: o, minWidth: r, id: e, className: a }) {
-  return /* @__PURE__ */ i(
+import { jsxs as a, jsx as m } from "react/jsx-runtime";
+import o from "react";
+import { rowContainer as s } from "./styles.js";
+import { t as p } from "../../../../bundle-mjs-CAy1p0fn.js";
+function f(t) {
+  return Array.isArray(t) ? t.map((r, e) => {
+    if (o.isValidElement(r)) {
+      const n = r.props;
+      return o.cloneElement(r, {
+        key: r.key ?? n.id ?? `cell-${e}`
+      });
+    }
+    return /* @__PURE__ */ m(o.Fragment, { children: r }, `cell-${e}`);
+  }) : t;
+}
+function l({ cells: t, rowHeader: r, minWidth: e, id: n, className: i }) {
+  return /* @__PURE__ */ a(
     "tr",
     {
-      id: e,
-      className: n(m, a),
-      style: { minWidth: r ? `${r}rem` : "0" },
+      id: n,
+      className: p(s, i),
+      style: { minWidth: e ? `${e}rem` : "0" },
       "data-testid": "table-row-container",
       children: [
-        o,
-        t
+        r,
+        f(t)
       ]
     }
   );

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/header/header.d.ts

@@ -34,4 +34,4 @@ export type HeaderProps = {
      */
     additionalRightBox?: React.ReactNode;
 };
-export declare function Header({ setShowSideBar, companyLogoUrl, account, hasUnreadMessages, setShowMessages, showMenu, showNotifications, additionalRightBox, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ setShowSideBar, companyLogoUrl, account, showMenu, additionalRightBox, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,20 @@
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { Icons as c } from "../../../atoms/icons/icons.js";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { Icons as n } from "../../../atoms/icons/icons.js";
 import "../../../atoms/icons/iconsSVGs/Large/Profile.js";
 import "../../../atoms/icons/iconsSVGs/Small/Profile.js";
-import { styles as m } from "./styles.js";
-function v({
+import { styles as o } from "./styles.js";
+function N({
   setShowSideBar: i,
-  companyLogoUrl: o,
-  account: s,
-  hasUnreadMessages: l = !1,
-  setShowMessages: d,
-  showMenu: n = !0,
-  showNotifications: u = !0,
+  companyLogoUrl: m,
+  account: r,
+  showMenu: c = !0,
   additionalRightBox: t
 }) {
-  const e = m();
-  return /* @__PURE__ */ r("div", { className: e.container, "data-testid": "header", children: [
-    /* @__PURE__ */ r("div", { className: e.menuBox, children: [
-      n && /* @__PURE__ */ a(
-        c,
+  const e = o();
+  return /* @__PURE__ */ s("div", { className: e.container, "data-testid": "header", children: [
+    /* @__PURE__ */ s("div", { className: e.menuBox, children: [
+      c && /* @__PURE__ */ a(
+        n,
         {
           id: "HamburgerMenu",
           icon: "HamburgerMenu",
@@ -25,14 +22,14 @@ function v({
           button: !0
         }
       ),
-      /* @__PURE__ */ a("img", { className: "h-[4rem] w-auto", src: o, alt: "Spotwork" })
+      /* @__PURE__ */ a("img", { className: "h-[4rem] w-auto", src: m, alt: "Spotwork" })
     ] }),
-    (s || t) && /* @__PURE__ */ r("div", { className: e.accContainer, children: [
+    (r || t) && /* @__PURE__ */ s("div", { className: e.accContainer, children: [
       t,
-      s && /* @__PURE__ */ a("div", { className: e.account, children: s })
+      r && /* @__PURE__ */ a("div", { className: e.account, children: r })
     ] })
   ] });
 }
 export {
-  v as Header
+  N as 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,108 @@ 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.0",
+  "version": "1.6.8",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -90,4 +90,4 @@
     "react-spring": "^9.7.3",
     "tailwindcss-animate": "^1.0.7"
   }
-}
+}