@redocly/theme 0.1.7 → 0.1.8

package/src/ui/Jumbotron.tsx

@@ -0,0 +1,57 @@
+import { space } from 'styled-system';
+import styled from 'styled-components';
+
+import { H1, H2 } from '@theme/ui/Typography';
+import { Background } from '@theme/ui/Background';
+
+export const Jumbotron = styled(Background).attrs(() => ({
+  'data-component-name': 'ui/Jumbotron',
+}))<{
+  pt?: string;
+  pb?: string;
+  pl?: string;
+  pr?: string;
+  bgImage?: string;
+  bgColor?: string;
+  parallaxEffect?: boolean;
+  textColor?: string;
+}>`
+  flex-direction: column;
+  padding-top: ${({ pt }) => pt || '0'};
+  padding-bottom: ${({ pb }) => pb || '8em'};
+  padding-left: ${({ pl }) => pl || '0'};
+  padding-right: ${({ pr }) => pr || '0'};
+  ${({ bgColor }) => bgColor && `background: ${bgColor}`};
+  ${({ bgImage, bgColor }) =>
+    bgImage &&
+    `
+      background: ${bgColor || 'var(--color-primary-main)'} url(${bgImage});
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+  `};
+  ${({ parallaxEffect }) =>
+    parallaxEffect &&
+    `
+      background-attachment: scroll, fixed;
+  `};
+  ${space}
+  ${H1}, ${H2} {
+    color: ${({ textColor }) => textColor || 'var(--navbar-color-text)'};
+    text-align: center;
+    padding: 0;
+  }
+  h1 {
+    font-size: 3.5em;
+    line-height: 1.2;
+    font-weight: var(--font-weight-bold);
+    margin: 1.75em 0 0.5em 0;
+  }
+  h2 {
+    font-size: 1.875em;
+    line-height: 1;
+    font-weight: var(--font-weight-light);
+    margin: 0;
+    margin-bottom: 2em;
+  }
+`;

package/src/ui/Tiles/ThinTile.tsx

