@ntbjs/react-components 2.0.0-rc.9 → 2.0.1-rc.31

package/build/widgets/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenu.styled';\n\n/**\n * This component wraps around an array of `ContextMenuItems` to display a context menu.\n *\n * In most use-cases, the `ContextMenu` will be wrapped in a `Popover` to provide the functionality for opening/closing and placing the menu.\n * In such cases, send the `ContextMenu` to the `Popover` as its `content` prop.\n *\n * The context menu and sublevels will automatically adjust their placement in relation to the element that opens it\n * based on available space if the provided placement doesn't work. See the `Popover` documentation for further instructions on placement.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenu } from '@ntbjs/react-components/widgets'\n * // or\n * import ContextMenu from '@ntbjs/react-components/widgets/ContextMenu'\n * ```\n * \n * ### Usage examples \n * #### Plain context menu\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with grouped items\n * Use the `ContextMenuItemsGroup` component to group menu items together. Grouped items will not show borders\n * between themselves, indicating that their actions are related.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\nconst groupItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-1\" />:\nconst groupItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-2\" />;\nconst groupItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-3\" />;\n\nconst itemGroup1 = <ContextMenuItemsGroup key=\"item-group-1\">{[groupItem1, groupItem2, groupItem3]}</ContextMenuItemsGroup>;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with sublevels\n * Wrap a `ContextMenuItem` in a `Popover` and pass it a `ContextMenu` as child to create a sublevel/submenu. \n * A sublevel will by default be placed adjacent and aligned with the `ContextMenuItem` which opens it,\n * and adjust automatically based on available space.\n * \n * Set the `contextMenu` and `contextMenuSublevel` props of the `Popover` containing the sublevel to `true`.\n * \n * Set the `opensSublevel` prop of the `ContextMenuItem` containing the sublevel to `true`.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} hoverBackgroundColors={['#fbeae6', '#fbeae6']} key=\"item-2\" />;\n\nconst subItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-1\" />\nconst subItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-2\" />\nconst subItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-3\" />\n\nconst itemWithSublevel = (\n  <Popover\n    content={\n      <ContextMenu sublevel={true}>\n        {[subItem1, subItem2, subItem3, subItem4, subItem5]}\n      </ContextMenu>\n    }\n    contextMenu={true}\n    contextMenuSublevel={true}\n    key=\"item-3\"\n  >\n    <ContextMenuItem title=\"Open level 2\" opensSublevel={true} />\n  </Popover>\n);\n\n<Popover content={<ContextMenu {...args}>{[item1, item2, itemWithSublevel]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * \n * #### Context menu from a dropdown button\n * When used with a dropdown button, the `Button` component takes care of wrapping the menu items in a `Popover`.\n * Just pass the array of `ContextMenuItems` directly into the `Button` as its children.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-2\" />;\nconst item3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-3\" />;\n\n<Button onClick={onClickEffect} dropdownItems={<ContextMenu {...args}>{[item1, item2, item3, item4, item5]}</ContextMenu>}>\n  Button text\n</Button>\n```\n *\n */\nconst ContextMenu = React.forwardRef(function ContextMenu({ children, ...props }, forwardedRef) {\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key !== 'sublevel')\n  );\n\n  return (\n    <S.ContextMenu ref={forwardedRef} {...filteredProps} role=\"menu\">\n      {children}\n    </S.ContextMenu>\n  );\n});\n\nContextMenu.propTypes = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children: PropTypes.any\n};\n\nContextMenu.defaultProps = {};\n\nexport default ContextMenu;\n"],"names":["ContextMenu","React","forwardRef","children","props","forwardedRef","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","role","propTypes","process","env","NODE_ENV","PropTypes","any","defaultProps"],"mappings":";;;;;AA6GMA,MAAAA,WAAW,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,WAAWA,CAAC;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EAC9F,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAKA,GAAG,KAAK,UAAU,CAC5D,CAAC,CAAA;EAED,OACEV,cAAA,CAAAW,aAAA,CAACC,aAAa,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEV,YAAAA;AAAa,GAAA,EAAKC,aAAa,EAAA;AAAEU,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,CAAA,EAC7Db,QACY,CAAC,CAAA;AAEpB,CAAC,EAAC;AAEFH,WAAW,CAACiB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAItBjB,QAAQ,EAAEkB,SAAS,CAACC,GAAAA;AACtB,CAAC,GAAA,EAAA,CAAA;AAEDtB,WAAW,CAACuB,YAAY,GAAG,EAAE;;;;"}

