@laerdal/life-react-components 6.0.0-dev.7.full → 6.0.0

package/dist/Button/TextButton.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Size } from '../types';
+export declare const TextButtonContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextButtonPrimaryStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$size" | "$width" | "$flatEdge" | "$invertFocus" | "$iconOnly"> & {
+    $iconOnly: boolean;
+    $size: Size;
+    $flatEdge: string | undefined;
+    $width: string;
+    $invertFocus: boolean | undefined;
+}, never>> & string;
+export declare const TextButtonSecondaryStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$size" | "$width" | "$flatEdge" | "$invertFocus" | "$iconOnly"> & {
+    $iconOnly: boolean;
+    $size: Size;
+    $flatEdge: string | undefined;
+    $width: string;
+    $invertFocus: boolean | undefined;
+}, never>, never>> & string;
+export declare const TextButtonTertiaryStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$size" | "$width" | "$flatEdge" | "$invertFocus" | "$iconOnly"> & {
+    $iconOnly: boolean;
+    $size: Size;
+    $flatEdge: string | undefined;
+    $width: string;
+    $invertFocus: boolean | undefined;
+}, never>, never>> & string;
+export declare const TextButtonPositiveStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$size" | "$width" | "$flatEdge" | "$invertFocus" | "$iconOnly"> & {
+    $iconOnly: boolean;
+    $size: Size;
+    $flatEdge: string | undefined;
+    $width: string;
+    $invertFocus: boolean | undefined;
+}, never>, never>> & string;
+export declare const TextButtonDestructiveStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$size" | "$width" | "$flatEdge" | "$invertFocus" | "$iconOnly"> & {
+    $iconOnly: boolean;
+    $size: Size;
+    $flatEdge: string | undefined;
+    $width: string;
+    $invertFocus: boolean | undefined;
+}, never>, never>> & string;
+export declare const TextButtonSecondaryDestructiveStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$size" | "$width" | "$flatEdge" | "$invertFocus" | "$iconOnly"> & {
+    $iconOnly: boolean;
+    $size: Size;
+    $flatEdge: string | undefined;
+    $width: string;
+    $invertFocus: boolean | undefined;
+}, never>, never>> & string;
+export interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Look and feel variant of the component. Defaults to 'primary'. */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'destructive' | 'secondaryDestructive';
+    /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */
+    flatEdge?: 'right' | 'left' | 'none' | undefined;
+    /** Size of the component. Small, Medium or Large. Defaults to 'medium' */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */
+    invertFocus?: boolean;
+    /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */
+    width?: 'auto' | string;
+    /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */
+    loading?: boolean;
+    /** TestId. Will be set to the top level button component. */
+    testId?: string;
+    /** Icon that will be shown on the left of the children. */
+    icon?: React.ReactNode;
+    /** Icon position in the button. Defaults to 'left' */
+    iconPosition?: 'left' | 'right';
+}
+/**
+ * TextButton component
+ */
+declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default TextButton;

package/dist/Button/{Button.js → TextButton.js}

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-const _excluded = ["children", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon", "iconPosition"],
+const _excluded = ["children", "variant", "type", "size", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon", "iconPosition"],
   _excluded2 = ["loading"];
 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) { _defineProperty(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; }
@@ -24,11 +24,11 @@ const getBorderRadius = (flatEdge, radius) => {
       return `${radius}px`;
   }
 };
-export const ButtonContentContainer = styled.div`
+export const TextButtonContentContainer = styled.div`
   min-width: 64px;
 `;
-const ButtonBaseStyled = styled.button``;
-export const ButtonPrimaryStyled = styled(ButtonBaseStyled)`
+const TextButtonBaseStyled = styled.button``;
+export const TextButtonPrimaryStyled = styled(TextButtonBaseStyled)`
   border: none;
   background-color: transparent;
   cursor: pointer;
@@ -39,22 +39,22 @@ export const ButtonPrimaryStyled = styled(ButtonBaseStyled)`
   &.loading-state {
     cursor: wait;
   }
-  ${ButtonContentContainer} {
-    ${props => props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.generateToken({
+  ${TextButtonContentContainer} {
+    ${props => props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({
   componentType: 'text',
   isOnFill: true,
   defaultVariant: 'primary'
-}, props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.generateToken({
+}, props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
   componentType: 'text',
   isOnFill: true,
   defaultVariant: 'primary'
-}, props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.generateToken({
+}, props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
   componentType: 'text',
   isOnFill: true,
   defaultVariant: 'primary'
 }, props.theme))};
 
-    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+    background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -100,7 +100,7 @@ export const ButtonPrimaryStyled = styled(ButtonBaseStyled)`
         height: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
         width: ${props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px'};
         path {
-          fill: ${props => props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.generateToken({
+          fill: ${props => COLORS.generateToken({
   componentType: 'icon',
   isOnFill: true,
   defaultVariant: 'primary'
@@ -109,27 +109,27 @@ export const ButtonPrimaryStyled = styled(ButtonBaseStyled)`
       }
     }
   }
-  &:hover > ${ButtonContentContainer},
-  &.hover-state > ${ButtonContentContainer} {
-    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.generateToken({
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   state: 'hover',
   defaultVariant: 'primary'
 }, props.theme)};
-    color: ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.generateToken({
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   isOnFill: true,
   defaultVariant: 'primary'
 }, props.theme)};
   }
