fui-fancyui/dist/src/components/molecules/FancyContent/FancyContent.style.js

FancyUI Libary

import { css as a, styled as d } from "styled-components";
import u from "../../../design/designFunctions/arrayToCssValues/arrayToCssValues.js";
const o = (t, e, r = "start") => t ? t === "left" ? "start" : t === "right" ? "end" : "center" : e === "stack" ? "center" : r, s = (t) => t === "left" ? "start" : t === "right" ? "end" : "center", g = (t, e, r, l, i = "left") => {
  switch (t) {
    case "stack":
      return a`
        grid-template-columns: 1fr;
        grid-template-rows: repeat(
          ${r && (l || e) ? l && e ? 3 : 2 : 1},
          auto
        );
        grid-template-areas: ${r && l && e ? '"icon" "title" "description"' : r && (l || e) ? '"icon" "title"' : '"title"'};
        justify-items: center;
        text-align: center;
      `;
    case "row":
      return l && e ? r ? a`
            grid-template-columns: ${"auto auto auto"};
            grid-template-rows: auto;
            grid-template-areas: ${i === "right" ? '"title description icon"' : '"icon title description"'};
          ` : a`
            grid-template-columns: auto auto;
            grid-template-rows: auto;
            grid-template-areas: 'title description';
          ` : a`
        grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
        grid-template-rows: auto;
        grid-template-areas: ${r ? i === "right" ? '"title icon"' : '"icon title"' : '"title title"'};
      `;
    case "normal":
      return !l && e ? a`
          grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
          grid-template-rows: auto;
          grid-template-areas: ${r ? i === "right" ? '"title icon"' : '"icon title"' : '"title title"'};
        ` : !e || !l && e ? a`
          grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
          grid-template-rows: auto;
          grid-template-areas: ${r ? i === "right" ? '"title icon"' : '"icon title"' : '"title title"'};
        ` : a`
        grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
        grid-template-rows: auto auto;
        grid-template-areas: ${r ? i === "right" ? '"title icon" "description ."' : '"icon title" ". description"' : '"title title" "description description"'};
      `;
    default:
      return !l && e ? a`
          grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
          grid-template-rows: auto;
          grid-template-areas: ${r ? i === "right" ? '"title icon"' : '"icon title"' : '"title title"'};
        ` : !e || !l && e ? a`
          grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
          grid-template-rows: auto;
          grid-template-areas: ${r ? i === "right" ? '"title icon"' : '"icon title"' : '"title title"'};
        ` : a`
        grid-template-columns: ${i === "right" && r ? "1fr auto" : "auto 1fr"};
        grid-template-rows: auto auto;
        grid-template-areas: ${r ? i === "right" ? '"title icon" "description ."' : '"icon title" ". description"' : '"title title" "description description"'};
      `;
  }
}, f = d.span`
  display: grid;
  width: 100%;
  gap: ${({ $gap: t, $gapBetweenIcon: e }) => u(t || e, "spacing")};
  align-items: ${({ $align: t }) => t || "start"};

  ${({ $layoutMode: t = "auto", $hasDescription: e = !1, $hasIcon: r = !1, $hasTitle: l = !1, $alignIcon: i = "left" }) => g(t, e, r, l, i)}

  ${({ theme: t, $themeType: e, $layer: r }) => e && a`
      color: ${t.color[e ?? "secondary"][r ?? 0]};
    `};

  ${({ $justify: t }) => t && a`
      justify-items: ${t === "left" ? "start" : t === "right" ? "end" : "center"};
    `};

  ${({ $externalStyle: t }) => t}

  .icon {
    grid-area: icon;
    justify-self: ${({ $layoutMode: t, $justify: e }) => o(e, t, "start")};
    align-self: ${({ $layoutMode: t }) => t === "stack" ? "start" : "center"};
  }

  .content {
    display: contents;
  }

  .title {
    grid-area: title;
    align-self: ${({ $layoutMode: t }) => t === "stack" ? "start" : "center"};
    justify-self: ${({ $layoutMode: t, $justify: e }) => o(e, t, "start")};
  }

  .description {
    grid-area: description;
    justify-self: ${({ $layoutMode: t, $justify: e }) => o(e, t, "start")};
    margin-top: ${({ $gapBetweenText: t, $layoutMode: e }) => e === "stack" || e === "row" ? "0" : u(t, "spacing")};
  }
`, c = d.span`
  display: grid;
  grid-template-columns: 1fr;
  gap: ${({ $gap: t, $gapBetweenText: e }) => u(t || e, "spacing")};
  align-items: ${({ $align: t }) => t || "start"};

  ${({ $justify: t }) => t && a`
      justify-items: ${s(t)};
    `};

  ${({ theme: t, $themeType: e, $layer: r }) => e && a`
      color: ${t.color[e ?? "secondary"][r ?? 0]};
    `};
  ${({ $externalStyle: t }) => t}
`;
export {
  c as OnlyTextWrapper,
  f as Wrapper
};