package/build/widgets/ContextMenu/ContextMenu.styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const ContextMenu = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  padding: 3px 0;
+`;
+
+export { ContextMenu };
+//# sourceMappingURL=ContextMenu.styled.js.map

package/build/widgets/ContextMenu/ContextMenu.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.styled.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenu = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  padding: 3px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenu","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,WAAW,GAAGC,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;;;;"}

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -0,0 +1,44 @@
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { ContextMenuItem as ContextMenuItem$1, IconContainer, SublevelIconContainer } from './ContextMenuItem.styled.js';
+import { ReactComponent as SvgTriangleRight } from '../../../icons/triangle-right.svg.js';
+
+const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
+  title,
+  icon,
+  onClickEffect,
+  opensSublevel,
+  hoverColors,
+  hoverBackgroundColors,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenuItem$1, _extends({
+    ref: forwardedRef,
+    $icon: icon,
+    onClick: onClickEffect,
+    $hoverColors: hoverColors,
+    $hoverBackgroundColors: hoverBackgroundColors,
+    $openssublevel: opensSublevel,
+    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
+  }, props, {
+    role: "menuitem"
+  }), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement("span", null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
+});
+ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.element,
+  onClickEffect: PropTypes.func,
+  opensSublevel: PropTypes.bool,
+  hoverColors: PropTypes.arrayOf(PropTypes.string),
+  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
+} : {};
+ContextMenuItem.defaultProps = {
+  icon: undefined,
+  hoverColors: undefined,
+  hoverBackgroundColors: undefined,
+  opensSublevel: false
+};
+
+export { ContextMenuItem as default };
+//# sourceMappingURL=ContextMenuItem.js.map

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n  { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItem\n      ref={forwardedRef}\n      $icon={icon}\n      onClick={onClickEffect}\n      $hoverColors={hoverColors}\n      $hoverBackgroundColors={hoverBackgroundColors}\n      $openssublevel={opensSublevel}\n      className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n      {...props}\n      role=\"menuitem\"\n    >\n      {icon && <S.IconContainer>{icon}</S.IconContainer>}\n      <span>{title}</span>\n      {opensSublevel && (\n        <S.SublevelIconContainer>\n          <TriangleRightIcon />\n        </S.SublevelIconContainer>\n      )}\n    </S.ContextMenuItem>\n  );\n});\n\nContextMenuItem.propTypes = {\n  /**\n   * Menu item text\n   */\n  title: PropTypes.string.isRequired,\n\n  /**\n   * Optional icon (left side)\n   */\n  icon: PropTypes.element,\n\n  /**\n   * Function to trigger when the item is clicked\n   */\n  onClickEffect: PropTypes.func,\n\n  /**\n   * Whether the `ContextMenuItem` opens another `ContextMenu`\n   */\n  opensSublevel: PropTypes.bool,\n\n  /**\n   * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverColors: PropTypes.arrayOf(PropTypes.string),\n\n  /**\n   * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)\n};\n\nContextMenuItem.defaultProps = {\n  icon: undefined,\n  hoverColors: undefined,\n  hoverBackgroundColors: undefined,\n  opensSublevel: false\n};\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","createElement","S","_extends","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","TriangleRightIcon","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","element","func","bool","arrayOf","defaultProps","undefined"],"mappings":";;;;;;AAmBMA,MAAAA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,eAAeA,CAC/D;EAAEG,KAAK;EAAEC,IAAI;EAAEC,aAAa;EAAEC,aAAa;EAAEC,WAAW;EAAEC,qBAAqB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC3FC,YAAY,EACZ;EACA,OACET,cAAA,CAAAU,aAAA,CAACC,iBAAiB,EAAAC,QAAA,CAAA;AAChBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEX,aAAc;AACvBY,IAAAA,YAAY,EAAEV,WAAY;AAC1BW,IAAAA,sBAAsB,EAAEV,qBAAsB;AAC9CW,IAAAA,cAAc,EAAEb,aAAc;AAC9Bc,IAAAA,SAAS,EAAEd,aAAa,GAAG,kCAAkC,GAAG,mBAAA;AAAoB,GAAA,EAChFG,KAAK,EAAA;AACTY,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,EAEdjB,IAAI,IAAIH,cAAA,CAAAU,aAAA,CAACC,aAAe,EAAA,IAAA,EAAER,IAAsB,CAAC,EAClDH,cAAA,CAAAU,aAAA,eAAOR,KAAY,CAAC,EACnBG,aAAa,IACZL,cAAA,CAAAU,aAAA,CAACC,qBAAuB,EACtBX,IAAAA,EAAAA,cAAA,CAAAU,aAAA,CAACW,gBAAiB,EAAE,IAAA,CACG,CAEV,CAAC,CAAA;AAExB,CAAC,EAAC;AAEFtB,eAAe,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI1BvB,EAAAA,KAAK,EAAEwB,SAAS,CAACC,MAAM,CAACC,UAAU;EAKlCzB,IAAI,EAAEuB,SAAS,CAACG,OAAO;EAKvBzB,aAAa,EAAEsB,SAAS,CAACI,IAAI;EAK7BzB,aAAa,EAAEqB,SAAS,CAACK,IAAI;EAM7BzB,WAAW,EAAEoB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAC;AAMhDpB,EAAAA,qBAAqB,EAAEmB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAA;AAC3D,CAAC,GAAA,EAAA,CAAA;AAED5B,eAAe,CAACkC,YAAY,GAAG;AAC7B9B,EAAAA,IAAI,EAAE+B,SAAS;AACf5B,EAAAA,WAAW,EAAE4B,SAAS;AACtB3B,EAAAA,qBAAqB,EAAE2B,SAAS;AAChC7B,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC;;;;"}

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js

@@ -0,0 +1,86 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const ContextMenuItem = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 0.875rem;
+  font-weight: normal;
+  height: 31px;
+  min-width: 160px;
+  padding: ${props => props.$openssublevel ? '0 8px' : '0 28px 0 8px'};
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}
+
+  ${props => !props.$icon && css`
+      padding-left: 28px;
+    `}
+
+  :not(:last-of-type) {
+    border-bottom: 1px solid;
+
+    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
+  }
+
+  :last-of-type {
+    height: 32px;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
+  }
+
+  ${props => props.$openssublevelhoverColors && props.$hoverColors[0] && props.$hoverColors[1] && css`
+      &&:hover {
+        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
+      }
+    `}
+
+  ${props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && css`
+      &&:hover {
+        ${props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])}
+      }
+    `}
+`;
+const IconContainer = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-right: 8px;
+
+  svg {
+    height: 12px;
+  }
+`;
+const SublevelIconContainer = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding-left: 24px;
+
+  svg {
+    height: 12px;
+  }
+`;
+
+export { ContextMenuItem, IconContainer, SublevelIconContainer };
+//# sourceMappingURL=ContextMenuItem.styled.js.map

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItem = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 0.875rem;\n  font-weight: normal;\n  height: 31px;\n  min-width: 160px;\n  padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n  ${props =>\n    !props.$icon &&\n    css`\n      padding-left: 28px;\n    `}\n\n  :not(:last-of-type) {\n    border-bottom: 1px solid;\n\n    ${props =>\n      props.theme.themeProp(\n        'border-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  :last-of-type {\n    height: 32px;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  ${props =>\n    props.$openssublevelhoverColors &&\n    props.$hoverColors[0] &&\n    props.$hoverColors[1] &&\n    css`\n      &&:hover {\n        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}\n      }\n    `}\n\n  ${props =>\n    props.$hoverBackgroundColors &&\n    props.$hoverBackgroundColors[0] &&\n    props.$hoverBackgroundColors[1] &&\n    css`\n      &&:hover {\n        ${props =>\n          props.theme.themeProp(\n            'background-color',\n            props.$hoverBackgroundColors[0],\n            props.$hoverBackgroundColors[1]\n          )}\n      }\n    `}\n`;\n\nexport const IconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-right: 8px;\n\n  svg {\n    height: 12px;\n  }\n`;\n\nexport const SublevelIconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-left: auto;\n  margin-right: 8px;\n  padding-left: 24px;\n\n  svg {\n    height: 12px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItem","styled","span","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","$openssublevel","themeProp","getColor","$icon","css","$openssublevelhoverColors","$hoverColors","hoverColors","$hoverBackgroundColors","IconContainer","SublevelIconContainer"],"mappings":"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"}

package/build/widgets/ContextMenu/ContextMenuItem/index.js

@@ -0,0 +1,2 @@
+export { default } from './ContextMenuItem.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/ContextMenu/ContextMenuItem/index.js.map

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

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -0,0 +1,22 @@
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { ContextMenuItemsGroup as ContextMenuItemsGroup$1 } from './ContextMenuItemsGroup.styled.js';
+
+const ContextMenuItemsGroup = React__default.forwardRef(function ContextMenuItemsGroup({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenuItemsGroup$1, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "group"
+  }), children);
+});
+ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.arrayOf(PropTypes.node)
+} : {};
+ContextMenuItemsGroup.defaultProps = {};
+
+export { ContextMenuItemsGroup as default };
+//# sourceMappingURL=ContextMenuItemsGroup.js.map

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItemsGroup.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItemsGroup.styled';\n\n/**\n * Simple wrapper for a group of context menu items. These will be displayed without a border between each item.\n *\n * See the documentation for `ContextMenu` for an example.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItemsGroup } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItemsGroup from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItemsGroup'\n * ```\n *\n */\nconst ContextMenuItemsGroup = React.forwardRef(function ContextMenuItemsGroup(\n  { children, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItemsGroup ref={forwardedRef} {...props} role=\"group\">\n      {children}\n    </S.ContextMenuItemsGroup>\n  );\n});\n\nContextMenuItemsGroup.propTypes = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children: PropTypes.arrayOf(PropTypes.node)\n};\n\nContextMenuItemsGroup.defaultProps = {};\n\nexport default ContextMenuItemsGroup;\n"],"names":["ContextMenuItemsGroup","React","forwardRef","children","props","forwardedRef","createElement","S","_extends","ref","role","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","node","defaultProps"],"mappings":";;;;;AAkBMA,MAAAA,qBAAqB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,qBAAqBA,CAC3E;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EACtBC,YAAY,EACZ;EACA,OACEJ,cAAA,CAAAK,aAAA,CAACC,uBAAuB,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EAAKD,KAAK,EAAA;AAAEM,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,CAAA,EAChEP,QACsB,CAAC,CAAA;AAE9B,CAAC,EAAC;AAEFH,qBAAqB,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIhCX,EAAAA,QAAQ,EAAEY,SAAS,CAACC,OAAO,CAACD,SAAS,CAACE,IAAI,CAAA;AAC5C,CAAC,GAAA,EAAA,CAAA;AAEDjB,qBAAqB,CAACkB,YAAY,GAAG,EAAE;;;;"}

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const ContextMenuItemsGroup = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  :not(:last-child) {
+    border-bottom: 1px solid;
+
+    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
+  }
+
+  > * {
+    border-bottom: none !important;
+  }
+
+  > *:not(:last-child) {
+    height: 32px;
+  }
+`;
+
+export { ContextMenuItemsGroup };
+//# sourceMappingURL=ContextMenuItemsGroup.styled.js.map

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItemsGroup = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  :not(:last-child) {\n    border-bottom: 1px solid;\n\n    ${props =>\n      props.theme.themeProp(\n        'border-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  > * {\n    border-bottom: none !important;\n  }\n\n  > *:not(:last-child) {\n    height: 32px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItemsGroup","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","themeProp","getColor"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,qBAAqB,GAAGC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,IAAMC,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/build/widgets/ContextMenu/ContextMenuItemsGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from './ContextMenuItemsGroup.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/ContextMenu/ContextMenuItemsGroup/index.js.map

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

package/build/widgets/ContextMenu/index.js

@@ -0,0 +1,2 @@
+export { default } from './ContextMenu.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/ContextMenu/index.js.map

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

package/build/widgets/InfoCard/InfoCard.js

@@ -0,0 +1,40 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Container, MetricsContainer, IconTotalContainer, IconContainer, Total, Label, Link, ButtonLink, StyledArrowIcon } from './InfoCard.styled.js';
+
+const InfoCard = React__default.forwardRef(function InfoCard({
+  icon,
+  total,
+  label,
+  linkLabel,
+  onClick,
+  height,
+  ...props
+}, forwardedRef) {
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
+  const handleLinkClick = e => onClick(e);
+  return React__default.createElement(Container, _extends({
+    height: height,
+    ref: forwardedRef
+  }, props), React__default.createElement(MetricsContainer, null, React__default.createElement(IconTotalContainer, null, React__default.createElement(IconContainer, null, icon), React__default.createElement(Total, null, total)), React__default.createElement(Label, null, label)), linkLabel && onClick && React__default.createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React__default.createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkLabel), React__default.createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })));
+});
+InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.element.isRequired,
+  total: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  linkLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  height: PropTypes.number
+} : {};
+
+export { InfoCard as default };
+//# sourceMappingURL=InfoCard.js.map

