@wix/design-system 1.157.0 → 1.158.0

package/dist/cjs/VerticalTabsItem/components/ActionItem.js

@@ -6,8 +6,9 @@ exports.ActionItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _VerticalTabsItemSt = require("../VerticalTabsItem.st.css.js");
 var _Affix = require("./Affix");
-var _dataHooks = _interopRequireDefault(require("../dataHooks"));
+var _VerticalTabsItem = require("../VerticalTabsItem.constants");
 var _TextButton = _interopRequireDefault(require("../../TextButton"));
+var _VerticalTabs = require("../../VerticalTabs/VerticalTabs.constants");
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/VerticalTabsItem/components/ActionItem.tsx";
 var ActionItem = _ref => {
   var {
@@ -29,11 +30,11 @@ var ActionItem = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 25,
+      lineNumber: 26,
       columnNumber: 3
     }
   }, /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
-    dataHook: _dataHooks.default.verticalTabsItemPrefixIcon,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_PREFIX_ICON,
     size: size,
     className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.prefixIcon, {
       action: true
@@ -41,28 +42,28 @@ var ActionItem = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 37,
+      lineNumber: 38,
       columnNumber: 5
     }
   }, prefixIcon), /*#__PURE__*/_react.default.createElement(_TextButton.default, {
     weight: "thin",
     className: _VerticalTabsItemSt.classes.textButton,
-    size: size === 'tiny' ? 'small' : size,
-    dataHook: _dataHooks.default.verticalTabsItemText,
+    size: size === _VerticalTabs.SIZE.TINY ? _VerticalTabs.SIZE.SMALL : size,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_TEXT,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 45,
+      lineNumber: 46,
       columnNumber: 5
     }
   }, children), /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
-    dataHook: _dataHooks.default.verticalTabsItemSuffixIcon,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_SUFFIX_ICON,
     size: size,
     className: _VerticalTabsItemSt.classes.suffixIcon,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 55,
       columnNumber: 5
     }
   }, suffixIcon));

package/dist/cjs/VerticalTabsItem/components/ActionItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabsItemSt","_Affix","_dataHooks","_TextButton","_jsxFileName","ActionItem","_ref","children","dataHook","prefixIcon","suffixIcon","size","baseSkin","default","createElement","className","st","classes","root","cssStates","__self","__source","fileName","lineNumber","columnNumber","Affix","dataHooks","verticalTabsItemPrefixIcon","action","weight","textButton","verticalTabsItemText","verticalTabsItemSuffixIcon","exports"],"sources":["../../../../src/VerticalTabsItem/components/ActionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { st, classes, cssStates } from '../VerticalTabsItem.st.css';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { Affix } from './Affix';\nimport dataHooks from '../dataHooks';\nimport TextButton from '../../TextButton';\n\nexport type ActionItemProps = Pick<\n  VerticalTabsItemProps,\n  'children' | 'dataHook' | 'prefixIcon' | 'suffixIcon'\n> & {\n  baseSkin?: VerticalTabsContextValue['skin'];\n  size?: VerticalTabsContextValue['size'];\n};\n\nconst ActionItem = ({\n  children,\n  dataHook,\n  prefixIcon,\n  suffixIcon,\n  size,\n  baseSkin,\n}: ActionItemProps) => (\n  <div\n    className={st(\n      classes.root,\n      cssStates({\n        size,\n        baseSkin,\n        suffixIcon: !!suffixIcon,\n        prefixIcon: !!prefixIcon,\n      }),\n    )}\n    data-hook={dataHook}\n  >\n    <Affix\n      dataHook={dataHooks.verticalTabsItemPrefixIcon}\n      size={size}\n      className={st(classes.prefixIcon, { action: true })}\n    >\n      {prefixIcon}\n    </Affix>\n\n    <TextButton\n      weight=\"thin\"\n      className={classes.textButton}\n      size={size === 'tiny' ? 'small' : size}\n      dataHook={dataHooks.verticalTabsItemText}\n    >\n      {children}\n    </TextButton>\n\n    <Affix\n      dataHook={dataHooks.verticalTabsItemSuffixIcon}\n      size={size}\n      className={classes.suffixIcon}\n    >\n      {suffixIcon}\n    </Affix>\n  </div>\n);\n\nexport { ActionItem };\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAGA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AAA0C,IAAAK,YAAA;AAU1C,IAAMC,UAAU,GAAGC,IAAA;EAAA,IAAC;IAClBC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC;EACe,CAAC,GAAAN,IAAA;EAAA,oBAChBT,MAAA,CAAAgB,OAAA,CAAAC,aAAA;IACEC,SAAS,EAAE,IAAAC,sBAAE,EACXC,2BAAO,CAACC,IAAI,EACZ,IAAAC,6BAAS,EAAC;MACRR,IAAI;MACJC,QAAQ;MACRF,UAAU,EAAE,CAAC,CAACA,UAAU;MACxBD,UAAU,EAAE,CAAC,CAACA;IAChB,CAAC,CACH,CAAE;IACF,aAAWD,QAAS;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEpB3B,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,MAAA,CAAAwB,KAAK;IACJjB,QAAQ,EAAEkB,kBAAS,CAACC,0BAA2B;IAC/ChB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAE,IAAAC,sBAAE,EAACC,2BAAO,CAACR,UAAU,EAAE;MAAEmB,MAAM,EAAE;IAAK,CAAC,CAAE;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEnDf,UACI,CAAC,eAERZ,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACX,WAAA,CAAAU,OAAU;IACTgB,MAAM,EAAC,MAAM;IACbd,SAAS,EAAEE,2BAAO,CAACa,UAAW;IAC9BnB,IAAI,EAAEA,IAAI,KAAK,MAAM,GAAG,OAAO,GAAGA,IAAK;IACvCH,QAAQ,EAAEkB,kBAAS,CAACK,oBAAqB;IAAAX,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAExCjB,QACS,CAAC,eAEbV,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,MAAA,CAAAwB,KAAK;IACJjB,QAAQ,EAAEkB,kBAAS,CAACM,0BAA2B;IAC/CrB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAEE,2BAAO,CAACP,UAAW;IAAAU,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7Bd,UACI,CACJ,CAAC;AAAA,CACP;AAACuB,OAAA,CAAA5B,UAAA,GAAAA,UAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabsItemSt","_Affix","_VerticalTabsItem","_TextButton","_VerticalTabs","_jsxFileName","ActionItem","_ref","children","dataHook","prefixIcon","suffixIcon","size","baseSkin","default","createElement","className","st","classes","root","cssStates","__self","__source","fileName","lineNumber","columnNumber","Affix","DATA_HOOKS","ITEM_PREFIX_ICON","action","weight","textButton","SIZE","TINY","SMALL","ITEM_TEXT","ITEM_SUFFIX_ICON","exports"],"sources":["../../../../src/VerticalTabsItem/components/ActionItem.tsx"],"sourcesContent":["import React from 'react';\nimport { st, classes, cssStates } from '../VerticalTabsItem.st.css';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { Affix } from './Affix';\nimport { DATA_HOOKS } from '../VerticalTabsItem.constants';\nimport TextButton from '../../TextButton';\nimport { SIZE } from '../../VerticalTabs/VerticalTabs.constants';\n\nexport type ActionItemProps = Pick<\n  VerticalTabsItemProps,\n  'children' | 'dataHook' | 'prefixIcon' | 'suffixIcon'\n> & {\n  baseSkin?: VerticalTabsContextValue['skin'];\n  size?: VerticalTabsContextValue['size'];\n};\n\nconst ActionItem = ({\n  children,\n  dataHook,\n  prefixIcon,\n  suffixIcon,\n  size,\n  baseSkin,\n}: ActionItemProps) => (\n  <div\n    className={st(\n      classes.root,\n      cssStates({\n        size,\n        baseSkin,\n        suffixIcon: !!suffixIcon,\n        prefixIcon: !!prefixIcon,\n      }),\n    )}\n    data-hook={dataHook}\n  >\n    <Affix\n      dataHook={DATA_HOOKS.ITEM_PREFIX_ICON}\n      size={size}\n      className={st(classes.prefixIcon, { action: true })}\n    >\n      {prefixIcon}\n    </Affix>\n\n    <TextButton\n      weight=\"thin\"\n      className={classes.textButton}\n      size={size === SIZE.TINY ? SIZE.SMALL : size}\n      dataHook={DATA_HOOKS.ITEM_TEXT}\n    >\n      {children}\n    </TextButton>\n\n    <Affix\n      dataHook={DATA_HOOKS.ITEM_SUFFIX_ICON}\n      size={size}\n      className={classes.suffixIcon}\n    >\n      {suffixIcon}\n    </Affix>\n  </div>\n);\n\nexport { ActionItem };\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAGA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAAiE,IAAAM,YAAA;AAUjE,IAAMC,UAAU,GAAGC,IAAA;EAAA,IAAC;IAClBC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC;EACe,CAAC,GAAAN,IAAA;EAAA,oBAChBV,MAAA,CAAAiB,OAAA,CAAAC,aAAA;IACEC,SAAS,EAAE,IAAAC,sBAAE,EACXC,2BAAO,CAACC,IAAI,EACZ,IAAAC,6BAAS,EAAC;MACRR,IAAI;MACJC,QAAQ;MACRF,UAAU,EAAE,CAAC,CAACA,UAAU;MACxBD,UAAU,EAAE,CAAC,CAACA;IAChB,CAAC,CACH,CAAE;IACF,aAAWD,QAAS;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEpB5B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,MAAA,CAAAyB,KAAK;IACJjB,QAAQ,EAAEkB,4BAAU,CAACC,gBAAiB;IACtChB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAE,IAAAC,sBAAE,EAACC,2BAAO,CAACR,UAAU,EAAE;MAAEmB,MAAM,EAAE;IAAK,CAAC,CAAE;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEnDf,UACI,CAAC,eAERb,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACZ,WAAA,CAAAW,OAAU;IACTgB,MAAM,EAAC,MAAM;IACbd,SAAS,EAAEE,2BAAO,CAACa,UAAW;IAC9BnB,IAAI,EAAEA,IAAI,KAAKoB,kBAAI,CAACC,IAAI,GAAGD,kBAAI,CAACE,KAAK,GAAGtB,IAAK;IAC7CH,QAAQ,EAAEkB,4BAAU,CAACQ,SAAU;IAAAd,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE9BjB,QACS,CAAC,eAEbX,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,MAAA,CAAAyB,KAAK;IACJjB,QAAQ,EAAEkB,4BAAU,CAACS,gBAAiB;IACtCxB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAEE,2BAAO,CAACP,UAAW;IAAAU,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAlB,YAAA;MAAAmB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7Bd,UACI,CACJ,CAAC;AAAA,CACP;AAAC0B,OAAA,CAAA/B,UAAA,GAAAA,UAAA","ignoreList":[]}

