@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/Button/Iconbutton.js

@@ -3,39 +3,29 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var getBorderRadius = function getBorderRadius(props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
 };
-
 var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   var radius = getBorderRadius(props);
-
   switch (props.flatEdge) {
     case 'left':
       return "0px ".concat(radius, " ").concat(radius, " 0px");
-
     case 'right':
       return "".concat(radius, " 0px 0px ").concat(radius);
-
     case 'none':
     default:
       return "".concat(radius);
   }
 };
-
 export var IconButtonContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 export var StyledIconButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ", ";\n  ", " {\n    display: block;\n  }\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), function (props) {
   return props.hideOnLowWidth ? 'none' : 'block';
@@ -68,26 +58,25 @@ export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject4
 }, COLORS.neutral_300, COLORS.neutral_300);
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
-      variant = _ref.variant,
-      shape = _ref.shape,
-      action = _ref.action,
-      hideOnLowWidth = _ref.hideOnLowWidth,
-      isInMobileMenu = _ref.isInMobileMenu,
-      children = _ref.children,
-      useTransparentBackground = _ref.useTransparentBackground,
-      shouldNotInteract = _ref.shouldNotInteract,
-      disabled = _ref.disabled,
-      iconColor = _ref.iconColor,
-      unsetIconSize = _ref.unsetIconSize,
-      tabIndex = _ref.tabIndex,
-      flatEdge = _ref.flatEdge,
-      borderRadius = _ref.borderRadius,
-      focusBackgroundColor = _ref.focusBackgroundColor,
-      type = _ref.type,
-      hidden = _ref.hidden,
-      invertFocus = _ref.invertFocus,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    variant = _ref.variant,
+    shape = _ref.shape,
+    action = _ref.action,
+    hideOnLowWidth = _ref.hideOnLowWidth,
+    isInMobileMenu = _ref.isInMobileMenu,
+    children = _ref.children,
+    useTransparentBackground = _ref.useTransparentBackground,
+    shouldNotInteract = _ref.shouldNotInteract,
+    disabled = _ref.disabled,
+    iconColor = _ref.iconColor,
+    unsetIconSize = _ref.unsetIconSize,
+    tabIndex = _ref.tabIndex,
+    flatEdge = _ref.flatEdge,
+    borderRadius = _ref.borderRadius,
+    focusBackgroundColor = _ref.focusBackgroundColor,
+    type = _ref.type,
+    hidden = _ref.hidden,
+    invertFocus = _ref.invertFocus,
+    rest = _objectWithoutProperties(_ref, _excluded);
   // Let's render button
   switch (variant) {
     case 'secondary':
@@ -118,7 +107,6 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           children: children
         })
       }));