package/build/widgets/InfoCard/InfoCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.js","sources":["../../../src/components/widgets/InfoCard/InfoCard.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InfoCard.styled';\n\n/**\n * Info Card\n *\n * ### Import\n *\n * ``` js\n * import { InfoCard } from '@ntbjs/react-components/widgets'\n * // or\n * import InfoCard from '@ntbjs/react-components/widgets/InfoCard'\n * ```\n *\n * ### Props\n * ```\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `total={100}` to display number.\n * Pass `label={\"this is a label\"}` to display a label.\n * Pass `linkLabel={\"this is a label\"}` to display a link next to the arrow icon.\n * Pass `height={50}` to adjust the card´s height.\n * Pass `onClick={function}` to handle click event.\n * ```\n */\n\nconst InfoCard = React.forwardRef(function InfoCard(\n  { icon, total, label, linkLabel, onClick, height, ...props },\n  forwardedRef\n) {\n  const [isLinkHovered, setIsLinkHovered] = useState(false);\n\n  const handleLinkClick = e => onClick(e);\n\n  return (\n    <S.Container height={height} ref={forwardedRef} {...props}>\n      <S.MetricsContainer>\n        <S.IconTotalContainer>\n          <S.IconContainer>{icon}</S.IconContainer>\n          <S.Total>{total}</S.Total>\n        </S.IconTotalContainer>\n        <S.Label>{label}</S.Label>\n      </S.MetricsContainer>\n      {linkLabel && onClick && (\n        <S.Link\n          onClick={handleLinkClick}\n          onMouseEnter={() => setIsLinkHovered(true)}\n          onMouseLeave={() => setIsLinkHovered(false)}\n        >\n          <S.ButtonLink $isHovered={isLinkHovered}>{linkLabel}</S.ButtonLink>\n          <S.StyledArrowIcon $isHovered={isLinkHovered} />\n        </S.Link>\n      )}\n    </S.Container>\n  );\n});\n\nInfoCard.propTypes = {\n  icon: PropTypes.element.isRequired,\n  total: PropTypes.number.isRequired,\n  label: PropTypes.string.isRequired,\n  linkLabel: PropTypes.string,\n  onClick: PropTypes.func,\n  height: PropTypes.number\n};\n\nexport default InfoCard;\n"],"names":["InfoCard","React","forwardRef","icon","total","label","linkLabel","onClick","height","props","forwardedRef","isLinkHovered","setIsLinkHovered","useState","handleLinkClick","e","createElement","S","_extends","ref","onMouseEnter","onMouseLeave","$isHovered","propTypes","process","env","NODE_ENV","PropTypes","element","isRequired","number","string","func"],"mappings":";;;;;AA0BMA,MAAAA,QAAQ,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,QAAQA,CACjD;EAAEG,IAAI;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC,OAAO;EAAEC,MAAM;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC5DC,YAAY,EACZ;EACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEzD,EAAA,MAAMC,eAAe,GAAGC,CAAC,IAAIR,OAAO,CAACQ,CAAC,CAAC,CAAA;EAEvC,OACEd,cAAA,CAAAe,aAAA,CAACC,SAAW,EAAAC,QAAA,CAAA;AAACV,IAAAA,MAAM,EAAEA,MAAO;AAACW,IAAAA,GAAG,EAAET,YAAAA;AAAa,GAAA,EAAKD,KAAK,CAAA,EACvDR,cAAA,CAAAe,aAAA,CAACC,gBAAkB,EAAA,IAAA,EACjBhB,cAAA,CAAAe,aAAA,CAACC,kBAAoB,EAAA,IAAA,EACnBhB,cAAA,CAAAe,aAAA,CAACC,aAAe,EAAA,IAAA,EAAEd,IAAsB,CAAC,EACzCF,cAAA,CAAAe,aAAA,CAACC,KAAO,EAAA,IAAA,EAAEb,KAAe,CACL,CAAC,EACvBH,cAAA,CAAAe,aAAA,CAACC,KAAO,EAAEZ,IAAAA,EAAAA,KAAe,CACP,CAAC,EACpBC,SAAS,IAAIC,OAAO,IACnBN,cAAA,CAAAe,aAAA,CAACC,IAAM,EAAA;AACLV,IAAAA,OAAO,EAAEO,eAAgB;AACzBM,IAAAA,YAAY,EAAEA,MAAMR,gBAAgB,CAAC,IAAI,CAAE;AAC3CS,IAAAA,YAAY,EAAEA,MAAMT,gBAAgB,CAAC,KAAK,CAAA;AAAE,GAAA,EAE5CX,cAAA,CAAAe,aAAA,CAACC,UAAY,EAAA;AAACK,IAAAA,UAAU,EAAEX,aAAAA;GAAgBL,EAAAA,SAAwB,CAAC,EACnEL,cAAA,CAAAe,aAAA,CAACC,eAAiB,EAAA;AAACK,IAAAA,UAAU,EAAEX,aAAAA;GAAgB,CACzC,CAEC,CAAC,CAAA;AAElB,CAAC,EAAC;AAEFX,QAAQ,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AACnBvB,EAAAA,IAAI,EAAEwB,SAAS,CAACC,OAAO,CAACC,UAAU;AAClCzB,EAAAA,KAAK,EAAEuB,SAAS,CAACG,MAAM,CAACD,UAAU;AAClCxB,EAAAA,KAAK,EAAEsB,SAAS,CAACI,MAAM,CAACF,UAAU;EAClCvB,SAAS,EAAEqB,SAAS,CAACI,MAAM;EAC3BxB,OAAO,EAAEoB,SAAS,CAACK,IAAI;EACvBxB,MAAM,EAAEmB,SAAS,CAACG,MAAAA;AACpB,CAAC,GAAA,EAAA;;;;"}