package/dist/cjs/VerticalTabsItem/components/Affix.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.Affix = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _VerticalTabs = require("../../VerticalTabs/VerticalTabs.constants");
 var Affix = _ref => {
   var {
     dataHook,
@@ -12,7 +13,7 @@ var Affix = _ref => {
     className
   } = _ref;
   return children ? /*#__PURE__*/_react.default.cloneElement(children, {
-    size: size === 'medium' ? 24 : 18,
+    size: size === _VerticalTabs.SIZE.MEDIUM ? 24 : 18,
     className,
     'data-hook': dataHook
   }) : null;

package/dist/cjs/VerticalTabsItem/components/Affix.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","Affix","_ref","dataHook","children","size","className","React","cloneElement","exports"],"sources":["../../../../src/VerticalTabsItem/components/Affix.tsx"],"sourcesContent":["import React from 'react';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\n\ntype TabAffixProps = Pick<VerticalTabsContextValue, 'size'> & {\n  children:\n    | VerticalTabsItemProps['prefixIcon']\n    | VerticalTabsItemProps['suffixIcon'];\n  dataHook?: string;\n  className?: string;\n};\n\nconst Affix = ({ dataHook, children, size, className }: TabAffixProps) => {\n  return children\n    ? React.cloneElement(children, {\n        size: size === 'medium' ? 24 : 18,\n        className,\n        'data-hook': dataHook,\n      })\n    : null;\n};\n\nexport { Affix };\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAYA,IAAMC,KAAK,GAAGC,IAAA,IAA4D;EAAA,IAA3D;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAyB,CAAC,GAAAJ,IAAA;EACnE,OAAOE,QAAQ,gBACXG,cAAK,CAACC,YAAY,CAACJ,QAAQ,EAAE;IAC3BC,IAAI,EAAEA,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE;IACjCC,SAAS;IACT,WAAW,EAAEH;EACf,CAAC,CAAC,GACF,IAAI;AACV,CAAC;AAACM,OAAA,CAAAR,KAAA,GAAAA,KAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabs","Affix","_ref","dataHook","children","size","className","React","cloneElement","SIZE","MEDIUM","exports"],"sources":["../../../../src/VerticalTabsItem/components/Affix.tsx"],"sourcesContent":["import React from 'react';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { SIZE } from '../../VerticalTabs/VerticalTabs.constants';\n\ntype TabAffixProps = Pick<VerticalTabsContextValue, 'size'> & {\n  children:\n    | VerticalTabsItemProps['prefixIcon']\n    | VerticalTabsItemProps['suffixIcon'];\n  dataHook?: string;\n  className?: string;\n};\n\nconst Affix = ({ dataHook, children, size, className }: TabAffixProps) => {\n  return children\n    ? React.cloneElement(children, {\n        size: size === SIZE.MEDIUM ? 24 : 18,\n        className,\n        'data-hook': dataHook,\n      })\n    : null;\n};\n\nexport { Affix };\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,aAAA,GAAAD,OAAA;AAUA,IAAME,KAAK,GAAGC,IAAA,IAA4D;EAAA,IAA3D;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,IAAI;IAAEC;EAAyB,CAAC,GAAAJ,IAAA;EACnE,OAAOE,QAAQ,gBACXG,cAAK,CAACC,YAAY,CAACJ,QAAQ,EAAE;IAC3BC,IAAI,EAAEA,IAAI,KAAKI,kBAAI,CAACC,MAAM,GAAG,EAAE,GAAG,EAAE;IACpCJ,SAAS;IACT,WAAW,EAAEH;EACf,CAAC,CAAC,GACF,IAAI;AACV,CAAC;AAACQ,OAAA,CAAAV,KAAA,GAAAA,KAAA","ignoreList":[]}

package/dist/cjs/VerticalTabsItem/components/SelectableItem.js

@@ -6,8 +6,9 @@ exports.SelectableItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _VerticalTabsItemSt = require("../VerticalTabsItem.st.css.js");
 var _Affix = require("./Affix");
-var _dataHooks = _interopRequireDefault(require("../dataHooks"));
+var _VerticalTabsItem = require("../VerticalTabsItem.constants");
 var _ = require("../..");
+var _VerticalTabs = require("../../VerticalTabs/VerticalTabs.constants");
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/VerticalTabsItem/components/SelectableItem.tsx";
 var SelectableItem = _ref => {
   var {
@@ -28,11 +29,12 @@ var SelectableItem = _ref => {
     focusableOnBlur
   } = _ref;
   var onKeyDown = e => {
-    if (e.key === 'Enter' && id !== undefined) {
+    if ((e.key === ' ' || e.key === 'Space' || e.key === 'Enter') && id !== undefined) {
       onChange == null || onChange(id);
     }
   };
   return /*#__PURE__*/_react.default.createElement("div", {
+    id: String(id),
     className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.root, _VerticalTabsItemSt.classes.selectableItem, (0, _VerticalTabsItemSt.cssStates)({
       disabled,
       size,
@@ -42,51 +44,51 @@ var SelectableItem = _ref => {
       prefixIcon: !!prefixIcon,
       selected
     })),
-    onFocus: focusableOnFocus,
-    onBlur: focusableOnBlur,
-    id: typeof id === 'number' ? String(id) : id,
+    "data-hook": dataHook,
     tabIndex: tabIndex,
     role: "tab",
     "aria-selected": selected,
-    "data-hook": dataHook,
+    "aria-disabled": disabled,
     "aria-controls": ariaControls,
+    onFocus: focusableOnFocus,
+    onBlur: focusableOnBlur,
     onClick: !disabled && id !== undefined ? () => onChange == null ? void 0 : onChange(id) : undefined,
     onKeyDown: !disabled ? e => onKeyDown(e) : undefined,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 55,
+      lineNumber: 58,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
-    dataHook: _dataHooks.default.verticalTabsItemPrefixIcon,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_PREFIX_ICON,
     size: size,
     className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.prefixIcon),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 80,
+      lineNumber: 84,
       columnNumber: 7
     }
   }, prefixIcon), /*#__PURE__*/_react.default.createElement(_.Text, {
     className: _VerticalTabsItemSt.classes.text,
     weight: "thin",
-    size: size === 'tiny' ? 'small' : size,
-    dataHook: _dataHooks.default.verticalTabsItemText,
+    size: size === _VerticalTabs.SIZE.TINY ? _VerticalTabs.SIZE.SMALL : size,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_TEXT,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 88,
+      lineNumber: 92,
       columnNumber: 7
     }
   }, children), /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
-    dataHook: _dataHooks.default.verticalTabsItemSuffixIcon,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_SUFFIX_ICON,
     size: size,
     className: _VerticalTabsItemSt.classes.suffixIcon,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 97,
+      lineNumber: 101,
       columnNumber: 7
     }
   }, suffixIcon));

