@ntbjs/react-components 2.0.9-rc.2 → 2.0.9-rc.4

package/build/widgets/AssetGallery/asset.propType.js

@@ -28,12 +28,12 @@ const assetShape = {
   onClick: PropTypes.func,
   onContextMenu: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
+  instructionSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
   summary: PropTypes.shape({
     title: PropTypes.string,
     description: PropTypes.string,
     instructions: PropTypes.string,
-    instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
+    instructionSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
     headerLeft: PropTypes.node,
     headerRight: PropTypes.node,
     footerLeft: PropTypes.node,

package/build/widgets/AssetGallery/asset.propType.js.map

@@ -1 +1 @@
-{"version":3,"file":"asset.propType.js","sources":["../../../src/components/widgets/AssetGallery/asset.propType.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport const assetShape = {\n  key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  previewUrl: PropTypes.string,\n  title: PropTypes.string,\n  note: PropTypes.shape({\n    icon: PropTypes.element,\n    message: PropTypes.string\n  }),\n  width: PropTypes.number,\n  height: PropTypes.number,\n  fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,\n  fileTypeIconPosition: PropTypes.oneOf(['top-left', 'top-right']),\n  group: PropTypes.string,\n  actions: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string.isRequired,\n      icon: PropTypes.element.isRequired,\n      onClick: PropTypes.func.isRequired,\n      className: PropTypes.shape,\n      component: PropTypes.func\n    })\n  ),\n  statusIcon: PropTypes.element,\n  overlay: PropTypes.element,\n  completed: PropTypes.bool,\n  hasError: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onClick: PropTypes.func,\n  onContextMenu: PropTypes.func,\n  onMouseEnter: PropTypes.func,\n  instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n  summary: PropTypes.shape({\n    title: PropTypes.string,\n    description: PropTypes.string,\n    instructions: PropTypes.string,\n    instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n    headerLeft: PropTypes.node,\n    headerRight: PropTypes.node,\n    footerLeft: PropTypes.node,\n    footerRight: PropTypes.node\n  })\n};\n\nexport const assetShapeWithLayout = {\n  ...assetShape,\n  layout: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n    translateX: PropTypes.number.isRequired,\n    translateY: PropTypes.number.isRequired,\n    type: PropTypes.oneOf(['groupLabel', 'asset']).isRequired,\n    hasHeightAndWidth: PropTypes.bool\n  }).isRequired\n};\n"],"names":["assetShape","key","PropTypes","oneOfType","string","number","isRequired","previewUrl","title","note","shape","icon","element","message","width","height","fileType","oneOf","fileTypeIconPosition","group","actions","arrayOf","onClick","func","className","component","statusIcon","overlay","completed","bool","hasError","disabled","onContextMenu","onMouseEnter","instructionsSeverity","summary","description","instructions","headerLeft","node","headerRight","footerLeft","footerRight","assetShapeWithLayout","layout","translateX","translateY","type","hasHeightAndWidth"],"mappings":"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"}
+{"version":3,"file":"asset.propType.js","sources":["../../../src/components/widgets/AssetGallery/asset.propType.js"],"sourcesContent":["import PropTypes from 'prop-types';\n\nexport const assetShape = {\n  key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  previewUrl: PropTypes.string,\n  title: PropTypes.string,\n  note: PropTypes.shape({\n    icon: PropTypes.element,\n    message: PropTypes.string\n  }),\n  width: PropTypes.number,\n  height: PropTypes.number,\n  fileType: PropTypes.oneOf(['image', 'video', 'pdf', 'file', 'audio']).isRequired,\n  fileTypeIconPosition: PropTypes.oneOf(['top-left', 'top-right']),\n  group: PropTypes.string,\n  actions: PropTypes.arrayOf(\n    PropTypes.shape({\n      title: PropTypes.string.isRequired,\n      icon: PropTypes.element.isRequired,\n      onClick: PropTypes.func.isRequired,\n      className: PropTypes.shape,\n      component: PropTypes.func\n    })\n  ),\n  statusIcon: PropTypes.element,\n  overlay: PropTypes.element,\n  completed: PropTypes.bool,\n  hasError: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onClick: PropTypes.func,\n  onContextMenu: PropTypes.func,\n  onMouseEnter: PropTypes.func,\n  instructionSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n  summary: PropTypes.shape({\n    title: PropTypes.string,\n    description: PropTypes.string,\n    instructions: PropTypes.string,\n    instructionSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n    headerLeft: PropTypes.node,\n    headerRight: PropTypes.node,\n    footerLeft: PropTypes.node,\n    footerRight: PropTypes.node\n  })\n};\n\nexport const assetShapeWithLayout = {\n  ...assetShape,\n  layout: PropTypes.shape({\n    width: PropTypes.number.isRequired,\n    height: PropTypes.number.isRequired,\n    translateX: PropTypes.number.isRequired,\n    translateY: PropTypes.number.isRequired,\n    type: PropTypes.oneOf(['groupLabel', 'asset']).isRequired,\n    hasHeightAndWidth: PropTypes.bool\n  }).isRequired\n};\n"],"names":["assetShape","key","PropTypes","oneOfType","string","number","isRequired","previewUrl","title","note","shape","icon","element","message","width","height","fileType","oneOf","fileTypeIconPosition","group","actions","arrayOf","onClick","func","className","component","statusIcon","overlay","completed","bool","hasError","disabled","onContextMenu","onMouseEnter","instructionSeverity","summary","description","instructions","headerLeft","node","headerRight","footerLeft","footerRight","assetShapeWithLayout","layout","translateX","translateY","type","hasHeightAndWidth"],"mappings":"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"}

package/build/widgets/{InstructionsSeverityDisplay/InstructionsSeverityDisplay.js → InstructionSeverityDisplay/InstructionSeverityDisplay.js}

@@ -1,7 +1,8 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { Card, BadgePill, BadgeText, InstructionText } from './InstructionsSeverityDisplay.styled.js';
+import Badge from '../../data/Badge/Badge.js';
+import { Card, InstructionText } from './InstructionSeverityDisplay.styled.js';
 
 const InformationIcon = () => React__default.createElement("svg", {
   width: "12",
@@ -20,7 +21,31 @@ const defaultLabels = {
   4: 'Limited use',
   5: 'Highly restricted'
 };
-const InstructionsSeverityDisplay = React__default.forwardRef(function InstructionsSeverityDisplay({
+const severityBadgeProps = {
+  1: {
+    backgroundColors: ['#272727', '#ffffff'],
+    colors: ['#d9dce0', '#202435'],
+    borderColors: ['#3a3a3a', '#ece4e1']
+  },
+  2: {
+    backgroundColors: ['#272727', '#ffffff'],
+    colors: ['#d9dce0', '#202435'],
+    borderColors: ['#3a3a3a', '#ece4e1']
+  },
+  3: {
+    backgroundColors: ['#2e2301', '#faeeb3'],
+    colors: ['#eab308', '#78350F']
+  },
+  4: {
+    backgroundColors: ['#2e2301', '#faeeb3'],
+    colors: ['#eab308', '#78350F']
+  },
+  5: {
+    backgroundColors: ['#7E1B1B', 'rgba(182, 41, 2, 0.1)'],
+    colors: ['#e8d5d6', '#b62902']
+  }
+};
+const InstructionSeverityDisplay = React__default.forwardRef(function InstructionSeverityDisplay({
   severity,
   instructionText,
   severityLabel,
@@ -32,6 +57,7 @@ const InstructionsSeverityDisplay = React__default.forwardRef(function Instructi
   detailsFontSize,
   bgLight,
   bgDark,
+  maxLines,
   ...props
 }, forwardedRef) {
   if (!instructionText) {
@@ -45,15 +71,25 @@ const InstructionsSeverityDisplay = React__default.forwardRef(function Instructi
     $padding: padding,
     $bgLight: bgLight,
     $bgDark: bgDark
-  }, props), React__default.createElement(BadgePill, {
-    $severity: severity
-  }, icon || React__default.createElement(InformationIcon, null), React__default.createElement(BadgeText, {
-    $fontSize: badgeFontSize
-  }, displayLabel)), React__default.createElement(InstructionText, {
-    $fontSize: detailsFontSize
-  }, instructionText));
+  }, props), React__default.createElement(Badge, {
+    badgeIcon: icon || React__default.createElement(InformationIcon, null),
+    badgeContent: displayLabel,
+    backgroundColors: (severityBadgeProps[severity] || severityBadgeProps[1]).backgroundColors,
+    colors: (severityBadgeProps[severity] || severityBadgeProps[1]).colors,
+    borderColors: (severityBadgeProps[severity] || severityBadgeProps[1]).borderColors,
+    fontSize: badgeFontSize ? parseInt(badgeFontSize, 10) : 12,
+    fontWeight: 500,
+    height: 24,
+    horizontalPadding: 8,
+    verticalPadding: 2
+  }), React__default.createElement(InstructionText, {
+    $fontSize: detailsFontSize,
+    $maxLines: maxLines
+  }, maxLines ? React__default.createElement("span", {
+    title: instructionText
+  }, instructionText) : instructionText));
 });
-InstructionsSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ? {
+InstructionSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ? {
   severity: PropTypes.oneOf([1, 2, 3, 4, 5]),
   instructionText: PropTypes.string,
   severityLabel: PropTypes.string,
@@ -64,8 +100,9 @@ InstructionsSeverityDisplay.propTypes = process.env.NODE_ENV !== "production" ?
   badgeFontSize: PropTypes.string,
   detailsFontSize: PropTypes.string,
   bgLight: PropTypes.string,
-  bgDark: PropTypes.string
+  bgDark: PropTypes.string,
+  maxLines: PropTypes.number
 } : {};
 
-export { InstructionsSeverityDisplay as default };
-//# sourceMappingURL=InstructionsSeverityDisplay.js.map
+export { InstructionSeverityDisplay as default };
+//# sourceMappingURL=InstructionSeverityDisplay.js.map

package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstructionSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Badge from '../../data/Badge/Badge';\nimport * as S from './InstructionSeverityDisplay.styled';\n\nconst InformationIcon = () => (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst defaultLabels = {\n  1: 'Info',\n  2: 'Info',\n  3: 'Limited use',\n  4: 'Limited use',\n  5: 'Highly restricted'\n};\n\nconst severityBadgeProps = {\n  1: {\n    backgroundColors: ['#272727', '#ffffff'],\n    colors: ['#d9dce0', '#202435'],\n    borderColors: ['#3a3a3a', '#ece4e1']\n  },\n  2: {\n    backgroundColors: ['#272727', '#ffffff'],\n    colors: ['#d9dce0', '#202435'],\n    borderColors: ['#3a3a3a', '#ece4e1']\n  },\n  3: { backgroundColors: ['#2e2301', '#faeeb3'], colors: ['#eab308', '#78350F'] },\n  4: { backgroundColors: ['#2e2301', '#faeeb3'], colors: ['#eab308', '#78350F'] },\n  5: { backgroundColors: ['#7E1B1B', 'rgba(182, 41, 2, 0.1)'], colors: ['#e8d5d6', '#b62902'] }\n};\n\nconst InstructionSeverityDisplay = React.forwardRef(function InstructionSeverityDisplay(\n  {\n    severity,\n    instructionText,\n    severityLabel,\n    labels,\n    icon,\n    showCard = true,\n    padding,\n    badgeFontSize,\n    detailsFontSize,\n    bgLight,\n    bgDark,\n    maxLines,\n    ...props\n  },\n  forwardedRef\n) {\n  if (!instructionText) {\n    return null;\n  }\n\n  const displayLabel =\n    severityLabel || (labels && labels[severity]) || defaultLabels[severity] || defaultLabels[1];\n\n  return (\n    <S.Card\n      ref={forwardedRef}\n      $severity={severity}\n      $showCard={showCard}\n      $padding={padding}\n      $bgLight={bgLight}\n      $bgDark={bgDark}\n      {...props}\n    >\n      <Badge\n        badgeIcon={icon || <InformationIcon />}\n        badgeContent={displayLabel}\n        backgroundColors={(severityBadgeProps[severity] || severityBadgeProps[1]).backgroundColors}\n        colors={(severityBadgeProps[severity] || severityBadgeProps[1]).colors}\n        borderColors={(severityBadgeProps[severity] || severityBadgeProps[1]).borderColors}\n        fontSize={badgeFontSize ? parseInt(badgeFontSize, 10) : 12}\n        fontWeight={500}\n        height={24}\n        horizontalPadding={8}\n        verticalPadding={2}\n      />\n      <S.InstructionText $fontSize={detailsFontSize} $maxLines={maxLines}>\n        {maxLines ? <span title={instructionText}>{instructionText}</span> : instructionText}\n      </S.InstructionText>\n    </S.Card>\n  );\n});\n\nInstructionSeverityDisplay.propTypes = {\n  /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */\n  severity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n  /** The instruction text to display. Component returns null if empty. */\n  instructionText: PropTypes.string,\n  /** Override the default badge label for the severity level. */\n  severityLabel: PropTypes.string,\n  /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */\n  labels: PropTypes.objectOf(PropTypes.string),\n  /** Override the default icon element. */\n  icon: PropTypes.element,\n  /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */\n  showCard: PropTypes.bool,\n  /** Custom card padding, e.g. \"8px 6px\" or \"20px\". Defaults to \"14px 10px\". */\n  padding: PropTypes.string,\n  /** Custom font size for the badge text, e.g. \"10px\" or \"0.75rem\". Defaults to \"12px\". */\n  badgeFontSize: PropTypes.string,\n  /** Custom font size for the details/instruction text, e.g. \"12px\" or \"0.875rem\". Defaults to \"14px\". */\n  detailsFontSize: PropTypes.string,\n  /** Override card background color in light mode, e.g. \"#ffffff\" or \"transparent\". */\n  bgLight: PropTypes.string,\n  /** Override card background color in dark mode, e.g. \"#1a1a1a\" or \"transparent\". */\n  bgDark: PropTypes.string,\n  /** Max number of lines for instruction text before clamping with ellipsis. */\n  maxLines: PropTypes.number\n};\n\nexport default InstructionSeverityDisplay;\n"],"names":["InformationIcon","React","createElement","width","height","viewBox","fill","xmlns","d","defaultLabels","severityBadgeProps","backgroundColors","colors","borderColors","InstructionSeverityDisplay","forwardRef","severity","instructionText","severityLabel","labels","icon","showCard","padding","badgeFontSize","detailsFontSize","bgLight","bgDark","maxLines","props","forwardedRef","displayLabel","S","_extends","ref","$severity","$showCard","$padding","$bgLight","$bgDark","Badge","badgeIcon","badgeContent","fontSize","parseInt","fontWeight","horizontalPadding","verticalPadding","$fontSize","$maxLines","title","propTypes","process","env","NODE_ENV","PropTypes","oneOf","string","objectOf","element","bool","number"],"mappings":"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"}

package/build/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.styled.js

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Card = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+  padding: ${props => props.$padding || '14px 10px'};
+  ${props => {
+  if (props.$bgDark || props.$bgLight) {
+    return props.theme.themeProp('background', props.$bgDark || props.theme.getColor('gray-900'), props.$bgLight || props.theme.getColor('gray-200'));
+  }
+  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
+}}
+
+  ${props => props.$showCard && css`
+      border-radius: 10px;
+      box-shadow: 0px 0px 26px #0000001a;
+    `}
+
+  ${props => props.$severity === 5 && props.$showCard && css`
+      outline-offset: -1px;
+      ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}
+    `}
+`;
+const InstructionText = styled.p.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  font-size: ${props => props.$fontSize || '14px'};
+  font-weight: 400;
+  line-height: 1.286em;
+  margin: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
+
+  ${props => props.$maxLines && css`
+      display: -webkit-box;
+      -webkit-line-clamp: ${props.$maxLines};
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    `}
+`;
+
+export { Card, InstructionText };
+//# sourceMappingURL=InstructionSeverityDisplay.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InstructionSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionSeverityDisplay/InstructionSeverityDisplay.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 Card = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  padding: ${props => props.$padding || '14px 10px'};\n  ${props => {\n    if (props.$bgDark || props.$bgLight) {\n      return props.theme.themeProp(\n        'background',\n        props.$bgDark || props.theme.getColor('gray-900'),\n        props.$bgLight || props.theme.getColor('gray-200')\n      );\n    }\n    return props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('gray-200')\n    );\n  }}\n\n  ${props =>\n    props.$showCard &&\n    css`\n      border-radius: 10px;\n      box-shadow: 0px 0px 26px #0000001a;\n    `}\n\n  ${props =>\n    props.$severity === 5 &&\n    props.$showCard &&\n    css`\n      outline-offset: -1px;\n      ${props.theme.themeProp('outline', '1px solid #7f1d1d', '1px solid #dc2626')}\n    `}\n`;\n\nexport const InstructionText = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: ${props => props.$fontSize || '14px'};\n  font-weight: 400;\n  line-height: 1.286em;\n  margin: 0;\n  overflow-wrap: break-word;\n  word-break: break-word;\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n\n  ${props =>\n    props.$maxLines &&\n    css`\n      display: -webkit-box;\n      -webkit-line-clamp: ${props.$maxLines};\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","InstructionText","p","$fontSize","$maxLines"],"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,IAAI,GAAGC,MAAM,CAACC,GAAG,CAC3BC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA,WAAA,EAAaC,KAAK,IAAIA,KAAK,CAACC,QAAQ,IAAI,WAAW,CAAA;AACnD,EAAA,EAAID,KAAK,IAAI;AACT,EAAA,IAAIA,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACG,QAAQ,EAAE;AACnC,IAAA,OAAOH,KAAK,CAACI,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZL,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACI,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EACjDN,KAAK,CAACG,QAAQ,IAAIH,KAAK,CAACI,KAAK,CAACE,QAAQ,CAAC,UAAU,CACnD,CAAC,CAAA;AACH,GAAA;EACA,OAAON,KAAK,CAACI,KAAK,CAACC,SAAS,CAC1B,YAAY,EACZL,KAAK,CAACI,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCN,KAAK,CAACI,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACH,CAAC,CAAA;AACH;AACA,EAAA,EAAIN,KAAK,IACLA,KAAK,CAACO,SAAS,IACfC,GAAG,CAAA;AACP;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACS,SAAS,KAAK,CAAC,IACrBT,KAAK,CAACO,SAAS,IACfC,GAAG,CAAA;AACP;AACA,MAAQR,EAAAA,KAAK,CAACI,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,mBAAmB,EAAE,mBAAmB,CAAC,CAAA;AAClF,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAMK,eAAe,GAAGf,MAAM,CAACgB,CAAC,CACpCd,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,aAAA,EAAeC,KAAK,IAAIA,KAAK,CAACY,SAAS,IAAI,MAAM,CAAA;AACjD;AACA;AACA;AACA;AACA;AACA,EAAIZ,EAAAA,KAAK,IACLA,KAAK,CAACI,KAAK,CAACC,SAAS,CAAC,OAAO,EAAEL,KAAK,CAACI,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAAEN,KAAK,CAACI,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;AACnG;AACA,EAAA,EAAIN,KAAK,IACLA,KAAK,CAACa,SAAS,IACfL,GAAG,CAAA;AACP;AACA,0BAA4BR,EAAAA,KAAK,CAACa,SAAS,CAAA;AAC3C;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}

package/build/widgets/SummaryCard/SummaryCard.js

@@ -1,7 +1,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
-import InstructionsSeverityDisplay from '../InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
+import InstructionSeverityDisplay from '../InstructionSeverityDisplay/InstructionSeverityDisplay.js';
 import { SummaryCard as SummaryCard$1, Gutter, Header, HeaderLeft, HeaderRight, Title, Description, Footer, FooterLeft, FooterRight } from './SummaryCard.styled.js';
 
 const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
@@ -9,7 +9,7 @@ const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
   title,
   description,
   instructions,
-  instructionsSeverity,
+  instructionSeverity,
   headerLeft,
   headerRight,
   footerLeft,
@@ -41,13 +41,14 @@ const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
     $gutter: 4
   }), description && React__default.createElement(Description, null, description), React__default.createElement(Gutter, {
     $gutter: 16
-  }), shouldRenderInstructions && React__default.createElement(InstructionsSeverityDisplay, {
+  }), shouldRenderInstructions && React__default.createElement(InstructionSeverityDisplay, {
     labels: instructionLabels,
     instructionText: instructions,
-    severity: instructionsSeverity,
+    severity: instructionSeverity,
     showCard: false,
     padding: `14px 17px`,
-    detailsFontSize: `12px`
+    detailsFontSize: `12px`,
+    maxLines: view === 'grid' ? 3 : undefined
   }), 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, {
@@ -59,7 +60,7 @@ SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string,
   description: PropTypes.string,
   instructions: PropTypes.string,
-  instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
+  instructionSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),
   headerLeft: PropTypes.node,
   headerRight: PropTypes.node,
   footerLeft: PropTypes.node,
@@ -73,7 +74,7 @@ SummaryCard.defaultProps = {
   title: '',
   description: '',
   instructions: '',
-  instructionsSeverity: 1,
+  instructionSeverity: 1,
   headerLeft: null,
   headerRight: null,
   footerLeft: null,

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InstructionsSeverityDisplay from '../InstructionsSeverityDisplay';\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 1-5 to `instructionsSeverity` to reflect the severity 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    instructionsSeverity,\n    headerLeft,\n    headerRight,\n    footerLeft,\n    footerRight,\n    width,\n    useBorder,\n    view,\n    instructionLabels,\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\n      {shouldRenderInstructions && (\n        <InstructionsSeverityDisplay\n          labels={instructionLabels}\n          instructionText={instructions}\n          severity={instructionsSeverity}\n          showCard={false}\n          padding={`14px 17px`}\n          detailsFontSize={`12px`}\n        />\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  instructionsSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\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   * Translated labels object for instruction(Info,Limited Use etc)\n   */\n  instructionLabels: PropTypes.objectOf(PropTypes.string)\n};\n\nSummaryCard.defaultProps = {\n  title: '',\n  description: '',\n  instructions: '',\n  instructionsSeverity: 1,\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","instructionsSeverity","headerLeft","headerRight","footerLeft","footerRight","width","useBorder","view","instructionLabels","props","forwardedRef","shouldRenderInstructions","shouldRenderHeader","shouldRenderFooter","shouldAddGutterAfterInstructions","shouldAddGutterAfterTitle","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","$useBorder","Fragment","$gutter","InstructionsSeverityDisplay","labels","instructionText","severity","showCard","padding","detailsFontSize","propTypes","process","env","NODE_ENV","PropTypes","bool","string","oneOf","node","number","objectOf","defaultProps"],"mappings":"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"}
+{"version":3,"file":"SummaryCard.js","sources":["../../../src/components/widgets/SummaryCard/SummaryCard.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InstructionSeverityDisplay from '../InstructionSeverityDisplay';\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 1-5 to `instructionSeverity` to reflect the severity 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    instructionSeverity,\n    headerLeft,\n    headerRight,\n    footerLeft,\n    footerRight,\n    width,\n    useBorder,\n    view,\n    instructionLabels,\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\n      {shouldRenderInstructions && (\n        <InstructionSeverityDisplay\n          labels={instructionLabels}\n          instructionText={instructions}\n          severity={instructionSeverity}\n          showCard={false}\n          padding={`14px 17px`}\n          detailsFontSize={`12px`}\n          maxLines={view === 'grid' ? 3 : undefined}\n        />\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  instructionSeverity: PropTypes.oneOf([1, 2, 3, 4, 5]),\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   * Translated labels object for instruction(Info,Limited Use etc)\n   */\n  instructionLabels: PropTypes.objectOf(PropTypes.string)\n};\n\nSummaryCard.defaultProps = {\n  title: '',\n  description: '',\n  instructions: '',\n  instructionSeverity: 1,\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","instructionSeverity","headerLeft","headerRight","footerLeft","footerRight","width","useBorder","view","instructionLabels","props","forwardedRef","shouldRenderInstructions","shouldRenderHeader","shouldRenderFooter","shouldAddGutterAfterInstructions","shouldAddGutterAfterTitle","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","$useBorder","Fragment","$gutter","InstructionSeverityDisplay","labels","instructionText","severity","showCard","padding","detailsFontSize","maxLines","undefined","propTypes","process","env","NODE_ENV","PropTypes","bool","string","oneOf","node","number","objectOf","defaultProps"],"mappings":"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"}

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

@@ -11,7 +11,10 @@ const SummaryCard = styled.div.withConfig({
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  overflow:hidden;
+  ${props => props.view === 'compact' && css`
+      overflow: hidden;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    `}
   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'};
 
@@ -92,6 +95,8 @@ const Description = styled.span.withConfig({
   overflow: hidden;
   text-overflow: ellipsis;
   box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-break: break-word;
 
   ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
 `;

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

@@ -1 +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  overflow:hidden;\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","Footer","FooterLeft","FooterRight","FloatingArrow"],"mappings":"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"}
+{"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  ${props =>\n    props.view === 'compact' &&\n    css`\n      overflow: hidden;\n      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);\n    `}\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  overflow-wrap: break-word;\n  word-break: break-word;\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","view","css","width","theme","themeProp","getColor","$useBorder","Gutter","renderAsMargin","$gutter","Header","HeaderLeft","HeaderRight","Title","span","Description","Footer","FooterLeft","FooterRight","FloatingArrow"],"mappings":"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"}

package/build/widgets/index.js

@@ -8,5 +8,5 @@ export { default as AssetActionBase } from './AssetActionsBase/AssetActionsBase.
 export { default as AssetAction } from './AssetAction/AssetAction.js';
 export { default as ProgressBar } from './ProgressBar/ProgressBar.js';
 export { default as InfoCard } from './InfoCard/InfoCard.js';
-export { default as InstructionsSeverityDisplay } from './InstructionsSeverityDisplay/InstructionsSeverityDisplay.js';
+export { default as InstructionSeverityDisplay } from './InstructionSeverityDisplay/InstructionSeverityDisplay.js';
 //# sourceMappingURL=index.js.map

package/icons/index.js

@@ -36,6 +36,7 @@ import { ReactComponent as TriangleRightIcon } from './triangle-right.svg';
 import { ReactComponent as VerificationIcon } from './verification.svg';
 import { ReactComponent as WarningCircleIcon } from './warning-circle.svg';
 import { ReactComponent as WarningTriangleIcon } from './warning-triangle.svg';
+import { ReactComponent as InfoRedIcon } from './info-red.svg';
 import { ReactComponent as InfoYellowIcon } from './info-yellow.svg';
 export {
   AddIcon,
@@ -76,5 +77,6 @@ export {
   VerificationIcon,
   WarningCircleIcon,
   WarningTriangleIcon,
+  InfoRedIcon,
   InfoYellowIcon
 };

package/icons/info-red.svg

@@ -0,0 +1,11 @@
+<svg viewBox="5 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_red)">
+<rect width="28" height="28" transform="translate(5)" fill="#B62902"/>
+<path d="M19.0007 25.6663C12.5572 25.6663 7.33398 20.4432 7.33398 13.9997C7.33398 7.55617 12.5572 2.33301 19.0007 2.33301C25.4442 2.33301 30.6673 7.55617 30.6673 13.9997C30.6673 20.4432 25.4442 25.6663 19.0007 25.6663ZM19.0007 23.333C21.476 23.333 23.85 22.3497 25.6003 20.5993C27.3507 18.849 28.334 16.475 28.334 13.9997C28.334 11.5243 27.3507 9.15035 25.6003 7.40001C23.85 5.64967 21.476 4.66634 19.0007 4.66634C16.5253 4.66634 14.1513 5.64967 12.401 7.40001C10.6506 9.15035 9.66732 11.5243 9.66732 13.9997C9.66732 16.475 10.6506 18.849 12.401 20.5993C14.1513 22.3497 16.5253 23.333 19.0007 23.333ZM17.834 8.16634H20.1673V10.4997H17.834V8.16634ZM17.834 12.833H20.1673V19.833H17.834V12.833Z" fill="#FECACA"/>
+</g>
+<defs>
+<clipPath id="clip0_red">
+<path d="M5 14C5 6.26801 11.268 0 19 0C26.732 0 33 6.26801 33 14C33 21.732 26.732 28 19 28C11.268 28 5 21.732 5 14Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.9-rc.2",
+  "version": "2.0.9-rc.4",
   "publishConfig": {
     "access": "public"
   },

package/build/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InstructionsSeverityDisplay.js","sources":["../../../src/components/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InstructionsSeverityDisplay.styled';\n\nconst InformationIcon = () => (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M6 11C3.2385 11 1 8.7615 1 6C1 3.2385 3.2385 1 6 1C8.7615 1 11 3.2385 11 6C11 8.7615 8.7615 11 6 11ZM6 10C7.06087 10 8.07828 9.57857 8.82843 8.82843C9.57857 8.07828 10 7.06087 10 6C10 4.93913 9.57857 3.92172 8.82843 3.17157C8.07828 2.42143 7.06087 2 6 2C4.93913 2 3.92172 2.42143 3.17157 3.17157C2.42143 3.92172 2 4.93913 2 6C2 7.06087 2.42143 8.07828 3.17157 8.82843C3.92172 9.57857 4.93913 10 6 10ZM5.5 3.5H6.5V4.5H5.5V3.5ZM5.5 5.5H6.5V8.5H5.5V5.5Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst defaultLabels = {\n  1: 'Info',\n  2: 'Info',\n  3: 'Limited use',\n  4: 'Limited use',\n  5: 'Highly restricted'\n};\n\nconst InstructionsSeverityDisplay = React.forwardRef(function InstructionsSeverityDisplay(\n  {\n    severity,\n    instructionText,\n    severityLabel,\n    labels,\n    icon,\n    showCard = true,\n    padding,\n    badgeFontSize,\n    detailsFontSize,\n    bgLight,\n    bgDark,\n    ...props\n  },\n  forwardedRef\n) {\n  if (!instructionText) {\n    return null;\n  }\n\n  const displayLabel =\n    severityLabel || (labels && labels[severity]) || defaultLabels[severity] || defaultLabels[1];\n\n  return (\n    <S.Card\n      ref={forwardedRef}\n      $severity={severity}\n      $showCard={showCard}\n      $padding={padding}\n      $bgLight={bgLight}\n      $bgDark={bgDark}\n      {...props}\n    >\n      <S.BadgePill $severity={severity}>\n        {icon || <InformationIcon />}\n        <S.BadgeText $fontSize={badgeFontSize}>{displayLabel}</S.BadgeText>\n      </S.BadgePill>\n      <S.InstructionText $fontSize={detailsFontSize}>{instructionText}</S.InstructionText>\n    </S.Card>\n  );\n});\n\nInstructionsSeverityDisplay.propTypes = {\n  /** Severity level (1-5). 1=Info, 3=Limited use, 5=Highly restricted. */\n  severity: PropTypes.oneOf([1, 2, 3, 4, 5]),\n  /** The instruction text to display. Component returns null if empty. */\n  instructionText: PropTypes.string,\n  /** Override the default badge label for the severity level. */\n  severityLabel: PropTypes.string,\n  /** Map of severity level to translated label string, e.g. { 1: 'Info', 3: 'Begrenset bruk', 5: 'Svært begrenset' }. */\n  labels: PropTypes.objectOf(PropTypes.string),\n  /** Override the default icon element. */\n  icon: PropTypes.element,\n  /** Whether to show card styling (border-radius, shadow, border). Defaults to true. */\n  showCard: PropTypes.bool,\n  /** Custom card padding, e.g. \"8px 6px\" or \"20px\". Defaults to \"14px 10px\". */\n  padding: PropTypes.string,\n  /** Custom font size for the badge text, e.g. \"10px\" or \"0.75rem\". Defaults to \"12px\". */\n  badgeFontSize: PropTypes.string,\n  /** Custom font size for the details/instruction text, e.g. \"12px\" or \"0.875rem\". Defaults to \"14px\". */\n  detailsFontSize: PropTypes.string,\n  /** Override card background color in light mode, e.g. \"#ffffff\" or \"transparent\". */\n  bgLight: PropTypes.string,\n  /** Override card background color in dark mode, e.g. \"#1a1a1a\" or \"transparent\". */\n  bgDark: PropTypes.string\n};\n\nexport default InstructionsSeverityDisplay;\n"],"names":["InformationIcon","React","createElement","width","height","viewBox","fill","xmlns","d","defaultLabels","InstructionsSeverityDisplay","forwardRef","severity","instructionText","severityLabel","labels","icon","showCard","padding","badgeFontSize","detailsFontSize","bgLight","bgDark","props","forwardedRef","displayLabel","S","_extends","ref","$severity","$showCard","$padding","$bgLight","$bgDark","$fontSize","propTypes","process","env","NODE_ENV","PropTypes","oneOf","string","objectOf","element","bool"],"mappings":"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"}

package/build/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.styled.js

@@ -1,77 +0,0 @@
-import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../utils/defaultTheme.js';
-
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const Card = styled.div.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: ${props => props.$padding || '14px 10px'};
-  ${props => {
-  if (props.$bgDark || props.$bgLight) {
-    return props.theme.themeProp('background', props.$bgDark || props.theme.getColor('gray-900'), props.$bgLight || props.theme.getColor('gray-200'));
-  }
-  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
-}}
-
-  ${props => props.$showCard && css`
-      border-radius: 10px;
-      box-shadow: 0px 0px 26px #0000001a;
-    `}
-
-  ${props => props.$severity === 5 && props.$showCard && css`
-      ${props.theme.themeProp('border', '1px solid #7f1d1d', '1px solid #dc2626')}
-    `}
-`;
-const BadgePill = styled.span.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 9999px;
-  width: fit-content;
-  height: 24px;
-  ${props => (props.$severity === 1 || props.$severity === 2) && css`
-      border-style: solid;
-      border-width: 1px;
-      ${props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('white'))}
-      ${props.theme.themeProp('border-color', '#3a3a3a', '#ece4e1')}
-      ${props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
-    `}
-
-  ${props => (props.$severity === 3 || props.$severity === 4) && css`
-      ${props.theme.themeProp('background', '#2e2301', '#faeeb3')}
-      ${props.theme.themeProp('color', '#eab308', '#78350F')}
-    `}
-
-  ${props => props.$severity === 5 && css`
-      ${props.theme.themeProp('background', '#7E1B1B', 'rgba(182, 41, 2, 0.1)')}
-      ${props.theme.themeProp('color', '#e8d5d6', '#b62902')}
-    `}
-`;
-const BadgeText = styled.span.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: ${props => props.$fontSize || '12px'};
-  font-weight: 500;
-  line-height: 1.333em;
-`;
-const InstructionText = styled.p.withConfig({
-  shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: ${props => props.$fontSize || '14px'};
-  font-weight: 400;
-  line-height: 1.286em;
-  margin: 0;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}
-`;
-
-export { BadgePill, BadgeText, Card, InstructionText };
-//# sourceMappingURL=InstructionsSeverityDisplay.styled.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"InstructionsSeverityDisplay.styled.js","sources":["../../../src/components/widgets/InstructionsSeverityDisplay/InstructionsSeverityDisplay.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 Card = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: ${props => props.$padding || '14px 10px'};\n  ${props => {\n    if (props.$bgDark || props.$bgLight) {\n      return props.theme.themeProp(\n        'background',\n        props.$bgDark || props.theme.getColor('gray-900'),\n        props.$bgLight || props.theme.getColor('gray-200')\n      );\n    }\n    return props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('gray-200')\n    );\n  }}\n\n  ${props =>\n    props.$showCard &&\n    css`\n      border-radius: 10px;\n      box-shadow: 0px 0px 26px #0000001a;\n    `}\n\n  ${props =>\n    props.$severity === 5 &&\n    props.$showCard &&\n    css`\n      ${props.theme.themeProp('border', '1px solid #7f1d1d', '1px solid #dc2626')}\n    `}\n`;\n\nexport const BadgePill = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  border-radius: 9999px;\n  width: fit-content;\n  height: 24px;\n  ${props =>\n    (props.$severity === 1 || props.$severity === 2) &&\n    css`\n      border-style: solid;\n      border-width: 1px;\n      ${props.theme.themeProp(\n        'background',\n        props.theme.getColor('gray-800'),\n        props.theme.getColor('white')\n      )}\n      ${props.theme.themeProp('border-color', '#3a3a3a', '#ece4e1')}\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-300'),\n        props.theme.getColor('black')\n      )}\n    `}\n\n  ${props =>\n    (props.$severity === 3 || props.$severity === 4) &&\n    css`\n      ${props.theme.themeProp('background', '#2e2301', '#faeeb3')}\n      ${props.theme.themeProp('color', '#eab308', '#78350F')}\n    `}\n\n  ${props =>\n    props.$severity === 5 &&\n    css`\n      ${props.theme.themeProp('background', '#7E1B1B', 'rgba(182, 41, 2, 0.1)')}\n      ${props.theme.themeProp('color', '#e8d5d6', '#b62902')}\n    `}\n`;\n\nexport const BadgeText = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: ${props => props.$fontSize || '12px'};\n  font-weight: 500;\n  line-height: 1.333em;\n`;\n\nexport const InstructionText = styled.p\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: ${props => props.$fontSize || '14px'};\n  font-weight: 400;\n  line-height: 1.286em;\n  margin: 0;\n  ${props =>\n    props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('black'))}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Card","styled","div","withConfig","attrs","applyDefaultTheme","props","$padding","$bgDark","$bgLight","theme","themeProp","getColor","$showCard","css","$severity","BadgePill","span","BadgeText","$fontSize","InstructionText","p"],"mappings":"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"}