@powerhousedao/design-system 1.30.6 → 1.31.0

package/dist/scripts/create-icon-components.js

@@ -0,0 +1,68 @@
+import prettier from "@prettier/sync";
+import camelCase from "camelcase";
+import { execSync } from "node:child_process";
+import { existsSync, mkdirSync, readdir, readFileSync, writeFileSync, } from "node:fs";
+import { join } from "node:path";
+const iconsDir = join("public/icons");
+const outputDirPath = join("src/powerhouse/components/icon-components");
+const toPascalCase = (filename) => {
+    return camelCase(filename.replace(".svg", ""), { pascalCase: true });
+};
+// Check if there are changes in the icons directory
+const hasChanges = () => {
+    try {
+        const output = execSync(`git status --porcelain ${iconsDir}`).toString();
+        return output.trim().length > 0;
+    }
+    catch (error) {
+        console.error("Error checking git status:", error);
+        return false;
+    }
+};
+if (!hasChanges()) {
+    console.log("No changes detected in the icons directory. Skipping generation.");
+    process.exit(0);
+}
+if (!existsSync(outputDirPath)) {
+    mkdirSync(outputDirPath);
+}
+readdir(iconsDir, (err, files) => {
+    if (err) {
+        console.error("Error reading the icons directory:", err);
+        return;
+    }
+    const svgFiles = files.filter((file) => file.endsWith(".svg"));
+    if (svgFiles.length === 0) {
+        console.log("No SVG files found in the icons directory.");
+        return;
+    }
+    const iconNames = [];
+    svgFiles.forEach((file) => {
+        const filePath = join(iconsDir, file);
+        const componentName = toPascalCase(file);
+        const svgData = readFileSync(filePath, "utf8");
+        const svgDataWithProps = svgData
+            .replace("<svg", "<svg {...props}")
+            .replace(/([a-z-]+)="([^"]*)"/g, (_, attrName, attrValue) => {
+            return `${camelCase(attrName)}="${attrValue}"`;
+        });
+        let iconContent = 'import type { Props } from "./types.js";\n';
+        iconContent += `export default function ${componentName}(props: Props) {\n`;
+        iconContent += `  return (\n${svgDataWithProps}\n  );\n`;
+        iconContent += `}\n\n`;
+        const formattedIconContent = prettier.format(iconContent, {
+            parser: "typescript",
+        });
+        writeFileSync(join(outputDirPath, `${componentName}.tsx`), formattedIconContent, "utf8");
+        iconNames.push(componentName);
+    });
+    let typesContent = "import type { ComponentPropsWithoutRef } from 'react';\n\n";
+    typesContent += "export type Props = ComponentPropsWithoutRef<'svg'>;\n\n";
+    typesContent += `export const iconNames = ${JSON.stringify(iconNames, null, 2)} as const;\n\n`;
+    typesContent += `export type IconName = (typeof iconNames)[number];\n`;
+    const formattedTypesContent = prettier.format(typesContent, {
+        parser: "typescript",
+    });
+    writeFileSync(join(outputDirPath, "types.ts"), formattedTypesContent);
+    console.log(`Generated icon components at: ${outputDirPath}`);
+});

package/dist/setupTests.d.ts

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom";
+//# sourceMappingURL=setupTests.d.ts.map

package/dist/setupTests.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.d.ts","sourceRoot":"","sources":["../setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/src/connect/components/animated-loader/animated-loader.d.ts

@@ -1,5 +1,5 @@
-import { Size } from "@/powerhouse";
-import { ComponentPropsWithoutRef } from "react";
+import { type Size } from "#powerhouse";
+import { type ComponentPropsWithoutRef } from "react";
 type Props = ComponentPropsWithoutRef<"video"> & {
     readonly size?: Size;
 };

