@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/es/components/Footer/Footer.js

@@ -1,6 +1,8 @@
-import React, { useState } from 'react';
-import withSizes from 'react-sizes';
+import React__default, { useState } from 'react';
+import useWindowSize from '../../hooks/useWindowSize.js';
 import styled from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
+import breakpoints from '../../themes/themeComponents/breakpoints.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import { mapCorporateSelector, Services, Categories, LanguageLinks, GeneralInformation, SocialMediaLinks } from './Components/FooterComponents.js';
 import FooterContext from './context/FooterContext.js';
@@ -11,41 +13,37 @@ const BottomSection = styled.div `
     align-content: center;
     align-items: center;
     padding: 0;
-    padding-bottom: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
+    padding-bottom: ${getMultipliedSize(theme.base.baseWidth, 2)};
     flex-wrap: wrap;
+    border-top: 1px solid ${theme.color.text.white + theme.color.transparency.T20};
+
     > div {
         width: 100%;
-        padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
-        &:first-of-type {
-            border-bottom: 1px solid #cfcfcf;
-        }
+        padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
     }
     a {
-        color: ${props => props.theme.color.slateGray};
+        color: ${theme.color.text.white};
         &:hover,
         &:focus,
         &:active {
-            color: ${props => props.theme.color.hotPink};
-            text-decoration: none;
+            color: ${theme.color.text.white + theme.color.transparency.T80};
         }
     }
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${({ collapseSize }) => collapseSize + 1}px) {
         > div {
             width: auto;
             padding: 0;
-            &:first-of-type {
-                border-bottom: none;
-            }
         }
 
         flex-wrap: nowrap;
-        margin: 0 ${props => getMultipliedSize(props.theme.base.baseWidth, 2)};
-        padding: ${props => getMultipliedSize(props.theme.base.baseWidth, 3)} 0;
+        margin: 0 ${getMultipliedSize(theme.base.baseWidth, 2)};
+        padding: ${getMultipliedSize(theme.base.baseWidth, 3)} 0;
     }
 `;
 const FooterContainer = styled.footer `
-    z-index: ${props => props.zIndex};
-    background: #e7e7e7;
+    z-index: ${({ zIndex }) => zIndex};
+    color: ${theme.color.text.white};
+    background: ${theme.color.default.plum};
     margin: 0;
     /* for always placing footer on bottom of the page */
     margin-top: auto;
@@ -60,10 +58,6 @@ const FooterWrapper = styled.div `
     margin-left: auto;
     margin-right: auto;
 `;
-// TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
-const mapSizesToProps = ({ width }, { collapseSize }) => ({
-    isMobileFooter: Boolean(width) && width <= collapseSize,
-});
 let previousValue = false;
 const initialCollapse = {
     0: false,
@@ -71,9 +65,10 @@ const initialCollapse = {
     2: false,
 };
 /** @visibleName Footer */
-const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, isMobileFooter = false, collapseSize = 767, }) => {
+const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, collapseSize = breakpoints.md, }) => {
+    const { isMobile } = useWindowSize(collapseSize);
     // Resets menu states when menu content alters between mobile and desktop
-    const footerChanged = previousValue !== isMobileFooter;
+    const footerChanged = previousValue !== isMobile;
     const services = items.footerNavigation.services || [];
     const categories = items.footerNavigation.categories || [];
     const { generalInformation } = items.footerNavigation;
@@ -94,28 +89,24 @@ const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language
     };
     if (footerChanged) {
         resetFooter();
-        previousValue = isMobileFooter;
+        previousValue = isMobile;
     }
-    const footerContextData = {
+    const footerContextData = React__default.useMemo(() => ({
         language,
         collapseSize,
         isCollapsed,
         setIsCollapsed,
-        isMobileFooter,
-    };
-    return (React.createElement(FooterContainer, { zIndex: zIndex },
-        React.createElement(FooterWrapper, null,
-            React.createElement(FooterContext.Provider, { value: footerContextData },
-                Boolean(services.length) && React.createElement(Services, { services: services }),
-                Boolean(categories.length) && React.createElement(Categories, { categories: categories }),
-                React.createElement(BottomSection, { collapseSize: collapseSize, "data-testid": "bottom-section" },
-                    Boolean(languages.length) && React.createElement(LanguageLinks, { languages: languages }),
-                    generalInformation && (React.createElement(GeneralInformation, { generalInformation: generalInformation })),
-                    socialMedia && React.createElement(SocialMediaLinks, { socialMedia: socialMedia }))))));
-};
-/** @component */
-// TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
-// @ts-ignore
-var Footer$1 = withSizes(mapSizesToProps)(Footer);
+        isMobileFooter: isMobile,
+    }), [collapseSize, isCollapsed, isMobile, language]);
+    return (React__default.createElement(FooterContainer, { zIndex: zIndex },
+        React__default.createElement(FooterWrapper, null,
+            React__default.createElement(FooterContext.Provider, { value: footerContextData },
+                Boolean(services.length) && React__default.createElement(Services, { services: services }),
+                Boolean(categories.length) && React__default.createElement(Categories, { categories: categories }),
+                React__default.createElement(BottomSection, { collapseSize: collapseSize, "data-testid": "bottom-section" },
+                    Boolean(languages.length) && React__default.createElement(LanguageLinks, { languages: languages }),
+                    generalInformation && (React__default.createElement(GeneralInformation, { generalInformation: generalInformation })),
+                    socialMedia && React__default.createElement(SocialMediaLinks, { socialMedia: socialMedia }))))));
+};
 
-export default Footer$1;
+export { Footer as default };

package/build/es/components/Footer/context/FooterContext.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
-import type { FooterProps } from '../Footer';
-declare const FooterContext: React.Context<FooterProps>;
+import type { FooterProps, IsCollapsedProps } from '../Footer';
+interface FooterContextProps extends Pick<FooterProps, 'collapseSize' | 'language'> {
+    isCollapsed: IsCollapsedProps;
+    setIsCollapsed: React.Dispatch<React.SetStateAction<IsCollapsedProps>>;
+    isMobileFooter?: boolean;
+}
+declare const FooterContext: React.Context<FooterContextProps>;
 export default FooterContext;

package/build/es/components/Footer/context/FooterContext.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React__default from 'react';
+import breakpoints from '../../../themes/themeComponents/breakpoints.js';
 
-const FooterContext = React.createContext({
+const FooterContext = React__default.createContext({
     language: 'fi',
-    collapseSize: 767,
+    collapseSize: breakpoints.md,
     isCollapsed: {
         0: false,
         1: false,
@@ -11,4 +12,4 @@ const FooterContext = React.createContext({
     setIsCollapsed: () => null,
 });
 
-export default FooterContext;
+export { FooterContext as default };

package/build/es/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type Position = 'left' | 'right' | 'middle';
+type Position = 'left' | 'right' | 'middle';
 export interface IconProps {
     /**
      * Icon width and height passed to SVG element.
@@ -40,21 +40,10 @@ export interface Props extends Partial<IconProps> {
      * @param {Position} left Icon component is on the left side of content, add right margin
      * @param {Position} right Icon component is on the right side of content, add left margin
      * @param {Position} middle Icon component is in the middle of content, add left and right margins
-     * @default false
-     */
-    position?: Position;
-    /**
-     * Indicates that this component is on left side of other content and adds an appropriate right margin.
      *
-     * @deprecated Use property `position`
+     * @default undefined
      */
-    left?: boolean;
-    /**
-     * Indicates that this component is on right side of other contents and adds an appropriate left margin.
-     *
-     * @deprecated Use property `position`
-     */
-    right?: boolean;
+    position?: Position;
     /**
      * Allows to pass a custom className
      */
@@ -64,6 +53,6 @@ export interface Props extends Partial<IconProps> {
      */
     'data-testid'?: string;
 }
-declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => JSX.Element | null;
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element | null;
 /** @component */
 export default Icon;

package/build/es/components/Icon/Icon.js

@@ -1,22 +1,21 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import styled from '../../themes/styled.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import * as index from '../Icons/index.js';
-import * as Icons from './Icons.js';
 
 const IconsList = index;
-const StandardIconsList = Icons;
 const IconContainer = styled.span `