package/dist/cjs/VerticalTabsItem/components/SelectableItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabsItemSt","_Affix","_dataHooks","_","_jsxFileName","SelectableItem","_ref","children","dataHook","prefixIcon","suffixIcon","size","baseSkin","disabled","id","tabIndex","skin","selected","onChange","ariaControls","focusableOnFocus","focusableOnBlur","onKeyDown","e","key","undefined","default","createElement","className","st","classes","root","selectableItem","cssStates","onFocus","onBlur","String","role","onClick","__self","__source","fileName","lineNumber","columnNumber","Affix","dataHooks","verticalTabsItemPrefixIcon","Text","text","weight","verticalTabsItemText","verticalTabsItemSuffixIcon","exports"],"sources":["../../../../src/VerticalTabsItem/components/SelectableItem.tsx"],"sourcesContent":["import React from 'react';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { InjectedFocusableProps } from '../../common/Focusable';\nimport { st, classes, cssStates } from '../VerticalTabsItem.st.css';\nimport { Affix } from './Affix';\nimport dataHooks from '../dataHooks';\nimport { Text } from '../..';\n\ntype SelectableItemContainerProps<TabId extends string | number> = Pick<\n  InjectedFocusableProps<VerticalTabsItemProps<TabId>, HTMLDivElement>,\n  | 'children'\n  | 'dataHook'\n  | 'prefixIcon'\n  | 'suffixIcon'\n  | 'skin'\n  | 'tabIndex'\n  | 'id'\n  | 'disabled'\n  | 'aria-controls'\n  | 'focusableOnBlur'\n  | 'focusableOnFocus'\n  | 'aria-controls'\n> & {\n  baseSkin?: VerticalTabsContextValue['skin'];\n  size?: VerticalTabsContextValue['size'];\n  onChange?: VerticalTabsContextValue<TabId>['onChange'];\n  selected?: boolean;\n};\n\nconst SelectableItem = ({\n  children,\n  dataHook,\n  prefixIcon,\n  suffixIcon,\n  size,\n  baseSkin,\n  disabled,\n  id,\n  tabIndex,\n  skin,\n  selected,\n  onChange,\n  'aria-controls': ariaControls,\n  focusableOnFocus,\n  focusableOnBlur,\n}: SelectableItemContainerProps<number | string>) => {\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' && id !== undefined) {\n      onChange?.(id);\n    }\n  };\n\n  return (\n    <div\n      className={st(\n        classes.root,\n        classes.selectableItem,\n        cssStates({\n          disabled,\n          size,\n          baseSkin,\n          skin,\n          suffixIcon: !!suffixIcon,\n          prefixIcon: !!prefixIcon,\n          selected,\n        }),\n      )}\n      onFocus={focusableOnFocus}\n      onBlur={focusableOnBlur}\n      id={typeof id === 'number' ? String(id) : id}\n      tabIndex={tabIndex}\n      role=\"tab\"\n      aria-selected={selected}\n      data-hook={dataHook}\n      aria-controls={ariaControls}\n      onClick={!disabled && id !== undefined ? () => onChange?.(id) : undefined}\n      onKeyDown={!disabled ? e => onKeyDown(e) : undefined}\n    >\n      <Affix\n        dataHook={dataHooks.verticalTabsItemPrefixIcon}\n        size={size}\n        className={st(classes.prefixIcon)}\n      >\n        {prefixIcon}\n      </Affix>\n\n      <Text\n        className={classes.text}\n        weight=\"thin\"\n        size={size === 'tiny' ? 'small' : size}\n        dataHook={dataHooks.verticalTabsItemText}\n      >\n        {children}\n      </Text>\n\n      <Affix\n        dataHook={dataHooks.verticalTabsItemSuffixIcon}\n        size={size}\n        className={classes.suffixIcon}\n      >\n        {suffixIcon}\n      </Affix>\n    </div>\n  );\n};\n\nexport { SelectableItem };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabsItemSt","_Affix","_VerticalTabsItem","_","_VerticalTabs","_jsxFileName","SelectableItem","_ref","children","dataHook","prefixIcon","suffixIcon","size","baseSkin","disabled","id","tabIndex","skin","selected","onChange","ariaControls","focusableOnFocus","focusableOnBlur","onKeyDown","e","key","undefined","default","createElement","String","className","st","classes","root","selectableItem","cssStates","role","onFocus","onBlur","onClick","__self","__source","fileName","lineNumber","columnNumber","Affix","DATA_HOOKS","ITEM_PREFIX_ICON","Text","text","weight","SIZE","TINY","SMALL","ITEM_TEXT","ITEM_SUFFIX_ICON","exports"],"sources":["../../../../src/VerticalTabsItem/components/SelectableItem.tsx"],"sourcesContent":["import React from 'react';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { InjectedFocusableProps } from '../../common/Focusable';\nimport { st, classes, cssStates } from '../VerticalTabsItem.st.css';\nimport { Affix } from './Affix';\nimport { DATA_HOOKS } from '../VerticalTabsItem.constants';\nimport { Text } from '../..';\nimport { SIZE } from '../../VerticalTabs/VerticalTabs.constants';\n\ntype SelectableItemContainerProps<TabId extends string | number> = Pick<\n  InjectedFocusableProps<VerticalTabsItemProps<TabId>, HTMLDivElement>,\n  | 'children'\n  | 'dataHook'\n  | 'prefixIcon'\n  | 'suffixIcon'\n  | 'skin'\n  | 'tabIndex'\n  | 'id'\n  | 'disabled'\n  | 'aria-controls'\n  | 'focusableOnBlur'\n  | 'focusableOnFocus'\n> & {\n  baseSkin?: VerticalTabsContextValue['skin'];\n  size?: VerticalTabsContextValue['size'];\n  onChange?: VerticalTabsContextValue<TabId>['onChange'];\n  selected?: boolean;\n};\n\nconst SelectableItem = ({\n  children,\n  dataHook,\n  prefixIcon,\n  suffixIcon,\n  size,\n  baseSkin,\n  disabled,\n  id,\n  tabIndex,\n  skin,\n  selected,\n  onChange,\n  'aria-controls': ariaControls,\n  focusableOnFocus,\n  focusableOnBlur,\n}: SelectableItemContainerProps<number | string>) => {\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (\n      (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') &&\n      id !== undefined\n    ) {\n      onChange?.(id);\n    }\n  };\n\n  return (\n    <div\n      id={String(id)}\n      className={st(\n        classes.root,\n        classes.selectableItem,\n        cssStates({\n          disabled,\n          size,\n          baseSkin,\n          skin,\n          suffixIcon: !!suffixIcon,\n          prefixIcon: !!prefixIcon,\n          selected,\n        }),\n      )}\n      data-hook={dataHook}\n      tabIndex={tabIndex}\n      role=\"tab\"\n      aria-selected={selected}\n      aria-disabled={disabled}\n      aria-controls={ariaControls}\n      onFocus={focusableOnFocus}\n      onBlur={focusableOnBlur}\n      onClick={!disabled && id !== undefined ? () => onChange?.(id) : undefined}\n      onKeyDown={!disabled ? e => onKeyDown(e) : undefined}\n    >\n      <Affix\n        dataHook={DATA_HOOKS.ITEM_PREFIX_ICON}\n        size={size}\n        className={st(classes.prefixIcon)}\n      >\n        {prefixIcon}\n      </Affix>\n\n      <Text\n        className={classes.text}\n        weight=\"thin\"\n        size={size === SIZE.TINY ? SIZE.SMALL : size}\n        dataHook={DATA_HOOKS.ITEM_TEXT}\n      >\n        {children}\n      </Text>\n\n      <Affix\n        dataHook={DATA_HOOKS.ITEM_SUFFIX_ICON}\n        size={size}\n        className={classes.suffixIcon}\n      >\n        {suffixIcon}\n      </Affix>\n    </div>\n  );\n};\n\nexport { SelectableItem };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/VerticalTabsItem/components/TitleItem.js

@@ -7,7 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 var _VerticalTabsItemSt = require("../VerticalTabsItem.st.css.js");
 var _Affix = require("./Affix");
 var _ = require("../..");
-var _dataHooks = _interopRequireDefault(require("../dataHooks"));
+var _VerticalTabs = require("../../VerticalTabs/VerticalTabs.constants");
+var _VerticalTabsItem = require("../VerticalTabsItem.constants");
 var _jsxFileName = "/home/builduser/work/b60d7defec63c7cc/packages/wix-design-system/dist/cjs/VerticalTabsItem/components/TitleItem.tsx";
 var TitleItem = _ref => {
   var {
@@ -29,40 +30,40 @@ var TitleItem = _ref => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 25,
+      lineNumber: 26,
       columnNumber: 3
     }
   }, /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
-    dataHook: _dataHooks.default.verticalTabsItemPrefixIcon,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_PREFIX_ICON,
     size: size,
     className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.prefixIcon),
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 38,
+      lineNumber: 39,
       columnNumber: 5
     }
   }, prefixIcon), /*#__PURE__*/_react.default.createElement(_.Text, {
     className: _VerticalTabsItemSt.classes.text,
     light: true,
     secondary: true,
-    weight: size === 'tiny' ? 'bold' : 'thin',
-    size: size === 'tiny' ? 'tiny' : 'small',
-    dataHook: _dataHooks.default.verticalTabsItemText,
+    weight: size === _VerticalTabs.SIZE.TINY ? 'bold' : 'thin',
+    size: size === _VerticalTabs.SIZE.MEDIUM ? _VerticalTabs.SIZE.SMALL : size,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_TEXT,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 46,
+      lineNumber: 47,
       columnNumber: 5
     }
   }, children), /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