package/dist/src/connect/components/animated-loader/animated-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animated-loader.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/animated-loader/animated-loader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,IAAI,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,wBAAwB,EAAiB,MAAM,OAAO,CAAC;AAEhE,KAAK,KAAK,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC/C,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;CACtB,CAAC;AACF,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,2CA6B1C"}
+{"version":3,"file":"animated-loader.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/animated-loader/animated-loader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,IAAI,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,KAAK,wBAAwB,EAAsB,MAAM,OAAO,CAAC;AAE1E,KAAK,KAAK,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC/C,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;CACtB,CAAC;AACF,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,2CA6B1C"}

package/dist/src/connect/components/animated-loader/animated-loader.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ConnectLoaderVideo from "#assets/connect-loader.mp4";
+import { getDimensions } from "#powerhouse";
+export function AnimatedLoader(props) {
+    const { style, size = 100, ...delegatedProps } = props;
+    const dimensions = getDimensions(size);
+    const _style = {
+        objectFit: "contain",
+        pointerEvents: "none",
+        ...dimensions,
+        ...style,
+    };
+    const width = dimensions.width?.replace("px", "");
+    const height = dimensions.height?.replace("px", "");
+    return (_jsx("video", { autoPlay: true, height: height, loop: true, muted: true, playsInline: true, width: width, ...delegatedProps, style: _style, children: _jsx("source", { src: ConnectLoaderVideo, type: "video/mp4" }) }));
+}

package/dist/src/connect/components/animated-loader/animated-loader.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/src/connect/components/animated-loader/animated-loader.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animated-loader.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/animated-loader/animated-loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}
+{"version":3,"file":"animated-loader.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/animated-loader/animated-loader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAIlB,CAAC"}

package/dist/src/connect/components/animated-loader/animated-loader.stories.js

@@ -0,0 +1,17 @@
+import { AnimatedLoader } from "./animated-loader.js";
+const meta = {
+    title: "Connect/Components/Animated Loader",
+    component: AnimatedLoader,
+};
+export default meta;
+export const Default = {};
+export const Small = {
+    args: {
+        size: 50,
+    },
+};
+export const Tiny = {
+    args: {
+        size: 10,
+    },
+};

package/dist/src/connect/components/animated-loader/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./animated-loader";
+export * from "./animated-loader.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/connect/components/animated-loader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/animated-loader/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/animated-loader/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/src/connect/components/animated-loader/index.js

@@ -0,0 +1 @@
+export * from "./animated-loader.js";

package/dist/src/connect/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeInput } from "#connect";
+import { Icon } from "#powerhouse";
+import { Fragment, useCallback, useState } from "react";
+export function Breadcrumbs(props) {
+    const { breadcrumbs, createEnabled, onBreadcrumbSelected } = props;
+    const [isCreating, setIsCreating] = useState(false);
+    const onCreate = props.createEnabled ? props.onCreate : undefined;
+    function onAddNew() {
+        setIsCreating(true);
+    }
+    const onSubmit = useCallback((name) => {
+        if (!createEnabled || !onCreate)
+            return;
+        onCreate(name, breadcrumbs.at(-1)?.id);
+        setIsCreating(false);
+    }, [breadcrumbs, createEnabled, onCreate]);
+    const onCancel = useCallback(() => {
+        setIsCreating(false);
+    }, []);
+    return (_jsxs("div", { className: "flex h-9 flex-row items-center gap-2 p-6 text-gray-500", children: [breadcrumbs.map((node) => (_jsxs(Fragment, { children: [_jsx(Breadcrumb, { node: node, onClick: onBreadcrumbSelected }), _jsx("span", { children: "/" })] }, node.id))), createEnabled &&
+                (isCreating ? (_jsx(NodeInput, { className: "text-gray-800", defaultValue: "New Folder", onCancel: onCancel, onSubmit: onSubmit, placeholder: "New Folder" })) : (_jsxs("button", { type: "button", className: "ml-1 flex items-center justify-center gap-2 rounded-md bg-gray-50 px-2 py-1.5 transition-colors hover:bg-gray-200 hover:text-gray-800", onClick: onAddNew, children: [_jsx(Icon, { name: "Plus", size: 14 }), "Add new"] })))] }));
+}
+export function Breadcrumb(props) {
+    const { node, onClick } = props;
+    return (_jsx("div", { className: "transition-colors last-of-type:text-gray-800 hover:text-gray-800", onClick: () => onClick(node), role: "button", children: node.name }));
+}

