@ntbjs/react-components 2.0.0-rc.3 → 2.0.0-rc.30

package/build/widgets/Instructions/Instructions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Instructions.js","sources":["../../../src/components/widgets/Instructions/Instructions.js"],"sourcesContent":["import { isFunction } from 'lodash';\nimport PropTypes from 'prop-types';\nimport React, { useCallback, useEffect, useState } from 'react';\nimport { ReactComponent as AlertIcon } from '../../../icons/warning-circle.svg';\nimport AutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect';\nimport TextArea from '../../inputs/TextArea/TextArea';\nimport * as S from './Instructions.styled';\n\n/**\n * Instructions that let you display Terms & Conditions\n *\n *\n * ### Import\n *\n * ``` js\n * import { Instructions } from '@ntbjs/react-components/widgets/Instructions'\n * // or\n * import Instructions from '@ntbjs/react-components/widgets/Instructions'\n * ```\n *\n * ### AutocompleteSelect\n * `AutocompleteSelect` is integrated within Instructions in order to implement the Drop-down Menu (check out the `Autocomplete` component documentation).\n *\n *\n *  <br /> ## Options `object` format\n * Options are represented by an `Array` of `objects` with the following format:\n *\n * ``` js\n * {\n *   value: \"Example\",\n *   label: \"Example\"\n * }\n * ```\n *\n */\n\nconst Instructions = React.forwardRef(function Instructions(\n  {\n    clickToAdd,\n    customAddMessage,\n    selectedOption,\n    loadOptions,\n    readOnly,\n    disabled,\n    hidden,\n    name,\n    lightBackground,\n    autoSelect,\n    subscribeCurrentValue: subscribeCurrentValueProp,\n    onChange: onChangeProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    onUpdateCallback,\n    availableOptions,\n    loadingMessageFunc,\n    placeholder,\n    type,\n    selectType,\n    edit,\n    rows,\n    showMore,\n    showMoreText,\n    showLessText,\n    isExpanded,\n    loadingIcon,\n    successIcon,\n    padding,\n    ...props\n  },\n  forwardedRef\n) {\n  const [isHovered, setIsHovered] = useState(false);\n  const [selected, setSelected] = useState({});\n  const [addInstructions, setAddInstructions] = useState(clickToAdd);\n  const [customMessage, setCustomMessage] = useState(customAddMessage);\n  const [background, setBackground] = useState(lightBackground);\n  const [initialHover, setInitialHover] = useState(true);\n  const [currentValue, setCurrentValue] = useState();\n\n  useEffect(() => {\n    if (isFunction(subscribeCurrentValueProp)) {\n      subscribeCurrentValueProp(currentValue);\n    }\n  }, [currentValue]);\n\n  useEffect(() => {\n    handleChange(selected);\n  }, [selected]);\n  //Selected option to be displayed on first render\n  useEffect(() => {\n    if (selectedOption) {\n      setCurrentValue(selectedOption.value);\n    }\n  }, [selectedOption]);\n  //Custom instructions added by consumer\n  useEffect(() => {\n    if (addInstructions) {\n      setCurrentValue(customMessage);\n      setInitialHover(true);\n    }\n  }, [addInstructions, handleOnFocus]);\n\n  const onChange = useCallback(\n    event => {\n      setCurrentValue(event.target.value);\n      if (isFunction(onChangeProp)) {\n        onChangeProp(event);\n      }\n    },\n    [onChangeProp]\n  );\n  const onFocus = useCallback(\n    event => {\n      if (autoSelect) {\n        event.target.select();\n      }\n      if (isFunction(onFocusProp)) {\n        onFocusProp(event);\n      }\n      if (event.target.value === customMessage) {\n        setCurrentValue('');\n      }\n    },\n    [autoSelect, readOnly, onFocusProp]\n  );\n  const onBlur = useCallback(\n    event => {\n      if (isFunction(onBlurProp)) {\n        onBlurProp(event);\n      }\n    },\n    [onBlurProp]\n  );\n\n  const handleMouseOver = () => {\n    setIsHovered(true);\n  };\n  const handleMouseLeave = () => {\n    setIsHovered(false);\n  };\n\n  const handleOnFocus = () => {\n    if (customMessage === currentValue) {\n      setCurrentValue('');\n    }\n  };\n\n  const handleChange = selected => {\n    if (selected === null) {\n      setSelected({});\n      setAddInstructions(true);\n      setBackground(true);\n      setInitialHover(true);\n      setCustomMessage(customAddMessage);\n    } else {\n      setSelected(selected);\n      setCurrentValue(selected.value);\n      setAddInstructions(false);\n      setBackground(false);\n      setInitialHover(false);\n      onUpdateCallback(selected);\n    }\n  };\n\n  const sharedSelectProps = {\n    options: loadOptions ? undefined : availableOptions,\n    loadOptions: loadOptions,\n    loadingMessage: loadingMessageFunc,\n    placeholder: placeholder\n  };\n\n  if (hidden) return null;\n\n  return (\n    <S.Instructions\n      ref={forwardedRef}\n      initialHover={initialHover}\n      onMouseDown={handleMouseOver}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {!readOnly && !disabled && (\n        <S.TopBarContainer\n          initialHover={initialHover}\n          className={isHovered && !readOnly && !disabled && 'slide-in'}\n        >\n          <S.SelectContainer>\n            <AutocompleteSelect\n              type={selectType}\n              value={selectedOption}\n              creatable={false}\n              onChange={handleChange}\n              {...sharedSelectProps}\n            />\n          </S.SelectContainer>\n        </S.TopBarContainer>\n      )}\n\n      <S.InstructionsArea type={type}>\n        <TextArea\n          noBorder\n          instructionsTextArea={true}\n          type={type}\n          lightBackground={background}\n          readOnly={readOnly}\n          disabled={disabled}\n          name={name}\n          isExpanded={isExpanded}\n          edit={edit}\n          value={currentValue === null ? '' : currentValue}\n          onFocus={onFocus}\n          onChange={onChange}\n          onBlur={onBlur}\n          rows={rows}\n          showMore={showMore}\n          showMoreText={showMoreText}\n          showLessText={showLessText}\n          icon={<AlertIcon />}\n          loadingIcon={loadingIcon}\n          successIcon={successIcon}\n          padding={padding}\n        />\n      </S.InstructionsArea>\n    </S.Instructions>\n  );\n});\n\nInstructions.defaultProps = {\n  clickToAdd: false,\n  lightBackground: false,\n  autoSelect: true,\n  hidden: false,\n  edit: false,\n  disabled: false,\n  readOnly: false,\n  type: '',\n  selectType: '',\n  padding: 'medium',\n  onUpdateCallback: () => {}\n};\n\nInstructions.propTypes = {\n  /**\n   * Name of the text area (used when sending form data)\n   */\n  name: PropTypes.string,\n  /**\n   * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Search categories...\"\n   */\n  placeholder: PropTypes.string,\n  /**\n   * How many rows/lines of text to be displayed by default\n   */\n  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Selected option\n   */\n  selectedOption: PropTypes.any,\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  loadOptions: PropTypes.func,\n  /**\n   * Function for custom \"Loading...\" message while waiting for the first page\n   * from `loadOptions` to resolve. Defaults to \"Loading...\" if no function is provided.\n   */\n  loadingMessageFunc: PropTypes.func,\n  /**\n  /**\n   * Whether the components displays an initial custom message.\n   */\n  clickToAdd: PropTypes.bool,\n  /**\n   * Add initial custom message. i.e: `No instructions (click to add)`.\n   */\n  customAddMessage: PropTypes.string,\n  /**\n   * Whether to auto select the entire value when the input is focused – does also work when the field is in read-only mode\n   */\n  autoSelect: PropTypes.bool,\n  /**\n   * Whether the instruction is read only\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the intruction is disabled\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * Display Show More\n   */\n  showMore: PropTypes.bool,\n  /**\n   * Show More message displayed below the text area\n   */\n  showMoreText: PropTypes.string,\n  /**\n   * Show Less message displayed below the text area\n   */\n  showLessText: PropTypes.string,\n  /**\n   * `Array` of `objects` that populate the select menu. This is only needed\n   * when asynchronous option fetching with the `loadOptions` prop is not used.\n   *\n   * **Note:**\n   * <br />This will be overridden by the `loadOptions` prop if both props are set.\n   */\n  availableOptions: PropTypes.arrayOf(PropTypes.object),\n  /**\n   * `LightBackground color\n   */\n  lightBackground: PropTypes.bool,\n  /**\n   * Displays a light-yellow background to show that instruction value is editable\n   */\n  edit: PropTypes.bool,\n  /**\n   * Function with a `Promise` returning filtered options.\n   *\n   * See [Asynchronous fetching/filtering with pagination](#asynchronous-fetchingfiltering-with-pagination)\n   * for details.\n   *\n   * **Note:**\n   * <br /> `options`should be passed as an `array`of `objects`\n   * <br />This will override the `availableOptions` prop if both props are set.\n   */\n  options: PropTypes.array,\n  /**\n   * Callback for `onChange`\n   */\n  subscribeCurrentValue: PropTypes.func,\n  /**\n   * Callback for `onChange`\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback for `onFocus`\n   */\n  onFocus: PropTypes.func,\n  /**\n   * Callback for `onBlur`\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Callback for `onUpdateCallback`: register to AutocompleteSelect label and value\n   */\n  onUpdateCallback: PropTypes.func,\n  /**\n   * Define the type based on error,error-border , warning, loading and success.\n   */\n  type: PropTypes.oneOf([\n    '',\n    'error',\n    'error-border',\n    'warning',\n    'instructions-warning',\n    'loading',\n    'success'\n  ]),\n  /**\n   * Define the type AutoCompleteSelect based on error,error-border , warning, loading and success.\n   */\n  selectType: PropTypes.oneOf([\n    '',\n    'error',\n    'warning',\n    'instructions-warning',\n    'loading',\n    'success'\n  ]),\n  isExpanded: PropTypes.func,\n  /**\n   * Icon element – E.g: `icon={<Spinner />}`\n   */\n  loadingIcon: PropTypes.element,\n  /**\n   * Icon element – E.g: `icon={<Check />}`\n   */\n  successIcon: PropTypes.element,\n  /**\n   * Add padding (small-medium-large)\n   */\n  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])\n};\n\nexport default Instructions;\n"],"names":["Instructions","React","forwardRef","clickToAdd","customAddMessage","selectedOption","loadOptions","readOnly","disabled","hidden","name","lightBackground","autoSelect","subscribeCurrentValue","subscribeCurrentValueProp","onChange","onChangeProp","onFocus","onFocusProp","onBlur","onBlurProp","onUpdateCallback","availableOptions","loadingMessageFunc","placeholder","type","selectType","edit","rows","showMore","showMoreText","showLessText","isExpanded","loadingIcon","successIcon","padding","props","forwardedRef","isHovered","setIsHovered","useState","selected","setSelected","addInstructions","setAddInstructions","customMessage","setCustomMessage","background","setBackground","initialHover","setInitialHover","currentValue","setCurrentValue","useEffect","isFunction","handleChange","value","handleOnFocus","useCallback","event","target","select","handleMouseOver","handleMouseLeave","sharedSelectProps","options","undefined","loadingMessage","createElement","S","_extends","ref","onMouseDown","onMouseLeave","className","AutocompleteSelect","creatable","TextArea","noBorder","instructionsTextArea","icon","AlertIcon","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","oneOfType","number","any","func","bool","arrayOf","object","array","oneOf","element"],"mappings":"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"}

