@worknice/whiteboard 0.18.4 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/controls/ButtonLink_module.css +1 -1
  2. package/dist/controls/Button_module.css +1 -1
  3. package/dist/controls/LinkCard_module.css +1 -1
  4. package/dist/controls/MenuButton.d.ts +1 -0
  5. package/dist/controls/MenuButton.js +11 -6
  6. package/dist/controls/MenuButton.module.js +2 -1
  7. package/dist/controls/MenuButton_module.css +8 -2
  8. package/dist/controls/PageTabSet.d.ts +2 -1
  9. package/dist/controls/PageTabSet.js +20 -5
  10. package/dist/controls/PageTabSet.module.js +2 -1
  11. package/dist/controls/PageTabSet_module.css +12 -1
  12. package/dist/hud/NavItem.js +11 -14
  13. package/dist/hud/NavItemChild.js +4 -7
  14. package/dist/hud/NavItem_module.css +1 -1
  15. package/dist/hud/NavSection_module.css +1 -1
  16. package/dist/hud/ToolbarButton.js +3 -6
  17. package/dist/inputs/DateInput_module.css +2 -2
  18. package/dist/inputs/DateTimeInput_module.css +1 -1
  19. package/dist/inputs/MarkdownInput_module.css +1 -1
  20. package/dist/inputs/NumberInput_module.css +2 -2
  21. package/dist/inputs/SelectInput_module.css +1 -1
  22. package/dist/inputs/SingleSelectComboboxInput_module.css +1 -1
  23. package/dist/inputs/StringInput_module.css +2 -2
  24. package/dist/inputs/TextInput_module.css +2 -2
  25. package/dist/inputs/TimeInput_module.css +1 -1
  26. package/dist/layouts/FullLayout.js +5 -14
  27. package/dist/layouts/FullLayout.module.js +1 -1
  28. package/dist/layouts/FullLayout_module.css +14 -9
  29. package/dist/presentation/Banner_module.css +1 -1
  30. package/dist/presentation/CardContent.js +1 -1
  31. package/dist/presentation/Card_module.css +2 -2
  32. package/dist/presentation/DefinitionList_module.css +1 -1
  33. package/dist/presentation/Table.js +1 -1
  34. package/dist/presentation/Table_module.css +2 -6
  35. package/dist/shared.css +4 -4
  36. package/package.json +2 -2
package/dist/controls/ButtonLink_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font: var(--font-regular);
6
6
  align-items: center;
7
7
  gap: var(--size-n2);
8
- padding: var(--size-n2) var(--size-00);
8
+ padding: var(--size-n2) var(--size-n1);
9
9
  text-align: center;
10
10
  background: var(--color-white);
11
11
  grid-auto-flow: column;
package/dist/controls/Button_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font: var(--font-regular);
6
6
  align-items: center;
7
7
  gap: var(--size-n2);
8
- padding: var(--size-n2) var(--size-00);
8
+ padding: var(--size-n2) var(--size-n1);
9
9
  text-align: center;
10
10
  background: var(--color-white);
11
11
  grid-auto-flow: column;
package/dist/controls/LinkCard_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  box-shadow: var(--shadow-default);
6
6
  align-items: center;
7
7
  gap: var(--size-00);
8
- padding: var(--size-p1);
8
+ padding: var(--size-00);
9
9
  grid-template-columns: 1fr auto;
10
10
  display: grid;
11
11
  }
package/dist/controls/MenuButton.d.ts CHANGED
@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
2
2
  type Option = {
3
3
  id: string;
4
4
  label: string;
5
+ disabled?: boolean;
5
6
  } & ({
6
7
  onClick: (event: React.MouseEvent | React.KeyboardEvent) => void | Promise<void>;
7
8
  type: "onClick";
package/dist/controls/MenuButton.js CHANGED
@@ -75,8 +75,10 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
75
75
  const renderOption = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((option, index)=>{
76
76
  if ("link" === option.type) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
77
77
  role: "option",
78
+ "aria-disabled": option.disabled,
78
79
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].listItem, {
79
- [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].activeListItem]: activeIndex === index
80
+ [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].active]: activeIndex === index,
81
+ [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].disabled]: option.disabled
80
82
  }),
