@datalayer/primer-addons 0.3.0 → 0.3.1

package/lib/components/card/Card.d.ts

@@ -8,7 +8,7 @@ export type CardProps = Omit<BoxProps, 'border'> & {
 export type CardHeaderProps = {
     title?: string;
     description?: string;
-    leadingIcon?: React.ElementType;
+    leadingVisual?: React.ElementType;
     action?: React.ReactNode;
 };
 export type CardImageProps = {

package/lib/components/card/Card.js

@@ -34,8 +34,8 @@ export const Card = (props) => {
         }, ...otherProps, children: children }));
 };
 Card.Header = (props) => {
-    const { title, description, leadingIcon, action } = props;
-    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingIcon && _jsx(Box, { sx: { mr: 3 }, children: _jsx(Octicon, { size: "medium", icon: leadingIcon }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
+    const { title, description, leadingVisual, action } = props;
+    return _jsxs(Box, { display: "flex", alignItems: "center", sx: { p: 3 }, children: [leadingVisual && _jsx(Box, { sx: { mr: 3 }, children: _jsx(Octicon, { size: "medium", icon: leadingVisual }) }), _jsxs(Box, { sx: { flexGrow: 1 }, children: [_jsx(Text, { display: "block", children: title }), _jsx(Text, { display: "block", color: "fg.muted", children: description })] }), action && _jsx(Box, { children: action })] });
 };
 Card.Image = ({ url, image, svg, height }) => {
     return (_jsxs(Box, { display: "block", width: "100%", height: `${height}px`, backgroundImage: `url(${url})`, sx: {

package/lib/components/card/stories/Card.stories.js

@@ -23,7 +23,7 @@ export const CardDay = {
         border: true,
         sx: { maxWidth: 360 }
     },
-    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "day", children: [_jsx(Card.Header, { leadingIcon: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, url: "https://images.unsplash.com/photo-1623961990059-28356e226a77?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=douglas-lopez-4B0cLMtJxWw-unsplash.jpg&w=640" }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
+    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "day", children: [_jsx(Card.Header, { leadingVisual: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, url: "https://images.unsplash.com/photo-1623961990059-28356e226a77?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=douglas-lopez-4B0cLMtJxWw-unsplash.jpg&w=640" }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
 };
 const SVG = `
 <svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
@@ -38,7 +38,7 @@ export const CardDaySvg = {
         border: true,
         sx: { maxWidth: 360 }
     },
-    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "day", children: [_jsx(Card.Header, { leadingIcon: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, svg: SVG }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
+    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "day", children: [_jsx(Card.Header, { leadingVisual: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, svg: SVG }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
 };
 export const CardNight = {
     args: {
@@ -47,5 +47,5 @@ export const CardNight = {
         border: true,
         sx: { maxWidth: 360 }
     },
-    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "night", children: [_jsx(Card.Header, { leadingIcon: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, url: "https://images.unsplash.com/photo-1623961990059-28356e226a77?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=douglas-lopez-4B0cLMtJxWw-unsplash.jpg&w=640" }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
+    render: (args) => _jsxs(ThemedCard, { ...args, colorMode: "night", children: [_jsx(Card.Header, { leadingVisual: ProjectIcon, title: "Shrimp and Chorizo Paella", description: "September 14, 2016", action: _jsx(IconButton, { "aria-label": "Menu", onClick: () => alert("Menu"), icon: ThreeBarsIcon }) }), _jsx(Card.Image, { height: 200, url: "https://images.unsplash.com/photo-1623961990059-28356e226a77?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&dl=douglas-lopez-4B0cLMtJxWw-unsplash.jpg&w=640" }), _jsxs(Card.Content, { children: [_jsx(Text, { display: "block", fontSize: 22, children: "Paella" }), _jsx(Text, { color: "fg.muted", children: "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like." })] }), _jsx(Card.Actions, { children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'invisible', onClick: () => alert("Share it on Socials!"), children: "Share" }), _jsx(Button, { variant: 'invisible', onClick: () => alert("Learn more about Paella"), children: "Learn More" })] }) })] })
 };

package/lib/components/closeable-flash/CloseableFlash.d.ts

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { FlashProps } from "@primer/react";
 export type CloseableFlashProps = FlashProps & {
-    leadingIcon?: React.ElementType;
+    leadingVisual?: React.ElementType;
     onClose?: () => void;
 };
 export declare const CloseableFlash: FC<CloseableFlashProps>;

package/lib/components/closeable-flash/CloseableFlash.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { Box, Flash, Octicon, Text } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";
 export const CloseableFlash = (props) => {
-    const { leadingIcon, variant, onClose, ...otherProps } = props;
+    const { leadingVisual, variant, onClose, ...otherProps } = props;
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
         if (onClose) {
@@ -14,5 +14,5 @@ export const CloseableFlash = (props) => {
     if (!isVisible) {
         return null;
     }
-    return (_jsx(Flash, { variant: variant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingIcon && _jsx(Octicon, { icon: leadingIcon }), _jsx(Text, { color: `${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`, children: props.children })] }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
+    return (_jsx(Flash, { variant: variant, ...otherProps, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Box, { sx: { flexGrow: 1 }, children: [leadingVisual && _jsx(Octicon, { icon: leadingVisual }), _jsx(Text, { color: `${variant === "default" ? "accent" : (variant === "warning" ? "attention" : variant)}.fg`, children: props.children })] }), _jsx(Box, { onClick: handleClose, sx: { cursor: "pointer" }, children: _jsx(XIcon, { size: 20 }) })] }) }));
 };

package/lib/components/closeable-flash/stories/CloseableFlash.stories.js

@@ -19,7 +19,7 @@ const ThemedCloseableFlash = (props) => {
 export const CloseableFlashDay = {
     args: {
         variant: "success",
-        leadingIcon: CheckIcon,
+        leadingVisual: CheckIcon,
         onClose: () => window.alert("closed")
     },
     render: (args) => _jsx(ThemedCloseableFlash, { ...args, colorMode: "day", children: "Success Flash" })
@@ -27,7 +27,7 @@ export const CloseableFlashDay = {
 export const CloseableFlashNight = {
     args: {
         variant: "success",
-        leadingIcon: CheckIcon,
+        leadingVisual: CheckIcon,
         onClose: () => window.alert("closed")
     },
     render: (args) => _jsx(ThemedCloseableFlash, { ...args, colorMode: "night", children: "Success Flash" })

package/lib/components/overlay/Overlay.d.ts

@@ -1,12 +1,16 @@
 /// <reference types="react" />
 export interface OverlayProps {
+    closeButtonRef?: React.RefObject<HTMLButtonElement>;
+    content: JSX.Element;
     direction: 'left' | 'right';
+    headingRef?: React.RefObject<HTMLHeadingElement>;
     isOpen?: boolean;
+    openButtonRef?: React.RefObject<HTMLButtonElement>;
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-    content: JSX.Element;
-    buttonRef?: React.RefObject<HTMLButtonElement>;
-    confirmButtonRef?: React.RefObject<HTMLButtonElement>;
-    headingRef?: React.RefObject<HTMLHeadingElement>;
+    width: number | string;
 }
-export declare const Overlay: (props: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Overlay: {
+    (props: OverlayProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: Partial<OverlayProps>;
+};
 export default Overlay;

package/lib/components/overlay/Overlay.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, Overlay as PrimerOverlay, Box } from "@primer/react";
+import { Box, IconButton, Overlay as PrimerOverlay } from "@primer/react";
+import { XIcon } from "@primer/octicons-react";
 const PrimerAddonOverlay = (props) => {
-    const { content, buttonRef, confirmButtonRef, headingRef, isOpen, setIsOpen } = props;
+    const { closeButtonRef, content, headingRef, isOpen, openButtonRef, setIsOpen, width, } = props;
     const [direction, _] = useState(props.direction);
     const [top, setTop] = useState(0);
     useEffect(() => {
         setTop(headingRef?.current?.getBoundingClientRect().bottom ?? 0);
     }, [headingRef]);
     const closeOverlay = () => setIsOpen(false);
-    return (confirmButtonRef && buttonRef ?
+    return (closeButtonRef && openButtonRef ?
         _jsx(_Fragment, { children: isOpen ?
                 direction === 'left' ?
-                    _jsx(PrimerOverlay, { initialFocusRef: confirmButtonRef, returnFocusRef: buttonRef, ignoreClickRefs: [buttonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: "inside-right", top: top, children: _jsxs(Box, { sx: {
+                    _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: "inside-right", top: top, children: _jsxs(Box, { sx: {
                                 /* We need to remove the padding */
                                 height: `calc(100vh - ${top}px - 8px)`,
-                                width: '500px',
+                                width,
                                 display: 'flex',
                                 flexDirection: 'column',
                                 alignItems: 'center',
@@ -24,12 +25,12 @@ const PrimerAddonOverlay = (props) => {
                                         display: 'flex',
                                         justifyContent: 'right',
                                         width: '100%'
-                                    }, children: _jsx(Button, { ref: confirmButtonRef, onClick: closeOverlay, children: "Close me" }) }), content] }) })
+                                    }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) })
                     :
-                        _jsx(PrimerOverlay, { initialFocusRef: confirmButtonRef, returnFocusRef: buttonRef, ignoreClickRefs: [buttonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: 'inside-left', right: 0, position: "fixed", top: top, children: _jsxs(Box, { sx: {
+                        _jsx(PrimerOverlay, { initialFocusRef: closeButtonRef, returnFocusRef: openButtonRef, ignoreClickRefs: [openButtonRef], onEscape: closeOverlay, onClickOutside: closeOverlay, width: "auto", anchorSide: 'inside-left', right: 0, position: "fixed", top: top, children: _jsxs(Box, { sx: {
                                     /* We need to remove the padding */
                                     height: `calc(100vh - ${top}px - 8px)`,
-                                    width: '500px',
+                                    width,
                                     display: 'flex',
                                     flexDirection: 'column',
                                     alignItems: 'center',
@@ -38,7 +39,7 @@ const PrimerAddonOverlay = (props) => {
                                             display: 'flex',
                                             justifyContent: 'right',
                                             width: '100%'
-                                        }, children: _jsx(Button, { ref: confirmButtonRef, onClick: closeOverlay, children: "Close me" }) }), content] }) })
+                                        }, children: _jsx(IconButton, { variant: 'invisible', ref: closeButtonRef, onClick: closeOverlay, icon: XIcon, "aria-labelledby": "close" }) }), content] }) })
                 : _jsx(_Fragment, {}) })
         :
             _jsx(_Fragment, {}));
@@ -46,4 +47,7 @@ const PrimerAddonOverlay = (props) => {
 export const Overlay = (props) => {
     return (_jsx(PrimerAddonOverlay, { ...props }));
 };
+Overlay.defaultProps = {
+    width: '500px',
+};
 export default Overlay;

package/lib/components/overlay/stories/Overlay.stories.d.ts

@@ -2,7 +2,10 @@ import type { StoryObj } from '@storybook/react';
 import { OverlayProps } from './../Overlay';
 declare const meta: {
     title: string;
-    component: (props: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+    component: {
+        (props: OverlayProps): import("react/jsx-runtime").JSX.Element;
+        defaultProps: Partial<OverlayProps>;
+    };
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/overlay/stories/Overlay.stories.js

@@ -15,38 +15,42 @@ const meta = {
 export default meta;
 const ThemedOverlay = (props) => {
     const [isOpen, setIsOpen] = useState(false);
-    const buttonRef = useRef(null);
-    const confirmButtonRef = useRef(null);
+    const openButtonRef = useRef(null);
+    const closeButtonRef = useRef(null);
     const headingRef = useRef(null);
-    return (_jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: buttonRef, onClick: () => {
+    return (_jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => {
                                         setIsOpen(!isOpen);
-                                    }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, buttonRef: buttonRef, confirmButtonRef: confirmButtonRef, headingRef: props.direction === 'left' ? headingRef : undefined })] })] }) }) }) }));
+                                    }, children: "Open overlay" }), _jsx(Overlay, { ...props, isOpen: isOpen, setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef, headingRef: props.direction === 'left' ? headingRef : undefined })] })] }) }) }) }));
 };
 export const OverlayDayLeft = {
     args: {
-        direction: "left",
         content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
+        direction: "left",
+        width: '500px',
     },
     render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
 };
 export const OverlayDayRight = {
     args: {
-        direction: "right",
         content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
+        direction: "right",
+        width: '500px',
     },
     render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "day" })
 };
 export const OverlayNightLeft = {
     args: {
-        direction: "left",
         content: _jsx(Text, { children: "\uD83D\uDC48 Look, left aligned, no heading." }),
+        direction: "left",
+        width: '300px',
     },
     render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
 };
 export const OverlayNightRight = {
     args: {
+        content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" }),
         direction: "right",
-        content: _jsx(Text, { children: "Look, right aligned, on heading \uD83D\uDC49" })
+        width: '300px',
     },
     render: (args) => _jsx(ThemedOverlay, { ...args, colorMode: "night" })
 };

package/lib/index.d.ts

@@ -4,4 +4,3 @@ export * from "./components/closeable-flash/CloseableFlash";
 export * from "./components/icons/CircleIcon";
 export * from "./components/overlay/Overlay";
 export * from "./components/slider/Slider";
-export * from "./components/toolbar/Toolbar";

package/lib/index.js

@@ -4,4 +4,3 @@ export * from "./components/closeable-flash/CloseableFlash";
 export * from "./components/icons/CircleIcon";
 export * from "./components/overlay/Overlay";
 export * from "./components/slider/Slider";
-export * from "./components/toolbar/Toolbar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
@@ -23,35 +23,35 @@
   },
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
-    "@datalayer/icons-react": "0.3.0",
-    "@primer/octicons-react": "19.6.0",
-    "@primer/react": "36.6.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-loading-skeleton": "3.3.1",
-    "styled-components": "5.3.10"
+    "@datalayer/icons-react": "^0.3.2",
+    "@primer/octicons-react": "^19.6.0",
+    "@primer/primitives": "^8.2.3",
+    "@primer/react": "^36.25.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-loading-skeleton": "^3.3.1",
+    "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-links": "^7.0.9",
-    "@storybook/blocks": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-vite": "^7.0.9",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "4.2.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.9",
+    "storybook": "^8.0.10",
     "typescript": "^5.0.2",
-    "vite": "^4.3.2"
-  },
-  "packageManager": "yarn@3.5.0"
+    "vite": "^5.2.7"
+  }
 }

package/lib/components/toolbar/Toolbar.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-export interface ToolbarProps {
-    align?: "center" | "flex-start" | "flex-end" | "space-evenly" | "space-around" | "space-between";
-    gap?: string;
-    height?: string;
-    padding?: string;
-    heading?: React.ReactNode;
-    backgroundColor?: string;
-    borderBottomHeight?: number;
-    borderBottomColor?: string;
-    border?: boolean;
-    children: React.ReactNode | React.ReactNode[];
-}
-export declare const Toolbar: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
-export default Toolbar;

package/lib/components/toolbar/Toolbar.js

@@ -1,16 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from "@primer/react";
-export const Toolbar = ({ align = "flex-start", height = "5vh", gap = "0.1rem", padding, heading, backgroundColor, borderBottomHeight = 1, borderBottomColor, border = false, children, }) => {
-    return (_jsxs(Box, { display: "flex", alignItems: "center", sx: {
-            backgroundColor: backgroundColor ? backgroundColor : "pageHeaderBg",
-            height: height,
-            width: "100%",
-            padding: padding,
-            borderBottomWidth: borderBottomHeight,
-            borderBottomStyle: border ? "solid" : "none",
-            borderColor: borderBottomColor ? borderBottomColor : "border.default",
-        }, children: [_jsx(Box, { display: "flex", children: heading != null && heading != undefined ? heading : _jsx(_Fragment, {}) }), _jsx(Box, { display: "flex", flexGrow: 1, alignItems: "center", justifyContent: align, sx: {
-                    gap: gap,
-                }, children: children })] }));
-};
-export default Toolbar;

package/lib/components/toolbar/stories/Toolbar.stories.d.ts

@@ -1,14 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { ToolbarProps } from '../../../index';
-declare const meta: {
-    title: string;
-    component: ({ align, height, gap, padding, heading, backgroundColor, borderBottomHeight, borderBottomColor, border, children, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const ToolbarDay: Story;
-export declare const ToolbarNight: Story;

package/lib/components/toolbar/stories/Toolbar.stories.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ThemeProvider, BaseStyles, Box, Text, IconButton, } from "@primer/react";
-import { SearchIcon, ThreeBarsIcon, GearIcon } from "@primer/octicons-react";
-import { Toolbar } from '../../../index';
-const meta = {
-    title: 'Components/Toolbar',
-    component: Toolbar,
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-    tags: ['autodocs'],
-    parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
-        layout: 'fullscreen',
-    },
-};
-export default meta;
-const ThemedToolbar = (props) => _jsx(ThemeProvider, { colorMode: props.colorMode, children: _jsx(BaseStyles, { children: _jsxs(Toolbar, { ...props, heading: _jsxs(Box, { display: "flex", alignItems: "center", sx: { gap: "0.5rem" }, children: [_jsx(IconButton, { "aria-label": "Search", icon: ThreeBarsIcon, size: "small", variant: "invisible" }), _jsx(Text, { children: "Datalayer Toolbar" })] }), children: [_jsx(IconButton, { "aria-label": "Search", icon: SearchIcon, size: "small" }), _jsx(Text, { children: "Action1" }), _jsx(Text, { children: "Action2" }), _jsx(Text, { children: "Action3" }), _jsx(IconButton, { "aria-label": "Search", icon: GearIcon, size: "small", variant: "invisible" })] }) }) });
-export const ToolbarDay = {
-    args: {
-        align: "flex-end",
-        border: true,
-        gap: "1rem",
-        padding: "0 1rem",
-        children: [],
-    },
-    render: (args) => _jsx(ThemedToolbar, { ...args, colorMode: "day" })
-};
-export const ToolbarNight = {
-    args: {
-        align: "flex-end",
-        border: true,
-        gap: "1rem",
-        padding: "0 1rem",
-        children: [],
-    },
-    render: (args) => _jsx(ThemedToolbar, { ...args, colorMode: "night" })
-};