package/build/widgets/Instructions/Instructions.styled.js

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const Instructions = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const TopBarContainer = styled.div.attrs(applyDefaultTheme)`
+  position: absolute;
+  display: flex;
+  width: 100%;
+  margin-top: 0;
+  transition: margin-top 120ms;
+  &&.slide-in {
+    margin-top: -24px;
+  }
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+
+  ${props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const SelectContainer = styled.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  margin: 0 2px;
+`;
+const InstructionsArea = styled.div.attrs(applyDefaultTheme)`
+  margin: 2px 2px -2px 2px;
+`;
+
+export { Instructions, InstructionsArea, SelectContainer, TopBarContainer };
+//# sourceMappingURL=Instructions.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Instructions.styled.js","sources":["../../../src/components/widgets/Instructions/Instructions.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const Instructions = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  ${props =>\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n`;\n\nexport const TopBarContainer = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  display: flex;\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n  ${props =>\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n\n  ${props =>\n    props.initialHover &&\n    props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};\n`;\n\nexport const SelectContainer = styled.div.attrs(applyDefaultTheme)`\n  width: 100%;\n  margin: 0 2px;\n`;\n\nexport const InstructionsArea = styled.div.attrs(applyDefaultTheme)`\n  margin: 2px 2px -2px 2px;\n`;\n"],"names":["Instructions","styled","div","attrs","applyDefaultTheme","props","theme","themeProp","getColor","TopBarContainer","initialHover","SelectContainer","InstructionsArea"],"mappings":";;;AAGO,MAAMA,YAAY,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC/D;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC7F,EAAC;AAEM,MAAMC,eAAe,GAAGR,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC7F;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACK,YAAY,IAClBL,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAC7F,EAAC;AAEM,MAAMG,eAAe,GAAGV,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAClE;AACA;AACA,EAAC;AAEM,MAAMQ,gBAAgB,GAAGX,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACnE;AACA;;;;"}

