@laerdal/life-react-components 3.5.1-uss.hackathon → 4.0.0

package/dist/esm/Banners/styles.js

@@ -1,122 +0,0 @@
-import { css } from 'styled-components';
-import { COLORS } from '../styles';
-export const getButtonStyle = type => {
-  switch (type) {
-    case 'warning':
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.warning_500};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.warning_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.warning_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.warning_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.warning_100};
-          }
-        }
-      `;
-
-    case 'critical':
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.critical_600};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.critical_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.critical_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.critical_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.critical_100};
-          }
-        }
-      `;
-
-    case 'positive':
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.correct_500};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.correct_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.correct_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.correct_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.correct_100};
-          }
-        }
-      `;
-
-    default:
-      return css`
-        div {
-          background-color: transparent;
-        }
-        div svg path,
-        div svg {
-          fill: ${COLORS.primary_500};
-        }
-        &:hover:not(:disabled) {
-          div {
-            background-color: ${COLORS.neutral_20};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.primary_700};
-          }
-        }
-        &:active:not(:disabled) {
-          div {
-            background: ${COLORS.primary_800};
-          }
-          div svg path,
-          div svg {
-            fill: ${COLORS.primary_100};
-          }
-        }
-      `;
-  }
-};
-//# sourceMappingURL=styles.js.map

package/dist/esm/Banners/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["css","COLORS","getButtonStyle","type","warning_500","warning_20","warning_700","warning_800","warning_100","critical_600","critical_20","critical_700","critical_800","critical_100","correct_500","correct_20","correct_700","correct_800","correct_100","primary_500","neutral_20","primary_700","primary_800","primary_100"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,MAAMC,cAAc,GAAIC,IAAD,IAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,aAAOH,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACG,WAAY;AACrC;AACA;AACA;AACA,gCAAgCH,MAAM,CAACI,UAAW;AAClD;AACA;AACA;AACA,oBAAoBJ,MAAM,CAACK,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BL,MAAM,CAACM,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBN,MAAM,CAACO,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOR,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACQ,YAAa;AACtC;AACA;AACA;AACA,gCAAgCR,MAAM,CAACS,WAAY;AACnD;AACA;AACA;AACA,oBAAoBT,MAAM,CAACU,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBX,MAAM,CAACY,YAAa;AACxC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOb,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,gCAAgCb,MAAM,CAACc,UAAW;AAClD;AACA;AACA;AACA,oBAAoBd,MAAM,CAACe,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBhB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF;AACE,aAAOlB,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA,gCAAgClB,MAAM,CAACmB,UAAW;AAClD;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BpB,MAAM,CAACqB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBrB,MAAM,CAACsB,WAAY;AACvC;AACA;AACA,OA1BM;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\n\r\nexport const getButtonStyle = (type: string) => {\r\n  switch (type) {\r\n    case 'warning':\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.warning_500};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.warning_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.warning_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.warning_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.warning_100};\r\n          }\r\n        }\r\n      `;\r\n    case 'critical':\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.critical_600};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.critical_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.critical_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.critical_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.critical_100};\r\n          }\r\n        }\r\n      `;\r\n    case 'positive':\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.correct_500};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.correct_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.correct_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.correct_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.correct_100};\r\n          }\r\n        }\r\n      `;\r\n    default:\r\n      return css`\r\n        div {\r\n          background-color: transparent;\r\n        }\r\n        div svg path,\r\n        div svg {\r\n          fill: ${COLORS.primary_500};\r\n        }\r\n        &:hover:not(:disabled) {\r\n          div {\r\n            background-color: ${COLORS.neutral_20};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.primary_700};\r\n          }\r\n        }\r\n        &:active:not(:disabled) {\r\n          div {\r\n            background: ${COLORS.primary_800};\r\n          }\r\n          div svg path,\r\n          div svg {\r\n            fill: ${COLORS.primary_100};\r\n          }\r\n        }\r\n      `;\r\n  }\r\n};\r\n"],"file":"styles.js"}

package/dist/esm/Breadcrumb/Breadcrumb.js

