@worknice/whiteboard 0.67.3 → 0.68.1

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 (14) hide show
  1. package/dist/presentation/Banner.d.ts +1 -1
  2. package/dist/presentation/Banner.js +1 -0
  3. package/dist/presentation/Banner.module.js +2 -1
  4. package/dist/presentation/Banner_module.css +8 -0
  5. package/dist/presentation/RichList/RichListSkeleton.js +19 -18
  6. package/dist/presentation/RichList/RichListSkeleton.module.js +0 -2
  7. package/dist/presentation/RichList/RichListSkeleton_module.css +0 -23
  8. package/dist/presentation/SkeletonBlock.d.ts +11 -0
  9. package/dist/presentation/SkeletonBlock.js +9 -0
  10. package/dist/presentation/SkeletonBlock.module.js +6 -0
  11. package/dist/presentation/SkeletonBlock.stories.d.ts +30 -0
  12. package/dist/presentation/SkeletonBlock.stories.js +158 -0
  13. package/dist/presentation/SkeletonBlock_module.css +24 -0
  14. package/package.json +2 -2
package/dist/presentation/Banner.d.ts CHANGED
@@ -5,7 +5,7 @@ type Props = {
5
5
  description?: ReactNode;
6
6
  icon?: ReactNode;
7
7
  id?: string;
8
- type?: "regular" | "actionable" | "success" | "error";
8
+ type?: "regular" | "actionable" | "success" | "warning" | "error";
9
9
  };
10
10
  declare const Banner: ({ actions, children, description, icon, id, type }: Props) => import("react/jsx-runtime").JSX.Element;
11
11
  export default Banner;
package/dist/presentation/Banner.js CHANGED
@@ -5,6 +5,7 @@ const Banner = ({ actions, children, description, icon, id, type = "regular" })=
5
5
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])(__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].banner, {
6
6
  [__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].actionable]: "actionable" === type,
7
7
  [__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].success]: "success" === type,
8
+ [__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].warning]: "warning" === type,
8
9
  [__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].error]: "error" === type,
9
10
  [__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].withIcon]: icon,
10
11
  [__WEBPACK_EXTERNAL_MODULE__Banner_module_js_241cd8eb__["default"].withActions]: actions
package/dist/presentation/Banner.module.js CHANGED
@@ -7,6 +7,7 @@ const Banner_module_rslib_entry_ = {
7
7
  description: "description-qH0AZS",
8
8
  actionable: "actionable-hnZ64W",
9
9
  error: "error-Zke0O6",
10
- success: "success-SqgN1d"
10
+ success: "success-SqgN1d",
11
+ warning: "warning-caAH7Y"
11
12
  };
12
13
  export { Banner_module_rslib_entry_ as default };
package/dist/presentation/Banner_module.css CHANGED
@@ -52,3 +52,11 @@
52
52
  color: var(--color-green-000);
53
53
  }
54
54
 
55
+ .warning-caAH7Y {
56
+ background: var(--color-yellow-t09);
57
+ }
58
+
59
+ .warning-caAH7Y .icon-w41JIg {
60
+ color: var(--color-yellow-000);
61
+ }
62
+
package/dist/presentation/RichList/RichListSkeleton.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use client";
2
2
  import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE__utils_customProperties_js_3d9c174d__ from "../../utils/customProperties.js";
4
+ import * as __WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__ from "../SkeletonBlock.js";
4
5
  import * as __WEBPACK_EXTERNAL_MODULE__helpers_js_87289b43__ from "./helpers.js";
5
6
  import * as __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__ from "./RichListSkeleton.module.js";
6
7
  const SKELETON_ROW_COUNT = 12;
