@semcore/base-components 17.0.0-prerelease.27 → 17.0.0-prerelease.29

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [17.0.0] - 2026-02-23
+## [17.0.0] - 2026-02-27
 
 ### BREAK
 
@@ -11,89 +11,105 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 - **outside-click**: Removed using `getNodeByRef`. Use `React.RefObject` instead.
 - **scroll-area**: Removed using `getNodeByRef`. Use `React.RefObject` instead.
 
-### Added
-
-- `inset` property for the Box component.
-
-### Changed
-
-- `Hint` now has slicker and more compact styles.
-
 ## [16.4.2] - 2025-12-01
 
 ### Fixed
 
-- **popper**: The "Popper" with focus or hover interaction opens after moving to the
+- The "Popper" with focus or hover interaction opens after moving to the
 trigger from the popper using the Tab key.
 
 ## [16.4.1] - 2025-10-17
 
 ### Fixed
 
-- **scroll-area**: Mouse interaction with elements inside a `ScrollArea.Container` when the container has focus-visible.
+- Mouse interaction with elements inside a `ScrollArea.Container` when the container has focus-visible.
 
 ## [16.4.0] - 2025-10-03
 
 ### Changed
 
-- **flex-box**: Styles for `:focus-visible`.
-- **flex-box**: Border-radius for invalid pattern in InvalidStateBox.
+- Styles for `:focus-visible` in Box and ScrollArea.
+- Border-radius for invalid pattern in InvalidStateBox.
 
 ## [16.3.0] - 2025-09-20
 
 ### Added
 
-- **flex-box**: Ability to use two tags in `tag` property. First for some logic like `Ellipsis` or `Select.Trigger` and second for real `html` tag.
+- Ability to use two tags in `tag` property. First for some logic like `Ellipsis` or `Select.Trigger` and second for real `html` tag.
 
 ## [16.2.4] - 2025-09-12
 
 ### Changed
 
-- **popper**: Don't open popper `onFocus` if last interaction was with mouse.
+- Don't open popper `onFocus` if last interaction was with mouse.
+
+## [16.2.3] - 2025-09-17
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/core` [16.2.0 ~> 16.3.0]).
+
+## [16.2.2] - 2025-09-05
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/core` [16.1.1 ~> 16.2.0]).
 
 ## [16.2.1] - 2025-08-29
 
 ### Changed
 
-- **popper**: Type description for `PopperPopperProps`/`PopperProps`/`ScrollAreaProps`/`ScrollBarProps`/`BoxProps`.
+- Type description for `PopperPopperProps`/`PopperProps`/`ScrollAreaProps`/`ScrollBarProps`/`BoxProps`.
 
 ## [16.2.0] - 2025-08-08
 
 ### Added
 
-- **flex-box**: `text-align` CSS property to `Box` component.
+- `text-align` CSS property to `Box` component.
+
+## [16.1.2] - 2025-07-23
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/core` [16.0.3 ~> 16.0.4]).
+
+## [16.1.1] - 2025-07-04
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/core` [16.0.1 ~> 16.0.3]).
 
 ## [16.1.0] - 2025-06-20
 
 ### Added
 
-- **scroll-area**: New properties - `shadowSize` and `shadowTheme` for customize Shadows.
+- New properties - `shadowSize` and `shadowTheme` for customize Shadows.
 
 ## [16.0.2] - 2025-06-12
 
 ### Added
 
-- **scroll-area**: ResizeObserver for the `Wrapper` component in the `ScrollArea`.
+- ResizeObserver for the `Wrapper` component in the `ScrollArea`.
 
 ### Changed
 
-- **popper**: `keyboardFocus` to `focus` event for popper triggers with `hover` interaction.
+- `keyboardFocus` to `focus` event for popper triggers with `hover` interaction.
 
 ## [16.0.1] - 2025-05-26
 
 ### Fixed
 
-- **animation**: `Delay` doesn't work for the `Collapse` component.
+- `Delay` doesn't work for the `Collapse` component.
 
 ## [16.0.0] - 2025-05-19
 
 ### Added
 
 - Package with base components.
-- **flex-box**: `outline` for all Box'es with `:focus-visible`.
-- **scroll-area**: `topOffset` and `bottomOffset` to Bars.
-- **portal**: `nodeToMount` property.
+- `outline` for all Box'es with `:focus-visible`.
+- `topOffset` and `bottomOffset` to Bars in ScrollArea.
+- `nodeToMount` property to `Portal`.
 
 ### Fixed
 
-- **popper**: `keydown` event was propagated from Popper.
+- `keydown` event was propagated from `Popper`.

package/lib/cjs/components/flex-box/Box/useBox.js

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useBox;
-exports.removeUndefinedKeys = removeUndefinedKeys;
 var _core = require("@semcore/core");
+var _indentStyles = require("@semcore/core/lib/utils/indentStyles");
 var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _utils = require("../utils");
 /*!__reshadow-styles__:"../style/use-box.shadow.css"*/
 const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{z-index:1;outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;outline-offset:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;transition-property:outline-color,outline-width,outline-offset}.___SBox_1suvb_gg_._inAfterOutline_false_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible,.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_.__invertOutline_1suvb_gg_:focus-visible::after{outline-color:var(--intergalactic-keyboard-focus-invert-outline, rgba(255, 255, 255, 0.8))}.___SBox_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{position:absolute;display:block;content:\"\";top:0;right:0;bottom:0;left:0;top:var(0);right:var(0);bottom:var(0);left:var(0)}.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_false_1suvb_gg_:focus-visible,.___SBoxInnerOutline_1suvb_gg_._inAfterOutline_true_1suvb_gg_:focus-visible::after{outline-offset:-2px}.___SBoxSizing_1suvb_gg_{box-sizing:border-box}.___SBoxInline_1suvb_gg_{display:inline-block}", /*__inner_css_end__*/"1suvb_gg_"),
 /*__reshadow_css_end__*/
@@ -23,56 +22,35 @@ const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_star
   "__SBox": "___SBox_1suvb_gg_",
   "_invertOutline": "__invertOutline_1suvb_gg_"
 });
-function removeUndefinedKeys(obj) {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    if (value !== undefined) {
-      acc[key] = value;
-    }
-    return acc;
-  }, {});
-}
-function getSize(size) {
-  if (typeof size !== 'number') {
-    return size;
-  }
-  if (size < 1) {
-    return `${100 * size}%`;
-  }
-  if (size >= 1) {
-    return `${size}px`;
-  }
-}
-
 /** @deprecated */
