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

package/README.md

@@ -98,6 +98,40 @@ You can build the library with:
 npm run build  
 ```  
 
+### 🛡️ Visual regression gate
+
+Every Storybook story is screenshotted in both the light and the dark theme and
+compared pixel for pixel against a set of baseline images. Use it whenever you
+change anything under `src/`, because a styling change that looks harmless in one
+story often moves another.
+
+The gate needs a browser binary once per checkout:
+
+```  
+npx playwright install chromium chromium-headless-shell  
+```  
+
+Record the baselines on a clean checkout, before you make any changes:
+
+```  
+npm run verify:visual:baseline  
+```  
+
+Then, after your changes, compare against them:
+
+```  
+npm run verify:visual:compare  
+```  
+
+A report opens on failure showing the before, after and diff of every story that
+moved. Read it and decide whether the change was intended before you re-record.
+
+The baselines are **not** committed. There are close to 600 of them, they change
+on any deliberate styling change, and a binary diff tells a reviewer nothing, so
+they stay local and each machine records its own. They are also
+platform-specific: font rasterisation differs between macOS and Linux, so a
+baseline recorded on one cannot be compared against a run on the other.
+
 ### 🧪 Installing the package locally (for testing only)
 
 Let's say you have another project (`test-app`) on your machine that you want to try installing the component library

package/build/data/Alert/Alert.js

@@ -1,19 +1,18 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { Alert as Alert$1, AlertRender } from './Alert.styled.js';
 import { isEmpty } from 'lodash';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const Alert = React__default.forwardRef(function Alert({
   type,
-  alertMessage,
-  align,
+  alertMessage = 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',
+  align = 'left',
   icon,
   fontSize,
   lineHeight,
-  lineClamp,
-  verticalPadding,
-  horizontalPadding,
+  lineClamp = 0,
+  verticalPadding = 17,
+  horizontalPadding = 30,
   width,
   ...props
 }, forwardedRef) {
@@ -33,7 +32,7 @@ const Alert = React__default.forwardRef(function Alert({
       isInfo = false;
     }
   }
-  return React__default.createElement(Alert$1, _extends({
+  return jsx(Alert$1, {
     ref: forwardedRef,
     $alertMessage: alertMessage,
     $warning: isWarning,
@@ -42,32 +41,18 @@ const Alert = React__default.forwardRef(function Alert({
     $align: align,
     $verticalPadding: verticalPadding,
     $horizontalPadding: horizontalPadding,
-    width: width
-  }, props), React__default.createElement(AlertRender, {
-    fontSize: fontSize,
-    $lineHeight: lineHeight,
-    $lineClamp: lineClamp
-  }, icon, " ", React__default.createElement("span", null, alertMessage)));
+    width: width,
+    ...props,
+    children: jsxs(AlertRender, {
+      fontSize: fontSize,
+      $lineHeight: lineHeight,
+      $lineClamp: lineClamp,
+      children: [icon, " ", jsx("span", {
+        children: alertMessage
+      })]
+    })
+  });
 });
-Alert.propTypes = process.env.NODE_ENV !== "production" ? {
-  type: PropTypes.oneOf(['warning', 'error', 'info']),
-  icon: PropTypes.element,
-  align: PropTypes.oneOf(['left', 'center']),
-  alertMessage: PropTypes.string,
-  fontSize: PropTypes.number,
-  lineHeight: PropTypes.number,
-  lineClamp: PropTypes.number,
-  verticalPadding: PropTypes.number,
-  horizontalPadding: PropTypes.number,
-  width: PropTypes.number
-} : {};
-Alert.defaultProps = {
-  align: 'left',
-  alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',
-  lineClamp: 0,
-  horizontalPadding: 30,
-  verticalPadding: 17
-};
 
 export { Alert as default };
 //# sourceMappingURL=Alert.js.map

package/build/data/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/data/Alert/Alert.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './Alert.styled';\nimport { isEmpty } from 'lodash';\n\n/**\n * Alert display warnings or errors.\n *\n * ### Import\n *\n * ``` js\n * import { Alert } from '@ntbjs/react-components/data'\n * // or\n * import Alert from '@ntbjs/react-components/data/Alert'\n * ```\n * ## Props\n * ```\n * Pass one of `warning`, `error` or `info` to the `type` prop to render the right Alert.\n * Pass `align={left}`or `align={center}` to align content.\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `alertMessage={'message'} to display the message\n * Pass `fontSize={number}` to set the font size of the message in pixel\n * Pass `lineHeight={number}` to set the line height of the message in pixel\n * Pass `lineClamp={number}` to set the number of lines before the message will be truncated\n * Pass `verticalPadding={number}` to set the top and bottom padding of the alert in pixel\n * Pass `horizontalPadding={number}` to set the left and right padding of the alert in pixel\n * Pass `width={number}` to set the width of the alert in pixel\n *  ```\n * ### Warning / Error / Info\n * ```\n * <Alert type={\"warning\"} />\n * <Alert type={\"error\"} />\n * <Alert type={\"info\"} />\n * ```\n */\n\nconst Alert = React.forwardRef(function Alert(\n  {\n    type,\n    alertMessage,\n    align,\n    icon,\n    fontSize,\n    lineHeight,\n    lineClamp,\n    verticalPadding,\n    horizontalPadding,\n    width,\n    ...props\n  },\n  forwardedRef\n) {\n  let isWarning = false;\n  let isError = false;\n  let isInfo = true;\n\n  if (!isEmpty(type)) {\n    if (type === 'warning') {\n      isWarning = true;\n    } else if (type === 'error') {\n      isError = true;\n    } else {\n      isInfo = true;\n    }\n  } else {\n    if (isWarning || isError) {\n      isInfo = false;\n    }\n  }\n\n  return (\n    <S.Alert\n      ref={forwardedRef}\n      $alertMessage={alertMessage}\n      $warning={isWarning}\n      $error={isError}\n      $info={isInfo}\n      $align={align}\n      $verticalPadding={verticalPadding}\n      $horizontalPadding={horizontalPadding}\n      width={width}\n      {...props}\n    >\n      <S.AlertRender fontSize={fontSize} $lineHeight={lineHeight} $lineClamp={lineClamp}>\n        {icon} <span>{alertMessage}</span>\n      </S.AlertRender>\n    </S.Alert>\n  );\n});\n\nAlert.propTypes = {\n  /**\n   * Type of alert that will be reflected by the background color of it.\n   */\n  type: PropTypes.oneOf(['warning', 'error', 'info']),\n  /**\n   * Icon that will be displayed on the left of the alert message.\n   */\n  icon: PropTypes.element,\n  /**\n   * Alignment of the alert message.\n   */\n  align: PropTypes.oneOf(['left', 'center']),\n  /**\n   * Message that will be displayed on the alert.\n   */\n  alertMessage: PropTypes.string,\n  /**\n   * Font size of the alert message in pixel.\n   */\n  fontSize: PropTypes.number,\n  /**\n   * Line height of the alert message in pixel.\n   */\n  lineHeight: PropTypes.number,\n  /**\n   * Number of lines that will be displayed before the message will be truncated and replaced with ellipsis.\n   */\n  lineClamp: PropTypes.number,\n  /**\n   * The top and bottom padding of the alert in pixel.\n   */\n  verticalPadding: PropTypes.number,\n  /**\n   * The left and right padding of the alert in pixel.\n   */\n  horizontalPadding: PropTypes.number,\n  /**\n   * Custom width of the alert in pixel.\n   */\n  width: PropTypes.number\n};\n\nAlert.defaultProps = {\n  align: 'left',\n  alertMessage:\n    'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',\n  lineClamp: 0,\n  horizontalPadding: 30,\n  verticalPadding: 17\n};\n\nexport default Alert;\n"],"names":["Alert","React","forwardRef","type","alertMessage","align","icon","fontSize","lineHeight","lineClamp","verticalPadding","horizontalPadding","width","props","forwardedRef","isWarning","isError","isInfo","isEmpty","createElement","S","_extends","ref","$alertMessage","$warning","$error","$info","$align","$verticalPadding","$horizontalPadding","$lineHeight","$lineClamp","propTypes","process","env","NODE_ENV","PropTypes","oneOf","element","string","number","defaultProps"],"mappings":";;;;;;AAoCMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,YAAY;EACZC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,iBAAiB;EACjBC,KAAK;EACL,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,IAAIC,SAAS,GAAG,KAAK,CAAA;EACrB,IAAIC,OAAO,GAAG,KAAK,CAAA;EACnB,IAAIC,MAAM,GAAG,IAAI,CAAA;AAEjB,EAAA,IAAI,CAACC,OAAO,CAACf,IAAI,CAAC,EAAE;IAClB,IAAIA,IAAI,KAAK,SAAS,EAAE;AACtBY,MAAAA,SAAS,GAAG,IAAI,CAAA;AAClB,KAAC,MAAM,IAAIZ,IAAI,KAAK,OAAO,EAAE;AAC3Ba,MAAAA,OAAO,GAAG,IAAI,CAAA;AAChB,KAAC,MAAM;AACLC,MAAAA,MAAM,GAAG,IAAI,CAAA;AACf,KAAA;AACF,GAAC,MAAM;IACL,IAAIF,SAAS,IAAIC,OAAO,EAAE;AACxBC,MAAAA,MAAM,GAAG,KAAK,CAAA;AAChB,KAAA;AACF,GAAA;EAEA,OACEhB,cAAA,CAAAkB,aAAA,CAACC,OAAO,EAAAC,QAAA,CAAA;AACNC,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,aAAa,EAAEnB,YAAa;AAC5BoB,IAAAA,QAAQ,EAAET,SAAU;AACpBU,IAAAA,MAAM,EAAET,OAAQ;AAChBU,IAAAA,KAAK,EAAET,MAAO;AACdU,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,gBAAgB,EAAElB,eAAgB;AAClCmB,IAAAA,kBAAkB,EAAElB,iBAAkB;AACtCC,IAAAA,KAAK,EAAEA,KAAAA;GACHC,EAAAA,KAAK,GAETZ,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAS;AAACuB,IAAAA,WAAW,EAAEtB,UAAW;AAACuB,IAAAA,UAAU,EAAEtB,SAAAA;GACrEH,EAAAA,IAAI,EAAC,GAAC,EAAAL,cAAA,CAAAkB,aAAA,CAAOf,MAAAA,EAAAA,IAAAA,EAAAA,YAAmB,CACpB,CACR,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFJ,KAAK,CAACgC,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIhBhC,EAAAA,IAAI,EAAEiC,SAAS,CAACC,KAAK,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;EAInD/B,IAAI,EAAE8B,SAAS,CAACE,OAAO;EAIvBjC,KAAK,EAAE+B,SAAS,CAACC,KAAK,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;EAI1CjC,YAAY,EAAEgC,SAAS,CAACG,MAAM;EAI9BhC,QAAQ,EAAE6B,SAAS,CAACI,MAAM;EAI1BhC,UAAU,EAAE4B,SAAS,CAACI,MAAM;EAI5B/B,SAAS,EAAE2B,SAAS,CAACI,MAAM;EAI3B9B,eAAe,EAAE0B,SAAS,CAACI,MAAM;EAIjC7B,iBAAiB,EAAEyB,SAAS,CAACI,MAAM;EAInC5B,KAAK,EAAEwB,SAAS,CAACI,MAAAA;AACnB,CAAC,GAAA,EAAA,CAAA;AAEDxC,KAAK,CAACyC,YAAY,GAAG;AACnBpC,EAAAA,KAAK,EAAE,MAAM;AACbD,EAAAA,YAAY,EACV,8GAA8G;AAChHK,EAAAA,SAAS,EAAE,CAAC;AACZE,EAAAA,iBAAiB,EAAE,EAAE;AACrBD,EAAAA,eAAe,EAAE,EAAA;AACnB,CAAC;;;;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/data/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './Alert.styled';\nimport { isEmpty } from 'lodash';\n\ntype AlertOwnProps = {\n  /**\n   * Type of alert that will be reflected by the background color of it.\n   */\n  type?: 'warning' | 'error' | 'info';\n  /**\n   * Icon that will be displayed on the left of the alert message.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Alignment of the alert message.\n   */\n  align?: 'left' | 'center';\n  /**\n   * Message that will be displayed on the alert.\n   */\n  alertMessage?: string;\n  /**\n   * Font size of the alert message in pixel.\n   */\n  fontSize?: number;\n  /**\n   * Line height of the alert message in pixel.\n   */\n  lineHeight?: number;\n  /**\n   * Number of lines that will be displayed before the message will be truncated and replaced with ellipsis.\n   */\n  lineClamp?: number;\n  /**\n   * The top and bottom padding of the alert in pixel.\n   */\n  verticalPadding?: number;\n  /**\n   * The left and right padding of the alert in pixel.\n   */\n  horizontalPadding?: number;\n  /**\n   * Custom width of the alert in pixel.\n   */\n  width?: number;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Alert>, keyof AlertOwnProps> &\n  AlertOwnProps;\n\n/**\n * Alert display warnings or errors.\n *\n * ### Import\n *\n * ``` js\n * import { Alert } from '@ntbjs/react-components/data'\n * // or\n * import Alert from '@ntbjs/react-components/data/Alert'\n * ```\n * ## Props\n * ```\n * Pass one of `warning`, `error` or `info` to the `type` prop to render the right Alert.\n * Pass `align={left}`or `align={center}` to align content.\n * Pass `icon={<svg></svg>}` to display an icon.\n * Pass `alertMessage={'message'} to display the message\n * Pass `fontSize={number}` to set the font size of the message in pixel\n * Pass `lineHeight={number}` to set the line height of the message in pixel\n * Pass `lineClamp={number}` to set the number of lines before the message will be truncated\n * Pass `verticalPadding={number}` to set the top and bottom padding of the alert in pixel\n * Pass `horizontalPadding={number}` to set the left and right padding of the alert in pixel\n * Pass `width={number}` to set the width of the alert in pixel\n *  ```\n * ### Warning / Error / Info\n * ```\n * <Alert type={\"warning\"} />\n * <Alert type={\"error\"} />\n * <Alert type={\"info\"} />\n * ```\n */\n\nconst Alert = React.forwardRef<any, Props>(function Alert(\n  {\n    type,\n    alertMessage = 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',\n    align = 'left',\n    icon,\n    fontSize,\n    lineHeight,\n    lineClamp = 0,\n    verticalPadding = 17,\n    horizontalPadding = 30,\n    width,\n    ...props\n  },\n  forwardedRef\n) {\n  let isWarning = false;\n  let isError = false;\n  let isInfo = true;\n\n  if (!isEmpty(type)) {\n    if (type === 'warning') {\n      isWarning = true;\n    } else if (type === 'error') {\n      isError = true;\n    } else {\n      isInfo = true;\n    }\n  } else {\n    if (isWarning || isError) {\n      isInfo = false;\n    }\n  }\n\n  return (\n    <S.Alert\n      ref={forwardedRef}\n      $alertMessage={alertMessage}\n      $warning={isWarning}\n      $error={isError}\n      $info={isInfo}\n      $align={align}\n      $verticalPadding={verticalPadding}\n      $horizontalPadding={horizontalPadding}\n      width={width}\n      {...props}\n    >\n      <S.AlertRender fontSize={fontSize} $lineHeight={lineHeight} $lineClamp={lineClamp}>\n        {icon} <span>{alertMessage}</span>\n      </S.AlertRender>\n    </S.Alert>\n  );\n});\n\nexport default Alert;\n"],"names":["Alert","React","forwardRef","type","alertMessage","align","icon","fontSize","lineHeight","lineClamp","verticalPadding","horizontalPadding","width","props","forwardedRef","isWarning","isError","isInfo","isEmpty","_jsx","S","ref","$alertMessage","$warning","$error","$info","$align","$verticalPadding","$horizontalPadding","children","_jsxs","$lineHeight","$lineClamp"],"mappings":";;;;;AAkFA,MAAMA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,KAAKA,CACvD;EACEG,IAAI;AACJC,EAAAA,YAAY,GAAG,8GAA8G;AAC7HC,EAAAA,KAAK,GAAG,MAAM;EACdC,IAAI;EACJC,QAAQ;EACRC,UAAU;AACVC,EAAAA,SAAS,GAAG,CAAC;AACbC,EAAAA,eAAe,GAAG,EAAE;AACpBC,EAAAA,iBAAiB,GAAG,EAAE;EACtBC,KAAK;EACL,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,IAAIC,SAAS,GAAG,KAAK;EACrB,IAAIC,OAAO,GAAG,KAAK;EACnB,IAAIC,MAAM,GAAG,IAAI;AAEjB,EAAA,IAAI,CAACC,OAAO,CAACf,IAAI,CAAC,EAAE;IAClB,IAAIA,IAAI,KAAK,SAAS,EAAE;AACtBY,MAAAA,SAAS,GAAG,IAAI;AAClB,IAAA,CAAC,MAAM,IAAIZ,IAAI,KAAK,OAAO,EAAE;AAC3Ba,MAAAA,OAAO,GAAG,IAAI;AAChB,IAAA,CAAC,MAAM;AACLC,MAAAA,MAAM,GAAG,IAAI;AACf,IAAA;AACF,EAAA,CAAC,MAAM;IACL,IAAIF,SAAS,IAAIC,OAAO,EAAE;AACxBC,MAAAA,MAAM,GAAG,KAAK;AAChB,IAAA;AACF,EAAA;AAEA,EAAA,OACEE,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,GAAG,EAAEP,YAAa;AAClBQ,IAAAA,aAAa,EAAElB,YAAa;AAC5BmB,IAAAA,QAAQ,EAAER,SAAU;AACpBS,IAAAA,MAAM,EAAER,OAAQ;AAChBS,IAAAA,KAAK,EAAER,MAAO;AACdS,IAAAA,MAAM,EAAErB,KAAM;AACdsB,IAAAA,gBAAgB,EAAEjB,eAAgB;AAClCkB,IAAAA,kBAAkB,EAAEjB,iBAAkB;AACtCC,IAAAA,KAAK,EAAEA,KAAM;AAAA,IAAA,GACTC,KAAK;AAAAgB,IAAAA,QAAA,EAETC,IAAA,CAACV,WAAa,EAAA;AAACb,MAAAA,QAAQ,EAAEA,QAAS;AAACwB,MAAAA,WAAW,EAAEvB,UAAW;AAACwB,MAAAA,UAAU,EAAEvB,SAAU;AAAAoB,MAAAA,QAAA,EAAA,CAC/EvB,IAAI,EAAC,GAAC,EAAAa,GAAA,CAAA,MAAA,EAAA;AAAAU,QAAAA,QAAA,EAAOzB;AAAY,OAAO,CAAC;KACrB;AAAC,GACT,CAAC;AAEd,CAAC;;;;"}

