@wix/patterns 1.378.0 → 1.380.0

package/dist/cjs/components/EditableTable/useClearFocusOnBlur.js

@@ -5,6 +5,12 @@ exports.useClearFocusOnBlur = useClearFocusOnBlur;
 var _react = require("react");
 /**
  * Clears cell focus when the user clicks outside the table container.
+ *
+ * Skips clearFocus() while isEditing=true so that portaled editors (date
+ * picker, select dropdown, media manager) can take focus without causing the
+ * cell to lose its editing state. Cell types that open external UI are
+ * responsible for calling onStartEdit() before the modal opens (which sets
+ * isEditing=true) and onCancel()/onCommit() when it closes.
  */
 function useClearFocusOnBlur(cellInteraction) {
   const blurFrameId = (0, _react.useRef)(0);

package/dist/cjs/components/EditableTable/useClearFocusOnBlur.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","useClearFocusOnBlur","cellInteraction","blurFrameId","useRef","useEffect","cancelAnimationFrame","current","onFocus","useCallback","onBlur","e","container","currentTarget","requestAnimationFrame","contains","document","activeElement","isEditing","clearFocus"],"sources":["../../../../src/components/EditableTable/useClearFocusOnBlur.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';\n\n/**\n * Clears cell focus when the user clicks outside the table container.\n */\nexport function useClearFocusOnBlur<T, F extends FiltersMap>(\n  cellInteraction: CellInteractionState<T, F>,\n) {\n  const blurFrameId = useRef(0);\n\n  useEffect(() => {\n    return () => cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onFocus = useCallback(() => {\n    cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      cancelAnimationFrame(blurFrameId.current);\n      const container = e.currentTarget;\n\n      blurFrameId.current = requestAnimationFrame(() => {\n        if (container.contains(document.activeElement)) {\n          return;\n        }\n\n        if (!cellInteraction.isEditing) {\n          cellInteraction.clearFocus();\n        }\n      });\n    },\n    [cellInteraction],\n  );\n\n  return { onFocus, onBlur };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA;AACA;AACA;AACO,SAASC,mBAAmBA,CACjCC,eAA2C,EAC3C;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,CAAC,CAAC;EAE7B,IAAAC,gBAAS,EAAC,MAAM;IACd,OAAO,MAAMC,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAChCH,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EAC3C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,MAAM,GAAG,IAAAD,kBAAW,EACvBE,CAAmC,IAAK;IACvCL,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;IACzC,MAAMK,SAAS,GAAGD,CAAC,CAACE,aAAa;IAEjCV,WAAW,CAACI,OAAO,GAAGO,qBAAqB,CAAC,MAAM;MAChD,IAAIF,SAAS,CAACG,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EAAE;QAC9C;MACF;MAEA,IAAI,CAACf,eAAe,CAACgB,SAAS,EAAE;QAC9BhB,eAAe,CAACiB,UAAU,CAAC,CAAC;MAC9B;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACjB,eAAe,CAClB,CAAC;EAED,OAAO;IAAEM,OAAO;IAAEE;EAAO,CAAC;AAC5B","ignoreList":[]}
+{"version":3,"names":["_react","require","useClearFocusOnBlur","cellInteraction","blurFrameId","useRef","useEffect","cancelAnimationFrame","current","onFocus","useCallback","onBlur","e","container","currentTarget","requestAnimationFrame","contains","document","activeElement","isEditing","clearFocus"],"sources":["../../../../src/components/EditableTable/useClearFocusOnBlur.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { FiltersMap } from '@wix/bex-core';\nimport type { CellInteractionState } from '../../state/EditableTable/CellInteractionState';\n\n/**\n * Clears cell focus when the user clicks outside the table container.\n *\n * Skips clearFocus() while isEditing=true so that portaled editors (date\n * picker, select dropdown, media manager) can take focus without causing the\n * cell to lose its editing state. Cell types that open external UI are\n * responsible for calling onStartEdit() before the modal opens (which sets\n * isEditing=true) and onCancel()/onCommit() when it closes.\n */\nexport function useClearFocusOnBlur<T, F extends FiltersMap>(\n  cellInteraction: CellInteractionState<T, F>,\n) {\n  const blurFrameId = useRef(0);\n\n  useEffect(() => {\n    return () => cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onFocus = useCallback(() => {\n    cancelAnimationFrame(blurFrameId.current);\n  }, []);\n\n  const onBlur = useCallback(\n    (e: React.FocusEvent<HTMLDivElement>) => {\n      cancelAnimationFrame(blurFrameId.current);\n      const container = e.currentTarget;\n\n      blurFrameId.current = requestAnimationFrame(() => {\n        if (container.contains(document.activeElement)) {\n          return;\n        }\n\n        if (!cellInteraction.isEditing) {\n          cellInteraction.clearFocus();\n        }\n      });\n    },\n    [cellInteraction],\n  );\n\n  return { onFocus, onBlur };\n}\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,mBAAmBA,CACjCC,eAA2C,EAC3C;EACA,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,CAAC,CAAC;EAE7B,IAAAC,gBAAS,EAAC,MAAM;IACd,OAAO,MAAMC,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EACxD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAChCH,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;EAC3C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,MAAM,GAAG,IAAAD,kBAAW,EACvBE,CAAmC,IAAK;IACvCL,oBAAoB,CAACH,WAAW,CAACI,OAAO,CAAC;IACzC,MAAMK,SAAS,GAAGD,CAAC,CAACE,aAAa;IAEjCV,WAAW,CAACI,OAAO,GAAGO,qBAAqB,CAAC,MAAM;MAChD,IAAIF,SAAS,CAACG,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,EAAE;QAC9C;MACF;MAEA,IAAI,CAACf,eAAe,CAACgB,SAAS,EAAE;QAC9BhB,eAAe,CAACiB,UAAU,CAAC,CAAC;MAC9B;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACjB,eAAe,CAClB,CAAC;EAED,OAAO;IAAEM,OAAO;IAAEE;EAAO,CAAC;AAC5B","ignoreList":[]}

package/dist/cjs/components/EntityPage/EntityPagePlain.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "EntityPagePlain1641086988";
+var _namespace_ = "EntityPagePlain2356357517";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "EntityPagePlain1641086988__root"
+  "root": "EntityPagePlain2356357517__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/EntityPage/EntityPagePlain.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/EntityPage/EntityPagePlain.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"EntityPagePlain1641086988\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"EntityPagePlain1641086988__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-page-header-padding-horizontal\":\"--wds-page-header-padding-horizontal\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiC,CAAC;AACxD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC;AAAsC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/EntityPage/EntityPagePlain.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"EntityPagePlain2356357517\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"EntityPagePlain2356357517__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-page-header-padding-horizontal\":\"--wds-page-header-padding-horizontal\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAiC,CAAC;AACxD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,oCAAoC,EAAC;AAAsC,CAAC","ignoreList":[]}

package/dist/cjs/components/Fade/Fade.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "Fade329759489";
+var _namespace_ = "Fade525406167";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "Fade329759489__root"
+  "root": "Fade525406167__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/Fade/Fade.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Fade/Fade.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Fade329759489\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Fade329759489__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,eAAe;AACjC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAqB,CAAC;AAC5C,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Fade/Fade.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Fade525406167\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Fade525406167__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,eAAe;AACjC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAqB,CAAC;AAC5C,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/Heading/Heading.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "Heading841018376";
+var _namespace_ = "Heading2420251234";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "Heading841018376__root"
+  "root": "Heading2420251234__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/Heading/Heading.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Heading/Heading.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Heading841018376\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Heading841018376__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,kBAAkB;AACpC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAwB,CAAC;AAC/C,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/Heading/Heading.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"Heading2420251234\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"Heading2420251234__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mBAAmB;AACrC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAyB,CAAC;AAChD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/ImportButton/ImportStepUpload.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "ImportStepUpload686656776";
+var _namespace_ = "ImportStepUpload962406613";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "ImportStepUpload686656776__root",
-  "fileUpload": "ImportStepUpload686656776__fileUpload"
+  "root": "ImportStepUpload962406613__root",
+  "fileUpload": "ImportStepUpload962406613__fileUpload"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/ImportButton/ImportStepUpload.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ImportButton/ImportStepUpload.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ImportStepUpload686656776\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ImportStepUpload686656776__root\",\"fileUpload\":\"ImportStepUpload686656776__fileUpload\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,YAAY,EAAC;AAAuC,CAAC;AAC7G,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/ImportButton/ImportStepUpload.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"ImportStepUpload962406613\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"ImportStepUpload962406613__root\",\"fileUpload\":\"ImportStepUpload962406613__fileUpload\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,iCAAiC;EAAC,YAAY,EAAC;AAAuC,CAAC;AAC7G,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/InputOverflow/InputOverflow.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "InputOverflow1271182134";
+var _namespace_ = "InputOverflow2186178642";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "InputOverflow1271182134__root"
+  "root": "InputOverflow2186178642__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/InputOverflow/InputOverflow.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/InputOverflow/InputOverflow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"InputOverflow1271182134\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"InputOverflow1271182134__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/InputOverflow/InputOverflow.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"InputOverflow2186178642\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"InputOverflow2186178642__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.LayoutSwitch = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _mobxReactLite = require("mobx-react-lite");
+var _Table = require("../Table");
+var _Grid = require("../Grid");
+var _InitialLoader = require("../InitialLoader");
+var _LayoutSwitchButton = require("../LayoutSwitchButton");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/LayoutSwitch/LayoutSwitch.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const LazyEditableTable = /*#__PURE__*/_react.default.lazy(() => Promise.resolve().then(() => _interopRequireWildcard(require('../EditableTable'))).then(m => ({
+  default: m.EditableTable
+})));
+function _LayoutSwitch({
+  state,
+  tableProps,
+  gridProps,
+  spreadsheetProps
+}) {
+  const {
+    viewTypeState,
+    initTask,
+    toolbar
+  } = state;
+  const isLoading = initTask.status.isIdle || initTask.status.isLoading;
+
+  // Recompute only when a prop flips between defined and undefined.
+  const availableOptions = (0, _react.useMemo)(() => viewTypeState.options.filter(option => {
+    if (option === 'table') {
+      return !!tableProps;
+    }
+    if (option === 'grid') {
+      return !!gridProps;
+    }
+    if (option === 'spreadsheet') {
+      return !!spreadsheetProps;
+    }
+    return false;
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [!!tableProps, !!gridProps, !!spreadsheetProps]);
+  (0, _react.useEffect)(() => state.init(), []);
+
+  // If the stored viewType is not among the available options (e.g. 'grid' was
+  // persisted but gridProps is not provided), persist the correction so the next
+  // load starts from a valid value. changeViewType also updates dataCapsule.
+  (0, _react.useEffect)(() => {
+    if (availableOptions.length > 0 && !availableOptions.includes(viewTypeState.viewType)) {
+      viewTypeState.changeViewType(availableOptions[0]);
+    }
+  }, [availableOptions, viewTypeState.viewType]);
+  if (!availableOptions.length) {
+    console.error('[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.');
+    return null;
+  }
+  const layoutSwitchButton = /*#__PURE__*/_react.default.createElement(_LayoutSwitchButton.LayoutSwitchButton, {
+    state: viewTypeState,
+    options: availableOptions,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 74,
+      columnNumber: 5
+    }
+  });
+  if (isLoading) {
+    return /*#__PURE__*/_react.default.createElement(_InitialLoader.InitialLoader, {
+      dataHook: "initial-loader",
+      state: toolbar,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 78,
+        columnNumber: 12
+      }
+    });
+  }
+
+  // If viewType is not yet available (loaded from storage but xProp absent),
+  // fall back locally without waiting for the correction effect to fire.
+  const activeView = availableOptions.includes(viewTypeState.viewType) ? viewTypeState.viewType : availableOptions[0];
+  if (activeView === 'table') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "layout-view-table",
+      style: {
+        display: 'contents'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 89,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Table.Table, (0, _extends2.default)({}, tableProps, {
+      tableGridSwitchButton: layoutSwitchButton,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 90,
+        columnNumber: 9
+      }
+    })));
+  }
+  if (activeView === 'grid') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "layout-view-grid",
+      style: {
+        display: 'contents'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 97,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Grid.Grid, (0, _extends2.default)({}, gridProps, {
+      tableGridSwitchButton: layoutSwitchButton,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 98,
+        columnNumber: 9
+      }
+    })));
+  }
+  if (activeView === 'spreadsheet') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": "layout-view-spreadsheet",
+      style: {
+        display: 'contents'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 105,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+      fallback: /*#__PURE__*/_react.default.createElement(_InitialLoader.InitialLoader, {
+        dataHook: "initial-loader",
+        state: toolbar,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 107,
+          columnNumber: 21
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 106,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(LazyEditableTable, (0, _extends2.default)({}, spreadsheetProps, {
+      tableGridSwitchButton: layoutSwitchButton,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 109,
+        columnNumber: 11
+      }
+    }))));
+  }
+  return null;
+}
+const LayoutSwitch = exports.LayoutSwitch = (0, _mobxReactLite.observer)(_LayoutSwitch);
+//# sourceMappingURL=LayoutSwitch.js.map

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_mobxReactLite","_Table","_Grid","_InitialLoader","_LayoutSwitchButton","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LazyEditableTable","React","lazy","Promise","resolve","then","m","EditableTable","_LayoutSwitch","state","tableProps","gridProps","spreadsheetProps","viewTypeState","initTask","toolbar","isLoading","status","isIdle","availableOptions","useMemo","options","filter","option","useEffect","init","length","includes","viewType","changeViewType","console","error","layoutSwitchButton","createElement","LayoutSwitchButton","__self","__source","fileName","lineNumber","columnNumber","InitialLoader","dataHook","activeView","style","display","Table","_extends2","tableGridSwitchButton","Grid","Suspense","fallback","LayoutSwitch","exports","observer"],"sources":["../../../../src/components/LayoutSwitch/LayoutSwitch.tsx"],"sourcesContent":["import React, { Suspense, useEffect, useMemo } from 'react';\nimport { FiltersMap } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport { Table, TableProps } from '../Table';\nimport { Grid, GridProps } from '../Grid';\nimport type { EditableTableProps } from '../EditableTable';\nimport { InitialLoader } from '../InitialLoader';\nimport { LayoutSwitchButton } from '../LayoutSwitchButton';\nimport type { ILayoutSwitchState } from '../../state/ILayoutSwitchState';\n\nconst LazyEditableTable = React.lazy(() =>\n  import('../EditableTable').then((m) => ({\n    default: m.EditableTable as React.ComponentType<any>,\n  })),\n);\n\nexport interface LayoutSwitchProps<T, F extends FiltersMap> {\n  state: ILayoutSwitchState<T, F>;\n  tableProps?: Omit<TableProps<T, F>, 'tableGridSwitchButton'>;\n  gridProps?: Omit<GridProps<T, F>, 'tableGridSwitchButton'>;\n  spreadsheetProps?: Omit<EditableTableProps<T, F>, 'tableGridSwitchButton'>;\n}\n\nfunction _LayoutSwitch<T, F extends FiltersMap>({\n  state,\n  tableProps,\n  gridProps,\n  spreadsheetProps,\n}: LayoutSwitchProps<T, F>) {\n  const { viewTypeState, initTask, toolbar } = state;\n  const isLoading = initTask.status.isIdle || initTask.status.isLoading;\n\n  // Recompute only when a prop flips between defined and undefined.\n  const availableOptions = useMemo(\n    () =>\n      viewTypeState.options.filter((option) => {\n        if (option === 'table') {\n          return !!tableProps;\n        }\n        if (option === 'grid') {\n          return !!gridProps;\n        }\n        if (option === 'spreadsheet') {\n          return !!spreadsheetProps;\n        }\n        return false;\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [!!tableProps, !!gridProps, !!spreadsheetProps],\n  );\n\n  useEffect(() => state.init(), []);\n\n  // If the stored viewType is not among the available options (e.g. 'grid' was\n  // persisted but gridProps is not provided), persist the correction so the next\n  // load starts from a valid value. changeViewType also updates dataCapsule.\n  useEffect(() => {\n    if (\n      availableOptions.length > 0 &&\n      !availableOptions.includes(viewTypeState.viewType)\n    ) {\n      viewTypeState.changeViewType(availableOptions[0]!);\n    }\n  }, [availableOptions, viewTypeState.viewType]);\n\n  if (!availableOptions.length) {\n    console.error(\n      '[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.',\n    );\n    return null;\n  }\n\n  const layoutSwitchButton = (\n    <LayoutSwitchButton state={viewTypeState} options={availableOptions} />\n  );\n\n  if (isLoading) {\n    return <InitialLoader dataHook=\"initial-loader\" state={toolbar} />;\n  }\n\n  // If viewType is not yet available (loaded from storage but xProp absent),\n  // fall back locally without waiting for the correction effect to fire.\n  const activeView = availableOptions.includes(viewTypeState.viewType)\n    ? viewTypeState.viewType\n    : availableOptions[0];\n\n  if (activeView === 'table') {\n    return (\n      <div data-hook=\"layout-view-table\" style={{ display: 'contents' }}>\n        <Table {...tableProps!} tableGridSwitchButton={layoutSwitchButton} />\n      </div>\n    );\n  }\n\n  if (activeView === 'grid') {\n    return (\n      <div data-hook=\"layout-view-grid\" style={{ display: 'contents' }}>\n        <Grid {...gridProps!} tableGridSwitchButton={layoutSwitchButton} />\n      </div>\n    );\n  }\n\n  if (activeView === 'spreadsheet') {\n    return (\n      <div data-hook=\"layout-view-spreadsheet\" style={{ display: 'contents' }}>\n        <Suspense\n          fallback={<InitialLoader dataHook=\"initial-loader\" state={toolbar} />}\n        >\n          <LazyEditableTable\n            {...spreadsheetProps!}\n            tableGridSwitchButton={layoutSwitchButton}\n          />\n        </Suspense>\n      </div>\n    );\n  }\n\n  return null;\n}\n\nexport const LayoutSwitch = observer(_LayoutSwitch);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.uni.driver.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.LayoutSwitchUniDriver = LayoutSwitchUniDriver;
+exports.default = void 0;
+var _unidriver = require("../../unidriver");
+var _CollectionToolbarUni = require("../CollectionToolbar/CollectionToolbar.uni.driver");
+var _TableUni = require("../Table/Table.uni.driver");
+var _GridUni = require("../Grid/Grid.uni.driver");
+var _EditableTableUni = require("../EditableTable/EditableTable.uni.driver");
+function LayoutSwitchUniDriver(base, body) {
+  const getToolbar = () => (0, _CollectionToolbarUni.CollectionToolbarUniDriver)(base.$('[data-hook="collection-toolbar"]'), body);
+  return {
+    ...(0, _unidriver.baseUniDriverFactory)(base),
+    wait: timeout => base.wait(timeout),
+    /** Get the layout switch button */
+    getSwitchButton: () => getToolbar().getSwitchButton(),
+    /** Check if the table layout is currently shown */
+    isShowingTable: () => base.$('[data-hook="layout-view-table"]').exists(),
+    /** Check if the grid layout is currently shown */
+    isShowingGrid: () => base.$('[data-hook="layout-view-grid"]').exists(),
+    /** Check if the spreadsheet layout is currently shown */
+    isShowingSpreadsheet: () => base.$('[data-hook="layout-view-spreadsheet"]').exists(),
+    /** Get Table driver */
+    getTable: () => (0, _TableUni.TableUniDriver)(base, body),
+    /** Get Grid driver */
+    getGrid: () => (0, _GridUni.GridUniDriver)(base, body),
+    /** Get Spreadsheet (EditableTable) driver */
+    getSpreadsheet: () => (0, _EditableTableUni.EditableTableUniDriver)(base, body)
+  };
+}
+var _default = exports.default = LayoutSwitchUniDriver;
+//# sourceMappingURL=LayoutSwitch.uni.driver.js.map

package/dist/cjs/components/LayoutSwitch/LayoutSwitch.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_unidriver","require","_CollectionToolbarUni","_TableUni","_GridUni","_EditableTableUni","LayoutSwitchUniDriver","base","body","getToolbar","CollectionToolbarUniDriver","$","baseUniDriverFactory","wait","timeout","getSwitchButton","isShowingTable","exists","isShowingGrid","isShowingSpreadsheet","getTable","TableUniDriver","getGrid","GridUniDriver","getSpreadsheet","EditableTableUniDriver","_default","exports","default"],"sources":["../../../../src/components/LayoutSwitch/LayoutSwitch.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport { baseUniDriverFactory } from '../../unidriver';\nimport { CollectionToolbarUniDriver } from '../CollectionToolbar/CollectionToolbar.uni.driver';\nimport { TableUniDriver } from '../Table/Table.uni.driver';\nimport { GridUniDriver } from '../Grid/Grid.uni.driver';\nimport { EditableTableUniDriver } from '../EditableTable/EditableTable.uni.driver';\n\nexport function LayoutSwitchUniDriver(base: UniDriver, body: UniDriver) {\n  const getToolbar = () =>\n    CollectionToolbarUniDriver(\n      base.$('[data-hook=\"collection-toolbar\"]'),\n      body,\n    );\n\n  return {\n    ...baseUniDriverFactory(base),\n    wait: (timeout?: number) => base.wait(timeout),\n    /** Get the layout switch button */\n    getSwitchButton: () => getToolbar().getSwitchButton(),\n    /** Check if the table layout is currently shown */\n    isShowingTable: () => base.$('[data-hook=\"layout-view-table\"]').exists(),\n    /** Check if the grid layout is currently shown */\n    isShowingGrid: () => base.$('[data-hook=\"layout-view-grid\"]').exists(),\n    /** Check if the spreadsheet layout is currently shown */\n    isShowingSpreadsheet: () =>\n      base.$('[data-hook=\"layout-view-spreadsheet\"]').exists(),\n    /** Get Table driver */\n    getTable: () => TableUniDriver(base, body),\n    /** Get Grid driver */\n    getGrid: () => GridUniDriver(base, body),\n    /** Get Spreadsheet (EditableTable) driver */\n    getSpreadsheet: () => EditableTableUniDriver(base, body),\n  };\n}\n\nexport default LayoutSwitchUniDriver;\n"],"mappings":";;;;;AACA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,qBAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAEO,SAASK,qBAAqBA,CAACC,IAAe,EAAEC,IAAe,EAAE;EACtE,MAAMC,UAAU,GAAGA,CAAA,KACjB,IAAAC,gDAA0B,EACxBH,IAAI,CAACI,CAAC,CAAC,kCAAkC,CAAC,EAC1CH,IACF,CAAC;EAEH,OAAO;IACL,GAAG,IAAAI,+BAAoB,EAACL,IAAI,CAAC;IAC7BM,IAAI,EAAGC,OAAgB,IAAKP,IAAI,CAACM,IAAI,CAACC,OAAO,CAAC;IAC9C;IACAC,eAAe,EAAEA,CAAA,KAAMN,UAAU,CAAC,CAAC,CAACM,eAAe,CAAC,CAAC;IACrD;IACAC,cAAc,EAAEA,CAAA,KAAMT,IAAI,CAACI,CAAC,CAAC,iCAAiC,CAAC,CAACM,MAAM,CAAC,CAAC;IACxE;IACAC,aAAa,EAAEA,CAAA,KAAMX,IAAI,CAACI,CAAC,CAAC,gCAAgC,CAAC,CAACM,MAAM,CAAC,CAAC;IACtE;IACAE,oBAAoB,EAAEA,CAAA,KACpBZ,IAAI,CAACI,CAAC,CAAC,uCAAuC,CAAC,CAACM,MAAM,CAAC,CAAC;IAC1D;IACAG,QAAQ,EAAEA,CAAA,KAAM,IAAAC,wBAAc,EAACd,IAAI,EAAEC,IAAI,CAAC;IAC1C;IACAc,OAAO,EAAEA,CAAA,KAAM,IAAAC,sBAAa,EAAChB,IAAI,EAAEC,IAAI,CAAC;IACxC;IACAgB,cAAc,EAAEA,CAAA,KAAM,IAAAC,wCAAsB,EAAClB,IAAI,EAAEC,IAAI;EACzD,CAAC;AACH;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEctB,qBAAqB","ignoreList":[]}

package/dist/cjs/components/LayoutSwitch/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _LayoutSwitch = require("./LayoutSwitch");
+Object.keys(_LayoutSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LayoutSwitch[key]) return;
+  exports[key] = _LayoutSwitch[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/LayoutSwitch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_LayoutSwitch","require","Object","keys","forEach","key","exports"],"sources":["../../../../src/components/LayoutSwitch/index.ts"],"sourcesContent":["export * from './LayoutSwitch';\n"],"mappings":";;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,aAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/components/LayoutSwitchButton/LayoutSwitchButton.js

@@ -0,0 +1,108 @@
+"use strict";
+
+exports.__esModule = true;
+exports.LayoutSwitchButton = void 0;
+var _mobxReactLite = require("mobx-react-lite");
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _react2 = require("@wix/bex-core/react");
+var _layoutConfig = require("./layoutConfig");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/LayoutSwitchButton/LayoutSwitchButton.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _LayoutSwitchButton({
+  state,
+  options
+}) {
+  const {
+    translate: t,
+    experiments
+  } = (0, _react2.useWixPatternsContainer)();
+  const {
+    viewType
+  } = state;
+  const isLayoutToggleRedesignEnabled = experiments.enabled('specs.cairo.layout-toggle.redesign');
+  const dropdownOptions = (0, _react.useMemo)(() => options.map(option => (0, _designSystem.listItemSelectBuilder)({
+    id: option,
+    title: t(_layoutConfig.layoutConfig[option].translationKey),
+    prefix: _layoutConfig.layoutConfig[option].icon,
+    dataHook: `layout-option-${option}`
+  })), [t, options]);
+  if (!isLayoutToggleRedesignEnabled) {
+    return /*#__PURE__*/_react.default.createElement(_designSystem.SegmentedToggle, {
+      size: "small",
+      dataHook: "layout-switch-toggle-button",
+      selected: viewType,
+      onClick: (_, value) => {
+        if (state.viewType === value) {
+          return;
+        }
+        state.changeViewType(value);
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 42,
+        columnNumber: 7
+      }
+    }, options.map(option => /*#__PURE__*/_react.default.createElement(_designSystem.SegmentedToggle.Icon, {
+      key: option,
+      value: option,
+      dataHook: `toggle-option-${option}`,
+      tooltipText: t(_layoutConfig.layoutConfig[option].translationKey),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 54,
+        columnNumber: 11
+      }
+    }, _layoutConfig.layoutConfig[option].icon)));
+  }
+  return /*#__PURE__*/_react.default.createElement(_designSystem.DropdownBase, {
+    dataHook: "layout-switch-popover",
+    options: dropdownOptions,
+    selectedId: viewType,
+    showArrow: true,
+    onSelect: option => {
+      const selectedOption = option.id;
+      const index = options.indexOf(selectedOption);
+      state.reportLayoutOptionClicked(selectedOption, index);
+      if (viewType !== selectedOption) {
+        state.changeViewType(selectedOption);
+      }
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 68,
+      columnNumber: 5
+    }
+  }, ({
+    toggle
+  }) => /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+    content: t('cairo.table.layout.switchLayout'),
+    size: "medium",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 83,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    dataHook: "layout-switch-button",
+    size: "small",
+    priority: "secondary",
+    "aria-haspopup": "menu",
+    onClick: () => {
+      state.reportLayoutSwitch();
+      toggle();
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 84,
+      columnNumber: 11
+    }
+  }, _layoutConfig.layoutConfig[viewType].icon)));
+}
+const LayoutSwitchButton = exports.LayoutSwitchButton = (0, _mobxReactLite.observer)(_LayoutSwitchButton);
+//# sourceMappingURL=LayoutSwitchButton.js.map