81
83
  ...getItemProps({
82
84
  ref: (node)=>{
@@ -85,16 +87,22 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
85
87
  }),
86
88
  children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(NextLink, {
87
89
  href: option.href,
90
+ "aria-disabled": option.disabled,
88
91
  children: option.label
89
92
  })
90
93
  }, option.id);
91
94
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("li", {
92
95
  role: "option",
96
+ "aria-disabled": option.disabled,
93
97
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].listItem, {
94
- [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].activeListItem]: activeIndex === index
98
+ [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].active]: activeIndex === index,
99
+ [__WEBPACK_EXTERNAL_MODULE__MenuButton_module_js_872b1a55__["default"].disabled]: option.disabled
95
100
  }),
96
101
  ...getItemProps({
97
- onClick: "onClick" === option.type ? async (event)=>{
102
+ onClick: "onClick" !== option.type || option.disabled ? ()=>{
103
+ setIsOpen(false);
104
+ setOptionToRender(option);
105
+ } : async (event)=>{
98
106
  setIsOpen(false);
99
107
  try {
100
108
  setLoading(true);
@@ -114,9 +122,6 @@ const MenuButton = ({ autoFocus = false, disabled = false, id, options, optionGr
114
122
  ]);
115
123
  }
116
124
  setLoading(false);
117
- } : ()=>{
118
- setIsOpen(false);
119
- setOptionToRender(option);
120
125
  },
121
126
  ref: (node)=>{
122
127
  optionsRef.current[index] = node;
package/dist/controls/MenuButton.module.js CHANGED
@@ -7,6 +7,7 @@ const MenuButton_module_rslib_entry_ = {
7
7
  listBox: "listBox-IanUVy",
8
8
  listItemGroupHeader: "listItemGroupHeader-ijzhOF",
9
9
  listItem: "listItem-PEQEDL",
10
- activeListItem: "activeListItem-iAlKFS"
10
+ active: "active-SH4mjY",
11
+ disabled: "disabled-c63Kbb"
11
12
  };
12
13
  export { MenuButton_module_rslib_entry_ as default };
package/dist/controls/MenuButton_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font: var(--font-regular);
6
6
  align-items: center;
7
7
  gap: var(--size-n2);
8
- padding: var(--size-n2) var(--size-00);
8
+ padding: var(--size-n2) var(--size-n1);
9
9
  text-align: center;
10
10
  background: var(--color-white);
11
11
  grid-auto-flow: column;
@@ -81,7 +81,13 @@
81
81
  cursor: pointer;
82
82
  }
83
83
 
84
- .activeListItem-iAlKFS {
84
+ .listItem-PEQEDL.active-SH4mjY {
85
85
  background: var(--color-grey-t09);
86
86
  }
87
87
 
88
+ .listItem-PEQEDL.disabled-c63Kbb {
89
+ color: var(--theme-disabled);
90
+ cursor: default;
91
+ pointer-events: none;
92
+ }
93
+
package/dist/controls/PageTabSet.d.ts CHANGED
@@ -6,6 +6,7 @@ type Props = {
6
6
  label: ReactNode;
7
7
  key: string;
8
8
  }>;
9
+ variant?: "default" | "steps";
9
10
  };
10
- declare const PageTabSet: ({ id, pages }: Props) => import("react/jsx-runtime").JSX.Element;
11
+ declare const PageTabSet: ({ id, pages, variant }: Props) => import("react/jsx-runtime").JSX.Element;
11
12
  export default PageTabSet;
package/dist/controls/PageTabSet.js CHANGED
@@ -2,25 +2,40 @@
2
2
  import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
4
4
  import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
5
+ import * as __WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__ from "../presentation/Icon.js";
5
6
  import * as __WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__ from "../utils/TrackingContext.js";
6
7
  import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "../utils/useNextContext.js";
7
8
  import * as __WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__ from "./PageTabSet.module.js";
8
- const PageTabSet = ({ id, pages })=>{
9
+ const PageTabSet = ({ id, pages, variant })=>{
9
10
  const { Link, pathname } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
10
11
  const trackingContext = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE__utils_TrackingContext_js_139012da__["default"]);
12
+ const activeIndex = pages.findIndex(({ path })=>pathname === path);
11
13
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("nav", {
12
14
  className: __WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].container,
13
- children: pages.map(({ path, label, key })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
15
+ children: pages.map(({ path, label, key }, index)=>{
16
+ const isActive = pathname === path;
17
+ if ("steps" === variant && index > activeIndex) return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
18
+ className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].button, __WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].disabled),
19
+ children: label
20
+ }, key);
21
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Link, {
14
22
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].button, {
15
- [__WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].active]: pathname === path
23
+ [__WEBPACK_EXTERNAL_MODULE__PageTabSet_module_js_7890aa24__["default"].active]: isActive
16
24
  }),
17
25
  href: path,
18
26
  id: id,
19
27
  onClick: ()=>{
20
28
  if (trackingContext && id) trackingContext.trackClick(id);
21
29
  },
22
- children: label
23
- }, key))
30
+ children: [
31
+ "steps" !== variant || isActive ? null : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__presentation_Icon_js_6961aa57__["default"], {
32
+ tone: "success",
33
+ symbol: "Success"
34
+ }),
35
+ label
36
+ ]
37
+ }, key);
38
+ })
24
39
  });