@@ -1,134 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-import { ComponentTextStyle, Size, SystemIcons } from '..';
-import { useHistory } from 'react-router';
-import { HyperLink, IconButton } from '..';
-import { ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
-import DropdownButton from '../Dropdown/DropdownButton';
-
-const marginRight = size => {
-  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
-};
-
-const BreadcrumbContainer = styled.div`
-  display:flex;
-  align-items: center;
-  min-height: 48px;
-    
-  a {
-    text-decoration: none;
-    ${props => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}
-    ${props => marginRight(props.size)}
-  }
-
-  .chevronicon {
-    ${props => marginRight(props.size)}
-  }
-
-  a:hover {
-    color: ${COLORS.primary_700};
-  }
-  a:active {
-    color: ${COLORS.primary_800};
-  }
-`;
-
-const FontStyles = (size, textStyle, color) => {
-  switch (size) {
-    case Size.XSmall:
-      return ComponentXXSStyling(textStyle, color);
-
-    case Size.Medium:
-      return ComponentMStyling(textStyle, color);
-
-    case Size.Small:
-    default:
-      return ComponentSStyling(textStyle, color);
-  }
-};
-
-const LastBreadcrumbItem = styled.label`
-  ${props => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}
-  ${props => marginRight(props.size)}
-`;
-
-const Breadcrumb = ({
-  items,
-  size = Size.Small,
-  homeIcon = true,
-  homeLabel = 'Home',
-  homeUrl = '/'
-}) => {
-  const history = useHistory();
-  const dropdownItems = items ? items.slice(0, items.length - 2).map(x => ({
-    value: x.url,
-    displayLabel: x.label
-  })) : [];
-
-  const navigate = links => {
-    history.push(links[0]);
-  };
-
-  const chevronSize = size == Size.Medium ? "24px" : size == Size.Small ? "20px" : "16px";
-  return /*#__PURE__*/React.createElement(BreadcrumbContainer, {
-    size: size
-  }, homeIcon ? /*#__PURE__*/React.createElement(IconButton, {
-    variant: "secondary",
-    shape: "circular",
-    action: () => history.push(homeUrl)
-  }, /*#__PURE__*/React.createElement(SystemIcons.Home, {
-    size: chevronSize
-  })) : /*#__PURE__*/React.createElement(HyperLink, {
-    id: "homelink",
-    variant: "default",
-    href: homeUrl
-  }, homeLabel), !!items && items.length > 2 && (items.length > 3 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
-    className: "chevronicon",
-    color: COLORS.neutral_500,
-    size: chevronSize
-  }), /*#__PURE__*/React.createElement(DropdownButton, {
-    alignLeft: true,
-    items: dropdownItems,
-    size: size,
-    icon: /*#__PURE__*/React.createElement(SystemIcons.MoreHorizontal, {
-      color: COLORS.neutral_600,
-      size: "20px"
-    }),
-    onClick: navigate
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
-    className: "chevronicon",
-    color: COLORS.neutral_500,
-    size: chevronSize
-  }), /*#__PURE__*/React.createElement(HyperLink, {
-    id: "link-item-" + (items.length - 3),
-    target: "_self",
-    variant: "default",
-    href: items[items.length - 3].url
-  }, items[items.length - 3].label))), !!items && items.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
-    className: "chevronicon",
-    color: COLORS.neutral_500,
-    size: chevronSize
-  }), /*#__PURE__*/React.createElement(HyperLink, {
-    id: "link-item-" + (items.length - 2),
-    target: "_self",
-    variant: "default",
-    href: items[items.length - 2].url
-  }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
-    className: "chevronicon",
-    color: COLORS.neutral_500,
-    size: chevronSize
-  }), /*#__PURE__*/React.createElement(LastBreadcrumbItem, {
-    size: size
-  }, items[items.length - 1].label)));
-};
-
-Breadcrumb.propTypes = {
-  homeIcon: _pt.bool,
-  homeLabel: _pt.string,
-  homeUrl: _pt.string,
-  items: _pt.array
-};
-export default Breadcrumb;
-//# sourceMappingURL=Breadcrumb.js.map