package/build/widgets/InfoCard/InfoCard.styled.js

@@ -0,0 +1,113 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import 'react';
+import { ReactComponent as SvgArrowForward } from '../../icons/arrow-forward.svg.js';
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Container = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))};
+  height: ${props => props.height ? `${props.height}px` : '50px'};
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 0;
+`;
+const MetricsContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+  gap: 5px;
+  padding-left: 15px;
+`;
+const IconTotalContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+const Total = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-size: 1.22rem;
+  font-weight: 700;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const Label = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.8;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'))};
+`;
+const IconContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 18px;
+  margin-top: -0.05rem;
+`;
+const Link = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 30%;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  height: 100%;
+  gap: 10px;
+  svg {
+    transition: transform 0.2s ease-in-out;
+  }
+  &:hover svg {
+    transform: translateX(2px);
+  }
+`;
+const ButtonLink = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: color 0.2s ease-in-out;
+  ${props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const StyledArrowIcon = styled(SvgArrowForward).withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  height: 15px;
+  margin-right: 10px;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
+  transform: ${props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)'};
+
+  ${props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))};
+`;
+
+export { ButtonLink, Container, IconContainer, IconTotalContainer, Label, Link, MetricsContainer, StyledArrowIcon, Total };
+//# sourceMappingURL=InfoCard.styled.js.map

