@dnanpm/styleguide 3.7.0 → 3.7.2

package/build/cjs/components/Footer/Footer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FooterItemProps } from './types/footerProps';
+export interface FooterProps {
+    items?: FooterItemProps;
+    language: string;
+    zIndex?: number;
+    collapseSize: number;
+}
+/** @visibleName Footer */
+declare const Footer: ({ items, language, zIndex, collapseSize, }: FooterProps) => React.JSX.Element;
+/** @component */
+export default Footer;

package/build/cjs/components/Footer/Footer.js

@@ -44,14 +44,14 @@ const TopContainer = styled["default"].div `
             }
         }
     }
-`;
+`;
 const AppSection = styled["default"].div `
     text-align: center;
 
     img {
         max-width: 100%;
     }
-`;
+`;
 const AppList = styled["default"].div `
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
@@ -60,23 +60,23 @@ const AppList = styled["default"].div `
         display: block;
         width: 142px;
     }
-`;
+`;
 const LangLinksContainer = styled["default"].div `
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1.5)};
-`;
+`;
 const LangLink = styled["default"].a `
     background: ${({ isActive }) => isActive ? theme["default"].color.background.white.default : 'transparent'};
     color: ${({ isActive }) => (isActive ? theme["default"].color.text.plum : theme["default"].color.text.white)};
     &:hover,
     &:active,
     &:focus {
-          color: ${({ isActive }) => isActive
-    ? theme["default"].color.text.plum
+          color: ${({ isActive }) => isActive
+    ? theme["default"].color.text.plum
     : theme["default"].color.text.white + theme["default"].color.transparency.T80};
         }
     }
-`;
+`;
 const BottomContainer = styled["default"].div `
     display: flex;
     flex-direction: column;
@@ -128,7 +128,7 @@ const BottomContainer = styled["default"].div `
             margin: 0;
         }
     }
-`;
+`;
 const BottomCenter = styled["default"].div `
     display: flex;
     flex-direction: column;
@@ -137,7 +137,7 @@ const BottomCenter = styled["default"].div `
     max-width: 520px;
     margin: 0 auto;
     font-size: ${theme["default"].fontSize.s};
-`;
+`;
 const FooterContainer = styled["default"].footer `
     z-index: ${({ zIndex }) => zIndex};
     color: ${theme["default"].color.text.white};
@@ -183,82 +183,82 @@ const FooterContainer = styled["default"].footer `
             color: ${theme["default"].color.text.plum};
         }
     }