25
40
  };
26
41
  const PageTabSet_rslib_entry_ = PageTabSet;
package/dist/controls/PageTabSet.module.js CHANGED
@@ -2,6 +2,7 @@ import "./PageTabSet_module.css";
2
2
  const PageTabSet_module_rslib_entry_ = {
3
3
  container: "container-DaRbhF",
4
4
  button: "button-dxmonM",
5
- active: "active-SAbteC"
5
+ active: "active-SAbteC",
6
+ disabled: "disabled-HY2BY9"
6
7
  };
7
8
  export { PageTabSet_module_rslib_entry_ as default };
package/dist/controls/PageTabSet_module.css CHANGED
@@ -10,7 +10,8 @@
10
10
  color: var(--color-grey-t03);
11
11
  cursor: pointer;
12
12
  margin-bottom: calc(var(--size-n5) * -1);
13
- padding: var(--size-n1) 0;
13
+ padding: var(--size-n2) 0;
14
+ column-gap: var(--size-n2);
14
15
  grid-auto-flow: column;
15
16
  display: grid;
16
17
  }
@@ -30,3 +31,13 @@
30
31
  color: var(--color-purple-000);
31
32
  }
32
33
 
34
+ .disabled-HY2BY9 {
35
+ color: var(--color-grey-t05);
36
+ cursor: not-allowed;
37
+ opacity: .6;
38
+ }
39
+
40
+ .disabled-HY2BY9:hover {
41
+ border-bottom-color: #0000;
42
+ }
43
+
package/dist/hud/NavItem.js CHANGED
@@ -5,22 +5,19 @@ import * as __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__ from "
5
5
  import * as __WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__ from "./NavItem.module.js";
6
6
  const NavItem = ({ href, icon, label, badge, active = false })=>{
7
7
  const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
8
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
8
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Link, {
9
9
  href: href,
10
- legacyBehavior: true,
11
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("a", {
12
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].item, {
13
- [__WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].active]: active
10
+ className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].item, {
11
+ [__WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].active]: active
12
+ }),
13
+ children: [
14
+ icon,
15
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
16
+ className: __WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].label,
17
+ children: label
14
18
  }),
15
- children: [
16
- icon,
17
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
18
- className: __WEBPACK_EXTERNAL_MODULE__NavItem_module_js_8915774d__["default"].label,
19
- children: label
20
- }),
21
- badge
22
- ]
23
- })
19
+ badge
20
+ ]
24
21
  });
25
22
  };
26
23
  const NavItem_rslib_entry_ = NavItem;
package/dist/hud/NavItemChild.js CHANGED
@@ -7,13 +7,10 @@ const NavItem = ({ href, label, active = false })=>{
7
7
  const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
8
8
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
9
9
  href: href,
10
- legacyBehavior: true,
11
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
12
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__["default"].item, {
13
- [__WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__["default"].active]: active
14
- }),
15
- children: label
16
- })
10
+ className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__["default"].item, {
11
+ [__WEBPACK_EXTERNAL_MODULE__NavItemChild_module_js_d468614f__["default"].active]: active
12
+ }),
13
+ children: label
17
14
  });
