@teamsparta/stack-flex/dist/Flex.style.js

stack flex

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/Flex.style.ts
var Flex_style_exports = {};
__export(Flex_style_exports, {
  FlexBase: () => FlexBase
});
module.exports = __toCommonJS(Flex_style_exports);
var import_styled = __toESM(require("@emotion/styled"));
var justifyContentMap = {
  start: "flex-start",
  end: "flex-end",
  center: "center",
  between: "space-between",
  around: "space-around",
  evenly: "space-evenly"
};
var alignItemsMap = {
  start: "flex-start",
  end: "flex-end",
  center: "center",
  baseline: "baseline",
  stretch: "stretch"
};
var FlexBase = import_styled.default.div`
  display: flex;
  ${({ $direction: direction }) => {
  if (!direction)
    return;
  return direction.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `flex-direction: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          flex-direction: ${value};
        }
      `;
  });
}};
  ${({ $wrap: wrap }) => {
  if (!wrap)
    return;
  return wrap.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `flex-wrap: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          flex-wrap: ${value};
        }
      `;
  });
}};
  ${({ $justify: justify }) => {
  if (!justify)
    return;
  return justify.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `justify-content: ${justifyContentMap[value]};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          justify-content: ${justifyContentMap[value]};
        }
      `;
  });
}};
  ${({ $align: align }) => {
  if (!align)
    return;
  return align.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `align-items: ${alignItemsMap[value]};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          align-items: ${alignItemsMap[value]};
        }
      `;
  });
}};
  ${({ $gap: gap }) => {
  if (!gap)
    return;
  return gap.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `gap: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          gap: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $fullHeight: fullHeight }) => {
  if (!fullHeight)
    return;
  return fullHeight.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `height: ${value ? "100%" : "auto"};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          height: ${value ? "100%" : "auto"};
        }
      `;
  });
}};
  ${({ $fullWidth: fullWidth }) => {
  if (!fullWidth)
    return;
  return fullWidth.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `width: ${value ? "100%" : "auto"};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          width: ${value ? "100%" : "auto"};
        }
      `;
  });
}};
  ${({ $padding: padding }) => {
  if (!padding)
    return;
  return padding.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `padding: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          padding: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $width: width }) => {
  if (!width)
    return;
  return width.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `width: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          width: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $height: height }) => {
  if (!height)
    return;
  return height.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `height: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          height: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $maxWidth: maxWidth }) => {
  if (!maxWidth)
    return;
  return maxWidth.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `max-width: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          max-width: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $maxHeight: maxHeight }) => {
  if (!maxHeight)
    return;
  return maxHeight.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `max-height: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          max-height: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $borderRadius: borderRadius }) => {
  if (!borderRadius)
    return;
  return borderRadius.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `border-radius: ${typeof value === "number" ? `${value}px` : value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          border-radius: ${typeof value === "number" ? `${value}px` : value};
        }
      `;
  });
}};
  ${({ $background: background }) => {
  if (!background)
    return;
  return background.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `background: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          background: ${value};
        }
      `;
  });
}};
  ${({ $position: position }) => {
  if (!position)
    return;
  return position.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `position: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          position: ${value};
        }
      `;
  });
}};
  ${({ $flex: flex }) => {
  if (!flex)
    return;
  return flex.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `flex: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          flex: ${value};
        }
      `;
  });
}};
  ${({ $border: border }) => {
  if (!border)
    return;
  return border.map(({ breakpoint, value }) => {
    if (breakpoint === 0)
      return `border: ${value};`;
    return `
        @media screen and (min-width: ${breakpoint}px) {
          border: ${value};
        }
      `;
  });
}};
`;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  FlexBase
});