-`;
+`;
 const FooterWrapper = styled["default"].div `
     max-width: 1290px;
     margin-left: auto;
     margin-right: auto;
-`;
-let previousValue = false;
-const initialCollapse = {
-    0: false,
-    1: false,
-    2: false,
-};
-const LanguageLinks = ({ languages }) => (React__default["default"].createElement(LangLinksContainer, { "data-testid": "language-selector-section" }, languages.map(language => (React__default["default"].createElement(LangLink, { href: language.url, 
-    // not currently in use
-    // isActive={currentLanguage === language.title.toLowerCase()}
-    key: language.title }, language.title)))));
-/** @visibleName Footer */
-const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, collapseSize = breakpoints["default"].md, }) => {
-    var _a, _b, _c, _d;
-    const { isMobile } = useWindowSize["default"](collapseSize);
-    // Resets menu states when menu content alters between mobile and desktop
-    const footerChanged = previousValue !== isMobile;
-    const appStoreLabel = {
-        fi: 'Lataa sovellus App Storesta',
-        en: 'Download from App Store',
-    };
-    const googlePlayLabel = {
-        fi: 'Lataa sovellus Google Playstä',
-        en: 'Download from Google Play',
-    };
-    const { categories = [], generalInformation, socialMedia = {}, topSection = [], applicationLinks, } = items.footerNavigation;
-    let languages = [];
-    if (items.businessId === 'Corporate') {
-        const languagesObject = items.footerNavigation.languageSelector;
-        if (languagesObject) {
-            languages = FooterComponents.mapCorporateSelector(languagesObject);
-        }
-    }
-    else {
-        languages = items.footerNavigation.customLinks || [];
-    }
-    const [isCollapsed, setIsCollapsed] = React.useState(initialCollapse);
-    const resetFooter = () => {
-        setIsCollapsed(initialCollapse);
-    };
-    if (footerChanged) {
-        resetFooter();
-        previousValue = isMobile;
-    }
-    const footerContextData = React.useMemo(() => ({
-        language,
-        collapseSize,
-        isCollapsed,
-        setIsCollapsed,
-        isMobileFooter: isMobile,
-    }), [collapseSize, isCollapsed, isMobile, language]);
-    return (React__default["default"].createElement(FooterContainer, { zIndex: zIndex, collapseSize: collapseSize },
-        React__default["default"].createElement(FooterContext["default"].Provider, { value: footerContextData },
-            Boolean(topSection.length) && (React__default["default"].createElement(TopContainer, null,
-                React__default["default"].createElement(FooterWrapper, null,
-                    React__default["default"].createElement(FooterComponents.TopSection, { topSection: topSection })))),
-            React__default["default"].createElement(FooterWrapper, null,
-                Boolean(categories.length) && React__default["default"].createElement(FooterComponents.Categories, { categories: categories }),
-                React__default["default"].createElement(BottomContainer, { collapseSize: collapseSize, "data-testid": "bottom-section" },
-                    Boolean(languages.length) && (React__default["default"].createElement(LanguageLinks, { currentLanguage: language, languages: languages })),
-                    React__default["default"].createElement(BottomCenter, null,
-                        socialMedia && React__default["default"].createElement(FooterComponents.SocialMediaLinks, { socialMedia: socialMedia }),
-                        React__default["default"].createElement(BusinessMenu["default"], { items: (_b = (_a = items === null || items === void 0 ? void 0 : items.footerNavigation) === null || _a === void 0 ? void 0 : _a.businessSelector) === null || _b === void 0 ? void 0 : _b.items, currentBusinessId: items.businessId, lang: language }),
-                        generalInformation && (React__default["default"].createElement(FooterComponents.GeneralInformation, { generalInformation: generalInformation }))),
-                    applicationLinks && (React__default["default"].createElement(AppSection, null,
-                        React__default["default"].createElement("p", null, applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.title[language]),
-                        React__default["default"].createElement(AppList, null,
-                            Boolean((_c = applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.appStoreURL[language]) === null || _c === void 0 ? void 0 : _c.length) && (React__default["default"].createElement("a", { "aria-label": appStoreLabel[language], href: applicationLinks.appStoreURL[language], target: "_blank", rel: "noreferrer" },
-                                React__default["default"].createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: "" }))),
-                            Boolean((_d = applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.googlePlayURL[language]) === null || _d === void 0 ? void 0 : _d.length) && (React__default["default"].createElement("a", { "aria-label": googlePlayLabel[language], href: applicationLinks.googlePlayURL[language], target: "_blank", rel: "noreferrer" },
-                                React__default["default"].createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: "" })))))))))));
+`;
+let previousValue = false;
+const initialCollapse = {
+    0: false,
+    1: false,
+    2: false,
+};
+const LanguageLinks = ({ languages }) => (React__default["default"].createElement(LangLinksContainer, { "data-testid": "language-selector-section" }, languages.map(language => (React__default["default"].createElement(LangLink, { href: language.url, 
+    // not currently in use
+    // isActive={currentLanguage === language.title.toLowerCase()}
+    key: language.title }, language.title)))));
+/** @visibleName Footer */
+const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, collapseSize = breakpoints["default"].md, }) => {
+    var _a, _b, _c, _d;
+    const { isMobile } = useWindowSize["default"](collapseSize);
+    // Resets menu states when menu content alters between mobile and desktop
+    const footerChanged = previousValue !== isMobile;
+    const appStoreLabel = {
+        fi: 'Lataa sovellus App Storesta',
+        en: 'Download from App Store',
+    };
+    const googlePlayLabel = {
+        fi: 'Lataa sovellus Google Playstä',
+        en: 'Download from Google Play',
+    };
+    const { categories = [], generalInformation, socialMedia = {}, topSection = [], applicationLinks, } = items.footerNavigation;
+    let languages = [];
+    if (items.businessId === 'Corporate') {
+        const languagesObject = items.footerNavigation.languageSelector;
+        if (languagesObject) {
+            languages = FooterComponents.mapCorporateSelector(languagesObject);
+        }
+    }
+    else {
+        languages = items.footerNavigation.customLinks || [];
+    }
+    const [isCollapsed, setIsCollapsed] = React.useState(initialCollapse);
+    const resetFooter = () => {
+        setIsCollapsed(initialCollapse);
+    };
+    if (footerChanged) {
+        resetFooter();
+        previousValue = isMobile;
+    }
+    const footerContextData = React.useMemo(() => ({
+        language,
+        collapseSize,
+        isCollapsed,
+        setIsCollapsed,
+        isMobileFooter: isMobile,
+    }), [collapseSize, isCollapsed, isMobile, language]);
+    return (React__default["default"].createElement(FooterContainer, { zIndex: zIndex, collapseSize: collapseSize },
+        React__default["default"].createElement(FooterContext["default"].Provider, { value: footerContextData },
+            Boolean(topSection.length) && (React__default["default"].createElement(TopContainer, null,
+                React__default["default"].createElement(FooterWrapper, null,
+                    React__default["default"].createElement(FooterComponents.TopSection, { topSection: topSection })))),
+            React__default["default"].createElement(FooterWrapper, null,
+                Boolean(categories.length) && React__default["default"].createElement(FooterComponents.Categories, { categories: categories }),
+                React__default["default"].createElement(BottomContainer, { collapseSize: collapseSize, "data-testid": "bottom-section" },
+                    Boolean(languages.length) && (React__default["default"].createElement(LanguageLinks, { currentLanguage: language, languages: languages })),
+                    React__default["default"].createElement(BottomCenter, null,
+                        socialMedia && React__default["default"].createElement(FooterComponents.SocialMediaLinks, { socialMedia: socialMedia }),
+                        React__default["default"].createElement(BusinessMenu["default"], { items: (_b = (_a = items === null || items === void 0 ? void 0 : items.footerNavigation) === null || _a === void 0 ? void 0 : _a.businessSelector) === null || _b === void 0 ? void 0 : _b.items, currentBusinessId: items.businessId, lang: language }),
+                        generalInformation && (React__default["default"].createElement(FooterComponents.GeneralInformation, { generalInformation: generalInformation }))),
+                    applicationLinks && (React__default["default"].createElement(AppSection, null,
+                        React__default["default"].createElement("p", null, applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.title[language]),
+                        React__default["default"].createElement(AppList, null,
+                            Boolean((_c = applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.appStoreURL[language]) === null || _c === void 0 ? void 0 : _c.length) && (React__default["default"].createElement("a", { "aria-label": appStoreLabel[language], href: applicationLinks.appStoreURL[language], target: "_blank", rel: "noreferrer" },
+                                React__default["default"].createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: "" }))),
+                            Boolean((_d = applicationLinks === null || applicationLinks === void 0 ? void 0 : applicationLinks.googlePlayURL[language]) === null || _d === void 0 ? void 0 : _d.length) && (React__default["default"].createElement("a", { "aria-label": googlePlayLabel[language], href: applicationLinks.googlePlayURL[language], target: "_blank", rel: "noreferrer" },
+                                React__default["default"].createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: "" })))))))))));
 };
 
 exports["default"] = Footer;

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

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

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

@@ -5,15 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
 
-const FooterContext = React.createContext({
-    language: 'fi',
-    collapseSize: breakpoints["default"].md,
-    isCollapsed: {
-        0: false,
-        1: false,
-        2: false,
-    },
-    setIsCollapsed: () => null,
+const FooterContext = React.createContext({
+    language: 'fi',
+    collapseSize: breakpoints["default"].md,
+    isCollapsed: {
+        0: false,
+        1: false,
+        2: false,
+    },
+    setIsCollapsed: () => null,
 });
 
 exports["default"] = FooterContext;

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

@@ -0,0 +1,58 @@
+import type { Icon as IconType } from '@dnanpm/icons';
+import type { ComponentType, MouseEvent } from 'react';
+import React from 'react';
+type Position = 'left' | 'right' | 'middle';
+export interface IconProps {
+    /**
+     * Icon width and height passed to SVG element.
+     * Icons can be scaled up by steps of 0.5rem (2.0rem, 2.5rem, 3.0rem)
+     *
+     * @default '1.5rem'
+     */
+    size: IconType['size'];
+    /**
+     * Icon fill color passed to SVG element
+     *
+     * @default 'currentColor'
+     */
+    color: IconType['color'];
+}
+export interface Props extends Partial<IconProps> {
+    /**
+     * Icon to render
+     *
+     * @type Icon
+     */
+    icon?: ComponentType<IconType>;
+    /**
+     * Icon name
+     *
+     * @deprecated Use property `icon`
+     */
+    name?: string;
+    /**
+     * On Icon click callback
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * Allows to set position of Icon component relative to other content and adds appropriate margins
+     *
+     * @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 undefined
+     */
+    position?: Position;
+    /**
+     * Allows to pass a custom className
+     */
+    className?: string;
+    /**
+     * Allows to pass testid string for testing purposes
+     */
+    'data-testid'?: string;
+}
+declare const Icon: ({ name, icon: IconParam, color, size, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
+/** @component */
+export default Icon;

package/build/cjs/components/Icon/Icon.js

@@ -13,18 +13,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const IconsList = index;
+const IconsList = index;
 const IconContainer = styled["default"].span `
     display: inline-flex;
     width: ${({ size }) => size};
     height: ${({ size }) => size};
 