18
15
  };
19
16
  const NavItemChild_rslib_entry_ = NavItem;
package/dist/hud/NavItem_module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .item-BpUNGR {
2
- padding: var(--size-n1);
2
+ padding: var(--size-n2) var(--size-n1);
3
3
  gap: var(--size-n2);
4
4
  border-radius: var(--size-n3);
5
5
  grid-template-columns: max-content 1fr;
package/dist/hud/NavSection_module.css CHANGED
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  .item-wy5vrc {
28
- padding: var(--size-n1);
28
+ padding: var(--size-n2) var(--size-n1);
29
29
  gap: var(--size-n2);
30
30
  border-radius: var(--size-n3);
31
31
  align-items: center;
package/dist/hud/ToolbarButton.js CHANGED
@@ -6,12 +6,9 @@ const ToolbarButton = (props)=>{
6
6
  const { Link } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
7
7
  return "href" in props ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Link, {
8
8
  href: props.href,
9
- legacyBehavior: true,
10
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("a", {
11
- className: __WEBPACK_EXTERNAL_MODULE__ToolbarButton_module_js_4dcbb7a4__["default"].button,
12
- title: props.title,
13
- children: props.children
14
- })
9
+ className: __WEBPACK_EXTERNAL_MODULE__ToolbarButton_module_js_4dcbb7a4__["default"].button,
10
+ title: props.title,
11
+ children: props.children
15
12
  }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
16
13
  className: __WEBPACK_EXTERNAL_MODULE__ToolbarButton_module_js_4dcbb7a4__["default"].button,
17
14
  onClick: props.onClick,
package/dist/inputs/DateInput_module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  border: var(--size-n5) solid var(--color-grey-t08);
8
8
  box-sizing: border-box;
9
9
  color: var(--color-grey-s01);
10
- padding: var(--size-n2) var(--size-00);
10
+ padding: var(--size-n2) var(--size-n1);
11
11
  background: var(--color-white);
12
12
  width: 100%;
13
13
  display: inline-block;
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  .prefix-L5yioE, .suffix-D_3zaS {
43
- padding: var(--size-n1) var(--size-00);
43
+ padding: var(--size-n2) var(--size-n1);
44
44
  background: var(--color-grey-t10);
45
45
  border: var(--size-n5) solid var(--color-grey-t08);
46
46
  white-space: nowrap;
package/dist/inputs/DateTimeInput_module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  border: var(--size-n5) solid var(--color-grey-t08);
4
4
  box-sizing: border-box;
5
5
  color: var(--color-grey-s01);
6
- padding: var(--size-n2) var(--size-00);
6
+ padding: var(--size-n2) var(--size-n1);
7
7
  background: var(--color-white);
8
8
  width: 100%;
9
9
  display: inline-block;
package/dist/inputs/MarkdownInput_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font: var(--font-monospace);
6
6
  min-height: calc(var(--size-p1) * 5);
7
7
  max-height: calc(var(--size-p1) * 25);
8
- padding: var(--size-n1) var(--size-00);
8
+ padding: var(--size-n1);
9
9
  field-sizing: content;
10
10
  width: 100%;
11
11
  }
package/dist/inputs/NumberInput_module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  border-radius: var(--size-n3);
7
7
  border: var(--size-n5) solid var(--color-grey-t08);
8
8
  color: var(--color-grey-s01);
9
- padding: var(--size-n2) var(--size-00);
9
+ padding: var(--size-n2) var(--size-n1);
10
10
  background: var(--color-white);
11
11
  z-index: 1;
12
12
  width: 100%;
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  .prefix-AOTkAo, .suffix-iXpGKW {
42
- padding: var(--size-n1) var(--size-00);
42
+ padding: var(--size-n2) var(--size-n1);
43
43
  background: var(--color-grey-t10);
44
44
  border: var(--size-n5) solid var(--color-grey-t08);
45
45
  white-space: nowrap;
package/dist/inputs/SelectInput_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font: var(--font-regular);
6
6
  align-items: center;
7
7
  gap: var(--size-00);
8
- padding: var(--size-n2) var(--size-00);
8
+ padding: var(--size-n2) var(--size-n1);
9
9
  background: var(--color-white);
10
10
  grid-template-columns: 1fr max-content;
11
11
  width: 100%;
package/dist/inputs/SingleSelectComboboxInput_module.css CHANGED
@@ -5,7 +5,7 @@
5
5
  font: var(--font-regular);
6
6
  align-items: center;
7
7
  gap: var(--size-00);
8
- padding: var(--size-n2) var(--size-00);
8
+ padding: var(--size-n2) var(--size-n1);
9
9
  background: var(--color-white);
10
10
  grid-template-columns: 1fr max-content;
11
11
  width: 100%;
package/dist/inputs/StringInput_module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  border-radius: var(--size-n3);
8
8
  border: var(--size-n5) solid var(--color-grey-t08);
9
9
  color: var(--color-grey-s01);
10
- padding: var(--size-n2) var(--size-00);
10
+ padding: var(--size-n2) var(--size-n1);
11
11
  background: var(--color-white);
12
12
  z-index: 1;
13
13
  width: 100%;
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  .prefix-U2L5Nd, .suffix-mlsco9 {
43
- padding: var(--size-n1) var(--size-00);
43
+ padding: var(--size-n2) var(--size-n1);
44
44
  background: var(--color-grey-t10);
45
45
  border: var(--size-n5) solid var(--color-grey-t08);
46
46
  white-space: nowrap;
package/dist/inputs/TextInput_module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  color: var(--color-grey-s01);
10
10
  height: max-content;
11
11
  min-height: calc(var(--size-p1) * 5);
12
- padding: var(--size-n1) var(--size-00);
12
+ padding: var(--size-n1);
13
13
  width: 100%;
14
14
  }
15
15
 
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  .prefix-WAZmaj, .suffix-MuCxOF {
43
- padding: var(--size-n1) var(--size-00);
43
+ padding: var(--size-n1);
44
44
  background: var(--color-grey-t10);
45
45
  border: var(--size-n5) solid var(--color-grey-t08);
46
46
  white-space: nowrap;
package/dist/inputs/TimeInput_module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  border: var(--size-n5) solid var(--color-grey-t08);
4
4
  box-sizing: border-box;
5
5
  color: var(--color-grey-s01);
6
- padding: var(--size-n1) var(--size-00);
6
+ padding: var(--size-n2) var(--size-n1);
7
7
  background: var(--color-white);
8
8
  width: 100%;
9
9
  display: inline-block;
package/dist/layouts/FullLayout.js CHANGED
@@ -12,6 +12,7 @@ const FullLayout = ({ aside, asidePosition = {
12
12
  mobile: "asideFirst"
13
13
  }, backLink, navigation, brandTypeface, children, header, mainNavChildren, menuState, navTitle, setMenuState, summary, toolbarChildren, layoutType })=>{
14
14
  const { router } = (0, __WEBPACK_EXTERNAL_MODULE__utils_useNextContext_js_47529181__["default"])();
15
+ const toggleRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
15
16
  (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
16
17
  if (!router) return;
17
18
  const routeChangeStart = ()=>{
@@ -31,8 +32,9 @@ const FullLayout = ({ aside, asidePosition = {
31
32
  setMenuState
32
33
  ]);
33
34
  (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
34
- const documentClick = ()=>{
35
- if (window.innerWidth < 1440) setMenuState("closed");
35
+ const documentClick = (event)=>{
36
+ const target = event.target;
37
+ if (!(toggleRef.current && toggleRef.current.contains(target)) && window.innerWidth < 1440) setMenuState("closed");
36
38
  };
37
39
  document.addEventListener("click", documentClick);
38
40
  return ()=>{
@@ -52,13 +54,8 @@ const FullLayout = ({ aside, asidePosition = {
52
54
  mainNavChildren ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
53
55
  children: [
54
56
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
57
+ ref: toggleRef,
55
58
  className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toggle,
56
- onMouseDown: (event)=>{
57
- event.stopPropagation();
58
- },
59
- onClick: (event)=>{
60
- event.stopPropagation();
61
- },
62
59
  children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__hud_ToolbarButton_js_e9a8b3bc__["default"], {
63
60
  onClick: ()=>{
64
61
  setMenuState((current)=>"open" === current ? "closed" : "open");
@@ -73,12 +70,6 @@ const FullLayout = ({ aside, asidePosition = {
73
70
  }) : null,
74
71
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("nav", {
75
72
  className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].nav,
76
- onMouseDown: (event)=>{
77
- event.stopPropagation();
78
- },
79
- onClick: (event)=>{
80
- event.stopPropagation();
81
- },
82
73
  children: [
83
74
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
84
75
  className: __WEBPACK_EXTERNAL_MODULE__FullLayout_module_js_d92e323f__["default"].toolbar,
package/dist/layouts/FullLayout.module.js CHANGED
@@ -12,8 +12,8 @@ const FullLayout_module_rslib_entry_ = {
12
12
  header: "header-BPDFUI",
13
13
  summary: "summary-yyotr2",
14
14
  navigation: "navigation-gPurN4",
15
- contentAsideLastDesktop: "contentAsideLastDesktop-UbaA5j",
16
15
  aside: "aside-RCJO2s",
16
+ contentAsideLastDesktop: "contentAsideLastDesktop-UbaA5j",
17
17
  contentAsideLastMobile: "contentAsideLastMobile-nY6jcb",
18
18
  main: "main-bb8i9x",
19
19
  full: "full-BIhVlq",
package/dist/layouts/FullLayout_module.css CHANGED
@@ -165,6 +165,12 @@
165
165
  overflow: auto hidden;
166
166
  }
167
167
 
168
+ .aside-RCJO2s {
169
+ gap: var(--size-p1);
170
+ align-content: start;
171
+ display: grid;
172
+ }
173
+
168
174
  @media (min-width: 1024px) {
169
175
  .contentAsideLastDesktop-UbaA5j .aside-RCJO2s {
170
176
  order: 1;
@@ -177,10 +183,14 @@
177
183
  }
178
184
  }
179
185
 
186
+ .main-bb8i9x {
187
+ gap: var(--size-p1);
188
+ align-content: start;
189
+ display: grid;
190
+ }
191
+
180
192
  .main-bb8i9x.full-BIhVlq {
181
- gap: var(--size-p3);
182
193
  grid-column: 1 / -1;
183
- display: grid;
184
194
  }
185
195
 
186
196
  .centerLayoutContent-OXDuxB {
@@ -223,12 +233,12 @@
223
233
  }
224
234
 
225
235
  .content-kaxfp0 {
226
- column-gap: var(--size-p2);
227
236
  padding-top: 60px;
228
237
  padding-bottom: var(--size-00);
229
238
  padding-left: var(--size-00);
230
239
  padding-right: var(--size-00);
231
- row-gap: var(--size-p2);
240
+ column-gap: var(--size-p1);
241
+ row-gap: var(--size-p1);
232
242
  display: grid;
233
243
  }
234
244
 
@@ -239,11 +249,6 @@
239
249
  }
240
250
 
241
251
  @media (min-width: 1024px) {
242
- .content-kaxfp0 {
243
- column-gap: var(--size-p3);
244
- row-gap: var(--size-p3);
245
- }
246
-
247
252
  .contentAsideFirstDesktop-bKnZtC {
248
253
  grid-template-columns: calc(var(--size-p6) * 5) 1fr;
249
254
  }
package/dist/presentation/Banner_module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  border-radius: var(--size-n2);
4
4
  align-items: center;
5
5
  gap: var(--size-n1);
6
- padding: var(--size-p2);
6
+ padding: var(--size-00);
7
7
  grid-template-columns: 1fr;
8
8
  display: grid;
9
9
  }
package/dist/presentation/CardContent.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
2
  import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__ from "../utils/customProperties.js";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE__CardContent_module_js_4e062b3e__ from "./CardContent.module.js";
4
- const CardContent = ({ children, spacing = "p2" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
4
+ const CardContent = ({ children, spacing = "00" })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
5
5
  className: __WEBPACK_EXTERNAL_MODULE__CardContent_module_js_4e062b3e__["default"].container,
6
6
  style: (0, __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_aeb40bdf__["default"])({
7
7
  "--spacing": `var(--size-${spacing})`
package/dist/presentation/Card_module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .header-jj9FGo {
12
- padding: var(--size-00) var(--size-p2);
12
+ padding: var(--size-00);
13
13
  border-bottom: var(--size-n5) solid var(--color-grey-t08);
14
14
  gap: var(--size-00);
15
15
  grid-template-columns: 1fr auto;
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .footer-sVxS5P {
37
- padding: var(--size-00) var(--size-p2);
37
+ padding: var(--size-00);
38
38
  border-top: var(--size-n5) solid var(--color-grey-t08);
39
39
  }
40
40
 
package/dist/presentation/DefinitionList_module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .definitionList-vn9WY4 {
2
- gap: var(--size-00);
2
+ gap: var(--size-n1);
3
3
  grid-template-columns: 1fr 2fr;
4
4
  display: grid;
5
5
  }
package/dist/presentation/Table.js CHANGED
@@ -290,7 +290,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
290
290
  })
291
291
  }) : null,
292
292
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
293
- spacing: "p2",
293
+ spacing: "p1",
294
294
  children: [
295
295
  0 !== globalFilterableColumns.length || 0 !== filterableColumns.length || 0 !== groupableColumns.length ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
296
296
  className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].filterBar,
package/dist/presentation/Table_module.css CHANGED
@@ -21,8 +21,10 @@
21
21
  }
22
22
 
23
23
  .tableRow-WBOT_M {
24
+ gap: var(--size-00);
24
25
  border-top: solid var(--size-n5) var(--color-grey-t08);
25
26
  width: 100%;
27
+ padding: var(--size-00);
26
28
  display: flex;
27
29
  }
28
30
 
@@ -35,8 +37,6 @@
35
37
  }
36
38
 
37
39
  .tableCell-B0pcRW {
38
- padding: var(--size-00);
39
- border-right: solid var(--size-n5) var(--color-grey-t08);
40
40
  vertical-align: middle;
41
41
  flex-shrink: 0;
42
42
  flex-basis: auto;
@@ -44,10 +44,6 @@
44
44
  display: grid;
45
45
  }
46
46
 
47
- .tableCell-B0pcRW:last-child {
48
- border-right: none;
49
- }
50
-
51
47
  .sortableTableHeader-J_3yN2 {
52
48
  gap: var(--size-n2);
53
49
  grid-template-columns: auto max-content;
package/dist/shared.css CHANGED
@@ -94,10 +94,10 @@ body {
94
94
  --font-tiny-italic: italic 400 10px / var(--size-00) var(--typeface-system);
95
95
  --font-tiny-bold-italic: italic 700 10px / var(--size-00) var(--typeface-system);
96
96
  --font-monospace: normal 400 14px / var(--size-p1) var(--typeface-monospace);
97
- --font-h1: normal 600 34px / 150% var(--typeface-brand);
98
- --font-h2: normal 600 30px / 150% var(--typeface-brand);
99
- --font-h3: normal 600 26px / 150% var(--typeface-brand);
100
- --font-h4: normal 600 22px / 150% var(--typeface-brand);
97
+ --font-h1: normal 600 26px / 150% var(--typeface-brand);
98
+ --font-h2: normal 600 24px / 150% var(--typeface-brand);
99
+ --font-h3: normal 600 22px / 150% var(--typeface-brand);
100
+ --font-h4: normal 600 20px / 150% var(--typeface-brand);
101
101
  --font-h5: normal 600 18px / 150% var(--typeface-brand);
102
102
  --font-h6: normal 600 16px / 150% var(--typeface-brand);
103
103
  --color-black: #000;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@worknice/whiteboard",
3
3
  "description": "",
4
- "version": "0.18.4",
4
+ "version": "0.19.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "files": [
@@ -38,7 +38,7 @@
38
38
  "react-markdown": "^10.1.0",
39
39
  "utf8": "^3.0.0",
40
40
  "zod": "^3.22.3",
41
- "@worknice/utils": "^0.6.70"
41
+ "@worknice/utils": "^0.6.72"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@anolilab/semantic-release-pnpm": "^1.1.10",