@hlf-fe/pulmo-ui 1.0.0 → 1.1.0

package/dist/styles/styles/mixins.js

@@ -1,336 +0,0 @@
-import { css } from 'styled-components';
-import { BREAKPOINT_VALUES, VARIABLES, SPACING, COLORS } from './theme';
-import { em, rem } from './mixins/units';
-import { themeColors, themeSpacing, themeBorderRadius, themeElevation, } from './mixins/theme-mixins';
-export { themeColors, themeSpacing, themeBorderRadius, themeElevation, em, rem };
-export const media = {
-    XS: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.XS)}) {
-      ${css(...args)};
-    }
-  `,
-    S: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.S)}) {
-      ${css(...args)};
-    }
-  `,
-    S_ALT: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.S_ALT)}) {
-      ${css(...args)};
-    }
-  `,
-    M: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.M)}) {
-      ${css(...args)};
-    }
-  `,
-    L: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.L)}) {
-      ${css(...args)};
-    }
-  `,
-    XL: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.XL)}) {
-      ${css(...args)};
-    }
-  `,
-    XXL: (...args) => css `
-    @media (min-width: ${em(BREAKPOINT_VALUES.XXL)}) {
-      ${css(...args)};
-    }
-  `,
-    IOS: (...args) => css `
-    @supports (-webkit-touch-callout: none) {
-      ${css(...args)};
-    }
-  `,
-};
-export const siteWidthRowS = () => css `
-  margin-left: ${SPACING.spacingXS};
-  margin-right: ${SPACING.spacingXS};
-  margin-bottom: ${rem(20)};
-  margin-top: ${rem(20)};
-  max-width: ${VARIABLES.siteWidthS};
-
-  ${media.XS `
-    margin-left: ${SPACING.spacingM};
-    margin-right: ${SPACING.spacingM};
-  `}
-
-  ${media.S_ALT `
-    margin-left: auto;
-    margin-right: auto;
-  `}
-
-  ${media.M `
-    margin-bottom: ${SPACING.spacingXL};
-    margin-top: ${SPACING.spacingXL};
-  `}
-
-  ${media.L `
-    margin-top: ${SPACING.spacingXXL};
-    margin-bottom: ${SPACING.spacingXXL};
-  `}
-`;
-export const siteWidthRow = () => css `
-  margin-left: ${SPACING.spacingXS};
-  margin-right: ${SPACING.spacingXS};
-  margin-bottom: ${rem(20)};
-  margin-top: ${rem(20)};
-  max-width: ${VARIABLES.siteWidth};
-
-  ${media.XS `
-    margin-left: ${SPACING.spacingM};
-    margin-right: ${SPACING.spacingM};
-  `}
-
-  ${media.M `
-    margin-bottom: ${SPACING.spacingXL};
-    margin-top: ${SPACING.spacingXL};
-    margin-left: ${rem(24)};
-    margin-right: ${rem(24)};
-  `}
-
-  ${media.L `
-    margin-top: ${SPACING.spacingXXL};
-    margin-right: auto;
-    margin-bottom: ${SPACING.spacingXXL};
-    margin-left: auto;
-  `}
-`;
-export const siteWidthRowXL = () => css `
-  margin-left: ${SPACING.spacingXS};
-  margin-right: ${SPACING.spacingXS};
-  margin-bottom: ${rem(20)};
-  margin-top: ${rem(20)};
-  max-width: ${VARIABLES.siteWidthXL};
-
-  ${media.XS `
-    margin-left: ${SPACING.spacingM};
-    margin-right: ${SPACING.spacingM};
-  `}
-
-  ${media.M `
-    margin-bottom: ${SPACING.spacingXL};
-    margin-top: ${SPACING.spacingXL};
-    margin-left: ${rem(24)};
-    margin-right: ${rem(24)};
-  `}
-
-  ${media.XL `
-    margin-top: ${SPACING.spacingXXL};
-    margin-right: auto;
-    margin-bottom: ${SPACING.spacingXXL};
-    margin-left: auto;
-  `}
-`;
-export const fullWidthRow = () => css `
-  padding-top: ${SPACING.spacingL};
-  padding-right: ${SPACING.spacingXS};
-  padding-bottom: ${SPACING.spacingL};
-  padding-left: ${SPACING.spacingXS};
-  margin-bottom: ${rem(20)};
-  margin-top: ${rem(20)};
-
-  ${media.XS `
-    padding-left: ${SPACING.spacingM};
-    padding-right: ${SPACING.spacingM};
-  `}
-
-  ${media.M `
-    padding-top: ${SPACING.spacingXL};
-    padding-right: ${rem(24)};
-    padding-bottom: ${SPACING.spacingXL};
-    padding-left: ${rem(24)};
-    margin-bottom: ${SPACING.spacingXL};
-    margin-top: ${SPACING.spacingXL};
-  `}
-
-  ${media.L `
-    padding-left: 0;
-    padding-right: 0;
-    margin-bottom: ${SPACING.spacingXXL};
-    margin-top: ${SPACING.spacingXXL};
-  `}
-`;
-export const fontSize = {
-    XS: () => css `
-    font-size: ${rem(14)};
-    line-height: ${rem(20)};
-  `,
-    S: () => css `
-    font-size: ${rem(16)};
-    line-height: ${rem(20)};
-
-    ${media.M `
-      line-height: ${rem(24)};
-    `}
-  `,
-    M: () => css `
-    font-size: ${rem(18)};
-    line-height: ${rem(24)};
-
-    ${media.M `
-      font-size: ${rem(20)};
-      line-height: ${rem(28)};
-    `}
-  `,
-    L: () => css `
-    font-size: ${rem(20)};
-    line-height: ${rem(28)};
-
-    ${media.M `
-      font-size: ${rem(24)};
-      line-height: ${rem(32)};
-    `}
-
-    ${media.L `
-      font-size: ${rem(28)};
-      line-height: ${rem(40)};
-    `}
-  `,
-    XL: () => css `
-    font-size: ${rem(28)};
-    line-height: ${rem(36)};
-
-    ${media.M `
-      font-size: ${rem(36)};
-      line-height: ${rem(48)};
-    `}
-
-    ${media.L `
-      font-size: ${rem(44)};
-      line-height: ${rem(52)};
-    `}
-  `,
-    XXL: () => css `
-    font-size: ${rem(40)};
-    line-height: ${rem(52)};
-
-    ${media.M `
-      font-size: ${rem(56)};
-      line-height: ${rem(72)};
-    `}
-
-    ${media.L `
-      font-size: ${rem(64)};
-      line-height: ${rem(80)};
-    `}
-  `,
-};
-export const buttonSize = {
-    S: () => css `
-    font-size: ${rem(14)};
-    height: ${rem(32)};
-    padding: 0 ${rem(16)};
-  `,
-    M: () => css `
-    font-size: ${rem(16)};
-    height: ${rem(44)};
-    padding: 0 ${rem(24)};
-  `,
-    L: () => css `
-    font-size: ${rem(18)};
-    height: ${rem(56)};
-    padding: 0 ${rem(24)};
-  `,
-};
-export const alertTheme = {
-    error: () => css `
-    background-color: ${COLORS.pink};
-    border: ${rem(1)} solid rgba(216, 17, 37, 0.4);
-    font-size: ${rem(14)};
-  `,
-    warning: () => css `
-    background-color: ${COLORS.yellowLight};
-    border: ${rem(1)} solid ${COLORS.yellowDark};
-    font-size: ${rem(14)};
-  `,
-    info: () => css `
-    background-color: ${COLORS.lightBlue};
-    border: ${rem(1)} solid ${COLORS.mediumBlue};
-    font-size: ${rem(14)};
-  `,
-    success: () => css `
-    background-color: ${COLORS.mint};
-    border: none;
-  `,
-    default: () => css `
-    background-color: ${COLORS.lightBlue};
-    border: none;
-  `,
-};
-export const boxShadow = {
-    default: () => css `
-    box-shadow:
-      rgba(0, 0, 0, 0.2) 0rem 0.75rem 1.75rem 0rem,
-      rgba(0, 0, 0, 0.1) 0rem 0.125rem 0.25rem 0rem,
-      rgba(255, 255, 255, 0.05) 0rem 0rem 0rem 0.063rem inset;
-  `,
-};
-export const buttonLinkStyling = {
-    inverted: () => css `
-    display: block;
-    font-family: ${({ theme }) => theme.valueBold};
-    font-weight: 400;
-    font-size: ${rem(16)};
-    width: fit-content;
-    color: ${({ theme }) => theme.red};
-    background-color: transparent;
-    border: ${rem(2)} solid ${({ theme }) => theme.red};
-    border-radius: ${rem(5)};
-    transition: background-color 0.3s ease-out;
-    padding: 0 ${rem(24)};
-    line-height: 2.5;
-    text-decoration: none;
-
-    &:hover,
-    :active,
-    :focus-visible {
-      background-color: ${({ theme }) => theme.red};
-      color: ${({ theme }) => theme.white};
-    }
-
-    &:focus-visible {
-      outline: ${rem(2)} solid ${({ theme }) => theme.blackLight};
-      outline-offset: ${rem(2)};
-    }
-  `,
-    text: () => css `
-    font-family: ${({ theme }) => theme.valueBold};
-    font-weight: 400;
-    font-size: ${rem(16)};
-    width: fit-content;
-    color: ${({ theme }) => theme.red};
-    text-decoration: underline;
-    text-decoration-thickness: ${rem(2)};
-    text-underline-offset: ${rem(6)};
-    line-height: ${rem(26)};
-    outline-offset: ${rem(2)};
-
-    ${media.L `
-      font-size: ${rem(18)};
-    `}
-
-    &:hover, :active, :focus-visible {
-      color: ${({ theme }) => theme.redHover};
-      text-decoration: none;
-    }
-  `,
-};
-export const linkStyling = ({ fontSize = 16 }) => css `
-  font-family: ${({ theme }) => theme.valueBold};
-  color: ${({ theme }) => theme.redClear};
-  font-size: ${rem(fontSize)};
-  line-height: ${rem(22)};
-  font-weight: 400;
-  text-decoration: underline;
-  outline-offset: ${rem(2)};
-
-  &:hover,
-  :active,
-  :focus-visible {
-    color: ${({ theme }) => theme.redHover};
-    text-decoration: none;
-  }
-`;

