text: import { isObject, runIfFn } from "@chakra-ui/utils";
  /**
   * Expands an array or object syntax responsive style.
   *
   * @example
   * expandResponsive({ mx: [1, 2] })
   * // or
   * expandResponsive({ mx: { base: 1, sm: 2 } })
   *
   * // => { mx: 1, "@media(min-width:<sm>)": { mx: 2 } }
   */
  
  export var expandResponsive = styles => theme => {
    /**
     * Before any style can be processed, the user needs to call `toCSSVar`
     * which analyzes the theme's breakpoint and appends a `__breakpoints` property
     * to the theme with more details of the breakpoints.
     *
     * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints
     */
    if (!theme.__breakpoints) return styles;
    var {
      isResponsive,
      toArrayValue,
      media: medias
    } = theme.__breakpoints;
    var computedStyles = {};
  
    for (var key in styles) {
      var value = runIfFn(styles[key], theme);
      if (value == null) continue; // converts the object responsive syntax to array syntax
  
      value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
  
      if (!Array.isArray(value)) {
        computedStyles[key] = value;
        continue;
      }
  
      var queries = value.slice(0, medias.length).length;
  
      for (var index = 0; index < queries; index += 1) {
        var media = medias == null ? void 0 : medias[index];
  
        if (!media) {
          computedStyles[key] = value[index];
          continue;
        }
  
        computedStyles[media] = computedStyles[media] || {};
  
        if (value[index] == null) {
          continue;
        }
  
        computedStyles[media][key] = value[index];
      }
    }
  
    return computedStyles;
  };
  //# sourceMappingURL=expand-responsive.js.map