@dnanpm/styleguide 4.0.8 → 4.0.10

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

@@ -14,89 +14,60 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const TopContainer = styledComponents.styled.div `
-    background-color: ${theme.default.color.background.plum.E01};
-`;
-const FooterContainer = styledComponents.styled.footer `
-    z-index: ${({ $zIndex }) => $zIndex};
-    color: ${theme.default.color.text.white};
-    background: ${theme.default.color.default.plum};
-    margin: 0;
-    /* for always placing footer on bottom of the page */
-    margin-top: auto;
-    padding: 0;
-    a {
-        &:focus-visible {
-            text-decoration: none;
-            outline: 1px solid transparent;
-            box-shadow:
-                0px 0px 0px 2px ${theme.default.color.focus.light},
-                0px 0px 0px 4px ${theme.default.color.focus.dark};
-            &:not(.menu-link):not(${FooterComponents.LangLink}) {
-                ${theme.default.radius.s};
-            }
-        }
-    }
-    // Custom styles for BusinessMenu component
-    nav {
-        padding: 0;
-        a {
-            &:not(.active-site) {
-                background: transparent;
-            }
-            &:not(.active-site):hover,
-            &:not(.active-site):focus,
-            &:not(.active-site):active {
-                background-color: ${theme.default.color.background.plum.E02};
-            }
-        }
-    }
-
-    ul {
-        list-style-type: none;
-        list-style-position: outside;
-        margin: 0;
-        padding: 0;
-    }
-
-    a {
-        text-decoration: none;
-        &:not(${FooterComponents.LangLink}):not(.active-site) {
-            color: ${theme.default.color.text.white};
-            &:not(.menu-link):not(${TopContainer} a):hover,
-            &:not(.menu-link):not(${TopContainer} a):focus,
-            &:not(.menu-link):not(${TopContainer} a):active {
-                color: ${theme.default.color.text.white + theme.default.color.transparency.T80};
-            }
-        }
-    }
-`;
+const TopContainer = styledComponents.styled.div.withConfig({
+  displayName: "Footer__TopContainer",
+  componentId: "sc-3chism-0"
+})(["background-color:", ";"], theme.default.color.background.plum.E01);
+const FooterContainer = styledComponents.styled.footer.withConfig({
+  displayName: "Footer__FooterContainer",
+  componentId: "sc-3chism-1"
+})(["z-index:", ";color:", ";background:", ";margin:0;margin-top:auto;padding:0;a{&:focus-visible{text-decoration:none;outline:1px solid transparent;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";&:not(.menu-link):not(", "){", ";}}}nav{padding:0;a{&:not(.active-site){background:transparent;}&:not(.active-site):hover,&:not(.active-site):focus,&:not(.active-site):active{background-color:", ";}}}ul{list-style-type:none;list-style-position:outside;margin:0;padding:0;}a{text-decoration:none;&:not(", "):not(.active-site){color:", ";&:not(.menu-link):not(", " a):hover,&:not(.menu-link):not(", " a):focus,&:not(.menu-link):not(", " a):active{color:", ";}}}"], ({
+  $zIndex
+}) => $zIndex, theme.default.color.text.white, theme.default.color.default.plum, theme.default.color.focus.light, theme.default.color.focus.dark, FooterComponents.LangLink, theme.default.radius.s, theme.default.color.background.plum.E02, FooterComponents.LangLink, theme.default.color.text.white, TopContainer, TopContainer, TopContainer, theme.default.color.text.white + theme.default.color.transparency.T80);
 const initialCollapse = {
-    0: false,
-    1: false,
-    2: false,
+  0: false,
+  1: false,
+  2: false
 };
 /** @visibleName Footer */