package/build/data/Alert/Alert.styled.js

@@ -6,58 +6,20 @@ const shouldForwardProp = prop => {
 };
 const Alert = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  flex-direction: column;
-  padding: ${props => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Alertstyled__Alert",
+  componentId: "sc-8n1qjj-0"
+})(["display:flex;flex-direction:column;padding:", ";width:", ";box-sizing:border-box;", " ", " ", " text-align:", ";"], props => {
   const verticalPadding = props.$verticalPadding ?? 17;
   const horizontalPadding = props.$horizontalPadding ?? 30;
   return `${verticalPadding}px ${horizontalPadding}px`;
-}};
-  width: ${props => props.width ? `${props.width}px` : '100%'};
-  box-sizing: border-box;
-
-  ${props => props.$warning && css`
-      ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}
-    `}
-
-  ${props => props.$error && css`
-      ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}
-    `}
-  
-  ${props => props.$info && css`
-      background: transparent;
-    `}
-  
-  text-align: ${props => props.align === 'center' ? 'center' : 'left'};
-`;
+}, props => props.width ? `${props.width}px` : '100%', props => props.$warning && css(["", ""], props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.$error && css(["", ""], props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.$info && css(["background:transparent;"]), props => props.align === 'center' ? 'center' : 'left');
 const AlertRender = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  word-break: break-word;
-  ${props => props.$lineHeight ? `line-height: ${props.$lineHeight}px;` : null}
-  ${props => props.fontSize ? `font-size: ${props.fontSize}px;` : null}
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-
-  svg {
-    width: 12px;
-    height: 12px;
-  }
-
-  span {
-    flex: 1;
-    padding-left: 5px;
-    ${props => props.$lineClamp ? css`
-            display: -webkit-box;
-            -webkit-line-clamp: ${props.$lineClamp};
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          ` : null};
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Alertstyled__AlertRender",
+  componentId: "sc-8n1qjj-1"
+})(["display:flex;align-items:center;word-break:break-word;", " ", " ", ";svg{width:12px;height:12px;}span{flex:1;padding-left:5px;", ";}"], props => props.$lineHeight ? `line-height: ${props.$lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.$lineClamp ? css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], props.$lineClamp) : null);
 
 export { Alert, AlertRender };
 //# sourceMappingURL=Alert.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.styled.js","sources":["../../../src/components/data/Alert/Alert.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 Alert = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  padding: ${props => {\n    const verticalPadding = props.$verticalPadding ?? 17;\n    const horizontalPadding = props.$horizontalPadding ?? 30;\n    return `${verticalPadding}px ${horizontalPadding}px`;\n  }};\n  width: ${props => (props.width ? `${props.width}px` : '100%')};\n  box-sizing: border-box;\n\n  ${props =>\n    props.$warning &&\n    css`\n      ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}\n    `}\n\n  ${props =>\n    props.$error &&\n    css`\n      ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}\n    `}\n  \n  ${props =>\n    props.$info &&\n    css`\n      background: transparent;\n    `}\n  \n  text-align: ${props => (props.align === 'center' ? 'center' : 'left')};\n`;\n\nexport const AlertRender = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  ${props => (props.$lineHeight ? `line-height: ${props.$lineHeight}px;` : null)}\n  ${props => (props.fontSize ? `font-size: ${props.fontSize}px;` : null)}\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  span {\n    flex: 1;\n    padding-left: 5px;\n    ${props =>\n      props.$lineClamp\n        ? css`\n            display: -webkit-box;\n            -webkit-line-clamp: ${props.$lineClamp};\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          `\n        : null};\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Alert","styled","div","withConfig","attrs","applyDefaultTheme","props","verticalPadding","$verticalPadding","horizontalPadding","$horizontalPadding","width","$warning","css","theme","themeProp","getColor","$error","$info","align","AlertRender","$lineHeight","fontSize","$lineClamp"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,KAAK,GAAGC,MAAM,CAACC,GAAG,CAC5BC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA,WAAA,EAAaC,KAAK,IAAI;AAClB,EAAA,MAAMC,eAAe,GAAGD,KAAK,CAACE,gBAAgB,IAAI,EAAE,CAAA;AACpD,EAAA,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,kBAAkB,IAAI,EAAE,CAAA;AACxD,EAAA,OAAO,CAAGH,EAAAA,eAAe,CAAME,GAAAA,EAAAA,iBAAiB,CAAI,EAAA,CAAA,CAAA;AACtD,CAAC,CAAA;AACH,SAAA,EAAWH,KAAK,IAAKA,KAAK,CAACK,KAAK,GAAG,CAAGL,EAAAA,KAAK,CAACK,KAAK,CAAI,EAAA,CAAA,GAAG,MAAO,CAAA;AAC/D;AACA;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdC,GAAG,CAAA;AACP,MAAA,EAAQP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAA;AACjG,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIV,KAAK,IACLA,KAAK,CAACW,MAAM,IACZJ,GAAG,CAAA;AACP,MAAA,EAAQP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAA;AACvF,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIV,KAAK,IACLA,KAAK,CAACY,KAAK,IACXL,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA,cAAgBP,EAAAA,KAAK,IAAKA,KAAK,CAACa,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAO,CAAA;AACvE,EAAC;AAEM,MAAMC,WAAW,GAAGnB,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAA,EAAIC,KAAK,IAAKA,KAAK,CAACe,WAAW,GAAG,CAAgBf,aAAAA,EAAAA,KAAK,CAACe,WAAW,CAAK,GAAA,CAAA,GAAG,IAAK,CAAA;AAChF,EAAA,EAAIf,KAAK,IAAKA,KAAK,CAACgB,QAAQ,GAAG,CAAchB,WAAAA,EAAAA,KAAK,CAACgB,QAAQ,CAAK,GAAA,CAAA,GAAG,IAAK,CAAA;AACxE,EAAIhB,EAAAA,KAAK,IACLA,KAAK,CAACQ,KAAK,CAACC,SAAS,CACnB,OAAO,EACPT,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,EAC7BV,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMV,KAAK,IACLA,KAAK,CAACiB,UAAU,GACZV,GAAG,CAAA;AACb;AACA,gCAAkCP,EAAAA,KAAK,CAACiB,UAAU,CAAA;AAClD;AACA;AACA;AACA,UAAA,CAAW,GACD,IAAI,CAAA;AACd;AACA;;;;"}
