@wavemaker/react-runtime 11.14.1-15.6409

package/components/container/accordion/accordion-pane/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _accordion = require("@base-ui-components/react/accordion");
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _props = require("./props");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-accordion-panel panel";
+var WmAccordionPane = /*#__PURE__*/(0, _react.memo)(function (Props) {
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PANE_PROPS), Props);
+  var contentRef = (0, _react.useRef)(null);
+  var loadedRef = (0, _react.useRef)(false);
+
+  // Handle expand/collapse
+  var handleToggle = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    props.toggle(event.nativeEvent, props.name);
+    if (!props.active) {
+      props.onExpand && props.onExpand(event.nativeEvent, props);
+    } else {
+      props.onCollapse && props.onCollapse(event.nativeEvent, props);
+    }
+  }, [props.toggle, props.onExpand, props.onCollapse]);
+
+  // Handle keyboard navigation
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleToggle(event);
+    }
+  }, [handleToggle]);
+  (0, _react.useEffect)(function () {
+    if (!loadedRef.current) {
+      props.onLoad && props.onLoad(props, props.onLoad);
+      loadedRef.current = true;
+    }
+  }, [props.onLoad]);
+  return __jsx(_accordion.Accordion.Root, {
+    tabIndex: props.tabindex,
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className, {
+      active: props.active
+    })
+  }, __jsx(_AccordionSummary["default"], {
+    className: "panel-heading clearfix",
+    onClick: handleToggle,
+    onKeyDown: handleKeyDown,
+    tabIndex: props.tabindex,
+    "aria-expanded": props.active,
+    component: "div",
+    classes: {
+      content: "panel-title"
+    }
+  }, __jsx("div", {
+    className: "panel-title"
+  }, props.iconclass && __jsx("div", {
+    className: "pull-left"
+  }, __jsx("i", {
+    className: (0, _clsx["default"])("app-icon panel-icon", props.iconclass)
+  })), __jsx("div", {
+    className: "pull-left",
+    style: {
+      flex: 1
+    }
+  }, __jsx(_Typography["default"], {
+    className: "heading",
+    variant: "h3",
+    component: "h3"
+  }, props.title), props.subheading && __jsx(_Typography["default"], {
+    className: "description",
+    variant: "body2",
+    component: "div"
+  }, props.subheading)), __jsx("div", {
+    className: "panel-actions pull-right"
+  }, props.badgevalue && __jsx(_Typography["default"], {
+    variant: "body2",
+    component: "span",
+    className: "label label-".concat(props.badgetype || "default")
+  }, props.badgevalue), __jsx(_Typography["default"], {
+    component: "span",
+    variant: "body2",
+    className: "app-icon panel-action wi"
+  }, __jsx("i", {
+    className: (0, _clsx["default"])("app-icon wi", props.active ? "wi-minus" : "wi-plus")
+  }))))), __jsx(_AccordionDetails["default"], {
+    className: (0, _clsx["default"])("panel-collapse collapse", {
+      "in": props.active
+    })
+  }, __jsx("div", {
+    ref: contentRef,
+    className: "panel-body"
+  }, props.render && props.active ? props.render(props, props.onLoad) : props.children)));
+});
+WmAccordionPane.displayName = "WmAccordionPane";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmAccordionPane);

package/components/container/accordion/accordion-pane/props.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PANE_PROPS = void 0;
+var DEFAULT_PANE_PROPS = exports.DEFAULT_PANE_PROPS = {
+  title: "Title",
+  badgetype: "default",
+  smoothscroll: false
+};