-const Footer = ({ items = { businessId: 'NONE', footerNavigation: {} }, language = 'fi', zIndex = 1, collapseSize = breakpoints.default.md, }) => {
-    const { isMobile } = useWindowSize.default(collapseSize);
-    const { categories = [], topSection = [] } = items.footerNavigation;
-    const [isCollapsed, setIsCollapsed] = React.useState(initialCollapse);
-    React.useEffect(() => {
-        setIsCollapsed(initialCollapse);
-    }, [isMobile]);
-    const footerContextData = React.useMemo(() => ({
-        language,
-        collapseSize,
-        isCollapsed,
-        setIsCollapsed,
-        isMobileFooter: isMobile,
-    }), [collapseSize, isCollapsed, isMobile, language]);
-    return (React__default.default.createElement(FooterContainer, { "$zIndex": zIndex },
-        React__default.default.createElement(FooterContext.default.Provider, { value: footerContextData },
-            Boolean(topSection.length) && (React__default.default.createElement(TopContainer, null,
-                React__default.default.createElement(FooterComponents.TopSection, { topSection: topSection }))),
-            Boolean(categories.length) && React__default.default.createElement(FooterComponents.Categories, { categories: categories }),
-            React__default.default.createElement(FooterComponents.BottomSection, { items: items }))));
+const Footer = ({
+  items = {
+    businessId: 'NONE',
+    footerNavigation: {}
+  },
+  language = 'fi',
+  zIndex = 1,
+  collapseSize = breakpoints.default.md
+}) => {
+  const {
+    isMobile
+  } = useWindowSize.default(collapseSize);
+  const {
+    categories = [],
+    topSection = []
+  } = items.footerNavigation;
+  const [isCollapsed, setIsCollapsed] = React.useState(initialCollapse);
+  React.useEffect(() => {
+    setIsCollapsed(initialCollapse);
+  }, [isMobile]);
+  const footerContextData = React.useMemo(() => ({
+    language,
+    collapseSize,
+    isCollapsed,
+    setIsCollapsed,
+    isMobileFooter: isMobile
+  }), [collapseSize, isCollapsed, isMobile, language]);
+  return /*#__PURE__*/React__default.default.createElement(FooterContainer, {
+    "$zIndex": zIndex
+  }, /*#__PURE__*/React__default.default.createElement(FooterContext.default.Provider, {
+    value: footerContextData
+  }, Boolean(topSection.length) && (/*#__PURE__*/React__default.default.createElement(TopContainer, null, /*#__PURE__*/React__default.default.createElement(FooterComponents.TopSection, {
+    topSection: topSection
+  }))), Boolean(categories.length) && /*#__PURE__*/React__default.default.createElement(FooterComponents.Categories, {
+    categories: categories
+  }), /*#__PURE__*/React__default.default.createElement(FooterComponents.BottomSection, {
+    items: items
+  })));
 };
 
 exports.default = Footer;

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 = /*#__PURE__*/React.createContext({
+  language: 'fi',
+  collapseSize: breakpoints.default.md,
+  isCollapsed: {
+    0: false,
+    1: false,
+    2: false
+  },
+  setIsCollapsed: () => null
 });
 
 exports.default = FooterContext;

package/build/cjs/components/Hero/Hero.js

@@ -14,192 +14,144 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const HERO_CONSTANTS = {
-    mobileHeight: 220,
-    desktopMinHeight: 460,
-    logoMaxWidth: 500,
-    contentMaxWidth: 650,
+  mobileHeight: 220,
+  desktopMinHeight: 460,
+  logoMaxWidth: 500,
+  contentMaxWidth: 650
 };
-const HeroContainer = styledComponents.styled.div `
-    position: relative;
-    margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-
-    ${({ $variant }) => styledUtils.media.md `
+const HeroContainer = styledComponents.styled.div.withConfig({
+  displayName: "Hero__HeroContainer",
+  componentId: "sc-rs59vd-0"
+})(["position:relative;margin-bottom:", ";", ""], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25), ({
+  $variant
+}) => styledUtils.media.md`
         min-height: calc(
             ${HERO_CONSTANTS.desktopMinHeight}px + ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
         );
         display: flex;
         justify-content: ${$variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
-    `}
-`;
-const HeroImage = styledComponents.styled.div `
-    position: relative;
-    height: ${HERO_CONSTANTS.mobileHeight}px;
-    background-color: ${({ $backgroundColor }) => $backgroundColor || 'transparent'};
-
-    ${({ $backgroundColor }) => $backgroundColor &&
-    `
+    `);
+const HeroImage = styledComponents.styled.div.withConfig({
+  displayName: "Hero__HeroImage",
+  componentId: "sc-rs59vd-1"
+})(["position:relative;height:", "px;background-color:", ";", " ", " img{width:100%;height:100%;object-fit:cover;display:block;}"], HERO_CONSTANTS.mobileHeight, ({
+  $backgroundColor
+}) => $backgroundColor || 'transparent', ({
+  $backgroundColor
+}) => $backgroundColor && `
         background-image: linear-gradient(180deg, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0} 0%, ${theme.default.color.background.plum.default}${theme.default.color.transparency.T30} 100%);
         background-size: 100% 33.33%;
         background-repeat: no-repeat;
         background-position: bottom;
-    `}
-
-    ${styledUtils.media.md `
+    `, styledUtils.media.md`
         height: auto;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
-    `}
-
-    img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
-    }
-`;
-const LogoImageWrap = styledComponents.styled.div `
-    position: relative;
-    height: 100%;
-    width: 100%;
-    margin: 0 auto;
-    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-`;
-const LogoImageContainer = styledComponents.styled.div `
-    position: absolute;
-    top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
-    bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
-    left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-    right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    max-width: ${HERO_CONSTANTS.logoMaxWidth}px;
-    margin: 0 auto;
-
-    img {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
-    }
-
-    ${styledUtils.media.md `
+    `);
+const LogoImageWrap = styledComponents.styled.div.withConfig({
+  displayName: "Hero__LogoImageWrap",
+  componentId: "sc-rs59vd-2"
+})(["position:relative;height:100%;width:100%;margin:0 auto;padding:0 ", ";"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25));
+const LogoImageContainer = styledComponents.styled.div.withConfig({
+  displayName: "Hero__LogoImageContainer",
+  componentId: "sc-rs59vd-3"
+})(["position:absolute;top:", ";bottom:", ";left:", ";right:", ";padding:", ";display:flex;align-items:center;justify-content:center;max-width:", "px;margin:0 auto;img{max-width:100%;max-height:100%;object-fit:contain;}", " ", ""], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25), HERO_CONSTANTS.logoMaxWidth, styledUtils.media.md`
         top: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
         bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
         right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
         left: 50%;
-    `}
-
-    ${styledUtils.media.lg `
+    `, styledUtils.media.lg`
         left: calc(min(64%, ${HERO_CONSTANTS.contentMaxWidth + 100}px));
-    `}
-`;
-const ContentWrap = styledComponents.styled.div `
-    width: 100%;
-    max-width: ${theme.default.layout.content.containerMaxWidth.wide}px;
-    padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-    margin: -${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)} auto 0;
-    z-index: 1;
-
-    ${({ $variant }) => styledUtils.media.md `
+    `);
+const ContentWrap = styledComponents.styled.div.withConfig({
+  displayName: "Hero__ContentWrap",
+  componentId: "sc-rs59vd-4"
+})(["width:100%;max-width:", "px;padding:0 ", ";margin:-", " auto 0;z-index:1;", ""], theme.default.layout.content.containerMaxWidth.wide, styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4), ({
+  $variant
+}) => styledUtils.media.md`
         display: flex;
         align-items: flex-end;
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)}
             ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0;
         margin: 0 auto;
         justify-content: ${$variant === 'centered' || $variant === 'centered-text-left' ? 'center' : 'flex-start'};
-    `}
-`;
+    `);
 const Content = styledComponents.styled(Box.default).attrs({
-    elevation: 'extraHigh',
-    padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2),
-}) `
-    position: relative;
-    text-align: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'left')};
-
-    ${styledUtils.media.md `
+  elevation: 'extraHigh',
+  padding: styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)
+}).withConfig({
+  displayName: "Hero__Content",
+  componentId: "sc-rs59vd-5"
+})(["position:relative;text-align:", ";", " ", ""], ({
+  $variant
+}) => $variant === 'centered' ? 'center' : 'left', styledUtils.media.md`
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)};
         width: 50%;
         max-width: ${HERO_CONSTANTS.contentMaxWidth}px;
-    `}
-
-    ${({ $variant }) => styledUtils.media.lg `
+    `, ({
+  $variant
+}) => styledUtils.media.lg`
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)};
         width: 60%;
-        margin-left: ${$variant === 'centered' || $variant === 'centered-text-left'
-    ? '0'
-    : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)}`};
-    `}
-`;
-const LabelContainer = styledComponents.styled.div `
-    margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
-`;
-const TextContent = styledComponents.styled.div `
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25)};
-        color: ${theme.default.color.text.black};
-        font-family: ${theme.default.fontFamily.default};
-    }
-
-    p {
-        margin: 0 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-        color: ${theme.default.color.text.black};
-        font-family: ${theme.default.fontFamily.default};
-        line-height: ${theme.default.lineHeight.default};
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-`;
-const CtaArea = styledComponents.styled.div `
-    margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3)} 0 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
-    justify-content: ${({ $variant }) => ($variant === 'centered' ? 'center' : 'flex-start')};
-
-    ${styledUtils.media.md `
+        margin-left: ${$variant === 'centered' || $variant === 'centered-text-left' ? '0' : `${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)}`};
+    `);
+const LabelContainer = styledComponents.styled.div.withConfig({
+  displayName: "Hero__LabelContainer",
+  componentId: "sc-rs59vd-6"
+})(["margin:0 0 ", ";"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1));
+const TextContent = styledComponents.styled.div.withConfig({
+  displayName: "Hero__TextContent",
+  componentId: "sc-rs59vd-7"
+})(["h1,h2,h3,h4,h5,h6{margin:0 0 ", ";color:", ";font-family:", ";}p{margin:0 0 ", ";color:", ";font-family:", ";line-height:", ";&:last-child{margin-bottom:0;}}"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.25), theme.default.color.text.black, theme.default.fontFamily.default, styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1), theme.default.color.text.black, theme.default.fontFamily.default, theme.default.lineHeight.default);
+const CtaArea = styledComponents.styled.div.withConfig({
+  displayName: "Hero__CtaArea",
+  componentId: "sc-rs59vd-8"
+})(["margin:", " 0 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:", ";justify-content:", ";", ""], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 3), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5), ({
+  $variant
+}) => $variant === 'centered' ? 'center' : 'flex-start', styledUtils.media.md`
         margin: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 4)} 0 0;