+{"version":3,"file":"Alert.styled.js","sources":["../../../src/components/data/Alert/Alert.styled.ts"],"sourcesContent":["/*\n * Three deferred defects declared here: width, fontSize leak to DOM; align is read but never passed.\n */\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n/**\n * Props of the `Alert` root, i.e. what `Alert.tsx` passes to `S.Alert`. Value types come\n * from that file's propTypes; all optional.\n */\nexport interface AlertStyleProps {\n  /** `isWarning` — derived in the component from `type === 'warning'`, so `boolean`. */\n  $warning?: boolean;\n  /** `isError` — derived from `type === 'error'`. */\n  $error?: boolean;\n  /** `isInfo` — derived; the component initialises it `true`. */\n  $info?: boolean;\n  /**\n   * `verticalPadding` — `PropTypes.number`, px. `number` and not `number | string`: the\n   * template interpolates `${…}px`, so a string would already emit `padding: 17pxpx`.\n   */\n  $verticalPadding?: number;\n  /** `horizontalPadding` — `PropTypes.number`, px, interpolated the same way. */\n  $horizontalPadding?: number;\n  /**\n   * `alertMessage` — `PropTypes.string`. Component passes it; nothing reads it. Harmless; `$` filters it.\n   */\n  $alertMessage?: string;\n  /**\n   * `align` — `PropTypes.oneOf(['left', 'center'])`. Defect: component passes `$align`; template reads plain `align` instead. No-op; every Alert is left-aligned.\n   */\n  $align?: 'left' | 'center';\n  /**\n   * `width` — `PropTypes.number`, px. Defect: no `$` means it leaks to DOM as invalid `width=\"480\"` attribute.\n   */\n  width?: number;\n  /**\n   * `align` in its non-`$` form — read but never passed; comparison always false.\n   */\n  align?: 'left' | 'center';\n}\n\n/** Props of `AlertRender`, i.e. what `Alert.tsx` passes to `S.AlertRender`. */\ninterface AlertRenderStyleProps {\n  /** `lineHeight` — `PropTypes.number`, px, interpolated as `${…}px`. */\n  $lineHeight?: number;\n  /**\n   * `lineClamp` — `PropTypes.number`, the `-webkit-line-clamp` count. The component\n   * defaults it to `0`, which is falsy, so the clamp block is opt-in.\n   */\n  $lineClamp?: number;\n  /**\n   * `fontSize` — `PropTypes.number`, px. Defect: no `$` means it leaks to DOM as `font-size=\"12\"` attribute.\n   */\n  fontSize?: number;\n}\n\n/*\n * Single-argument, and it stays that way — peer floor `styled-components: >=5.1.0`, and\n * the two majors disagree on the second parameter. `prop` needs the annotation because\n * `withConfig` takes this by reference, so it gets no contextual typing.\n */\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Alert = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<AlertStyleProps>(applyDefaultTheme)`\n  display: flex;\n  flex-direction: column;\n  padding: ${props => {\n    const verticalPadding = props.$verticalPadding ?? 17;\n    const horizontalPadding = props.$horizontalPadding ?? 30;\n    return `${verticalPadding}px ${horizontalPadding}px`;\n  }};\n  width: ${props => (props.width ? `${props.width}px` : '100%')};\n  box-sizing: border-box;\n\n  ${props =>\n    props.$warning &&\n    css`\n      ${props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))}\n    `}\n\n  ${props =>\n    props.$error &&\n    css`\n      ${props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))}\n    `}\n  \n  ${props =>\n    props.$info &&\n    css`\n      background: transparent;\n    `}\n  \n  text-align: ${props => (props.align === 'center' ? 'center' : 'left')};\n`;\n\nexport const AlertRender = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<AlertRenderStyleProps>(applyDefaultTheme)`\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n  ${props => (props.$lineHeight ? `line-height: ${props.$lineHeight}px;` : null)}\n  ${props => (props.fontSize ? `font-size: ${props.fontSize}px;` : null)}\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n\n  span {\n    flex: 1;\n    padding-left: 5px;\n    ${props =>\n      props.$lineClamp\n        ? css`\n            display: -webkit-box;\n            -webkit-line-clamp: ${props.$lineClamp};\n            -webkit-box-orient: vertical;\n            overflow: hidden;\n            text-overflow: ellipsis;\n          `\n        : null};\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","Alert","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","verticalPadding","$verticalPadding","horizontalPadding","$horizontalPadding","width","$warning","css","theme","themeProp","getColor","$error","$info","align","AlertRender","$lineHeight","fontSize","$lineClamp"],"mappings":";;;AA8DA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,KAAK,GAAGC,MAAM,CAACC,GAAG,CAC5BC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAkBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6CAAA,EAAA,SAAA,EAAA,yBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,cAAA,EAAA,GAAA,CAAA,EAG/BC,KAAK,IAAI;AAClB,EAAA,MAAMC,eAAe,GAAGD,KAAK,CAACE,gBAAgB,IAAI,EAAE;AACpD,EAAA,MAAMC,iBAAiB,GAAGH,KAAK,CAACI,kBAAkB,IAAI,EAAE;AACxD,EAAA,OAAO,CAAA,EAAGH,eAAe,CAAA,GAAA,EAAME,iBAAiB,CAAA,EAAA,CAAI;AACtD,CAAC,EACQH,KAAK,IAAKA,KAAK,CAACK,KAAK,GAAG,GAAGL,KAAK,CAACK,KAAK,CAAA,EAAA,CAAI,GAAG,MAAO,EAG3DL,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdC,GAAG,WACCP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAC5F,EAEDV,KAAK,IACLA,KAAK,CAACW,MAAM,IACZJ,GAAG,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,EACCP,KAAK,CAACQ,KAAK,CAACC,SAAS,CAAC,YAAY,EAAE,SAAS,EAAET,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAC,CAClF,EAEDV,KAAK,IACLA,KAAK,CAACY,KAAK,IACXL,GAAG,CAAA,CAAA,yBAAA,CAAA,CAEF,EAEWP,KAAK,IAAKA,KAAK,CAACa,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAO;AAGhE,MAAMC,WAAW,GAAGrB,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAwBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wDAAA,EAAA,GAAA,EAAA,GAAA,EAAA,4DAAA,EAAA,IAAA,CAAA,EAI9CC,KAAK,IAAKA,KAAK,CAACe,WAAW,GAAG,CAAA,aAAA,EAAgBf,KAAK,CAACe,WAAW,CAAA,GAAA,CAAK,GAAG,IAAK,EAC5Ef,KAAK,IAAKA,KAAK,CAACgB,QAAQ,GAAG,CAAA,WAAA,EAAchB,KAAK,CAACgB,QAAQ,CAAA,GAAA,CAAK,GAAG,IAAK,EACpEhB,KAAK,IACLA,KAAK,CAACQ,KAAK,CAACC,SAAS,CACnB,OAAO,EACPT,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,EAC7BV,KAAK,CAACQ,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,EAUCV,KAAK,IACLA,KAAK,CAACiB,UAAU,GACZV,GAAG,sHAEqBP,KAAK,CAACiB,UAAU,CAAA,GAKxC,IAAI;;;;"}

