@os-design/core 1.0.244 → 1.0.246

package/dist/cjs/Badge/index.js

@@ -25,7 +25,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n"])));
 var HEIGHT_EM = 1.5;
 var Sized = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), _styles.sizeStyles);
 var Value = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('top', 'right'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  transform: translate(50%, -50%);\n\n  height: ", "em;\n  min-width: ", "em;\n  padding: 0 0.3em;\n  border-radius: ", "em;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n\n  font-size: ", "em;\n  font-weight: 500;\n  line-height: 1;\n"])), function (p) {
@@ -68,7 +68,7 @@ var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useMemo2 = _slicedToArray(_useMemo, 2),
     top = _useMemo2[0],
     right = _useMemo2[1];
-  return value === 0 ? children : /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
+  return count === 0 ? children : /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
     ref: ref
   }), children, /*#__PURE__*/_react["default"].createElement(Sized, {
     size: size

package/dist/cjs/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_utils","_react","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","HEIGHT_EM","Sized","omitEmotionProps","sizeStyles","Value","p","top","right","clr","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","forwardRef","_ref","ref","_ref$count","count","_ref$max","max","_ref$offset","offset","_ref$size","size","children","rest","useMemo","createElement","Fragment","_useMemo","_useMemo2","displayName","_default","exports"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n  /**\n   * Number shown in the corner.\n   * @default 0\n   */\n  count?: number;\n  /**\n   * The max number.\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Offset of the badge.\n   * top/right | [top, right]\n   * @default undefined\n   */\n  offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n  position: relative;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\ninterface ValueProps {\n  top: string;\n  right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n  position: absolute;\n  top: ${(p) => p.top};\n  right: ${(p) => p.right};\n  transform: translate(50%, -50%);\n\n  height: ${HEIGHT_EM}em;\n  min-width: ${HEIGHT_EM}em;\n  padding: 0 0.3em;\n  border-radius: ${HEIGHT_EM / 2}em;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background-color: ${(p) => clr(p.theme.badgeColorBg)};\n  color: ${(p) => clr(p.theme.badgeColorText)};\n  border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n  line-height: 1;\n`;\n\nconst Plus = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n  (\n    { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n    ref\n  ) => {\n    const value = useMemo(\n      () =>\n        count > max ? (\n          <>\n            {max}\n            <Plus>+</Plus>\n          </>\n        ) : (\n          count\n        ),\n      [count, max]\n    );\n\n    const [top, right] = useMemo(\n      () => (Array.isArray(offset) ? offset : [offset, offset]),\n      [offset]\n    );\n\n    return value === 0 ? (\n      children\n    ) : (\n      <Container {...rest} ref={ref}>\n        {children}\n        <Sized size={size}>\n          <Value top={top} right={right}>\n            {value}\n          </Value>\n        </Sized>\n      </Container>\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_utils","_react","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","HEIGHT_EM","Sized","omitEmotionProps","sizeStyles","Value","p","top","right","clr","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","forwardRef","_ref","ref","_ref$count","count","_ref$max","max","_ref$offset","offset","_ref$size","size","children","rest","useMemo","createElement","Fragment","_useMemo","_useMemo2","displayName","_default","exports"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n  /**\n   * Number shown in the corner.\n   * @default 0\n   */\n  count?: number;\n  /**\n   * The max number.\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Offset of the badge.\n   * top/right | [top, right]\n   * @default undefined\n   */\n  offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n  position: relative;\n  display: flex;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\ninterface ValueProps {\n  top: string;\n  right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n  position: absolute;\n  top: ${(p) => p.top};\n  right: ${(p) => p.right};\n  transform: translate(50%, -50%);\n\n  height: ${HEIGHT_EM}em;\n  min-width: ${HEIGHT_EM}em;\n  padding: 0 0.3em;\n  border-radius: ${HEIGHT_EM / 2}em;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background-color: ${(p) => clr(p.theme.badgeColorBg)};\n  color: ${(p) => clr(p.theme.badgeColorText)};\n  border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n  line-height: 1;\n`;\n\nconst Plus = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n  (\n    { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n    ref\n  ) => {\n    const value = useMemo(\n      () =>\n        count > max ? (\n          <>\n            {max}\n            <Plus>+</Plus>\n          </>\n        ) : (\n          count\n        ),\n      [count, max]\n    );\n\n    const [top, right] = useMemo(\n      () => (Array.isArray(offset) ? offset : [offset, offset]),\n      [offset]\n    );\n\n    return count === 0 ? (\n      children\n    ) : (\n      <Container {...rest} ref={ref}>\n        {children}\n        <Sized size={size}>\n          <Value top={top} right={right}>\n            {value}\n          </Value>\n        </Sized>\n      </Container>\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Badge/index.js

@@ -6,6 +6,7 @@ import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef, useMemo } from 'react';
 const Container = styled.div`
   position: relative;
+  display: flex;
 `;
 const HEIGHT_EM = 1.5;
 const Sized = styled('div', omitEmotionProps('size'))`
@@ -53,7 +54,7 @@ const Badge = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const value = useMemo(() => count > max ? /*#__PURE__*/React.createElement(React.Fragment, null, max, /*#__PURE__*/React.createElement(Plus, null, "+")) : count, [count, max]);
   const [top, right] = useMemo(() => Array.isArray(offset) ? offset : [offset, offset], [offset]);
-  return value === 0 ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+  return count === 0 ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
     ref: ref
   }), children, /*#__PURE__*/React.createElement(Sized, {
     size: size

package/dist/esm/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","count","max","offset","size","children","rest","ref","value","createElement","Fragment","Array","isArray","_extends","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n  /**\n   * Number shown in the corner.\n   * @default 0\n   */\n  count?: number;\n  /**\n   * The max number.\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Offset of the badge.\n   * top/right | [top, right]\n   * @default undefined\n   */\n  offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n  position: relative;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\ninterface ValueProps {\n  top: string;\n  right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n  position: absolute;\n  top: ${(p) => p.top};\n  right: ${(p) => p.right};\n  transform: translate(50%, -50%);\n\n  height: ${HEIGHT_EM}em;\n  min-width: ${HEIGHT_EM}em;\n  padding: 0 0.3em;\n  border-radius: ${HEIGHT_EM / 2}em;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background-color: ${(p) => clr(p.theme.badgeColorBg)};\n  color: ${(p) => clr(p.theme.badgeColorText)};\n  border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n  line-height: 1;\n`;\n\nconst Plus = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n  (\n    { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n    ref\n  ) => {\n    const value = useMemo(\n      () =>\n        count > max ? (\n          <>\n            {max}\n            <Plus>+</Plus>\n          </>\n        ) : (\n          count\n        ),\n      [count, max]\n    );\n\n    const [top, right] = useMemo(\n      () => (Array.isArray(offset) ? offset : [offset, offset]),\n      [offset]\n    );\n\n    return value === 0 ? (\n      children\n    ) : (\n      <Container {...rest} ref={ref}>\n        {children}\n        <Sized size={size}>\n          <Value top={top} right={right}>\n            {value}\n          </Value>\n        </Sized>\n      </Container>\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAsBlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAI;AAC7B;AACA,CAAC;AAED,MAAMC,SAAS,GAAG,GAAG;AAErB,MAAMC,KAAK,GAAGV,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AAChE,IAAIF,UAAW;AACf,CAAC;AAMD,MAAMU,KAAK,GAAGX,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAc;AAC1E;AACA,SAAUS,CAAC,IAAKA,CAAC,CAACC,GAAI;AACtB,WAAYD,CAAC,IAAKA,CAAC,CAACE,KAAM;AAC1B;AACA;AACA,YAAYL,SAAU;AACtB,eAAeA,SAAU;AACzB;AACA,mBAAmBA,SAAS,GAAG,CAAE;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACC,YAAY,CAAE;AACvD,WAAYJ,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACE,cAAc,CAAE;AAC9C,sBAAuBL,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACG,OAAO,CAAE;AAClD;AACA,eAAgBN,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrB,MAAM,CAACQ,GAAI;AACxB,eAAgBI,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,KAAK,gBAAGjB,UAAU,CACtB,CACE;EAAEkB,KAAK,GAAG,CAAC;EAAEC,GAAG,GAAG,EAAE;EAAEC,MAAM,GAAG,GAAG;EAAEC,IAAI,GAAG,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACtEC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGxB,OAAO,CACnB,MACEiB,KAAK,GAAGC,GAAG,gBACTpB,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGR,GAAG,eACJpB,KAAA,CAAA2B,aAAA,CAACV,IAAI,QAAC,GAAO,CACb,CAAC,GAEHE,KACD,EACH,CAACA,KAAK,EAAEC,GAAG,CACb,CAAC;EAED,MAAM,CAACX,GAAG,EAAEC,KAAK,CAAC,GAAGR,OAAO,CAC1B,MAAO2B,KAAK,CAACC,OAAO,CAACT,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,EAAEA,MAAM,CAAE,EACzD,CAACA,MAAM,CACT,CAAC;EAED,OAAOK,KAAK,KAAK,CAAC,GAChBH,QAAQ,gBAERvB,KAAA,CAAA2B,aAAA,CAACxB,SAAS,EAAA4B,QAAA,KAAKP,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAC3BF,QAAQ,eACTvB,KAAA,CAAA2B,aAAA,CAACrB,KAAK;IAACgB,IAAI,EAAEA;EAAK,gBAChBtB,KAAA,CAAA2B,aAAA,CAACpB,KAAK;IAACE,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEA;EAAM,GAC3BgB,KACI,CACF,CACE,CACZ;AACH,CACF,CAAC;AAEDR,KAAK,CAACc,WAAW,GAAG,OAAO;AAE3B,eAAed,KAAK","ignoreList":[]}
+{"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","count","max","offset","size","children","rest","ref","value","createElement","Fragment","Array","isArray","_extends","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n  /**\n   * Number shown in the corner.\n   * @default 0\n   */\n  count?: number;\n  /**\n   * The max number.\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Offset of the badge.\n   * top/right | [top, right]\n   * @default undefined\n   */\n  offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n  position: relative;\n  display: flex;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\ninterface ValueProps {\n  top: string;\n  right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n  position: absolute;\n  top: ${(p) => p.top};\n  right: ${(p) => p.right};\n  transform: translate(50%, -50%);\n\n  height: ${HEIGHT_EM}em;\n  min-width: ${HEIGHT_EM}em;\n  padding: 0 0.3em;\n  border-radius: ${HEIGHT_EM / 2}em;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  background-color: ${(p) => clr(p.theme.badgeColorBg)};\n  color: ${(p) => clr(p.theme.badgeColorText)};\n  border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n  font-size: ${(p) => p.theme.sizes.small}em;\n  font-weight: 500;\n  line-height: 1;\n`;\n\nconst Plus = styled.div`\n  font-size: ${(p) => p.theme.sizes.small}em;\n  padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n  (\n    { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n    ref\n  ) => {\n    const value = useMemo(\n      () =>\n        count > max ? (\n          <>\n            {max}\n            <Plus>+</Plus>\n          </>\n        ) : (\n          count\n        ),\n      [count, max]\n    );\n\n    const [top, right] = useMemo(\n      () => (Array.isArray(offset) ? offset : [offset, offset]),\n      [offset]\n    );\n\n    return count === 0 ? (\n      children\n    ) : (\n      <Container {...rest} ref={ref}>\n        {children}\n        <Sized size={size}>\n          <Value top={top} right={right}>\n            {value}\n          </Value>\n        </Sized>\n      </Container>\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAsBlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAI;AAC7B;AACA;AACA,CAAC;AAED,MAAMC,SAAS,GAAG,GAAG;AAErB,MAAMC,KAAK,GAAGV,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AAChE,IAAIF,UAAW;AACf,CAAC;AAMD,MAAMU,KAAK,GAAGX,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAc;AAC1E;AACA,SAAUS,CAAC,IAAKA,CAAC,CAACC,GAAI;AACtB,WAAYD,CAAC,IAAKA,CAAC,CAACE,KAAM;AAC1B;AACA;AACA,YAAYL,SAAU;AACtB,eAAeA,SAAU;AACzB;AACA,mBAAmBA,SAAS,GAAG,CAAE;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACC,YAAY,CAAE;AACvD,WAAYJ,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACE,cAAc,CAAE;AAC9C,sBAAuBL,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACG,OAAO,CAAE;AAClD;AACA,eAAgBN,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrB,MAAM,CAACQ,GAAI;AACxB,eAAgBI,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,KAAK,gBAAGjB,UAAU,CACtB,CACE;EAAEkB,KAAK,GAAG,CAAC;EAAEC,GAAG,GAAG,EAAE;EAAEC,MAAM,GAAG,GAAG;EAAEC,IAAI,GAAG,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACtEC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGxB,OAAO,CACnB,MACEiB,KAAK,GAAGC,GAAG,gBACTpB,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGR,GAAG,eACJpB,KAAA,CAAA2B,aAAA,CAACV,IAAI,QAAC,GAAO,CACb,CAAC,GAEHE,KACD,EACH,CAACA,KAAK,EAAEC,GAAG,CACb,CAAC;EAED,MAAM,CAACX,GAAG,EAAEC,KAAK,CAAC,GAAGR,OAAO,CAC1B,MAAO2B,KAAK,CAACC,OAAO,CAACT,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,EAAEA,MAAM,CAAE,EACzD,CAACA,MAAM,CACT,CAAC;EAED,OAAOF,KAAK,KAAK,CAAC,GAChBI,QAAQ,gBAERvB,KAAA,CAAA2B,aAAA,CAACxB,SAAS,EAAA4B,QAAA,KAAKP,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAC3BF,QAAQ,eACTvB,KAAA,CAAA2B,aAAA,CAACrB,KAAK;IAACgB,IAAI,EAAEA;EAAK,gBAChBtB,KAAA,CAAA2B,aAAA,CAACpB,KAAK;IAACE,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEA;EAAM,GAC3BgB,KACI,CACF,CACE,CACZ;AACH,CACF,CAAC;AAEDR,KAAK,CAACc,WAAW,GAAG,OAAO;AAE3B,eAAed,KAAK","ignoreList":[]}

package/dist/types/Badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,GAAG,CAAC,EAAE,MAAM,CAAC;IAMb,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,mFAoCV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,GAAG,CAAC,EAAE,MAAM,CAAC;IAMb,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAkDD,QAAA,MAAM,KAAK,mFAoCV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.244",
+  "version": "1.0.246",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -59,5 +59,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "d0565d7592fff84723233b42ec230acbaa2103bb"
+  "gitHead": "702b9f0b750a636988108844a1ee98f0eace5300"
 }

package/src/Badge/index.tsx

@@ -26,6 +26,7 @@ export interface BadgeProps extends JsxDivProps, WithSize {
 
 const Container = styled.div`
   position: relative;
+  display: flex;
 `;
 
 const HEIGHT_EM = 1.5;
@@ -94,7 +95,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
       [offset]
     );
 
-    return value === 0 ? (
+    return count === 0 ? (
       children
     ) : (
       <Container {...rest} ref={ref}>