package/dist/styles/styles/theme.d.ts

@@ -1,135 +0,0 @@
-export declare const BREAKPOINT_VALUES: {
-    XS: number;
-    S: number;
-    S_ALT: number;
-    M: number;
-    L: number;
-    XL: number;
-    XXL: number;
-};
-export declare const VARIABLES: {
-    siteWidthS: string;
-    siteWidth: string;
-    siteWidthXL: string;
-    siteMaxWidth: string;
-    mobileNavHeight: number;
-};
-export declare const THEME_SPACING: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export declare const SPACING: {
-    spacingXXS: string;
-    spacingXS: string;
-    spacingS: string;
-    spacingM: string;
-    spacingL: string;
-    spacingXL: string;
-    spacingXXL: string;
-};
-export declare const FONTS: {
-    valueRegular: string;
-    valueMedium: string;
-    valueBold: string;
-};
-export declare const COLORS: {
-    skyBlue: string;
-    black: string;
-    blackLight: string;
-    blackGray: string;
-    blueLight: string;
-    blueLightGray: string;
-    blue: string;
-    blueNavy: string;
-    blackCoral: string;
-    cadetBlue: string;
-    grayLight: string;
-    gray: string;
-    grayDark: string;
-    grayTransparent: string;
-    grayPale: string;
-    green: string;
-    white: string;
-    offWhite: string;
-    redLight: string;
-    red: string;
-    redSecondary: string;
-    redDark: string;
-    redHover: string;
-    redClear: string;
-    redWCAG: string;
-    pink: string;
-    lightBlue: string;
-    mediumBlue: string;
-    mint: string;
-    lilac: string;
-    lavender: string;
-    purple: string;
-    smokeGray: string;
-    yellowLight: string;
-    yellow: string;
-    yellowDark: string;
-};
-export declare const FONT_SIZES: {};
-export declare const THEME_SETTINGS: {
-    spacingXXS: string;
-    spacingXS: string;
-    spacingS: string;
-    spacingM: string;
-    spacingL: string;
-    spacingXL: string;
-    spacingXXL: string;
-    skyBlue: string;
-    black: string;
-    blackLight: string;
-    blackGray: string;
-    blueLight: string;
-    blueLightGray: string;
-    blue: string;
-    blueNavy: string;
-    blackCoral: string;
-    cadetBlue: string;
-    grayLight: string;
-    gray: string;
-    grayDark: string;
-    grayTransparent: string;
-    grayPale: string;
-    green: string;
-    white: string;
-    offWhite: string;
-    redLight: string;
-    red: string;
-    redSecondary: string;
-    redDark: string;
-    redHover: string;
-    redClear: string;
-    redWCAG: string;
-    pink: string;
-    lightBlue: string;
-    mediumBlue: string;
-    mint: string;
-    lilac: string;
-    lavender: string;
-    purple: string;
-    smokeGray: string;
-    yellowLight: string;
-    yellow: string;
-    yellowDark: string;
-    valueRegular: string;
-    valueMedium: string;
-    valueBold: string;
-    siteWidthS: string;
-    siteWidth: string;
-    siteWidthXL: string;
-    siteMaxWidth: string;
-    mobileNavHeight: number;
-    XS: number;
-    S: number;
-    S_ALT: number;
-    M: number;
-    L: number;
-    XL: number;
-    XXL: number;
-};