@@ -0,0 +1,151 @@
+import React, { Component, CSSProperties } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { Flex } from '@theme/ui/Flex';
+import { TileText } from '@theme/ui/Tiles/TileText';
+import { TileHeader } from '@theme/ui/Tiles/TileHeader';
+
+type TextAlign = 'left' | 'right' | 'center' | 'justify';
+
+export interface TileProps {
+  header?: string;
+  icon?: string;
+  children?: string;
+  to?: string;
+  target?: string;
+  headerAlign?: TextAlign;
+  textAlign?: TextAlign;
+  bgColor?: string;
+  bgImage?: string;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+  maxWidth?: string;
+}
+
+const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  box-sizing: border-box;
+  transition: box-shadow 0.25s ease;
+  padding: 24px;
+  margin-bottom: 20px;
+  text-decoration: none;
+  width: 100%;
+  background-color: ${({ bgColor }) => bgColor || '#fff'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+
+  :hover {
+    box-shadow: 0px 10px 100px 0px rgba(35, 35, 35, 0.2);
+  }
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    width: calc(50% - 20px);
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 250px;
+  }
+
+  ${({ theme }) => theme.mediaQueries.large} {
+    width: 280px;
+  }
+
+  &.external-url {
+    :after {
+      display: none;
+    }
+  }
+`;
+
+const ThinTileIcon = styled.img`
+  width: 90px;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 80px;
+  }
+`;
+
+const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'center'};
+`;
+
+const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
+  font-size: 18px;
+  line-height: 1.5;
+  flex-shrink: 0;
+  min-height: 3em;
+  text-align: ${({ align }) => align || 'center'};
+  ${({ icon }) =>
+    icon
+      ? `
+    display: -webkit-box;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-clamp: 8;
+  `
+      : ''};
+  ${({ theme }) => theme.mediaQueries.small} {
+    min-height: 6em;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    min-height: 4.5em;
+  }
+`;
+
+export class ThinTile extends Component<TileProps> {
+  render(): JSX.Element {
+    const { header, icon, children, to, target, headerAlign, textAlign, color, className, style } =
+      this.props;
+
+    const Wrapper = to
+      ? ThinTileWrapper
+      : (ThinTileWrapper.withComponent('div') as typeof ThinTileWrapper);
+
+    return (
+      <Wrapper
+        to={to}
+        target={target}
+        color={color}
+        className={className}
+        style={style}
+        data-component-name="ui/Tiles/ThinTile"
+      >
+        {(icon || header) && (
+          <Flex flexDirection="column">
+            {icon && (
+              <Flex
+                flexShrink={0}
+                height={{ xs: 'auto', small: '100px', medium: '110px' }}
+                alignItems="center"
+                justifyContent="center"
+                mb="25px"
+              >
+                <ThinTileIcon src={icon} />
+              </Flex>
+            )}
+            {header && (
+              <ThinTileHeader align={headerAlign} color={color} data-cy={`Thin-${header}`}>
+                {header}
+              </ThinTileHeader>
+            )}
+          </Flex>
+        )}
+        {children && (
+          <ThinTileText icon={icon} align={textAlign} color={color}>
+            {children}
+          </ThinTileText>
+        )}
+      </Wrapper>
+    );
+  }
+}

package/src/ui/Tiles/TileHeader.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const TileHeader = styled.h3.attrs(() => ({
+  'data-component-name': 'ui/Tiles/TileHeader',
+}))<{ color?: string }>`
+  font-weight: var(--font-weight-bold);
+  line-height: 1.25;
+  color: ${(props) => props.color || 'var(--color-primary-main)'};
+  font-family: var(--h-font-family);
+  && {
+    margin: 0 0 0.5em;
+  }
+`;

package/src/ui/Tiles/TileText.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const TileText = styled.span.attrs(() => ({
+  'data-component-name': 'ui/Tiles/TileText',
+}))<{ color?: string }>`
+  display: inline-block;
+  font-weight: var(--font-weight-regular);
+  overflow: hidden;
+  color: ${(props) => props.color || 'var(--color-text-main)'};
+  line-height: 1.25;
+  font-family: var(--font-family-primary);
+`;

package/src/ui/Tiles/WideTile.tsx

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { TileProps } from '@theme/ui';
+import { TileText } from '@theme/ui/Tiles/TileText';
+import { TileHeader } from '@theme/ui/Tiles/TileHeader';
+
+// prettier-ignore
+const WideTileWrapper = styled(Link)<{
+  disableArrow?: boolean;
+  withIcon: boolean;
+  bgColor?: string;
+  bgImage?: string;
+  color?: string;
+  maxWidth?: string;
+}>`
+  display: inline-flex;
+  flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
+  border-radius: 10px;
+  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  background-color: ${({ bgColor }) => bgColor || '#fff'};
+  background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
+  background-repeat: no-repeat;
+  padding: 24px;
+  padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
+  margin-bottom: 32px;
+  box-sizing: border-box;
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  transition: box-shadow 0.25s ease;
+  :hover {
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.2);
+  }
+  :before {
+    content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
+    display: inline-block;
+    width: 9px;
+    min-height: 18px;
+    background-size: 9px 18px;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 30px;
+  }
+  &.external-url::after {
+    content: none;
+  }
+  
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: calc(50% - 2em);
+    padding: 32px;
+    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    flex-direction: row;
+    max-width: ${({ maxWidth }) => maxWidth};
+  }
+`;
+
+const WideTileHeader = styled(TileHeader)<{ align?: string }>`
+  font-size: 24px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+const WideTileText = styled(TileText)<{ align?: string }>`
+  font-size: 18px;
+  text-align: ${({ align }) => align || 'left'};
+`;
+
+const WideTileIcon = styled.div`
+  margin-bottom: 24px;
+  flex-shrink: 0;
+  width: 70px;
+  img {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin-right: 24px;
+    margin-bottom: 0;
+  }
+`;
+
+export class WideTile extends Component<TileProps & { disableArrow?: boolean }> {
+  render(): JSX.Element {
+    const {
+      to,
+      header,
+      children,
+      target,
+      disableArrow,
+      textAlign,
+      headerAlign,
+      icon,
+      bgColor,
+      bgImage,
+      color,
+      className,
+      style,
+      maxWidth,
+    } = this.props;
+    return (
+      <WideTileWrapper
+        to={to}
+        target={target}
+        disableArrow={disableArrow}
+        withIcon={!!icon}
+        bgColor={bgColor}
+        bgImage={bgImage}
+        color={color}
+        className={className}
+        style={style}
+        maxWidth={maxWidth}
+        data-component-name="ui/Tiles/WideTile"
+      >
+        {icon && (
+          <WideTileIcon>
+            <img src={icon} alt="" />
+          </WideTileIcon>
+        )}
+        <div>
+          {header && (
+            <WideTileHeader align={textAlign} color={color} data-cy={`Wide-${header}`}>
+              {header}
+            </WideTileHeader>
+          )}
+          {children && (
+            <WideTileText align={headerAlign} color={color}>
+              {children}
+            </WideTileText>
+          )}
+        </div>
+      </WideTileWrapper>
+    );
+  }
+}

