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

package/build/widgets/SummaryCard/SummaryCard.js

@@ -0,0 +1,93 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { ReactComponent as SvgWarningCircle } from '../../icons/warning-circle.svg.js';
+import Alert from '../../data/Alert/Alert.js';
+import '../../data/Badge/Badge.js';
+import '../../data/Popover/Popover.js';
+import '../../data/Tab/Tab.js';
+import '../../data/Tabs/Tabs.js';
+import '../../data/Tooltip/Tooltip.js';
+import '../../data/VerificationStatusIcon/VerificationStatusIcon.js';
+import { SummaryCard as SummaryCard$1, Gutter, Header, HeaderLeft, HeaderRight, Title, Description, Instruction, Footer, FooterLeft, FooterRight } from './SummaryCard.styled.js';
+
+const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
+  activeSummaryCard,
+  title,
+  description,
+  instructions,
+  instructionsType,
+  headerLeft,
+  headerRight,
+  footerLeft,
+  footerRight,
+  width,
+  useBorder,
+  view,
+  ...props
+}, forwardedRef) {
+  const shouldRenderInstructions = !!instructions;
+  const shouldRenderHeader = !!headerLeft || !!headerRight;
+  const shouldRenderFooter = !!footerLeft || !!footerRight;
+  const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
+  const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
+  if (!activeSummaryCard) return null;
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'compact'));
+  return React__default.createElement(SummaryCard$1, _extends({
+    ref: forwardedRef,
+    width: width,
+    $useBorder: useBorder
+  }, filteredProps, {
+    view: view
+  }), shouldRenderHeader && React__default.createElement(React__default.Fragment, null, React__default.createElement(Gutter, {
+    $gutter: 8
+  }), React__default.createElement(Header, null, React__default.createElement(HeaderLeft, null, headerLeft), React__default.createElement(HeaderRight, null, headerRight))), React__default.createElement(Gutter, {
+    $gutter: shouldRenderHeader ? 8 : 16
+  }), title && React__default.createElement(Title, null, title), shouldAddGutterAfterTitle && React__default.createElement(Gutter, {
+    $gutter: 4
+  }), description && React__default.createElement(Description, null, description), React__default.createElement(Gutter, {
+    $gutter: 16
+  }), shouldRenderInstructions && React__default.createElement(Instruction, null, React__default.createElement(Alert, {
+    icon: React__default.createElement(SvgWarningCircle, null),
+    alertMessage: instructions,
+    type: instructionsType,
+    fontSize: 12,
+    verticalPadding: 12,
+    horizontalPadding: 16,
+    width: width,
+    lineClamp: 1
+  })), shouldAddGutterAfterInstructions && React__default.createElement(Gutter, {
+    $gutter: 16
+  }), shouldRenderFooter && React__default.createElement(Footer, null, React__default.createElement(FooterLeft, null, footerLeft), React__default.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default.createElement(Gutter, {
+    $gutter: 16
+  }));
+});
+SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  activeSummaryCard: PropTypes.bool,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  instructions: PropTypes.string,
+  instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
+  headerLeft: PropTypes.node,
+  headerRight: PropTypes.node,
+  footerLeft: PropTypes.node,
+  footerRight: PropTypes.node,
+  width: PropTypes.number,
+  useBorder: PropTypes.bool,
+  view: PropTypes.string
+} : {};
+SummaryCard.defaultProps = {
+  title: '',
+  description: '',
+  instructions: '',
+  instructionsType: 'info',
+  headerLeft: null,
+  headerRight: null,
+  footerLeft: null,
+  footerRight: null,
+  useBorder: false,
+  activeSummaryCard: false
+};
+
+export { SummaryCard as default };
+//# sourceMappingURL=SummaryCard.js.map