package/dist/src/connect/components/breadcrumbs/breadcrumbs.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Breadcrumbs } from ".";
+import { type Meta, type StoryObj } from "@storybook/react";
+import { Breadcrumbs } from "./index.js";
 declare const meta: Meta<typeof Breadcrumbs>;
 export default meta;
 type Story = StoryObj<typeof Breadcrumbs>;

package/dist/src/connect/components/breadcrumbs/breadcrumbs.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/breadcrumbs/breadcrumbs.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAuErB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAMzC,CAAC"}
+{"version":3,"file":"breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/breadcrumbs/breadcrumbs.stories.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAuErB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAMzC,CAAC"}

package/dist/src/connect/components/breadcrumbs/breadcrumbs.stories.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DRIVE, FOLDER, mockDriveNodes, SUCCESS, } from "#connect";
+import { UiNodesContextProvider, useUiNodesContext, } from "@powerhousedao/reactor-browser";
+import { useEffect } from "react";
+import { Breadcrumbs } from "./index.js";
+const meta = {
+    title: "Connect/Components/Breadcrumbs",
+    component: Breadcrumbs,
+    decorators: [
+        (Story, { args }) => {
+            return (_jsx(UiNodesContextProvider, { children: _jsx(Story, { ...args }) }));
+        },
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        createEnabled: true,
+    },
+    render: function Wrapper(args) {
+        const { getNodeById, setDriveNodes, setSelectedNode, selectedNode, selectedDriveNode, selectedNodePath, } = useUiNodesContext();
+        useEffect(() => {
+            setDriveNodes(mockDriveNodes);
+        }, []);
+        useEffect(() => {
+            setSelectedNode(mockDriveNodes[0].children[0]);
+        }, []);
+        // stub implementation to mock behavior
+        async function onAddAndSelectNewFolder(name) {
+            if (!selectedNode)
+                return;
+            const newFolderNode = {
+                driveId: selectedNode.kind === DRIVE ? selectedNode.id : selectedNode.driveId,
+                id: `new-folder-${Math.floor(Math.random() * 1000)}`,
+                kind: FOLDER,
+                name,
+                slug: name.toLowerCase().replace(/\s/g, "-"),
+                parentFolder: selectedNode.id,
+                syncStatus: SUCCESS,
+                children: [],
+                sharingType: selectedNode.sharingType,
+            };
+            setDriveNodes([
+                {
+                    ...selectedDriveNode,
+                    children: [...selectedDriveNode.children, newFolderNode],
+                    nodeMap: {
+                        ...selectedDriveNode.nodeMap,
+                        [newFolderNode.id]: newFolderNode,
+                    },
+                },
+            ]);
+            setSelectedNode(newFolderNode);
+            return Promise.resolve();
+        }
+        const onCreateProp = args.createEnabled
+            ? {
+                onCreate: onAddAndSelectNewFolder,
+            }
+            : {};
+        return (_jsx("div", { className: "bg-white p-10", children: _jsx(Breadcrumbs, { ...args, breadcrumbs: selectedNodePath, onBreadcrumbSelected: (b) => setSelectedNode(getNodeById(b.id)), ...onCreateProp }) }));
+    },
+};
+export const NotAllowedToCreateDocuments = {
+    ...Default,
+    args: {
+        ...Default.args,
+        createEnabled: false,
+    },
+};

package/dist/src/connect/components/breadcrumbs/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./breadcrumbs";
-export * from "./useBreadcrumbs";
+export * from "./breadcrumbs.js";
+export * from "./useBreadcrumbs.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/connect/components/breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC"}