package/src/ui/Typography.tsx

@@ -0,0 +1,167 @@
+import styled, { css, SimpleInterpolation } from 'styled-components';
+import { color, typography as typographySystem, ColorProps, TypographyProps } from 'styled-system';
+
+export interface ITypography {
+  fontSize?: string;
+  fontWeight?: string | number;
+  fontFamily?: string;
+  lineHeight?: string;
+  color?: string;
+  transform?: string;
+  marginTop?: string;
+  marginRight?: string;
+  marginLeft?: string;
+  marginBottom?: string;
+  marginVertical?: string;
+  marginHorizontal?: string;
+}
+
+export const typographyTokens = {
+  typography: {
+    fontSize: 'var(--font-size-base)',
+    fontFamily: 'var(--font-family-h)',
+    lineHeight: 'var(--line-height-m)',
+  },
+  heading1: {
+    fontSize: 'var(--h1-font-size)',
+    fontFamily: 'var(--font-family-h)',
+    fontWeight: 'var(--font-weight-bold)',
+    lineHeight: 'var(--h1-line-height)',
+    color: 'var(--color-text-main)',
+    marginTop: 'var(--h1-margin-top)',
+    marginBottom: 'var(--h1-margin-bottom)',
+  },
+  heading2: {
+    fontSize: 'var(--h2-font-size)',
+    fontFamily: 'var(--font-family-h)',
+    fontWeight: 'var(--font-weight-bold)',
+    lineHeight: 'var(--h2-line-height)',
+    color: 'var(--color-text-main)',
+    marginTop: 'var(--h2-margin-top)',
+    marginBottom: 'var(--h2-margin-bottom)',
+  },
+  heading3: {
+    fontSize: 'var(--h3-font-size)',
+    fontFamily: 'var(--font-family-h)',
+    fontWeight: 'var(--font-weight-bold)',
+    lineHeight: 'var(--h3-line-height)',
+    color: 'var(--color-text-main)',
+    marginTop: 'var(--h3-margin-top)',
+    marginBottom: 'var(--h3-margin-bottom)',
+  },
+  heading4: {},
+  heading5: {},
+  heading6: {},
+  blockquote: {
+    color: 'var(--color-text-main)',
+  },
+  alert: {
+    fontSize: 'var(--alert-font-size)',
+    fontWeight: 'var(--alert-font-weight)',
+    lineHeight: 'var(--alert-line-height)',
+    marginTop: 'var(--alert-margin-vertical)',
+    marginBottom: 'var(-alert-margin-vartical)',
+    heading: {
+      fontSize: 'var(--alert-heading-font-size)',
+      fontWeight: 'var(--alert-heading-font-weight)',
+      lineHeight: 'var(--alert-line-height)',
+      transform: 'var(--alert-heading-transform)',
+    },
+  },
+};
+
+export function typography(theme?: ITypography): string | SimpleInterpolation {
+  if (!theme) return '';
+  return css`
+    font-size: ${theme.fontSize || ''};
+    font-weight: ${theme.fontWeight || ''};
+    font-family: ${theme.fontFamily || ''};
+    line-height: ${theme.lineHeight || ''};
+    color: ${theme.color || ''};
+    text-transform: ${theme.transform || ''};
+  `;
+}
+
+type HeadingProps = TypographyProps &
+  ColorProps & {
+    mt?: string;
+    mb?: string;
+  };
+
+export const Emphasis = styled.strong.attrs(() => ({
+  'data-component-name': 'ui/Typography/Emphasis',
+}))`
+  font-weight: var(--font-weight-bold);
+`;
+
+export const H1 = styled.h1.attrs(() => ({
+  'data-component-name': 'ui/Typography/H1',
+}))<HeadingProps>`
+  ${typography(typographyTokens.heading1)};
+  margin: 1.35em 0 0.9em;
+  && {
+    ${({ mt }) => mt && `margin-top: ${mt};`}
+    ${({ mb }) => mb && `margin-bottom: ${mb};`}
+    ${color}
+    ${typographySystem}
+  }
+`;
+
+export const H2 = styled.h1.attrs(() => ({
+  'data-component-name': 'ui/Typography/H2',
+}))<HeadingProps>`
+  ${typography(typographyTokens.heading2)};
+  margin: 1.25em 0 0.8em;
+  && {
+    ${({ mt }) => mt && `margin-top: ${mt};`}
+    ${({ mb }) => mb && `margin-bottom: ${mb};`}
+    ${color}
+    ${typographySystem}
+  }
+`;
+
+export const H3 = styled.h1.attrs(() => ({
+  'data-component-name': 'ui/Typography/H3',
+}))<HeadingProps>`
+  ${typography(typographyTokens.heading3)};
+  margin: 1.25em 0 0.8em;
+  && {
+    ${({ mt }) => mt && `margin-top: ${mt};`}
+    ${({ mb }) => mb && `margin-bottom: ${mb};`}
+    ${color}
+    ${typographySystem}
+  }
+`;
+
+export const SectionHeader = styled.h2`
+  color: var(--color-primary-main);
+  font-size: 1.75em;
+  font-weight: var(--font-weight-light);
+  text-align: center;
+  margin: 2.65em 0;
+  padding: 0px 20px;
+  font-family: var(--font-family-h);
+`;
+
+export const Typography = styled.p.attrs(() => ({
+  'data-component-name': 'ui/Typography/Typography',
+}))<
+  TypographyProps & {
+    color?: string;
+    mt?: string;
+    mb?: string;
+  }
+>`
+  ${typography(typographyTokens.typography)};
+  color: var(--color-text-main);
+  ${color}
+  margin-top: ${({ mt }) => mt || '1em'};
+  margin-bottom: ${({ mb }) => mb || '1em'};
+  ${typographySystem}
+`;
+
+export const CompactTypography = styled(Typography).attrs(() => ({
+  mt: '0em',
+  mb: '0em',
+  'data-component-name': 'ui/Typography/CompactTypography',
+}))``;

