@ntbjs/react-components 2.0.14 → 3.0.0-rc.2

package/build/widgets/Instructions/Instructions.js

@@ -1,39 +1,40 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { isFunction } from 'lodash';
-import PropTypes from 'prop-types';
 import React__default, { useState, useEffect, useCallback } from 'react';
 import { ReactComponent as SvgWarningCircle } from '../../icons/warning-circle.svg.js';
 import CompactAutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js';
 import TextArea from '../../inputs/TextArea/TextArea.js';
 import { Instructions as Instructions$1, TopBarContainer, SelectContainer, InstructionsArea } from './Instructions.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
+const NOOP = () => {};
 const Instructions = React__default.forwardRef(function Instructions({
-  clickToAdd,
+  clickToAdd = false,
   customAddMessage,
   selectedOption,
   loadOptions,
-  readOnly,
-  disabled,
-  hidden,
+  readOnly = false,
+  disabled = false,
+  hidden = false,
   name,
-  lightBackground,
-  autoSelect,
+  lightBackground = false,
+  autoSelect = true,
   subscribeCurrentValue: subscribeCurrentValueProp,
   onChange: onChangeProp,
   onFocus: onFocusProp,
   onBlur: onBlurProp,
-  onUpdateCallback,
+  onUpdateCallback = NOOP,
   availableOptions,
   loadingMessageFunc,
   placeholder,
-  type,
-  selectType,
-  edit,
+  type = '',
+  selectType = '',
+  edit = false,
   rows,
   isExpanded,
   loadingIcon,
   successIcon,
-  padding,
+  padding = 'medium',
+  options,
   ...props
 }, forwardedRef) {
   const [isHovered, setIsHovered] = useState(false);
@@ -61,7 +62,7 @@ const Instructions = React__default.forwardRef(function Instructions({
       setCurrentValue(customMessage);
       setInitialHover(true);
     }
-  }, [addInstructions, handleOnFocus]);
+  }, [addInstructions, customMessage]);
   const onChange = useCallback(event => {
     setCurrentValue(event.target.value);
     if (isFunction(onChangeProp)) {
@@ -90,11 +91,6 @@ const Instructions = React__default.forwardRef(function Instructions({
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  const handleOnFocus = () => {
-    if (customMessage === currentValue) {
-      setCurrentValue('');
-    }
-  };
   const handleChange = selected => {
     if (selected === null) {
       setSelected({});
@@ -112,90 +108,52 @@ const Instructions = React__default.forwardRef(function Instructions({
     }
   };
   const sharedSelectProps = {
-    options: loadOptions ? undefined : availableOptions,
+    options: loadOptions ? undefined : options ?? availableOptions,
     loadOptions: loadOptions,
     loadingMessage: loadingMessageFunc,
     placeholder: placeholder
   };
   if (hidden) return null;
-  return React__default.createElement(Instructions$1, _extends({
+  return jsxs(Instructions$1, {
     ref: forwardedRef,
-    initialHover: initialHover,
     onMouseDown: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && React__default.createElement(TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, React__default.createElement(SelectContainer, null, React__default.createElement(CompactAutocompleteSelect, _extends({
-    type: selectType,
-    value: selectedOption,
-    creatable: false,
-    onChange: handleChange
-  }, sharedSelectProps)))), React__default.createElement(InstructionsArea, {
-    type: type
-  }, React__default.createElement(TextArea, {
-    noBorder: true,
-    instructionsTextArea: true,
-    type: type,
-    lightBackground: background,
-    readOnly: readOnly,
-    disabled: disabled,
-    name: name,
-    isExpanded: isExpanded,
-    edit: edit,
-    value: currentValue === null ? '' : currentValue,
-    onFocus: onFocus,
-    onChange: onChange,
-    onBlur: onBlur,
-    rows: rows,
-    icon: React__default.createElement(SvgWarningCircle, null),
-    loadingIcon: loadingIcon,
-    successIcon: successIcon,
-    padding: padding
-  })));
+    onMouseLeave: handleMouseLeave,
+    ...props,
+    children: [!readOnly && !disabled && jsx(TopBarContainer, {
+      $initialHover: initialHover,
+      className: isHovered && !readOnly && !disabled && 'slide-in',
+      children: jsx(SelectContainer, {
+        children: jsx(CompactAutocompleteSelect, {
+          type: selectType,
+          value: selectedOption,
+          creatable: false,
+          onChange: handleChange,
+          ...sharedSelectProps
+        })
+      })
+    }), jsx(InstructionsArea, {
+      children: jsx(TextArea, {
+        noBorder: true,
+        type: type,
+        $lightBackground: background,
+        readOnly: readOnly,
+        disabled: disabled,
+        name: name,
+        isExpanded: isExpanded,
+        edit: edit,
+        value: currentValue === null ? '' : currentValue,
+        onFocus: onFocus,
+        onChange: onChange,
+        onBlur: onBlur,
+        rows: rows,
+        icon: jsx(SvgWarningCircle, {}),
+        loadingIcon: loadingIcon,
+        successIcon: successIcon,
+        padding: padding
+      })
+    })]
+  });
 });
-Instructions.defaultProps = {
-  clickToAdd: false,
-  lightBackground: false,
-  autoSelect: true,
-  hidden: false,
-  edit: false,
-  disabled: false,
-  readOnly: false,
-  type: '',
-  selectType: '',
-  padding: 'medium',
-  onUpdateCallback: () => {}
-};
-Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  selectedOption: PropTypes.any,
-  loadOptions: PropTypes.func,
-  loadingMessageFunc: PropTypes.func,
-  clickToAdd: PropTypes.bool,
-  customAddMessage: PropTypes.string,
-  autoSelect: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  availableOptions: PropTypes.arrayOf(PropTypes.object),
-  lightBackground: PropTypes.bool,
-  edit: PropTypes.bool,
-  options: PropTypes.array,
-  subscribeCurrentValue: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onUpdateCallback: PropTypes.func,
-  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
-  selectType: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
-  isExpanded: PropTypes.func,
-  loadingIcon: PropTypes.element,
-  successIcon: PropTypes.element,
-  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])
-} : {};
 
 export { Instructions as default };
 //# sourceMappingURL=Instructions.js.map

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

@@ -1 +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    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          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   * `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","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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"}
+{"version":3,"file":"Instructions.js","sources":["../../../src/components/widgets/Instructions/Instructions.tsx"],"sourcesContent":["import { isFunction } from 'lodash';\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\nconst NOOP = () => {};\n\ntype InstructionsOwnProps = {\n  /**\n   * Name of the text area (used when sending form data)\n   */\n  name?: 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?: string;\n  /**\n   * How many rows/lines of text to be displayed by default\n   */\n  rows?: number | string;\n  /**\n   * Selected option\n   */\n  selectedOption?: 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?: (...args: any[]) => any;\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?: (...args: any[]) => any;\n  /**\n    /**\n      * Whether the components displays an initial custom message.\n      */\n  clickToAdd?: boolean;\n  /**\n   * Add initial custom message. i.e: `No instructions (click to add)`.\n   */\n  customAddMessage?: 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?: boolean;\n  /**\n   * Whether the instruction is read only\n   */\n  readOnly?: boolean;\n  /**\n   * Whether the intruction is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component is hidden or visible.\n   */\n  hidden?: boolean;\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?: any[];\n  /**\n   * `LightBackground color\n   */\n  lightBackground?: boolean;\n  /**\n   * Displays a light-yellow background to show that instruction value is editable\n   */\n  edit?: boolean;\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?: any[];\n  /**\n   * Callback for `onChange`\n   */\n  subscribeCurrentValue?: (...args: any[]) => any;\n  /**\n   * Callback for `onChange`\n   */\n  onChange?: (...args: any[]) => any;\n  /**\n   * Callback for `onFocus`\n   */\n  onFocus?: (...args: any[]) => any;\n  /**\n   * Callback for `onBlur`\n   */\n  onBlur?: (...args: any[]) => any;\n  /**\n   * Callback for `onUpdateCallback`: register to AutocompleteSelect label and value\n   */\n  onUpdateCallback?: (...args: any[]) => any;\n  /**\n   * Define the type based on error,error-border , warning, loading and success.\n   */\n  type?: '' | 'error' | 'error-border' | 'warning' | 'instructions-warning' | 'loading' | 'success';\n  /**\n   * Define the type AutoCompleteSelect based on error,error-border , warning, loading and success.\n   */\n  selectType?: '' | 'error' | 'warning' | 'instructions-warning' | 'loading' | 'success';\n  isExpanded?: (...args: any[]) => any;\n  /**\n   * Icon element – E.g: `icon={<Spinner />}`\n   */\n  loadingIcon?: React.ReactElement<any>;\n  /**\n   * Icon element – E.g: `icon={<Check />}`\n   */\n  successIcon?: React.ReactElement<any>;\n  /**\n   * Add padding (small-medium-large)\n   */\n  padding?: '' | 'small' | 'medium' | 'large';\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype InstructionsProps = Omit<\n  React.ComponentPropsWithoutRef<typeof S.Instructions>,\n  keyof InstructionsOwnProps\n> &\n  InstructionsOwnProps;\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<any, InstructionsProps>(function Instructions(\n  {\n    clickToAdd = false,\n    customAddMessage,\n    selectedOption,\n    loadOptions,\n    readOnly = false,\n    disabled = false,\n    hidden = false,\n    name,\n    lightBackground = false,\n    autoSelect = true,\n    subscribeCurrentValue: subscribeCurrentValueProp,\n    onChange: onChangeProp,\n    onFocus: onFocusProp,\n    onBlur: onBlurProp,\n    onUpdateCallback = NOOP,\n    availableOptions,\n    loadingMessageFunc,\n    placeholder,\n    type = '',\n    selectType = '',\n    edit = false,\n    rows,\n    isExpanded,\n    loadingIcon,\n    successIcon,\n    padding = 'medium',\n    // DOM LEAK: options was never destructured, so it leaked to the DOM as a stringified array.\n    options,\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  // Bare useState() infers undefined; explicit <string | undefined> allows all writes without argument.\n  const [currentValue, setCurrentValue] = useState<string | undefined>();\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, customMessage]);\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 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` wins over `availableOptions` when both are set — its documented contract.\n    options: loadOptions ? undefined : (options ?? 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      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      {/* DOM LEAK fixed: type is passed only to TextArea, not to InstructionsArea. */}\n      <S.InstructionsArea>\n        <TextArea\n          noBorder\n          type={type}\n          // lightBackground prop is inert (TextArea no longer consumes it); kept transient to prevent other regressions.\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          icon={<AlertIcon />}\n          loadingIcon={loadingIcon}\n          successIcon={successIcon}\n          padding={padding}\n        />\n      </S.InstructionsArea>\n    </S.Instructions>\n  );\n});\n\nexport default Instructions;\n"],"names":["NOOP","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","isExpanded","loadingIcon","successIcon","padding","options","props","forwardedRef","isHovered","setIsHovered","useState","selected","setSelected","addInstructions","setAddInstructions","customMessage","setCustomMessage","background","setBackground","initialHover","setInitialHover","currentValue","setCurrentValue","useEffect","isFunction","handleChange","value","useCallback","event","target","select","handleMouseOver","handleMouseLeave","sharedSelectProps","undefined","loadingMessage","_jsxs","S","ref","onMouseDown","onMouseLeave","children","_jsx","$initialHover","className","AutocompleteSelect","creatable","TextArea","noBorder","$lightBackground","icon","AlertIcon"],"mappings":"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"}

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

@@ -1,32 +1,33 @@
 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;
-`;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Instructions = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__Instructions",
+  componentId: "sc-lasand-0"
+})(["display:flex;position:relative;flex-direction:column;", ";"], props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+const TopBarContainer = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__TopBarContainer",
+  componentId: "sc-lasand-1"
+})(["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.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__SelectContainer",
+  componentId: "sc-lasand-2"
+})(["width:100%;margin:0 2px;"]);
+const InstructionsArea = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Instructionsstyled__InstructionsArea",
+  componentId: "sc-lasand-3"
+})(["margin:2px 2px -2px 2px;"]);
 
 export { Instructions, InstructionsArea, SelectContainer, TopBarContainer };
 //# sourceMappingURL=Instructions.styled.js.map

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

@@ -1 +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;;;;"}
+{"version":3,"file":"Instructions.styled.js","sources":["../../../src/components/widgets/Instructions/Instructions.styled.ts"],"sourcesContent":["// $-prefixed props are transient and never reach the DOM.\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * TopBarContainer — the only component in this file that reads a prop.\n */\ninterface InstructionsTopBarStyleProps {\n  /**\n   * `$initialHover` is inert: its conditional rule duplicates the unconditional one above it.\n   */\n  $initialHover?: boolean;\n}\n\n// Single-argument (styled-components 5 compat); DOM leaks fixed upstream in Instructions.tsx.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Instructions = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<InstructionsTopBarStyleProps>(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\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  width: 100%;\n  margin: 0 2px;\n`;\n\nexport const InstructionsArea = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  margin: 2px 2px -2px 2px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Instructions","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","themeProp","getColor","TopBarContainer","$initialHover","SelectContainer","InstructionsArea"],"mappings":";;;AAeA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,YAAY,GAAGC,MAAM,CAACC,GAAG,CACnCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,kCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uDAAA,EAAA,GAAA,CAAA,EAIvBC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAGtF,MAAMC,eAAe,GAAGX,MAAM,CAACC,GAAG,CACtCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA+BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mHAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EASrDC,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,EAEzFH,KAAK,IACLA,KAAK,CAACK,aAAa,IACnBL,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAEF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;AAGtF,MAAMG,eAAe,GAAGb,MAAM,CAACC,GAAG,CACtCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,qCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0BAAA,CAAA;AAKpB,MAAMQ,gBAAgB,GAAGd,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0BAAA,CAAA;;;;"}

package/build/widgets/ProgressBar/ProgressBar.js

@@ -1,7 +1,6 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState } from 'react';
-import PropTypes from 'prop-types';
+import { useState } from 'react';
 import { Container, Label, InnerContainer, Completed, ProgressBarTrack, MetricsContainer, ProgressBarFill, PercentageIndicator, ExternalPercentageIndicator, Link, ButtonLink, StyledArrowIcon } from './ProgressBar.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const ProgressBar = ({
   totalAssets,
@@ -32,41 +31,44 @@ const ProgressBar = ({
       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
-  })))));
+  return jsxs(Container, {
+    height: height,
+    ...props,
+    children: [jsx(Label, {
+      children: label
+    }), jsxs(InnerContainer, {
+      type: type,
+      children: [jsx(Completed, {
+        type: type,
+        children: formatNumberNew(completedAssets)
+      }), jsxs(ProgressBarTrack, {
+        children: [jsxs(MetricsContainer, {
+          $hasLink: Boolean(linkText),
+          children: [jsx(ProgressBarFill, {
+            type: type,
+            $percentage: percentage,
+            barColor: barColor,
+            children: !isLowPercentage && jsx(PercentageIndicator, {
+              children: percentageText || formattedPercentage
+            })
+          }), isLowPercentage && jsx(ExternalPercentageIndicator, {
+            children: percentageText || formattedPercentage
+          })]
+        }), linkText && jsxs(Link, {
+          onClick: handleLinkClick,
+          onMouseEnter: () => setIsLinkHovered(true),
+          onMouseLeave: () => setIsLinkHovered(false),
+          children: [jsx(ButtonLink, {
+            $isHovered: isLinkHovered,
+            children: linkText
+          }), jsx(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

@@ -1 +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","$percentage","onMouseEnter","onMouseLeave","$isHovered","propTypes","process","env","NODE_ENV","PropTypes","number","isRequired","string","func"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../src/components/widgets/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport * as S from './ProgressBar.styled';\n\ntype ProgressBarOwnProps = {\n  totalAssets: number;\n  completedAssets: number;\n  percentageText?: string;\n  barColor?: string;\n  height?: number;\n  label?: string;\n  type?: string;\n  linkText?: string;\n  onClick?: (...args: any[]) => any;\n};\n\n// Props spread onto styled component; use Omit+intersection to widen, not narrow, colliding props.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Container>, keyof ProgressBarOwnProps> &\n  ProgressBarOwnProps;\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}: Props) => {\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                // `$hasLink` removed; PercentageIndicator never reads it.\n                <S.PercentageIndicator>\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\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","_jsxs","S","children","_jsx","$hasLink","Boolean","$percentage","onMouseEnter","onMouseLeave","$isHovered"],"mappings":"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"}