package/dist/src/connect/components/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+export * from "./breadcrumbs.js";
+export * from "./useBreadcrumbs.js";

package/dist/src/connect/components/breadcrumbs/useBreadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import { BreadcrumbNode, UiNode } from "@/connect";
+import { type BreadcrumbNode, type UiNode } from "#connect";
 interface UseBreadcrumbsProps {
     selectedNodePath: UiNode[];
     getNodeById: (id: string) => UiNode | null;

package/dist/src/connect/components/breadcrumbs/useBreadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/breadcrumbs/useBreadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnD,UAAU,mBAAmB;IAC3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC3C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAC7B,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,EAAE,mBAAmB;;;;;uCAWL,cAAc;EAe9B"}
+{"version":3,"file":"useBreadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/breadcrumbs/useBreadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAG5D,UAAU,mBAAmB;IAC3B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC3C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAC7B,gBAAgB,EAChB,WAAW,EACX,eAAe,GAChB,EAAE,mBAAmB;;;;;uCAWL,cAAc;EAe9B"}

package/dist/src/connect/components/breadcrumbs/useBreadcrumbs.js

@@ -0,0 +1,20 @@
+import { useCallback, useMemo } from "react";
+export function useBreadcrumbs({ selectedNodePath, getNodeById, setSelectedNode, }) {
+    const breadcrumbs = useMemo(() => selectedNodePath.map((node) => ({
+        id: node.id,
+        name: node.name,
+    })), [selectedNodePath]);
+    const onBreadcrumbSelected = useCallback((breadcrumb) => {
+        const node = getNodeById(breadcrumb.id);
+        if (node) {
+            setSelectedNode(node);
+        }
+        else {
+            console.error(`Node with id ${breadcrumb.id} not found`, breadcrumb);
+        }
+    }, [getNodeById, setSelectedNode]);
+    return {
+        breadcrumbs,
+        onBreadcrumbSelected,
+    };
+}

package/dist/src/connect/components/combobox/combobox.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import Select from "react-select";
 type SelectProps = ComponentPropsWithoutRef<typeof Select>;
 type Props = Omit<SelectProps, "components" | "styles" | "theme"> & {

package/dist/src/connect/components/combobox/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/combobox/combobox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,MAKN,MAAM,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,wBAAwB,CAAC,OAAO,MAAM,CAAC,CAAC;AAE3D,KAAK,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IAClE,QAAQ,CAAC,kBAAkB,CAAC,EAAE;QAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACH,CAAC;AA2CF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,2CAyGpC"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/combobox/combobox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,MAKN,MAAM,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG,wBAAwB,CAAC,OAAO,MAAM,CAAC,CAAC;AAE3D,KAAK,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IAClE,QAAQ,CAAC,kBAAkB,CAAC,EAAE;QAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACH,CAAC;AA2CF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,2CA2GpC"}

package/dist/src/connect/components/combobox/combobox.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "#powerhouse";
+import Select, { components, } from "react-select";
+function DropdownIndicator(props) {
+    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Icon, { name: "ChevronDown", size: 16 }) }));
+}
+function ClearIndicator(props) {
+    return (_jsx(components.ClearIndicator, { ...props, children: _jsx(Icon, { name: "Xmark", size: 16 }) }));
+}
+function MenuList(props) {
+    const { label, onClick, ...rest } = props;
+    const hasAddItemButton = !!label && !!onClick;
+    return (_jsxs(components.MenuList, { ...rest, children: [props.children, hasAddItemButton ? (_jsx("button", { className: "w-full px-2 py-3 hover:bg-slate-50", onClick: onClick, children: label })) : null] }));
+}
+export function Combobox(props) {
+    const invalid = props["aria-invalid"] === "true";
+    const { addItemButtonProps, ...rest } = props;
+    return (_jsx(Select, { ...rest, components: {
+            DropdownIndicator,
+            ClearIndicator,
+            MenuList: (menuListProps) => MenuList({ ...menuListProps, ...addItemButtonProps }),
+        }, styles: {
+            dropdownIndicator: () => {
+                return {
+                    label: "indicatorContainer",
+                    display: "flex",
+                    transition: "color 150ms",
+                    color: "var(color-gray-900)",
+                    padding: 8,
+                    boxSizing: "border-box",
+                };
+            },
+            clearIndicator: (baseStyles) => {
+                return {
+                    ...baseStyles,
+                    color: "var(color-gray-900)",
+                };
+            },
+            container: (baseStyles) => {
+                return {
+                    ...baseStyles,
+                    borderColor: "var(color-gray-200)",
+                    fontSize: 12,
+                };
+            },
+            placeholder: (baseStyles) => {
+                return {
+                    ...baseStyles,
+                    color: invalid ? "var(color-red-800)" : "var(color-gray-500)",
+                };
+            },
+            control: () => {
+                return {
+                    label: "control",
+                    alignItems: "center",
+                    cursor: "default",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    justifyContent: "space-between",
+                    minHeight: 32,
+                    outline: "0 !important",
+                    position: "relative",
+                    transition: "all 100ms",
+                    backgroundColor: "var(--color-white)",
+                    borderColor: invalid
+                        ? "var(--color-red-900)"
+                        : "var(--color-gray-200)",
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    borderRadius: "6px",
+                    boxSizing: "border-box",
+                };
+            },
+            option: (baseStyles, state) => {
+                return {
+                    ...baseStyles,
+                    backgroundColor: state.isSelected
+                        ? "var(--color-slate-50)"
+                        : "var(--color-white)",
+                    color: "var(--color-gray-800)",
+                    ":hover": {
+                        backgroundColor: "var(--color-slate-50)",
+                    },
+                };
+            },
+            menuList: (baseStyles) => ({
+                ...baseStyles,
+                padding: 0,
+                borderRadius: "6px",
+            }),
+        }, theme: (theme) => ({
+            ...theme,
+            colors: {
+                ...theme.colors,
+                primary: "var(--color-slate-100)",
+                primary25: "var(--color-slate-50)",
+                primary50: "var(--color-slate-100)",
+                primary75: "var(--color-slate-100)",
+                danger: "var(--color-red-900)",
+                dangerLight: "var(--color-red-100)",
+                neutral0: "var(--color-white)",
+                neutral5: "var(--color-gray-50)",
+                neutral10: "var(--color-gray-100)",
+                neutral20: "var(--color-gray-200)",
+                neutral30: "var(--color-gray-300)",
+                neutral40: "var(--color-gray-400)",
+                neutral50: "var(--color-gray-500)",
+                neutral60: "var(--color-gray-600)",
+                neutral70: "var(--color-gray-700)",
+                neutral80: "var(--color-gray-800)",
+                neutral90: "var(--color-gray-900)",
+            },
+        }) }));
+}

