@salutejs/plasma-new-hope 0.173.1-canary.1502.11462220468.0 → 0.173.1-dev.0

package/es/index.js

@@ -1,3 +1,6 @@
+export { css } from './engines/index.js';
+export { composableStyle, cx } from './utils/index.js';
+export { ButtonBase } from './components/ButtonBase/index.js';
 export { applyBlur, blurs } from './mixins/applyBlur.js';
 export { applyEllipsis } from './mixins/applyEllipsis.js';
 export { applySpacing, spacing, spacingFns } from './mixins/applySpacing.js';
@@ -10,7 +13,7 @@ export { applyRoundness, getRoundness, radiuses } from './mixins/applyRoundness.
 export { applySkeletonGradient, getSkeletonColor } from './mixins/applySkeletonGradient.js';
 export { applyDisabled } from './mixins/applyDisabled.js';
 export { applyHidden } from './mixins/applyHidden.js';
-export { css } from './engines/index.js';
+export { component, mergeConfig } from './engines/common.js';
 export { useUniqId } from './hooks/useUniqId.js';
 export { useFocusTrap } from './hooks/useFocusTrap.js';
 export { usePreviousValue } from './hooks/usePreviousValue.js';
@@ -18,7 +21,17 @@ export { useForceUpdate } from './hooks/useForceUpdate.js';
 export { useDidMountEffect } from './hooks/useDidMountEffect.js';
 export { useOutsideClick } from './hooks/useOutsideClick.js';
 export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect.js';
-export { composableStyle, cx } from './utils/index.js';
+export { canUseDOM } from './utils/canUseDOM.js';
+export { extractTextFrom } from './utils/extractTextFrom.js';
+export { getSizeValueFromProp } from './utils/getSizeValueFromProp.js';
+export { IS_REACT_18, safeUseId } from './utils/react.js';
+export { isNumber } from './utils/isNumber.js';
+export { mergeRefs, setRefList } from './utils/setRefList.js';
+export { isEmpty } from './utils/isEmpty.js';
+export { noop } from './utils/noop.js';
+export { getPlacement, getPlacements } from './utils/getPopoverPlacement.js';
+import * as constants from './utils/constants.js';
+export { constants };
 export { buttonConfig, buttonRoot } from './components/Button/Button.js';
 export { classes as buttonClasses, tokens as buttonTokens } from './components/Button/Button.tokens.js';
 export { iconButtonConfig, iconButtonRoot } from './components/IconButton/IconButton.js';
@@ -67,6 +80,7 @@ export { withRange } from './components/Calendar/hoc/withRange.js';
 export { calendarBaseConfig, calendarBaseRoot } from './components/Calendar/CalendarBase/CalendarBase.js';
 export { calendarDoubleConfig, calendarDoubleRoot } from './components/Calendar/CalendarDouble/CalendarDouble.js';
 export { tokens as calendarBaseTokens, tokens as calendarDoubleTokens } from './components/Calendar/Calendar.tokens.js';
+export { tokens as typographyTokens } from './components/Typography/tokens.js';
 export { bodyConfig, bodyRoot } from './components/Typography/Body/Body.js';
 export { dsplConfig, dsplRoot } from './components/Typography/Dspl/Dspl.js';
 export { headingConfig, headingRoot } from './components/Typography/Heading/Heading.js';
@@ -81,7 +95,6 @@ export { paragraphConfig, paragraphRoot } from './components/Typography/Old/Para
 export { paragraphTextConfig, paragraphTextRoot } from './components/Typography/Old/ParagraphText/ParagraphText.js';
 export { underlineConfig, underlineRoot } from './components/Typography/Old/Underline/Underline.js';
 export { subtitleConfig, subtitleRoot } from './components/Typography/Old/Subtitle/Subtitle.js';
-export { tokens as typographyTokens } from './components/Typography/tokens.js';
 export { PopupProvider, usePopupContext } from './components/Popup/PopupContext.js';
 export { popupConfig, popupRoot } from './components/Popup/Popup.js';
 export { usePopup } from './components/Popup/hooks/usePopup.js';