-    `}
-`;
+    `);
 const renderImage = (ImageComponent, imageProps) => {
-    if (!imageProps)
-        return null;
-    if (typeof ImageComponent === 'string') {
-        const { alt } = imageProps, rest = tslib.__rest(imageProps, ["alt"]);
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        return React__default.default.createElement("img", Object.assign({ alt: alt }, rest));
-    }
+  if (!imageProps) return null;
+  if (typeof ImageComponent === 'string') {
+    const {
+        alt
+      } = imageProps,
+      rest = tslib.__rest(imageProps, ["alt"]);
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return React__default.default.createElement(ImageComponent, Object.assign({}, imageProps));
+    return /*#__PURE__*/React__default.default.createElement("img", Object.assign({
+      alt: alt
+    }, rest));
+  }
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return /*#__PURE__*/React__default.default.createElement(ImageComponent, Object.assign({}, imageProps));
 };
-const Hero = (_a) => {
-    var { variant = 'default', headingLevel = 'h1', Image = 'img', LogoImage = 'img', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
-    const HeadingTag = headingLevel;
-    return (React__default.default.createElement(HeroContainer, { "$variant": variant, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(HeroImage, { "$backgroundColor": props.backgroundColor },
-            props.logoImageProps && (React__default.default.createElement(LogoImageWrap, null,
-                React__default.default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))),
-            !props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)),
-        React__default.default.createElement(ContentWrap, { "$variant": variant },
-            React__default.default.createElement(Content, { "$variant": variant },
-                props.label && React__default.default.createElement(LabelContainer, null, props.label),
-                React__default.default.createElement(TextContent, null,
-                    props.heading && React__default.default.createElement(HeadingTag, null, props.heading),
-                    props.description),
-                (props.primaryCta || props.secondaryCta) && (React__default.default.createElement(CtaArea, { "$variant": variant },
-                    props.primaryCta,
-                    props.secondaryCta))))));
+const Hero = _a => {
+  var {
+      variant = 'default',
+      headingLevel = 'h1',
+      Image = 'img',
+      LogoImage = 'img',
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ["variant", "headingLevel", "Image", "LogoImage", 'data-testid']);
+  const HeadingTag = headingLevel;
+  return /*#__PURE__*/React__default.default.createElement(HeroContainer, {
+    "$variant": variant,
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.default.createElement(HeroImage, {
+    "$backgroundColor": props.backgroundColor
+  }, props.logoImageProps && (/*#__PURE__*/React__default.default.createElement(LogoImageWrap, null, /*#__PURE__*/React__default.default.createElement(LogoImageContainer, null, renderImage(LogoImage, props.logoImageProps)))), !props.logoImageProps && props.imageProps && renderImage(Image, props.imageProps)), /*#__PURE__*/React__default.default.createElement(ContentWrap, {
+    "$variant": variant
+  }, /*#__PURE__*/React__default.default.createElement(Content, {
+    "$variant": variant
+  }, props.label && /*#__PURE__*/React__default.default.createElement(LabelContainer, null, props.label), /*#__PURE__*/React__default.default.createElement(TextContent, null, props.heading && /*#__PURE__*/React__default.default.createElement(HeadingTag, null, props.heading), props.description), (props.primaryCta || props.secondaryCta) && (/*#__PURE__*/React__default.default.createElement(CtaArea, {
+    "$variant": variant
+  }, props.primaryCta, props.secondaryCta)))));
 };
 
 exports.default = Hero;

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

@@ -12,30 +12,49 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const IconContainer = styledComponents.styled.span `
-    display: inline-flex;
-    width: ${({ size }) => size};
-    height: ${({ size }) => size};
-
-    ${({ $position }) => ($position === 'right' || $position === 'middle') &&
-    `
+const IconContainer = styledComponents.styled.span.withConfig({
+  displayName: "Icon__IconContainer",
+  componentId: "sc-1uy9ook-0"
+})(["display:inline-flex;width:", ";height:", ";", " ", " svg{width:", ";height:", ";}"], ({
+  size
+}) => size, ({
+  size
+}) => size, ({
+  $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)};
-        `}
-    
-    svg {
-        width: ${({ size }) => size};
-        height: ${({ size }) => size};
-    }
-`;
-const Icon = (_a) => {
-    var { icon: IconParam, color = 'currentColor', size = '1.5rem', 'data-testid': dataTestId, 'aria-label': ariaLabel, 'aria-hidden': ariaHidden } = _a, props = tslib.__rest(_a, ["icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
-    return (React__default.default.createElement(IconContainer, { onClick: props.onClick, "$position": props.position, size: size, className: `dnasg-icon ${props.className || ''}`.trim(), "data-testid": dataTestId, "aria-label": ariaLabel, "aria-hidden": ariaHidden, role: !ariaHidden ? 'img' : undefined },
-        React__default.default.createElement(IconParam, { size: size, color: color })));
+        `, ({
+  size
+}) => size, ({
+  size
+}) => size);
+const Icon = _a => {
+  var {
+      icon: IconParam,
+      color = 'currentColor',
+      size = '1.5rem',
+      'data-testid': dataTestId,
+      'aria-label': ariaLabel,
+      'aria-hidden': ariaHidden
+    } = _a,
+    props = tslib.__rest(_a, ["icon", "color", "size", 'data-testid', 'aria-label', 'aria-hidden']);
+  return /*#__PURE__*/React__default.default.createElement(IconContainer, {
+    onClick: props.onClick,
+    "$position": props.position,
+    size: size,
+    className: `dnasg-icon ${props.className || ''}`.trim(),
+    "data-testid": dataTestId,
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
+    role: !ariaHidden ? 'img' : undefined
+  }, /*#__PURE__*/React__default.default.createElement(IconParam, {
+    size: size,
+    color: color
+  }));
 };
 
 exports.default = Icon;

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

@@ -9,10 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(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 /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    viewBox: "0 0 12 12",
+    fill: color
+  }, props), /*#__PURE__*/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.js

@@ -9,10 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(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 /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    viewBox: "0 0 12 12",
+    fill: color
+  }, props), /*#__PURE__*/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.js

@@ -9,10 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(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 /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    viewBox: "0 0 10 7",
+    fill: color
+  }, props), /*#__PURE__*/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.js

@@ -9,10 +9,18 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(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 /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    viewBox: "0 0 10 10",
+    fill: color
+  }, props), /*#__PURE__*/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;