@laerdal/life-react-components 3.6.0-dev.1.full → 3.6.1

package/dist/Button/TextButton.cjs

@@ -0,0 +1,648 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextButtonTertiaryStyled = exports.TextButtonSecondaryStyled = exports.TextButtonSecondaryDestructiveStyled = exports.TextButtonPrimaryStyled = exports.TextButtonPositiveStyled = exports.TextButtonInvertedSecondaryStyled = exports.TextButtonDestructiveStyled = exports.TextButtonContentContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _LoadingIndicator = require("../LoadingIndicator");
+var _styles = require("../styles");
+var _types = require("../types");
+var _common = require("../common");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "variant", "type", "size", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon", "iconPosition"],
+  _excluded2 = ["loading"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const getBorderRadius = (flatEdge, radius) => {
+  switch (flatEdge) {
+    case 'left':
+      return `0px ${radius}px ${radius}px 0px`;
+    case 'right':
+      return `${radius}px 0px 0px ${radius}px`;
+    case 'none':
+    default:
+      return `${radius}px`;
+  }
+};
+const TextButtonContentContainer = exports.TextButtonContentContainer = _styledComponents.default.div`
+  min-width: 64px;
+`;
+const TextButtonBaseStyled = _styledComponents.default.button``;
+const TextButtonPrimaryStyled = exports.TextButtonPrimaryStyled = (0, _styledComponents.default)(TextButtonBaseStyled)`
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  box-sizing: border-box;  
+  &.loading-state {
+    cursor: wait;
+  }
+  ${TextButtonContentContainer} {
+    ${props => props.$size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)) : props.$size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)) : (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme))};
+
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
+    border-radius: ${props => getBorderRadius(props.$flatEdge, 8)};
+
+    width: ${props => props.$width};
+    position: relative;
+
+    min-height: ${props => props.$size === _types.Size.Large ? '56px' : props.$size === _types.Size.Small ? '32px' : '40px'};
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${props => props.$size === _types.Size.Large ? '14px 16px' : props.$size === _types.Size.Small ? '6px 8px' : '8px 12px'};
+
+    span.icon:not(.loading) {
+      pointer-events: none;
+    }
+
+    span.loading {
+      opacity: 0;
+    }
+
+    .icon {
+      margin: ${props => props.$size === _types.Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === _types.Size.Small ? props.$iconOnly ? '-2px -6px' : '' : ''};
+      width: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+      height: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+      svg {
+        width: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'} !important;
+        height: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'} !important;
+      }
+    }
+
+    .label {
+      margin: 0 4px;
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      svg {
+        height: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+        width: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
+  }
+
+  &:focus,
+  &.focus-state {
+    ${props => props.$invertFocus || props.$invertFocus === undefined ? _styles.invertedFocusStyles : _styles.focusStyles}
+  }
+  &:disabled,
+  &.disabled-state {
+    cursor: not-allowed;
+  }
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    pointer-events: none;
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
+const TextButtonSecondaryStyled = exports.TextButtonSecondaryStyled = (0, _styledComponents.default)(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'primary'
+}, props.theme)};
+    
+    padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
+const TextButtonInvertedSecondaryStyled = exports.TextButtonInvertedSecondaryStyled = (0, _styledComponents.default)(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    
+    padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'inverse'
+}, props.theme)};
+
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'inverse'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled',
+  defaultVariant: 'inverse'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled',
+  defaultVariant: 'inverse'
+}, props.theme)};
+  }
+`;
+const TextButtonTertiaryStyled = exports.TextButtonTertiaryStyled = (0, _styledComponents.default)(TextButtonPrimaryStyled)`
+${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+    background-color: transparent;
+
+    div svg path {
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+    }
+
+    padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent !important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};
+    border-color: transparent !important;
+  }
+`;
+const TextButtonPositiveStyled = exports.TextButtonPositiveStyled = (0, _styledComponents.default)(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: white;
+    background-color: ${props => _styles.COLORS.getColor('positive_500', props.theme)};
+  }
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('positive_700', props.theme)};
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('positive_800', props.theme)};
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+const TextButtonDestructiveStyled = exports.TextButtonDestructiveStyled = (0, _styledComponents.default)(TextButtonPrimaryStyled)`
+${TextButtonContentContainer} {
+    color: white;
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical'
+}, props.theme)};
+  }
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};    
+  }
+`;
+const TextButtonSecondaryDestructiveStyled = exports.TextButtonSecondaryDestructiveStyled = (0, _styledComponents.default)(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
+/**
+ * TextButton component
+ */
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      children = '',
+      variant = 'primary',
+      type = 'button',
+      size = _types.Size.Medium,
+      invertFocus,
+      width = 'auto',
+      testId,
+      disabled,
+      flatEdge,
+      icon,
+      iconPosition = 'left'
+    } = _ref,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Let's filter out properties that we don't need to render.
+  const {
+      loading
+    } = props,
+    renderProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  const theme = (0, _styledComponents.useTheme)();
+  const renderIcon = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
+      children: icon
+    })
+  });
+  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [icon && iconPosition == 'left' && renderIcon(), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: loading ? 'label loading' : 'label',
+      children: children
+    }), icon && iconPosition == 'right' && renderIcon(), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {})]
+  });
+  let TextButtonStyled = TextButtonPrimaryStyled;
+  switch (variant) {
+    case 'secondary':
+      TextButtonStyled = TextButtonSecondaryStyled;
+      break;
+    case 'tertiary':
+      TextButtonStyled = TextButtonTertiaryStyled;
+      break;
+    case 'positive':
+      TextButtonStyled = TextButtonPositiveStyled;
+      break;
+    case 'destructive':
+      TextButtonStyled = TextButtonDestructiveStyled;
+      break;
+    case 'secondaryDestructive':
+      TextButtonStyled = TextButtonSecondaryDestructiveStyled;
+      break;
+    case 'secondaryInverse':
+      TextButtonStyled = TextButtonInvertedSecondaryStyled;
+      break;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
+    $size: size,
+    $invertFocus: invertFocus,
+    ref: ref,
+    disabled: disabled,
+    $iconOnly: !children,
+    type: type,
+    $flatEdge: flatEdge,
+    $width: width,
+    "data-testid": testId,
+    className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
+    onMouseDown: _common.defaultOnMouseDownHandler,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TextButtonContentContainer, {
+      children: renderContent()
+    })
+  }));
+});
+TextButton.propTypes = {
+  variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'destructive', 'secondaryDestructive', 'secondaryInverse']),
+  invertFocus: _propTypes.default.bool,
+  width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.string]),
+  loading: _propTypes.default.bool,
+  testId: _propTypes.default.string,
+  icon: _propTypes.default.node,
+  iconPosition: _propTypes.default.oneOf(['left', 'right'])
+};
+var _default = exports.default = TextButton;
+//# sourceMappingURL=TextButton.cjs.map