@@ -93,10 +106,10 @@ export { noticationConfig, notificationRoot } from './components/Notification/No
 export { addNotification, closeNotification } from './components/Notification/NotificationsStore.js';
 export { classes as notificationClasses, tokens as notificationTokens } from './components/Notification/Notification.tokens.js';
 export { drawerConfig, drawerRoot } from './components/Drawer/Drawer.js';
+export { classes as drawerClasses, tokens as drawerTokens } from './components/Drawer/Drawer.tokens.js';
 export { drawerContentConfig, drawerContentRoot } from './components/Drawer/ui/DrawerContent/DrawerContent.js';
 export { drawerFooterConfig, drawerFooterRoot } from './components/Drawer/ui/DrawerFooter/DrawerFooter.js';
 export { drawerHeaderConfig, drawerHeaderRoot } from './components/Drawer/ui/DrawerHeader/DrawerHeader.js';
-export { classes as drawerClasses, tokens as drawerTokens } from './components/Drawer/Drawer.tokens.js';
 export { dropdownConfig, dropdownRoot } from './components/Dropdown/Dropdown.js';
 export { classes as dropdownClasses, tokens as dropdownTokens } from './components/Dropdown/Dropdown.tokens.js';
 export { useKeyNavigation as useDropdownKeyNavigation } from './components/Dropdown/hooks/useKeyboardNavigation.js';
@@ -111,8 +124,8 @@ export { dropdownOldConfig, dropdownOldRoot } from './components/Dropdown/ui/Dro
 export { tokens as dropdownOldTokens } from './components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js';
 export { tooltipConfig, tooltipRoot } from './components/Tooltip/Tooltip.js';
 export { tokens as tooltipTokens } from './components/Tooltip/Tooltip.tokens.js';
-export { segmentGroupConfig, segmentGroupRoot } from './components/Segment/ui/SegmentGroup/SegmentGroup.js';
 export { segmentItemConfig, segmentItemRoot } from './components/Segment/ui/SegmentItem/SegmentItem.js';
+export { segmentGroupConfig, segmentGroupRoot } from './components/Segment/ui/SegmentGroup/SegmentGroup.js';
 export { SegmentProvider, useSegment } from './components/Segment/SegmentProvider/SegmentProvider.js';
 export { classes as segmentClasses, tokens as segmentTokens } from './components/Segment/tokens.js';
 export { lineSkeletonConfig, lineSkeletonRoot } from './components/Skeleton/LineSkeleton/LineSkeleton.js';
@@ -137,23 +150,22 @@ export { classes as toastClasses, tokens as toastTokens } from './components/Toa
 export { Overlay } from './components/Overlay/Overlay.js';
 export { SSRContext, SSRProvider } from './components/SSRProvider/SSRProvider.js';
 export { comboboxConfig as comboboxOldConfig, comboboxRoot as comboboxOldRoot } from './components/Combobox/ComboboxOld/Combobox.js';
-export { classes as comboboxOldClasses, tokens as comboboxOldTokens } from './components/Combobox/ComboboxOld/Combobox.tokens.js';
 export { comboboxDividerConfig, comboboxDividerRoot } from './components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.js';
 export { comboboxFooterConfig, comboboxFooterRoot } from './components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.js';
 export { comboboxGroupConfig, comboboxGroupRoot } from './components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.js';
 export { comboboxHeaderConfig, comboboxHeaderRoot } from './components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.js';
 export { comboboxItemConfig, comboboxItemRoot } from './components/Combobox/ComboboxOld/ui/ComboboxItem/ComboboxItem.js';
 export { ComboboxTarget } from './components/Combobox/ComboboxOld/ui/ComboboxTarget/ComboboxTarget.js';
-export { comboboxConfig as comboboxNewConfig, comboboxRoot as comboboxNewRoot } from './components/Combobox/ComboboxNew/Combobox.js';
+export { classes as comboboxOldClasses, tokens as comboboxOldTokens } from './components/Combobox/ComboboxOld/Combobox.tokens.js';
 export { tokens as comboboxNewTokens } from './components/Combobox/ComboboxNew/Combobox.tokens.js';
+export { comboboxConfig as comboboxNewConfig, comboboxRoot as comboboxNewRoot } from './components/Combobox/ComboboxNew/Combobox.js';
 export { indicatorConfig, indicatorRoot } from './components/Indicator/Indicator.js';
 export { tokens as indicatorTokens } from './components/Indicator/Indicator.tokens.js';
