common-styles-css/dist/index.mjs

its a library common css styles

// src/flexbox.ts
import styled, { css } from "styled-components";
var mediaLists = [
  { key: "xs", minWidth: "0px" },
  { key: "sm", minWidth: "576px" },
  { key: "md", minWidth: "768px" },
  { key: "lg", minWidth: "992px" },
  { key: "xl", minWidth: "1200px" },
  { key: "2xl", minWidth: "1440px" }
];
var rowStyles = mediaLists.map((media) => {
  return css`
    @media (min-width: ${media.minWidth}) {
      width: ${({ width }) => typeof width === "object" ? width[media.key] : width ? width : "100%"};
      flex-wrap: ${({ wrap }) => typeof wrap === "object" ? wrap[media.key] : wrap ? wrap : "wrap"};
      flex-direction: ${({ direction }) => typeof direction === "object" ? direction[media.key] : direction && direction};
      justify-content: ${({ content }) => typeof content === "object" ? content[media.key] : content && content};
      align-items: ${({ align_items }) => typeof align_items === "object" ? align_items[media.key] : align_items && align_items};
      align-content: ${({ align_content }) => typeof align_content === "object" ? align_content[media.key] : align_content && align_content};
      gap: ${({ gap }) => typeof gap === "object" ? `${!gap ? 0 : gap[media.key]}px` : `${gap}px`};
      row-gap: ${({ row_gap }) => typeof row_gap === "object" ? `${!row_gap ? 0 : row_gap[media.key]}px` : `${row_gap}px`};
      column-gap: ${({ column_gap }) => typeof column_gap === "object" ? `${!column_gap ? 0 : column_gap[media.key]}px` : `${column_gap}px`};
    }
  `;
});
var Row = styled.div`
  && {
    display: flex;
    ${rowStyles}

    width: ${({ width }) => width || "100%"};
  }
`;
function extractSizes(breakpoints, sizes) {
  return breakpoints.map((breakpoint) => ({
    key: breakpoint.key,
    minWidth: breakpoint.minWidth,
    size: sizes[breakpoint.key]
  })).filter((breakpoint) => breakpoint.size !== void 0);
}
var columnStyles = css`
  // background-color: red;
  ${({ size, difference }) => {
  const getWidth = (sizeValue) => sizeValue ? `${sizeValue / 12 * 100}%` : "0%";
  if (typeof size === "object" && typeof difference === "object") {
    const mediaFilter = extractSizes(mediaLists, size);
    return css`
        ${mediaFilter.map(
      (media) => css`
            @media (min-width: ${media.minWidth}) {
              width: calc(
                ${getWidth(media.size)} - ${difference[media.key] || 0}px
              );
            }
          `
    )}
      `;
  } else if (typeof size === "number" && typeof difference === "number") {
    return css`
        width: calc(${getWidth(size)} - ${difference}px);
      `;
  } else if (typeof size === "object" && typeof difference === "number") {
    const mediaFilter = extractSizes(mediaLists, size);
    return css`
        ${mediaFilter.map(
      (media) => css`
            @media (min-width: ${media.minWidth}) {
              width: calc(${getWidth(size[media.key])} - ${difference}px);
            }
          `
    )}
      `;
  }
  return "";
}}
`;
var Column = styled.div`
  && {
    ${rowStyles}
    ${columnStyles}
  }
`;

// src/subtext.s.ts
import styled2 from "styled-components";
var Subtext = styled2.span``;

