se-design 0.0.95 → 0.0.96

package/dist/components/Button/Button.stories.d.ts

@@ -24,3 +24,4 @@ export declare const Disabled: Story;
 export declare const PrimaryWithLeftIcon: Story;
 export declare const PrimaryWithRightIcon: Story;
 export declare const PrimarySmall: Story;
+export declare const SecondaryLink: Story;

package/dist/components/Button/index.d.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
     /**
      * Type of the button
      */
-    type?: 'primary' | 'secondary' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary';
+    type?: 'primary' | 'secondary' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary' | 'secondary-link';
     /**
      * Size of the button
      */

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+export interface CheckboxProps {
+    className?: string;
+    automationId?: string;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+export declare const Checkbox: FC<CheckboxProps>;

package/dist/components/HamburgerMenu/HamburgerMenu.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { HamburgerMenu } from '.';
+
+declare const meta: Meta<typeof HamburgerMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Hamburger: Story;

package/dist/components/HamburgerMenu/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { MenuItemProps } from '../../../../../../../../src/components/MenuItem';
+
+export interface HamburgerMenuProps {
+    menuItems: MenuItemProps[];
+    className?: string;
+    automationId?: string;
+    popupContentAutomationId?: string;
+    onMenuItemClick?: (label: string) => void;
+}
+export declare const HamburgerMenu: FC<HamburgerMenuProps>;

package/dist/components/Header/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+export interface HeaderProps {
+    leftContainer?: React.ReactNode;
+    centerContainer?: React.ReactNode;
+    rightContainer?: React.ReactNode;
+    type?: string;
+}
+export declare const Header: FC<HeaderProps>;

package/dist/components/Icon/Icon.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Icon } from './Icon';
+import { Icon } from '.';
 
 declare const meta: Meta<typeof Icon>;
 export default meta;