package/build/widgets/Instructions/index.js

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

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

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

package/build/widgets/ProgressBar/ProgressBar.js

@@ -0,0 +1,72 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Container, Label, InnerContainer, Completed, ProgressBarTrack, MetricsContainer, ProgressBarFill, PercentageIndicator, ExternalPercentageIndicator, Link, ButtonLink, StyledArrowIcon } from './ProgressBar.styled.js';
+
+const ProgressBar = ({
+  totalAssets,
+  completedAssets,
+  percentageText,
+  barColor,
+  height,
+  label,
+  type,
+  linkText,
+  onClick,
+  ...props
+}) => {
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
+  const safeCompletedAssets = Math.max(0, completedAssets);
+  const safeTotalAssets = Math.max(1, totalAssets);
+  const percentage = safeCompletedAssets / safeTotalAssets * 100;
+  const formattedPercentage = `${Math.round(percentage)}%`;
+  const isLowPercentage = percentage <= 5;
+  const handleLinkClick = e => onClick(e);
+  const formatNumberNew = num => {
+    if (num < 1000000) {
+      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    } else {
+      const units = ['K', 'M', 'B', 'T'];
+      const unit = Math.floor((num.toString().length - 1) / 3) - 1;
+      const shortNum = num / Math.pow(1000, unit + 1);
+      return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
+    }
+  };
+  return React__default.createElement(Container, _extends({
+    height: height
+  }, props), React__default.createElement(Label, null, label), React__default.createElement(InnerContainer, {
+    type: type
+  }, React__default.createElement(Completed, {
+    type: type
+  }, formatNumberNew(completedAssets)), React__default.createElement(ProgressBarTrack, null, React__default.createElement(MetricsContainer, {
+    hasLink: Boolean(linkText)
+  }, React__default.createElement(ProgressBarFill, {
+    type: type,
+    percentage: percentage,
+    barColor: barColor
+  }, !isLowPercentage && React__default.createElement(PercentageIndicator, {
+    hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage)), isLowPercentage && React__default.createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default.createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React__default.createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkText), React__default.createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })))));
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  totalAssets: PropTypes.number.isRequired,
+  completedAssets: PropTypes.number.isRequired,
+  percentageText: PropTypes.string,
+  barColor: PropTypes.string,
+  height: PropTypes.number,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  linkText: PropTypes.string,
+  onClick: PropTypes.func
+} : {};
+
+export { ProgressBar as default };
+//# sourceMappingURL=ProgressBar.js.map