// src/constants/colors.ts
var colors = {
  /* ---------- solid ----------*/
  "primary-25": "rgba(184, 243, 151, 1)",
  "primary-50": "rgba(248, 254, 244, 1)",
  "primary-100": "rgba(241, 253, 234, 1)",
  "primary-200": "rgba(227, 250, 213, 1)",
  "primary-300": "rgba(212, 248, 193, 1 )",
  "primary-400": "rgba(198, 245, 172, 1)",
  "primary-500": "rgba(184, 243, 151, 1)",
  // (Base)
  "primary-600": "rgba(166, 219, 136, 1)",
  // (Hover)
  "primary-700": "rgba(157, 207, 128, 1)",
  // (Active)
  "primary-800": "rgba(147, 194, 121, 1)",
  "primary-900": "rgba(138, 182, 113, 1)",
  "secondary-50": " rgba(240, 231, 254, 1)",
  "secondary-100": " rgba(208, 181, 251, 1)",
  "secondary-200": " rgba(185, 145, 249, 1)",
  "secondary-300": " rgba(152, 95, 246, 1)",
  "secondary-400": " rgba(133, 64, 245, 1)",
  "secondary-500": " rgba(102, 16, 242, 1)",
  // (Base)
  "secondary-600": " rgba(93, 15, 220, 1)",
  // (Hover)
  "secondary-700": " rgba(72, 11, 172, 1)",
  // (Active)
  "secondary-800": " rgba(56, 9, 133, 1)",
  "secondary-900": " rgba(43, 7, 102, 1)",
  "gray-25": "rgba(252, 252, 252, 1)",
  "gray-50": "rgba(249, 250, 251, 1)",
  "gray-100": "rgba(242, 244, 247, 1)",
  "gray-200": "rgba(234, 236, 240, 1)",
  "gray-300": "rgba(208, 213, 221, 1)",
  "gray-400": "rgba(152, 162, 179, 1)",
  "gray-500": "rgba(102, 112, 133, 1)",
  // (Base)
  "gray-600": "rgba(71, 84, 103, 1)",
  //( Hover)
  "gray-700": "rgba(52, 64, 84, 1)",
  // (Active)
  "gray-800": "rgba(29, 41, 57, 1)",
  "gray-900": "rgba(16, 24, 40, 1)",
  // message and status colors
  "success-50": "rgb(234, 249, 241, 1)",
  "success-100": "rgba(212, 244, 226, 1)",
  "success-200": "rgba(169, 233, 197, 1)",
  "success-300": "rgba(126, 221, 169, 1)",
  "success-400": "rgba(83, 210, 140, 1)",
  "success-500": "rgba(40, 199, 111, 1)",
  // (Base)
  "success-600": "rgba(36, 179, 100, 1)",
  // (Hover)
  "success-700": "rgba(34, 169, 94, 1)",
  // (Active)
  "success-800": "rgba(32, 159, 89, 1)",
  "success-900": "rgba(30, 149, 83, 1)",
  "danger-50": "rgb(253, 238, 238, 1)",
  "danger-100": "rgba(251, 221, 221, 1)",
  "danger-200": "rgba(247, 187, 187, 1)",
  "danger-300": "rgba(242, 152, 153, 1)",
  "danger-400": "rgba(238, 118, 119, 1)",
  "danger-500": "rgba(234, 84, 85, 1)",
  // (Base)
  "danger-600": "rgba(211, 76, 77, 1)",
  // (Hover)
  "danger-700": "rgba(199, 71, 72, 1)",
  // (Active)
  "danger-800": "rgba(187, 67, 68, 1)",
  "danger-900": "rgba(175, 63, 64, 1)",
  "warning-50": "rgb(255, 245, 236, 1)",
  "warning-100": "rgba(255, 236, 217, 1)",
  "warning-200": "rgba(255, 217, 180, 1)",
  "warning-300": "rgba(255, 197, 142, 1)",
  "warning-400": "rgba(255, 178, 105, 1)",
  "warning-500": "rgba(255, 159, 67, 1)",
  // (Base)
  "warning-600": "rgba(230, 143, 60, 1)",
  // (Hover)
  "warning-700": "rgba(217, 135, 57, 1)",
  // (Active)
  "warning-800": "rgba(204, 127, 54, 1)",
  "warning-900": "rgba(191, 119, 50, 1)",
  // extra colors
  "extra-white": "rgba(255, 255, 255, 1)",
  /* ---------- common ---------- */
  // typography
  "typography-heading": "rgba(24, 28, 50, 1)",
  "typography-body": "rgba(63, 66, 84, 1)",
  "typography-muted": "rgba(161, 165, 183, 1)",
  "typography-placeholder": "rgba(161, 165, 183, 1)",
  // opacity
  "opacity-primary8": "rgba(184, 243, 151, 0.07999999821186066)",
  "opacity-primary16": "rgba(184, 243, 151, 0.1599999964237213)",
  "opacity-primary24": "rgba(184, 243, 151, 0.23999999463558197)",
  "opacity-primary32": "rgba(184, 243, 151, 0.3199999928474426)",
  "opacity-primary40": "rgba(184, 243, 151, 0.4000000059604645)",
  "opacity-primary48": "rgba(184, 243, 151, 0.47999998927116394)",
  "opacity-secondary8": "rgba(102, 16, 242, 0.07999999821186066)",
  "opacity-secondary16": "rgba(102, 16, 242, 0.1599999964237213)",
  "opacity-secondary24": "rgba(102, 16, 242, 0.23999999463558197)",
  "opacity-secondary32": "rgba(102, 16, 242, 0.3199999928474426)",
  "opacity-secondary40": "rgba(102, 16, 242, 0.4000000059604645)",
  "opacity-secondary48": "rgba(102, 16, 242, 0.47999998927116394)",
  "opacity-gray8": "rgba(102, 112, 133, 0.07999999821186066)",
  "opacity-gray16": "rgba(102, 112, 133, 0.1599999964237213)",
  "opacity-gray24": "rgba(102, 112, 133, 0.23999999463558197)",
  "opacity-gray32": "rgba(102, 112, 133, 0.3199999928474426)",
  "opacity-gray40": "rgba(102, 112, 133, 0.4000000059604645)",
  "opacity-gray48": "rgba(102, 112, 133, 0.47999998927116394)",
  "opacity-success8": "rgba(40, 199, 111, 0.08)",
  "opacity-success16": "rgba(40, 199, 111, 0.016)",
  "opacity-success24": "rgba(40, 199, 111, 0.024)",
  "opacity-success32": "rgba(40, 199, 111, 0.032)",
  "opacity-success40": "rgba(40, 199, 111, 0.4)",
  "opacity-success48": "rgba(40, 199, 111, 0.48)",
  "opacity-warning8": "rgba(255, 159, 67, 0,08)",
  "opacity-warning16": "rgba(255, 159, 67, 0.016)",
  "opacity-warning24": "rgba(255, 159, 67, 0.024)",
  "opacity-warning32": "rgba(255, 159, 67, 0.032)",
  "opacity-warning40": "rgba(255, 159, 67, 0.4)",
  "opacity-warning48": "rgba(255, 159, 67, 0.48)",
  "opacity-danger8": "rgba(234, 84, 85, 0,08)",
  "opacity-danger16": "rgba(234, 84, 85, 0.016)",
  "opacity-danger24": "rgba(234, 84, 85, 0.024)",
  "opacity-danger32": "rgba(234, 84, 85, 0.032)",
  "opacity-danger40": "rgba(234, 84, 85, 0.4)",
  "opacity-danger48": "rgba(234, 84, 85, 0.48)",
  // gradient
  primary: "linear-gradient(90deg, rgba(184, 243, 151, 1) 0%, rgba(212, 248, 193, 1) 100%)",
  secondary: "linear-gradient(90deg,rgba(102, 16, 242, 1) 0%,rgba(152, 95, 246, 1) 100%",
  gray: "linear-gradient(90deg,rgba(102, 112, 133, 1) 0%,rgba(208, 213, 221, 1) 100%",
  success: "linear-gradient(90deg,rgba(40, 199, 111, 1) 0%,rgba(72, 218, 137, 1) 100%",
  danger: "linear-gradient(90deg,rgba(234, 84, 85, 1) 0%,rgba(240, 129, 130, 1) 100%",
  warning: "linear-gradient(90deg,rgba(255, 159, 67, 1) 0%,rgba(255, 185, 118, 1) 100%"
};
var mergeColors = (customColors) => {
  return {
    ...colors,
    ...customColors
  };
};