-
     case 'primary':
     default:
       return /*#__PURE__*/_jsx(StyledPrimaryIconButton, _objectSpread(_objectSpread({

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAA8B,mBAAmB;AAE9D,SAASC,WAAW,EAAEC,MAAM,EAAEC,WAAW,EAAEC,mBAAmB,QAAQ,WAAW;AACjF,SAASC,yBAAyB,QAAQ,WAAW;AAAC;AAgBtD,IAAMC,eAAe,GAAG,SAAlBA,eAAe,CAAIC,KAAsB;EAAA,OAAMA,KAAK,CAACC,YAAY,aAAMD,KAAK,CAACC,YAAY,UAAO,KAAK;AAAA,CAAC;AAE5G,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIF,KAAsB,EAAK;EACvD,IAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAK,CAAC;EACrC,QAAQA,KAAK,CAACI,QAAQ;IACpB,KAAK,MAAM;MACT,qBAAcD,MAAM,cAAIA,MAAM;IAEhC,KAAK,OAAO;MACV,iBAAUA,MAAM,sBAAYA,MAAM;IAEpC,KAAK,MAAM;IACX;MACE,iBAAUA,MAAM;EAAG;AAEzB,CAAC;AAED,OAAO,IAAME,iBAAiB,GAAGZ,MAAM,CAACa,GAAG,qEAAE;AAE7C,OAAO,IAAMC,gBAAgB,GAAGd,MAAM,CAACe,MAAM,onBAQhC,UAACR,KAAK;EAAA,OAAMA,KAAK,CAACS,cAAc,GAAG,MAAM,GAAG,OAAO;AAAA,CAAC,EAC7Df,WAAW,CAACgB,MAAM,EAIH,UAACV,KAAK;EAAA,OAAMA,KAAK,CAACC,YAAY,aAAMD,KAAK,CAACC,YAAY,UAAO,KAAK;AAAA,CAAC,EAClFI,iBAAiB,EAGAH,oBAAoB,EAKzB,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACW,aAAa,GAAG,OAAO,GAAG,MAAM;AAAA,CAAC,EACpD,UAACX,KAAK;EAAA,OAAMA,KAAK,CAACW,aAAa,GAAG,OAAO,GAAG,MAAM;AAAA,CAAC,EAY5D,UAACX,KAAK;EAAA,OAAMA,KAAK,CAACY,WAAW,GAAGf,mBAAmB,GAAGD,WAAW;AAAA,CAAC,CAEvE;AAED,OAAO,IAAMiB,uBAAuB,GAAGpB,MAAM,CAACc,gBAAgB,CAAC,mqBAC3DF,iBAAiB,EACG,UAACL,KAAK;EAAA,OAAMA,KAAK,CAACc,wBAAwB,GAAG,aAAa,GAAGnB,MAAM,CAACoB,WAAW;AAAA,CAAC,EAG1F,UAACf,KAAK;EAAA,OAAKA,KAAK,CAACgB,SAAS,IAAIrB,MAAM,CAACsB,KAAK;AAAA,GAExC,UAACjB,KAAK;EAAA,OAAKA,KAAK,CAACgB,SAAS,IAAIrB,MAAM,CAACsB,KAAK;AAAA,GAMpDZ,iBAAiB,EACGV,MAAM,CAACuB,WAAW,EAEtCb,iBAAiB,EACjBA,iBAAiB,EACTV,MAAM,CAACsB,KAAK,EAKpBZ,iBAAiB,EACHV,MAAM,CAACwB,WAAW,EAEhCd,iBAAiB,EACjBA,iBAAiB,EACTV,MAAM,CAACsB,KAAK,EAIpBZ,iBAAiB,EACGV,MAAM,CAACyB,WAAW,EAI5BzB,MAAM,CAACsB,KAAK,EAEdtB,MAAM,CAACsB,KAAK,CAGzB;AAED,OAAO,IAAMI,yBAAyB,GAAG5B,MAAM,CAACc,gBAAgB,CAAC,grBAC7DF,iBAAiB,EACG,UAACL,KAAK;EAAA,OAAMA,KAAK,CAACc,wBAAwB,GAAG,aAAa,GAAGnB,MAAM,CAACsB,KAAK;AAAA,CAAC,EAGpF,UAACjB,KAAK;EAAA,OAAKA,KAAK,CAACgB,SAAS,IAAIrB,MAAM,CAAC2B,WAAW;AAAA,GAE9C,UAACtB,KAAK;EAAA,OAAKA,KAAK,CAACgB,SAAS,IAAIrB,MAAM,CAAC2B,WAAW;AAAA,GAK5C,UAACtB,KAAK;EAAA,OAAMA,KAAK,CAACuB,iBAAiB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAGpElB,iBAAiB,EACGV,MAAM,CAAC6B,UAAU,EAErCnB,iBAAiB,EACjBA,iBAAiB,EACTV,MAAM,CAACuB,WAAW,EAK1Bb,iBAAiB,EACHV,MAAM,CAAC8B,WAAW,EAEhCpB,iBAAiB,EACjBA,iBAAiB,EACTV,MAAM,CAACwB,WAAW,EAK1Bd,iBAAiB,EACG,UAACL,KAAK;EAAA,OAAMA,KAAK,CAACc,wBAAwB,GAAG,aAAa,GAAGnB,MAAM,CAACsB,KAAK;AAAA,CAAC,EAIpFtB,MAAM,CAAC+B,WAAW,EAEpB/B,MAAM,CAAC+B,WAAW,CAG/B;AAmBD,IAAMC,UAAU,gBAAGnC,KAAK,CAACoC,UAAU,CACjC,gBAuBEC,GAAG,EACA;EAAA,IAtBDC,EAAE,QAAFA,EAAE;IACFC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNxB,cAAc,QAAdA,cAAc;IACdyB,cAAc,QAAdA,cAAc;IACdC,QAAQ,QAARA,QAAQ;IACRrB,wBAAwB,QAAxBA,wBAAwB;IACxBS,iBAAiB,QAAjBA,iBAAiB;IACjBa,QAAQ,QAARA,QAAQ;IACRpB,SAAS,QAATA,SAAS;IACTL,aAAa,QAAbA,aAAa;IACb0B,QAAQ,QAARA,QAAQ;IACRjC,QAAQ,QAARA,QAAQ;IACRH,YAAY,QAAZA,YAAY;IACZqC,oBAAoB,QAApBA,oBAAoB;IACpBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACN5B,WAAW,QAAXA,WAAW;IACR6B,IAAI;EAIT;EACA,QAAQV,OAAO;IACb,KAAK,WAAW;MACd,oBACE,KAAC,yBAAyB;QACxB,EAAE,EAAED,EAAG;QACP,IAAI,EAAES,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,QAAS;QACvB,eAAaT,EAAG;QAChB,GAAG,EAAED,GAAI;QACT,OAAO,EAAE,iBAACa,KAA0C,EAAK;UACvDA,KAAK,CAACC,eAAe,EAAE;UACvBV,MAAM,CAACS,KAAK,CAAC;QACf,CAAE;QACF,QAAQ,EAAEN,QAAS;QACnB,cAAc,EAAE3B,cAAc,IAAI,KAAM;QACxC,YAAY,EAAEyB,cAAe;QAC7B,wBAAwB,EAAEpB,wBAAyB;QACnD,iBAAiB,EAAES,iBAAkB;QACrC,SAAS,EAAEP,SAAU;QACrB,aAAa,EAAEL,aAAc;QAC7B,QAAQ,EAAE0B,QAAS;QACnB,YAAY,EAAEpC,YAAY,IAAI+B,KAAK,KAAK,UAAU,GAAG,EAAE,GAAG,CAAE;QAC5D,WAAW,EAAElC,yBAA0B;QACvC,MAAM,EAAE0C,MAAO;QACf,WAAW,EAAE5B,WAAY;QACzB,oBAAoB,EAAE0B;MAAqB,GACvCG,IAAI;QAAA,uBACR,KAAC,iBAAiB;UAAA,UAAEN;QAAQ;MAAqB,GACvB;IAEhC,KAAK,SAAS;IACd;MACE,oBACE,KAAC,uBAAuB;QACtB,EAAE,EAAEL,EAAG;QACP,IAAI,EAAES,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,QAAS;QACvB,eAAaT,EAAG;QAChB,QAAQ,EAAE1B,QAAS;QACnB,GAAG,EAAEyB,GAAI;QACT,OAAO,EAAE,iBAACa,KAA0C,EAAK;UACvDA,KAAK,CAACC,eAAe,EAAE;UACvBV,MAAM,CAACS,KAAK,CAAC;QACf,CAAE;QACF,QAAQ,EAAEN,QAAS;QACnB,cAAc,EAAE3B,cAAc,IAAI,KAAM;QACxC,YAAY,EAAEyB,cAAe;QAC7B,wBAAwB,EAAEpB,wBAAyB;QACnD,SAAS,EAAEE,SAAU;QACrB,aAAa,EAAEL,aAAc;QAC7B,QAAQ,EAAE0B,QAAS;QACnB,YAAY,EAAEpC,YAAY,IAAI+B,KAAK,KAAK,UAAU,GAAG,EAAE,GAAG,CAAE;QAC5D,WAAW,EAAElC,yBAA0B;QACvC,MAAM,EAAE0C,MAAO;QACf,WAAW,EAAE5B,WAAY;QACzB,oBAAoB,EAAE0B;MAAqB,GACvCG,IAAI;QAAA,uBACR,KAAC,iBAAiB;UAAA,UAAEN;QAAQ;MAAqB,GACzB;EAC1B;AAER,CAAC,CACF;AAAC;EAvGAJ,OAAO,aAAG,SAAS,EAAG,WAAW;EACjCC,KAAK,aAAG,QAAQ,EAAG,UAAU;EAC7BC,MAAM;EACNxB,cAAc;EAEdyB,cAAc;EACdpB,wBAAwB;EACxBS,iBAAiB;EACjBP,SAAS;EACTL,aAAa;EACbV,YAAY;EACZqC,oBAAoB;EACpBH,QAAQ;EACRvB,WAAW;AAAA;AA4Fb,eAAee,UAAU"}

package/dist/Button/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,12 +28,8 @@ Object.defineProperty(exports, "IconButton", {
     return _Iconbutton.default;
   }
 });
-
 var _Iconbutton = _interopRequireDefault(require("./Iconbutton"));
-
 var _Button = _interopRequireDefault(require("./Button"));
-
 var _BackButton = _interopRequireDefault(require("./BackButton"));
-
 var _DualFunctionButton = _interopRequireDefault(require("./DualFunctionButton"));
 //# sourceMappingURL=index.cjs.map

package/dist/Button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Button/index.ts"],"sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Button/index.ts"],"sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","IconButton","Button","BackButton","DualFunctionButton"],"sources":["../../src/Button/index.ts"],"sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAnB,QAAoC,cAApC;AACA,SAAQD,OAAO,IAAIE,MAAnB,QAAgC,UAAhC;AACA,SAAQF,OAAO,IAAIG,UAAnB,QAAoC,cAApC;AACA,SAAQH,OAAO,IAAII,kBAAnB,QAA4C,sBAA5C"}
+{"version":3,"file":"index.js","names":["default","IconButton","Button","BackButton","DualFunctionButton"],"sources":["../../src/Button/index.ts"],"sourcesContent":["export {default as IconButton} from './Iconbutton';\nexport {default as Button} from './Button';\nexport {default as BackButton} from './BackButton';\nexport {default as DualFunctionButton} from './DualFunctionButton';\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,UAAU,QAAO,cAAc;AAClD,SAAQD,OAAO,IAAIE,MAAM,QAAO,UAAU;AAC1C,SAAQF,OAAO,IAAIG,UAAU,QAAO,cAAc;AAClD,SAAQH,OAAO,IAAII,kBAAkB,QAAO,sBAAsB"}

package/dist/Card/HorizontalCard/HorizontalCard.cjs

@@ -1,75 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.HorizontalCard = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _styles = require("../../styles");
-
 var _HorizontalCardThumbnail = require("./HorizontalCardThumbnail");
-
 var _HorizontalCardBody = require("./HorizontalCardBody");
-
 var _HorizontalCardActions = require("./HorizontalCardActions");
-
 var _common = require("../../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className"];
-
 var _templateObject, _templateObject2;
-
 var ContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ", ";\n  border-radius: 8px;\n"])), _styles.COLORS.white);
-
 var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), ContentContainer, _styles.COLORS.neutral_200, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, ContentContainer, _styles.COLORS.primary_20, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L3, ContentContainer, _styles.COLORS.primary_100, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L2, _styles.focusStyles, ContentContainer, _styles.BOXSHADOWS.BOXSHADOW_L1, ContentContainer, _styles.COLORS.neutral_100);
-
 var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
-      description = _ref.description,
-      tags = _ref.tags,
-      progress = _ref.progress,
-      icon = _ref.icon,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-      image = _ref.image,
-      action = _ref.action,
-      actions = _ref.actions,
-      disabled = _ref.disabled,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    description = _ref.description,
+    tags = _ref.tags,
+    progress = _ref.progress,
+    icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    image = _ref.image,
+    action = _ref.action,
+    actions = _ref.actions,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = _react.default.useState([]),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      actionsRefs = _React$useState2[0],
-      setActionsRefs = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    actionsRefs = _React$useState2[0],
+    setActionsRefs = _React$useState2[1];
   var containerRef = _react.default.useRef(null);
-
   (0, _common.useActionWithin)(containerRef, actionsRefs);
   var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
-
   var handleClick = function handleClick() {
     !disabled && action && action();
   };
-
   var handleButtonPress = function handleButtonPress(e) {
     e.key === 'Enter' && handleClick();
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     ref: containerRef,
     tabIndex: action && !disabled ? 0 : -1,
@@ -96,7 +73,6 @@ var HorizontalCard = function HorizontalCard(_ref) {
     })
   });
 };