-    dataHook: _dataHooks.default.verticalTabsItemSuffixIcon,
+    dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_SUFFIX_ICON,
     size: size,
     className: _VerticalTabsItemSt.classes.suffixIcon,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 57,
+      lineNumber: 58,
       columnNumber: 5
     }
   }, suffixIcon));

package/dist/cjs/VerticalTabsItem/components/TitleItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabsItemSt","_Affix","_","_dataHooks","_jsxFileName","TitleItem","_ref","children","dataHook","prefixIcon","suffixIcon","size","baseSkin","default","createElement","className","st","classes","root","title","cssStates","__self","__source","fileName","lineNumber","columnNumber","Affix","dataHooks","verticalTabsItemPrefixIcon","Text","text","light","secondary","weight","verticalTabsItemText","verticalTabsItemSuffixIcon","exports"],"sources":["../../../../src/VerticalTabsItem/components/TitleItem.tsx"],"sourcesContent":["import React from 'react';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { st, classes, cssStates } from '../VerticalTabsItem.st.css';\nimport { Affix } from './Affix';\nimport { Text } from '../..';\nimport dataHooks from '../dataHooks';\n\nexport type TitleItemProps = Pick<\n  VerticalTabsItemProps,\n  'children' | 'dataHook' | 'prefixIcon' | 'suffixIcon'\n> & {\n  baseSkin?: VerticalTabsContextValue['skin'];\n  size?: VerticalTabsContextValue['size'];\n};\n\nconst TitleItem = ({\n  children,\n  dataHook,\n  prefixIcon,\n  suffixIcon,\n  size,\n  baseSkin,\n}: TitleItemProps) => (\n  <div\n    className={st(\n      classes.root,\n      classes.title,\n      cssStates({\n        size,\n        baseSkin,\n        suffixIcon: !!suffixIcon,\n        prefixIcon: !!prefixIcon,\n      }),\n    )}\n    data-hook={dataHook}\n  >\n    <Affix\n      dataHook={dataHooks.verticalTabsItemPrefixIcon}\n      size={size}\n      className={st(classes.prefixIcon)}\n    >\n      {prefixIcon}\n    </Affix>\n\n    <Text\n      className={classes.text}\n      light\n      secondary\n      weight={size === 'tiny' ? 'bold' : 'thin'}\n      size={size === 'tiny' ? 'tiny' : 'small'}\n      dataHook={dataHooks.verticalTabsItemText}\n    >\n      {children}\n    </Text>\n\n    <Affix\n      dataHook={dataHooks.verticalTabsItemSuffixIcon}\n      size={size}\n      className={classes.suffixIcon}\n    >\n      {suffixIcon}\n    </Affix>\n  </div>\n);\n\nexport { TitleItem };\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,CAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAqC,IAAAK,YAAA;AAUrC,IAAMC,SAAS,GAAGC,IAAA;EAAA,IAAC;IACjBC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC;EACc,CAAC,GAAAN,IAAA;EAAA,oBACfT,MAAA,CAAAgB,OAAA,CAAAC,aAAA;IACEC,SAAS,EAAE,IAAAC,sBAAE,EACXC,2BAAO,CAACC,IAAI,EACZD,2BAAO,CAACE,KAAK,EACb,IAAAC,6BAAS,EAAC;MACRT,IAAI;MACJC,QAAQ;MACRF,UAAU,EAAE,CAAC,CAACA,UAAU;MACxBD,UAAU,EAAE,CAAC,CAACA;IAChB,CAAC,CACH,CAAE;IACF,aAAWD,QAAS;IAAAa,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEpB5B,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,MAAA,CAAAyB,KAAK;IACJlB,QAAQ,EAAEmB,kBAAS,CAACC,0BAA2B;IAC/CjB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAE,IAAAC,sBAAE,EAACC,2BAAO,CAACR,UAAU,CAAE;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEjChB,UACI,CAAC,eAERZ,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACZ,CAAA,CAAA2B,IAAI;IACHd,SAAS,EAAEE,2BAAO,CAACa,IAAK;IACxBC,KAAK;IACLC,SAAS;IACTC,MAAM,EAAEtB,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,MAAO;IAC1CA,IAAI,EAAEA,IAAI,KAAK,MAAM,GAAG,MAAM,GAAG,OAAQ;IACzCH,QAAQ,EAAEmB,kBAAS,CAACO,oBAAqB;IAAAb,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAExClB,QACG,CAAC,eAEPV,MAAA,CAAAgB,OAAA,CAAAC,aAAA,CAACb,MAAA,CAAAyB,KAAK;IACJlB,QAAQ,EAAEmB,kBAAS,CAACQ,0BAA2B;IAC/CxB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAEE,2BAAO,CAACP,UAAW;IAAAW,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7Bf,UACI,CACJ,CAAC;AAAA,CACP;AAAC0B,OAAA,CAAA/B,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_VerticalTabsItemSt","_Affix","_","_VerticalTabs","_VerticalTabsItem","_jsxFileName","TitleItem","_ref","children","dataHook","prefixIcon","suffixIcon","size","baseSkin","default","createElement","className","st","classes","root","title","cssStates","__self","__source","fileName","lineNumber","columnNumber","Affix","DATA_HOOKS","ITEM_PREFIX_ICON","Text","text","light","secondary","weight","SIZE","TINY","MEDIUM","SMALL","ITEM_TEXT","ITEM_SUFFIX_ICON","exports"],"sources":["../../../../src/VerticalTabsItem/components/TitleItem.tsx"],"sourcesContent":["import React from 'react';\nimport { VerticalTabsItemProps } from '../VerticalTabsItem.types';\nimport { VerticalTabsContextValue } from '../../VerticalTabs/VerticalTabsContext';\nimport { st, classes, cssStates } from '../VerticalTabsItem.st.css';\nimport { Affix } from './Affix';\nimport { Text } from '../..';\nimport { SIZE } from '../../VerticalTabs/VerticalTabs.constants';\nimport { DATA_HOOKS } from '../VerticalTabsItem.constants';\n\nexport type TitleItemProps = Pick<\n  VerticalTabsItemProps,\n  'children' | 'dataHook' | 'prefixIcon' | 'suffixIcon'\n> & {\n  baseSkin?: VerticalTabsContextValue['skin'];\n  size?: VerticalTabsContextValue['size'];\n};\n\nconst TitleItem = ({\n  children,\n  dataHook,\n  prefixIcon,\n  suffixIcon,\n  size,\n  baseSkin,\n}: TitleItemProps) => (\n  <div\n    className={st(\n      classes.root,\n      classes.title,\n      cssStates({\n        size,\n        baseSkin,\n        suffixIcon: !!suffixIcon,\n        prefixIcon: !!prefixIcon,\n      }),\n    )}\n    data-hook={dataHook}\n  >\n    <Affix\n      dataHook={DATA_HOOKS.ITEM_PREFIX_ICON}\n      size={size}\n      className={st(classes.prefixIcon)}\n    >\n      {prefixIcon}\n    </Affix>\n\n    <Text\n      className={classes.text}\n      light\n      secondary\n      weight={size === SIZE.TINY ? 'bold' : 'thin'}\n      size={size === SIZE.MEDIUM ? SIZE.SMALL : size}\n      dataHook={DATA_HOOKS.ITEM_TEXT}\n    >\n      {children}\n    </Text>\n\n    <Affix\n      dataHook={DATA_HOOKS.ITEM_SUFFIX_ICON}\n      size={size}\n      className={classes.suffixIcon}\n    >\n      {suffixIcon}\n    </Affix>\n  </div>\n);\n\nexport { TitleItem };\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,CAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AAA2D,IAAAM,YAAA;AAU3D,IAAMC,SAAS,GAAGC,IAAA;EAAA,IAAC;IACjBC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,IAAI;IACJC;EACc,CAAC,GAAAN,IAAA;EAAA,oBACfV,MAAA,CAAAiB,OAAA,CAAAC,aAAA;IACEC,SAAS,EAAE,IAAAC,sBAAE,EACXC,2BAAO,CAACC,IAAI,EACZD,2BAAO,CAACE,KAAK,EACb,IAAAC,6BAAS,EAAC;MACRT,IAAI;MACJC,QAAQ;MACRF,UAAU,EAAE,CAAC,CAACA,UAAU;MACxBD,UAAU,EAAE,CAAC,CAACA;IAChB,CAAC,CACH,CAAE;IACF,aAAWD,QAAS;IAAAa,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEpB7B,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,MAAA,CAAA0B,KAAK;IACJlB,QAAQ,EAAEmB,4BAAU,CAACC,gBAAiB;IACtCjB,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAE,IAAAC,sBAAE,EAACC,2BAAO,CAACR,UAAU,CAAE;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEjChB,UACI,CAAC,eAERb,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACb,CAAA,CAAA4B,IAAI;IACHd,SAAS,EAAEE,2BAAO,CAACa,IAAK;IACxBC,KAAK;IACLC,SAAS;IACTC,MAAM,EAAEtB,IAAI,KAAKuB,kBAAI,CAACC,IAAI,GAAG,MAAM,GAAG,MAAO;IAC7CxB,IAAI,EAAEA,IAAI,KAAKuB,kBAAI,CAACE,MAAM,GAAGF,kBAAI,CAACG,KAAK,GAAG1B,IAAK;IAC/CH,QAAQ,EAAEmB,4BAAU,CAACW,SAAU;IAAAjB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE9BlB,QACG,CAAC,eAEPX,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACd,MAAA,CAAA0B,KAAK;IACJlB,QAAQ,EAAEmB,4BAAU,CAACY,gBAAiB;IACtC5B,IAAI,EAAEA,IAAK;IACXI,SAAS,EAAEE,2BAAO,CAACP,UAAW;IAAAW,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7Bf,UACI,CACJ,CAAC;AAAA,CACP;AAAC8B,OAAA,CAAAnC,SAAA,GAAAA,SAAA","ignoreList":[]}