@@ -37,8 +38,8 @@ const RichListSkeleton = ({ leadingSlot, mainSlot, contentSlots, trailingSlot, r
37
38
  children: [
38
39
  header ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
39
40
  className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].header,
40
- children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
41
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
41
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
42
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
42
43
  style: {
43
44
  width: 160
44
45
  }
@@ -47,8 +48,8 @@ const RichListSkeleton = ({ leadingSlot, mainSlot, contentSlots, trailingSlot, r
47
48
  hasToolbar ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
48
49
  className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].toolbar,
49
50
  children: [
50
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
51
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
51
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
52
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
52
53
  style: {
53
54
  height: 32,
54
55
  width: 240
@@ -57,15 +58,15 @@ const RichListSkeleton = ({ leadingSlot, mainSlot, contentSlots, trailingSlot, r
57
58
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
58
59
  className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].grow
59
60
  }),
60
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
61
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
61
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
62
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
62
63
  style: {
63
64
  height: 32,
64
65
  width: 84
65
66
  }
66
67
  }),
67
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
68
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
68
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
69
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
69
70
  style: {
70
71
  height: 32,
71
72
  width: 84
@@ -78,14 +79,14 @@ const RichListSkeleton = ({ leadingSlot, mainSlot, contentSlots, trailingSlot, r
78
79
  }, (_, rowIndex)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
79
80
  className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].row,
80
81
  children: [
81
- enableRowSelection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
82
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].checkbox}`
82
+ enableRowSelection ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
83
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].checkbox
83
84
  }) : null,
84
- leadingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
85
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].circle}`
85
+ leadingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
86
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].circle
86
87
  }, slot.id)),
87
- /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
88
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
88
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
89
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
89
90
  style: {
90
91
  width: 200
91
92
  }
@@ -93,14 +94,14 @@ const RichListSkeleton = ({ leadingSlot, mainSlot, contentSlots, trailingSlot, r
93
94
  /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
94
95
  className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].grow
95
96
  }),
96
- visibleContentSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
97
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
97
+ visibleContentSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
98
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
98
99
  style: {
99
100
  width: laneWidth(slot, 120)
100
101
  }
101
102
  }, slot.id)),
