@ntbjs/react-components 2.0.2-rc.11 → 2.0.2-rc.13

package/build/data/Badge/Badge.js

@@ -37,17 +37,17 @@ const Badge = React__default.forwardRef(function Badge({
     $backgroundColors: backgroundColors,
     $colors: colors,
     $elevated: elevated,
-    $fontSize: fontSize,
-    $fontWeight: fontWeight,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
     $lineHeight: lineHeight,
     $active: active,
     $error: error,
     $warning: warning,
-    $verticalPadding: verticalPadding,
+    $elevatedverticalPadding: verticalPadding,
     $horizontalPadding: horizontalPadding,
-    $height: height,
-    $minHeight: minHeight,
-    $width: width,
+    height: height,
+    minHeight: minHeight,
+    width: width,
     $minWidth: minWidth
   }, badgeIcon && React__default.createElement(BadgeIcon, {
     $useGutter: !!badgeContent

package/build/data/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/data/Badge/Badge.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Badge.styled';\n\n/**\n * Badges show a bubble containing a `number` or a `string`. It may be used by itself or with children passed as props\n * (to display a badge on top of an icon, for example, pass the icon as the child).\n *\n * If the badge content is passed as a `float`, it will be rounded up to the nearest `integer`,\n * and if the number is higher than 1 000 or 1 000 000 it will be abbreviated to for example \"1.4K\" or \"1.4M\" respectively.\n * If you need to display a `float` instead of a rounded `integer`, pass it as a `string` instead (e.g. \"1,4\").\n *\n * ### Import\n *\n * ``` js\n * import { Badge } from '@ntbjs/react-components/data'\n * // or\n * import Badge from '@ntbjs/react-components/data/Badge'\n * ```\n * ## Props\n * ```\n * Pass `badgeIcon={<svg></svg>}` to display an icon.\n * Pass a number or string to the badgeContent to display it alongside the icon.\n * Pass `align={\"left\"}`or `align={\"center\"}` to align content.\n * Pass `elevated={true}` to display the badge on top of the children\n * Pass `active={true}` to reflect the active status of the badge\n * Pass `error={true}` to reflect the error status of the badge\n * Pass `warning={true}` to reflect the warning status of the badge\n * Pass `fontSize={15}` to set the font size of the badge in pixel\n * Pass `fontWeight={500}` to set the font weight of the badge\n * Pass `lineHeight={12}` to set the line height of the badge in pixel\n * Pass `colors={[#ffffff, #000000]}` to set the font color of the badge\n * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the badge\n * Pass `verticalPadding={15}` to set the bottom and top padding of the badge in pixel\n * Pass `horizontalPadding={20}` to set the left and right padding of the badge in pixel\n * Pass `height={24}` to set the height of the badge in pixel\n * Pass `minHeight={24}` to set the minimum height of the badge in pixel\n * Pass `width={50}` to set the width of the badge in pixel\n * Pass `minWidth={32}` to set the minimum width of the badge in pixel\n *  ```\n */\nconst Badge = React.forwardRef(function Badge(\n  {\n    badgeContent,\n    badgeIcon,\n    children,\n    elevated,\n    fontSize,\n    fontWeight,\n    lineHeight,\n    active,\n    error,\n    warning,\n    backgroundColors,\n    colors,\n    verticalPadding,\n    horizontalPadding,\n    height,\n    minHeight,\n    width,\n    minWidth,\n    ...props\n  },\n  forwardedRef\n) {\n  if (typeof badgeContent === 'number') {\n    badgeContent = Intl.NumberFormat('en', { notation: 'compact' }).format(badgeContent);\n  }\n\n  return (\n    <S.Badge ref={forwardedRef} $elevated={elevated} $hasChildren={Boolean(children)} {...props}>\n      {children && <S.BadgeChildrenContainer>{children}</S.BadgeChildrenContainer>}\n      {(badgeIcon || badgeContent) && (\n        <S.BadgeLabel\n          $backgroundColors={backgroundColors}\n          $colors={colors}\n          $elevated={elevated}\n          $fontSize={fontSize}\n          $fontWeight={fontWeight}\n          $lineHeight={lineHeight}\n          $active={active}\n          $error={error}\n          $warning={warning}\n          $verticalPadding={verticalPadding}\n          $horizontalPadding={horizontalPadding}\n          $height={height}\n          $minHeight={minHeight}\n          $width={width}\n          $minWidth={minWidth}\n        >\n          {badgeIcon && <S.BadgeIcon $useGutter={!!badgeContent}>{badgeIcon}</S.BadgeIcon>}\n          {badgeContent}\n        </S.BadgeLabel>\n      )}\n    </S.Badge>\n  );\n});\n\nBadge.propTypes = {\n  /**\n   * An Icon to show in the badge alongside with a text\n   */\n  badgeIcon: PropTypes.node,\n\n  /**\n   * Content to be showed in the badge – e.g. number of results.\n   */\n  badgeContent: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.func,\n    PropTypes.element\n  ]),\n\n  /**\n   * The element(s) for which the badge will be displayed – e.g. an icon or a text.\n   */\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n\n  /**\n   * Whether the badge should be displayed in an elevated position on top of the child element(s) or not.\n   */\n  elevated: PropTypes.bool,\n\n  /**\n   * Whether the element is active or not (e.g. the currently selected menu item). This changes the color of the badge.\n   */\n  active: PropTypes.bool,\n\n  /**\n   * There is an error present – 'error be prioritized over warnings if both are set to `true`.\n   */\n  error: PropTypes.bool,\n\n  /**\n   * There is a warning present.\n   */\n  warning: PropTypes.bool,\n  /**\n   * Font size for the badge\n   */\n  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Font weight for the badge\n   */\n  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Line weight for the badge\n   */\n  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Colors of the font in the manner of [darkThemeColor, lightThemeColor]\n   */\n  colors: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * Background colors for the badge in the manner of [darkThemeColor, lightThemeColor]\n   */\n  backgroundColors: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * Top and bottom padding for the badge\n   */\n  verticalPadding: PropTypes.number,\n  /**\n   * Left and right padding for the badge\n   */\n  horizontalPadding: PropTypes.number,\n  /**\n   * Height of the badge\n   */\n  height: PropTypes.number,\n  /**\n   * Minimum height of the badge\n   */\n  minHeight: PropTypes.number,\n  /**\n   * Width of the badge\n   */\n  width: PropTypes.number,\n  /**\n   * Minimum width of the badge\n   */\n  minWidth: PropTypes.number\n};\n\nBadge.defaultProps = {\n  elevated: false,\n  active: false,\n  error: false,\n  warning: false,\n  badgeIcon: null,\n  fontWeight: 'normal',\n  lineHeight: 'normal'\n};\n\nexport default Badge;\n"],"names":["Badge","React","forwardRef","badgeContent","badgeIcon","children","elevated","fontSize","fontWeight","lineHeight","active","error","warning","backgroundColors","colors","verticalPadding","horizontalPadding","height","minHeight","width","minWidth","props","forwardedRef","Intl","NumberFormat","notation","format","createElement","S","_extends","ref","$elevated","$hasChildren","Boolean","$backgroundColors","$colors","$fontSize","$fontWeight","$lineHeight","$active","$error","$warning","$verticalPadding","$horizontalPadding","$height","$minHeight","$width","$minWidth","$useGutter","propTypes","process","env","NODE_ENV","PropTypes","node","oneOfType","string","number","func","element","bool","arrayOf","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/data/Badge/Badge.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport * as S from './Badge.styled';\n\n/**\n * Badges show a bubble containing a `number` or a `string`. It may be used by itself or with children passed as props\n * (to display a badge on top of an icon, for example, pass the icon as the child).\n *\n * If the badge content is passed as a `float`, it will be rounded up to the nearest `integer`,\n * and if the number is higher than 1 000 or 1 000 000 it will be abbreviated to for example \"1.4K\" or \"1.4M\" respectively.\n * If you need to display a `float` instead of a rounded `integer`, pass it as a `string` instead (e.g. \"1,4\").\n *\n * ### Import\n *\n * ``` js\n * import { Badge } from '@ntbjs/react-components/data'\n * // or\n * import Badge from '@ntbjs/react-components/data/Badge'\n * ```\n * ## Props\n * ```\n * Pass `badgeIcon={<svg></svg>}` to display an icon.\n * Pass a number or string to the badgeContent to display it alongside the icon.\n * Pass `align={\"left\"}`or `align={\"center\"}` to align content.\n * Pass `elevated={true}` to display the badge on top of the children\n * Pass `active={true}` to reflect the active status of the badge\n * Pass `error={true}` to reflect the error status of the badge\n * Pass `warning={true}` to reflect the warning status of the badge\n * Pass `fontSize={15}` to set the font size of the badge in pixel\n * Pass `fontWeight={500}` to set the font weight of the badge\n * Pass `lineHeight={12}` to set the line height of the badge in pixel\n * Pass `colors={[#ffffff, #000000]}` to set the font color of the badge\n * Pass `backgroundColors={[#ffffff, #000000]}` to set the background color of the badge\n * Pass `verticalPadding={15}` to set the bottom and top padding of the badge in pixel\n * Pass `horizontalPadding={20}` to set the left and right padding of the badge in pixel\n * Pass `height={24}` to set the height of the badge in pixel\n * Pass `minHeight={24}` to set the minimum height of the badge in pixel\n * Pass `width={50}` to set the width of the badge in pixel\n * Pass `minWidth={32}` to set the minimum width of the badge in pixel\n *  ```\n */\nconst Badge = React.forwardRef(function Badge(\n  {\n    badgeContent,\n    badgeIcon,\n    children,\n    elevated,\n    fontSize,\n    fontWeight,\n    lineHeight,\n    active,\n    error,\n    warning,\n    backgroundColors,\n    colors,\n    verticalPadding,\n    horizontalPadding,\n    height,\n    minHeight,\n    width,\n    minWidth,\n    ...props\n  },\n  forwardedRef\n) {\n  if (typeof badgeContent === 'number') {\n    badgeContent = Intl.NumberFormat('en', { notation: 'compact' }).format(badgeContent);\n  }\n\n  return (\n    <S.Badge ref={forwardedRef} $elevated={elevated} $hasChildren={Boolean(children)} {...props}>\n      {children && <S.BadgeChildrenContainer>{children}</S.BadgeChildrenContainer>}\n      {(badgeIcon || badgeContent) && (\n        <S.BadgeLabel\n          $backgroundColors={backgroundColors}\n          $colors={colors}\n          $elevated={elevated}\n          fontSize={fontSize}\n          fontWeight={fontWeight}\n          $lineHeight={lineHeight}\n          $active={active}\n          $error={error}\n          $warning={warning}\n          $elevatedverticalPadding={verticalPadding}\n          $horizontalPadding={horizontalPadding}\n          height={height}\n          minHeight={minHeight}\n          width={width}\n          $minWidth={minWidth}\n        >\n          {badgeIcon && <S.BadgeIcon $useGutter={!!badgeContent}>{badgeIcon}</S.BadgeIcon>}\n          {badgeContent}\n        </S.BadgeLabel>\n      )}\n    </S.Badge>\n  );\n});\n\nBadge.propTypes = {\n  /**\n   * An Icon to show in the badge alongside with a text\n   */\n  badgeIcon: PropTypes.node,\n\n  /**\n   * Content to be showed in the badge – e.g. number of results.\n   */\n  badgeContent: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n    PropTypes.func,\n    PropTypes.element\n  ]),\n\n  /**\n   * The element(s) for which the badge will be displayed – e.g. an icon or a text.\n   */\n  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n\n  /**\n   * Whether the badge should be displayed in an elevated position on top of the child element(s) or not.\n   */\n  elevated: PropTypes.bool,\n\n  /**\n   * Whether the element is active or not (e.g. the currently selected menu item). This changes the color of the badge.\n   */\n  active: PropTypes.bool,\n\n  /**\n   * There is an error present – 'error be prioritized over warnings if both are set to `true`.\n   */\n  error: PropTypes.bool,\n\n  /**\n   * There is a warning present.\n   */\n  warning: PropTypes.bool,\n  /**\n   * Font size for the badge\n   */\n  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Font weight for the badge\n   */\n  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Line weight for the badge\n   */\n  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n  /**\n   * Colors of the font in the manner of [darkThemeColor, lightThemeColor]\n   */\n  colors: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * Background colors for the badge in the manner of [darkThemeColor, lightThemeColor]\n   */\n  backgroundColors: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * Top and bottom padding for the badge\n   */\n  verticalPadding: PropTypes.number,\n  /**\n   * Left and right padding for the badge\n   */\n  horizontalPadding: PropTypes.number,\n  /**\n   * Height of the badge\n   */\n  height: PropTypes.number,\n  /**\n   * Minimum height of the badge\n   */\n  minHeight: PropTypes.number,\n  /**\n   * Width of the badge\n   */\n  width: PropTypes.number,\n  /**\n   * Minimum width of the badge\n   */\n  minWidth: PropTypes.number\n};\n\nBadge.defaultProps = {\n  elevated: false,\n  active: false,\n  error: false,\n  warning: false,\n  badgeIcon: null,\n  fontWeight: 'normal',\n  lineHeight: 'normal'\n};\n\nexport default Badge;\n"],"names":["Badge","React","forwardRef","badgeContent","badgeIcon","children","elevated","fontSize","fontWeight","lineHeight","active","error","warning","backgroundColors","colors","verticalPadding","horizontalPadding","height","minHeight","width","minWidth","props","forwardedRef","Intl","NumberFormat","notation","format","createElement","S","_extends","ref","$elevated","$hasChildren","Boolean","$backgroundColors","$colors","$lineHeight","$active","$error","$warning","$elevatedverticalPadding","$horizontalPadding","$minWidth","$useGutter","propTypes","process","env","NODE_ENV","PropTypes","node","oneOfType","string","number","func","element","bool","arrayOf","defaultProps"],"mappings":"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"}

package/build/data/Badge/Badge.styled.js

@@ -33,35 +33,36 @@ const BadgeLabel = styled.span.withConfig({
   box-sizing: border-box;
 
   font-size: ${props => {
-  if (props.$fontSize) {
-    return `${props.$fontSize}px`;
+  if (props.fontSize) {
+    return `${props.fontSize}px`;
   } else {
-    return props.$elevated ? '0.625rem' : '0.750rem';
+    return props.elevated ? '0.625rem' : '0.750rem';
   }
 }};
-  font-weight: ${props => props.$fontWeight ? props.$fontWeight : 'normal'};
+  font-weight: ${props => props.fontWeight ? props.fontWeight : 'normal'};
   line-height: ${props => props.$lineHeight ? `${props.$lineHeight}px` : 'normal'};
-  height: ${props => props.$height ? `${props.$height}px` : 'fit-content'};
+  height: ${props => props.height ? `${props.height}px` : 'fit-content'};
   letter-spacing: 0.32px;
   margin-left: ${props => props.$elevated ? '15px' : 'auto'};
   position: ${props => props.$elevated ? 'absolute' : 'initial'};
   right: 0;
   transform: ${props => props.$elevated ? 'translate(33%, -8px)' : 'initial'};
 
-  ${props => props.$width ? css`
-          width: ${props.$width}px;
+  ${props => props.width ? css`
+          width: ${props.width}px;
         ` : null}
 
   ${props => props.$minWidth ? css`
           min-width: ${props.$minWidth}px;
         ` : null}
 
-  ${props => props.$minHeight ? css`
-          min-height: ${props.$minHeight}px;
+  ${props => props.minHeight ? css`
+          min-height: ${props.minHeight}px;
         ` : null}
+      
 
   ${props => {
-  const verticalPadding = props.$verticalPadding ? `${props.$verticalPadding}px` : props.$elevated ? '4px' : '6px';
+  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.$elevated ? '4px' : '6px';
   const horizontalPadding = props.$horizontalPadding ? `${props.$horizontalPadding}px` : props.$elevated ? '7px' : '10px';
   return css`
       padding: ${verticalPadding} ${horizontalPadding};

package/build/data/Badge/Badge.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.styled.js","sources":["../../../src/components/data/Badge/Badge.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Badge = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-content: center;\n  display: ${props => (props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex')};\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  min-height: 24px;\n  position: relative;\n  width: ${props => (props.$elevated ? 'fit-content' : 'initial')};\n`;\n\nexport const BadgeChildrenContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-self: center;\n  height: fit-content;\n  margin-right: 8px;\n`;\n\nexport const BadgeLabel = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  border-radius: ${props => (props.$elevated ? '12px' : '14px')};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  font-size: ${props => {\n    if (props.$fontSize) {\n      return `${props.$fontSize}px`;\n    } else {\n      return props.$elevated ? '0.625rem' : '0.750rem';\n    }\n  }};\n  font-weight: ${props => (props.$fontWeight ? props.$fontWeight : 'normal')};\n  line-height: ${props => (props.$lineHeight ? `${props.$lineHeight}px` : 'normal')};\n  height: ${props => (props.$height ? `${props.$height}px` : 'fit-content')};\n  letter-spacing: 0.32px;\n  margin-left: ${props => (props.$elevated ? '15px' : 'auto')};\n  position: ${props => (props.$elevated ? 'absolute' : 'initial')};\n  right: 0;\n  transform: ${props => (props.$elevated ? 'translate(33%, -8px)' : 'initial')};\n\n  ${props =>\n    props.$width\n      ? css`\n          width: ${props.$width}px;\n        `\n      : null}\n\n  ${props =>\n    props.$minWidth\n      ? css`\n          min-width: ${props.$minWidth}px;\n        `\n      : null}\n\n  ${props =>\n    props.$minHeight\n      ? css`\n          min-height: ${props.$minHeight}px;\n        `\n      : null}\n\n  ${props => {\n    const verticalPadding = props.$verticalPadding\n      ? `${props.$verticalPadding}px`\n      : props.$elevated\n        ? '4px'\n        : '6px';\n    const horizontalPadding = props.$horizontalPadding\n      ? `${props.$horizontalPadding}px`\n      : props.$elevated\n        ? '7px'\n        : '10px';\n    return css`\n      padding: ${verticalPadding} ${horizontalPadding};\n    `;\n  }}\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      () => {\n        const active = props.$active;\n        const error = props.$error;\n        const warning = props.$warning;\n\n        const defaultBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');\n\n        switch (true) {\n          case !error && !warning && !active:\n            return defaultBgColor;\n\n          case !error && !warning && active:\n            return props.theme.getColor('gray-700');\n\n          case error && active:\n            return props.theme.getColor('red-500');\n\n          case error:\n            return props.theme.getColor('red-200');\n\n          case warning && active:\n            return props.theme.getColor('signal-yellow-500');\n\n          case warning:\n            return props.theme.getColor('signal-yellow-400');\n\n          default:\n            return props.theme.getColor('gray-600');\n        }\n      },\n      () => {\n        const active = props.$active;\n        const error = props.$error;\n        const warning = props.$warning;\n\n        const defaultBgColor = props?.$backgroundColors?.[1] ?? props.theme.getColor('gray-200');\n\n        switch (true) {\n          case !error && !warning && !active:\n            return defaultBgColor;\n\n          case !error && !warning && active:\n            return props.theme.getColor('white');\n\n          case error && active:\n            return props.theme.getColor('red-500');\n\n          case error:\n            return props.theme.getColor('red-200');\n\n          case warning && active:\n            return props.theme.getColor('signal-yellow-500');\n\n          case warning:\n            return props.theme.getColor('signal-yellow-400');\n\n          default:\n            return props.theme.getColor('gray-200');\n        }\n      }\n    )}\n\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        () => {\n          const defaultColor = props?.$colors?.[0] ?? props.theme.getColor('white');\n          if ((props.$warning && !props.$error) || (props.error && !props.$active)) {\n            return props.theme.getColor('gray-900');\n          } else {\n            return defaultColor;\n          }\n        },\n        () => {\n          const defaultColor = props?.$colors?.[1] ?? props.theme.getColor('gray-900');\n          if (props.$error && props.$active) {\n            return props.theme.getColor('white');\n          } else {\n            return defaultColor;\n          }\n        }\n      )}\n`;\n\nexport const BadgeIcon = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  margin-right: ${props => (props.$useGutter ? '4px' : 0)};\n  svg {\n    height: 12px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Badge","styled","span","withConfig","attrs","applyDefaultTheme","props","$elevated","$hasChildren","theme","primaryFontFamily","BadgeChildrenContainer","BadgeLabel","$fontSize","$fontWeight","$lineHeight","$height","$width","css","$minWidth","$minHeight","verticalPadding","$verticalPadding","horizontalPadding","$horizontalPadding","themeProp","active","$active","error","$error","warning","$warning","defaultBgColor","backgroundColors","getColor","$backgroundColors","defaultColor","$colors","BadgeIcon","$useGutter"],"mappings":"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"}
+{"version":3,"file":"Badge.styled.js","sources":["../../../src/components/data/Badge/Badge.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Badge = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-content: center;\n  display: ${props => (props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex')};\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 1rem;\n  font-weight: 500;\n  min-height: 24px;\n  position: relative;\n  width: ${props => (props.$elevated ? 'fit-content' : 'initial')};\n`;\n\nexport const BadgeChildrenContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-self: center;\n  height: fit-content;\n  margin-right: 8px;\n`;\n\nexport const BadgeLabel = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  border-radius: ${props => (props.$elevated ? '12px' : '14px')};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  font-size: ${props => {\n    if (props.fontSize) {\n      return `${props.fontSize}px`;\n    } else {\n      return props.elevated ? '0.625rem' : '0.750rem';\n    }\n  }};\n  font-weight: ${props => (props.fontWeight ? props.fontWeight : 'normal')};\n  line-height: ${props => (props.$lineHeight ? `${props.$lineHeight}px` : 'normal')};\n  height: ${props => (props.height ? `${props.height}px` : 'fit-content')};\n  letter-spacing: 0.32px;\n  margin-left: ${props => (props.$elevated ? '15px' : 'auto')};\n  position: ${props => (props.$elevated ? 'absolute' : 'initial')};\n  right: 0;\n  transform: ${props => (props.$elevated ? 'translate(33%, -8px)' : 'initial')};\n\n  ${props =>\n    props.width\n      ? css`\n          width: ${props.width}px;\n        `\n      : null}\n\n  ${props =>\n    props.$minWidth\n      ? css`\n          min-width: ${props.$minWidth}px;\n        `\n      : null}\n\n  ${props =>\n    props.minHeight\n      ? css`\n          min-height: ${props.minHeight}px;\n        `\n      : null}\n      \n\n  ${props => {\n    const verticalPadding = props.verticalPadding\n      ? `${props.verticalPadding}px`\n      : props.$elevated\n        ? '4px'\n        : '6px';\n    const horizontalPadding = props.$horizontalPadding\n      ? `${props.$horizontalPadding}px`\n      : props.$elevated\n        ? '7px'\n        : '10px';\n    return css`\n      padding: ${verticalPadding} ${horizontalPadding};\n    `;\n  }}\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      () => {\n        const active = props.$active;\n        const error = props.$error;\n        const warning = props.$warning;\n\n        const defaultBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');\n\n        switch (true) {\n          case !error && !warning && !active:\n            return defaultBgColor;\n\n          case !error && !warning && active:\n            return props.theme.getColor('gray-700');\n\n          case error && active:\n            return props.theme.getColor('red-500');\n\n          case error:\n            return props.theme.getColor('red-200');\n\n          case warning && active:\n            return props.theme.getColor('signal-yellow-500');\n\n          case warning:\n            return props.theme.getColor('signal-yellow-400');\n\n          default:\n            return props.theme.getColor('gray-600');\n        }\n      },\n      () => {\n        const active = props.$active;\n        const error = props.$error;\n        const warning = props.$warning;\n\n        const defaultBgColor = props?.$backgroundColors?.[1] ?? props.theme.getColor('gray-200');\n\n        switch (true) {\n          case !error && !warning && !active:\n            return defaultBgColor;\n\n          case !error && !warning && active:\n            return props.theme.getColor('white');\n\n          case error && active:\n            return props.theme.getColor('red-500');\n\n          case error:\n            return props.theme.getColor('red-200');\n\n          case warning && active:\n            return props.theme.getColor('signal-yellow-500');\n\n          case warning:\n            return props.theme.getColor('signal-yellow-400');\n\n          default:\n            return props.theme.getColor('gray-200');\n        }\n      }\n    )}\n\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        () => {\n          const defaultColor = props?.$colors?.[0] ?? props.theme.getColor('white');\n          if ((props.$warning && !props.$error) || (props.error && !props.$active)) {\n            return props.theme.getColor('gray-900');\n          } else {\n            return defaultColor;\n          }\n        },\n        () => {\n          const defaultColor = props?.$colors?.[1] ?? props.theme.getColor('gray-900');\n          if (props.$error && props.$active) {\n            return props.theme.getColor('white');\n          } else {\n            return defaultColor;\n          }\n        }\n      )}\n`;\n\nexport const BadgeIcon = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  margin-right: ${props => (props.$useGutter ? '4px' : 0)};\n  svg {\n    height: 12px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Badge","styled","span","withConfig","attrs","applyDefaultTheme","props","$elevated","$hasChildren","theme","primaryFontFamily","BadgeChildrenContainer","BadgeLabel","fontSize","elevated","fontWeight","$lineHeight","height","width","css","$minWidth","minHeight","verticalPadding","horizontalPadding","$horizontalPadding","themeProp","active","$active","error","$error","warning","$warning","defaultBgColor","backgroundColors","getColor","$backgroundColors","defaultColor","$colors","BadgeIcon","$useGutter"],"mappings":"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"}

package/build/inputs/MultiSelect/MultiSelect.js

@@ -1,240 +1,236 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useEffect, useMemo } from 'react';
+import React__default, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
 import { components } from 'react-select';
-import { MultiSelectWrapper, Label, InnerWrapper, AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, MultiValue, InputWrapper, DropdownMenu, SelectedOption, DropdownOptionDeleteIcon, Option } from './MultiSelect.styled.js';
-import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
+import { colors } from '../../styles/utils/colors-export.js';
+import { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, MultiSelect as MultiSelect$1, MultiSelectWrapper, Label, InnerWrapper, ShowMoreWrapper, ShowMoreOverlay, ShowMoreText, ErrorMessage, DropdownOptionDeleteIcon, MultiValueWrapper } from './MultiSelect.styled.js';
 
-const reactSelectTheme = theme => ({
-  ...theme,
-  spacing: {
-    baseUnit: 4,
-    controlHeight: 38,
-    menuGutter: 8
-  }
-});
-const MultiSelect = React__default.forwardRef(function MultiSelect({
-  label,
-  selectedOptions = [],
-  availableOptions,
-  loadOptions,
-  loadingMessageFunc,
-  onUpdateCallback,
-  editText,
-  creatable,
-  readOnly,
-  hidden,
-  disabled,
-  error,
-  warning,
-  onMultiValueClick,
-  showMore,
-  showMoreText = 'Show more',
-  displayTotalOnShowMore = true,
-  noOptionsMessageFunc,
-  ...props
-}, forwardedRef) {
+const showMoreHeight = 114;
+const MultiSelect = React__default.forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    selectedOptions = [],
+    availableOptions,
+    loadOptions,
+    onUpdateCallback,
+    editText,
+    creatable,
+    readOnly,
+    disabled,
+    error,
+    warning,
+    onMultiValueClick,
+    showMore,
+    showMoreText = 'Show more',
+    displayTotalOnShowMore = true,
+    hidden,
+    ...rest
+  } = props;
   const [uniqueId] = useState(nanoid());
   const [selected, setSelected] = useState(selectedOptions);
-  const [focused, setFocused] = useState(false);
-  const [displayShowMore, setDisplayShowMore] = useState(error || warning ? false : showMore);
   const [cacheUnique, setCacheUnique] = useState(0);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const wrapperRef = useRef(null);
-  const selectRef = useRef(null);
-  useEffect(() => {
-    setSelected(selectedOptions);
-  }, [selectedOptions]);
+  const [displayShowMore, setDisplayShowMore] = useState(showMore && !error && !warning);
+  const [focused, setFocused] = useState(false);
+  const [isDarkMode, setIsDarkMode] = useState(() => document.body.classList.contains('dark-theme'));
+  useEffect(() => setSelected(selectedOptions), [selectedOptions]);
   useEffect(() => {
-    function handleClickOutside(event) {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setIsMenuOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.body.classList.contains('dark-theme'));
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    return () => observer.disconnect();
   }, []);
-  const handleWrapperClick = event => {
-    if (readOnly || disabled) return;
-    const isRemoveButton = event.target.closest('.multi-select__multi-value__remove') || event.target.closest('[role="button"]') || event.target instanceof SVGElement || event.target.closest('svg');
-    if (!isRemoveButton && !isMenuOpen) {
-      if (selectRef.current) {
-        selectRef.current.focus();
-      }
-      setIsMenuOpen(true);
-    }
-  };
-  const getNoOptionsMessage = inputValue => {
-    if (typeof noOptionsMessageFunc === 'function') {
-      return noOptionsMessageFunc(inputValue);
-    }
-    return inputValue ? `No matches for "${inputValue}"` : 'No available options';
-  };
-  const innerComponents = {
-    DropdownIndicator: null,
-    MultiValue: ({
-      data,
-      ...props
-    }) => {
-      return React__default.createElement("div", {
-        className: "multi-value-wrapper",
-        onMouseDown: e => {
-          if (onMultiValueClick && data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
-            e.stopPropagation();
-            onMultiValueClick(data);
-          }
+  const selectStyles = useMemo(() => {
+    const getThemeColor = (darkKey, lightKey) => {
+      const prefersDark = !document.body.classList.contains('light-theme') && !document.body.classList.contains('dark-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const key = isDarkMode || prefersDark ? darkKey : lightKey;
+      return colors[key] || colors['gray-500'];
+    };
+    const errorColor = colors['red-500'];
+    const warningColor = colors['orange-500'];
+    const menuBg = getThemeColor('gray-600', 'white');
+    const textColor = getThemeColor('gray-100', 'gray-900');
+    const placeholderColor = getThemeColor('gray-400', 'gray-500');
+    const multiValueBg = getThemeColor('gray-600', 'gray-800');
+    return {
+      control: base => ({
+        ...base,
+        alignItems: 'center',
+        background: 'transparent',
+        border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none',
+        borderRadius: '3px',
+        boxShadow: 'none',
+        minHeight: '38px',
+        opacity: disabled ? 0.5 : 1,
+        pointerEvents: 'auto',
+        '&:hover': {
+          border: error ? `1px solid ${errorColor}` : warning ? `1px solid ${warningColor}` : 'none'
         }
-      }, React__default.createElement(MultiValue, _extends({
-        data: data,
-        $isDisabled: disabled,
-        $isReadOnly: readOnly
-      }, props)));
-    },
-    MultiValueRemove: props => {
-      if (readOnly || disabled) return null;
-      return React__default.createElement(components.MultiValueRemove, props, React__default.createElement(SvgClose, null));
-    },
-    Input: inputProps => React__default.createElement(InputWrapper, {
-      $focused: focused,
-      $editText: !readOnly && !disabled ? editText : '',
-      $isDisabled: readOnly || disabled,
-      $isMenuOpen: isMenuOpen
-    }, React__default.createElement(components.Input, inputProps)),
-    Menu: menuProps => React__default.createElement(DropdownMenu, menuProps),
-    Option: optProps => optProps.isSelected ? React__default.createElement(SelectedOption, optProps, React__default.createElement("span", null, optProps.label), React__default.createElement(DropdownOptionDeleteIcon, null)) : React__default.createElement(Option, optProps)
-  };
-  const selectStyles = useMemo(() => ({
-    control: base => ({
-      ...base,
-      alignItems: 'flex-start',
-      background: 'transparent',
-      border: 'none',
-      boxShadow: 'none',
-      minHeight: 'unset',
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    valueContainer: base => ({
-      ...base,
-      padding: 0,
-      gap: '8px',
-      maxHeight: displayShowMore && !(error || warning) ? '130px' : '100%',
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    input: base => ({
-      ...base,
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    menu: base => ({
-      ...base,
-      backgroundColor: 'transparent',
-      boxShadow: 'none'
-    }),
-    menuList: base => ({
-      ...base,
-      backgroundColor: 'transparent'
-    }),
-    option: base => ({
-      ...base,
-      backgroundColor: 'transparent',
-      color: 'inherit'
-    }),
-    multiValue: base => ({
-      ...base,
-      margin: 0,
-      border: 'none',
-      background: 'none',
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    multiValueLabel: base => ({
-      ...base,
-      padding: 0,
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    }),
-    multiValueRemove: base => ({
-      ...base,
-      padding: 0,
-      cursor: readOnly || disabled ? 'default' : 'pointer'
-    })
-  }), [error, warning, displayShowMore, readOnly, disabled]);
-  const sharedProps = {
-    ...props,
-    ref: node => {
-      selectRef.current = node;
-      if (forwardedRef) {
-        if (typeof forwardedRef === 'function') {
-          forwardedRef(node);
-        } else {
-          forwardedRef.current = node;
+      }),
+      valueContainer: base => ({
+        ...base,
+        alignItems: 'center',
+        gap: '8px',
+        padding: '0 8px',
+        maxHeight: displayShowMore ? error || warning ? '100%' : `${showMoreHeight + 16}px` : '100%',
+        overflow: 'hidden'
+      }),
+      multiValue: base => ({
+        ...base,
+        backgroundColor: multiValueBg,
+        borderRadius: '3px',
+        margin: '0',
+        display: 'flex',
+        alignItems: 'stretch',
+        minHeight: '26px',
+        overflow: 'hidden',
+        opacity: disabled ? 0.7 : 1
+      }),
+      multiValueLabel: base => ({
+        ...base,
+        color: colors['white'],
+        fontSize: '12px',
+        padding: disabled || readOnly ? '0 8px' : '0 3px 0 8px',
+        display: 'flex',
+        alignItems: 'center',
+        cursor: disabled ? 'not-allowed' : readOnly ? 'default' : 'pointer'
+      }),
+      multiValueRemove: base => ({
+        ...base,
+        color: 'white',
+        padding: '0 8px 0 5px',
+        display: disabled || readOnly ? 'none' : 'flex',
+        alignItems: 'center',
+        alignSelf: 'stretch',
+        borderRadius: '0',
+        cursor: 'pointer',
+        '&:hover': {
+          backgroundColor: errorColor,
+          color: 'white'
         }
+      }),
+      menu: base => ({
+        ...base,
+        backgroundColor: menuBg,
+        boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
+        zIndex: 999,
+        marginTop: '4px',
+        border: `1px solid ${getThemeColor('gray-500', 'gray-300')}`
+      }),
+      menuList: base => ({
+        ...base,
+        backgroundColor: 'transparent',
+        padding: 0
+      }),
+      option: (base, state) => ({
+        ...base,
+        backgroundColor: state.isFocused ? getThemeColor('gray-500', 'gray-100') : 'transparent',
+        color: textColor,
+        cursor: 'pointer',
+        fontSize: '14px',
+        padding: '8px 12px',
+        ':active': {
+          backgroundColor: getThemeColor('gray-400', 'gray-200')
+        }
+      }),
+      input: (base, state) => ({
+        ...base,
+        display: 'inline-grid',
+        whiteSpace: 'nowrap',
+        color: textColor,
+        margin: 0,
+        padding: 0,
+        ':before': !focused && editText && !state.value ? {
+          content: `"${editText}"`,
+          color: placeholderColor,
+          marginRight: '8px',
+          lineHeight: '26px',
+          gridArea: '1 / 1'
+        } : {}
+      }),
+      noOptionsMessage: base => ({
+        ...base,
+        color: textColor,
+        backgroundColor: 'transparent'
+      }),
+      loadingMessage: base => ({
+        ...base,
+        color: textColor,
+        backgroundColor: 'transparent'
+      }),
+      placeholder: () => ({
+        display: 'none'
+      }),
+      indicatorsContainer: () => ({
+        display: 'none'
+      })
+    };
+  }, [error, warning, displayShowMore, disabled, readOnly, editText, focused, isDarkMode, onMultiValueClick]);
+  const innerComponents = {
+    Option: optProps => React__default.createElement(components.Option, optProps, React__default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        alignItems: 'center'
       }
-    },
+    }, React__default.createElement("span", null, optProps.label), optProps.isSelected && React__default.createElement(DropdownOptionDeleteIcon, null))),
+    MultiValue: mvProps => React__default.createElement(MultiValueWrapper, {
+      onMouseDown: e => {
+        if (onMultiValueClick && !readOnly && !disabled && !e.target.closest('.multi-select__multi-value__remove')) {
+          e.stopPropagation();
+          onMultiValueClick(mvProps.data);
+        }
+      }
+    }, React__default.createElement(components.MultiValue, mvProps))
+  };
+  const sharedSelectProps = {
+    ...rest,
+    ref: forwardedRef,
+    id: uniqueId,
     classNamePrefix: 'multi-select',
+    styles: selectStyles,
+    components: innerComponents,
     value: selected,
     options: loadOptions ? undefined : availableOptions,
     loadOptions,
-    loadingMessage: loadingMessageFunc,
-    theme: reactSelectTheme,
-    styles: selectStyles,
-    components: innerComponents,
     isMulti: true,
-    isClearable: false,
-    placeholder: null,
-    isDisabled: disabled,
-    readOnly: readOnly,
+    isDisabled: disabled || readOnly,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     openMenuOnClick: true,
-    openMenuOnFocus: true,
-    blurInputOnSelect: false,
-    menuIsOpen: isMenuOpen ? true : undefined,
-    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
-    onMenuOpen: () => {
-      setIsMenuOpen(true);
-    },
-    onMenuClose: () => {
-      setIsMenuOpen(false);
-    },
     onFocus: () => setFocused(true),
     onBlur: () => setFocused(false),
-    noOptionsMessage: ({
-      inputValue
-    }) => getNoOptionsMessage(inputValue),
-    onChange: (selectedOptions, actionMeta) => {
-      if (props.onChange) {
-        props.onChange(selectedOptions, actionMeta);
-      }
+    onChange: (newValue, actionMeta) => {
+      setSelected(newValue);
       if (onUpdateCallback) {
-        const updatedItem = actionMeta.option || actionMeta.removedValue;
-        onUpdateCallback(actionMeta.action, updatedItem);
+        const item = actionMeta.option || actionMeta.removedValue;
+        onUpdateCallback(actionMeta.action, item);
       }
-      setSelected(selectedOptions);
       if (actionMeta.action === 'create-option' && loadOptions) {
-        setCacheUnique(cacheUnique + 1);
+        setCacheUnique(c => c + 1);
       }
-    }
+    },
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined
   };
+  const SelectComponent = useMemo(() => {
+    if (loadOptions) return creatable ? AsyncCreatableMultiSelect : AsyncMultiSelect;
+    return creatable ? CreatableMultiSelect : MultiSelect$1;
+  }, [loadOptions, creatable]);
   if (hidden) return null;
-  return React__default.createElement(MultiSelectWrapper, {
-    ref: wrapperRef,
-    onClick: handleWrapperClick
-  }, label && React__default.createElement(Label, {
+  return React__default.createElement(MultiSelectWrapper, null, label && React__default.createElement(Label, {
     htmlFor: uniqueId
-  }, label), React__default.createElement(InnerWrapper, {
-    $error: error,
-    $warning: warning
-  }, loadOptions ? creatable ? React__default.createElement(AsyncCreatableMultiSelect, sharedProps) : React__default.createElement(AsyncMultiSelect, sharedProps) : creatable ? React__default.createElement(CreatableMultiSelect, sharedProps) : React__default.createElement(MultiSelect$1, sharedProps)), displayShowMore && !(error || warning) && React__default.createElement(ShowMoreWrapper, {
-    onClick: e => {
-      e.stopPropagation();
-      setDisplayShowMore(false);
-    }
-  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (typeof error === 'string' || typeof warning === 'string') && React__default.createElement(ErrorMessage, {
-    $error: error,
-    $warning: warning
-  }, error ? error : warning));
+  }, label), React__default.createElement(InnerWrapper, null, React__default.createElement(SelectComponent, sharedSelectProps)), displayShowMore && React__default.createElement(ShowMoreWrapper, {
+    onClick: () => setDisplayShowMore(false)
+  }, React__default.createElement(ShowMoreOverlay, null), React__default.createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && `(${selected.length})`)), (error || warning) && React__default.createElement(ErrorMessage, {
+    $error: !!error,
+    $warning: !!warning
+  }, error || warning));
 });
+MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   label: PropTypes.string,
   availableOptions: PropTypes.arrayOf(PropTypes.object),
@@ -254,8 +250,7 @@ MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
   hidden: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  onChange: PropTypes.func
+  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
 } : {};
 MultiSelect.defaultProps = {
   noOptionsMessageFunc: inputValue => {