package/dist/esm/Breadcrumb/Breadcrumb.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","Size","SystemIcons","useHistory","HyperLink","IconButton","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","DropdownButton","marginRight","size","Small","Medium","BreadcrumbContainer","div","props","FontStyles","Regular","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport {COLORS} from '../styles';\r\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\r\nimport {useHistory} from 'react-router';\r\nimport { HyperLink, IconButton } from '..';\r\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\r\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\r\nimport DropdownButton from '../Dropdown/DropdownButton';\r\nimport { DropdownItem } from '../Dropdown/DropdownContent';\r\n\r\ntype BreadcrumbProps = {\r\n  homeIcon?: boolean;\r\n  homeLabel?: string;\r\n  homeUrl?: string;\r\n  items?: BreadcrumbItem[];\r\n  size?: Size;\r\n};\r\n\r\nconst marginRight = (size: Size | undefined) => {\r\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\r\n}\r\n\r\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\r\n  display:flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n    \r\n  a {\r\n    text-decoration: none;\r\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    ${(props) => marginRight(props.size) }\r\n  }\r\n\r\n  .chevronicon {\r\n    ${(props) => marginRight(props.size) }\r\n  }\r\n\r\n  a:hover {\r\n    color: ${COLORS.primary_700};\r\n  }\r\n  a:active {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\r\n  switch (size) {\r\n    case Size.XSmall:\r\n      return ComponentXXSStyling(textStyle, color);\r\n    case Size.Medium:\r\n      return ComponentMStyling(textStyle, color);\r\n    case Size.Small:\r\n    default:\r\n      return ComponentSStyling(textStyle, color);\r\n  }\r\n}\r\n\r\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\r\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\r\n  ${(props) => marginRight(props.size) }\r\n`;\r\n\r\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \r\n    items, \r\n    size = Size.Small, \r\n    homeIcon = true, \r\n    homeLabel = 'Home', \r\n    homeUrl = '/' }) => {\r\n\r\n  const history = useHistory();\r\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\r\n  const navigate = (links: string[]) => {    \r\n    history.push(links[0]);\r\n  };\r\n\r\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\r\n\r\n  return (\r\n    <BreadcrumbContainer size={size}>\r\n\r\n      {homeIcon ? \r\n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\r\n          <SystemIcons.Home size={chevronSize} />\r\n        </IconButton> : \r\n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\r\n          {homeLabel}\r\n        </HyperLink>}\r\n\r\n      { !!items && items.length > 2 &&\r\n          (items.length > 3 ?\r\n          <>\r\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\r\n            <DropdownButton \r\n              alignLeft={true}\r\n              items={dropdownItems} \r\n              size={size}\r\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\r\n              onClick={navigate} />\r\n          </> :\r\n          <>\r\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\r\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\r\n              {items[items.length - 3].label}\r\n            </HyperLink>  \r\n          </>)\r\n      }\r\n\r\n      { !!items && items.length > 1 && \r\n        <>\r\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\r\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\r\n            {items[items.length - 2].label}\r\n          </HyperLink>\r\n        </>\r\n      }\r\n\r\n      { !!items && items.length > 0 && \r\n        <>\r\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\r\n          <LastBreadcrumbItem size={size}>\r\n            {items[items.length - 1].label}\r\n          </LastBreadcrumbItem>\r\n        </>\r\n      }\r\n\r\n    </BreadcrumbContainer>);\r\n};\r\n\r\nexport default Breadcrumb;\r\n"],"file":"Breadcrumb.js"}

package/dist/esm/Breadcrumb/BreadcrumbItem.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=BreadcrumbItem.js.map

package/dist/esm/Breadcrumb/BreadcrumbItem.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"BreadcrumbItem.js"}

package/dist/esm/Breadcrumb/index.js

@@ -1,2 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb';
-//# sourceMappingURL=index.js.map

package/dist/esm/Breadcrumb/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Breadcrumb/index.ts"],"names":["default","Breadcrumb"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as Breadcrumb } from './Breadcrumb';\r\n"],"file":"index.js"}

package/dist/esm/Button/Anchor.js

@@ -1,76 +0,0 @@
-import _pt from "prop-types";
-const _excluded = ["children", "size", "href", "target"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-
-const Anchor = _ref => {
-  let {
-    children,
-    size = 'small',
-    href = '#',
-    target = '_blank'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(AnchorTag, _extends({
-    size: size,
-    href: href,
-    target: target
-  }, props), children);
-};
-
-Anchor.propTypes = {
-  size: _pt.oneOf(['small', 'medium', 'large', 'xsmall', 'xlarge']).isRequired,
-  href: _pt.string
-};
-const AnchorTag = styled.a`
-  color: ${COLORS.primary_500};
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  max-width:max-content; 
-  text-decoration: none;
-  font-size: ${props => props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px'};
-  line-height: ${props => props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px'};
-  font-weight: bold;
-  font-family: inherit;
-  cursor: pointer;
-  outline:none;
-  &:visited,
-  &.vistied-state {
-    color: ${COLORS.accent1_500};
-    background: transparent;
-    text-decoration: none;
-  }
-  &:hover, 
-  &.hover-state {
-    color: ${COLORS.primary_600};
-    text-decoration: underline;
-  }
-  &:focus,
-  &.focus-state {
-    background-color: ${COLORS.white};
-    text-decoration: underline;
-    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-    outline:none;
-    color: ${COLORS.primary_500};
-  }
-  &:active,
-  &.active-state {
-    color: ${COLORS.primary_700};
-    background: transparent;
-    text-decoration: underline;
-    background-color:unset !important;
-    box-shadow: unset !important;
-  } 
-`;
-export default Anchor;
-//# sourceMappingURL=Anchor.js.map

package/dist/esm/Button/Anchor.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/Anchor.tsx"],"names":["React","styled","COLORS","Anchor","children","size","href","target","props","AnchorTag","a","primary_500","accent1_500","primary_600","white","focus_25","focus","primary_700"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,WAArB;;AAOA,MAAMC,MAA4C,GAAG,QAAuE;AAAA,MAAtE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAI,GAAG,OAAnB;AAA4BC,IAAAA,IAAI,GAAC,GAAjC;AAAsCC,IAAAA,MAAM,GAAC;AAA7C,GAAsE;AAAA,MAAXC,KAAW;;AAC1H,sBACI,oBAAC,SAAD;AAAW,IAAA,IAAI,EAAEH,IAAjB;AAAuB,IAAA,IAAI,EAAEC,IAA7B;AAAmC,IAAA,MAAM,EAAEC;AAA3C,KAAuDC,KAAvD,GACKJ,QADL,CADJ;AAKD,CAND;;;AAJIC,EAAAA,I,aAAO,O,EAAU,Q,EAAW,O,EAAU,Q,EAAW,Q;AACjDC,EAAAA,I;;AAWJ,MAAMG,SAAS,GAAGR,MAAM,CAACS,CAAe;AACxC,WAAWR,MAAM,CAACS,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA,eAAeH,KAAK,IAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAAQ;AAC3K,iBAAiBG,KAAK,IAAKA,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,OAAf,GAAyB,MAAzB,GAAkCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmCG,KAAK,CAACH,IAAN,KAAe,QAAf,GAA0B,MAA1B,GAAmC,MAAQ;AAC7K;AACA;AACA;AACA;AACA;AACA;AACA,aAAcH,MAAM,CAACU,WAAa;AAClC;AACA;AACA;AACA;AACA;AACA,aAAaV,MAAM,CAACW,WAAY;AAChC;AACA;AACA;AACA;AACA,wBAAwBX,MAAM,CAACY,KAAM;AACrC;AACA,+BAA+BZ,MAAM,CAACa,QAAS,iBAAgBb,MAAM,CAACc,KAAM;AAC5E;AACA,aAAad,MAAM,CAACS,WAAY;AAChC;AACA;AACA;AACA,aAAcT,MAAM,CAACe,WAAa;AAClC;AACA;AACA;AACA;AACA;AACA,CAxCA;AA0CA,eAAed,MAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../styles';\r\n\r\ninterface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\r\n    size : 'small' | 'medium' | 'large' | 'xsmall' | 'xlarge';\r\n    href?: string;\r\n}\r\n\r\nconst Anchor: React.FunctionComponent<AnchorProps> = ({ children, size = 'small', href='#', target='_blank' , ...props}) => {\r\n  return (\r\n      <AnchorTag size={size} href={href} target={target} {...props}>\r\n          {children}\r\n      </AnchorTag>\r\n  )\r\n}\r\n\r\nconst AnchorTag = styled.a<AnchorProps>`\r\n  color: ${COLORS.primary_500};\r\n  background-color: transparent;\r\n  padding: 0;\r\n  border: none;\r\n  max-width:max-content; \r\n  text-decoration: none;\r\n  font-size: ${props => (props.size === 'large' ? '20px' : props.size === 'small' ? '16px' : props.size === 'xsmall' ? '14px' : props.size === 'xlarge' ? '24px' : '18px')};\r\n  line-height: ${props => (props.size === 'large' ? '32px' : props.size === 'small' ? '24px' : props.size === 'xsmall' ? '20px' : props.size === 'xlarge' ? '36px' : '28px')};\r\n  font-weight: bold;\r\n  font-family: inherit;\r\n  cursor: pointer;\r\n  outline:none;\r\n  &:visited,\r\n  &.vistied-state {\r\n    color: ${ COLORS.accent1_500 };\r\n    background: transparent;\r\n    text-decoration: none;\r\n  }\r\n  &:hover, \r\n  &.hover-state {\r\n    color: ${COLORS.primary_600};\r\n    text-decoration: underline;\r\n  }\r\n  &:focus,\r\n  &.focus-state {\r\n    background-color: ${COLORS.white};\r\n    text-decoration: underline;\r\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n    outline:none;\r\n    color: ${COLORS.primary_500};\r\n  }\r\n  &:active,\r\n  &.active-state {\r\n    color: ${ COLORS.primary_700 };\r\n    background: transparent;\r\n    text-decoration: underline;\r\n    background-color:unset !important;\r\n    box-shadow: unset !important;\r\n  } \r\n`;\r\n\r\nexport default Anchor;"],"file":"Anchor.js"}

package/dist/esm/Button/BackButton.js

@@ -1,100 +0,0 @@
-import _pt from "prop-types";
-const _excluded = ["children", "size"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-import { Size } from '../types';
-import { ArrowLineLeft } from '../icons/systemicons/SystemIcons';
-import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
-const Button = styled.button`
-  box-sizing: border-box;
-  min-height: 48px;
-  padding: 0;
-  margin: 0;
-  outline:none;
-  max-width: max-content;
-  display: flex;
-  align-items: center;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-
-  ${props => props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)};
-  font-feature-settings: 'liga' off;
-
-  & > .button-content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    max-width: max-content;
-    padding: 4px 4px 4px 0;
-    border-radius: 4px;
-    cursor: inherit;
-    min-width: 64px;
-
-  }
-
-  & > .button-content > span {
-    display: flex;
-    cursor: inherit;
-  }
-  & > .button-content > label {
-    display: flex;
-    cursor: inherit;
-    flex-grow: 1;
-    justify-content: center;
-  }
-
-  &:hover > .button-content,
-  &.hover-state > .button-content {
-    background-color: ${COLORS.primary_20};
-    color: ${COLORS.primary_700};
-  }
-  &:focus > .button-content,
-  &.focus-state > .button-content {
-    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;
-  }
-  &:active > .button-content,
-  &.active-state > .button-content {
-    background-color: ${COLORS.primary_100};
-    color: ${COLORS.primary_800};
-    box-shadow: unset;
-  }
-  &:disabled {
-    cursor: not-allowed;
-  }
-  &:disabled > .button-content {
-    color: ${COLORS.neutral_300} !important;
-    background-color: transparent !important;
-  }
-`;
-
-const BackButton = _ref => {
-  let {
-    children,
-    size = Size.Small
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-    size: size
-  }), /*#__PURE__*/React.createElement("div", {
-    className: 'button-content'
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ArrowLineLeft, {
-    size: size === Size.XSmall ? '20' : '24'
-  })), /*#__PURE__*/React.createElement("label", null, children)));
-};
-
-BackButton.propTypes = {
-  disabled: _pt.bool
-};
-export default BackButton;
-//# sourceMappingURL=BackButton.js.map

package/dist/esm/Button/BackButton.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["React","styled","COLORS","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,kBAAhD,QAA0E,sBAA1E;AAEA,MAAMC,MAAM,GAAGP,MAAM,CAACQ,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,IAAN,KAAeR,IAAI,CAACS,MAApB,GAA6BL,kBAAkB,CAACF,kBAAkB,CAACQ,IAApB,EAA0BX,MAAM,CAACY,WAAjC,CAA/C,GAA+FR,iBAAiB,CAACD,kBAAkB,CAACQ,IAApB,EAA0BX,MAAM,CAACY,WAAjC,CAA+C;AAC/K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,MAAM,CAACa,UAAW;AAC1C,aAAab,MAAM,CAACc,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBd,MAAM,CAACe,WAAY;AAC3C,aAAaf,MAAM,CAACgB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA,CA9DA;;AAoEA,MAAMC,UAAoD,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,QAAF;AAAYV,IAAAA,IAAI,GAAGR,IAAI,CAACmB;AAAxB,GAA8C;AAAA,MAAZZ,KAAY;;AAC1G,sBACE,oBAAC,MAAD,eAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC;AAAzB,mBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,+CACE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAEA,IAAI,KAAKR,IAAI,CAACS,MAAd,GAAuB,IAAvB,GAA8B;AAAnD,IADF,CADF,eAIE,mCAAQS,QAAR,CAJF,CADF,CADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;AAeF,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\r\n\r\nconst Button = styled.button<BackButtonProps>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > .button-content {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > .button-content > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > .button-content > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > .button-content,\r\n  &.hover-state > .button-content {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n  &:focus > .button-content,\r\n  &.focus-state > .button-content {\r\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\r\n  }\r\n  &:active > .button-content,\r\n  &.active-state > .button-content {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    box-shadow: unset;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > .button-content {\r\n    color: ${COLORS.neutral_300} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  size: Size.Small | Size.XSmall;\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\r\n  return (\r\n    <Button {...props} size={size}>\r\n      <div className={'button-content'}>\r\n        <span>\r\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </div>\r\n    </Button>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"file":"BackButton.js"}