package/build/widgets/SummaryCard/SummaryCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport { WarningCircleIcon } from '../../../icons';\nimport { Alert } from '../../data';\nimport * as S from './SummaryCard.styled';\n\n/**\n * ### Import\n *\n * ``` js\n * import { SummaryCard } from '@ntbjs/react-components/widgets'\n * // or\n * import SummaryCard from '@ntbjs/react-components/widgets/SummaryCard'\n * ```\n *\n * ### Props\n * ```\n * Pass `title=\"Title\"` to set the title of the card.\n * Pass `description=\"Description\"` to set the description of the card.\n * Pass `instructions=\"Instructions\"` to set the instructions of the card.\n * Pass one of \"warning\", \"error\" or \"info\" to `instructionsType` to reflect the type of the instructions.\n * Pass `headerLeft={<div>Left</div>}` to set the left header of the card.\n * Pass `headerRight={<div>Right</div>}` to set the right header of the card.\n * Pass `footerLeft={<div>Left</div>}` to set the left footer of the card.\n * Pass `footerRight={<div>Right</div>}` to set the right footer of the card.\n * Pass `width={300}` to set the width of the card.\n * Pass `useBorder={true}` to set the border of the card.\n * ```\n */\n\nconst SummaryCard = React.forwardRef(function AssetSummaryCard(\n  {\n    activeSummaryCard,\n    title,\n    description,\n    instructions,\n    instructionsType,\n    headerLeft,\n    headerRight,\n    footerLeft,\n    footerRight,\n    width,\n    useBorder,\n    view,\n    ...props\n  },\n  forwardedRef\n) {\n  const shouldRenderInstructions = !!instructions;\n  const shouldRenderHeader = !!headerLeft || !!headerRight;\n  const shouldRenderFooter = !!footerLeft || !!footerRight;\n  const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;\n  const shouldAddGutterAfterTitle =\n    !!title && (!!description || !!instructions || shouldRenderFooter);\n\n  if (!activeSummaryCard) return null;\n\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key !== 'compact')\n  );\n\n  return (\n    <S.SummaryCard\n      ref={forwardedRef}\n      width={width}\n      $useBorder={useBorder}\n      {...filteredProps}\n      view={view}\n    >\n      {shouldRenderHeader && (\n        <>\n          <S.Gutter $gutter={8} />\n          <S.Header>\n            <S.HeaderLeft>{headerLeft}</S.HeaderLeft>\n            <S.HeaderRight>{headerRight}</S.HeaderRight>\n          </S.Header>\n        </>\n      )}\n      <S.Gutter $gutter={shouldRenderHeader ? 8 : 16} />\n      {title && <S.Title>{title}</S.Title>}\n      {shouldAddGutterAfterTitle && <S.Gutter $gutter={4} />}\n      {description && <S.Description>{description}</S.Description>}\n      <S.Gutter $gutter={16} />\n      {shouldRenderInstructions && (\n        <S.Instruction>\n          <Alert\n            icon={<WarningCircleIcon />}\n            alertMessage={instructions}\n            type={instructionsType}\n            fontSize={12}\n            verticalPadding={12}\n            horizontalPadding={16}\n            width={width}\n            lineClamp={1}\n          />\n        </S.Instruction>\n      )}\n      {shouldAddGutterAfterInstructions && <S.Gutter $gutter={16} />}\n      {shouldRenderFooter && (\n        <S.Footer>\n          <S.FooterLeft>{footerLeft}</S.FooterLeft>\n          <S.FooterRight>{footerRight}</S.FooterRight>\n        </S.Footer>\n      )}\n      {shouldRenderFooter && <S.Gutter $gutter={16} />}\n    </S.SummaryCard>\n  );\n});\n\nSummaryCard.propTypes = {\n  /**\n   * Wether the SummaryCard is active or not.\n   */\n  activeSummaryCard: PropTypes.bool,\n  /**\n   * Title of the content\n   */\n  title: PropTypes.string,\n  /**\n   * Description of the content\n   */\n  description: PropTypes.string,\n  /**\n   * Special instructions for the content\n   */\n  instructions: PropTypes.string,\n  /**\n   * Type of instructions\n   */\n  instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),\n  /**\n   * One or more children to render in the left half of the header\n   */\n  headerLeft: PropTypes.node,\n  /**\n   * One or more children to render in the right half of the header\n   */\n  headerRight: PropTypes.node,\n  /**\n   * One or more children to render in the left half of the footer\n   */\n  footerLeft: PropTypes.node,\n  /**\n   * One or more children to render in the right half of the footer\n   */\n  footerRight: PropTypes.node,\n  /**\n   * Width of the card\n   */\n  width: PropTypes.number,\n  /**\n   * Whether or not to use a border around the card\n   */\n  useBorder: PropTypes.bool,\n  /**\n   * Whether or not the Summary Card is within the CompactCard view or Grid view\n   */\n  view: PropTypes.string\n};\n\nSummaryCard.defaultProps = {\n  title: '',\n  description: '',\n  instructions: '',\n  instructionsType: 'info',\n  headerLeft: null,\n  headerRight: null,\n  footerLeft: null,\n  footerRight: null,\n  useBorder: false,\n  activeSummaryCard: false\n};\n\nexport default SummaryCard;\n"],"names":["SummaryCard","React","forwardRef","AssetSummaryCard","activeSummaryCard","title","description","instructions","instructionsType","headerLeft","headerRight","footerLeft","footerRight","width","useBorder","view","props","forwardedRef","shouldRenderInstructions","shouldRenderHeader","shouldRenderFooter","shouldAddGutterAfterInstructions","shouldAddGutterAfterTitle","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","$useBorder","Fragment","$gutter","Alert","icon","WarningCircleIcon","alertMessage","type","fontSize","verticalPadding","horizontalPadding","lineClamp","propTypes","process","env","NODE_ENV","PropTypes","bool","string","oneOf","node","number","defaultProps"],"mappings":"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"}