package/build/widgets/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/widgets/ProgressBar/ProgressBar.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ProgressBar.styled';\n\n/**\n * ProgressBar that let you progress through a task.\n *\n *\n * ### Import\n *\n * ``` js\n * import { ProgressBar } from '@ntbjs/react-components/widgets/ProgressBar'\n * // or\n * import ProgressBar from '@ntbjs/react-components/widgets/ProgressBar'\n * ```\n *\n *\n */\n\nconst ProgressBar = ({\n  totalAssets,\n  completedAssets,\n  percentageText,\n  barColor,\n  height,\n  label,\n  type,\n  linkText,\n  onClick,\n  ...props\n}) => {\n  const [isLinkHovered, setIsLinkHovered] = useState(false);\n\n  const safeCompletedAssets = Math.max(0, completedAssets);\n  const safeTotalAssets = Math.max(1, totalAssets);\n  const percentage = (safeCompletedAssets / safeTotalAssets) * 100;\n  const formattedPercentage = `${Math.round(percentage)}%`;\n\n  const isLowPercentage = percentage <= 5;\n\n  const handleLinkClick = e => onClick(e);\n\n  const formatNumberNew = num => {\n    if (num < 1000000) {\n      return num.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n    } else {\n      const units = ['K', 'M', 'B', 'T'];\n      const unit = Math.floor((num.toString().length - 1) / 3) - 1;\n      const shortNum = num / Math.pow(1000, unit + 1);\n      return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];\n    }\n  };\n\n  return (\n    <S.Container height={height} {...props}>\n      <S.Label>{label}</S.Label>\n      <S.InnerContainer type={type}>\n        <S.Completed type={type}>{formatNumberNew(completedAssets)}</S.Completed>\n        <S.ProgressBarTrack>\n          <S.MetricsContainer hasLink={Boolean(linkText)}>\n            <S.ProgressBarFill type={type} percentage={percentage} barColor={barColor}>\n              {!isLowPercentage && (\n                <S.PercentageIndicator hasLink={Boolean(linkText)}>\n                  {percentageText || formattedPercentage}\n                </S.PercentageIndicator>\n              )}\n            </S.ProgressBarFill>\n            {isLowPercentage && (\n              <S.ExternalPercentageIndicator>\n                {percentageText || formattedPercentage}\n              </S.ExternalPercentageIndicator>\n            )}\n          </S.MetricsContainer>\n          {linkText && (\n            <S.Link\n              onClick={handleLinkClick}\n              onMouseEnter={() => setIsLinkHovered(true)}\n              onMouseLeave={() => setIsLinkHovered(false)}\n            >\n              <S.ButtonLink $isHovered={isLinkHovered}>{linkText}</S.ButtonLink>\n              <S.StyledArrowIcon $isHovered={isLinkHovered} />\n            </S.Link>\n          )}\n        </S.ProgressBarTrack>\n      </S.InnerContainer>\n    </S.Container>\n  );\n};\n\nProgressBar.propTypes = {\n  totalAssets: PropTypes.number.isRequired,\n  completedAssets: PropTypes.number.isRequired,\n  percentageText: PropTypes.string,\n  barColor: PropTypes.string,\n  height: PropTypes.number,\n  label: PropTypes.string,\n  type: PropTypes.string,\n  linkText: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","totalAssets","completedAssets","percentageText","barColor","height","label","type","linkText","onClick","props","isLinkHovered","setIsLinkHovered","useState","safeCompletedAssets","Math","max","safeTotalAssets","percentage","formattedPercentage","round","isLowPercentage","handleLinkClick","e","formatNumberNew","num","toString","replace","units","unit","floor","length","shortNum","pow","toFixed","React","createElement","S","_extends","hasLink","Boolean","onMouseEnter","onMouseLeave","$isHovered","propTypes","process","env","NODE_ENV","PropTypes","number","isRequired","string","func"],"mappings":";;;;;AAmBMA,MAAAA,WAAW,GAAGA,CAAC;EACnBC,WAAW;EACXC,eAAe;EACfC,cAAc;EACdC,QAAQ;EACRC,MAAM;EACNC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACP,GAAGC,KAAAA;AACL,CAAC,KAAK;EACJ,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EAEzD,MAAMC,mBAAmB,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEd,eAAe,CAAC,CAAA;EACxD,MAAMe,eAAe,GAAGF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEf,WAAW,CAAC,CAAA;AAChD,EAAA,MAAMiB,UAAU,GAAIJ,mBAAmB,GAAGG,eAAe,GAAI,GAAG,CAAA;EAChE,MAAME,mBAAmB,GAAG,CAAGJ,EAAAA,IAAI,CAACK,KAAK,CAACF,UAAU,CAAC,CAAG,CAAA,CAAA,CAAA;AAExD,EAAA,MAAMG,eAAe,GAAGH,UAAU,IAAI,CAAC,CAAA;AAEvC,EAAA,MAAMI,eAAe,GAAGC,CAAC,IAAId,OAAO,CAACc,CAAC,CAAC,CAAA;EAEvC,MAAMC,eAAe,GAAGC,GAAG,IAAI;IAC7B,IAAIA,GAAG,GAAG,OAAO,EAAE;MACjB,OAAOA,GAAG,CAACC,QAAQ,EAAE,CAACC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAA;AAC7D,KAAC,MAAM;MACL,MAAMC,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;MAClC,MAAMC,IAAI,GAAGd,IAAI,CAACe,KAAK,CAAC,CAACL,GAAG,CAACC,QAAQ,EAAE,CAACK,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA;AAC5D,MAAA,MAAMC,QAAQ,GAAGP,GAAG,GAAGV,IAAI,CAACkB,GAAG,CAAC,IAAI,EAAEJ,IAAI,GAAG,CAAC,CAAC,CAAA;AAC/C,MAAA,OAAOG,QAAQ,CAACE,OAAO,CAACF,QAAQ,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAGJ,KAAK,CAACC,IAAI,CAAC,CAAA;AAC9D,KAAA;GACD,CAAA;EAED,OACEM,cAAA,CAAAC,aAAA,CAACC,SAAW,EAAAC,QAAA,CAAA;AAACjC,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EAAKK,KAAK,CACpCyB,EAAAA,cAAA,CAAAC,aAAA,CAACC,KAAO,QAAE/B,KAAe,CAAC,EAC1B6B,cAAA,CAAAC,aAAA,CAACC,cAAgB,EAAA;AAAC9B,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,EAC3B4B,cAAA,CAAAC,aAAA,CAACC,SAAW,EAAA;AAAC9B,IAAAA,IAAI,EAAEA,IAAAA;GAAOiB,EAAAA,eAAe,CAACtB,eAAe,CAAe,CAAC,EACzEiC,cAAA,CAAAC,aAAA,CAACC,gBAAkB,QACjBF,cAAA,CAAAC,aAAA,CAACC,gBAAkB,EAAA;IAACE,OAAO,EAAEC,OAAO,CAAChC,QAAQ,CAAA;AAAE,GAAA,EAC7C2B,cAAA,CAAAC,aAAA,CAACC,eAAiB,EAAA;AAAC9B,IAAAA,IAAI,EAAEA,IAAK;AAACW,IAAAA,UAAU,EAAEA,UAAW;AAACd,IAAAA,QAAQ,EAAEA,QAAAA;GAC9D,EAAA,CAACiB,eAAe,IACfc,cAAA,CAAAC,aAAA,CAACC,mBAAqB,EAAA;IAACE,OAAO,EAAEC,OAAO,CAAChC,QAAQ,CAAA;AAAE,GAAA,EAC/CL,cAAc,IAAIgB,mBACE,CAER,CAAC,EACnBE,eAAe,IACdc,cAAA,CAAAC,aAAA,CAACC,2BAA6B,EAC3BlC,IAAAA,EAAAA,cAAc,IAAIgB,mBACU,CAEf,CAAC,EACpBX,QAAQ,IACP2B,cAAA,CAAAC,aAAA,CAACC,IAAM,EAAA;AACL5B,IAAAA,OAAO,EAAEa,eAAgB;AACzBmB,IAAAA,YAAY,EAAEA,MAAM7B,gBAAgB,CAAC,IAAI,CAAE;AAC3C8B,IAAAA,YAAY,EAAEA,MAAM9B,gBAAgB,CAAC,KAAK,CAAA;AAAE,GAAA,EAE5CuB,cAAA,CAAAC,aAAA,CAACC,UAAY,EAAA;AAACM,IAAAA,UAAU,EAAEhC,aAAAA;GAAgBH,EAAAA,QAAuB,CAAC,EAClE2B,cAAA,CAAAC,aAAA,CAACC,eAAiB,EAAA;AAACM,IAAAA,UAAU,EAAEhC,aAAAA;AAAc,GAAE,CACzC,CAEQ,CACJ,CACP,CAAC,CAAA;AAElB,EAAC;AAEDX,WAAW,CAAC4C,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AACtB9C,EAAAA,WAAW,EAAE+C,SAAS,CAACC,MAAM,CAACC,UAAU;AACxChD,EAAAA,eAAe,EAAE8C,SAAS,CAACC,MAAM,CAACC,UAAU;EAC5C/C,cAAc,EAAE6C,SAAS,CAACG,MAAM;EAChC/C,QAAQ,EAAE4C,SAAS,CAACG,MAAM;EAC1B9C,MAAM,EAAE2C,SAAS,CAACC,MAAM;EACxB3C,KAAK,EAAE0C,SAAS,CAACG,MAAM;EACvB5C,IAAI,EAAEyC,SAAS,CAACG,MAAM;EACtB3C,QAAQ,EAAEwC,SAAS,CAACG,MAAM;EAC1B1C,OAAO,EAAEuC,SAAS,CAACI,IAAAA;AACrB,CAAC,GAAA,EAAA;;;;"}