-
 exports.HorizontalCard = HorizontalCard;
 var _default = HorizontalCard;
 exports.default = _default;

package/dist/Card/HorizontalCard/HorizontalCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.cjs","names":["ContentContainer","styled","div","COLORS","white","Container","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":";;;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AAAwE;AAAA;AAAA;AAExE,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,6OAMbC,cAAM,CAACC,KAAK,CAEjC;AAED,IAAMC,SAAS,GAAGJ,yBAAM,CAACC,GAAG,ghCAKtBF,gBAAgB,EACcG,cAAM,CAACG,WAAW,EAKhDN,gBAAgB,EACFO,kBAAU,CAACC,YAAY,EASjCR,gBAAgB,EACIG,cAAM,CAACM,UAAU,EAKrCT,gBAAgB,EACFO,kBAAU,CAACG,YAAY,EAOrCV,gBAAgB,EACIG,cAAM,CAACQ,WAAW,EAKtCX,gBAAgB,EACFO,kBAAU,CAACK,YAAY,EAMvCC,mBAAW,EAQXb,gBAAgB,EACFO,kBAAU,CAACC,YAAY,EAKrCR,gBAAgB,EACcG,cAAM,CAACW,WAAW,CAIvD;AAEM,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OAaU;EAAA,IAZJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,SAAS;IACnBC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAGpF,sBAAsCC,cAAK,CAACC,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAAvFC,WAAW;IAAEC,cAAc;EAClC,IAAMC,YAAY,GAAGJ,cAAK,CAACK,MAAM,CAAiB,IAAI,CAAC;EAEvD,IAAAC,uBAAe,EAACF,YAAY,EAAEF,WAAW,CAAC;EAE1C,IAAMK,GAAG,aAAMd,OAAO,cAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAE;EAEtG,IAAMU,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,CAACX,QAAQ,IAAIF,MAAM,IAAIA,MAAM,EAAE;EACjC,CAAC;EAED,IAAMc,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAsC,EAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,EAAE;EACpC,CAAC;EAED,oBACE,qBAAC,SAAS;IAAC,GAAG,EAAEJ,YAAa;IAClB,QAAQ,EAAET,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvC,SAAS,EAAEU,GAAI;IACf,SAAS,EAAEE,iBAAkB;IAC7B,OAAO,EAAED,WAAY;IACrB,WAAW,EAAEI,iCAA0B;IAAA,uBAChD,sBAAC,gBAAgB;MAAA,wBAEf,qBAAC,gDAAuB;QAAC,KAAK,EAAElB,KAAM;QACb,IAAI,EAAEF;MAAK,EAAE,eAEtC,qBAAC,sCAAkB;QAAC,KAAK,EAAEJ,KAAM;QACb,WAAW,EAAEC,WAAY;QACzB,IAAI,EAAEC,IAAK;QACX,QAAQ,EAAEC;MAAS,EAAE,eAEzC,qBAAC,4CAAqB;QAAC,GAAG,EAAE,aAAAsB,QAAQ;UAAA,OAAIV,cAAc,CAACU,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA,CAAC;QAChD,OAAO,EAAEjB,OAAQ;QACjB,QAAQ,EAAEC;MAAS,EAAE;IAAA;EAE3B,EACT;AAEhB,CAAC;AAAC;AAAA,eAEaV,cAAc;AAAA"}

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -2,9 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["title", "description", "tags", "progress", "icon", "variant", "image", "action", "actions", "disabled", "className"];
-
 var _templateObject, _templateObject2;