package/dist/cjs/WixDesignSystemProvider/WixDesignSystemProvider.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_157_0_WixDesignSystemProvider";
+var _namespace_ = "wds_1_158_0_WixDesignSystemProvider";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_WixDesignSystemProvider__root","mobile":"wds_1_157_0_WixDesignSystemProvider__mobile"};
+module.exports.classes = {"root":"wds_1_158_0_WixDesignSystemProvider__root","mobile":"wds_1_158_0_WixDesignSystemProvider__mobile"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/WixDesignSystemProvider/madefor.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_157_0_madefor";
+var _namespace_ = "wds_1_158_0_madefor";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_madefor__root","madefor":"wds_1_157_0_madefor__madefor"};
+module.exports.classes = {"root":"wds_1_158_0_madefor__root","madefor":"wds_1_158_0_madefor__madefor"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/WixDesignSystemProvider/newColorsBranding.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_157_0_newColorsBranding";
+var _namespace_ = "wds_1_158_0_newColorsBranding";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_newColorsBranding__root"};
+module.exports.classes = {"root":"wds_1_158_0_newColorsBranding__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/common/AdaptiveHeading/AdaptiveHeading.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_157_0_AdaptiveHeading";
+var _namespace_ = "wds_1_158_0_AdaptiveHeading";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_AdaptiveHeading__root","headerWrapper":"wds_1_157_0_AdaptiveHeading__headerWrapper","headerShort":"wds_1_157_0_AdaptiveHeading__headerShort","headerFull":"wds_1_157_0_AdaptiveHeading__headerFull","ellipsis":"wds_1_157_0_AdaptiveHeading__ellipsis"};
+module.exports.classes = {"root":"wds_1_158_0_AdaptiveHeading__root","headerWrapper":"wds_1_158_0_AdaptiveHeading__headerWrapper","headerShort":"wds_1_158_0_AdaptiveHeading__headerShort","headerFull":"wds_1_158_0_AdaptiveHeading__headerFull","ellipsis":"wds_1_158_0_AdaptiveHeading__ellipsis"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/common/Ellipsis/Ellipsis.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_157_0_Ellipsis";
+var _namespace_ = "wds_1_158_0_Ellipsis";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_Ellipsis__root","tooltip":"wds_1_157_0_Ellipsis__tooltip"};
+module.exports.classes = {"root":"wds_1_158_0_Ellipsis__root","tooltip":"wds_1_158_0_Ellipsis__tooltip"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {"maxLines":"--wds_1_157_0_Ellipsis-maxLines"}; 
+module.exports.vars = {"maxLines":"--wds_1_158_0_Ellipsis-maxLines"}; 
 
 
 

package/dist/cjs/common/Ellipsis/components/TextComponent/TextComponent.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../../../stylable-cjs-ru
 
 
 
-var _namespace_ = "wds_1_157_0_TextComponent";
+var _namespace_ = "wds_1_158_0_TextComponent";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_TextComponent__root","text":"wds_1_157_0_TextComponent__text","suffix":"wds_1_157_0_TextComponent__suffix","multilineSuffixWrapper":"wds_1_157_0_TextComponent__multilineSuffixWrapper","multilineSuffix":"wds_1_157_0_TextComponent__multilineSuffix"};
+module.exports.classes = {"root":"wds_1_158_0_TextComponent__root","text":"wds_1_158_0_TextComponent__text","suffix":"wds_1_158_0_TextComponent__suffix","multilineSuffixWrapper":"wds_1_158_0_TextComponent__multilineSuffixWrapper","multilineSuffix":"wds_1_158_0_TextComponent__multilineSuffix"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {"maxLines":"--wds_1_157_0_TextComponent-maxLines"}; 
+module.exports.vars = {"maxLines":"--wds_1_158_0_TextComponent-maxLines"}; 
 
 
 

package/dist/cjs/common/FluidColumns/FluidColumns.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_157_0_FluidColumns";
+var _namespace_ = "wds_1_158_0_FluidColumns";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,12 +12,12 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_FluidColumns__root","item":"wds_1_157_0_FluidColumns__item"};
+module.exports.classes = {"root":"wds_1_158_0_FluidColumns__root","item":"wds_1_158_0_FluidColumns__item"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {"cols":"--wds_1_157_0_FluidColumns-cols"}; 
+module.exports.vars = {"cols":"--wds_1_158_0_FluidColumns-cols"}; 
 
 
 

package/dist/cjs/common/Focusable/Focusable.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_157_0_Focusable";
+var _namespace_ = "wds_1_158_0_Focusable";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_Focusable__root","focus-box":"wds_1_157_0_Focusable__focus-box","focus-box-error":"wds_1_157_0_Focusable__focus-box-error"};
+module.exports.classes = {"root":"wds_1_158_0_Focusable__root","focus-box":"wds_1_158_0_Focusable__focus-box","focus-box-error":"wds_1_158_0_Focusable__focus-box-error"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/common/styles/visuallyHidden.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_157_0_visuallyHidden";
+var _namespace_ = "wds_1_158_0_visuallyHidden";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_visuallyHidden__root","visuallyHidden":"wds_1_157_0_visuallyHidden__visuallyHidden"};
+module.exports.classes = {"root":"wds_1_158_0_visuallyHidden__root","visuallyHidden":"wds_1_158_0_visuallyHidden__visuallyHidden"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/dnd-styles/dnd-styles.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_157_0_dndstyles";
+var _namespace_ = "wds_1_158_0_dndstyles";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = _style_;
 module.exports.st = _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_157_0_dndstyles__root","item":"wds_1_157_0_dndstyles__item","itemPlaceholder":"wds_1_157_0_dndstyles__itemPlaceholder","itemPreview":"wds_1_157_0_dndstyles__itemPreview","list":"wds_1_157_0_dndstyles__list","gridItemPlaceholder":"wds_1_157_0_dndstyles__gridItemPlaceholder","isInitialPositionToDrop":"wds_1_157_0_dndstyles__isInitialPositionToDrop","withGridItemStrip":"wds_1_157_0_dndstyles__withGridItemStrip","withGridItemStripRight":"wds_1_157_0_dndstyles__withGridItemStripRight","gridItemPreview":"wds_1_157_0_dndstyles__gridItemPreview"};
+module.exports.classes = {"root":"wds_1_158_0_dndstyles__root","item":"wds_1_158_0_dndstyles__item","itemPlaceholder":"wds_1_158_0_dndstyles__itemPlaceholder","itemPreview":"wds_1_158_0_dndstyles__itemPreview","list":"wds_1_158_0_dndstyles__list","gridItemPlaceholder":"wds_1_158_0_dndstyles__gridItemPlaceholder","isInitialPositionToDrop":"wds_1_158_0_dndstyles__isInitialPositionToDrop","withGridItemStrip":"wds_1_158_0_dndstyles__withGridItemStrip","withGridItemStripRight":"wds_1_158_0_dndstyles__withGridItemStripRight","gridItemPreview":"wds_1_158_0_dndstyles__gridItemPreview"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/index.d.js

@@ -150,6 +150,7 @@ var _exportNames = {
   VariableInput: true,
   VerticalTabs: true,
   VerticalTabsItem: true,
+  VerticalTabsIconItem: true,
   clients: true,
   dndStyles: true,
   FileUpload: true,
@@ -224,7 +225,7 @@ var _exportNames = {
 };
 exports.MediaOverlay = exports.MarketingPageLayoutContent = exports.MarketingPageLayout = exports.MarketingLayout = exports.Loader = exports.LiveRegion = exports.ListItemSelect = exports.ListItemSectionTypes = exports.ListItemSectionProps = exports.ListItemSection = exports.ListItemEditable = exports.ListItemAction = exports.LinearProgressBar = exports.Layout = exports.InputWithOptions = exports.InputWithLabel = exports.InputShell = exports.InputArea = exports.Input = exports.InfoIcon = exports.ImageViewer = exports.Image = exports.IconButton = exports.HorizontalTimeline = exports.Highlighter = exports.Heading = exports.GooglePreview = exports.GoogleAddressInput = exports.FunnelChart = exports.FormField = exports.FloatingNotification = exports.FloatingHelper = exports.FillPreview = exports.FillButton = exports.FileUpload = exports.FilePicker = exports.FieldSet = exports.FeatureList = exports.FacesRatingBar = exports.EmptyState = exports.EditableTitle = exports.EditableSelector = exports.Dropzone = exports.DropdownLayout = exports.DropdownBase = exports.Dropdown = exports.DragDropContextProvider = exports.Divider = exports.DatePicker = exports.CustomModalLayout = exports.CounterBadge = exports.CornerRadiusInput = exports.CopyClipboard = exports.ComposerSidebar = exports.ComposerHeader = exports.ComposerButton = exports.ColorPicker = exports.ColorInput = exports.Collapse = exports.CloseButton = exports.CircularProgressBar = exports.Checkbox = exports.CheckToggle = exports.CarouselWIP = exports.Carousel = exports.CardGalleryItem = exports.CardFolderTabs = exports.Card = exports.CalendarPanelFooter = exports.CalendarPanel = exports.Calendar = exports.COLOR_TOKENS = exports.Button = exports.BrowserPreviewWidget = exports.Breadcrumbs = exports.Box = exports.BounceAnimation = exports.BarChart = exports.BadgeType = exports.BadgeSkin = exports.BadgeSize = exports.BadgeSelect = exports.BadgeProps = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoCompleteWithLabel = exports.AutoComplete = exports.AudioPlayer = exports.AreaChart = exports.AnnouncementModalLayout = exports.AngleInputProps = exports.AngleInput = exports.AnalyticsSummaryCard = exports.AnalyticsLayout = exports.AddressInputProps = exports.AddressInputItem = exports.AddressInput = exports.AddItem = exports.Accordion = void 0;
 exports.TopBanner = exports.Tooltip = exports.ToggleSwitch = exports.ToggleButton = exports.ToastContainer = exports.Toast = exports.Timeline = exports.TimeTable = exports.TimeInput = exports.Thumbnail = exports.ThemeProvider = exports.TextButton = exports.Text = exports.TestimonialList = exports.TagList = exports.Tag = exports.Tabs = exports.TableToolbar = exports.TableProps = exports.TableListItem = exports.TableListHeader = exports.TableFloatingScrollBarProps = exports.TableFloatingScrollBar = exports.TableColumn = exports.TableActionCell = exports.Table = exports.Swatches = exports.Stepper = exports.StatusToast = exports.StatusIndicator = exports.StatisticsWidget = exports.StarsRatingBar = exports.StackedBarChart = exports.SparklineChart = exports.SortableListBase = exports.SortableGridBase = exports.SocialPreview = exports.SocialPostPreview = exports.SocialButton = exports.Slider = exports.SkeletonRectangle = exports.SkeletonLine = exports.SkeletonGroup = exports.SkeletonCircle = exports.Skeleton = exports.SidebarTitleItemNext = exports.SidebarSubMenuNext = exports.SidebarSectionTitle = exports.SidebarSectionItem = exports.SidebarNext = exports.SidebarItemNext = exports.SidebarHeaderNext = exports.SidebarHeader = exports.SidebarDividerNext = exports.SidebarDivider = exports.SidebarBackButton = exports.Sidebar = exports.SidePanel = exports.SelectorListContent = exports.SelectorList = exports.SelectorButton = exports.Selector = exports.SelectableAccordion = exports.SegmentedToggle = exports.SectionHelper = exports.SectionHeader = exports.Search = exports.RichTextInputArea = exports.Range = exports.RadioGroup = exports.Radio = exports.RadarChart = exports.PulseAnimation = exports.Proportion = exports.PreviewWidget = exports.PopoverMenu = exports.Popover = exports.Palette = exports.Pagination = exports.PageSection = exports.PageHeader = exports.PageFooter = exports.Page = exports.OnSelectionChangedFn = exports.NumberInput = exports.Notification = exports.NestableListBase = exports.NestableList = exports.NavigationToastProps = exports.NavigationToast = exports.MultiSelectCheckbox = exports.MultiSelect = exports.ModalSelectorLayout = exports.ModalPreviewLayout = exports.ModalMobileLayout = exports.Modal = exports.MobilePreviewWidget = exports.MessageModalLayout = exports.MessageBoxMarketerialLayout = exports.MessageBoxFunctionalLayout = void 0;
-exports.useOverlayScrollbar = exports.listItemSectionBuilder = exports.dndStyles = exports.clients = exports.badgeSelectItemBuilder = exports.addressInputItemBuilder = exports.WixStyleReactMaskingProvider = exports.WixStyleReactEnvironmentProvider = exports.WixStyleReactDefaultsOverrideProvider = exports.WixDesignSystemProvider = exports.VerticalTabsItem = exports.VerticalTabs = exports.VariableInputSize = exports.VariableInputProps = exports.VariableInput = exports.UsedDataTableProps = exports.TrendIndicator = exports.Transition = exports.TopBannerProps = void 0;
+exports.useOverlayScrollbar = exports.listItemSectionBuilder = exports.dndStyles = exports.clients = exports.badgeSelectItemBuilder = exports.addressInputItemBuilder = exports.WixStyleReactMaskingProvider = exports.WixStyleReactEnvironmentProvider = exports.WixStyleReactDefaultsOverrideProvider = exports.WixDesignSystemProvider = exports.VerticalTabsItem = exports.VerticalTabsIconItem = exports.VerticalTabs = exports.VariableInputSize = exports.VariableInputProps = exports.VariableInput = exports.UsedDataTableProps = exports.TrendIndicator = exports.Transition = exports.TopBannerProps = void 0;
 var _common = require("./common");
 Object.keys(_common).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1402,6 +1403,14 @@ Object.keys(_VerticalTabsItem).forEach(function (key) {
   if (key in exports && exports[key] === _VerticalTabsItem[key]) return;
   exports[key] = _VerticalTabsItem[key];
 });
+var _VerticalTabsIconItem = _interopRequireWildcard(require("./VerticalTabsIconItem"));
+exports.VerticalTabsIconItem = _VerticalTabsIconItem.default;
+Object.keys(_VerticalTabsIconItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _VerticalTabsIconItem[key]) return;
+  exports[key] = _VerticalTabsIconItem[key];
+});
 var _clients = _interopRequireWildcard(require("./clients"));
 exports.clients = _clients.default;
 Object.keys(_clients).forEach(function (key) {