-export { ButtonBase } from './components/ButtonBase/index.js';
 export { gridConfig, gridRoot } from './components/Grid/Grid.js';
 export { tokens as gridTokens } from './components/Grid/Grid.tokens.js';
+export { getBaseGridView } from './components/Grid/utils/index.js';
 export { Row } from './components/Grid/ui/Row/Row.js';
 export { Col } from './components/Grid/ui/Col/Col.js';
-export { getBaseGridView } from './components/Grid/utils/index.js';
 export { progressConfig, progressRoot } from './components/Progress/Progress.js';
 export { tokens as progressTokens } from './components/Progress/Progress.tokens.js';
 export { selectConfig, selectRoot } from './components/Select/Select.js';
@@ -167,10 +179,7 @@ export { sheetConfig, sheetRoot } from './components/Sheet/Sheet.js';
 export { classes as sheetClasses, tokens as sheetTokens } from './components/Sheet/Sheet.tokens.js';
 export { sliderConfig, sliderRoot } from './components/Slider/Slider.js';
 export { tokens as sliderTokens } from './components/Slider/Slider.tokens.js';
-import 'react';
-import 'react-draggable';
 export { ThumbBase } from './components/Slider/ui/Thumb/Thumb.styles.js';
-import '@linaria/react';
 export { stepsConfig, stepsRoot } from './components/Steps/Steps.js';
 export { tokens as stepsTokens } from './components/Steps/Steps.tokens.js';
 export { rangeConfig, rangeRoot } from './components/Range/Range.js';
@@ -193,16 +202,4 @@ export { tokens as editableTokens } from './components/Editable/Editable.tokens.
 export { composeMask } from './components/Mask/Mask.js';
 export { attachConfig, attachRoot } from './components/Attach/Attach.js';
 export { tokens as attachTokens } from './components/Attach/Attach.tokens.js';
-export { component, mergeConfig } from './engines/common.js';
-export { canUseDOM } from './utils/canUseDOM.js';
-export { extractTextFrom } from './utils/extractTextFrom.js';
-export { getSizeValueFromProp } from './utils/getSizeValueFromProp.js';
-export { IS_REACT_18, safeUseId } from './utils/react.js';
-export { isNumber } from './utils/isNumber.js';
-export { mergeRefs, setRefList } from './utils/setRefList.js';
-export { isEmpty } from './utils/isEmpty.js';
-export { noop } from './utils/noop.js';
-export { getPlacement, getPlacements } from './utils/getPopoverPlacement.js';
-import * as constants from './utils/constants.js';
-export { constants };
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/utils/index.js

@@ -1,6 +1,3 @@
-import 'react';
-export { IS_REACT_18, safeUseId } from './react.js';
-
 var cx = function cx() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];

package/es/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport { noop } from './noop';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;AAaaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport { noop } from './noop';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":"AAaaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-new-hope",
-  "version": "0.173.1-canary.1502.11462220468.0",
+  "version": "0.173.1-dev.0",
   "description": "Salute Design System blueprint",
   "main": "cjs/index.js",
   "module": "es/index.js",
@@ -124,5 +124,8 @@
     "react-popper": "2.3.0",
     "storeon": "3.1.5"
   },
-  "gitHead": "bfd0359542e038445ab1cb5c1e264003a06fd6b4"
+  "sideEffects": [
+    "*.css"
+  ],
+  "gitHead": "2123c7417f7cfec88d4327781cb9ac0f24a8c8af"
 }

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js

@@ -10,7 +10,6 @@ var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _tokens = /*#__PURE__*/require("../../../tokens");
 var _utils = /*#__PURE__*/require("../../../../../utils");
 var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