-
 import React from 'react';
 import styled from 'styled-components';
 import { BOXSHADOWS, COLORS, focusStyles } from '../../styles';
@@ -18,36 +16,31 @@ var ContentContainer = styled.div(_templateObject || (_templateObject = _taggedT
 var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ", " {\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n  }\n\n  &.elevated {\n    ", " {\n      box-shadow: ", ";\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ", " {\n          background-color: ", ";\n        }\n      }\n\n      &.elevated {\n        ", " {\n          box-shadow: ", ";\n        }\n      }\n    }\n\n    &:focus {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ", " {\n        box-shadow: ", ";\n      }\n    }\n\n    &.outline {\n      ", " {\n        box-shadow: inset 0 0 0 1px ", ";\n      }\n    }\n  }\n"])), ContentContainer, COLORS.neutral_200, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.primary_20, ContentContainer, BOXSHADOWS.BOXSHADOW_L3, ContentContainer, COLORS.primary_100, ContentContainer, BOXSHADOWS.BOXSHADOW_L2, focusStyles, ContentContainer, BOXSHADOWS.BOXSHADOW_L1, ContentContainer, COLORS.neutral_100);
 export var HorizontalCard = function HorizontalCard(_ref) {
   var title = _ref.title,
-      description = _ref.description,
-      tags = _ref.tags,
-      progress = _ref.progress,
-      icon = _ref.icon,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-      image = _ref.image,
-      action = _ref.action,
-      actions = _ref.actions,
-      disabled = _ref.disabled,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    description = _ref.description,
+    tags = _ref.tags,
+    progress = _ref.progress,
+    icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
+    image = _ref.image,
+    action = _ref.action,
+    actions = _ref.actions,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      actionsRefs = _React$useState2[0],
-      setActionsRefs = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    actionsRefs = _React$useState2[0],
+    setActionsRefs = _React$useState2[1];
   var containerRef = React.useRef(null);
   useActionWithin(containerRef, actionsRefs);
   var cls = "".concat(variant, " ").concat(action ? 'clickable' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(className || '');
-
   var handleClick = function handleClick() {
     !disabled && action && action();
   };
-
   var handleButtonPress = function handleButtonPress(e) {
     e.key === 'Enter' && handleClick();
   };
-
   return /*#__PURE__*/_jsx(Container, {
     ref: containerRef,
     tabIndex: action && !disabled ? 0 : -1,

package/dist/Card/HorizontalCard/HorizontalCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","ContentContainer","div","white","Container","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nconst ContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${ContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${ContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${ContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${ContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${ContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${ContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <Container ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <ContentContainer>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </ContentContainer>\n    </Container>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}