package/dist/styles/styles/theme.js

@@ -1,77 +0,0 @@
-import { rem } from "./mixins/units";
-export const BREAKPOINT_VALUES = {
-    XS: 360,
-    S: 576,
-    S_ALT: 676,
-    M: 768,
-    L: 1024,
-    XL: 1200,
-    XXL: 1440,
-};
-export const VARIABLES = {
-    siteWidthS: rem(BREAKPOINT_VALUES.S_ALT),
-    siteWidth: rem(BREAKPOINT_VALUES.L),
-    siteWidthXL: rem(BREAKPOINT_VALUES.XL),
-    siteMaxWidth: rem(1920),
-    mobileNavHeight: 56,
-};
-export const THEME_SPACING = {
-    sm: rem(16),
-    md: rem(24),
-    lg: rem(32),
-    xl: rem(40),
-};
-export const SPACING = {
-    spacingXXS: rem(6),
-    spacingXS: rem(8),
-    spacingS: rem(12),
-    spacingM: rem(16),
-    spacingL: rem(32),
-    spacingXL: rem(40),
-    spacingXXL: rem(48),
-};
-export const FONTS = {
-    valueRegular: '"ValueRegular", Arial, sans-serif',
-    valueMedium: '"ValueMedium", Arial, sans-serif',
-    valueBold: '"ValueBold", Arial, sans-serif',
-};
-export const COLORS = {
-    skyBlue: '#d1e4ed',
-    black: '#000',
-    blackLight: '#333333',
-    blackGray: '#858585',
-    blueLight: '#d1e3ed',
-    blueLightGray: '#dfeff7',
-    blue: '#4195be',
-    blueNavy: '#0C4670',
-    blackCoral: '#5A5F61',
-    cadetBlue: '#A4B6BF',
-    grayLight: '#f2f2f2',
-    gray: '#d3d3d3',
-    grayDark: '#8e8e8e',
-    grayTransparent: 'rgba(51,51,51,.15)',
-    grayPale: '#dddddd',
-    green: '#59b290',
-    white: '#fff',
-    offWhite: '#fafafa',
-    redLight: '#ff6e6e',
-    red: '#ea2337',
-    redSecondary: '#ec1b2e',
-    redDark: '#be3639',
-    redHover: '#c11021',
-    redClear: '#d81125',
-    redWCAG: '#E71328',
-    pink: '#fbdfd9',
-    lightBlue: '#e4eef4',
-    mediumBlue: '#76B2CE',
-    mint: '#d6ebe3',
-    lilac: '#F5ECF5',
-    lavender: '#e6d1e5',
-    purple: '#9B4391',
-    smokeGray: '#f7f7f7',
-    yellowLight: '#ffecc4',
-    yellow: '#ffe5b1',
-    yellowDark: '#ffd379',
-};
-export const FONT_SIZES = {};
-export const THEME_SETTINGS = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BREAKPOINT_VALUES), VARIABLES), FONTS), COLORS), FONT_SIZES), SPACING);

package/dist/styles/types.d.ts

@@ -1,3 +0,0 @@
-export type Arrow = {
-    color?: string;
-};

package/dist/styles/types.js

@@ -1 +0,0 @@
-export {};

package/dist/styles/withDefaultTheme.d.ts

@@ -1 +0,0 @@
-export declare const withDefaultTheme: (Component: React.FC<any>) => (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/styles/withDefaultTheme.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { THEME_SETTINGS } from "./theme";
-import { ThemeContext, ThemeProvider } from "styled-components";
-export const withDefaultTheme = (Component) => {
-    return (props) => {
-        const theme = useContext(ThemeContext);
-        if (theme)
-            return _jsx(Component, Object.assign({}, props));
-        return (_jsx(ThemeProvider, { theme: THEME_SETTINGS, children: _jsx(Component, Object.assign({}, props)) }));
-    };
-};