package/dist/components/Modal/Modal.stories.d.ts

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react';
-import { ModalProps } from './Modal';
+import { ModalProps } from '.';
 
 declare const meta: {
     title: string;

package/dist/components/Popup/index.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+
+export interface PopupProps {
+    className?: string;
+    automationId?: string;
+    popupContentAutomationId?: string;
+    renderPopupContents: (props: {
+        closePopupCb: () => void;
+    }) => ReactNode;
+    renderPopupSrcElement: (props: {
+        displayPopup: boolean;
+    }) => ReactNode;
+    position?: "bottom-center" | "bottom-left" | "bottom-right";
+}
+export declare const Popup: FC<PopupProps>;

package/dist/components/SplitButton/SplitButton.stories.d.ts

@@ -1,5 +1,5 @@
 import { StoryObj } from '@storybook/react';
-import { SplitButtonProps } from './SplitButton';
+import { SplitButtonProps } from '.';
 
 declare const meta: {
     title: string;

package/dist/components/TableLayout/index.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+
+export interface TableLayoutProps {
+    className?: string;
+    automationId?: string;
+    loading: boolean;
+    headerData: any[];
+    tableData: any[];
+    headerColSpan?: number;
+    renderTableContentLoader?: (noOfColumns: number) => ReactNode;
+    getTableHeaders: (props: {
+        headerData: any[];
+        sortData: any;
+        onSortUiUpdate: any;
+    }) => ReactNode;
+    getTableBody: (props: {
+        tableData: any[];
+        onRowClick: any;
+        loading: boolean;
+    }) => ReactNode;
+    onSortUiUpdate: (newSortData: any) => void;
+    onRowClick: (rowData: any) => void;
+}
+export declare const TableLayout: FC<TableLayoutProps>;

package/dist/components/index.d.ts

@@ -1,9 +1,14 @@
 export { Button } from './Button';
-export { Icon } from './Icon/Icon';
-export { SplitButton } from './SplitButton/SplitButton';
-export { Toggle } from './Toggle/Toggle';
-export { Tag } from './Tag/Tag';
-export { Modal } from './Modal/Modal';
-export { Tooltip } from './Tooltip/Tooltip';
+export { Icon } from './Icon';
+export { SplitButton } from './SplitButton';
+export { Toggle } from './Toggle';
+export { Tag } from './Tag';
+export { Modal } from './Modal';
+export { Tooltip } from './Tooltip';
 export { MenuItem } from './MenuItem';
 export { MenuList } from './MenuList';
+export { Popup } from './Popup';
+export { Header } from './Header';
+export { HamburgerMenu } from './HamburgerMenu';
+export { TableLayout } from './TableLayout';
+export { Checkbox } from './Checkbox';

package/dist/index.js

@@ -1,22 +1,32 @@
 /* empty css       */
-import { Button as e } from "./index3.js";
-import { Icon as m } from "./index4.js";
-import { SplitButton as x } from "./index5.js";
-import { Toggle as i } from "./index6.js";
-import { Tag as u } from "./index7.js";
-import { Modal as M } from "./index8.js";
-import { Tooltip as a } from "./index9.js";
-import { MenuItem as I } from "./index10.js";
-import { MenuList as d } from "./index11.js";
+import { Button as t } from "./index4.js";
+import { Icon as m } from "./index5.js";
+import { SplitButton as f } from "./index6.js";
+import { Toggle as a } from "./index7.js";
+import { Tag as l } from "./index8.js";
+import { Modal as i } from "./index9.js";
+import { Tooltip as T } from "./index10.js";
+import { MenuItem as c } from "./index11.js";
+import { MenuList as B } from "./index12.js";
+import { Popup as I } from "./index13.js";
+import { Header as h } from "./index14.js";
+import { HamburgerMenu as s } from "./index15.js";
+import { TableLayout as C } from "./index16.js";
+import { Checkbox as S } from "./index17.js";
 export {
-  e as Button,
+  t as Button,
+  S as Checkbox,
+  s as HamburgerMenu,
+  h as Header,
   m as Icon,
-  I as MenuItem,
-  d as MenuList,
-  M as Modal,
-  x as SplitButton,
-  u as Tag,
-  i as Toggle,
-  a as Tooltip
+  c as MenuItem,
+  B as MenuList,
+  i as Modal,
+  I as Popup,
+  f as SplitButton,
+  C as TableLayout,
+  l as Tag,
+  a as Toggle,
+  T as Tooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/index10.js

@@ -1,18 +1,34 @@
-import { j as e } from "./index12.js";
-import { Tag as o } from "./index7.js";
-const x = ({ label: t, tag: r, onClick: s = () => {
-} }) => /* @__PURE__ */ e.jsxs(
-  "div",
-  {
-    className: "flex items-center justify-between px-4 py-3 text-gray-900 hover:bg-blue-100 cursor-pointer first:rounded-t last:rounded-b gap-2",
-    onClick: s,
-    children: [
-      /* @__PURE__ */ e.jsx("div", { children: t }),
-      r && /* @__PURE__ */ e.jsx(o, { label: r })
-    ]
-  }
-);
+import { j as r } from "./index18.js";
+import { useState as p, useRef as d, useEffect as a } from "react";
+const u = ({ content: l, tooltipSrc: c, position: t = "bottom-center", displayOn: o = "hover" }) => {
+  const [i, f] = p(o === "always-on"), s = d(null);
+  a(() => {
+    const e = s.current;
+    e && (t == "bottom-center" ? (e.setAttribute("style", "left: 50%;transform: translateX(-50%);"), e.classList.add("before:left-[calc(50%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-left" ? (e.classList.add("before:left-[calc(10%-7px)]"), e.classList.add("before:top-[-7px]")) : t == "bottom-right" ? (e.setAttribute("style", "right: 0;"), e.classList.add("before:right-[calc(10%+7px)]"), e.classList.add("before:top-[-7px]")) : t == "left" ? (e.setAttribute("style", "right: calc(100% + 10px);top:0;"), e.classList.add("before:right-[-6px]"), e.classList.add("before:top-0px")) : t == "right" && (e.setAttribute("style", "left: calc(100% + 10px);top:0;"), e.classList.add("before:left-[-6px]"), e.classList.add("before:top-0px")), o == "hover" && e.classList.add("group-hover:visible"));
+  }, [l]), a(() => {
+    const e = s.current;
+    e && (i ? e.classList.remove("invisible") : e.classList.add("invisible"));
+  }, [i]);
+  const n = () => {
+    o == "click" && f((e) => !e);
+  };
+  return /* @__PURE__ */ r.jsxs("div", { className: "group relative", onClick: n, children: [
+    /* @__PURE__ */ r.jsx("div", { className: "cursor-pointer", id: "tooltip-trigger", children: c }),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        ref: s,
+        id: "tooltip-content",
+        className: `flex justify-center px-3 py-2 min-w-24 max-w-60
+          absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-xs rounded-[3px]
+          before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block
+          before:absolute before:rounded-tl-sm before:rotate-45`,
+        children: l
+      }
+    )
+  ] });
+};
 export {
-  x as MenuItem
+  u as Tooltip
 };
 //# sourceMappingURL=index10.js.map

package/dist/index10.js.map

@@ -1 +1 @@
-{"version":3,"file":"index10.js","sources":["../src/components/MenuItem/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Tag } from 'src/components/Tag/Tag';\n\nexport type MenuItemProps = {\n  label: string;\n  tag?: string;\n  onClick?: () => void;\n};\n\nexport const MenuItem: FC<MenuItemProps> = ({ label, tag, onClick = () => {} }) => {\n  return (\n    <div\n      className=\"flex items-center justify-between px-4 py-3 text-gray-900 hover:bg-blue-100 cursor-pointer first:rounded-t last:rounded-b gap-2\"\n      onClick={onClick}\n    >\n      <div>{label}</div>\n      {tag && <Tag label={tag} />}\n    </div>\n  );\n};\n"],"names":["MenuItem","label","tag","onClick","jsxs","jsx","Tag"],"mappings":";;AASO,MAAMA,IAA8B,CAAC,EAAE,OAAAC,GAAO,KAAAC,GAAK,SAAAC,IAAU,MAAM;AAAC,QAEvEC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAAD;AAAA,IAEA,UAAA;AAAA,MAAAE,gBAAAA,EAAAA,IAAC,SAAK,UAAMJ,EAAA,CAAA;AAAA,MACXC,KAAOG,gBAAAA,EAAAA,IAACC,GAAI,EAAA,OAAOJ,EAAK,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"index10.js","sources":["../src/components/Tooltip/index.tsx"],"sourcesContent":["import { useEffect, useState, useRef } from \"react\";\n\nexport interface TooltipProps {\n  /**\n   * Tooltip contents\n   */\n  content: string;\n  /**\n   * Tooltip position\n   */\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\";\n  /**\n   * Display tooltip on Hover, Click or Always\n   */\n  displayOn?: 'hover' | 'click' | 'always-on';\n  /**\n   * Tooltip trigger contents\n   */\n  tooltipSrc?: React.ReactNode;\n}\n\nexport const Tooltip = ({ content, tooltipSrc, position = 'bottom-center', displayOn = 'hover' }: TooltipProps) => {\n  const [displayTooltip, setDisplayTooltip] = useState(displayOn === 'always-on');\n  const tooltipContentRef = useRef<HTMLDivElement>(null);;\n\n  useEffect(() => {\n    const tooltipContent = tooltipContentRef.current;\n\n    if(!tooltipContent) {\n      return\n    }\n    \n    if(position == 'bottom-center') {\n      tooltipContent.setAttribute(\"style\", `left: 50%;transform: translateX(-50%);`);\n      tooltipContent.classList.add(`before:left-[calc(50%-7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'bottom-left') {\n      tooltipContent.classList.add(`before:left-[calc(10%-7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'bottom-right') {\n      tooltipContent.setAttribute(\"style\", `right: 0;`);\n      tooltipContent.classList.add(`before:right-[calc(10%+7px)]`);\n      tooltipContent.classList.add(`before:top-[-7px]`);\n    } else if(position == 'left') {\n      tooltipContent.setAttribute(\"style\", `right: calc(100% + 10px);top:0;`);\n      tooltipContent.classList.add(`before:right-[-6px]`);\n      tooltipContent.classList.add(`before:top-0px`);\n    } else if(position == 'right') {\n      tooltipContent.setAttribute(\"style\", `left: calc(100% + 10px);top:0;`);\n      tooltipContent.classList.add(`before:left-[-6px]`);\n      tooltipContent.classList.add(`before:top-0px`);\n    }\n\n    if(displayOn == 'hover') {\n      tooltipContent.classList.add(`group-hover:visible`);\n    }\n  }, [content]);\n\n  useEffect(() => {\n    const tooltipContent = tooltipContentRef.current;\n\n    if(!tooltipContent) {\n      return;\n    }\n    if(displayTooltip) {\n      tooltipContent.classList.remove(`invisible`);\n    } else {\n      tooltipContent.classList.add(`invisible`);\n    }\n  }, [displayTooltip])\n\n  const onTooltipSrcClick = () => {\n    if(displayOn == 'click') {\n      setDisplayTooltip((displayTooltip) => !displayTooltip)\n    }\n  }\n\n  return (\n    <div className=\"group relative\" onClick={onTooltipSrcClick}>\n      <div className=\"cursor-pointer\" id=\"tooltip-trigger\">\n        {tooltipSrc}\n      </div>\n      <div\n        ref={tooltipContentRef}\n        id=\"tooltip-content\"\n        className=\"flex justify-center px-3 py-2 min-w-24 max-w-60\n          absolute top-[calc(100%+8px)] w-max bg-[var(--color-gray-800)] text-[var(--color-white)] text-xs rounded-[3px]\n          before:content-[' '] before:w-3.5 before:h-3.5 before:bg-[var(--color-gray-800)] before:inline-block\n          before:absolute before:rounded-tl-sm before:rotate-45\"\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["jsxRuntimeExports","useState","useRef","useEffect","Tooltip","content","tooltipSrc","position","displayOn","displayTooltip","setDisplayTooltip","tooltipContentRef","tooltipContent","onTooltipSrcClick","jsxs","jsx"],"mappings":"AAqBa,SAAA,KAAAA,SAAA;AAAA,SAAA,YAAAC,GAAA,UAAAC,GAAA,aAAAC,SAAA;AAAA,MAAAC,IAAU,CAAC,EAAE,SAAAC,GAAS,YAAAC,GAAY,UAAAC,IAAW,iBAAiB,WAAAC,IAAY,cAA4B;AACjH,QAAM,CAACC,GAAgBC,CAAiB,IAAIT,EAASO,MAAc,WAAW,GACxEG,IAAoBT,EAAuB,IAAI;AAErD,EAAAC,EAAU,MAAM;AACd,UAAMS,IAAiBD,EAAkB;AAEzC,IAAIC,MAIDL,KAAY,mBACEK,EAAA,aAAa,SAAS,wCAAwC,GAC9DA,EAAA,UAAU,IAAI,6BAA6B,GAC3CA,EAAA,UAAU,IAAI,mBAAmB,KACxCL,KAAY,iBACLK,EAAA,UAAU,IAAI,6BAA6B,GAC3CA,EAAA,UAAU,IAAI,mBAAmB,KACxCL,KAAY,kBACLK,EAAA,aAAa,SAAS,WAAW,GACjCA,EAAA,UAAU,IAAI,8BAA8B,GAC5CA,EAAA,UAAU,IAAI,mBAAmB,KACxCL,KAAY,UACLK,EAAA,aAAa,SAAS,iCAAiC,GACvDA,EAAA,UAAU,IAAI,qBAAqB,GACnCA,EAAA,UAAU,IAAI,gBAAgB,KACrCL,KAAY,YACLK,EAAA,aAAa,SAAS,gCAAgC,GACtDA,EAAA,UAAU,IAAI,oBAAoB,GAClCA,EAAA,UAAU,IAAI,gBAAgB,IAG5CJ,KAAa,WACCI,EAAA,UAAU,IAAI,qBAAqB;AAAA,EACpD,GACC,CAACP,CAAO,CAAC,GAEZF,EAAU,MAAM;AACd,UAAMS,IAAiBD,EAAkB;AAEzC,IAAIC,MAGDH,IACcG,EAAA,UAAU,OAAO,WAAW,IAE5BA,EAAA,UAAU,IAAI,WAAW;AAAA,EAC1C,GACC,CAACH,CAAc,CAAC;AAEnB,QAAMI,IAAoB,MAAM;AAC9B,IAAGL,KAAa,WACIE,EAAA,CAACD,MAAmB,CAACA,CAAc;AAAA,EACvD;AAGF,SACGK,gBAAAA,EAAAA,KAAA,OAAA,EAAI,WAAU,kBAAiB,SAASD,GACvC,UAAA;AAAA,IAAAE,gBAAAA,MAAC,OAAI,EAAA,WAAU,kBAAiB,IAAG,mBAChC,UACHT,GAAA;AAAA,IACAS,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKJ;AAAA,QACL,IAAG;AAAA,QACH,WAAU;AAAA;AAAA;AAAA;AAAA,QAKT,UAAAN;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/index11.js

@@ -1,7 +1,18 @@
-import { j as r } from "./index12.js";
-import { MenuItem as s } from "./index10.js";
-const d = ({ items: e }) => /* @__PURE__ */ r.jsx("div", { className: "border border-gray-200 rounded shadow-md", children: e.map((o) => /* @__PURE__ */ r.jsx(s, { ...o })) });
+import { j as r } from "./index18.js";
+import { Tag as s } from "./index8.js";
+const l = ({ label: t, tag: e, onClick: o = () => {
+} }) => /* @__PURE__ */ r.jsxs(
+  "div",
+  {
+    className: "flex items-center justify-between px-4 py-3 text-[var(--color-gray-900)] hover:bg-[var(--color-blue-100)] cursor-pointer first:rounded-t last:rounded-b gap-2",
+    onClick: o,
+    children: [
+      /* @__PURE__ */ r.jsx("div", { children: t }),
+      e && /* @__PURE__ */ r.jsx(s, { label: e })
+    ]
+  }
+);
 export {
-  d as MenuList
+  l as MenuItem
 };
 //# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index11.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n};\n\nexport const MenuList: FC<MenuListProps> = ({ items }) => {\n  return (\n    <div className=\"border border-gray-200 rounded shadow-md\">\n      {items.map((item) => (\n        <MenuItem {...item} />\n      ))}\n    </div>\n  );\n};\n"],"names":["MenuList","items","jsx","item","MenuItem"],"mappings":";;AAOO,MAAMA,IAA8B,CAAC,EAAE,OAAAC,QAEzCC,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,4CACZ,UAAMD,EAAA,IAAI,CAACE,MACTD,gBAAAA,EAAA,IAAAE,GAAA,EAAU,GAAGD,EAAM,CAAA,CACrB,EACH,CAAA;"}
+{"version":3,"file":"index11.js","sources":["../src/components/MenuItem/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Tag } from 'src/components/Tag';\n\nexport type MenuItemProps = {\n  label: string;\n  tag?: string;\n  onClick?: () => void;\n};\n\nexport const MenuItem: FC<MenuItemProps> = ({ label, tag, onClick = () => {} }) => {\n  return (\n    <div\n      className=\"flex items-center justify-between px-4 py-3 text-[var(--color-gray-900)] hover:bg-[var(--color-blue-100)] cursor-pointer first:rounded-t last:rounded-b gap-2\"\n      onClick={onClick}\n    >\n      <div>{label}</div>\n      {tag && <Tag label={tag} />}\n    </div>\n  );\n};\n"],"names":["MenuItem","label","tag","onClick","jsxs","jsx","Tag"],"mappings":";;AASO,MAAMA,IAA8B,CAAC,EAAE,OAAAC,GAAO,KAAAC,GAAK,SAAAC,IAAU,MAAM;AAAC,QAEvEC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAAD;AAAA,IAEA,UAAA;AAAA,MAAAE,gBAAAA,EAAAA,IAAC,SAAK,UAAMJ,EAAA,CAAA;AAAA,MACXC,KAAOG,gBAAAA,EAAAA,IAACC,GAAI,EAAA,OAAOJ,EAAK,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/index12.js

@@ -1,9 +1,7 @@
-import { __module as e } from "./index15.js";
-import { __require as r } from "./index16.js";
-import { __require as o } from "./index17.js";
-process.env.NODE_ENV === "production" ? e.exports = r() : e.exports = o();
-var m = e.exports;
+import { j as r } from "./index18.js";
+import { MenuItem as s } from "./index11.js";
+const d = ({ items: o }) => /* @__PURE__ */ r.jsx("div", { className: "border border-[var(--color-gray-200)] rounded shadow-md", children: o.map((e) => /* @__PURE__ */ r.jsx(s, { ...e })) });
 export {
-  m as j
+  d as MenuList
 };
 //# sourceMappingURL=index12.js.map

package/dist/index12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index12.js","sources":["../node_modules/react/jsx-runtime.js"],"sourcesContent":["'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-jsx-runtime.production.min.js');\n} else {\n  module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n"],"names":["jsxRuntimeModule","require$$0","require$$1"],"mappings":";;;AAEI,QAAQ,IAAI,aAAa,eAC3BA,EAAA,UAAiBC,MAEjBD,EAAA,UAAiBE;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index12.js","sources":["../src/components/MenuList/index.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { MenuItem, MenuItemProps } from 'src/components/MenuItem';\n\nexport type MenuListProps = {\n  items: MenuItemProps[];\n};\n\nexport const MenuList: FC<MenuListProps> = ({ items }) => {\n  return (\n    <div className=\"border border-[var(--color-gray-200)] rounded shadow-md\">\n      {items.map((item) => (\n        <MenuItem {...item} />\n      ))}\n    </div>\n  );\n};\n"],"names":["jsxRuntimeExports","MenuItem","MenuList","items","jsx","item"],"mappings":"AAOO,SAAA,KAAAA,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,MAAMC,IAA8B,CAAC,EAAE,OAAAC,QAEzCC,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,2DACZ,UAAMD,EAAA,IAAI,CAACE,MACTD,gBAAAA,EAAA,IAAAH,GAAA,EAAU,GAAGI,EAAM,CAAA,CACrB,EACH,CAAA;"}

package/dist/index13.js

@@ -1,158 +1,59 @@
-import N from "./index18.js";
-import C from "./index19.js";
-import D from "./index20.js";
-import { SVGInjector as A } from "./index21.js";
-import { p as t } from "./index22.js";
-import * as h from "react";
-var O = function(s) {
-  var o = (s == null ? void 0 : s.ownerDocument) || document;
-  return o.defaultView || window;
-}, U = function(s, o) {
-  for (var r in s)
-    if (!(r in o))
-      return !0;
-  for (var e in o)
-    if (s[e] !== o[e])
-      return !0;
-  return !1;
-}, H = ["afterInjection", "beforeInjection", "desc", "evalScripts", "fallback", "httpRequestWithCredentials", "loading", "renumerateIRIElements", "src", "title", "useRequestCache", "wrapper"], v = "http://www.w3.org/2000/svg", q = "http://www.w3.org/1999/xlink", V = /* @__PURE__ */ function(c) {
-  function s() {
-    for (var r, e = arguments.length, n = new Array(e), a = 0; a < e; a++)
-      n[a] = arguments[a];
-    return r = c.call.apply(c, [this].concat(n)) || this, r.initialState = {
-      hasError: !1,
-      isLoading: !0
-    }, r.state = r.initialState, r._isMounted = !1, r.reactWrapper = void 0, r.nonReactWrapper = void 0, r.refCallback = function(u) {
-      r.reactWrapper = u;
-    }, r;
-  }
-  D(s, c);
-  var o = s.prototype;
-  return o.renderSVG = function() {
-    var e = this;
-    if (this.reactWrapper instanceof O(this.reactWrapper).Node) {
-      var n = this.props, a = n.desc, u = n.evalScripts, S = n.httpRequestWithCredentials, E = n.renumerateIRIElements, G = n.src, b = n.title, g = n.useRequestCache, w = this.props.onError, x = this.props.beforeInjection, y = this.props.afterInjection, f = this.props.wrapper, l, p;
-      f === "svg" ? (l = document.createElementNS(v, f), l.setAttribute("xmlns", v), l.setAttribute("xmlns:xlink", q), p = document.createElementNS(v, f)) : (l = document.createElement(f), p = document.createElement(f)), l.appendChild(p), p.dataset.src = G, this.nonReactWrapper = this.reactWrapper.appendChild(l);
-      var I = function(i) {
-        if (e.removeSVG(), !e._isMounted) {
-          w(i);
-          return;
-        }
-        e.setState(function() {
-          return {
-            hasError: !0,
-            isLoading: !1
-          };
-        }, function() {
-          w(i);
-        });
-      }, L = function(i, d) {
-        if (i) {
-          I(i);
-          return;
-        }
-        e._isMounted && e.setState(function() {
-          return {
-            isLoading: !1
-          };
-        }, function() {
-          try {
-            y(d);
-          } catch (m) {
-            I(m);
+import { j as a } from "./index18.js";
+import { useState as b, useRef as i, useEffect as P } from "react";
+const x = ({
+  className: r = "",
+  automationId: u = "",
+  position: n = "",
+  popupContentAutomationId: f = "",
+  renderPopupContents: d,
+  renderPopupSrcElement: m,
+  ...g
+}) => {
+  const [e, t] = b(!1), s = i(null), l = i(null);
+  P(() => {
+    if (e) {
+      const o = l.current;
+      return o ? (n == "bottom-left" ? o.style.left = "0" : n == "bottom-right" ? o.style.right = "0" : (o.style.left = "50%", o.style.transform = "translateX(-50%)"), document.body.addEventListener("click", c), () => document.body.removeEventListener("click", c)) : void 0;
+    }
+  }, [e]);
+  const c = (o) => {
+    const p = s.current;
+    if (!p) return;
+    const y = o.target;
+    p.contains(y) || t(!1);
+  }, v = () => {
+    t((o) => !o);
+  };
+  return /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      className: "popup-wrapper cursor-pointer relative" + (r.length > 0 ? ` ${r}` : "") + (e ? " open" : ""),
+      ref: s,
+      onClick: v,
+      "data-automation-id": u,
+      ...g,
+      children: [
+        m({ displayPopup: e }),
+        e && /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            className: "popup-content absolute p-2 shadow-md top-full border rounded-md w-max",
+            style: {
+              borderColor: "var(--color-gray-200)",
+              color: "var(--color-gray-900)",
+              backgroundColor: "var(--color-white)"
+            },
+            onClick: (o) => o.stopPropagation(),
+            ref: l,
+            "data-automation-id": f,
+            children: d({ closePopupCb: () => t(!1) })
           }
-        });
-      }, M = function(i) {
-        if (i.setAttribute("role", "img"), a) {
-          var d = i.querySelector(":scope > desc");
-          d && i.removeChild(d);
-          var m = document.createElement("desc");
-          m.innerHTML = a, i.prepend(m);
-        }
-        if (b) {
-          var R = i.querySelector(":scope > title");
-          R && i.removeChild(R);
-          var j = document.createElement("title");
-          j.innerHTML = b, i.prepend(j);
-        }
-        try {
-          x(i);
-        } catch (k) {
-          I(k);
-        }
-      };
-      A(p, {
-        afterEach: L,
-        beforeEach: M,
-        cacheRequests: g,
-        evalScripts: u,
-        httpRequestWithCredentials: S,
-        renumerateIRIElements: E
-      });
+        )
+      ]
     }
-  }, o.removeSVG = function() {
-    var e;
-    (e = this.nonReactWrapper) != null && e.parentNode && (this.nonReactWrapper.parentNode.removeChild(this.nonReactWrapper), this.nonReactWrapper = null);
-  }, o.componentDidMount = function() {
-    this._isMounted = !0, this.renderSVG();
-  }, o.componentDidUpdate = function(e) {
-    var n = this;
-    U(C({}, e), this.props) && this.setState(function() {
-      return n.initialState;
-    }, function() {
-      n.removeSVG(), n.renderSVG();
-    });
-  }, o.componentWillUnmount = function() {
-    this._isMounted = !1, this.removeSVG();
-  }, o.render = function() {
-    var e = this.props;
-    e.afterInjection, e.beforeInjection, e.desc, e.evalScripts;
-    var n = e.fallback;
-    e.httpRequestWithCredentials;
-    var a = e.loading;
-    e.renumerateIRIElements, e.src, e.title, e.useRequestCache;
-    var u = e.wrapper, S = N(e, H), E = u;
-    return /* @__PURE__ */ h.createElement(E, C({}, S, {
-      ref: this.refCallback
-    }, u === "svg" ? {
-      xmlns: v,
-      xmlnsXlink: q
-    } : {}), this.state.isLoading && a && /* @__PURE__ */ h.createElement(a, null), this.state.hasError && n && /* @__PURE__ */ h.createElement(n, null));
-  }, s;
-}(h.Component);
-V.defaultProps = {
-  afterInjection: function() {
-  },
-  beforeInjection: function() {
-  },
-  desc: "",
-  evalScripts: "never",
-  fallback: null,
-  httpRequestWithCredentials: !1,
-  loading: null,
-  onError: function() {
-  },
-  renumerateIRIElements: !0,
-  title: "",
-  useRequestCache: !0,
-  wrapper: "div"
-};
-V.propTypes = {
-  afterInjection: t.func,
-  beforeInjection: t.func,
-  desc: t.string,
-  evalScripts: t.oneOf(["always", "once", "never"]),
-  fallback: t.oneOfType([t.func, t.object, t.string]),
-  httpRequestWithCredentials: t.bool,
-  loading: t.oneOfType([t.func, t.object, t.string]),
-  onError: t.func,
-  renumerateIRIElements: t.bool,
-  src: t.string.isRequired,
-  title: t.string,
-  useRequestCache: t.bool,
-  wrapper: t.oneOf(["div", "span", "svg"])
+  );
 };
 export {
-  V as ReactSVG
+  x as Popup
 };
 //# sourceMappingURL=index13.js.map

package/dist/index13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index13.js","sources":["../node_modules/react-svg/dist/react-svg.esm.js"],"sourcesContent":["import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';\nimport _extends from '@babel/runtime/helpers/extends';\nimport _inheritsLoose from '@babel/runtime/helpers/inheritsLoose';\nimport { SVGInjector } from '@tanem/svg-injector';\nimport * as PropTypes from 'prop-types';\nimport * as React from 'react';\n\n// Hat-tip: https://github.com/mui/material-ui/tree/master/packages/mui-utils/src.\nvar ownerWindow = function ownerWindow(node) {\n  var doc = (node == null ? void 0 : node.ownerDocument) || document;\n  return doc.defaultView || window;\n};\n\n// Hat-tip: https://github.com/developit/preact-compat/blob/master/src/index.js#L402.\nvar shallowDiffers = function shallowDiffers(a, b) {\n  for (var i in a) {\n    if (!(i in b)) {\n      return true;\n    }\n  }\n  for (var _i in b) {\n    if (a[_i] !== b[_i]) {\n      return true;\n    }\n  }\n  return false;\n};\n\nvar _excluded = [\"afterInjection\", \"beforeInjection\", \"desc\", \"evalScripts\", \"fallback\", \"httpRequestWithCredentials\", \"loading\", \"renumerateIRIElements\", \"src\", \"title\", \"useRequestCache\", \"wrapper\"];\nvar svgNamespace = 'http://www.w3.org/2000/svg';\nvar xlinkNamespace = 'http://www.w3.org/1999/xlink';\nvar ReactSVG = /*#__PURE__*/function (_React$Component) {\n  function ReactSVG() {\n    var _this;\n    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n    _this.initialState = {\n      hasError: false,\n      isLoading: true\n    };\n    _this.state = _this.initialState;\n    _this._isMounted = false;\n    _this.reactWrapper = void 0;\n    _this.nonReactWrapper = void 0;\n    _this.refCallback = function (reactWrapper) {\n      _this.reactWrapper = reactWrapper;\n    };\n    return _this;\n  }\n  _inheritsLoose(ReactSVG, _React$Component);\n  var _proto = ReactSVG.prototype;\n  _proto.renderSVG = function renderSVG() {\n    var _this2 = this;\n    /* istanbul ignore else */\n    if (this.reactWrapper instanceof ownerWindow(this.reactWrapper).Node) {\n      var _this$props = this.props,\n        desc = _this$props.desc,\n        evalScripts = _this$props.evalScripts,\n        httpRequestWithCredentials = _this$props.httpRequestWithCredentials,\n        renumerateIRIElements = _this$props.renumerateIRIElements,\n        src = _this$props.src,\n        title = _this$props.title,\n        useRequestCache = _this$props.useRequestCache;\n      /* eslint-disable @typescript-eslint/no-non-null-assertion */\n      var onError = this.props.onError;\n      var beforeInjection = this.props.beforeInjection;\n      var afterInjection = this.props.afterInjection;\n      var wrapper = this.props.wrapper;\n      var nonReactWrapper;\n      var nonReactTarget;\n      if (wrapper === 'svg') {\n        nonReactWrapper = document.createElementNS(svgNamespace, wrapper);\n        nonReactWrapper.setAttribute('xmlns', svgNamespace);\n        nonReactWrapper.setAttribute('xmlns:xlink', xlinkNamespace);\n        nonReactTarget = document.createElementNS(svgNamespace, wrapper);\n      } else {\n        nonReactWrapper = document.createElement(wrapper);\n        nonReactTarget = document.createElement(wrapper);\n      }\n      nonReactWrapper.appendChild(nonReactTarget);\n      nonReactTarget.dataset.src = src;\n      this.nonReactWrapper = this.reactWrapper.appendChild(nonReactWrapper);\n      var handleError = function handleError(error) {\n        _this2.removeSVG();\n        if (!_this2._isMounted) {\n          onError(error);\n          return;\n        }\n        _this2.setState(function () {\n          return {\n            hasError: true,\n            isLoading: false\n          };\n        }, function () {\n          onError(error);\n        });\n      };\n      var afterEach = function afterEach(error, svg) {\n        if (error) {\n          handleError(error);\n          return;\n        }\n        // TODO (Tane): It'd be better to cleanly unsubscribe from SVGInjector\n        // callbacks instead of tracking a property like this.\n        if (_this2._isMounted) {\n          _this2.setState(function () {\n            return {\n              isLoading: false\n            };\n          }, function () {\n            try {\n              afterInjection(svg);\n            } catch (afterInjectionError) {\n              handleError(afterInjectionError);\n            }\n          });\n        }\n      };\n      var beforeEach = function beforeEach(svg) {\n        svg.setAttribute('role', 'img');\n        if (desc) {\n          var originalDesc = svg.querySelector(':scope > desc');\n          if (originalDesc) {\n            svg.removeChild(originalDesc);\n          }\n          var newDesc = document.createElement('desc');\n          newDesc.innerHTML = desc;\n          svg.prepend(newDesc);\n        }\n        if (title) {\n          var originalTitle = svg.querySelector(':scope > title');\n          if (originalTitle) {\n            svg.removeChild(originalTitle);\n          }\n          var newTitle = document.createElement('title');\n          newTitle.innerHTML = title;\n          svg.prepend(newTitle);\n        }\n        try {\n          beforeInjection(svg);\n        } catch (error) {\n          handleError(error);\n        }\n      };\n      SVGInjector(nonReactTarget, {\n        afterEach: afterEach,\n        beforeEach: beforeEach,\n        cacheRequests: useRequestCache,\n        evalScripts: evalScripts,\n        httpRequestWithCredentials: httpRequestWithCredentials,\n        renumerateIRIElements: renumerateIRIElements\n      });\n    }\n  };\n  _proto.removeSVG = function removeSVG() {\n    var _this$nonReactWrapper;\n    if ((_this$nonReactWrapper = this.nonReactWrapper) != null && _this$nonReactWrapper.parentNode) {\n      this.nonReactWrapper.parentNode.removeChild(this.nonReactWrapper);\n      this.nonReactWrapper = null;\n    }\n  };\n  _proto.componentDidMount = function componentDidMount() {\n    this._isMounted = true;\n    this.renderSVG();\n  };\n  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n    var _this3 = this;\n    if (shallowDiffers(_extends({}, prevProps), this.props)) {\n      this.setState(function () {\n        return _this3.initialState;\n      }, function () {\n        _this3.removeSVG();\n        _this3.renderSVG();\n      });\n    }\n  };\n  _proto.componentWillUnmount = function componentWillUnmount() {\n    this._isMounted = false;\n    this.removeSVG();\n  };\n  _proto.render = function render() {\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    var _this$props2 = this.props;\n      _this$props2.afterInjection;\n      _this$props2.beforeInjection;\n      _this$props2.desc;\n      _this$props2.evalScripts;\n      var Fallback = _this$props2.fallback;\n      _this$props2.httpRequestWithCredentials;\n      var Loading = _this$props2.loading;\n      _this$props2.renumerateIRIElements;\n      _this$props2.src;\n      _this$props2.title;\n      _this$props2.useRequestCache;\n      var wrapper = _this$props2.wrapper,\n      rest = _objectWithoutPropertiesLoose(_this$props2, _excluded);\n    /* eslint-enable @typescript-eslint/no-unused-vars */\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    var Wrapper = wrapper;\n    return /*#__PURE__*/React.createElement(Wrapper, _extends({}, rest, {\n      ref: this.refCallback\n    }, wrapper === 'svg' ? {\n      xmlns: svgNamespace,\n      xmlnsXlink: xlinkNamespace\n    } : {}), this.state.isLoading && Loading && /*#__PURE__*/React.createElement(Loading, null), this.state.hasError && Fallback && /*#__PURE__*/React.createElement(Fallback, null));\n  };\n  return ReactSVG;\n}(React.Component);\nReactSVG.defaultProps = {\n  afterInjection: function afterInjection() {\n    return undefined;\n  },\n  beforeInjection: function beforeInjection() {\n    return undefined;\n  },\n  desc: '',\n  evalScripts: 'never',\n  fallback: null,\n  httpRequestWithCredentials: false,\n  loading: null,\n  onError: function onError() {\n    return undefined;\n  },\n  renumerateIRIElements: true,\n  title: '',\n  useRequestCache: true,\n  wrapper: 'div'\n};\nReactSVG.propTypes = {\n  afterInjection: PropTypes.func,\n  beforeInjection: PropTypes.func,\n  desc: PropTypes.string,\n  evalScripts: PropTypes.oneOf(['always', 'once', 'never']),\n  fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),\n  httpRequestWithCredentials: PropTypes.bool,\n  loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.string]),\n  onError: PropTypes.func,\n  renumerateIRIElements: PropTypes.bool,\n  src: PropTypes.string.isRequired,\n  title: PropTypes.string,\n  useRequestCache: PropTypes.bool,\n  wrapper: PropTypes.oneOf(['div', 'span', 'svg'])\n} ;\n\nexport { ReactSVG };\n//# sourceMappingURL=react-svg.esm.js.map\n"],"names":["ownerWindow","node","doc","shallowDiffers","a","b","i","_i","_excluded","svgNamespace","xlinkNamespace","ReactSVG","_React$Component","_this","_len","args","_key","reactWrapper","_inheritsLoose","_proto","_this2","_this$props","desc","evalScripts","httpRequestWithCredentials","renumerateIRIElements","src","title","useRequestCache","onError","beforeInjection","afterInjection","wrapper","nonReactWrapper","nonReactTarget","handleError","error","afterEach","svg","afterInjectionError","beforeEach","originalDesc","newDesc","originalTitle","newTitle","SVGInjector","_this$nonReactWrapper","prevProps","_this3","_extends","_this$props2","Fallback","Loading","rest","_objectWithoutPropertiesLoose","Wrapper","React","PropTypes.func","PropTypes.string","PropTypes.oneOf","PropTypes.oneOfType","PropTypes.object","PropTypes.bool"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index13.js","sources":["../src/components/Popup/index.tsx"],"sourcesContent":["import { FC, useState, useRef, ReactNode, useEffect } from 'react';\n\nexport interface PopupProps {\n  className?: string;\n  automationId?: string;\n  popupContentAutomationId?: string;\n  renderPopupContents: (props: { closePopupCb: () => void }) => ReactNode;\n  renderPopupSrcElement: (props: { displayPopup: boolean }) => ReactNode;\n  position?: \"bottom-center\" | \"bottom-left\" | \"bottom-right\";\n}\n\nexport const Popup: FC<PopupProps> = ({\n  className = '',\n  automationId = '',\n  position = '',\n  popupContentAutomationId = '',\n  renderPopupContents,\n  renderPopupSrcElement,\n  ...props\n}) => {\n  const [displayPopup, setDisplayPopup] = useState(false);\n  const srcElementRef = useRef<HTMLDivElement>(null);\n  const popupContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (displayPopup) {\n      const popupContent = popupContentRef.current;\n\n      if(!popupContent) {\n        return\n      }\n      if(position == 'bottom-left') {\n        popupContent.style.left = '0';\n      } else if(position == 'bottom-right') {\n        popupContent.style.right = '0';\n      } else {\n        popupContent.style.left = '50%';\n        popupContent.style.transform = 'translateX(-50%)';\n      }\n\n      document.body.addEventListener('click', clickListener);\n      return () => document.body.removeEventListener('click', clickListener);\n    }\n  }, [displayPopup]);\n  \n  const clickListener = (event: MouseEvent) => {\n    const currentDropRef = srcElementRef.current;\n    if (!currentDropRef) return;\n\n    const target = event.target as Node;\n    const isSourcePopover = currentDropRef.contains(target);\n    // if clicked source is parent or the popover-content, do not toggle dropdown.\n    if (!isSourcePopover) {\n      setDisplayPopup(false);\n    }\n  };\n\n  const togglePopup = () => {\n    setDisplayPopup((displayPopup) => !displayPopup);\n  };\n\n  return (\n    <div\n      className={'popup-wrapper cursor-pointer relative' + (className.length > 0 ? ` ${className}` : '') + (displayPopup ? ' open' : '')}\n      ref={srcElementRef}\n      onClick={togglePopup}\n      data-automation-id={automationId}\n      {...props}\n    >\n      {renderPopupSrcElement({ displayPopup })}\n      {displayPopup && (\n        <div\n          className={`popup-content absolute p-2 shadow-md top-full border rounded-md w-max`}\n          style={{\n            borderColor: 'var(--color-gray-200)',\n            color: 'var(--color-gray-900)',\n            backgroundColor: 'var(--color-white)'\n          }}\n          onClick={(e) => e.stopPropagation()}\n          ref={popupContentRef}\n          data-automation-id={popupContentAutomationId}\n        >\n          {renderPopupContents({ closePopupCb: () => setDisplayPopup(false) })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Popup","className","automationId","position","popupContentAutomationId","renderPopupContents","renderPopupSrcElement","props","displayPopup","setDisplayPopup","useState","srcElementRef","useRef","popupContentRef","useEffect","popupContent","clickListener","event","currentDropRef","target","togglePopup","jsxs","jsx","e"],"mappings":";;AAWO,MAAMA,IAAwB,CAAC;AAAA,EACpC,WAAAC,IAAY;AAAA,EACZ,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,0BAAAC,IAA2B;AAAA,EAC3B,qBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAgBC,EAAuB,IAAI,GAC3CC,IAAkBD,EAAuB,IAAI;AAEnD,EAAAE,EAAU,MAAM;AACd,QAAIN,GAAc;AAChB,YAAMO,IAAeF,EAAgB;AAErC,aAAIE,KAGDZ,KAAY,gBACbY,EAAa,MAAM,OAAO,MAClBZ,KAAY,iBACpBY,EAAa,MAAM,QAAQ,OAE3BA,EAAa,MAAM,OAAO,OAC1BA,EAAa,MAAM,YAAY,qBAGxB,SAAA,KAAK,iBAAiB,SAASC,CAAa,GAC9C,MAAM,SAAS,KAAK,oBAAoB,SAASA,CAAa,KAZnE;AAAA,IAaJ;AAAA,EAAA,GACC,CAACR,CAAY,CAAC;AAEX,QAAAQ,IAAgB,CAACC,MAAsB;AAC3C,UAAMC,IAAiBP,EAAc;AACrC,QAAI,CAACO,EAAgB;AAErB,UAAMC,IAASF,EAAM;AAGrB,IAFwBC,EAAe,SAASC,CAAM,KAGpDV,EAAgB,EAAK;AAAA,EACvB,GAGIW,IAAc,MAAM;AACR,IAAAX,EAAA,CAACD,MAAiB,CAACA,CAAY;AAAA,EAAA;AAI/C,SAAAa,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,2CAA2CpB,EAAU,SAAS,IAAI,IAAIA,CAAS,KAAK,OAAOO,IAAe,UAAU;AAAA,MAC/H,KAAKG;AAAA,MACL,SAASS;AAAA,MACT,sBAAoBlB;AAAA,MACnB,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAsBD,EAAA,EAAE,cAAAE,GAAc;AAAA,QACtCA,KACCc,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,YACX,OAAO;AAAA,cACL,aAAa;AAAA,cACb,OAAO;AAAA,cACP,iBAAiB;AAAA,YACnB;AAAA,YACA,SAAS,CAACC,MAAMA,EAAE,gBAAgB;AAAA,YAClC,KAAKV;AAAA,YACL,sBAAoBT;AAAA,YAEnB,YAAoB,EAAE,cAAc,MAAMK,EAAgB,EAAK,GAAG;AAAA,UAAA;AAAA,QACrE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/index14.js

@@ -1,10 +1,15 @@
-const o = [
-  "pages",
-  "back",
-  "close",
-  "down"
-];
+import { j as e } from "./index18.js";
+const i = ({
+  leftContainer: r,
+  centerContainer: x,
+  rightContainer: s,
+  ...t
+}) => /* @__PURE__ */ e.jsxs("header", { className: `sticky top-0 h-[35px] w-full z-[1000] bg-gradient-to-r from-[#48AFF1] to-[#5F79AC] flex justify-between items-center ${(t == null ? void 0 : t.type) === "fixed" ? "fixed left-0 right-0 top-0" : ""}`, children: [
+  r && /* @__PURE__ */ e.jsx(e.Fragment, { children: r }),
+  x && /* @__PURE__ */ e.jsx(e.Fragment, { children: x }),
+  s && /* @__PURE__ */ e.jsx(e.Fragment, { children: s })
+] });
 export {
-  o as iconNames
+  i as Header
 };
 //# sourceMappingURL=index14.js.map