+    display: inline-flex;
     width: ${p => p.size};
     height: ${p => p.size};
 
-    ${p => (p.position === 'right' || p.position === 'middle' || p.right) &&
+    ${p => (p.position === 'right' || p.position === 'middle') &&
     `
             margin-left: ${getMultipliedSize(p.theme.base.baseWidth, 1)};
         `}
 
-    ${p => (p.position === 'left' || p.position === 'middle' || p.left) &&
+    ${p => (p.position === 'left' || p.position === 'middle') &&
     `
             margin-right: ${getMultipliedSize(p.theme.base.baseWidth, 1)};
         `}
@@ -29,17 +28,17 @@ const IconContainer = styled.span `
 const Icon = (_a) => {
     var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["name", "icon", "color", "size", 'data-testid']);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
-    const RenderIcon = name && (IconsList[name] || StandardIconsList[name]);
+    const RenderIcon = name && IconsList[name];
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
     if (RenderIcon) {
-        return (React.createElement(IconContainer, { position: props.position, size: size, left: props.left, right: props.right, className: "dnasg-icon", "data-testid": dataTestId },
-            React.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color }))));
+        return (React__default.createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
+            React__default.createElement(RenderIcon, Object.assign({}, props, { size: size, color: color }))));
     }
     if (IconParam) {
-        return (React.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, left: props.left, right: props.right },
-            React.createElement(IconParam, { size: size, color: color })));
+        return (React__default.createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId },
+            React__default.createElement(IconParam, { size: size, color: color })));
     }
     return null;
 };
 
-export default Icon;
+export { Icon as default };

package/build/es/components/Icons/Small/hlArrowBackSmall.d.ts

@@ -1,12 +1,4 @@
-/// <reference types="react" />
-import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlArrowBackSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
-/**
- * @deprecated Use `hlArrowBackSmall`
- */
-export declare const hlArrowSmallLeft: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
-/**
- * @deprecated Use `hlArrowBackSmall`
- */
-export declare const hlArrowBack: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlArrowBackSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlArrowBackSmall;

package/build/es/components/Icons/Small/hlArrowBackSmall.js

@@ -1,19 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlArrowBackSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M3.25 5.4L4.62 4a.6.6 0 1 0-.85-.85l-2.4 2.4L1 6l.42.42 2.4 2.4a.6.6 0 1 0 .8-.82L3.25 6.6H9.6v1.2a.6.6 0 0 0 1.2 0V5.4z" })));
-};
-/**
- * @deprecated Use `hlArrowBackSmall`
- */
-const hlArrowSmallLeft = hlArrowBackSmall;
-/**
- * @deprecated Use `hlArrowBackSmall`
- */
-const hlArrowBack = hlArrowBackSmall;
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M3.25 5.4L4.62 4a.6.6 0 1 0-.85-.85l-2.4 2.4L1 6l.42.42 2.4 2.4a.6.6 0 1 0 .8-.82L3.25 6.6H9.6v1.2a.6.6 0 0 0 1.2 0V5.4z" })));
+};
 
-export default hlArrowBackSmall;
-export { hlArrowBack, hlArrowSmallLeft };
+export { hlArrowBackSmall as default };

package/build/es/components/Icons/Small/hlArrowForwardSmall.d.ts

@@ -1,12 +1,4 @@
-/// <reference types="react" />
-import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlArrowForwardSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
-/**
- * @deprecated Use `hlArrowForwardSmall`
- */
-export declare const hlArrowSmallRight: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
-/**
- * @deprecated Use `hlArrowForwardSmall`
- */
-export declare const hlArrowForward: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlArrowForwardSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlArrowForwardSmall;

package/build/es/components/Icons/Small/hlArrowForwardSmall.js

@@ -1,19 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlArrowForwardSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M10.62 6.42L11 6l-.42-.42-2.4-2.4a.6.6 0 0 0-.8.82l1.37 1.4h-7a.6.6 0 1 0 0 1.2h7L7.38 8a.6.6 0 1 0 .85.85l2.4-2.4z" })));
-};
-/**
- * @deprecated Use `hlArrowForwardSmall`
- */
-const hlArrowSmallRight = hlArrowForwardSmall;
-/**
- * @deprecated Use `hlArrowForwardSmall`
- */
-const hlArrowForward = hlArrowForwardSmall;
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M10.62 6.42L11 6l-.42-.42-2.4-2.4a.6.6 0 0 0-.8.82l1.37 1.4h-7a.6.6 0 1 0 0 1.2h7L7.38 8a.6.6 0 1 0 .85.85l2.4-2.4z" })));
+};
 
-export default hlArrowForwardSmall;
-export { hlArrowForward, hlArrowSmallRight };
+export { hlArrowForwardSmall as default };

package/build/es/components/Icons/Small/hlArrowUnderSmall.d.ts

@@ -1,8 +1,4 @@
-/// <reference types="react" />
-import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlArrowUnderSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
-/**
- * @deprecated Use `hlArrowUnderSmall`
- */
-export declare const hlArrowSmallUnder: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlArrowUnderSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlArrowUnderSmall;

package/build/es/components/Icons/Small/hlArrowUnderSmall.js

@@ -1,15 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlArrowUnderSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 10 7", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M7.75 4.6L6.38 6a.601.601 0 10.85.85l2.4-2.4L10 4l-.42-.42-2.4-2.4a.6.6 0 10-.8.82l1.37 1.4H1.4V2.2a.6.6 0 10-1.2 0v2.4h7.55z" })));
-};
-/**
- * @deprecated Use `hlArrowUnderSmall`
- */
-const hlArrowSmallUnder = hlArrowUnderSmall;
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 10 7", fill: color }, props),
+        React__default.createElement("path", { d: "M7.75 4.6L6.38 6a.601.601 0 10.85.85l2.4-2.4L10 4l-.42-.42-2.4-2.4a.6.6 0 10-.8.82l1.37 1.4H1.4V2.2a.6.6 0 10-1.2 0v2.4h7.55z" })));
+};
 
-export default hlArrowUnderSmall;
-export { hlArrowSmallUnder };
+export { hlArrowUnderSmall as default };

package/build/es/components/Icons/Small/hlCalendarSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlCalendarSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlCalendarSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlCalendarSmall;

package/build/es/components/Icons/Small/hlCalendarSmall.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlCalendarSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 10 10", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M7.4 1.4V.8a.6.6 0 10-1.2 0v.6H3.8V.8a.6.6 0 10-1.2 0v.6H.2v8.4h9.6V1.4H7.4zm1.2 7.2H1.4v-6h1.2v.6a.6.6 0 101.2 0v-.6h2.4v.6a.6.6 0 101.2 0v-.6h1.2v6z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 10 10", fill: color }, props),
+        React__default.createElement("path", { d: "M7.4 1.4V.8a.6.6 0 10-1.2 0v.6H3.8V.8a.6.6 0 10-1.2 0v.6H.2v8.4h9.6V1.4H7.4zm1.2 7.2H1.4v-6h1.2v.6a.6.6 0 101.2 0v-.6h2.4v.6a.6.6 0 101.2 0v-.6h1.2v6z" })));
 };
 
-export default hlCalendarSmall;
+export { hlCalendarSmall as default };

package/build/es/components/Icons/Small/hlChevronDownSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlChevronDownSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlChevronDownSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlChevronDownSmall;

package/build/es/components/Icons/Small/hlChevronDownSmall.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlChevronDownSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M6,9.25 L1.38,4.62 C1.14527898,4.38527898 1.14527898,4.00472102 1.38,3.77 C1.61472102,3.53527898 1.99527898,3.53527898 2.23,3.77 L6,7.55 L9.78,3.78 C9.93183788,3.62816212 10.1531464,3.56886268 10.3605608,3.6244392 C10.5679752,3.68001572 10.7299843,3.84202481 10.7855608,4.0494392 C10.8411373,4.2568536 10.7818379,4.47816212 10.63,4.63 L6,9.25 Z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M6,9.25 L1.38,4.62 C1.14527898,4.38527898 1.14527898,4.00472102 1.38,3.77 C1.61472102,3.53527898 1.99527898,3.53527898 2.23,3.77 L6,7.55 L9.78,3.78 C9.93183788,3.62816212 10.1531464,3.56886268 10.3605608,3.6244392 C10.5679752,3.68001572 10.7299843,3.84202481 10.7855608,4.0494392 C10.8411373,4.2568536 10.7818379,4.47816212 10.63,4.63 L6,9.25 Z" })));
 };
 
-export default hlChevronDownSmall;
+export { hlChevronDownSmall as default };

package/build/es/components/Icons/Small/hlChevronLeftSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlChevronLeftSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlChevronLeftSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlChevronLeftSmall;

package/build/es/components/Icons/Small/hlChevronLeftSmall.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlChevronLeftSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M8.4,1.8 C8.39774577,1.95826156 8.33304856,2.10922172 8.22,2.22 L4.45,6 L8.22,9.78 C8.45472102,10.014721 8.45472102,10.395279 8.22,10.63 C7.98527898,10.864721 7.60472102,10.864721 7.37,10.63 L2.75,6 L7.38,1.38 C7.55266119,1.22515391 7.79910237,1.18368383 8.01293306,1.27349272 C8.22676374,1.36330161 8.3696863,1.56830446 8.38,1.8 L8.4,1.8 Z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M8.4,1.8 C8.39774577,1.95826156 8.33304856,2.10922172 8.22,2.22 L4.45,6 L8.22,9.78 C8.45472102,10.014721 8.45472102,10.395279 8.22,10.63 C7.98527898,10.864721 7.60472102,10.864721 7.37,10.63 L2.75,6 L7.38,1.38 C7.55266119,1.22515391 7.79910237,1.18368383 8.01293306,1.27349272 C8.22676374,1.36330161 8.3696863,1.56830446 8.38,1.8 L8.4,1.8 Z" })));
 };
 
-export default hlChevronLeftSmall;
+export { hlChevronLeftSmall as default };

package/build/es/components/Icons/Small/hlChevronRightSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlChevronRightSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlChevronRightSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlChevronRightSmall;

package/build/es/components/Icons/Small/hlChevronRightSmall.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlChevronRightSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M3.6,10.2 C3.60225423,10.0417384 3.66695144,9.89077828 3.78,9.78 L7.55,6 L3.78,2.22 C3.54527899,1.98527898 3.54527899,1.60472102 3.78000001,1.37000001 C4.01472102,1.13527899 4.39527898,1.13527899 4.63,1.37 L9.25,6 L4.62,10.62 C4.44733881,10.7748461 4.20089763,10.8163162 3.98706694,10.7265073 C3.77323626,10.6366984 3.6303137,10.4316955 3.62,10.2 L3.6,10.2 Z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M3.6,10.2 C3.60225423,10.0417384 3.66695144,9.89077828 3.78,9.78 L7.55,6 L3.78,2.22 C3.54527899,1.98527898 3.54527899,1.60472102 3.78000001,1.37000001 C4.01472102,1.13527899 4.39527898,1.13527899 4.63,1.37 L9.25,6 L4.62,10.62 C4.44733881,10.7748461 4.20089763,10.8163162 3.98706694,10.7265073 C3.77323626,10.6366984 3.6303137,10.4316955 3.62,10.2 L3.6,10.2 Z" })));
 };
 
-export default hlChevronRightSmall;
+export { hlChevronRightSmall as default };

package/build/es/components/Icons/Small/hlChevronUpSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlChevronUpSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlChevronUpSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlChevronUpSmall;

package/build/es/components/Icons/Small/hlChevronUpSmall.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlChevronUpSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M10.2,8.4 C10.0417384,8.39774577 9.89077828,8.33304856 9.78,8.22 L6,4.45 L2.22,8.22 C1.98527898,8.45472102 1.60472102,8.45472102 1.37,8.22 C1.13527898,7.98527898 1.13527898,7.60472102 1.37,7.37 L6,2.75 L10.62,7.37 C10.7748461,7.54266119 10.8163162,7.78910237 10.7265073,8.00293306 C10.6366984,8.21676374 10.4316955,8.3596863 10.2,8.37 L10.2,8.4 Z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M10.2,8.4 C10.0417384,8.39774577 9.89077828,8.33304856 9.78,8.22 L6,4.45 L2.22,8.22 C1.98527898,8.45472102 1.60472102,8.45472102 1.37,8.22 C1.13527898,7.98527898 1.13527898,7.60472102 1.37,7.37 L6,2.75 L10.62,7.37 C10.7748461,7.54266119 10.8163162,7.78910237 10.7265073,8.00293306 C10.6366984,8.21676374 10.4316955,8.3596863 10.2,8.37 L10.2,8.4 Z" })));
 };
 
-export default hlChevronUpSmall;
+export { hlChevronUpSmall as default };

package/build/es/components/Icons/Small/hlClockSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlClockSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlClockSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlClockSmall;

package/build/es/components/Icons/Small/hlClockSmall.js

@@ -1,11 +1,11 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlClockSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M6 1.8a4.2 4.2 0 110 8.4 4.2 4.2 0 010-8.4zM6 .6a5.4 5.4 0 100 10.8A5.4 5.4 0 006 .6z" }),
-        React.createElement("path", { d: "M7.8 7.2H5.4V3.6a.6.6 0 111.2 0V6h1.2a.6.6 0 110 1.2z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default.createElement("path", { d: "M6 1.8a4.2 4.2 0 110 8.4 4.2 4.2 0 010-8.4zM6 .6a5.4 5.4 0 100 10.8A5.4 5.4 0 006 .6z" }),
+        React__default.createElement("path", { d: "M7.8 7.2H5.4V3.6a.6.6 0 111.2 0V6h1.2a.6.6 0 110 1.2z" })));
 };
 
-export default hlClockSmall;
+export { hlClockSmall as default };

package/build/es/components/Icons/Small/hlDownloadSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlDownloadSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlDownloadSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlDownloadSmall;

package/build/es/components/Icons/Small/hlDownloadSmall.js

@@ -1,12 +1,12 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlDownloadSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 8 10", fill: color, width: size, height: size }, props),
-        React.createElement("g", { fillRule: "evenodd" },
-            React.createElement("path", { d: "M7 6.4a.6.6 0 01.592.503L7.6 7v2.6H.4V7a.6.6 0 011.192-.097L1.6 7v1.4h4.8V7a.6.6 0 01.503-.592L7 6.4z", fillRule: "nonzero" }),
-            React.createElement("path", { d: "M4 .4a.6.6 0 01.592.503L4.6 1v3.551l.976-.975a.6.6 0 01.765-.07l.083.07a.6.6 0 01.07.765l-.07.083L4 6.85l-.419-.42a.604.604 0 01-.01-.01L1.575 4.424a.6.6 0 01.765-.918l.083.07.976.95V1A.6.6 0 014 .4z", fillRule: "nonzero" }))));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 8 10", fill: color }, props),
+        React__default.createElement("g", { fillRule: "evenodd" },
+            React__default.createElement("path", { d: "M7 6.4a.6.6 0 01.592.503L7.6 7v2.6H.4V7a.6.6 0 011.192-.097L1.6 7v1.4h4.8V7a.6.6 0 01.503-.592L7 6.4z", fillRule: "nonzero" }),
+            React__default.createElement("path", { d: "M4 .4a.6.6 0 01.592.503L4.6 1v3.551l.976-.975a.6.6 0 01.765-.07l.083.07a.6.6 0 01.07.765l-.07.083L4 6.85l-.419-.42a.604.604 0 01-.01-.01L1.575 4.424a.6.6 0 01.765-.918l.083.07.976.95V1A.6.6 0 014 .4z", fillRule: "nonzero" }))));
 };
 
-export default hlDownloadSmall;
+export { hlDownloadSmall as default };

package/build/es/components/Icons/Small/hlExternalSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlExternalSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlExternalSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlExternalSmall;

package/build/es/components/Icons/Small/hlExternalSmall.js

@@ -1,10 +1,10 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlExternalSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: color, width: size, height: size }, props),
-        React.createElement("path", { d: "M9.25 4a.75.75 0 01.056 1.498L9.25 5.5H5.5v9h9v-3.75a.75.75 0 01.694-.748L15.25 10a.75.75 0 01.748.694l.002.056V16H4V4h5.25zM16 4v3.75a.75.75 0 01-1.498.056L14.5 7.75V6.56l-3.97 3.97a.75.75 0 01-1.104-1.013l.044-.047 3.968-3.97H12.25a.75.75 0 01-.748-.694L11.5 4.75a.75.75 0 01.694-.748L12.25 4H16z" })));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 20 20", fill: color }, props),
+        React__default.createElement("path", { d: "M9.25 4a.75.75 0 01.056 1.498L9.25 5.5H5.5v9h9v-3.75a.75.75 0 01.694-.748L15.25 10a.75.75 0 01.748.694l.002.056V16H4V4h5.25zM16 4v3.75a.75.75 0 01-1.498.056L14.5 7.75V6.56l-3.97 3.97a.75.75 0 01-1.104-1.013l.044-.047 3.968-3.97H12.25a.75.75 0 01-.748-.694L11.5 4.75a.75.75 0 01.694-.748L12.25 4H16z" })));
 };
 
-export default hlExternalSmall;
+export { hlExternalSmall as default };

package/build/es/components/Icons/Small/hlUploadSmall.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IconProps, Props as IconComponentProps } from '../../Icon/Icon';
-declare const hlUploadSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => JSX.Element;
+declare const hlUploadSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
 export default hlUploadSmall;

package/build/es/components/Icons/Small/hlUploadSmall.js

@@ -1,12 +1,12 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 
 const hlUploadSmall = (_a) => {
     var { size, color } = _a, props = __rest(_a, ["size", "color"]);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 8 10", fill: color, width: size, height: size }, props),
-        React.createElement("g", { fillRule: "evenodd" },
-            React.createElement("path", { d: "M7 6.4a.6.6 0 01.592.503L7.6 7v2.6H.4V7a.6.6 0 011.192-.097L1.6 7v1.4h4.8V7a.6.6 0 01.503-.592L7 6.4z", fillRule: "nonzero" }),
-            React.createElement("path", { d: "M4 6.849a.6.6 0 00.592-.503l.008-.097V2.698l.976.975a.6.6 0 00.765.07l.083-.07a.6.6 0 00.07-.766l-.07-.083L4 .4l-.419.419a.604.604 0 00-.01.01L1.575 2.825a.6.6 0 00.765.918l.083-.07.976-.974v3.55a.6.6 0 00.6.6z", fillRule: "nonzero" }))));
+    return (React__default.createElement("svg", Object.assign({ viewBox: "0 0 8 10", fill: color }, props),
+        React__default.createElement("g", { fillRule: "evenodd" },
+            React__default.createElement("path", { d: "M7 6.4a.6.6 0 01.592.503L7.6 7v2.6H.4V7a.6.6 0 011.192-.097L1.6 7v1.4h4.8V7a.6.6 0 01.503-.592L7 6.4z", fillRule: "nonzero" }),
+            React__default.createElement("path", { d: "M4 6.849a.6.6 0 00.592-.503l.008-.097V2.698l.976.975a.6.6 0 00.765.07l.083-.07a.6.6 0 00.07-.766l-.07-.083L4 .4l-.419.419a.604.604 0 00-.01.01L1.575 2.825a.6.6 0 00.765.918l.083-.07.976-.974v3.55a.6.6 0 00.6.6z", fillRule: "nonzero" }))));
 };
 
-export default hlUploadSmall;
+export { hlUploadSmall as default };