package/components/container/accordion/index.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isArray = _interopRequireDefault(require("lodash-es/isArray"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
+var _accordionPane = _interopRequireDefault(require("./accordion-pane"));
+var _props = require("./props");
+var _statePersistance = require("@wavemaker/react-runtime/utils/state-persistance");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DEFAULT_CLASS = "app-accordion panel-group";
+var WmAccordion = /*#__PURE__*/(0, _react.memo)(function (Props) {
+  var props = _objectSpread(_objectSpread({}, _props.DEFAULT_PROPS), Props);
+  var isMounted = (0, _react.useRef)(false);
+  var _useState = (0, _react.useState)(props.defaultpaneindex || 0),
+    activePaneIndex = _useState[0],
+    setActivePaneIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(new Set()),
+    activePanes = _useState2[0],
+    setActivePanes = _useState2[1];
+  var prevActivePaneIndex = (0, _react.useRef)(null);
+
+  // Initialize active panes based on default pane index
+  (0, _react.useEffect)(function () {
+    var initialIndex = props.defaultpaneindex || 0;
+    setActivePaneIndex(initialIndex);
+    setActivePanes(new Set([initialIndex]));
+  }, [props.defaultpaneindex]);
+
+  // State persistence functions
+  var getStateFromStorage = (0, _react.useCallback)(function () {
+    if (!props.statehandler || props.statehandler === "none") return null;
+    try {
+      return (0, _statePersistance.getWidgetState)({
+        name: props.name,
+        type: "accordion",
+        storage: props.statehandler
+      });
+    } catch (error) {
+      console.warn("Error reading accordion state:", error);
+      return null;
+    }
+  }, [props.statehandler, props.name]);
+  var saveStateToStorage = (0, _react.useCallback)(function (currentActiveIndex) {
+    if (!props.statehandler || props.statehandler === "none") return;
+    try {
+      // Save the current active pane index
+      (0, _statePersistance.setWidgetState)({
+        name: props.name,
+        type: "accordion",
+        storage: props.statehandler
+      }, String(currentActiveIndex));
+    } catch (error) {
+      console.warn("Error saving accordion state:", error);
+    }
+  }, [props.statehandler, props.name]);
+  function updateActivePane(index, name) {
+    var _props$listener;
+    if (props !== null && props !== void 0 && (_props$listener = props.listener) !== null && _props$listener !== void 0 && _props$listener.onChange) {
+      props.listener.onChange(props.name, {
+        activePane: {
+          name: name,
+          index: index
+        },
+        activePaneIndex: index,
+        activePaneName: name
+      });
+    }
+  }
+
+  // Handle pane expand/collapse
+  var handlePaneToggle = (0, _react.useCallback)(function (paneIndex, isExpanding, event, name) {
+    var newActivePanes = new Set(activePanes);
+    if (isExpanding) {
+      if (props.closeothers) {
+        // Close all other panes
+        newActivePanes.clear();
+        newActivePanes.add(paneIndex);
+      } else {
+        // Add this pane to active panes
+        newActivePanes.add(paneIndex);
+      }
+      updateActivePane(paneIndex, name);
+      prevActivePaneIndex.current = activePaneIndex;
+      setActivePaneIndex(paneIndex);
+
+      // Trigger onChange callback
+      if (event && props.onChange) {
+        props.onChange({
+          newPaneIndex: paneIndex,
+          oldPaneIndex: prevActivePaneIndex.current || 0
+        });
+      }
+    } else {
+      // Remove this pane from active panes
+      newActivePanes["delete"](paneIndex);
+
+      // Update active pane index when collapsing
+      if (newActivePanes.size > 0) {
+        var firstActivePaneIndex = Array.from(newActivePanes)[0];
+        setActivePaneIndex(firstActivePaneIndex);
+      }
+    }
+    setActivePanes(newActivePanes);
+
+    // Save state
+    if (event) {
+      if (isExpanding) {
+        // Save the newly activated pane index
+        saveStateToStorage(paneIndex);
+      } else {
+        // When collapsing, save the first remaining active pane or the current one
+        var remainingActivePanes = Array.from(newActivePanes);
+        var indexToSave = remainingActivePanes.length > 0 ? remainingActivePanes[0] : paneIndex;
+        saveStateToStorage(indexToSave);
+      }
+    }
+  }, [activePanes, activePaneIndex, props.closeothers, saveStateToStorage]);
+
+  // Restore state on mount
+  (0, _react.useEffect)(function () {
+    var savedState = getStateFromStorage();
+    if (savedState !== null && typeof savedState === "number") {
+      setActivePaneIndex(savedState);
+      setActivePanes(new Set([savedState]));
+    }
+  }, [getStateFromStorage]);
+
+  // Accordion methods exposed via listener
+
+  var expand = function expand() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    handlePaneToggle(index, true);
+  };
+  var collapse = function collapse() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    handlePaneToggle(index, false);
+  };
+  var toggle = function toggle() {
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var isActive = activePanes.has(index);
+    handlePaneToggle(index, !isActive);
+  };
+
+  // register the methods
+  (0, _react.useEffect)(function () {
+    var _props$listener2;
+    if (props !== null && props !== void 0 && (_props$listener2 = props.listener) !== null && _props$listener2 !== void 0 && _props$listener2.onChange && !isMounted.current) {
+      var _React$Children$toArr;
+      var activePaneName = (_React$Children$toArr = _react["default"].Children.toArray(props.children)[activePaneIndex]) === null || _React$Children$toArr === void 0 || (_React$Children$toArr = _React$Children$toArr.props) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.name;
+      props.listener.onChange(props.name, {
+        expand: expand,
+        collapse: collapse,
+        toggle: toggle,
+        activePane: {
+          name: activePaneName
+        },
+        activePaneIndex: activePaneIndex,
+        activePaneName: activePaneName
+      });
+      isMounted.current = true;
+    }
+  }, [activePaneIndex, expand, collapse, toggle, props.name, props.children]);
+
+  // Render static panes from children
+  var renderPanes = function renderPanes() {
+    if (props.type === "dynamic") {
+      var _props$dataset;
+      if (!(props !== null && props !== void 0 && props.dataset) || (props === null || props === void 0 ? void 0 : props.dataset.length) === 0 || !(0, _isArray["default"])(props === null || props === void 0 ? void 0 : props.dataset)) {
+        return __jsx("div", null, props.nodatamessage);
+      }
+      return props === null || props === void 0 || (_props$dataset = props.dataset) === null || _props$dataset === void 0 ? void 0 : _props$dataset.map(function (item, index) {
+        return __jsx("div", {
+          className: "app-repeat-item",
+          key: "repeat-template-".concat(index, "-").concat((item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.id))
+        }, props.render && props.render(_objectSpread(_objectSpread({}, item), {}, {
+          active: activePanes.has(index),
+          toggle: function toggle(event, name) {
+            return handlePaneToggle(index, !activePanes.has(index), event, name);
+          },
+          collapse: function collapse(event, name) {
+            return handlePaneToggle(index, false, event, name);
+          },
+          expand: function expand(event, name) {
+            return handlePaneToggle(index, true, event, name);
+          }
+        }), index, props === null || props === void 0 ? void 0 : props.dataset));
+      });
+    }
+    return props.type === "static" ? _react["default"].Children.map(props.children, function (child, index) {
+      if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === _accordionPane["default"]) {
+        return /*#__PURE__*/_react["default"].cloneElement(child, {
+          active: activePanes.has(index),
+          toggle: function toggle(event, name) {
+            return handlePaneToggle(index, !activePanes.has(index), event, name);
+          },
+          collapse: function collapse(event, name) {
+            return handlePaneToggle(index, false, event, name);
+          },
+          expand: function expand(event, name) {
+            return handlePaneToggle(index, true, event, name);
+          }
+        });
+      }
+      return child;
+    }) : null;
+  };
+  return __jsx("div", {
+    className: (0, _clsx["default"])(DEFAULT_CLASS, props.className),
+    style: props.styles,
+    id: (props === null || props === void 0 ? void 0 : props.id) || (props === null || props === void 0 ? void 0 : props.name),
+    "data-type": "accordion",
+    "data-statehandler": props.statehandler
+  }, renderPanes());
+}, function (prevProps, nextProps) {
+  var keys = ["dataset", "defaultpaneindex", "closeothers", "children"];
+  return keys.every(function (key) {
+    return prevProps[key] === nextProps[key];
+  });
+});
+WmAccordion.displayName = "WmAccordion";
+var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmAccordion);