-    ${({ position }) => (position === 'right' || position === 'middle') &&
+    ${({ position }) => (position === 'right' || position === 'middle') &&
     `
             margin-left: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
         `}
 
-    ${({ position }) => (position === 'left' || position === 'middle') &&
+    ${({ position }) => (position === 'left' || position === 'middle') &&
     `
             margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseWidth, 1)};
         `}
@@ -33,16 +33,16 @@ const IconContainer = styled["default"].span `
         width: ${({ size }) => size};
         height: ${({ size }) => size};
     }
-`;
-const Icon = (_a) => {
-    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = tslib.__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];
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        RenderIcon && (React__default["default"].createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
-            React__default["default"].createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
-        IconParam && (React__default["default"].createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId },
-            React__default["default"].createElement(IconParam, { size: size, color: color })))));
+`;
+const Icon = (_a) => {
+    var { name, icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId } = _a, props = tslib.__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];
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        RenderIcon && (React__default["default"].createElement(IconContainer, { position: props.position, size: size, className: "dnasg-icon", "data-testid": dataTestId },
+            React__default["default"].createElement(RenderIcon, Object.assign({}, props, { size: size, color: color })))),
+        IconParam && (React__default["default"].createElement(IconContainer, { onClick: props.onClick, position: props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId },
+            React__default["default"].createElement(IconParam, { size: size, color: color })))));
 };
 
 exports["default"] = Icon;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlArrowBackSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlArrowBackSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlArrowBackSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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" })));
+const hlArrowBackSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlArrowBackSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlArrowForwardSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlArrowForwardSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlArrowForwardSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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" })));
+const hlArrowForwardSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlArrowForwardSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlArrowUnderSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlArrowUnderSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlArrowUnderSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 10 7", fill: color }, props),
-        React__default["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" })));
+const hlArrowUnderSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 10 7", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlArrowUnderSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlCalendarSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlCalendarSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlCalendarSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 10 10", fill: color }, props),
-        React__default["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" })));
+const hlCalendarSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 10 10", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlCalendarSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlChevronDownSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlChevronDownSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlChevronDownSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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" })));
+const hlChevronDownSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlChevronDownSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlChevronLeftSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlChevronLeftSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlChevronLeftSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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" })));
+const hlChevronLeftSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlChevronLeftSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlChevronRightSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlChevronRightSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlChevronRightSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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" })));
+const hlChevronRightSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlChevronRightSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlChevronUpSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlChevronUpSmall;

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

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlChevronUpSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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" })));
+const hlChevronUpSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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" })));
 };
 
 exports["default"] = hlChevronUpSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlClockSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlClockSmall;

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

@@ -9,11 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const hlClockSmall = (_a) => {
-    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
-    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
-        React__default["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["default"].createElement("path", { d: "M7.8 7.2H5.4V3.6a.6.6 0 111.2 0V6h1.2a.6.6 0 110 1.2z" })));
+const hlClockSmall = (_a) => {
+    var { size, color } = _a, props = tslib.__rest(_a, ["size", "color"]);
+    return (React__default["default"].createElement("svg", Object.assign({ viewBox: "0 0 12 12", fill: color }, props),
+        React__default["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["default"].createElement("path", { d: "M7.8 7.2H5.4V3.6a.6.6 0 111.2 0V6h1.2a.6.6 0 110 1.2z" })));
 };
 
 exports["default"] = hlClockSmall;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { Props as IconComponentProps, IconProps } from '../../Icon/Icon';
+declare const hlDownloadSmall: ({ size, color, ...props }: IconProps | IconComponentProps) => React.JSX.Element;
+/**
+ * @deprecated Use Streamline icon
+ */
+export default hlDownloadSmall;