package/build/widgets/SummaryCard/SummaryCard.styled.js

@@ -0,0 +1,137 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import { FloatingArrow } from '@floating-ui/react';
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const SummaryCard = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  width: ${props => props.width ? `${props.width}px` : '100%'};
+  ${props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent'};
+
+  ${props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null}
+`;
+const Gutter = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  ${props => {
+  if (props.renderAsMargin) {
+    return css`
+        margin-bottom: ${props.$gutter || 8}px;
+      `;
+  } else {
+    return css`
+        padding-bottom: ${props.$gutter || 8}px;
+      `;
+  }
+}}
+  padding-bottom: ${props => props.$gutter || 8}px;
+`;
+const Header = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+`;
+const HeaderLeft = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  > * {
+    margin-right: 4px;
+  }
+`;
+const HeaderRight = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  > * {
+    margin-left: 4px;
+  }
+`;
+const Title = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: inline-block;
+  padding: 0 16px;
+  font: normal normal 500 14px/19px Roboto;
+  letter-spacing: 0.28px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+`;
+const Description = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  padding: 0 16px;
+  text-align: left;
+  font: normal normal normal 12px/16px Roboto;
+  letter-spacing: 0.24px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+`;
+const Instruction = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)``;
+const Footer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+`;
+const FooterLeft = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  > * {
+    margin-right: 4px;
+  }
+`;
+const FooterRight = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  > * {
+    margin-left: 4px;
+  }
+`;
+styled(FloatingArrow).withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
+`;
+
+export { Description, Footer, FooterLeft, FooterRight, Gutter, Header, HeaderLeft, HeaderRight, Instruction, SummaryCard, Title };
+//# sourceMappingURL=SummaryCard.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.styled.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { FloatingArrow } from '@floating-ui/react';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const SummaryCard = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  border-radius: 4px;\n  width: ${props => (props.width ? `${props.width}px` : '100%')};\n  ${props =>\n    props.view === 'compact'\n      ? props.theme.themeProp(\n          'background',\n          props.theme.getColor('gray-700'),\n          props.theme.getColor('white')\n        )\n      : 'background: transparent'};\n\n  ${props =>\n    props.$useBorder\n      ? props.theme.themeProp(\n          'border',\n          `1px solid ${props.theme.getColor('gray-500')}`,\n          `1px solid ${props.theme.getColor('gray-300')}`\n        )\n      : null}\n`;\n\nexport const Gutter = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props => {\n    if (props.renderAsMargin) {\n      return css`\n        margin-bottom: ${props.$gutter || 8}px;\n      `;\n    } else {\n      return css`\n        padding-bottom: ${props.$gutter || 8}px;\n      `;\n    }\n  }}\n  padding-bottom: ${props => props.$gutter || 8}px;\n`;\n\nexport const Header = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n`;\n\nexport const HeaderLeft = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const HeaderRight = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const Title = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-block;\n  padding: 0 16px;\n  font: normal normal 500 14px/19px Roboto;\n  letter-spacing: 0.28px;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n`;\n\nexport const Description = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding: 0 16px;\n  text-align: left;\n  font: normal normal normal 12px/16px Roboto;\n  letter-spacing: 0.24px;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n`;\n\nexport const Instruction = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)``;\n\nexport const Footer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n`;\n\nexport const FooterLeft = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  > * {\n    margin-right: 4px;\n  }\n`;\n\nexport const FooterRight = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n\n  > * {\n    margin-left: 4px;\n  }\n`;\n\nexport const StyledFloatingArrow = styled(FloatingArrow)\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","SummaryCard","styled","div","withConfig","attrs","applyDefaultTheme","props","width","view","theme","themeProp","getColor","$useBorder","Gutter","renderAsMargin","css","$gutter","Header","HeaderLeft","HeaderRight","Title","span","Description","Instruction","Footer","FooterLeft","FooterRight","FloatingArrow"],"mappings":"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"}

package/build/widgets/SummaryCard/index.js

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

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

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

package/build/widgets/index.js

@@ -0,0 +1,11 @@
+export { default as AssetGallery } from './AssetGallery/AssetGallery.js';
+export { default as ContextMenu } from './ContextMenu/ContextMenu.js';
+export { default as ContextMenuItem } from './ContextMenu/ContextMenuItem/ContextMenuItem.js';
+export { default as ContextMenuItemsGroup } from './ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js';
+export { default as AssetPreviewTopBar } from './AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js';
+export { default as SummaryCard } from './SummaryCard/SummaryCard.js';
+export { default as AssetActionBase } from './AssetActionsBase/AssetActionsBase.js';
+export { default as AssetAction } from './AssetAction/AssetAction.js';
+export { default as ProgressBar } from './ProgressBar/ProgressBar.js';
+export { default as InfoCard } from './InfoCard/InfoCard.js';
+//# sourceMappingURL=index.js.map

package/build/widgets/index.js.map

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

package/package.json

@@ -1,50 +1,40 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.1-rc.31",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "NTBs common front-end design utilities and React components.",
-  "type": "module",
+  "main": "./build/index.js",
+  "module": "./build/index.js",
   "exports": {
-    ".": {
-      "import": "./build/esm/components/index.js",
-      "require": "./build/cjs/components/index.js"
-    },
-    "./ssr": {
-      "import": "./build/esm/ssr/index.js",
-      "require": "./build/cjs/ssr/index.js"
-    },
-    "./inputs": {
-      "import": "./build/esm/components/inputs/index.js",
-      "require": "./build/cjs/components/inputs/index.js"
-    },
-    "./data": {
-      "import": "./build/esm/components/data/index.js",
-      "require": "./build/cjs/components/data/index.js"
-    },
-    "./widgets": {
-      "import": "./build/esm/components/widgets/index.js",
-      "require": "./build/cjs/components/widgets/index.js"
-    },
-    "./layout": {
-      "import": "./build/esm/components/layout/index.js",
-      "require": "./build/cjs/components/layout/index.js"
-    },
-    "./*": {
-      "import": "./build/esm/*",
-      "require": "./build/cjs/*"
-    }
+    "./inputs": "./build/inputs/index.js",
+    "./inputs/*": "./build/inputs/*/index.js",
+    "./data": "./build/data/index.js",
+    "./data/*": "./build/data/*/index.js",
+    "./layout": "./build/layout/index.js",
+    "./layout/*": "./build/layout/*/index.js",
+    "./widgets": "./build/widgets/index.js",
+    "./widgets/*": "./build/widgets/*/index.js",
+    "./widgets/*/*": "./build/widgets/*/*/index.js",
+    "./ssr": "./build/ssr/index.js",
+    "./styles/*": "./styles/*",
+    "./icons/*": "./icons/*",
+    "./build/*": "./build/*"
   },
-  "main": "./build/cjs/components/index.js",
-  "module": "./build/esm/components/index.js",
-  "sideEffects": false,
+  "files": [
+    "build",
+    "styles",
+    "icons"
+  ],
   "scripts": {
-    "build": "mkdir -p /tmp/.npm-cache && cross-env NODE_ENV=production ROLLUP_CACHE_DIR=/tmp/.npm-cache rollup -c",
+    "build": "cross-env NODE_ENV=production rollup -c",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6006",
     "storybook:export": "storybook build",
-    "generate": "node ./util/create-component",
-    "prepublishOnly": "npm run build"
+    "generate": "node ./util/create-component"
   },
   "repository": {
     "type": "git",
@@ -56,30 +46,24 @@
   },
   "homepage": "https://bitbucket.org/NTB-NO/react-components/src/master/",
   "engines": {
-    "node": ">=22.0.0",
+    "node": ">=24.0.0",
     "npm": ">=10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.16",
+    "@babel/core": "^7.28.5",
     "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-react": "^7.13.13",
-    "@chromatic-com/storybook": "^3.2.6",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/react-webpack5": "^10.1.11",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.12.0",
@@ -93,6 +77,7 @@
     "eslint-plugin-react": "^7.24.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.0.4",
+    "madge": "^8.0.0",
     "postcss": "^8.3.0",
     "prop-types": "^15.7.2",
     "rollup": "^2.50.6",
@@ -100,28 +85,28 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-url": "^3.0.1",
-    "sass": "^1.86.3",
-    "sass-loader": "^16.0.5",
-    "storybook": "^8.6.12",
+    "sass": "^1.97.2",
+    "sass-loader": "^10.1.1",
+    "storybook": "^10.1.11",
     "url-loader": "^4.1.1"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@restart/hooks": "^0.3.26",
-    "@storybook/theming": "^8.6.12",
+    "@floating-ui/react": "^0.26.28",
+    "@restart/hooks": "^0.6.2",
+    "@storybook/cli": "^10.1.11",
     "@tippyjs/react": "^4.2.6",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.8",
     "polished": "^4.1.3",
     "popper-max-size-modifier": "^0.2.0",
     "react-lazy-load-image-component": "^1.5.1",
-    "react-select": "^5.7.7",
-    "react-select-async-paginate": "^0.7.3",
-    "react-spinners": "^0.13.8",
+    "react-select": "^5.10.2",
+    "react-select-async-paginate": "^0.7.11",
+    "react-spinners": "^0.17.0",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-components": "^5.3.7"
+    "styled-components": "^6.1.19"
   }
 }

package/styles/.config.scss

@@ -0,0 +1,38 @@
+/**
+ * Colors
+ */
+export const colors = {
+  'orange-600': #634e01,
+  'orange-500': #ff9900,
+  'orange-400': #ffcb7e,
+  'emerald-600': #296c58,
+  'emerald-500': #30826a,
+  'emerald-400': #64b49d,
+  'emerald-300': #bfe0d5,
+  'emerald-200': #f3f9f7,
+  'gray-900': #141313,
+  'gray-800': #272727,
+  'gray-700': #323232,
+  'gray-600': #505050,
+  'gray-500': #767676,
+  'gray-400': #b0b6b9,
+  'gray-300': #d9dce0,
+  'gray-200': #eff1f4,
+  'gray-100': #f7f8f9,
+  'gray-50': #f4f4f5,
+  'cercise-500': #5f1031,
+  'cercise-400': #854962,
+  'cercise-300': #d099b0,
+  'cercise-200': #fecaca,
+  'cercise-100': #f9f3f5,
+  'red-600': #7f1b1b,
+  'red-500': #d83000,
+  'red-200': #fbeae6,
+  'brown-500': #634e01,
+  'signal-yellow-500': #f4e21e,
+  'signal-yellow-400': #fff36c,
+  'signal-green-500': #00bd98,
+  'signal-green-400': #a3ffe0,
+  'black': #202435,
+  'white': #ffffff
+};

package/styles/config.scss

@@ -19,6 +19,7 @@ $colors: (
   'gray-300': #d9dce0,
   'gray-200': #eff1f4,
   'gray-100': #f7f8f9,
+  'gray-50': #f4f4f5,
   'cercise-500': #5f1031,
   'cercise-400': #854962,
   'cercise-300': #d099b0,

package/styles/utils/.colors.scss

@@ -0,0 +1,15 @@
+@use '../config';
+
+@function color($name) {
+  @if map-has-key(config.$colors, $name) {
+    @return map-get(config.$colors, $name);
+  } @else {
+    @error "No color with the name `#{$name}`. was found.";
+  }
+}
+
+:export {
+  @each $name, $color in config.$colors {
+    #{$name}: $color;
+  }
+}