package/dist/cjs/components/LayoutSwitchButton/LayoutSwitchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mobxReactLite","require","_react","_interopRequireWildcard","_designSystem","_react2","_layoutConfig","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_LayoutSwitchButton","state","options","translate","experiments","useWixPatternsContainer","viewType","isLayoutToggleRedesignEnabled","enabled","dropdownOptions","useMemo","map","option","listItemSelectBuilder","id","title","layoutConfig","translationKey","prefix","icon","dataHook","createElement","SegmentedToggle","size","selected","onClick","_","value","changeViewType","__self","__source","fileName","lineNumber","columnNumber","Icon","key","tooltipText","DropdownBase","selectedId","showArrow","onSelect","selectedOption","index","indexOf","reportLayoutOptionClicked","toggle","Tooltip","content","IconButton","priority","reportLayoutSwitch","LayoutSwitchButton","exports","observer"],"sources":["../../../../src/components/LayoutSwitchButton/LayoutSwitchButton.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\nimport React, { useMemo } from 'react';\nimport {\n  DropdownBase,\n  IconButton,\n  listItemSelectBuilder,\n  SegmentedToggle,\n  Tooltip,\n} from '@wix/design-system';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { ViewType, ViewTypeState } from '../../state/ViewTypeState';\nimport { layoutConfig } from './layoutConfig';\n\nexport interface LayoutSwitchButtonProps {\n  state: ViewTypeState;\n  options: ViewType[];\n}\n\nfunction _LayoutSwitchButton({ state, options }: LayoutSwitchButtonProps) {\n  const { translate: t, experiments } = useWixPatternsContainer();\n  const { viewType } = state;\n\n  const isLayoutToggleRedesignEnabled = experiments.enabled(\n    'specs.cairo.layout-toggle.redesign',\n  );\n\n  const dropdownOptions = useMemo(\n    () =>\n      options.map((option) =>\n        listItemSelectBuilder({\n          id: option,\n          title: t(layoutConfig[option].translationKey),\n          prefix: layoutConfig[option].icon,\n          dataHook: `layout-option-${option}`,\n        }),\n      ),\n    [t, options],\n  );\n\n  if (!isLayoutToggleRedesignEnabled) {\n    return (\n      <SegmentedToggle\n        size=\"small\"\n        dataHook=\"layout-switch-toggle-button\"\n        selected={viewType}\n        onClick={(_, value) => {\n          if (state.viewType === value) {\n            return;\n          }\n          state.changeViewType(value as ViewType);\n        }}\n      >\n        {options.map((option) => (\n          <SegmentedToggle.Icon\n            key={option}\n            value={option}\n            dataHook={`toggle-option-${option}`}\n            tooltipText={t(layoutConfig[option].translationKey)}\n          >\n            {layoutConfig[option].icon}\n          </SegmentedToggle.Icon>\n        ))}\n      </SegmentedToggle>\n    );\n  }\n\n  return (\n    <DropdownBase\n      dataHook=\"layout-switch-popover\"\n      options={dropdownOptions}\n      selectedId={viewType}\n      showArrow\n      onSelect={(option) => {\n        const selectedOption = option.id as ViewType;\n        const index = options.indexOf(selectedOption);\n        state.reportLayoutOptionClicked(selectedOption, index);\n        if (viewType !== selectedOption) {\n          state.changeViewType(selectedOption);\n        }\n      }}\n    >\n      {({ toggle }) => (\n        <Tooltip content={t('cairo.table.layout.switchLayout')} size=\"medium\">\n          <IconButton\n            dataHook=\"layout-switch-button\"\n            size=\"small\"\n            priority=\"secondary\"\n            aria-haspopup=\"menu\"\n            onClick={() => {\n              state.reportLayoutSwitch();\n              toggle();\n            }}\n          >\n            {layoutConfig[viewType].icon}\n          </IconButton>\n        </Tooltip>\n      )}\n    </DropdownBase>\n  );\n}\n\nexport const LayoutSwitchButton = observer(_LayoutSwitchButton);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/LayoutSwitchButton/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _LayoutSwitchButton = require("./LayoutSwitchButton");
+Object.keys(_LayoutSwitchButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LayoutSwitchButton[key]) return;
+  exports[key] = _LayoutSwitchButton[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/LayoutSwitchButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_LayoutSwitchButton","require","Object","keys","forEach","key","exports"],"sources":["../../../../src/components/LayoutSwitchButton/index.ts"],"sourcesContent":["export * from './LayoutSwitchButton';\n"],"mappings":";;;AAAA,IAAAA,mBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,mBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,mBAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,mBAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/components/LayoutSwitchButton/layoutConfig.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.layoutConfig = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/LayoutSwitchButton/layoutConfig.tsx";
+const layoutConfig = exports.layoutConfig = {
+  table: {
+    icon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.LayoutSplit, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 15,
+        columnNumber: 11
+      }
+    }),
+    translationKey: 'cairo.table.layout.table'
+  },
+  grid: {
+    icon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.LayoutGallery, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 19,
+        columnNumber: 11
+      }
+    }),
+    translationKey: 'cairo.table.layout.grid'
+  },
+  spreadsheet: {
+    icon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.TableChart, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 23,
+        columnNumber: 11
+      }
+    }),
+    translationKey: 'cairo.table.layout.spreadsheet'
+  }
+};
+//# sourceMappingURL=layoutConfig.js.map