102
- trailingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
103
- className: `${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].block} ${__WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line}`,
103
+ trailingSlots.map((slot)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_ce81034c__["default"], {
104
+ className: __WEBPACK_EXTERNAL_MODULE__RichListSkeleton_module_js_905f84d0__["default"].line,
104
105
  style: {
105
106
  width: laneWidth(slot, 140)
106
107
  }
package/dist/presentation/RichList/RichListSkeleton.module.js CHANGED
@@ -5,8 +5,6 @@ const RichListSkeleton_module_rslib_entry_ = {
5
5
  toolbar: "toolbar-C01ajM",
6
6
  row: "row-p9lXk2",
7
7
  grow: "grow-djYGNT",
8
- block: "block-M158Qw",
9
- richListSkeletonPulse: "richListSkeletonPulse-N50lJ4",
10
8
  checkbox: "checkbox-TgI6UA",
11
9
  circle: "circle-Wh22l0",
12
10
  line: "line-SMRPlk"
package/dist/presentation/RichList/RichListSkeleton_module.css CHANGED
@@ -43,13 +43,6 @@
43
43
  min-width: 0;
44
44
  }
45
45
 
46
- .block-M158Qw {
47
- background: var(--color-grey-t09);
48
- border-radius: var(--size-n3);
49
- flex-shrink: 0;
50
- animation: 1.2s ease-in-out infinite richListSkeletonPulse-N50lJ4;
51
- }
52
-
53
46
  .checkbox-TgI6UA {
54
47
  border-radius: var(--size-n4);
55
48
  width: 18px;
@@ -66,19 +59,3 @@
66
59
  height: 16px;
67
60
  }
68
61
 
69
- @keyframes richListSkeletonPulse-N50lJ4 {
70
- 0%, 100% {
71
- opacity: 1;
72
- }
73
-
74
- 50% {
75
- opacity: .4;
76
- }
77
- }
78
-
79
- @media (prefers-reduced-motion: reduce) {
80
- .block-M158Qw {
81
- animation: none;
82
- }
83
- }
84
-
package/dist/presentation/SkeletonBlock.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { CSSProperties } from "react";
2
+ type Props = {
3
+ className?: string;
4
+ style?: CSSProperties;
5
+ };
6
+ /**
7
+ * Animated grey placeholder block used in loading skeletons.
8
+ * Pass `className` to apply size and shape overrides from a local CSS module.
9
+ */
10
+ declare const SkeletonBlock: ({ className, style }: Props) => import("react/jsx-runtime").JSX.Element;
11
+ export default SkeletonBlock;
package/dist/presentation/SkeletonBlock.js ADDED
@@ -0,0 +1,9 @@
1
+ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
+ import * as __WEBPACK_EXTERNAL_MODULE__SkeletonBlock_module_js_047c7549__ from "./SkeletonBlock.module.js";
3
+ const SkeletonBlock = ({ className, style })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
4
+ "aria-hidden": true,
5
+ className: className ? `${__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_module_js_047c7549__["default"].block} ${className}` : __WEBPACK_EXTERNAL_MODULE__SkeletonBlock_module_js_047c7549__["default"].block,
6
+ style: style
7
+ });
8
+ const SkeletonBlock_rslib_entry_ = SkeletonBlock;
9
+ export { SkeletonBlock_rslib_entry_ as default };
package/dist/presentation/SkeletonBlock.module.js ADDED
@@ -0,0 +1,6 @@
1
+ import "./SkeletonBlock_module.css";
2
+ const SkeletonBlock_module_rslib_entry_ = {
3
+ block: "block-HJRYFW",
4
+ skeletonPulse: "skeletonPulse-CWMCjT"
5
+ };
6
+ export { SkeletonBlock_module_rslib_entry_ as default };
package/dist/presentation/SkeletonBlock.stories.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import type { StoryObj } from "@storybook/nextjs-vite";
2
+ declare const meta: {
3
+ component: ({ className, style }: {
4
+ className?: string;
5
+ style?: import("react").CSSProperties;
6
+ }) => import("react/jsx-runtime").JSX.Element;
7
+ parameters: {
8
+ layout: string;
9
+ };
10
+ };
11
+ export default meta;
12
+ type Story = StoryObj<typeof meta>;
13
+ /** Default block — no size set, collapses to zero height until given dimensions. */
14
+ export declare const Default: Story;
15
+ /** Inline dimensions via `style` — the typical usage when size is fixed. */
16
+ export declare const Line: Story;
17
+ /** Taller block representing a heading or large number. */
18
+ export declare const Heading: Story;
19
+ /** Circle shape via `border-radius: 50%` applied through a `className`. */
20
+ export declare const Circle: Story;
21
+ /** Button-sized block — matches a primary action button. */
22
+ export declare const Button: Story;
23
+ /** Icon-only ghost button — square, same height as Button. */
24
+ export declare const IconButton: Story;
25
+ /** A realistic card skeleton: large number + small indicator + label. */
26
+ export declare const CardSkeleton: Story;
27
+ /** A realistic header actions skeleton: primary button + icon-only overflow button. */
28
+ export declare const HeaderActions: Story;
29
+ /** A list row skeleton: avatar circle + text line + trailing line. */
30
+ export declare const ListRow: Story;
package/dist/presentation/SkeletonBlock.stories.js ADDED
@@ -0,0 +1,158 @@
1
+ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
2
+ import * as __WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__ from "./HStack.js";
3
+ import * as __WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__ from "./SkeletonBlock.js";
4
+ import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
5
+ const meta = {
6
+ component: __WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"],
7
+ parameters: {
8
+ layout: "padded"
9
+ }
10
+ };
11
+ const SkeletonBlock_stories_rslib_entry_ = meta;
12
+ const Default = {
13
+ args: {
14
+ style: {
15
+ height: 16,
16
+ width: 200
17
+ }
18
+ }
19
+ };
20
+ const Line = {
21
+ args: {
22
+ style: {
23
+ height: 16,
24
+ width: 160
25
+ }
26
+ }
27
+ };
28
+ const Heading = {
29
+ args: {
30
+ style: {
31
+ height: 28,
32
+ width: 48
33
+ }
34
+ }
35
+ };
36
+ const Circle = {
37
+ args: {
38
+ style: {
39
+ borderRadius: "50%",
40
+ height: 32,
41
+ width: 32
42
+ }
43
+ }
44
+ };
45
+ const Button = {
46
+ args: {
47
+ style: {
48
+ height: 32,
49
+ width: 148
50
+ }
51
+ }
52
+ };
53
+ const IconButton = {
54
+ args: {
55
+ style: {
56
+ height: 32,
57
+ width: 32
58
+ }
59
+ }
60
+ };
61
+ const CardSkeleton = {
62
+ render: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
63
+ style: {
64
+ width: 200
65
+ },
66
+ children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__["default"], {
67
+ spacing: "n3",
68
+ children: [
69
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
70
+ style: {
71
+ height: 28,
72
+ width: 48
73
+ }
74
+ }),
75
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__HStack_js_cc26058d__["default"], {
76
+ spacing: "n2",
77
+ align: "center",
78
+ children: [
79
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
80
+ style: {
81
+ borderRadius: "50%",
82
+ height: 10,
83
+ width: 10
84
+ }
85
+ }),
86
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
87
+ style: {
88
+ height: 14,
89
+ width: 96
90
+ }
91
+ })
92
+ ]
93
+ })
94
+ ]
95
+ })
96
+ })
97
+ };
98
+ const HeaderActions = {
99
+ render: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
100
+ style: {
101
+ display: "flex",
102
+ alignItems: "center",
103
+ gap: "var(--size-n2)"
104
+ },
105
+ children: [
106
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
107
+ style: {
108
+ height: 32,
109
+ width: 148
110
+ }
111
+ }),
112
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
113
+ style: {
114
+ height: 32,
115
+ width: 32
116
+ }
117
+ })
118
+ ]
119
+ })
120
+ };
121
+ const ListRow = {
122
+ render: ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
123
+ style: {
124
+ display: "flex",
125
+ alignItems: "center",
126
+ gap: "var(--size-00)",
127
+ width: 600
128
+ },
129
+ children: [
130
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
131
+ style: {
132
+ borderRadius: "50%",
133
+ flexShrink: 0,
134
+ height: 32,
135
+ width: 32
136
+ }
137
+ }),
138
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
139
+ style: {
140
+ height: 16,
141
+ width: 200
142
+ }
143
+ }),
144
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
145
+ style: {
146
+ flex: "1 1 auto"
147
+ }
148
+ }),
149
+ /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__SkeletonBlock_js_6a7b4b10__["default"], {
150
+ style: {
151
+ height: 16,
152
+ width: 140
153
+ }
154
+ })
155
+ ]
156
+ })
157
+ };
158
+ export { Button, CardSkeleton, Circle, Default, HeaderActions, Heading, IconButton, Line, ListRow, SkeletonBlock_stories_rslib_entry_ as default };
package/dist/presentation/SkeletonBlock_module.css ADDED
@@ -0,0 +1,24 @@
1
+ .block-HJRYFW {
2
+ background: var(--color-grey-t09);
3
+ border-radius: var(--size-n3);
4
+ flex-shrink: 0;
5
+ animation: 1.2s ease-in-out infinite skeletonPulse-CWMCjT;
6
+ display: block;
7
+ }
8
+
9
+ @keyframes skeletonPulse-CWMCjT {
10
+ 0%, 100% {
11
+ opacity: 1;
12
+ }
13
+
14
+ 50% {
15
+ opacity: .4;
16
+ }
17
+ }
18
+
19
+ @media (prefers-reduced-motion: reduce) {
20
+ .block-HJRYFW {
21
+ animation: none;
22
+ }
23
+ }
24
+
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@worknice/whiteboard",
3
3
  "description": "",
4
- "version": "0.67.3",
4
+ "version": "0.68.1",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "files": [
@@ -39,7 +39,7 @@
39
39
  "react-markdown": "^10.1.0",
40
40
  "utf8": "^3.0.0",
41
41
  "zod": "^4.1.13",
42
- "@worknice/utils": "^0.50.3"
42
+ "@worknice/utils": "^0.51.1"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@anolilab/semantic-release-pnpm": "^3.2.2",