package/build/data/Badge/Badge.js

@@ -1,19 +1,18 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
 import React__default from 'react';
 import { Badge as Badge$1, BadgeChildrenContainer, BadgeLabel, BadgeIcon } from './Badge.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Badge = React__default.forwardRef(function Badge({
   badgeContent,
-  badgeIcon,
+  badgeIcon = null,
   children,
-  elevated,
+  elevated = false,
   fontSize,
-  fontWeight,
-  lineHeight,
-  active,
-  error,
-  warning,
+  fontWeight = 'normal',
+  lineHeight = 'normal',
+  active = false,
+  error = false,
+  warning = false,
   backgroundColors,
   colors,
   verticalPadding,
@@ -30,61 +29,37 @@ const Badge = React__default.forwardRef(function Badge({
       notation: 'compact'
     }).format(badgeContent);
   }
-  return React__default.createElement(Badge$1, _extends({
+  return jsxs(Badge$1, {
     ref: forwardedRef,
     $elevated: elevated,
-    $hasChildren: Boolean(children)
-  }, props), children && React__default.createElement(BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && React__default.createElement(BadgeLabel, {
-    $backgroundColors: backgroundColors,
-    $colors: colors,
-    $elevated: elevated,
-    fontSize: fontSize,
-    fontWeight: fontWeight,
-    $lineHeight: lineHeight,
-    $active: active,
-    $error: error,
-    $warning: warning,
-    $elevatedverticalPadding: verticalPadding,
-    $horizontalPadding: horizontalPadding,
-    height: height,
-    $minHeight: minHeight,
-    width: width,
-    $minWidth: minWidth,
-    $borderColors: borderColors
-  }, badgeIcon && React__default.createElement(BadgeIcon, {
-    $useGutter: !!badgeContent
-  }, badgeIcon), badgeContent));
+    $hasChildren: Boolean(children),
+    ...props,
+    children: [children && jsx(BadgeChildrenContainer, {
+      children: children
+    }), (badgeIcon || badgeContent) && jsxs(BadgeLabel, {
+      $backgroundColors: backgroundColors,
+      $colors: colors,
+      $elevated: elevated,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      $lineHeight: lineHeight,
+      $active: active,
+      $error: error,
+      $warning: warning,
+      $elevatedverticalPadding: verticalPadding,
+      $horizontalPadding: horizontalPadding,
+      height: height,
+      $minHeight: minHeight,
+      width: width,
+      $minWidth: minWidth,
+      $borderColors: borderColors,
+      children: [badgeIcon && jsx(BadgeIcon, {
+        $useGutter: !!badgeContent,
+        children: badgeIcon
+      }), badgeContent]
+    })]
+  });
 });