// src/typography.s.ts
import styled3, { css as css2 } from "styled-components";
var subColorStyle = css2`
  && {
    span {
      ${({ subColor }) => {
  return subColor?.substring(0, 8) === "gradient" ? css2`
              background: ${colors[subColor]};
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            ` : css2`
              color: ${subColor ? colors[subColor] : "var(--grey-900, #101010)"};
            `;
}}
    }
  }
`;
var globalStyle = css2`
  ${({ color }) => {
  return color?.substring(0, 8) === "gradient" ? css2`
          background: ${colors[color]};
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        ` : css2`
          color: ${color ? colors[color] : "var(--grey-900, #101010)"} ;
        `;
}}
  ${({ align }) => align && css2`
      text-align: ${align};
    `}
  ${({ subColor }) => subColor && subColorStyle}
  font-family:  'Mulish', sans-serif;
  font-style: normal;
  text-transform: none;
`;
var Display1 = styled3.h1`
  && {
    ${globalStyle}

    font-size: 64px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 84px;
  }
`;
var Display2 = styled3.h1`
  && {
    ${globalStyle}

    font-size: 56px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 78px;
  }
`;
var Display3 = styled3.h1`
  && {
    ${globalStyle}

    font-size: 48px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 68px;
  }
`;
var Display4 = styled3.h1`
  && {
    ${globalStyle}

    font-size: 32px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 46px;
  }
`;
var H1 = styled3.h1`
  && {
    ${globalStyle}

    font-size: 38px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 52px;
  }
`;
var H2 = styled3.h2`
  && {
    ${globalStyle}

    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 44px;
  }
`;
var H3 = styled3.h3`
  && {
    ${globalStyle}

    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 36px;
  }
`;
var H4 = styled3.h4`
  && {
    ${globalStyle}

    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 30px;
  }
`;
var H5 = styled3.h5`
  && {
    ${globalStyle}

    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 24px;
  }
`;
var H6 = styled3.h6`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 21px;
  }
`;
var ParagraphLead = styled3.p`
  && {
    ${globalStyle}

    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 28px;
  }
`;
var Paragraph = styled3.p`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 22px;
  }
`;
var ParagraphMedium = styled3.p`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 22px;
  }
`;
var ParagraphSemiBold = styled3.p`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 22px;
  }
`;
var ParagraphBold = styled3.p`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 22px;
  }
`;
var ParagraphSmall = styled3.p`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
  }
`;
var ParagraphSmallSemiBold = styled3.p`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0px;
    line-height: 14px;
  }
`;
var ParagraphSmallBold = styled3.p`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 20px;
  }
`;
var DeleteText = styled3.del`
  && {
    ${globalStyle}

    font-size: 15px;
    text-decoration: line-through;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
  }
`;
var Italicized = styled3.i`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    text-transform: lowercase;
  }
`;
var Underline = styled3.u`
  && {
    ${globalStyle}

    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
  }
`;
var Caption = styled3.caption`
  && {
    ${globalStyle}

    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 14px;
  }
`;
var ButtonLG = styled3.button`
  && {
    ${globalStyle}

    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.4300000071525574px;
    line-height: 22px;
  }
`;
var ButtonDefault = styled3.button`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.4300000071525574px;
  }
`;
var ButtonSmall = styled3.button`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.4300000071525574px;
    line-height: 16px;
  }
`;
var LabelLg = styled3.button`
  && {
    ${globalStyle}

    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
  }
`;
var LabelDefault = styled3.button`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
  }
`;
var LabelSm = styled3.button`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
  }
`;
var InputLg = styled3.button`
  && {
    ${globalStyle}

    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
  }
`;
var InputDefault = styled3.button`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
  }
`;
var InputSm = styled3.button`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
  }
`;
var PlaceholderLg = styled3.button`
  && {
    ${globalStyle}

    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 22px;
  }
`;
var PlaceholderDefault = styled3.button`
  && {
    ${globalStyle}

    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
  }
`;
var PlaceholderSm = styled3.button`
  && {
    ${globalStyle}

    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 21px;
  }
`;