package/src/ui/UniversalLink.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { useLocation, LinkProps } from 'react-router-dom';
+import styled from 'styled-components';
+
+import isUrl from '@theme/utils/isUrl';
+import replaceHashInColor from '@theme/utils/replaceHashInColor';
+import { Link } from '@portal/Link';
+
+const StyledExternalLink = styled.a`
+  &.external-url {
+    position: relative;
+
+    :after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='${({
+        theme,
+      }) =>
+        replaceHashInColor(
+          theme.colors.text.primary,
+        )}' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
+      width: 10px;
+      height: 10px;
+      background-repeat: no-repeat;
+      top: 50%;
+      right: -15px;
+      transform: translateY(-50%);
+    }
+  }
+`;
+
+// TODO: We're using our own Link component so probably filtering is not necessary here.
+// filter out unnecessary props
+const propsList = [
+  'color',
+  'size',
+  'variant',
+  'bgColor',
+  'bgImage',
+  'disableArrow',
+  'withIcon',
+  'maxWidth',
+  'inversed',
+  'transparent',
+  'large',
+];
+
+export const withPropsFilter =
+  (filterList: string[]) => (WrappedComponent: React.FunctionComponent) =>
+    function WithPropsFilter(props: React.PropsWithChildren<object>): JSX.Element {
+      const filteredProps = Object.fromEntries(
+        Object.entries(props).filter(([key]) => !filterList.includes(key)),
+      );
+
+      return <WrappedComponent {...filteredProps} />;
+    };
+
+export interface PortalLinkProps<TState> extends LinkProps<TState> {
+  activeClassName?: string;
+  activeStyle?: object;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  partiallyActive?: boolean;
+  replace?: boolean;
+  state?: TState;
+  to: string;
+}
+
+export interface UniversalLinkProps extends Partial<PortalLinkProps<object>> {
+  external?: boolean;
+  ref?: any;
+}
+
+export const UniversalLink = withPropsFilter(propsList)((props: UniversalLinkProps) => {
+  return (typeof props.to === 'string' && (isUrl(props.to) || props.to.startsWith('mailto:'))) ||
+    props.external ? (
+    <StyledExternalLink
+      style={props.style}
+      href={props.to}
+      target={props.target || (props.external && '_blank') || '_self'}
+      className={`${props.external ? 'external-url' : ''} ${props.className}`}
+      rel={props.rel}
+      data-cy={`universalLink-${
+        typeof props.children === 'string' ? props.children : 'with-nested-jsx'
+      }`}
+    >
+      {props.children}
+    </StyledExternalLink>
+  ) : props.to == null ? (
+    <a onClick={props.onClick} className={props.className} style={props.style}>
+      {props.children}
+    </a>
+  ) : (
+    <Link
+      {...props}
+      to={props.to}
+      state={{ previousPath: useLocation()?.pathname, ...props.state }}
+    />
+  );
+});