package/build/widgets/InfoCard/InfoCard.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.styled.js","sources":["../../../src/components/widgets/InfoCard/InfoCard.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ArrowForwardIcon } from '../../../icons';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Container = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-50')\n    )};\n  height: ${props => (props.height ? `${props.height}px` : '50px')};\n  border-radius: 3px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 5px 0;\n`;\n\nexport const MetricsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  width: 70%;\n  gap: 5px;\n  padding-left: 15px;\n`;\n\nexport const IconTotalContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n`;\nexport const Total = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.22rem;\n  font-weight: 700;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n`;\n\nexport const Label = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  opacity: 0.8;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-500')\n    )};\n`;\nexport const IconContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 18px;\n  margin-top: -0.05rem;\n`;\n\nexport const Link = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  width: 30%;\n  opacity: 0.7;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-right: 20px;\n  cursor: pointer;\n  height: 100%;\n  gap: 10px;\n  svg {\n    transition: transform 0.2s ease-in-out;\n  }\n  &:hover svg {\n    transform: translateX(2px);\n  }\n`;\n\nexport const ButtonLink = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  opacity: ${props => (props.$isHovered ? 1 : 0.8)};\n  transition: color 0.2s ease-in-out;\n  ${props =>\n    props.$isHovered\n      ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))\n      : props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-100'),\n          props.theme.getColor('gray-900')\n        )};\n`;\n\nexport const StyledArrowIcon = styled(ArrowForwardIcon)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  height: 15px;\n  margin-right: 10px;\n  opacity: ${props => (props.$isHovered ? 1 : 0.8)};\n  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n  transform: ${props => (props.$isHovered ? 'translateX(2px)' : 'translateX(0)')};\n\n  ${props =>\n    props.$isHovered\n      ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))\n      : props.theme.themeProp(\n          'fill',\n          props.theme.getColor('white'),\n          props.theme.getColor('black')\n        )};\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Container","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","themeProp","getColor","height","MetricsContainer","IconTotalContainer","Total","Label","IconContainer","Link","ButtonLink","$isHovered","StyledArrowIcon","ArrowForwardIcon"],"mappings":"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"}

package/build/widgets/InfoCard/index.js

@@ -0,0 +1,2 @@
+export { default } from './InfoCard.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/InfoCard/index.js.map

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