package/styles/utils/colors-export.js

@@ -0,0 +1,35 @@
+export const colors = {
+  'orange-600': '#634e01',
+  'orange-500': '#ff9900',
+  'orange-400': '#ffcb7e',
+  'emerald-600': '#296c58',
+  'emerald-500': '#30826a',
+  'emerald-400': '#64b49d',
+  'emerald-300': '#bfe0d5',
+  'emerald-200': '#f3f9f7',
+  'gray-900': '#141313',
+  'gray-800': '#272727',
+  'gray-700': '#323232',
+  'gray-600': '#505050',
+  'gray-500': '#767676',
+  'gray-400': '#b0b6b9',
+  'gray-300': '#d9dce0',
+  'gray-200': '#eff1f4',
+  'gray-100': '#f7f8f9',
+  'gray-50': '#f4f4f5',
+  'cercise-500': '#5f1031',
+  'cercise-400': '#854962',
+  'cercise-300': '#d099b0',
+  'cercise-200': '#fecaca',
+  'cercise-100': '#f9f3f5',
+  'red-600': '#7f1b1b',
+  'red-500': '#d83000',
+  'red-200': '#fbeae6',
+  'brown-500': '#634e01',
+  'signal-yellow-500': '#f4e21e',
+  'signal-yellow-400': '#fff36c',
+  'signal-green-500': '#00bd98',
+  'signal-green-400': '#a3ffe0',
+  'black': '#202435',
+  'white': '#ffffff'
+};

package/styles/utils/colors.scss

@@ -1,15 +1,15 @@
-@use '../config' as *;
+@use '../config';
 
 @function color($name) {
-  @if map-has-key($colors, $name) {
-    @return map-get($colors, $name);
+  @if map-has-key(config.$colors, $name) {
+    @return map-get(config.$colors, $name);
   } @else {
     @error "No color with the name `#{$name}`. was found.";
   }
 }
 
 :export {
-  @each $name, $color in $colors {
+  @each $name, $color in config.$colors {
     #{$name}: $color;
   }
 }

package/.eslintrc

@@ -1,19 +0,0 @@
-{
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true,
-    "jest": true
-  },
-  "parserOptions": {
-    "sourceType": "module"
-  },
-  "ignorePatterns": ["build", "storybook-static"],
-  "parser": "@babel/eslint-parser",
-  "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}