-  &:active > ${ButtonContentContainer},
-  &.active-state > ${ButtonContentContainer} {
-    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.generateToken({
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   state: 'active',
   defaultVariant: 'primary'
 }, props.theme)};
-    color: ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.generateToken({
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   isOnFill: true,
   defaultVariant: 'primary'
@@ -138,40 +138,40 @@ export const ButtonPrimaryStyled = styled(ButtonBaseStyled)`
 
   &:focus,
   &.focus-state {
-    ${props => props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? invertedFocusStyles : focusStyles}
+    ${props => props.$invertFocus || props.$invertFocus === undefined ? invertedFocusStyles : focusStyles}
   }
   &:disabled,
   &.disabled-state {
     cursor: not-allowed;
   }
-  &:disabled > ${ButtonContentContainer},
-  &.disabled-state > ${ButtonContentContainer} {
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
     pointer-events: none;
-    background-color: ${props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.generateToken({
+    background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   state: 'disabled'
 }, props.theme)};
-    color: ${props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.generateToken({
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   isOnFill: true,
   state: 'disabled'
 }, props.theme)};
   }
 `;
-export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
-  ${ButtonContentContainer} {
-    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+export const TextButtonSecondaryStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
     background-color: transparent;
     div svg path {
-      fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.generateToken({
+      fill: ${props => COLORS.generateToken({
   componentType: 'icon',
   defaultVariant: 'primary'
 }, props.theme)};
     }
-    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
   componentType: 'border',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -179,14 +179,14 @@ export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
     padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
   }
 
-  &:hover > ${ButtonContentContainer},
-  &.hover-state > ${ButtonContentContainer} {
-    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.generateToken({
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   state: 'hover',
   defaultVariant: 'primary'
 }, props.theme)};
-    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.generateToken({
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
   componentType: 'border',
   state: 'hover',
   defaultVariant: 'primary'
@@ -196,7 +196,7 @@ export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
     div {
       svg {
         path {
-          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.generateToken({
+          fill: ${props => COLORS.generateToken({
   componentType: 'text',
   state: 'hover',
   defaultVariant: 'primary'
@@ -205,14 +205,14 @@ export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
       }
     }
   }
-  &:active > ${ButtonContentContainer},
-  &.active-state > ${ButtonContentContainer} {
-    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.generateToken({
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   state: 'active',
   defaultVariant: 'primary'
 }, props.theme)};
-    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.generateToken({
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
   componentType: 'border',
   state: 'active',
   defaultVariant: 'primary'
@@ -222,7 +222,7 @@ export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
     div {
       svg {
         path {
-          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+          fill: ${props => COLORS.generateToken({
   componentType: 'text',
   state: 'hover',
   defaultVariant: 'primary'
@@ -232,29 +232,29 @@ export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`
     }
   }
 
-  &:disabled > ${ButtonContentContainer},
-  &.disabled-state > ${ButtonContentContainer} {
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
     background-color: transparent;
-    color: ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.generateToken({
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   state: 'disabled'
 }, props.theme)};
-    box-shadow: inset 0 0 0 2px ${props => props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.generateToken({
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
   componentType: 'border',
   state: 'disabled'
 }, props.theme)};
   }
 `;
-export const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)`
-${ButtonContentContainer} {
-    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+export const TextButtonTertiaryStyled = styled(TextButtonPrimaryStyled)`
+${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
     background-color: transparent;
 
     div svg path {
-      fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+      fill: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -263,13 +263,13 @@ ${ButtonContentContainer} {
     padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
   }
 
-  &:hover > ${ButtonContentContainer},
-  &.hover-state > ${ButtonContentContainer} {
-    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.generateToken({
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
   componentType: 'bg-surface',
   state: 'hover'
 }, props.theme)};
-    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -277,7 +277,7 @@ ${ButtonContentContainer} {
     div {
       svg {
         path {
-          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+          fill: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -285,13 +285,13 @@ ${ButtonContentContainer} {
       }
     }
   }
-  &:active > ${ButtonContentContainer},
-  &.active-state > ${ButtonContentContainer} {
-    background-color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.generateToken({
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    background-color: ${props => COLORS.generateToken({
   componentType: 'bg-surface',
   state: 'active'
 }, props.theme)};
-    color: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+    color: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -299,7 +299,7 @@ ${ButtonContentContainer} {
     div {
       svg {
         path {
-          fill: ${props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.generateToken({
+          fill: ${props => COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'primary'
 }, props.theme)};
@@ -308,8 +308,8 @@ ${ButtonContentContainer} {
     }
   }
 
-  &:disabled > ${ButtonContentContainer},
-  &.disabled-state > ${ButtonContentContainer} {
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
     background-color: transparent !important;
     color: ${props => COLORS.generateToken({
   componentType: 'text',
@@ -319,44 +319,44 @@ ${ButtonContentContainer} {
     border-color: transparent !important;
   }
 `;
-export const ButtonPositiveStyled = styled(ButtonPrimaryStyled)`
-  ${ButtonContentContainer} {
+export const TextButtonPositiveStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
     color: white;
     background-color: ${props => COLORS.getColor('positive_500', props.theme)};
   }
-  &:hover > ${ButtonContentContainer},
-  &.hover-state > ${ButtonContentContainer} {
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
     background-color: ${props => COLORS.getColor('positive_700', props.theme)};
   }
-  &:active > ${ButtonContentContainer},
-  &.active-state > ${ButtonContentContainer} {
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
     background-color: ${props => COLORS.getColor('positive_800', props.theme)};
   }
 
-  &:disabled > ${ButtonContentContainer},
-  &.disabled-state > ${ButtonContentContainer} {
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
     background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
     color: ${props => COLORS.getColor('neutral_300', props.theme)};
   }
 `;
-export const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`
-  ${ButtonContentContainer} {
+export const TextButtonDestructiveStyled = styled(TextButtonPrimaryStyled)`
+${TextButtonContentContainer} {
     color: white;
     background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   defaultVariant: 'critical'
 }, props.theme)};
   }
-  &:hover > ${ButtonContentContainer},
-  &.hover-state > ${ButtonContentContainer} {
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
     background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   state: 'hover',
   defaultVariant: 'critical'
 }, props.theme)};
   }
-  &:active > ${ButtonContentContainer},
-  &.active-state > ${ButtonContentContainer} {
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
     background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   state: 'active',
@@ -364,8 +364,8 @@ export const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`
 }, props.theme)};
   }
 
-  &:disabled > ${ButtonContentContainer},
-  &.disabled-state > ${ButtonContentContainer} {
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
     background-color: ${props => COLORS.generateToken({
   componentType: 'bg-fill',
   state: 'disabled'
@@ -377,16 +377,102 @@ export const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`
 }, props.theme)};    
   }
 `;
+export const TextButtonSecondaryDestructiveStyled = styled(TextButtonPrimaryStyled)`
+  ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'critical'
+}, props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical'
+}, props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    padding: ${props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${TextButtonContentContainer},
+  &.hover-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${TextButtonContentContainer},
+  &.active-state > ${TextButtonContentContainer} {
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'critical'
+}, props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${TextButtonContentContainer},
+  &.disabled-state > ${TextButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+  }
+`;
 /**
- * Button component
+ * TextButton component
  */
-const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const TextButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       children = '',
       variant = 'primary',
       type = 'button',
       size = Size.Medium,
-      colorTheme,
       invertFocus,
       width = 'auto',
       testId,
@@ -414,24 +500,26 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: children
     }), icon && iconPosition == 'right' && renderIcon(), loading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
   });
-  let ButtonStyled = ButtonPrimaryStyled;
+  let TextButtonStyled = TextButtonPrimaryStyled;
   switch (variant) {
     case 'secondary':
-      ButtonStyled = ButtonSecondaryStyled;
+      TextButtonStyled = TextButtonSecondaryStyled;
       break;
     case 'tertiary':
-      ButtonStyled = ButtonTertiaryStyled;
+      TextButtonStyled = TextButtonTertiaryStyled;
       break;
     case 'positive':
-      ButtonStyled = ButtonPositiveStyled;
+      TextButtonStyled = TextButtonPositiveStyled;
+      break;
+    case 'destructive':
+      TextButtonStyled = TextButtonDestructiveStyled;
       break;
-    case 'critical':
-      ButtonStyled = ButtonCriticalStyled;
+    case 'secondaryDestructive':
+      TextButtonStyled = TextButtonSecondaryDestructiveStyled;
       break;
   }
-  return /*#__PURE__*/_jsx(ButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
+  return /*#__PURE__*/_jsx(TextButtonStyled, _objectSpread(_objectSpread({}, renderProps), {}, {
     $size: size,
-    $colorTheme: colorTheme,
     $invertFocus: invertFocus,
     ref: ref,
     disabled: disabled,
@@ -442,14 +530,13 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     "data-testid": testId,
     className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
     onMouseDown: defaultOnMouseDownHandler,
-    children: /*#__PURE__*/_jsx(ButtonContentContainer, {
+    children: /*#__PURE__*/_jsx(TextButtonContentContainer, {
       children: renderContent()
     })
   }));
 });
-Button.propTypes = {
-  variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'critical']),
-  colorTheme: _pt.oneOf(['teal', 'dark']),
+TextButton.propTypes = {
+  variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'destructive', 'secondaryDestructive']),
   invertFocus: _pt.bool,
   width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
   loading: _pt.bool,
@@ -457,5 +544,5 @@ Button.propTypes = {
   icon: _pt.node,
   iconPosition: _pt.oneOf(['left', 'right'])
 };
-export default Button;
-//# sourceMappingURL=Button.js.map
+export default TextButton;
+//# sourceMappingURL=TextButton.js.map