// src/container.s.ts
import styled4 from "styled-components";
var Container = styled4.div`
  && {
    margin-left: auto;
    margin-right: auto;
    /* max-width: "100vw"; */
    width: 100%;
    transition: all 250ms ease-in-out;

    width: clamp(200px, 95%, 394px);
    // Extra small devices (landscape phones, 320px and 430px) - 24px
    @media (min-width: 320px) {
      width: clamp(296px, 95%, 394px);
    }
    // Small devices (landscape phones, 576px and 744px) - 36px
    @media (min-width: 430px) {
      width: clamp(394px, 90%, 688px);
    }
    // Medium devices (tablets, 744px and 992px) - 56px
    @media (min-width: 744px) {
      width: clamp(688px, 85%, 920px);
    }
    // Large devices (laptop, 992px and 1440px) - 72px
    @media (min-width: 992px) {
      width: clamp(920px, 80%, 1340px);
    }
    // Extra large devices (laptop, 1440px and up) - 100px
    @media (min-width: 1440px) {
      width: clamp(1340px, 75%, 1600px);
    }
  }
`;
export {
  ButtonDefault,
  ButtonLG,
  ButtonSmall,
  Caption,
  Column,
  Container,
  DeleteText,
  Display1,
  Display2,
  Display3,
  Display4,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  InputDefault,
  InputLg,
  InputSm,
  Italicized,
  LabelDefault,
  LabelLg,
  LabelSm,
  Paragraph,
  ParagraphBold,
  ParagraphLead,
  ParagraphMedium,
  ParagraphSemiBold,
  ParagraphSmall,
  ParagraphSmallBold,
  ParagraphSmallSemiBold,
  PlaceholderDefault,
  PlaceholderLg,
  PlaceholderSm,
  Row,
  Subtext,
  Underline,
  colors,
  mergeColors
};