@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/Breadcrumb/Breadcrumb.js

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

package/dist/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';\n"],"file":"index.js"}

package/dist/Button/BackButton.js

@@ -1,50 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["children", "size"];
-
-var _templateObject;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var Button = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) {
-  return props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600);
-}, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300);
-
-var BackButton = function BackButton(_ref) {
-  var children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Small : _ref$size,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
-    size: size,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: 'button-content',
-      children: [/*#__PURE__*/_jsx("span", {
-        children: /*#__PURE__*/_jsx(ArrowLineLeft, {
-          size: size === Size.XSmall ? '20' : '24'
-        })
-      }), /*#__PURE__*/_jsx("label", {
-        children: children
-      })]
-    })
-  }));
-};
-
-BackButton.propTypes = {
-  disabled: _pt.bool
-};
-export default BackButton;
-//# sourceMappingURL=BackButton.js.map

package/dist/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,IAAMC,MAAM,GAAGP,MAAM,CAACQ,MAAV,23CAaR,UAACC,KAAD;AAAA,SAAYA,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,CAA5H;AAAA,CAbQ,EA0CYZ,MAAM,CAACa,UA1CnB,EA2CCb,MAAM,CAACc,WA3CR,EAmDYd,MAAM,CAACe,WAnDnB,EAoDCf,MAAM,CAACgB,WApDR,EA2DChB,MAAM,CAACiB,WA3DR,CAAZ;;AAoEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAA+C;AAAA,MAA5CC,QAA4C,QAA5CA,QAA4C;AAAA,uBAAlCV,IAAkC;AAAA,MAAlCA,IAAkC,0BAA3BR,IAAI,CAACmB,KAAsB;AAAA,MAAZZ,KAAY;;AAC1G,sBACE,KAAC,MAAD,kCAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC,IAAzB;AAAA,2BACE;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,8BACE;AAAA,+BACE,KAAC,aAAD;AAAe,UAAA,IAAI,EAAEA,IAAI,KAAKR,IAAI,CAACS,MAAd,GAAuB,IAAvB,GAA8B;AAAnD;AADF,QADF,eAIE;AAAA,kBAAQS;AAAR,QAJF;AAAA;AADF,KADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;AAeF,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}

package/dist/Button/Button.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { Size } from '../types';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';
-    flatEdge?: 'right' | 'left' | 'none' | undefined;
-    role?: 'button' | string;
-    title?: string;
-    size?: Size;
-    colorTheme?: 'teal' | 'dark';
-    width?: 'auto' | string;
-    loading?: boolean;
-    testId?: string;
-    icon?: React.ReactNode;
-    minWidth?: string;
-    iconOnly?: boolean;
-}
-declare const Button: React.FunctionComponent<ButtonProps>;
-export default Button;

package/dist/Button/Button.js