package/components/container/accordion/props.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_PROPS = void 0;
+var DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  closeothers: true,
+  defaultpaneindex: 0,
+  statehandler: "none",
+  nodatamessage: "No Data Found",
+  type: "static"
+};

package/components/container/alignment-utils.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalizeGapValue = exports.isAutoValue = exports.getDirectionalAlignment = exports.getBaseAlignment = exports.formatPixelValue = exports.createBaseFlexStyles = exports.calculateWrapSpacing = exports.calculateSpacingStyles = exports.calculateNoWrapSpacing = exports.calculateAlignmentStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Utility functions for container alignment and spacing calculations
+ */
+
+// Types for better type safety
+
+/**
+ * Gets base alignment properties from alignment matrix
+ */
+var getBaseAlignment = exports.getBaseAlignment = function getBaseAlignment(alignmentMatrix, alignmentKey) {
+  var base = alignmentMatrix === null || alignmentMatrix === void 0 ? void 0 : alignmentMatrix[alignmentKey];
+  return base || {
+    justifyContent: "flex-start",
+    alignItems: "stretch"
+  };
+};
+
+/**
+ * Swaps justify/align properties based on flex direction
+ */
+var getDirectionalAlignment = exports.getDirectionalAlignment = function getDirectionalAlignment(base, isRow) {
+  return {
+    justifyContent: isRow ? base.justifyContent : base.alignItems,
+    alignItems: isRow ? base.alignItems : base.justifyContent
+  };
+};
+
+/**
+ * Formats numeric values to pixel strings
+ */
+var formatPixelValue = exports.formatPixelValue = function formatPixelValue(value) {
+  if (!value || value === "auto") return undefined;
+  return "".concat(value, "px");
+};
+
+/**
+ * Checks if a value is 'auto'
+ */
+var isAutoValue = exports.isAutoValue = function isAutoValue(value) {
+  return value === "auto";
+};
+
+/**
+ * Normalizes gap values, filtering out auto and invalid values
+ */
+var normalizeGapValue = exports.normalizeGapValue = function normalizeGapValue(value) {
+  return value && !isAutoValue(value) ? value : null;
+};
+
+/**
+ * Creates base flex styles for alignment
+ */
+var createBaseFlexStyles = exports.createBaseFlexStyles = function createBaseFlexStyles(direction, hasWrap, justifyContent, alignItems) {
+  return {
+    display: "flex",
+    flexDirection: direction,
+    flexWrap: hasWrap ? "wrap" : "nowrap",
+    justifyContent: justifyContent,
+    alignItems: alignItems
+  };
+};
+
+/**
+ * Handles spacing logic when flex-wrap is disabled
+ */
+var calculateNoWrapSpacing = exports.calculateNoWrapSpacing = function calculateNoWrapSpacing(gap, normalizedGap, base, justifyContent, alignItems) {
+  if (isAutoValue(gap)) {
+    return {
+      justifyContent: base.justifyContent,
+      alignItems: base.alignItems
+    };
+  }
+  return {
+    justifyContent: justifyContent,
+    alignItems: alignItems,
+    gap: formatPixelValue(normalizedGap)
+  };
+};
+
+/**
+ * Handles spacing logic when flex-wrap is enabled
+ */
+var calculateWrapSpacing = exports.calculateWrapSpacing = function calculateWrapSpacing(gap, columngap, normalizedGap, normalizedColumnGap, normalizedRowGap, justifyContent, alignItems) {
+  var gapIsAuto = isAutoValue(gap);
+  var columnGapIsAuto = isAutoValue(columngap);
+
+  // Both gaps are auto
+  if (columnGapIsAuto && gapIsAuto) {
+    return {
+      justifyContent: justifyContent,
+      alignContent: justifyContent
+    };
+  }
+
+  // Column gap is auto, row gap is fixed
+  if (columnGapIsAuto && !gapIsAuto) {
+    return {
+      justifyContent: justifyContent,
+      alignContent: alignItems,
+      rowGap: formatPixelValue(normalizedRowGap)
+    };
+  }
+
+  // Row gap is auto, column gap is fixed
+  if (gapIsAuto && !columnGapIsAuto) {
+    return {
+      alignContent: "space-between",
+      columnGap: formatPixelValue(normalizedColumnGap)
+    };
+  }
+
+  // Both gaps have fixed values
+  return calculateFixedGapSpacing(normalizedColumnGap, normalizedRowGap, justifyContent, alignItems);
+};
+
+/**
+ * Calculates spacing when both gaps have fixed numeric values
+ */
+var calculateFixedGapSpacing = function calculateFixedGapSpacing(normalizedColumnGap, normalizedRowGap, justifyContent, alignItems) {
+  if (!normalizedColumnGap || !normalizedRowGap) {
+    return {};
+  }
+  var baseStyles = {
+    alignContent: alignItems,
+    justifyContent: justifyContent
+  };
+
+  // If both gaps are equal, use shorthand
+  if (normalizedColumnGap === normalizedRowGap) {
+    return _objectSpread(_objectSpread({}, baseStyles), {}, {
+      gap: formatPixelValue(normalizedColumnGap)
+    });
+  }
+
+  // Different values, use longhand
+  return _objectSpread(_objectSpread({}, baseStyles), {}, {
+    gap: "".concat(normalizedRowGap, "px ").concat(normalizedColumnGap, "px")
+  });
+};
+
+/**
+ * Main function to calculate alignment styles
+ */
+var calculateAlignmentStyles = exports.calculateAlignmentStyles = function calculateAlignmentStyles(alignmentMatrix, alignmentKey, direction, hasWrap) {
+  var base = getBaseAlignment(alignmentMatrix, alignmentKey);
+  var isRow = direction === "row";
+  var _getDirectionalAlignm = getDirectionalAlignment(base, isRow),
+    justifyContent = _getDirectionalAlignm.justifyContent,
+    alignItems = _getDirectionalAlignm.alignItems;
+  return createBaseFlexStyles(direction, hasWrap, justifyContent, alignItems);
+};
+
+/**
+ * Main function to calculate spacing styles
+ */
+var calculateSpacingStyles = exports.calculateSpacingStyles = function calculateSpacingStyles(alignmentMatrix, gap, columngap, alignment, direction, hasWrap) {
+  var isRow = direction === "row";
+  var base = getBaseAlignment(alignmentMatrix, alignment);
+  var _getDirectionalAlignm2 = getDirectionalAlignment(base, isRow),
+    justifyContent = _getDirectionalAlignm2.justifyContent,
+    alignItems = _getDirectionalAlignm2.alignItems;
+
+  // Normalize all gap values
+  var normalizedGap = normalizeGapValue(gap);
+  var normalizedColumnGap = normalizeGapValue(columngap);
+  var normalizedRowGap = hasWrap ? normalizedGap : null;
+
+  // Choose appropriate spacing calculation based on wrap setting
+  if (!hasWrap) {
+    return calculateNoWrapSpacing(gap, normalizedGap, base, justifyContent, alignItems);
+  }
+  return calculateWrapSpacing(gap, columngap, normalizedGap, normalizedColumnGap, normalizedRowGap, justifyContent, alignItems);
+};