package/dist/src/connect/components/combobox/combobox.stories.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { Combobox } from "./combobox";
+import { type StoryObj } from "@storybook/react";
+import { Combobox } from "./combobox.js";
 declare const meta: {
     title: string;
     component: typeof Combobox;

package/dist/src/connect/components/combobox/combobox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/combobox/combobox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6CnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAC"}
+{"version":3,"file":"combobox.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/combobox/combobox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,QAAA,MAAM,IAAI;;;CAGuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA6CnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAC"}

package/dist/src/connect/components/combobox/combobox.stories.js

@@ -0,0 +1,65 @@
+import { Combobox } from "./combobox.js";
+const meta = {
+    title: "Connect/Components/Combobox",
+    component: Combobox,
+};
+export default meta;
+const options = [
+    {
+        label: "FixedIncome 2703",
+        value: "137418",
+    },
+    {
+        label: "FixedIncome 6345 - 807597117063 - 303442336",
+        value: "683189",
+    },
+    {
+        label: "FixedIncome 1369 - 466394625668 - 319580691",
+        value: "752165",
+    },
+    {
+        label: "FixedIncome 6762 - 899255020782 - 081390248",
+        value: "472706",
+    },
+    {
+        label: "FixedIncome 4764 - 289378983334 - 611105546",
+        value: "852793",
+    },
+    {
+        label: "FixedIncome 3377 - 581535993415 - 638814162",
+        value: "704871",
+    },
+    {
+        label: "FixedIncome 4552 - 957822646500 - 420251643",
+        value: "117828",
+    },
+    {
+        label: "FixedIncome 4053 - 681711139048 - 662382150",
+        value: "023427",
+    },
+    {
+        label: "FixedIncome 8136 - 920909997265 - 013733367",
+        value: "637391",
+    },
+    {
+        label: "FixedIncome 0761 - 325463008815 - 273954713",
+        value: "269772",
+    },
+];
+export const Default = {
+    args: {
+        options,
+    },
+};
+export const WithAddItemButton = {
+    ...Default,
+    args: {
+        ...Default.args,
+        addItemButtonProps: {
+            label: "Add New Item",
+            onClick: () => {
+                alert("Add Item");
+            },
+        },
+    },
+};

package/dist/src/connect/components/combobox/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./combobox";
+export * from "./combobox.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/connect/components/combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/src/connect/components/combobox/index.js

@@ -0,0 +1 @@
+export * from "./combobox.js";

package/dist/src/connect/components/cookie-banner/cookie-banner.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, mergeClassNameProps } from "#powerhouse";
+import { useState } from "react";
+export const CookieBanner = (props) => {
+    const { children, cookies, submitLabel, rejectLabel, onSubmit = () => { }, onReject = () => { }, ...divProps } = props;
+    const [cookiesValue, setCookiesValue] = useState(cookies);
+    const handleOnChange = (event) => {
+        const { id, checked } = event.target;
+        setCookiesValue((prevState) => prevState.map((cookie) => cookie.id === id ? { ...cookie, value: checked } : cookie));
+    };
+    const buttonStyles = "min-w-64 h-8 text-base";
+    return (_jsxs("div", { ...mergeClassNameProps(divProps, "flex flex-col items-center"), children: [_jsx("div", { className: "text-center", children: children }), _jsx("div", { className: "my-8 flex gap-x-16 text-sm font-medium", children: cookiesValue.map((cookie) => (_jsxs("div", { className: "cursor-pointer", children: [_jsx("input", { checked: cookie.value, className: "mr-1 size-3 cursor-pointer rounded-sm border-2 border-gray-900 accent-gray-900 focus:outline-none", id: cookie.id, onChange: handleOnChange, type: "checkbox" }), _jsx("label", { className: "cursor-pointer select-none", htmlFor: cookie.id, children: cookie.label })] }, cookie.id))) }), _jsxs("div", { className: "flex gap-x-8", children: [_jsx(Button, { className: buttonStyles, color: "light", onClick: () => onReject(), size: "small", children: rejectLabel }), _jsx(Button, { className: buttonStyles, onClick: () => onSubmit(cookiesValue), size: "small", children: submitLabel })] })] }));
+};

package/dist/src/connect/components/cookie-banner/cookie-banner.stories.d.ts

@@ -1,7 +1,7 @@
-import { StoryObj } from "@storybook/react";
+import { type StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: import("react").FC<import("./cookie-banner").CookieBannerProps>;
+    component: import("react").FC<import("./cookie-banner.js").CookieBannerProps>;
     argTypes: {
         submitLabel: {
             control: {

package/dist/src/connect/components/cookie-banner/cookie-banner.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/cookie-banner/cookie-banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAU2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC"}
+{"version":3,"file":"cookie-banner.stories.d.ts","sourceRoot":"","sources":["../../../../../src/connect/components/cookie-banner/cookie-banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAU2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAC"}