-Badge.propTypes = process.env.NODE_ENV !== "production" ? {
-  badgeIcon: PropTypes.node,
-  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func, PropTypes.element]),
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  elevated: PropTypes.bool,
-  active: PropTypes.bool,
-  error: PropTypes.bool,
-  warning: PropTypes.bool,
-  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  colors: PropTypes.arrayOf(PropTypes.string),
-  backgroundColors: PropTypes.arrayOf(PropTypes.string),
-  verticalPadding: PropTypes.number,
-  horizontalPadding: PropTypes.number,
-  height: PropTypes.number,
-  minHeight: PropTypes.number,
-  width: PropTypes.number,
-  minWidth: PropTypes.number,
-  borderColors: PropTypes.arrayOf(PropTypes.string)
-} : {};
-Badge.defaultProps = {
-  elevated: false,
-  active: false,
-  error: false,
-  warning: false,
-  badgeIcon: null,
-  fontWeight: 'normal',
-  lineHeight: 'normal'
-};
 
 export { Badge as default };
 //# sourceMappingURL=Badge.js.map

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    borderColors,\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          $borderColors={borderColors}\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   * Border colors in the manner of [darkThemeColor, lightThemeColor]. When provided, a 1px solid border is applied.\n   */\n  borderColors: PropTypes.arrayOf(PropTypes.string)\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","borderColors","props","forwardedRef","Intl","NumberFormat","notation","format","createElement","S","_extends","ref","$elevated","$hasChildren","Boolean","$backgroundColors","$colors","$lineHeight","$active","$error","$warning","$elevatedverticalPadding","$horizontalPadding","$minHeight","$minWidth","$borderColors","$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.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './Badge.styled';\n\ntype BadgeOwnProps = {\n  /**\n   * An Icon to show in the badge alongside with a text\n   */\n  badgeIcon?: React.ReactNode;\n  /**\n   * Content to be showed in the badge – e.g. number of results.\n   * ReactNode, not the union — func is never valid, null was missing.\n   */\n  badgeContent?: React.ReactNode;\n  /**\n   * The element(s) for which the badge will be displayed – e.g. an icon or a text.\n   */\n  children?: React.ReactNode | string;\n  /**\n   * Whether the badge should be displayed in an elevated position on top of the child element(s) or not.\n   */\n  elevated?: boolean;\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?: boolean;\n  /**\n   * There is an error present – 'error be prioritized over warnings if both are set to `true`.\n   */\n  error?: boolean;\n  /**\n   * There is a warning present.\n   */\n  warning?: boolean;\n  /**\n   * Font size for the badge\n   */\n  fontSize?: number | string;\n  /**\n   * Font weight for the badge\n   */\n  fontWeight?: number | string;\n  /**\n   * Line weight for the badge\n   */\n  lineHeight?: number | string;\n  /**\n   * Colors of the font in the manner of [darkThemeColor, lightThemeColor]\n   */\n  colors?: string[];\n  /**\n   * Background colors for the badge in the manner of [darkThemeColor, lightThemeColor]\n   */\n  backgroundColors?: string[];\n  /**\n   * Top and bottom padding for the badge\n   */\n  verticalPadding?: number;\n  /**\n   * Left and right padding for the badge\n   */\n  horizontalPadding?: number;\n  /**\n   * Height of the badge\n   */\n  height?: number;\n  /**\n   * Minimum height of the badge\n   */\n  minHeight?: number;\n  /**\n   * Width of the badge\n   */\n  width?: number;\n  /**\n   * Minimum width of the badge\n   */\n  minWidth?: number;\n  /**\n   * Border colors in the manner of [darkThemeColor, lightThemeColor]. When provided, a 1px solid border is applied.\n   */\n  borderColors?: string[];\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.Badge>, keyof BadgeOwnProps> &\n  BadgeOwnProps;\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<any, Props>(function Badge(\n  {\n    badgeContent,\n    badgeIcon = null,\n    children,\n    elevated = false,\n    fontSize,\n    fontWeight = 'normal',\n    lineHeight = 'normal',\n    active = false,\n    error = false,\n    warning = false,\n    backgroundColors,\n    colors,\n    verticalPadding,\n    horizontalPadding,\n    height,\n    minHeight,\n    width,\n    minWidth,\n    borderColors,\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          $borderColors={borderColors}\n        >\n          {badgeIcon && <S.BadgeIcon $useGutter={!!badgeContent}>{badgeIcon}</S.BadgeIcon>}\n          {badgeContent}\n        </S.BadgeLabel>\n      )}\n    </S.Badge>\n  );\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","borderColors","props","forwardedRef","Intl","NumberFormat","notation","format","_jsxs","S","ref","$elevated","$hasChildren","Boolean","_jsx","$backgroundColors","$colors","$lineHeight","$active","$error","$warning","$elevatedverticalPadding","$horizontalPadding","$minHeight","$minWidth","$borderColors","$useGutter"],"mappings":";;;;AA4HA,MAAMA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,KAAKA,CACvD;EACEG,YAAY;AACZC,EAAAA,SAAS,GAAG,IAAI;EAChBC,QAAQ;AACRC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,QAAQ;AACRC,EAAAA,UAAU,GAAG,QAAQ;AACrBC,EAAAA,UAAU,GAAG,QAAQ;AACrBC,EAAAA,MAAM,GAAG,KAAK;AACdC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,gBAAgB;EAChBC,MAAM;EACNC,eAAe;EACfC,iBAAiB;EACjBC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,IAAI,OAAOpB,YAAY,KAAK,QAAQ,EAAE;AACpCA,IAAAA,YAAY,GAAGqB,IAAI,CAACC,YAAY,CAAC,IAAI,EAAE;AAAEC,MAAAA,QAAQ,EAAE;AAAU,KAAC,CAAC,CAACC,MAAM,CAACxB,YAAY,CAAC;AACtF,EAAA;AAEA,EAAA,OACEyB,IAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,GAAG,EAAEP,YAAa;AAACQ,IAAAA,SAAS,EAAEzB,QAAS;AAAC0B,IAAAA,YAAY,EAAEC,OAAO,CAAC5B,QAAQ,CAAE;AAAA,IAAA,GAAKiB,KAAK;AAAAjB,IAAAA,QAAA,GACxFA,QAAQ,IAAI6B,GAAA,CAACL,sBAAwB,EAAA;AAAAxB,MAAAA,QAAA,EAAEA;KAAmC,CAAC,EAC3E,CAACD,SAAS,IAAID,YAAY,KACzByB,IAAA,CAACC,UAAY,EAAA;AACXM,MAAAA,iBAAiB,EAAEtB,gBAAiB;AACpCuB,MAAAA,OAAO,EAAEtB,MAAO;AAChBiB,MAAAA,SAAS,EAAEzB,QAAS;AACpBC,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,UAAU,EAAEA,UAAW;AACvB6B,MAAAA,WAAW,EAAE5B,UAAW;AACxB6B,MAAAA,OAAO,EAAE5B,MAAO;AAChB6B,MAAAA,MAAM,EAAE5B,KAAM;AACd6B,MAAAA,QAAQ,EAAE5B,OAAQ;AAClB6B,MAAAA,wBAAwB,EAAE1B,eAAgB;AAC1C2B,MAAAA,kBAAkB,EAAE1B,iBAAkB;AACtCC,MAAAA,MAAM,EAAEA,MAAO;AACf0B,MAAAA,UAAU,EAAEzB,SAAU;AACtBC,MAAAA,KAAK,EAAEA,KAAM;AACbyB,MAAAA,SAAS,EAAExB,QAAS;AACpByB,MAAAA,aAAa,EAAExB,YAAa;AAAAhB,MAAAA,QAAA,GAE3BD,SAAS,IAAI8B,GAAA,CAACL,SAAW,EAAA;QAACiB,UAAU,EAAE,CAAC,CAAC3C,YAAa;AAAAE,QAAAA,QAAA,EAAED;OAAuB,CAAC,EAC/ED,YAAY;AAAA,KACD,CACf;AAAA,GACM,CAAC;AAEd,CAAC;;;;"}

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

@@ -6,69 +6,32 @@ const shouldForwardProp = prop => {
 };
 const Badge = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-content: center;
-  display: ${props => props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex'};
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 500;
-  min-height: 24px;
-  position: relative;
-  width: ${props => props.$elevated ? 'fit-content' : 'initial'};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Badgestyled__Badge",
+  componentId: "sc-1h3t54-0"
+})(["align-content:center;display:", ";font-family:", ";font-size:1rem;font-weight:500;min-height:24px;position:relative;width:", ";"], props => props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.$elevated ? 'fit-content' : 'initial');
 const BadgeChildrenContainer = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-self: center;