-var _const = /*#__PURE__*/require("../const");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_pilled/base");
@@ -20,11 +19,6 @@ var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalTabItemRoot(Root) {
@@ -49,12 +43,6 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
       className = props.className,
       onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
-    var restRootProps = size && (0, _const.isHeaderSize)(size) ? _objectSpread({
-      size: size
-    }, rest) : _objectSpread({
-      size: size,
-      pilled: pilled
-    }, rest);
     var innerRef = (0, _react.useRef)(null);
     var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
     var refs = (0, _react.useContext)(_TabsContext.TabsContext);
@@ -111,13 +99,15 @@ var horizontalTabItemRoot = exports.horizontalTabItemRoot = function horizontalT
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
+      pilled: pilled,
       role: role,
       view: view,
+      size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
       className: (0, _utils.cx)(pilledClass, selectedClass, animatedClass, className),
       onClick: handleClick
-    }, restRootProps), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.LeftContent, {
+    }, rest), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, contentLeft && /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.LeftContent, {
       className: _tokens.classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/_react["default"].createElement(_HorizontalTabItem.StyledContent, {
       className: _tokens.classes.tabContent

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -11,14 +11,13 @@ var _Icon = /*#__PURE__*/require("../../../../_Icon");
 var _tokens = /*#__PURE__*/require("../../../tokens");
 var _utils = /*#__PURE__*/require("../../../../../utils");
 var _TabsContext = /*#__PURE__*/require("../../../TabsContext");
-var _const = /*#__PURE__*/require("../const");
 var _base = /*#__PURE__*/require("./variations/_size/base");
 var _base2 = /*#__PURE__*/require("./variations/_view/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
 var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
 var _base5 = /*#__PURE__*/require("./variations/_stretch/base");
 var _HorizontalTabs = /*#__PURE__*/require("./HorizontalTabs.styles");
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className", "hasDivider", "outsideScroll"];
+var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -28,11 +27,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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 = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Keys = /*#__PURE__*/function (Keys) {
@@ -58,17 +52,7 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
       pilled = _props$pilled === void 0 ? false : _props$pilled,
       index = props.index,
       className = props.className,
-      _props$hasDivider = props.hasDivider,
-      hasDivider = _props$hasDivider === void 0 ? true : _props$hasDivider,
-      outsideScroll = props.outsideScroll,
       rest = _objectWithoutProperties(props, _excluded);
-    var restRootProps = size && (0, _const.isHeaderSize)(size) ? _objectSpread({
-      size: size
-    }, rest) : _objectSpread({
-      size: size,
-      pilled: pilled,
-      outsideScroll: outsideScroll
-    }, rest);
     var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
       firstItemVisible = _useState2[0],
@@ -85,7 +69,6 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
     var isFilled = view === 'filled'; // outer padding is only for filled view
     var pilledAttr = view !== 'clear' && pilled;
     var pilledClass = pilledAttr ? _tokens.classes.tabsPilled : undefined;
-    var noDividerClass = !hasDivider ? _tokens.classes.tabsNoDivider : undefined;
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? _tokens.classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? _tokens.classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? _tokens.classes.tabsHasRightArrow : undefined;
@@ -216,12 +199,14 @@ var horizontalTabsRoot = exports.horizontalTabsRoot = function horizontalTabsRoo
     }, /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,
       role: "tablist",
+      size: size,
+      pilled: pilled,
       id: tabsId,
       ref: outerRef,
       disabled: disabled,
-      className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
+      className: (0, _utils.cx)(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
-    }, restRootProps), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledContentWrapper, {
+    }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/_react["default"].createElement(_HorizontalTabs.StyledContentWrapper, {
       className: (0, _utils.cx)(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll

package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/variations/_view/base.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _tokens = /*#__PURE__*/require("../../../../../tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}&.", "{&::after{height:0;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerHeight, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasLeftArrow, _tokens.classes.tabsHasRightArrow, _tokens.classes.tabsNoDivider);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["background-color:var(", ");&::after{content:'';position:absolute;bottom:0.125rem;left:0.125rem;right:0.125rem;background:var(", ");height:var(", ");border-radius:var(", ");}&.", "{&::after{left:1.5rem;}}&.", "{&::after{right:1.5rem;}}"], _tokens.tokens.tabsBackgroundColor, _tokens.tokens.tabsDividerColor, _tokens.tokens.tabsDividerHeight, _tokens.tokens.tabsDividerBorderRadius, _tokens.classes.tabsHasLeftArrow, _tokens.classes.tabsHasRightArrow);

package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx

@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
 import { TabItem } from './TabItem';
 
 const clips = ['none', 'scroll', 'showAll'];
-const headerClips = ['none', 'scroll'];
 const sizes = ['xs', 's', 'm', 'l'] as const;
 const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
 
@@ -21,6 +20,7 @@ type HeaderSize = typeof headerSizes[number];
 
 type CustomStoryTabsProps = {
     itemQuantity: number;
+    hasDivider: boolean;
     contentLeft: string;
     contentRight: string;
     stretch: boolean;
@@ -30,12 +30,12 @@ type CustomStoryTabsProps = {
 const contentLeftOptions = ['none', 'icon'];
 const contentRightOptions = ['none', 'counter', 'icon'];
 
-const getContentLeft = (contentLeftOption: string, size: string) => {
+const getContentLeft = (contentLeftOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
 };
 
-const getContentRight = (contentRightOption: string, size: string) => {
+const getContentRight = (contentRightOption: string, size: Size) => {
     const iconSize = size === 'xs' ? 'xs' : 's';
     const counterSize = size === 'xs' ? 'xxs' : 'xs';
 
@@ -96,7 +96,7 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -152,7 +152,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size} style={{ width }}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} style={{ width }}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -220,7 +220,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
     });
 
     return (
-        <Tabs clip={clip} view="divider" hasDivider={hasDivider} disabled={disabled} size={size}>
+        <Tabs clip={clip} view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size}>
             {visibleItems.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -603,47 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
     },
 };
 
-const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText } = props;
-    const items = Array(itemQuantity).fill(0);
-    const [index, setIndex] = useState(0);
-
-    return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
-            {items.map((_, i) => (
-                <TabItem
-                    key={`item:${i}`}
-                    view="clear"
-                    selected={i === index}
-                    onClick={() => !disabled && setIndex(i)}
-                    tabIndex={!disabled ? 0 : -1}
-                    disabled={disabled}
-                    value={helperText}
-                    size={size as HeaderSize}
-                >
-                    {`Label${i + 1}`}
-                </TabItem>
-            ))}
-        </Tabs>
-    );
-};
-
-const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText, width } = props;
+const StoryHeaderTabs = (props: StoryTabsProps) => {
+    const {
+        disabled,
+        itemQuantity,
+        size,
+        contentLeft: contentLeftOption,
+        contentRight: contentRightOption,
+        hasDivider,
+        stretch,
+    } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs view="clear" disabled={disabled} size={size as HeaderSize} style={{ width }}>
+        <Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
-                    view="clear"
+                    view="divider"
                     selected={i === index}
                     onClick={() => !disabled && setIndex(i)}
                     tabIndex={!disabled ? 0 : -1}
                     disabled={disabled}
-                    value={helperText}
+                    contentLeft={getContentLeft(contentLeftOption, size as Size)}
+                    contentRight={getContentRight(contentRightOption, size as Size)}
                     size={size as HeaderSize}
                 >
                     {`Label${i + 1}`}
@@ -653,60 +637,37 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
     );
 };
 
-export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
+export const HeaderTabs: StoryObj<StoryTabsProps> = {
     args: {
         size: 'h5',
         disabled: false,
-        helperText: '',
-        itemQuantity: 6,
-        width: '12rem',
+        hasDivider: true,
+        itemQuantity: 4,
     },
     argTypes: {
-        clip: {
-            options: headerClips,
+        size: {
+            options: headerSizes,
             control: {
                 type: 'select',
             },
         },
-        width: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'clip', eq: 'scroll' },
-        },
-        stretch: {
-            table: {
-                disable: true,
-            },
-        },
         contentLeft: {
-            table: {
-                disable: true,
+            options: contentLeftOptions,
+            control: {
+                type: 'select',
             },
         },
         contentRight: {
-            table: {
-                disable: true,
+            options: contentRightOptions,
+            control: {
+                type: 'select',
             },
         },
-        hasDivider: {
+        clip: {
             table: {
                 disable: true,
             },
         },
-        size: {
-            options: headerSizes,
-            control: {
-                type: 'select',
-            },
-        },
-    },
-    render: (args) => {
-        switch (args.clip) {
-            case 'scroll':
-                return <StoryHeaderScroll {...args} />;
-            default:
-                return <StoryHeaderDefault {...args} />;
-        }
     },
+    render: (args) => <StoryHeaderTabs {...args} />,
 };