package/src/ui/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+export * from '@theme/ui/Button';
+export * from '@theme/ui/Box';
+export * from '@theme/ui/Flex';
+export * from '@theme/ui/Jumbotron';
+export * from '@theme/ui/Typography';
+export * from '@theme/ui/Tiles/WideTile';
+export * from '@theme/ui/Tiles/ThinTile';
+
+export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
+  children;
+export const EmptyLayout = LandingLayout;

package/src/utils/__tests__/ClipboardService.test.ts

@@ -1,4 +1,4 @@
-import { ClipboardService } from '../ClipboardService';
+import { ClipboardService } from '@theme/utils';
 
 describe('ClipboardService', () => {
   describe('isSupported', () => {

package/src/utils/__tests__/css-variables.test.ts

@@ -1,4 +1,4 @@
-import { getCssColorVariable } from '../css-variables';
+import { getCssColorVariable } from '@theme/utils';
 
 describe('css-variables', () => {
   afterEach(() => {

package/src/utils/__tests__/highlight.test.ts

@@ -1,6 +1,6 @@
 import * as Prism from 'prismjs';
 
-import { highlight, mapLang } from '../highlight';
+import { highlight, mapLang } from '@theme/utils';
 
 jest.mock('prismjs', () => {
   const original = jest.requireActual('prismjs');

package/src/utils/__tests__/jsonToHtml.test.ts

@@ -1,4 +1,4 @@
-import { jsonToHTML } from '../jsonToHtml';
+import { jsonToHTML } from '@theme/utils';
 
 const data = {
   id: '600dc3b5d617e547a0e74cb9',

package/src/utils/__tests__/media-css.test.ts

@@ -1,4 +1,4 @@
-import { generateMediaQueries } from '../media-css';
+import { generateMediaQueries } from '@theme/utils';
 
 describe('media-css helpers', () => {
   describe('generateMediaQueries function', () => {

package/src/utils/__tests__/theme-helpers.test.ts

@@ -1,4 +1,4 @@
-import { getTypographyCssRulesByComponentName } from '../theme-helpers';
+import { getTypographyCssRulesByComponentName } from '@theme/utils';
 
 describe('getTypographyCssRulesByComponentName', () => {
   it('should return object with defined css variable for component', () => {