-  height: fit-content;
-  margin-right: 8px;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Badgestyled__BadgeChildrenContainer",
+  componentId: "sc-1h3t54-1"
+})(["align-self:center;height:fit-content;margin-right:8px;"]);
 const BadgeLabel = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  border-radius: ${props => props.$elevated ? '12px' : '14px'};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-
-  font-size: ${props => {
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Badgestyled__BadgeLabel",
+  componentId: "sc-1h3t54-2"
+})(["border-radius:", ";display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:", ";font-weight:", ";line-height:", ";height:", ";letter-spacing:0.32px;margin-left:", ";position:", ";right:0;transform:", ";", " ", " ", " ", " ", " ", " ", ""], props => props.$elevated ? '12px' : '14px', props => {
   if (props.fontSize) {
     return `${props.fontSize}px`;
   } else {
     return props.elevated ? '0.625rem' : '0.750rem';
   }
-}};
-  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'};
-  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;
-        ` : null}
-
-  ${props => props.$minWidth ? css`
-          min-width: ${props.$minWidth}px;
-        ` : null}
-
-  ${props => props.$minHeight ? css`
-          min-height: ${props.$minHeight}px;
-        ` : null}
-
-  ${props => {
+}, props => props.fontWeight ? props.fontWeight : 'normal', props => props.$lineHeight ? `${props.$lineHeight}px` : 'normal', props => props.height ? `${props.height}px` : 'fit-content', props => props.$elevated ? '15px' : 'auto', props => props.$elevated ? 'absolute' : 'initial', props => props.$elevated ? 'translate(33%, -8px)' : 'initial', props => props.width ? css(["width:", "px;"], props.width) : null, props => props.$minWidth ? css(["min-width:", "px;"], props.$minWidth) : null, props => props.$minHeight ? css(["min-height:", "px;"], props.$minHeight) : null, props => {
   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};
-    `;
-}}
-
-  ${props => props.theme.themeProp('background', () => {
+  return css(["padding:", " ", ";"], verticalPadding, horizontalPadding);
+}, props => props.theme.themeProp('background', () => {
   const active = props.$active;
   const error = props.$error;
   const warning = props.$warning;
@@ -110,9 +73,7 @@ const BadgeLabel = styled.span.withConfig({
     default:
       return props.theme.getColor('gray-200');
   }
-})}
-
-    ${props => props.theme.themeProp('color', () => {
+}), props => props.theme.themeProp('color', () => {
   const defaultColor = props?.$colors?.[0] ?? props.theme.getColor('white');
   if (props.$warning && !props.$error || props.error && !props.$active) {
     return props.theme.getColor('gray-900');
@@ -126,23 +87,13 @@ const BadgeLabel = styled.span.withConfig({
   } else {
     return defaultColor;
   }
-})}
-
-    ${props => props.$borderColors && css`
-        border: 1px solid;
-        ${props.theme.themeProp('border-color', props.$borderColors[0], props.$borderColors[1])}
-      `}
-`;
+}), props => props.$borderColors && css(["border:1px solid;", ""], props.theme.themeProp('border-color', props.$borderColors[0], props.$borderColors[1])));
 const BadgeIcon = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  margin-right: ${props => props.$useGutter ? '4px' : 0};
-  svg {
-    height: 12px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Badgestyled__BadgeIcon",
+  componentId: "sc-1h3t54-3"
+})(["display:flex;align-items:center;margin-right:", ";svg{height:12px;}"], props => props.$useGutter ? '4px' : 0);
 
 export { Badge, BadgeChildrenContainer, BadgeIcon, BadgeLabel };
 //# sourceMappingURL=Badge.styled.js.map

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    ${props =>\n      props.$borderColors &&\n      css`\n        border: 1px solid;\n        ${props.theme.themeProp('border-color', props.$borderColors[0], props.$borderColors[1])}\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","defaultColor","$colors","$borderColors","BadgeIcon","$useGutter"],"mappings":"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"}
+{"version":3,"file":"Badge.styled.js","sources":["../../../src/components/data/Badge/Badge.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport interface BadgeStyleProps {\n  $elevated?: boolean;\n  $hasChildren?: boolean;\n}\n\ninterface BadgeLabelStyleProps {\n  $elevated?: boolean;\n  $active?: boolean;\n  $error?: boolean;\n  $warning?: boolean;\n  $lineHeight?: number | string;\n  $horizontalPadding?: number;\n  $minHeight?: number;\n  $minWidth?: number;\n  $backgroundColors?: string[];\n  $colors?: string[];\n  $borderColors?: string[];\n  verticalPadding?: number;\n  $elevatedverticalPadding?: number;\n  elevated?: boolean;\n  error?: boolean;\n  fontSize?: number | string;\n  fontWeight?: number | string;\n  height?: number;\n  width?: number;\n}\n\ninterface BadgeIconStyleProps {\n  $useGutter?: boolean;\n}\n\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Badge = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<BadgeStyleProps>(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<BadgeLabelStyleProps>(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    ${props =>\n      props.$borderColors &&\n      css`\n        border: 1px solid;\n        ${props.theme.themeProp('border-color', props.$borderColors[0], props.$borderColors[1])}\n      `}\n`;\n\nexport const BadgeIcon = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<BadgeIconStyleProps>(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","displayName","componentId","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","defaultColor","$colors","$borderColors","BadgeIcon","$useGutter"],"mappings":"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"}