@@ -1,315 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
-    _excluded2 = ["loading"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-import * as React from 'react';
-import styled from 'styled-components';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-import { COLORS } from '../styles';
-import { Size } from '../types';
-import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-var getBorderRadius = function getBorderRadius(flatEdge, radius) {
-  switch (flatEdge) {
-    case 'left':
-      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
-
-    case 'right':
-      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
-
-    case 'none':
-    default:
-      return "".concat(radius, "px");
-  }
-};
-
-var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    min-width: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ", ";\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    outline: none;\n\n    div {\n      outline: none;\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
-  return props.size === Size.Large ? '56px' : '48px';
-}, function (props) {
-  return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
-}, function (props) {
-  return getBorderRadius(props.flatEdge, 8);
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px';
-}, function (props) {
-  return props.minWidth;
-}, function (props) {
-  return props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px';
-}, function (props) {
-  return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
-}, function (props) {
-  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.colorTheme === 'dark' ? COLORS.primary : COLORS.white;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_600 : COLORS.white;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white;
-}, COLORS.focus_25, COLORS.focus, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white;
-}, function (props) {
-  return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
-}, function (props) {
-  return props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300;
-}, function (props) {
-  return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
-});
-var Secondary = styled(Primary)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    border-color: ", ";\n  }\n  \n  &:focus,\n  &.focus-state {\n    outline: none;\n    div {\n      outline: none;\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary_800;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_300;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
-}, COLORS.focus_25, COLORS.focus, function (props) {
-  return props.colorTheme === 'dark' ? 'transparent' : COLORS.white;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500;
-});
-var Tertiary = styled(Primary)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ", ";\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n\n  &:focus,\n  &.focus-state {\n    outline: none;\n\n    div {\n      outline: none;\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800;
-}, COLORS.neutral_300, COLORS.focus_25, COLORS.focus, COLORS.white, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500;
-});
-var Correct = styled(Primary)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), COLORS.correct_500, COLORS.correct_500, COLORS.correct_700, COLORS.correct_700, COLORS.correct_700, COLORS.correct_700, COLORS.correct_800, COLORS.correct_800, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100);
-var Critical = styled(Primary)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), COLORS.critical_500, COLORS.critical_500, COLORS.critical_700, COLORS.critical_700, COLORS.critical_700, COLORS.critical_700, COLORS.critical_800, COLORS.critical_800, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100);
-
-var Button = function Button(_ref) {
-  var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? '' : _ref$children,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      _ref$minWidth = _ref.minWidth,
-      minWidth = _ref$minWidth === void 0 ? '64px' : _ref$minWidth,
-      testId = _ref.testId,
-      disabled = _ref.disabled,
-      flatEdge = _ref.flatEdge,
-      icon = _ref.icon,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  // Let's filter out properties that we don't need to render.
-  var loading = props.loading,
-      renderProps = _objectWithoutProperties(props, _excluded2);
-
-  var renderContent = function renderContent() {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [icon && /*#__PURE__*/_jsx("span", {
-        className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
-        children: icon
-      }), children && /*#__PURE__*/_jsx("span", {
-        className: loading ? 'label loading' : 'label',
-        children: children
-      }), loading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
-    });
-  }; // Let's render button
-
-
-  switch (variant) {
-    case 'primary':
-      return /*#__PURE__*/_jsx(Primary, _objectSpread(_objectSpread({}, renderProps), {}, {
-        disabled: disabled,
-        iconOnly: !children,
-        type: type,
-        size: size,
-        flatEdge: flatEdge,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: defaultOnMouseDownHandler,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "button-content",
-          children: renderContent()
-        })
-      }));
-
-    case 'secondary':
-      return /*#__PURE__*/_jsx(Secondary, _objectSpread(_objectSpread({}, renderProps), {}, {
-        disabled: disabled,
-        type: type,
-        size: size,
-        iconOnly: !children,
-        flatEdge: flatEdge,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: defaultOnMouseDownHandler,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "button-content",
-          children: renderContent()
-        })
-      }));
-
-    case 'tertiary':
-      return /*#__PURE__*/_jsx(Tertiary, _objectSpread(_objectSpread({}, renderProps), {}, {
-        disabled: disabled,
-        type: type,
-        flatEdge: flatEdge,
-        size: size,
-        width: width,
-        iconOnly: !children,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: defaultOnMouseDownHandler,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "button-content",
-          children: renderContent()
-        })
-      }));
-
-    case 'correct':
-      return /*#__PURE__*/_jsx(Correct, _objectSpread(_objectSpread({}, renderProps), {}, {
-        disabled: disabled,
-        type: type,
-        size: size,
-        iconOnly: !children,
-        flatEdge: flatEdge,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: defaultOnMouseDownHandler,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "button-content",
-          children: renderContent()
-        })
-      }));
-
-    case 'critical':
-      return /*#__PURE__*/_jsx(Critical, _objectSpread(_objectSpread({}, renderProps), {}, {
-        disabled: disabled,
-        flatEdge: flatEdge,
-        iconOnly: !children,
-        type: type,
-        size: size,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: defaultOnMouseDownHandler,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "button-content",
-          children: renderContent()
-        })
-      }));
-
-    default:
-      return /*#__PURE__*/_jsx(Primary, _objectSpread(_objectSpread({}, renderProps), {}, {
-        flatEdge: flatEdge,
-        disabled: disabled,
-        iconOnly: !children,
-        type: type,
-        size: size,
-        width: width,
-        minWidth: minWidth,
-        "data-testid": testId,
-        className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: defaultOnMouseDownHandler,
-        children: /*#__PURE__*/_jsx("div", {
-          className: "button-content",
-          children: renderContent()
-        })
-      }));
-  }
-};
-
-Button.propTypes = {
-  variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'correct', 'critical']),
-  role: _pt.oneOfType([_pt.oneOf(['button']), _pt.string]),
-  title: _pt.string,
-  colorTheme: _pt.oneOf(['teal', 'dark']),
-  width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
-  loading: _pt.bool,
-  testId: _pt.string,
-  icon: _pt.node,
-  minWidth: _pt.string,
-  iconOnly: _pt.bool
-};
-export default Button;
-//# sourceMappingURL=Button.js.map