package/build/widgets/ProgressBar/ProgressBar.styled.js

@@ -0,0 +1,145 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import 'react';
+import { ReactComponent as SvgArrowForward } from '../../icons/arrow-forward.svg.js';
+
+const getBackgroundColor = props => {
+  if (props.barColor) {
+    return `background: ${props.barColor};`;
+  }
+  const colorMap = {
+    success: ['emerald-600', 'emerald-300'],
+    error: ['red-600', 'cercise-200'],
+    warning: ['orange-600', 'orange-400'],
+    none: ['gray-500', 'gray-300'],
+    default: ['emerald-600', 'emerald-500']
+  };
+  const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;
+  return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
+};
+styled.p.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+`;
+const Container = styled.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  height: ${props => props.height ? `${props.height}px` : '50px'};
+  font-family: ${props => props.theme.primaryFontFamily};
+`;
+const InnerContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  height: 100%;
+`;
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: ${props => props.hasLink ? '85%' : '100%'};
+  height: 100%;
+  flex-direction: row;
+  justify-content: flex-start;
+`;
+const Label = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  padding-bottom: 5px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+`;
+styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
+`;
+const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  height: 100%;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))}
+`;
+const Completed = styled.div.attrs(applyDefaultTheme)`
+  font-size: 1.2rem;
+  font-weight: 400;
+  height: 100%;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  width: 96px;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'))};
+`;
+const PercentageIndicator = styled.div.attrs(applyDefaultTheme)`
+  position: absolute;
+  right: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  opacity: 0.8;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+`;
+const ExternalPercentageIndicator = styled.div.attrs(applyDefaultTheme)`
+  margin-left: 8px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  font-size: 0.875rem;
+  opacity: 0.9;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
+  display: flex;
+  align-items: center;
+`;
+const ProgressBarFill = styled.div.attrs(applyDefaultTheme)`
+  height: 100%;
+  border-radius: 0 3px 3px 0;
+  width: ${props => props.percentage}%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  ${props => getBackgroundColor(props)}
+  transition: width 0.3s ease;
+`;
+const Link = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 15%;
+  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.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  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).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, Completed, Container, ExternalPercentageIndicator, InnerContainer, Label, Link, MetricsContainer, PercentageIndicator, ProgressBarFill, ProgressBarTrack, StyledArrowIcon };
+//# sourceMappingURL=ProgressBar.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.styled.js","sources":["../../../src/components/widgets/ProgressBar/ProgressBar.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\nimport { ArrowForwardIcon } from '../../../icons';\n\nconst getBackgroundColor = props => {\n  if (props.barColor) {\n    return `background: ${props.barColor};`;\n  }\n  const colorMap = {\n    success: ['emerald-600', 'emerald-300'],\n    error: ['red-600', 'cercise-200'],\n    warning: ['orange-600', 'orange-400'],\n    none: ['gray-500', 'gray-300'],\n    default: ['emerald-600', 'emerald-500']\n  };\n\n  const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;\n\n  return props.theme.themeProp(\n    'background',\n    props.theme.getColor(darkColor),\n    props.theme.getColor(lightColor)\n  );\n};\n\nexport const ProgressBar = styled.p.attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n`;\n\nexport const Container = styled.div.attrs(applyDefaultTheme)`\n  width: 100%;\n  height: ${props => (props.height ? `${props.height}px` : '50px')};\n  font-family: ${props => props.theme.primaryFontFamily};\n`;\n\nexport const InnerContainer = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  height: 100%;\n`;\n\nexport const MetricsContainer = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: ${props => (props.hasLink ? '85%' : '100%')};\n  height: 100%;\n  flex-direction: row;\n  justify-content: flex-start;\n`;\n\nexport const Label = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  padding-bottom: 5px;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n`;\n\nexport const Percentage = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 500;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n`;\n\nexport const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 3px;\n  height: 100%;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-50')\n    )}\n`;\n\nexport const Completed = styled.div.attrs(applyDefaultTheme)`\n  font-size: 1.2rem;\n  font-weight: 400;\n  height: 100%;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  width: 96px;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-800')\n    )};\n`;\nexport const PercentageIndicator = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  right: 10px;\n  font-weight: 400;\n  font-size: 0.875rem;\n  white-space: nowrap;\n  opacity: 0.8;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-500')\n    )};\n`;\n\nexport const ExternalPercentageIndicator = styled.div.attrs(applyDefaultTheme)`\n  margin-left: 8px;\n  font-size: 1.2rem;\n  font-weight: 400;\n  font-size: 0.875rem;\n  opacity: 0.9;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-500')\n    )};\n  display: flex;\n  align-items: center;\n`;\n\nexport const ProgressBarFill = styled.div.attrs(applyDefaultTheme)`\n  height: 100%;\n  border-radius: 0 3px 3px 0;\n  width: ${props => props.percentage}%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ${props => getBackgroundColor(props)}\n  transition: width 0.3s ease;\n`;\n\nexport const Link = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 400;\n  width: 15%;\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.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  font-weight: 500;\n  height: 100%;\n  display: flex;\n  align-items: center;\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).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":["getBackgroundColor","props","barColor","colorMap","success","error","warning","none","default","darkColor","lightColor","type","theme","themeProp","getColor","styled","p","attrs","applyDefaultTheme","primaryFontFamily","Container","div","height","InnerContainer","MetricsContainer","hasLink","Label","ProgressBarTrack","Completed","PercentageIndicator","ExternalPercentageIndicator","ProgressBarFill","percentage","Link","ButtonLink","$isHovered","StyledArrowIcon","ArrowForwardIcon"],"mappings":"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"}

package/build/widgets/ProgressBar/index.js

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

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

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

package/build/widgets/SummaryCard/SummaryCard.js

@@ -0,0 +1,92 @@
+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;
+  return React__default.createElement(SummaryCard$1, _extends({
+    ref: forwardedRef,
+    width: width,
+    useBorder: useBorder
+  }, props, {
+    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  return (\n    <S.SummaryCard ref={forwardedRef} width={width} useBorder={useBorder} {...props} view={view}>\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","createElement","S","_extends","ref","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