-
 function calculateIndentStyles(props, scaleIndent) {
-  return removeUndefinedKeys({
+  return (0, _indentStyles.removeUndefinedKeys)({
     display: props['display'],
-    width: getSize(props['w']),
-    height: getSize(props['h']),
-    minWidth: getSize(props['wMin']),
-    maxWidth: getSize(props['wMax']),
-    minHeight: getSize(props['hMin']),
-    maxHeight: getSize(props['hMax']),
+    width: (0, _indentStyles.getSize)(props['w']),
+    height: (0, _indentStyles.getSize)(props['h']),
+    minWidth: (0, _indentStyles.getSize)(props['wMin']),
+    maxWidth: (0, _indentStyles.getSize)(props['wMax']),
+    minHeight: (0, _indentStyles.getSize)(props['hMin']),
+    maxHeight: (0, _indentStyles.getSize)(props['hMax']),
     position: props['position'],
-    top: getSize(props['top']),
-    left: getSize(props['left']),
-    bottom: getSize(props['bottom']),
-    right: getSize(props['right']),
+    top: (0, _indentStyles.getSize)(props['top']),
+    left: (0, _indentStyles.getSize)(props['left']),
+    bottom: (0, _indentStyles.getSize)(props['bottom']),
+    right: (0, _indentStyles.getSize)(props['right']),
     inset: props.inset,
     flex: props.flex,
     zIndex: props.zIndex,
     textAlign: props.textAlign,
-    margin: (0, _utils.getAutoOrScaleIndent)(props['m'], scaleIndent),
-    marginTop: (0, _utils.getAutoOrScaleIndent)(props['mt'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['my'], scaleIndent),
-    marginBottom: (0, _utils.getAutoOrScaleIndent)(props['mb'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['my'], scaleIndent),
-    marginLeft: (0, _utils.getAutoOrScaleIndent)(props['ml'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['mx'], scaleIndent),
-    marginRight: (0, _utils.getAutoOrScaleIndent)(props['mr'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['mx'], scaleIndent),
-    padding: (0, _utils.getAutoOrScaleIndent)(props['p'], scaleIndent),
-    paddingTop: (0, _utils.getAutoOrScaleIndent)(props['pt'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['py'], scaleIndent),
-    paddingBottom: (0, _utils.getAutoOrScaleIndent)(props['pb'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['py'], scaleIndent),
-    paddingLeft: (0, _utils.getAutoOrScaleIndent)(props['pl'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['px'], scaleIndent),
-    paddingRight: (0, _utils.getAutoOrScaleIndent)(props['pr'], scaleIndent) || (0, _utils.getAutoOrScaleIndent)(props['px'], scaleIndent)
+    margin: (0, _indentStyles.getAutoOrScaleIndent)(props['m'], scaleIndent),
+    marginTop: (0, _indentStyles.getAutoOrScaleIndent)(props['mt'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
+    marginBottom: (0, _indentStyles.getAutoOrScaleIndent)(props['mb'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['my'], scaleIndent),
+    marginLeft: (0, _indentStyles.getAutoOrScaleIndent)(props['ml'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent),
+    marginRight: (0, _indentStyles.getAutoOrScaleIndent)(props['mr'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['mx'], scaleIndent),
+    padding: (0, _indentStyles.getAutoOrScaleIndent)(props['p'], scaleIndent),
+    paddingTop: (0, _indentStyles.getAutoOrScaleIndent)(props['pt'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['py'], scaleIndent),
+    paddingBottom: (0, _indentStyles.getAutoOrScaleIndent)(props['pb'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['py'], scaleIndent),
+    paddingLeft: (0, _indentStyles.getAutoOrScaleIndent)(props['pl'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['px'], scaleIndent),
+    paddingRight: (0, _indentStyles.getAutoOrScaleIndent)(props['pr'], scaleIndent) || (0, _indentStyles.getAutoOrScaleIndent)(props['px'], scaleIndent)
   });
 }
 function useBox(props, ref) {

package/lib/cjs/components/flex-box/Box/useBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBox.js","names":["_core","require","_propsForElement","_interopRequireDefault","_classnames","_react","_utils","style","sstyled","insert","removeUndefinedKeys","obj","Object","entries","reduce","acc","key","value","undefined","getSize","size","calculateIndentStyles","props","scaleIndent","display","width","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","other","indentStyles","React","useMemo","styles","Fragment","children","cn","SBoxSizing","SBoxInline","SBoxInnerOutline","assign","propsForElement"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\nimport { getAutoOrScaleIndent } from '../utils';\n\nexport function removeUndefinedKeys<T extends {}>(obj: T) {\n  return Object.entries(obj).reduce((acc: any, [key, value]) => {\n    if (value !== undefined) {\n      acc[key] = value;\n    }\n    return acc;\n  }, {});\n}\n\nfunction getSize(size: any) {\n  if (typeof size !== 'number') {\n    return size;\n  }\n  if (size < 1) {\n    return `${100 * size}%`;\n  }\n  if (size >= 1) {\n    return `${size}px`;\n  }\n}\n\nexport type BoxProps = IStyledProps & {\n  /**\n   * CSS `display` property\n   */\n  display?: Property.Display;\n\n  /** Sets the `inline-block` property */\n  inline?: boolean;\n\n  /** CSS `box-sizing: border-box` property */\n  boxSizing?: boolean | 'border-box';\n\n  /** CSS `flex` property */\n  flex?: Property.Flex<string>;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /** CSS `padding` property */\n  p?: number | string;\n\n  /** CSS `padding-top` property */\n  pt?: number | string;\n\n  /** CSS `padding-right` property */\n  pr?: number | string;\n\n  /** CSS `padding-bottom` property */\n  pb?: number | string;\n\n  /** CSS `padding-left` property */\n  pl?: number | string;\n\n  /** CSS `padding-left` and `padding-right` property */\n  px?: number | string;\n\n  /** CSS `padding-top` and `padding-bottom` property */\n  py?: number | string;\n\n  /**\n   * CSS `width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  w?: number | string;\n\n  /**\n   * CSS `min-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMin?: number | string;\n\n  /**\n   * CSS `max-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMax?: number | string;\n\n  /**\n   * CSS `height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  h?: number | string;\n\n  /**\n   * CSS `min-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMin?: number | string;\n\n  /**\n   * CSS `max-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMax?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n\n  /**\n   * Flag for render outline inside box\n   * @default false\n   */\n  innerOutline?: boolean;\n\n  /**\n   * Flag for render inverted outline\n   * @default false\n   */\n  invertOutline?: boolean;\n\n  /**\n   * Flag for render outline in the ::after element\n   * @default false\n   */\n  inAfterOutline?: boolean;\n  /** CSS `position` property */\n  position?: Property.Position;\n  /** CSS `top` property */\n  top?: number | string;\n  /** CSS `left` property */\n  left?: number | string;\n  /** CSS `bottom` property */\n  bottom?: number | string;\n  /** CSS `right` property */\n  right?: number | string;\n  /** CSS `inset` property */\n  inset?: string;\n  /** CSS `z-index` property */\n  zIndex?: number;\n  /** CSS `text-align` property */\n  textAlign?: Property.TextAlign;\n  /** Box content */\n  children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n  /**\n   *  HTML tag name for the displayed item\n   * @default div\n   */\n  tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    display: props['display'],\n    width: getSize(props['w']),\n    height: getSize(props['h']),\n    minWidth: getSize(props['wMin']),\n    maxWidth: getSize(props['wMax']),\n    minHeight: getSize(props['hMin']),\n    maxHeight: getSize(props['hMax']),\n    position: props['position'],\n    top: getSize(props['top']),\n    left: getSize(props['left']),\n    bottom: getSize(props['bottom']),\n    right: getSize(props['right']),\n    inset: props.inset,\n    flex: props.flex,\n    zIndex: props.zIndex,\n    textAlign: props.textAlign,\n\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n    padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n    paddingTop:\n      getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingBottom:\n      getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingLeft:\n      getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n    paddingRight:\n      getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n  });\n}\n\nexport default function useBox<T extends BoxProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const {\n    tag: Tag = 'div',\n    className,\n    style: styleProp,\n    scaleIndent = 4,\n    display,\n    boxSizing,\n    inline,\n    innerOutline,\n    invertOutline,\n    inAfterOutline,\n    flex,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    css,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n    ...other\n  } = props as any;\n\n  const indentStyles: Properties = React.useMemo(() => {\n    return calculateIndentStyles(props, scaleIndent);\n  }, [\n    scaleIndent,\n    display,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    flex,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      ref,\n      'className':\n        cn(\n          styles.cn('SBox', {\n            SBoxSizing: boxSizing,\n            SBoxInline: inline,\n            SBoxInnerOutline: innerOutline,\n            inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n            invertOutline,\n          }).className,\n          className,\n        ) || undefined,\n      'style': Object.assign({}, styleProp, css, indentStyles),\n      'data-ui-name': 'Box',\n      ...propsForElement(other, Tag),\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useBox.js","names":["_core","require","_indentStyles","_propsForElement","_interopRequireDefault","_classnames","_react","style","sstyled","insert","calculateIndentStyles","props","scaleIndent","removeUndefinedKeys","display","width","getSize","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","getAutoOrScaleIndent","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","other","indentStyles","React","useMemo","styles","Fragment","children","cn","SBoxSizing","SBoxInline","SBoxInnerOutline","undefined","Object","assign","propsForElement"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\n\nexport type BoxProps = IStyledProps & {\n  /**\n   * CSS `display` property\n   */\n  display?: Property.Display;\n\n  /** Sets the `inline-block` property */\n  inline?: boolean;\n\n  /** CSS `box-sizing: border-box` property */\n  boxSizing?: boolean | 'border-box';\n\n  /** CSS `flex` property */\n  flex?: Property.Flex<string>;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /** CSS `padding` property */\n  p?: number | string;\n\n  /** CSS `padding-top` property */\n  pt?: number | string;\n\n  /** CSS `padding-right` property */\n  pr?: number | string;\n\n  /** CSS `padding-bottom` property */\n  pb?: number | string;\n\n  /** CSS `padding-left` property */\n  pl?: number | string;\n\n  /** CSS `padding-left` and `padding-right` property */\n  px?: number | string;\n\n  /** CSS `padding-top` and `padding-bottom` property */\n  py?: number | string;\n\n  /**\n   * CSS `width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  w?: number | string;\n\n  /**\n   * CSS `min-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMin?: number | string;\n\n  /**\n   * CSS `max-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMax?: number | string;\n\n  /**\n   * CSS `height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  h?: number | string;\n\n  /**\n   * CSS `min-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMin?: number | string;\n\n  /**\n   * CSS `max-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMax?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n\n  /**\n   * Flag for render outline inside box\n   * @default false\n   */\n  innerOutline?: boolean;\n\n  /**\n   * Flag for render inverted outline\n   * @default false\n   */\n  invertOutline?: boolean;\n\n  /**\n   * Flag for render outline in the ::after element\n   * @default false\n   */\n  inAfterOutline?: boolean;\n  /** CSS `position` property */\n  position?: Property.Position;\n  /** CSS `top` property */\n  top?: number | string;\n  /** CSS `left` property */\n  left?: number | string;\n  /** CSS `bottom` property */\n  bottom?: number | string;\n  /** CSS `right` property */\n  right?: number | string;\n  /** CSS `inset` property */\n  inset?: string;\n  /** CSS `z-index` property */\n  zIndex?: number;\n  /** CSS `text-align` property */\n  textAlign?: Property.TextAlign;\n  /** Box content */\n  children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n  /**\n   *  HTML tag name for the displayed item\n   * @default div\n   */\n  tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    display: props['display'],\n    width: getSize(props['w']),\n    height: getSize(props['h']),\n    minWidth: getSize(props['wMin']),\n    maxWidth: getSize(props['wMax']),\n    minHeight: getSize(props['hMin']),\n    maxHeight: getSize(props['hMax']),\n    position: props['position'],\n    top: getSize(props['top']),\n    left: getSize(props['left']),\n    bottom: getSize(props['bottom']),\n    right: getSize(props['right']),\n    inset: props.inset,\n    flex: props.flex,\n    zIndex: props.zIndex,\n    textAlign: props.textAlign,\n\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n    padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n    paddingTop:\n      getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingBottom:\n      getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingLeft:\n      getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n    paddingRight:\n      getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n  });\n}\n\nexport default function useBox<T extends BoxProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const {\n    tag: Tag = 'div',\n    className,\n    style: styleProp,\n    scaleIndent = 4,\n    display,\n    boxSizing,\n    inline,\n    innerOutline,\n    invertOutline,\n    inAfterOutline,\n    flex,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    css,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n    ...other\n  } = props as any;\n\n  const indentStyles: Properties = React.useMemo(() => {\n    return calculateIndentStyles(props, scaleIndent);\n  }, [\n    scaleIndent,\n    display,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    flex,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      ref,\n      'className':\n        cn(\n          styles.cn('SBox', {\n            SBoxSizing: boxSizing,\n            SBoxInline: inline,\n            SBoxInnerOutline: innerOutline,\n            inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n            invertOutline,\n          }).className,\n          className,\n        ) || undefined,\n      'style': Object.assign({}, styleProp, css, indentStyles),\n      'data-ui-name': 'Box',\n      ...propsForElement(other, Tag),\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/flex-box/Flex/useFlex.js

@@ -1,16 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useFlex;
 var _core = require("@semcore/core");
+var _indentStyles = require("@semcore/core/lib/utils/indentStyles");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _useBox = _interopRequireWildcard(require("../Box/useBox"));
-var _utils = require("../utils");
+var _useBox = _interopRequireDefault(require("../Box/useBox"));
 /*!__reshadow-styles__:"../style/use-flex.shadow.css"*/
 const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SFlex_fqcaq_gg_{display:flex}.___SFlex_fqcaq_gg_.__inline_fqcaq_gg_{display:inline-flex}", /*__inner_css_end__*/"fqcaq_gg_"),
 /*__reshadow_css_end__*/
@@ -24,14 +23,14 @@ function calculateFlexStyles(props) {
     column: 'column-reverse'
   };
   const scaleIndent = props.scaleIndent ?? 4;
-  return (0, _useBox.removeUndefinedKeys)({
+  return (0, _indentStyles.removeUndefinedKeys)({
     alignItems: props.alignItems,
     alignContent: props.alignContent,
     justifyContent: props.justifyContent,
     flexWrap: props.flexWrap ? `wrap${props.reverse ? '-reverse' : ''}` : undefined,
     flexDirection: props.reverse && DirectionReverse[props.direction] || props.direction,
-    rowGap: (0, _utils.getAutoOrScaleIndent)(props.rowGap || props.gap, scaleIndent),
-    columnGap: (0, _utils.getAutoOrScaleIndent)(props.columnGap || props.gap, scaleIndent)
+    rowGap: (0, _indentStyles.getAutoOrScaleIndent)(props.rowGap || props.gap, scaleIndent),
+    columnGap: (0, _indentStyles.getAutoOrScaleIndent)(props.columnGap || props.gap, scaleIndent)
   });
 }
 function useFlex(props, ref) {

package/lib/cjs/components/flex-box/Flex/useFlex.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlex.js","names":["_core","require","_classnames","_interopRequireDefault","_react","_useBox","_interopRequireWildcard","_utils","style","sstyled","insert","calculateFlexStyles","props","DirectionReverse","row","column","scaleIndent","removeUndefinedKeys","alignItems","alignContent","justifyContent","flexWrap","reverse","undefined","flexDirection","direction","rowGap","getAutoOrScaleIndent","gap","columnGap","useFlex","ref","Tag","className","styleProp","other","useBox","inline","flexStyles","React","useMemo","styles","Fragment","children","cn","Object","assign"],"sources":["../../../../../src/components/flex-box/Flex/useFlex.tsx"],"sourcesContent":["import { sstyled } from '@semcore/core';\nimport cn from 'classnames';\nimport type { Property, Properties } from 'csstype';\nimport React from 'react';\n\nimport useBox, { type BoxProps, removeUndefinedKeys } from '../Box/useBox';\nimport style from '../style/use-flex.shadow.css';\nimport { getAutoOrScaleIndent } from '../utils';\n\nexport type FlexProps = BoxProps & {\n  /**\n   * It manages the `inline-flex` property\n   */\n  inline?: boolean;\n  /**\n   * Adds the `reverse` property to `flex-direction`\n   */\n  reverse?: boolean;\n  /**\n   * It manages the `flex-wrap` property\n   */\n  flexWrap?: boolean;\n  /**\n   * It manages the `flex-direction` property\n   */\n  direction?: Property.FlexDirection;\n  /**\n   * It manages the `align-items` property\n   */\n  alignItems?: Property.AlignItems;\n  /**\n   * It manages the `align-content` property\n   */\n  alignContent?: Property.AlignContent;\n  /**\n   * CSS `justify-content` property\n   */\n  justifyContent?: Property.JustifyContent;\n  /**\n   * CSS `gap` property\n   */\n  gap?: Property.Gap<number>;\n  /**\n   * CSS `gap` property\n   */\n  rowGap?: Property.RowGap<number>;\n  /**\n   * CSS `gap` property\n   */\n  columnGap?: Property.ColumnGap<number>;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateFlexStyles(props: any) {\n  const DirectionReverse: Record<string, string> = {\n    row: 'row-reverse',\n    column: 'column-reverse',\n  };\n\n  const scaleIndent = props.scaleIndent ?? 4;\n\n  return removeUndefinedKeys({\n    alignItems: props.alignItems,\n    alignContent: props.alignContent,\n    justifyContent: props.justifyContent,\n    flexWrap: props.flexWrap ? `wrap${props.reverse ? '-reverse' : ''}` : undefined,\n    flexDirection: (props.reverse && DirectionReverse[props.direction]) || props.direction,\n    rowGap: getAutoOrScaleIndent(props.rowGap || props.gap, scaleIndent),\n    columnGap: getAutoOrScaleIndent(props.columnGap || props.gap, scaleIndent),\n  });\n}\n\nexport default function useFlex<T extends FlexProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const [Tag, { className, style: styleProp, ...other }] = useBox(\n    {\n      'data-ui-name': 'Flex',\n      ...props,\n      'inline': false,\n    },\n    ref,\n  );\n  const {\n    inline,\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  } = props;\n\n  const flexStyles: Properties = React.useMemo(() => {\n    return calculateFlexStyles(props);\n  }, [\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      className:\n        cn(\n          styles.cn('SFlex', {\n            inline: inline,\n          }).className,\n          className,\n        ) || undefined,\n      style: Object.assign({}, styleProp, flexStyles),\n      ...other,\n    },\n  ];\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAEA,IAAAI,OAAA,GAAAC,uBAAA,CAAAL,OAAA;AAEA,IAAAM,MAAA,GAAAN,OAAA;AAAgD;AAAA,MAAAO,KAAA,8BAAAR,KAAA,CAAAS,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAmDhD,SAASC,mBAAmBA,CAACC,KAAU,EAAE;EACvC,MAAMC,gBAAwC,GAAG;IAC/CC,GAAG,EAAE,aAAa;IAClBC,MAAM,EAAE;EACV,CAAC;EAED,MAAMC,WAAW,GAAGJ,KAAK,CAACI,WAAW,IAAI,CAAC;EAE1C,OAAO,IAAAC,2BAAmB,EAAC;IACzBC,UAAU,EAAEN,KAAK,CAACM,UAAU;IAC5BC,YAAY,EAAEP,KAAK,CAACO,YAAY;IAChCC,cAAc,EAAER,KAAK,CAACQ,cAAc;IACpCC,QAAQ,EAAET,KAAK,CAACS,QAAQ,GAAG,OAAOT,KAAK,CAACU,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,GAAGC,SAAS;IAC/EC,aAAa,EAAGZ,KAAK,CAACU,OAAO,IAAIT,gBAAgB,CAACD,KAAK,CAACa,SAAS,CAAC,IAAKb,KAAK,CAACa,SAAS;IACtFC,MAAM,EAAE,IAAAC,2BAAoB,EAACf,KAAK,CAACc,MAAM,IAAId,KAAK,CAACgB,GAAG,EAAEZ,WAAW,CAAC;IACpEa,SAAS,EAAE,IAAAF,2BAAoB,EAACf,KAAK,CAACiB,SAAS,IAAIjB,KAAK,CAACgB,GAAG,EAAEZ,WAAW;EAC3E,CAAC,CAAC;AACJ;AAEe,SAASc,OAAOA,CAC7BlB,KAAQ,EACRmB,GAA2B,EACQ;EACnC,MAAM,CAACC,GAAG,EAAE;IAAEC,SAAS;IAAEzB,KAAK,EAAE0B,SAAS;IAAE,GAAGC;EAAM,CAAC,CAAC,GAAG,IAAAC,eAAM,EAC7D;IACE,cAAc,EAAE,MAAM;IACtB,GAAGxB,KAAK;IACR,QAAQ,EAAE;EACZ,CAAC,EACDmB,GACF,CAAC;EACD,MAAM;IACJM,MAAM;IACNhB,QAAQ;IACRI,SAAS;IACTH,OAAO;IACPJ,UAAU;IACVC,YAAY;IACZC,cAAc;IACdQ,GAAG;IACHF,MAAM;IACNG,SAAS;IACTb;EACF,CAAC,GAAGJ,KAAK;EAET,MAAM0B,UAAsB,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAM;IACjD,OAAO7B,mBAAmB,CAACC,KAAK,CAAC;EACnC,CAAC,EAAE,CACDS,QAAQ,EACRI,SAAS,EACTH,OAAO,EACPJ,UAAU,EACVC,YAAY,EACZC,cAAc,EACdQ,GAAG,EACHF,MAAM,EACNG,SAAS,EACTb,WAAW,CACZ,CAAC;EAEF,MAAMyB,MAAM,GAAG,IAAAhC,aAAO,EAACD,KAAK,CAAC;EAE7B,IAAIwB,GAAG,KAAKO,cAAK,CAACG,QAAQ,EAAE,OAAO,CAACH,cAAK,CAACG,QAAQ,EAAE;IAAEC,QAAQ,EAAE/B,KAAK,CAAC+B;EAAS,CAAC,CAAC;EAEjF,OAAO,CACLX,GAAG,EACH;IACEC,SAAS,EACP,IAAAW,mBAAE,EACAH,MAAM,CAACG,EAAE,CAAC,OAAO,EAAE;MACjBP,MAAM,EAAEA;IACV,CAAC,CAAC,CAACJ,SAAS,EACZA,SACF,CAAC,IAAIV,SAAS;IAChBf,KAAK,EAAEqC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEZ,SAAS,EAAEI,UAAU,CAAC;IAC/C,GAAGH;EACL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"file":"useFlex.js","names":["_core","require","_indentStyles","_classnames","_interopRequireDefault","_react","_useBox","style","sstyled","insert","calculateFlexStyles","props","DirectionReverse","row","column","scaleIndent","removeUndefinedKeys","alignItems","alignContent","justifyContent","flexWrap","reverse","undefined","flexDirection","direction","rowGap","getAutoOrScaleIndent","gap","columnGap","useFlex","ref","Tag","className","styleProp","other","useBox","inline","flexStyles","React","useMemo","styles","Fragment","children","cn","Object","assign"],"sources":["../../../../../src/components/flex-box/Flex/useFlex.tsx"],"sourcesContent":["import { sstyled } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys } from '@semcore/core/lib/utils/indentStyles';\nimport cn from 'classnames';\nimport type { Property, Properties } from 'csstype';\nimport React from 'react';\n\nimport useBox, { type BoxProps } from '../Box/useBox';\nimport style from '../style/use-flex.shadow.css';\n\nexport type FlexProps = BoxProps & {\n  /**\n   * It manages the `inline-flex` property\n   */\n  inline?: boolean;\n  /**\n   * Adds the `reverse` property to `flex-direction`\n   */\n  reverse?: boolean;\n  /**\n   * It manages the `flex-wrap` property\n   */\n  flexWrap?: boolean;\n  /**\n   * It manages the `flex-direction` property\n   */\n  direction?: Property.FlexDirection;\n  /**\n   * It manages the `align-items` property\n   */\n  alignItems?: Property.AlignItems;\n  /**\n   * It manages the `align-content` property\n   */\n  alignContent?: Property.AlignContent;\n  /**\n   * CSS `justify-content` property\n   */\n  justifyContent?: Property.JustifyContent;\n  /**\n   * CSS `gap` property\n   */\n  gap?: Property.Gap<number>;\n  /**\n   * CSS `gap` property\n   */\n  rowGap?: Property.RowGap<number>;\n  /**\n   * CSS `gap` property\n   */\n  columnGap?: Property.ColumnGap<number>;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateFlexStyles(props: any) {\n  const DirectionReverse: Record<string, string> = {\n    row: 'row-reverse',\n    column: 'column-reverse',\n  };\n\n  const scaleIndent = props.scaleIndent ?? 4;\n\n  return removeUndefinedKeys({\n    alignItems: props.alignItems,\n    alignContent: props.alignContent,\n    justifyContent: props.justifyContent,\n    flexWrap: props.flexWrap ? `wrap${props.reverse ? '-reverse' : ''}` : undefined,\n    flexDirection: (props.reverse && DirectionReverse[props.direction]) || props.direction,\n    rowGap: getAutoOrScaleIndent(props.rowGap || props.gap, scaleIndent),\n    columnGap: getAutoOrScaleIndent(props.columnGap || props.gap, scaleIndent),\n  });\n}\n\nexport default function useFlex<T extends FlexProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const [Tag, { className, style: styleProp, ...other }] = useBox(\n    {\n      'data-ui-name': 'Flex',\n      ...props,\n      'inline': false,\n    },\n    ref,\n  );\n  const {\n    inline,\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  } = props;\n\n  const flexStyles: Properties = React.useMemo(() => {\n    return calculateFlexStyles(props);\n  }, [\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      className:\n        cn(\n          styles.cn('SFlex', {\n            inline: inline,\n          }).className,\n          className,\n        ) || undefined,\n      style: Object.assign({}, styleProp, flexStyles),\n      ...other,\n    },\n  ];\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAEA,IAAAK,OAAA,GAAAF,sBAAA,CAAAH,OAAA;AAAsD;AAAA,MAAAM,KAAA,8BAAAP,KAAA,CAAAQ,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAoDtD,SAASC,mBAAmBA,CAACC,KAAU,EAAE;EACvC,MAAMC,gBAAwC,GAAG;IAC/CC,GAAG,EAAE,aAAa;IAClBC,MAAM,EAAE;EACV,CAAC;EAED,MAAMC,WAAW,GAAGJ,KAAK,CAACI,WAAW,IAAI,CAAC;EAE1C,OAAO,IAAAC,iCAAmB,EAAC;IACzBC,UAAU,EAAEN,KAAK,CAACM,UAAU;IAC5BC,YAAY,EAAEP,KAAK,CAACO,YAAY;IAChCC,cAAc,EAAER,KAAK,CAACQ,cAAc;IACpCC,QAAQ,EAAET,KAAK,CAACS,QAAQ,GAAG,OAAOT,KAAK,CAACU,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,GAAGC,SAAS;IAC/EC,aAAa,EAAGZ,KAAK,CAACU,OAAO,IAAIT,gBAAgB,CAACD,KAAK,CAACa,SAAS,CAAC,IAAKb,KAAK,CAACa,SAAS;IACtFC,MAAM,EAAE,IAAAC,kCAAoB,EAACf,KAAK,CAACc,MAAM,IAAId,KAAK,CAACgB,GAAG,EAAEZ,WAAW,CAAC;IACpEa,SAAS,EAAE,IAAAF,kCAAoB,EAACf,KAAK,CAACiB,SAAS,IAAIjB,KAAK,CAACgB,GAAG,EAAEZ,WAAW;EAC3E,CAAC,CAAC;AACJ;AAEe,SAASc,OAAOA,CAC7BlB,KAAQ,EACRmB,GAA2B,EACQ;EACnC,MAAM,CAACC,GAAG,EAAE;IAAEC,SAAS;IAAEzB,KAAK,EAAE0B,SAAS;IAAE,GAAGC;EAAM,CAAC,CAAC,GAAG,IAAAC,eAAM,EAC7D;IACE,cAAc,EAAE,MAAM;IACtB,GAAGxB,KAAK;IACR,QAAQ,EAAE;EACZ,CAAC,EACDmB,GACF,CAAC;EACD,MAAM;IACJM,MAAM;IACNhB,QAAQ;IACRI,SAAS;IACTH,OAAO;IACPJ,UAAU;IACVC,YAAY;IACZC,cAAc;IACdQ,GAAG;IACHF,MAAM;IACNG,SAAS;IACTb;EACF,CAAC,GAAGJ,KAAK;EAET,MAAM0B,UAAsB,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAM;IACjD,OAAO7B,mBAAmB,CAACC,KAAK,CAAC;EACnC,CAAC,EAAE,CACDS,QAAQ,EACRI,SAAS,EACTH,OAAO,EACPJ,UAAU,EACVC,YAAY,EACZC,cAAc,EACdQ,GAAG,EACHF,MAAM,EACNG,SAAS,EACTb,WAAW,CACZ,CAAC;EAEF,MAAMyB,MAAM,GAAG,IAAAhC,aAAO,EAACD,KAAK,CAAC;EAE7B,IAAIwB,GAAG,KAAKO,cAAK,CAACG,QAAQ,EAAE,OAAO,CAACH,cAAK,CAACG,QAAQ,EAAE;IAAEC,QAAQ,EAAE/B,KAAK,CAAC+B;EAAS,CAAC,CAAC;EAEjF,OAAO,CACLX,GAAG,EACH;IACEC,SAAS,EACP,IAAAW,mBAAE,EACAH,MAAM,CAACG,EAAE,CAAC,OAAO,EAAE;MACjBP,MAAM,EAAEA;IACV,CAAC,CAAC,CAACJ,SAAS,EACZA,SACF,CAAC,IAAIV,SAAS;IAChBf,KAAK,EAAEqC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAEZ,SAAS,EAAEI,UAAU,CAAC;IAC/C,GAAGH;EACL,CAAC,CACF;AACH","ignoreList":[]}

package/lib/es6/components/flex-box/Box/useBox.js

@@ -1,5 +1,6 @@
 import { sstyled as _sstyled } from "@semcore/core";
 import { sstyled } from '@semcore/core';
+import { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';
 import propsForElement from '@semcore/core/lib/utils/propsForElement';
 import cn from 'classnames';
 import React from 'react';
@@ -15,29 +16,7 @@ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/
   "__SBox": "___SBox_1suvb_gg_",
   "_invertOutline": "__invertOutline_1suvb_gg_"
 });
-import { getAutoOrScaleIndent } from '../utils';
-export function removeUndefinedKeys(obj) {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    if (value !== undefined) {
-      acc[key] = value;
-    }
-    return acc;
-  }, {});
-}
-function getSize(size) {
-  if (typeof size !== 'number') {
-    return size;
-  }
-  if (size < 1) {
-    return `${100 * size}%`;
-  }
-  if (size >= 1) {
-    return `${size}px`;
-  }
-}
-
 /** @deprecated */
-
 function calculateIndentStyles(props, scaleIndent) {
   return removeUndefinedKeys({
     display: props['display'],

package/lib/es6/components/flex-box/Box/useBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBox.js","names":["sstyled","propsForElement","cn","React","style","_sstyled","insert","getAutoOrScaleIndent","removeUndefinedKeys","obj","Object","entries","reduce","acc","key","value","undefined","getSize","size","calculateIndentStyles","props","scaleIndent","display","width","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","other","indentStyles","useMemo","styles","Fragment","children","SBoxSizing","SBoxInline","SBoxInnerOutline","assign"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\nimport { getAutoOrScaleIndent } from '../utils';\n\nexport function removeUndefinedKeys<T extends {}>(obj: T) {\n  return Object.entries(obj).reduce((acc: any, [key, value]) => {\n    if (value !== undefined) {\n      acc[key] = value;\n    }\n    return acc;\n  }, {});\n}\n\nfunction getSize(size: any) {\n  if (typeof size !== 'number') {\n    return size;\n  }\n  if (size < 1) {\n    return `${100 * size}%`;\n  }\n  if (size >= 1) {\n    return `${size}px`;\n  }\n}\n\nexport type BoxProps = IStyledProps & {\n  /**\n   * CSS `display` property\n   */\n  display?: Property.Display;\n\n  /** Sets the `inline-block` property */\n  inline?: boolean;\n\n  /** CSS `box-sizing: border-box` property */\n  boxSizing?: boolean | 'border-box';\n\n  /** CSS `flex` property */\n  flex?: Property.Flex<string>;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /** CSS `padding` property */\n  p?: number | string;\n\n  /** CSS `padding-top` property */\n  pt?: number | string;\n\n  /** CSS `padding-right` property */\n  pr?: number | string;\n\n  /** CSS `padding-bottom` property */\n  pb?: number | string;\n\n  /** CSS `padding-left` property */\n  pl?: number | string;\n\n  /** CSS `padding-left` and `padding-right` property */\n  px?: number | string;\n\n  /** CSS `padding-top` and `padding-bottom` property */\n  py?: number | string;\n\n  /**\n   * CSS `width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  w?: number | string;\n\n  /**\n   * CSS `min-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMin?: number | string;\n\n  /**\n   * CSS `max-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMax?: number | string;\n\n  /**\n   * CSS `height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  h?: number | string;\n\n  /**\n   * CSS `min-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMin?: number | string;\n\n  /**\n   * CSS `max-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMax?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n\n  /**\n   * Flag for render outline inside box\n   * @default false\n   */\n  innerOutline?: boolean;\n\n  /**\n   * Flag for render inverted outline\n   * @default false\n   */\n  invertOutline?: boolean;\n\n  /**\n   * Flag for render outline in the ::after element\n   * @default false\n   */\n  inAfterOutline?: boolean;\n  /** CSS `position` property */\n  position?: Property.Position;\n  /** CSS `top` property */\n  top?: number | string;\n  /** CSS `left` property */\n  left?: number | string;\n  /** CSS `bottom` property */\n  bottom?: number | string;\n  /** CSS `right` property */\n  right?: number | string;\n  /** CSS `inset` property */\n  inset?: string;\n  /** CSS `z-index` property */\n  zIndex?: number;\n  /** CSS `text-align` property */\n  textAlign?: Property.TextAlign;\n  /** Box content */\n  children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n  /**\n   *  HTML tag name for the displayed item\n   * @default div\n   */\n  tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    display: props['display'],\n    width: getSize(props['w']),\n    height: getSize(props['h']),\n    minWidth: getSize(props['wMin']),\n    maxWidth: getSize(props['wMax']),\n    minHeight: getSize(props['hMin']),\n    maxHeight: getSize(props['hMax']),\n    position: props['position'],\n    top: getSize(props['top']),\n    left: getSize(props['left']),\n    bottom: getSize(props['bottom']),\n    right: getSize(props['right']),\n    inset: props.inset,\n    flex: props.flex,\n    zIndex: props.zIndex,\n    textAlign: props.textAlign,\n\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n    padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n    paddingTop:\n      getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingBottom:\n      getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingLeft:\n      getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n    paddingRight:\n      getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n  });\n}\n\nexport default function useBox<T extends BoxProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const {\n    tag: Tag = 'div',\n    className,\n    style: styleProp,\n    scaleIndent = 4,\n    display,\n    boxSizing,\n    inline,\n    innerOutline,\n    invertOutline,\n    inAfterOutline,\n    flex,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    css,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n    ...other\n  } = props as any;\n\n  const indentStyles: Properties = React.useMemo(() => {\n    return calculateIndentStyles(props, scaleIndent);\n  }, [\n    scaleIndent,\n    display,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    flex,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      ref,\n      'className':\n        cn(\n          styles.cn('SBox', {\n            SBoxSizing: boxSizing,\n            SBoxInline: inline,\n            SBoxInnerOutline: innerOutline,\n            inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n            invertOutline,\n          }).className,\n          className,\n        ) || undefined,\n      'style': Object.assign({}, styleProp, css, indentStyles),\n      'data-ui-name': 'Box',\n      ...propsForElement(other, Tag),\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useBox.js","names":["sstyled","getAutoOrScaleIndent","removeUndefinedKeys","getSize","propsForElement","cn","React","style","_sstyled","insert","calculateIndentStyles","props","scaleIndent","display","width","height","minWidth","maxWidth","minHeight","maxHeight","position","top","left","bottom","right","inset","flex","zIndex","textAlign","margin","marginTop","marginBottom","marginLeft","marginRight","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","useBox","ref","tag","Tag","className","styleProp","boxSizing","inline","innerOutline","invertOutline","inAfterOutline","w","h","wMin","wMax","hMin","hMax","m","mt","mb","my","ml","mr","mx","p","pt","pb","py","pl","pr","px","css","other","indentStyles","useMemo","styles","Fragment","children","SBoxSizing","SBoxInline","SBoxInnerOutline","undefined","Object","assign"],"sources":["../../../../../src/components/flex-box/Box/useBox.tsx"],"sourcesContent":["import { sstyled, type UnknownProperties, type IStyledProps } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys, getSize } from '@semcore/core/lib/utils/indentStyles';\nimport propsForElement from '@semcore/core/lib/utils/propsForElement';\nimport cn from 'classnames';\nimport type { Properties, Property } from 'csstype';\nimport React from 'react';\n\nimport style from '../style/use-box.shadow.css';\n\nexport type BoxProps = IStyledProps & {\n  /**\n   * CSS `display` property\n   */\n  display?: Property.Display;\n\n  /** Sets the `inline-block` property */\n  inline?: boolean;\n\n  /** CSS `box-sizing: border-box` property */\n  boxSizing?: boolean | 'border-box';\n\n  /** CSS `flex` property */\n  flex?: Property.Flex<string>;\n\n  /** CSS `margin` property */\n  m?: number | string;\n\n  /** CSS `margin-top` property */\n  mt?: number | string;\n\n  /** CSS `margin-right` property */\n  mr?: number | string;\n\n  /** CSS `margin-bottom` property */\n  mb?: number | string;\n\n  /** CSS `margin-left` property */\n  ml?: number | string;\n\n  /** CSS `margin-left` and `margin-right` property */\n  mx?: number | string;\n\n  /** CSS `margin-top` and `margin-bottom` property */\n  my?: number | string;\n\n  /** CSS `padding` property */\n  p?: number | string;\n\n  /** CSS `padding-top` property */\n  pt?: number | string;\n\n  /** CSS `padding-right` property */\n  pr?: number | string;\n\n  /** CSS `padding-bottom` property */\n  pb?: number | string;\n\n  /** CSS `padding-left` property */\n  pl?: number | string;\n\n  /** CSS `padding-left` and `padding-right` property */\n  px?: number | string;\n\n  /** CSS `padding-top` and `padding-bottom` property */\n  py?: number | string;\n\n  /**\n   * CSS `width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  w?: number | string;\n\n  /**\n   * CSS `min-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMin?: number | string;\n\n  /**\n   * CSS `max-width` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  wMax?: number | string;\n\n  /**\n   * CSS `height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  h?: number | string;\n\n  /**\n   * CSS `min-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMin?: number | string;\n\n  /**\n   * CSS `max-height` property.\n   * If its value is less than 1, is considered as a fraction of 100%.\n   * If its value is more than 1, is considered as value in px, if it is a string, is passed as is.\n   */\n  hMax?: number | string;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n\n  /**\n   * Flag for render outline inside box\n   * @default false\n   */\n  innerOutline?: boolean;\n\n  /**\n   * Flag for render inverted outline\n   * @default false\n   */\n  invertOutline?: boolean;\n\n  /**\n   * Flag for render outline in the ::after element\n   * @default false\n   */\n  inAfterOutline?: boolean;\n  /** CSS `position` property */\n  position?: Property.Position;\n  /** CSS `top` property */\n  top?: number | string;\n  /** CSS `left` property */\n  left?: number | string;\n  /** CSS `bottom` property */\n  bottom?: number | string;\n  /** CSS `right` property */\n  right?: number | string;\n  /** CSS `inset` property */\n  inset?: string;\n  /** CSS `z-index` property */\n  zIndex?: number;\n  /** CSS `text-align` property */\n  textAlign?: Property.TextAlign;\n  /** Box content */\n  children?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IBoxProps extends BoxProps, UnknownProperties {\n  /**\n   *  HTML tag name for the displayed item\n   * @default div\n   */\n  tag?: React.ElementType | string;\n}\n\nfunction calculateIndentStyles(props: BoxProps, scaleIndent: number) {\n  return removeUndefinedKeys({\n    display: props['display'],\n    width: getSize(props['w']),\n    height: getSize(props['h']),\n    minWidth: getSize(props['wMin']),\n    maxWidth: getSize(props['wMax']),\n    minHeight: getSize(props['hMin']),\n    maxHeight: getSize(props['hMax']),\n    position: props['position'],\n    top: getSize(props['top']),\n    left: getSize(props['left']),\n    bottom: getSize(props['bottom']),\n    right: getSize(props['right']),\n    inset: props.inset,\n    flex: props.flex,\n    zIndex: props.zIndex,\n    textAlign: props.textAlign,\n\n    margin: getAutoOrScaleIndent(props['m'], scaleIndent),\n    marginTop:\n      getAutoOrScaleIndent(props['mt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginBottom:\n      getAutoOrScaleIndent(props['mb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['my'], scaleIndent),\n    marginLeft:\n      getAutoOrScaleIndent(props['ml'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n    marginRight:\n      getAutoOrScaleIndent(props['mr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['mx'], scaleIndent),\n\n    padding: getAutoOrScaleIndent(props['p'], scaleIndent),\n    paddingTop:\n      getAutoOrScaleIndent(props['pt'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingBottom:\n      getAutoOrScaleIndent(props['pb'], scaleIndent) ||\n      getAutoOrScaleIndent(props['py'], scaleIndent),\n    paddingLeft:\n      getAutoOrScaleIndent(props['pl'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n    paddingRight:\n      getAutoOrScaleIndent(props['pr'], scaleIndent) ||\n      getAutoOrScaleIndent(props['px'], scaleIndent),\n  });\n}\n\nexport default function useBox<T extends BoxProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const {\n    tag: Tag = 'div',\n    className,\n    style: styleProp,\n    scaleIndent = 4,\n    display,\n    boxSizing,\n    inline,\n    innerOutline,\n    invertOutline,\n    inAfterOutline,\n    flex,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    css,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n    ...other\n  } = props as any;\n\n  const indentStyles: Properties = React.useMemo(() => {\n    return calculateIndentStyles(props, scaleIndent);\n  }, [\n    scaleIndent,\n    display,\n    w,\n    h,\n    wMin,\n    wMax,\n    hMin,\n    hMax,\n    flex,\n    m,\n    mt,\n    mb,\n    my,\n    ml,\n    mr,\n    mx,\n    p,\n    pt,\n    pb,\n    py,\n    pl,\n    pr,\n    px,\n    position,\n    top,\n    left,\n    bottom,\n    right,\n    inset,\n    zIndex,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      ref,\n      'className':\n        cn(\n          styles.cn('SBox', {\n            SBoxSizing: boxSizing,\n            SBoxInline: inline,\n            SBoxInnerOutline: innerOutline,\n            inAfterOutline: inAfterOutline === true ? 'true' : 'false',\n            invertOutline,\n          }).className,\n          className,\n        ) || undefined,\n      'style': Object.assign({}, styleProp, css, indentStyles),\n      'data-ui-name': 'Box',\n      ...propsForElement(other, Tag),\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/components/flex-box/Flex/useFlex.js

@@ -1,8 +1,9 @@
 import { sstyled as _sstyled } from "@semcore/core";
 import { sstyled } from '@semcore/core';
+import { getAutoOrScaleIndent, removeUndefinedKeys } from '@semcore/core/lib/utils/indentStyles';
 import cn from 'classnames';
 import React from 'react';
-import useBox, { removeUndefinedKeys } from '../Box/useBox';
+import useBox from '../Box/useBox';
 /*!__reshadow-styles__:"../style/use-flex.shadow.css"*/
 const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SFlex_fqcaq_gg_{display:flex}.___SFlex_fqcaq_gg_.__inline_fqcaq_gg_{display:inline-flex}", /*__inner_css_end__*/"fqcaq_gg_"),
 /*__reshadow_css_end__*/
@@ -10,7 +11,6 @@ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/
   "__SFlex": "___SFlex_fqcaq_gg_",
   "_inline": "__inline_fqcaq_gg_"
 });
-import { getAutoOrScaleIndent } from '../utils';
 function calculateFlexStyles(props) {
   const DirectionReverse = {
     row: 'row-reverse',

package/lib/es6/components/flex-box/Flex/useFlex.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlex.js","names":["sstyled","cn","React","useBox","removeUndefinedKeys","style","_sstyled","insert","getAutoOrScaleIndent","calculateFlexStyles","props","DirectionReverse","row","column","scaleIndent","alignItems","alignContent","justifyContent","flexWrap","reverse","undefined","flexDirection","direction","rowGap","gap","columnGap","useFlex","ref","Tag","className","styleProp","other","inline","flexStyles","useMemo","styles","Fragment","children","Object","assign"],"sources":["../../../../../src/components/flex-box/Flex/useFlex.tsx"],"sourcesContent":["import { sstyled } from '@semcore/core';\nimport cn from 'classnames';\nimport type { Property, Properties } from 'csstype';\nimport React from 'react';\n\nimport useBox, { type BoxProps, removeUndefinedKeys } from '../Box/useBox';\nimport style from '../style/use-flex.shadow.css';\nimport { getAutoOrScaleIndent } from '../utils';\n\nexport type FlexProps = BoxProps & {\n  /**\n   * It manages the `inline-flex` property\n   */\n  inline?: boolean;\n  /**\n   * Adds the `reverse` property to `flex-direction`\n   */\n  reverse?: boolean;\n  /**\n   * It manages the `flex-wrap` property\n   */\n  flexWrap?: boolean;\n  /**\n   * It manages the `flex-direction` property\n   */\n  direction?: Property.FlexDirection;\n  /**\n   * It manages the `align-items` property\n   */\n  alignItems?: Property.AlignItems;\n  /**\n   * It manages the `align-content` property\n   */\n  alignContent?: Property.AlignContent;\n  /**\n   * CSS `justify-content` property\n   */\n  justifyContent?: Property.JustifyContent;\n  /**\n   * CSS `gap` property\n   */\n  gap?: Property.Gap<number>;\n  /**\n   * CSS `gap` property\n   */\n  rowGap?: Property.RowGap<number>;\n  /**\n   * CSS `gap` property\n   */\n  columnGap?: Property.ColumnGap<number>;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateFlexStyles(props: any) {\n  const DirectionReverse: Record<string, string> = {\n    row: 'row-reverse',\n    column: 'column-reverse',\n  };\n\n  const scaleIndent = props.scaleIndent ?? 4;\n\n  return removeUndefinedKeys({\n    alignItems: props.alignItems,\n    alignContent: props.alignContent,\n    justifyContent: props.justifyContent,\n    flexWrap: props.flexWrap ? `wrap${props.reverse ? '-reverse' : ''}` : undefined,\n    flexDirection: (props.reverse && DirectionReverse[props.direction]) || props.direction,\n    rowGap: getAutoOrScaleIndent(props.rowGap || props.gap, scaleIndent),\n    columnGap: getAutoOrScaleIndent(props.columnGap || props.gap, scaleIndent),\n  });\n}\n\nexport default function useFlex<T extends FlexProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const [Tag, { className, style: styleProp, ...other }] = useBox(\n    {\n      'data-ui-name': 'Flex',\n      ...props,\n      'inline': false,\n    },\n    ref,\n  );\n  const {\n    inline,\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  } = props;\n\n  const flexStyles: Properties = React.useMemo(() => {\n    return calculateFlexStyles(props);\n  }, [\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      className:\n        cn(\n          styles.cn('SFlex', {\n            inline: inline,\n          }).className,\n          className,\n        ) || undefined,\n      style: Object.assign({}, styleProp, flexStyles),\n      ...other,\n    },\n  ];\n}\n"],"mappings":";AAAA,SAASA,OAAO,QAAQ,eAAe;AACvC,OAAOC,EAAE,MAAM,YAAY;AAE3B,OAAOC,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,IAAmBC,mBAAmB,QAAQ,eAAe;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAE3E,SAASC,oBAAoB,QAAQ,UAAU;AAmD/C,SAASC,mBAAmBA,CAACC,KAAU,EAAE;EACvC,MAAMC,gBAAwC,GAAG;IAC/CC,GAAG,EAAE,aAAa;IAClBC,MAAM,EAAE;EACV,CAAC;EAED,MAAMC,WAAW,GAAGJ,KAAK,CAACI,WAAW,IAAI,CAAC;EAE1C,OAAOV,mBAAmB,CAAC;IACzBW,UAAU,EAAEL,KAAK,CAACK,UAAU;IAC5BC,YAAY,EAAEN,KAAK,CAACM,YAAY;IAChCC,cAAc,EAAEP,KAAK,CAACO,cAAc;IACpCC,QAAQ,EAAER,KAAK,CAACQ,QAAQ,GAAG,OAAOR,KAAK,CAACS,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,GAAGC,SAAS;IAC/EC,aAAa,EAAGX,KAAK,CAACS,OAAO,IAAIR,gBAAgB,CAACD,KAAK,CAACY,SAAS,CAAC,IAAKZ,KAAK,CAACY,SAAS;IACtFC,MAAM,EAAEf,oBAAoB,CAACE,KAAK,CAACa,MAAM,IAAIb,KAAK,CAACc,GAAG,EAAEV,WAAW,CAAC;IACpEW,SAAS,EAAEjB,oBAAoB,CAACE,KAAK,CAACe,SAAS,IAAIf,KAAK,CAACc,GAAG,EAAEV,WAAW;EAC3E,CAAC,CAAC;AACJ;AAEA,eAAe,SAASY,OAAOA,CAC7BhB,KAAQ,EACRiB,GAA2B,EACQ;EACnC,MAAM,CAACC,GAAG,EAAE;IAAEC,SAAS;IAAExB,KAAK,EAAEyB,SAAS;IAAE,GAAGC;EAAM,CAAC,CAAC,GAAG5B,MAAM,CAC7D;IACE,cAAc,EAAE,MAAM;IACtB,GAAGO,KAAK;IACR,QAAQ,EAAE;EACZ,CAAC,EACDiB,GACF,CAAC;EACD,MAAM;IACJK,MAAM;IACNd,QAAQ;IACRI,SAAS;IACTH,OAAO;IACPJ,UAAU;IACVC,YAAY;IACZC,cAAc;IACdO,GAAG;IACHD,MAAM;IACNE,SAAS;IACTX;EACF,CAAC,GAAGJ,KAAK;EAET,MAAMuB,UAAsB,GAAG/B,KAAK,CAACgC,OAAO,CAAC,MAAM;IACjD,OAAOzB,mBAAmB,CAACC,KAAK,CAAC;EACnC,CAAC,EAAE,CACDQ,QAAQ,EACRI,SAAS,EACTH,OAAO,EACPJ,UAAU,EACVC,YAAY,EACZC,cAAc,EACdO,GAAG,EACHD,MAAM,EACNE,SAAS,EACTX,WAAW,CACZ,CAAC;EAEF,MAAMqB,MAAM,GAAGnC,OAAO,CAACK,KAAK,CAAC;EAE7B,IAAIuB,GAAG,KAAK1B,KAAK,CAACkC,QAAQ,EAAE,OAAO,CAAClC,KAAK,CAACkC,QAAQ,EAAE;IAAEC,QAAQ,EAAE3B,KAAK,CAAC2B;EAAS,CAAC,CAAC;EAEjF,OAAO,CACLT,GAAG,EACH;IACEC,SAAS,EACP5B,EAAE,CACAkC,MAAM,CAAClC,EAAE,CAAC,OAAO,EAAE;MACjB+B,MAAM,EAAEA;IACV,CAAC,CAAC,CAACH,SAAS,EACZA,SACF,CAAC,IAAIT,SAAS;IAChBf,KAAK,EAAEiC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAET,SAAS,EAAEG,UAAU,CAAC;IAC/C,GAAGF;EACL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"file":"useFlex.js","names":["sstyled","getAutoOrScaleIndent","removeUndefinedKeys","cn","React","useBox","style","_sstyled","insert","calculateFlexStyles","props","DirectionReverse","row","column","scaleIndent","alignItems","alignContent","justifyContent","flexWrap","reverse","undefined","flexDirection","direction","rowGap","gap","columnGap","useFlex","ref","Tag","className","styleProp","other","inline","flexStyles","useMemo","styles","Fragment","children","Object","assign"],"sources":["../../../../../src/components/flex-box/Flex/useFlex.tsx"],"sourcesContent":["import { sstyled } from '@semcore/core';\nimport { getAutoOrScaleIndent, removeUndefinedKeys } from '@semcore/core/lib/utils/indentStyles';\nimport cn from 'classnames';\nimport type { Property, Properties } from 'csstype';\nimport React from 'react';\n\nimport useBox, { type BoxProps } from '../Box/useBox';\nimport style from '../style/use-flex.shadow.css';\n\nexport type FlexProps = BoxProps & {\n  /**\n   * It manages the `inline-flex` property\n   */\n  inline?: boolean;\n  /**\n   * Adds the `reverse` property to `flex-direction`\n   */\n  reverse?: boolean;\n  /**\n   * It manages the `flex-wrap` property\n   */\n  flexWrap?: boolean;\n  /**\n   * It manages the `flex-direction` property\n   */\n  direction?: Property.FlexDirection;\n  /**\n   * It manages the `align-items` property\n   */\n  alignItems?: Property.AlignItems;\n  /**\n   * It manages the `align-content` property\n   */\n  alignContent?: Property.AlignContent;\n  /**\n   * CSS `justify-content` property\n   */\n  justifyContent?: Property.JustifyContent;\n  /**\n   * CSS `gap` property\n   */\n  gap?: Property.Gap<number>;\n  /**\n   * CSS `gap` property\n   */\n  rowGap?: Property.RowGap<number>;\n  /**\n   * CSS `gap` property\n   */\n  columnGap?: Property.ColumnGap<number>;\n\n  /**\n   * Multiplier of all indents. For example, if you specify a margin-top equal to 3 (mt = {3}), it will be 12px (3 * 4 = 12).\n   * @default 4\n   */\n  scaleIndent?: number;\n};\n\nfunction calculateFlexStyles(props: any) {\n  const DirectionReverse: Record<string, string> = {\n    row: 'row-reverse',\n    column: 'column-reverse',\n  };\n\n  const scaleIndent = props.scaleIndent ?? 4;\n\n  return removeUndefinedKeys({\n    alignItems: props.alignItems,\n    alignContent: props.alignContent,\n    justifyContent: props.justifyContent,\n    flexWrap: props.flexWrap ? `wrap${props.reverse ? '-reverse' : ''}` : undefined,\n    flexDirection: (props.reverse && DirectionReverse[props.direction]) || props.direction,\n    rowGap: getAutoOrScaleIndent(props.rowGap || props.gap, scaleIndent),\n    columnGap: getAutoOrScaleIndent(props.columnGap || props.gap, scaleIndent),\n  });\n}\n\nexport default function useFlex<T extends FlexProps>(\n  props: T,\n  ref: React.Ref<HTMLElement>,\n): [React.ElementType | string, any] {\n  const [Tag, { className, style: styleProp, ...other }] = useBox(\n    {\n      'data-ui-name': 'Flex',\n      ...props,\n      'inline': false,\n    },\n    ref,\n  );\n  const {\n    inline,\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  } = props;\n\n  const flexStyles: Properties = React.useMemo(() => {\n    return calculateFlexStyles(props);\n  }, [\n    flexWrap,\n    direction,\n    reverse,\n    alignItems,\n    alignContent,\n    justifyContent,\n    gap,\n    rowGap,\n    columnGap,\n    scaleIndent,\n  ]);\n\n  const styles = sstyled(style);\n\n  if (Tag === React.Fragment) return [React.Fragment, { children: props.children }];\n\n  return [\n    Tag,\n    {\n      className:\n        cn(\n          styles.cn('SFlex', {\n            inline: inline,\n          }).className,\n          className,\n        ) || undefined,\n      style: Object.assign({}, styleProp, flexStyles),\n      ...other,\n    },\n  ];\n}\n"],"mappings":";AAAA,SAASA,OAAO,QAAQ,eAAe;AACvC,SAASC,oBAAoB,EAAEC,mBAAmB,QAAQ,sCAAsC;AAChG,OAAOC,EAAE,MAAM,YAAY;AAE3B,OAAOC,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAyB,eAAe;AAAC;AAAA,MAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAoDtD,SAASC,mBAAmBA,CAACC,KAAU,EAAE;EACvC,MAAMC,gBAAwC,GAAG;IAC/CC,GAAG,EAAE,aAAa;IAClBC,MAAM,EAAE;EACV,CAAC;EAED,MAAMC,WAAW,GAAGJ,KAAK,CAACI,WAAW,IAAI,CAAC;EAE1C,OAAOZ,mBAAmB,CAAC;IACzBa,UAAU,EAAEL,KAAK,CAACK,UAAU;IAC5BC,YAAY,EAAEN,KAAK,CAACM,YAAY;IAChCC,cAAc,EAAEP,KAAK,CAACO,cAAc;IACpCC,QAAQ,EAAER,KAAK,CAACQ,QAAQ,GAAG,OAAOR,KAAK,CAACS,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,GAAGC,SAAS;IAC/EC,aAAa,EAAGX,KAAK,CAACS,OAAO,IAAIR,gBAAgB,CAACD,KAAK,CAACY,SAAS,CAAC,IAAKZ,KAAK,CAACY,SAAS;IACtFC,MAAM,EAAEtB,oBAAoB,CAACS,KAAK,CAACa,MAAM,IAAIb,KAAK,CAACc,GAAG,EAAEV,WAAW,CAAC;IACpEW,SAAS,EAAExB,oBAAoB,CAACS,KAAK,CAACe,SAAS,IAAIf,KAAK,CAACc,GAAG,EAAEV,WAAW;EAC3E,CAAC,CAAC;AACJ;AAEA,eAAe,SAASY,OAAOA,CAC7BhB,KAAQ,EACRiB,GAA2B,EACQ;EACnC,MAAM,CAACC,GAAG,EAAE;IAAEC,SAAS;IAAEvB,KAAK,EAAEwB,SAAS;IAAE,GAAGC;EAAM,CAAC,CAAC,GAAG1B,MAAM,CAC7D;IACE,cAAc,EAAE,MAAM;IACtB,GAAGK,KAAK;IACR,QAAQ,EAAE;EACZ,CAAC,EACDiB,GACF,CAAC;EACD,MAAM;IACJK,MAAM;IACNd,QAAQ;IACRI,SAAS;IACTH,OAAO;IACPJ,UAAU;IACVC,YAAY;IACZC,cAAc;IACdO,GAAG;IACHD,MAAM;IACNE,SAAS;IACTX;EACF,CAAC,GAAGJ,KAAK;EAET,MAAMuB,UAAsB,GAAG7B,KAAK,CAAC8B,OAAO,CAAC,MAAM;IACjD,OAAOzB,mBAAmB,CAACC,KAAK,CAAC;EACnC,CAAC,EAAE,CACDQ,QAAQ,EACRI,SAAS,EACTH,OAAO,EACPJ,UAAU,EACVC,YAAY,EACZC,cAAc,EACdO,GAAG,EACHD,MAAM,EACNE,SAAS,EACTX,WAAW,CACZ,CAAC;EAEF,MAAMqB,MAAM,GAAGnC,OAAO,CAACM,KAAK,CAAC;EAE7B,IAAIsB,GAAG,KAAKxB,KAAK,CAACgC,QAAQ,EAAE,OAAO,CAAChC,KAAK,CAACgC,QAAQ,EAAE;IAAEC,QAAQ,EAAE3B,KAAK,CAAC2B;EAAS,CAAC,CAAC;EAEjF,OAAO,CACLT,GAAG,EACH;IACEC,SAAS,EACP1B,EAAE,CACAgC,MAAM,CAAChC,EAAE,CAAC,OAAO,EAAE;MACjB6B,MAAM,EAAEA;IACV,CAAC,CAAC,CAACH,SAAS,EACZA,SACF,CAAC,IAAIT,SAAS;IAChBd,KAAK,EAAEgC,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAET,SAAS,EAAEG,UAAU,CAAC;IAC/C,GAAGF;EACL,CAAC,CACF;AACH","ignoreList":[]}

package/lib/esm/components/flex-box/Box/useBox.mjs

@@ -1,8 +1,8 @@
 import { sstyled } from "@semcore/core";
+import { removeUndefinedKeys, getAutoOrScaleIndent, getSize } from "@semcore/core/lib/utils/indentStyles";
 import propsForElement from "@semcore/core/lib/utils/propsForElement";
 import cn from "classnames";
 import React from "react";
-import { getAutoOrScaleIndent } from "../utils.mjs";
 /*!__reshadow-styles__:"../style/use-box.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/
@@ -22,25 +22,6 @@ const style = (
     "_invertOutline": "__invertOutline_1suvb_gg_"
   })
 );
-function removeUndefinedKeys(obj) {
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    if (value !== void 0) {
-      acc[key] = value;
-    }
-    return acc;
-  }, {});
-}
-function getSize(size) {
-  if (typeof size !== "number") {
-    return size;
-  }
-  if (size < 1) {
-    return `${100 * size}%`;
-  }
-  if (size >= 1) {
-    return `${size}px`;
-  }
-}
 function calculateIndentStyles(props, scaleIndent) {
   return removeUndefinedKeys({
     display: props["display"],
@@ -136,6 +117,5 @@ function useBox(props, ref) {
   }];
 }
 export {
-  useBox as default,
-  removeUndefinedKeys
+  useBox as default
 };

package/lib/esm/components/flex-box/Flex/useFlex.mjs

@@ -1,8 +1,8 @@
 import { sstyled } from "@semcore/core";
+import { removeUndefinedKeys, getAutoOrScaleIndent } from "@semcore/core/lib/utils/indentStyles";
 import cn from "classnames";
 import React from "react";
-import useBox, { removeUndefinedKeys } from "../Box/useBox.mjs";
-import { getAutoOrScaleIndent } from "../utils.mjs";
+import useBox from "../Box/useBox.mjs";
 /*!__reshadow-styles__:"../style/use-flex.shadow.css"*/
 const style = (
   /*__reshadow_css_start__*/

package/lib/esm/index.mjs

@@ -1,6 +1,6 @@
 import { defaultBreakpoints } from "./components/breakpoints/index.mjs";
 import { Col } from "./components/grid/index.mjs";
-import { removeUndefinedKeys, default as default2 } from "./components/flex-box/Box/useBox.mjs";
+import { default as default2 } from "./components/flex-box/Box/useBox.mjs";
 import { default as default3 } from "./components/flex-box/Flex/useFlex.mjs";
 import { default as default4 } from "./components/grid/Grid.mjs";
 import { default as default5, animationContext } from "./components/animation/Animation.mjs";
@@ -53,7 +53,6 @@ export {
   eventCalculate,
   hideScrollBarsFromScreenReadersContext,
   isInputTriggerTag,
-  removeUndefinedKeys,
   default2 as useBox,
   default3 as useFlex,
   useNeighborLocationDetect

package/lib/types/components/flex-box/Box/useBox.d.ts

@@ -1,7 +1,6 @@
 import { type UnknownProperties, type IStyledProps } from '@semcore/core';
 import type { Property } from 'csstype';
 import React from 'react';
-export declare function removeUndefinedKeys<T extends {}>(obj: T): any;
 export type BoxProps = IStyledProps & {
     /**
      * CSS `display` property

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/base-components",
   "description": "Semrush Base Components",
-  "version": "17.0.0-prerelease.27",
+  "version": "17.0.0-prerelease.29",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -32,8 +32,8 @@
   },
   "devDependencies": {
     "@types/classnames": "2.2.6",
-    "@semcore/core": "17.0.0-prerelease.27",
-    "@semcore/testing-utils": "1.0.0"
+    "@semcore/testing-utils": "1.0.0",
+    "@semcore/core": "17.0.0-prerelease.29"
   },
   "scripts": {
     "build": "pnpm semcore-builder && pnpm vite build"

package/lib/cjs/components/flex-box/utils.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getAutoOrScaleIndent = void 0;
-const getAutoOrScaleIndent = (indent, scaleIndent) => {
-  if (typeof indent === 'string') {
-    return indent;
-  }
-  if (typeof indent === 'number' && indent > -1 && indent < 1) {
-    return `${100 * indent}%`;
-  }
-  if (typeof indent === 'number' && (indent >= 1 || indent <= -1)) {
-    return `${indent * scaleIndent}px`;
-  }
-  return indent;
-};
-exports.getAutoOrScaleIndent = getAutoOrScaleIndent;
-//# sourceMappingURL=utils.js.map

package/lib/cjs/components/flex-box/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":["getAutoOrScaleIndent","indent","scaleIndent","exports"],"sources":["../../../../src/components/flex-box/utils.ts"],"sourcesContent":["export const getAutoOrScaleIndent = (indent: number | string | undefined, scaleIndent: number) => {\n  if (typeof indent === 'string') {\n    return indent;\n  }\n  if (typeof indent === 'number' && indent > -1 && indent < 1) {\n    return `${100 * indent}%`;\n  }\n  if (typeof indent === 'number' && (indent >= 1 || indent <= -1)) {\n    return `${indent * scaleIndent}px`;\n  }\n  return indent;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,oBAAoB,GAAGA,CAACC,MAAmC,EAAEC,WAAmB,KAAK;EAChG,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM;EACf;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAIA,MAAM,GAAG,CAAC,CAAC,IAAIA,MAAM,GAAG,CAAC,EAAE;IAC3D,OAAO,GAAG,GAAG,GAAGA,MAAM,GAAG;EAC3B;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,KAAKA,MAAM,IAAI,CAAC,IAAIA,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;IAC/D,OAAO,GAAGA,MAAM,GAAGC,WAAW,IAAI;EACpC;EACA,OAAOD,MAAM;AACf,CAAC;AAACE,OAAA,CAAAH,oBAAA,GAAAA,oBAAA","ignoreList":[]}

package/lib/es6/components/flex-box/utils.js

@@ -1,13 +0,0 @@
-export const getAutoOrScaleIndent = (indent, scaleIndent) => {
-  if (typeof indent === 'string') {
-    return indent;
-  }
-  if (typeof indent === 'number' && indent > -1 && indent < 1) {
-    return `${100 * indent}%`;
-  }
-  if (typeof indent === 'number' && (indent >= 1 || indent <= -1)) {
-    return `${indent * scaleIndent}px`;
-  }
-  return indent;
-};
-//# sourceMappingURL=utils.js.map

package/lib/es6/components/flex-box/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":["getAutoOrScaleIndent","indent","scaleIndent"],"sources":["../../../../src/components/flex-box/utils.ts"],"sourcesContent":["export const getAutoOrScaleIndent = (indent: number | string | undefined, scaleIndent: number) => {\n  if (typeof indent === 'string') {\n    return indent;\n  }\n  if (typeof indent === 'number' && indent > -1 && indent < 1) {\n    return `${100 * indent}%`;\n  }\n  if (typeof indent === 'number' && (indent >= 1 || indent <= -1)) {\n    return `${indent * scaleIndent}px`;\n  }\n  return indent;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,oBAAoB,GAAGA,CAACC,MAAmC,EAAEC,WAAmB,KAAK;EAChG,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;IAC9B,OAAOA,MAAM;EACf;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,IAAIA,MAAM,GAAG,CAAC,CAAC,IAAIA,MAAM,GAAG,CAAC,EAAE;IAC3D,OAAO,GAAG,GAAG,GAAGA,MAAM,GAAG;EAC3B;EACA,IAAI,OAAOA,MAAM,KAAK,QAAQ,KAAKA,MAAM,IAAI,CAAC,IAAIA,MAAM,IAAI,CAAC,CAAC,CAAC,EAAE;IAC/D,OAAO,GAAGA,MAAM,GAAGC,WAAW,IAAI;EACpC;EACA,OAAOD,MAAM;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/flex-box/utils.mjs

@@ -1,15 +0,0 @@
-const getAutoOrScaleIndent = (indent, scaleIndent) => {
-  if (typeof indent === "string") {
-    return indent;
-  }
-  if (typeof indent === "number" && indent > -1 && indent < 1) {
-    return `${100 * indent}%`;
-  }
-  if (typeof indent === "number" && (indent >= 1 || indent <= -1)) {
-    return `${indent * scaleIndent}px`;
-  }
-  return indent;
-};
-export {
-  getAutoOrScaleIndent
-};

package/lib/types/components/flex-box/utils.d.ts

@@ -1 +0,0 @@
-export declare const getAutoOrScaleIndent: (indent: number | string | undefined, scaleIndent: number) => string | number | undefined;