@kvell-group/ui 1.18.2 → 1.18.4

package/mantine/index.ts

@@ -1,2 +1,3 @@
 export * from '@mantine/core'
 export * from '@mantine/hooks'
+export * from '@mantine/form'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kvell-group/ui",
   "author": "Kvell Group",
   "private": false,
-  "version": "1.18.2",
+  "version": "1.18.4",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@mantine/carousel": "^8.1.3",
     "@mantine/core": "^8.1.3",
+    "@mantine/form": "^8.1.3",
     "@mantine/hooks": "^8.1.3"
   },
   "peerDependencies": {

package/src/assets/error.svg

@@ -1,3 +1,3 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.50001 14.6666C4.81801 14.6666 1.83334 11.6819 1.83334 7.99992C1.83334 4.31792 4.81801 1.33325 8.50001 1.33325C12.182 1.33325 15.1667 4.31792 15.1667 7.99992C15.1667 11.6819 12.182 14.6666 8.50001 14.6666ZM8.50001 13.3333C9.9145 13.3333 11.2711 12.7713 12.2712 11.7712C13.2714 10.771 13.8333 9.41441 13.8333 7.99992C13.8333 6.58543 13.2714 5.22888 12.2712 4.22868C11.2711 3.22849 9.9145 2.66659 8.50001 2.66659C7.08552 2.66659 5.72897 3.22849 4.72877 4.22868C3.72858 5.22888 3.16668 6.58543 3.16668 7.99992C3.16668 9.41441 3.72858 10.771 4.72877 11.7712C5.72897 12.7713 7.08552 13.3333 8.50001 13.3333ZM7.83334 4.66659H9.16668V5.99992H7.83334V4.66659ZM7.83334 7.33325H9.16668V11.3333H7.83334V7.33325Z" fill="currentColor" style="fill:#E6483D;fill:color(display-p3 0.9020 0.2824 0.2392);fill-opacity:1;"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00004 14.6667C4.31804 14.6667 1.33337 11.682 1.33337 8.00004C1.33337 4.31804 4.31804 1.33337 8.00004 1.33337C11.682 1.33337 14.6667 4.31804 14.6667 8.00004C14.6667 11.682 11.682 14.6667 8.00004 14.6667ZM8.00004 13.3334C9.41453 13.3334 10.7711 12.7715 11.7713 11.7713C12.7715 10.7711 13.3334 9.41453 13.3334 8.00004C13.3334 6.58555 12.7715 5.229 11.7713 4.2288C10.7711 3.22861 9.41453 2.66671 8.00004 2.66671C6.58555 2.66671 5.229 3.22861 4.2288 4.2288C3.22861 5.229 2.66671 6.58555 2.66671 8.00004C2.66671 9.41453 3.22861 10.7711 4.2288 11.7713C5.229 12.7715 6.58555 13.3334 8.00004 13.3334ZM7.33337 4.66671H8.66671V6.00004H7.33337V4.66671ZM7.33337 7.33337H8.66671V11.3334H7.33337V7.33337Z" fill="currentColor"/>
 </svg>

package/src/components/ActionIcon/ActionIcon.module.css

@@ -0,0 +1,110 @@
+.root {
+  --ai-size-xs: rem(24px);
+  --ai-size-sm: rem(32px);
+  --ai-size-md: rem(40px);
+  --ai-size-lg: rem(48px);
+
+  --ai-radius-xs: var(--mantine-radius-md);
+  --ai-radius-sm: var(--mantine-radius-sm);
+  --ai-radius-md: var(--mantine-radius-md);
+  --ai-radius-lg: var(--mantine-radius-lg);
+
+  background-color: var(--ai-bg);
+  color: var(--ai-color);
+
+  &[data-size='xs'] {
+    --ai-radius: var(--ai-radius-xs);
+  }
+
+  &[data-size='sm'] {
+    --ai-radius: var(--ai-radius-lg);
+  }
+
+  &[data-size='md'] {
+    --ai-radius: var(--ai-radius-xl);
+  }
+
+  &[data-size='lg'] {
+    --ai-radius: var(--ai-radius-xl);
+  }
+
+  &[data-variant='primary'] {
+    --ai-bg: var(--color-background-button-primary);
+    --ai-color: var(--color-icon-base-inverted);
+
+    box-shadow: var(--mantine-shadow-xs);
+
+    &:focus-visible {
+      border: none;
+    }
+
+    &:hover {
+      --ai-bg: var(--color-background-button-primary-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      --ai-bg: var(--color-background-button-primary-disabled);
+      --ai-color: var(--color-icon-base-quaternary);
+
+      box-shadow: none;
+    }
+  }
+
+  &[data-variant='secondary'] {
+    --ai-bg: var(--color-background-button-secondary);
+    --ai-color: var(--color-icon-base-secondary);
+
+    border: rem(1px) solid var(--color-border-action-normal);
+    box-shadow: var(--mantine-shadow-xs);
+
+    &:hover {
+      --ai-bg: var(--color-background-button-secondary-hover);
+      border-color: var(--color-border-action-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      --ai-bg: var(--color-background-button-secondary-disabled);
+      --ai-color: var(--color-icon-base-quaternary);
+
+      border-color: var(--color-border-action-disabled);
+      box-shadow: none;
+    }
+  }
+
+  &[data-variant='tertiary'] {
+    --ai-bg: var(--color-background-button-tertiary);
+    --ai-color: var(--color-icon-base-secondary);
+
+    &:hover {
+      --ai-bg: var(--color-background-button-tertiary-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      --ai-bg: var(--color-background-button-tertiary);
+      --ai-color: var(--color-icon-base-quaternary);
+    }
+  }
+
+  &[data-variant='ghost'] {
+    --ai-bg: transparent;
+    --ai-color: var(--color-icon-base-secondary);
+
+    &:hover {
+      --ai-bg: var(--color-background-button-ghost-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      --ai-bg: transparent;
+      --ai-color: var(--color-icon-base-quaternary);
+    }
+  }
+
+  &:focus-visible {
+    border: rem(1px) solid var(--color-border-action-focus-light);
+    box-shadow: var(--shadow-focus-ring-light);
+  }
+}

package/src/components/ActionIcon/ActionIcon.tsx

@@ -0,0 +1,25 @@
+import { createPolymorphicComponent, ActionIcon as MantineActionIcon } from '@mantine/core'
+import type { ActionIconProps as BaseActionIconProps } from '@mantine/core'
+import '@mantine/core/styles/UnstyledButton.layer.css'
+import '@mantine/core/styles/Button.layer.css'
+import classNames from './ActionIcon.module.css'
+import { forwardRef } from 'react'
+import type { ExtendedActionIconVariant } from './types'
+
+// ----------------------------------------------------------------------
+
+export type ActionIconProps = BaseActionIconProps & { variant?: ExtendedActionIconVariant }
+
+export const ActionIcon = createPolymorphicComponent<'button', ActionIconProps>(
+  forwardRef<HTMLButtonElement, ActionIconProps>((props, ref) => {
+    const { size = 'md', ...resProps } = props
+    return (
+      <MantineActionIcon
+        ref={ref}
+        size={size}
+        {...resProps}
+        classNames={classNames}
+      />
+    )
+  })
+)

package/src/components/ActionIcon/constants.ts

@@ -0,0 +1,13 @@
+export const ACTION_ICON_VARIANT = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  GHOST: 'ghost',
+} as const
+
+export const ACTION_ICON_SIZE = {
+  LG: 'lg',
+  MD: 'md',
+  SM: 'sm',
+  XS: 'xs',
+}

package/src/components/ActionIcon/index.ts

@@ -0,0 +1 @@
+export * from './ActionIcon'

package/src/components/ActionIcon/types.ts

@@ -0,0 +1,8 @@
+import { ACTION_ICON_VARIANT } from './constants'
+import type { ActionIconVariant } from '@mantine/core'
+
+// ----------------------------------------------------------------------
+
+type ActionIconVariantsTypes = (typeof ACTION_ICON_VARIANT)[keyof typeof ACTION_ICON_VARIANT]
+
+export type ExtendedActionIconVariant = ActionIconVariant | ActionIconVariantsTypes

package/src/components/Button/Button.module.css

@@ -1,5 +1,4 @@
 .root {
-  box-shadow: var(--mantine-shadow-xs);
   --button-height-sm: 2rem;
   --button-height-md: 2.5rem;
   --button-height-lg: 3rem;
@@ -17,12 +16,38 @@
   &[data-variant='primary'] {
     background-color: var(--mantine-color-primary-0);
     color: var(--mantine-color-white);
+    box-shadow: var(--mantine-shadow-xs);
+
+    &:focus-visible {
+      border: none;
+    }
+
+    &:hover {
+      background-color: var(--color-background-button-primary-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      background-color: var(--color-background-button-primary-disabled);
+    }
   }
 
   &[data-variant='secondary'] {
     background-color: var(--mantine-color-secondary-0);
     color: var(--mantine-color-primary);
     border: 1px solid var(--mantine-color-border-action-normal-0);
+    box-shadow: var(--mantine-shadow-xs);
+
+    &:hover {
+      background-color: var(--color-background-button-secondary-hover);
+      border: 1px solid var(--color-border-action-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      background-color: var(--color-background-button-secondary-disabled);
+      border: 1px solid var(--color-border-action-disabled);
+    }
 
     .loader {
       --button-color: var(--mantine-color-gray-5);
@@ -30,9 +55,37 @@
   }
 
   &[data-variant='tertiary'] {
-    background-color: var(--mantine-color-tertiary-0);
+    background-color: var(--color-background-button-tertiary);
     color: var(--mantine-color-primary);
 
+    &:hover {
+      background-color: var(--color-background-button-tertiary-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      background-color: var(--color-background-button-tertiary);
+    }
+
+    .loader {
+      --button-color: var(--mantine-color-gray-5);
+    }
+  }
+
+  &[data-variant='ghost'] {
+    background-color: transparent;
+    color: var(--mantine-color-text-base-secondary-0);
+    box-shadow: none;
+
+    &:hover {
+      background-color: var(--color-background-button-ghost-hover);
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      background-color: transparent;
+    }
+
     .loader {
       --button-color: var(--mantine-color-gray-5);
     }
@@ -40,8 +93,12 @@
 
   &:disabled,
   &[data-disabled] {
-    background-color: var(--mantine-color-background-button-primary-disabled-0);
-    color: var(--mantine-color-text-base-quaternary-0);
+    color: var(--color-text-base-quaternary);
+  }
+
+  &:focus-visible {
+    border: rem(1px) solid var(--color-border-action-focus-light);
+    box-shadow: var(--shadow-focus-ring-light);
   }
 }
 

package/src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ import type { ExtendedButtonVariant } from './types'
 
 // ----------------------------------------------------------------------
 
-type ButtonProps = BaseButtonProps & { variant?: ExtendedButtonVariant }
+export type ButtonProps = BaseButtonProps & { variant?: ExtendedButtonVariant }
 
 export const Button = createPolymorphicComponent<'button', ButtonProps>(
   forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {

package/src/components/Button/constants.ts

@@ -1,11 +1,13 @@
 export const PRIMARY_BUTTON_VARIANT = 'primary' as const
 export const SECONDARY_BUTTON_VARIANT = 'secondary' as const
 export const TERTIARY_BUTTON_VARIANT = 'tertiary' as const
+export const GHOST_BUTTON_VARIANT = 'ghost' as const
 
 export const ButtonVariants = [
   PRIMARY_BUTTON_VARIANT,
   SECONDARY_BUTTON_VARIANT,
   TERTIARY_BUTTON_VARIANT,
+  GHOST_BUTTON_VARIANT,
 ]
 
 // ----------------------------------------------------------------------

package/src/components/Button/index.ts

@@ -1 +1 @@
-export { Button } from './Button'
+export * from './Button'

package/src/components/Card/Card.module.css

@@ -0,0 +1,16 @@
+.root:where([data-with-border]) {
+  position: relative;
+  border: none;
+}
+
+.root:where([data-with-border])::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: calc(0.0625rem * var(--mantine-scale)) solid #0a0f2914;
+  border-radius: inherit;
+}

package/src/components/Card/Card.ts

@@ -0,0 +1,5 @@
+import { Card as MantineCard } from '@mantine/core'
+import '@mantine/core/styles/Card.layer.css'
+import classNames from './Card.module.css'
+
+export const Card = MantineCard.withProps({ classNames })

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card } from './Card'

package/src/components/Inputs/Checkbox/Checkbox.module.css

@@ -9,7 +9,7 @@
 }
 
 :where([data-mantine-color-scheme='light']) .root:hover .input:not(:checked):not(:disabled) {
-  border-color: var(--mantine-color-border-action-hover-0);
+  border-color: var(--color-border-action-hover);
 }
 
 .inner {

package/src/components/Inputs/CvvInput/CvvInput.module.css

@@ -1,8 +1,6 @@
 @font-face {
-  font-family: 'Password';
-  src:
-    local('Password'),
-    url(../../../assets/fonts/password.woff2) format('woff2');
+  font-family: Password;
+  src: url(../../../assets/fonts/password.woff2) format('woff2');
   font-weight: 100;
 }
 

package/src/components/Inputs/Input/Input.module.css

@@ -1,39 +1,75 @@
+.root {
+  display: flex;
+  flex-flow: column;
+  gap: rem(8px);
+}
+
 .input {
+  --input-height: 2.5rem;
+
   border-radius: var(--mantine-radius-xl);
   border: 1px solid var(--mantine-color-border-action-normal-0);
   box-shadow: var(--mantine-shadow-xs);
   color: var(--mantine-color-text-base-primary-0);
 
-  --input-height: 2.5rem;
+  [data-position='left'] ~ & {
+    --input-padding-inline-start: 2.5rem;
+  }
 
-  &[data-error] {
-    border: 1px solid var(--mantine-color-border-action-destructive-0);
-    margin-bottom: -0.125px;
-    color: var(--mantine-color-text-status-destructive-0);
+  &:hover {
+    border-color: var(--color-border-action-hover);
   }
 
-  [data-position='left'] ~ & {
-    --input-padding-inline-start: 2.5rem;
+  &:focus-within {
+    border-color: var(--mantine-color-text-base-primary-0);
+  }
+
+  &[data-error] {
+    border: 1px solid var(--color-border-action-destructive);
+    color: var(--color-text-status-destructive);
+
+    &:hover {
+      border-color: var(--color-border-action-destructive-hover);
+    }
+
+    &:focus-within {
+      border-color: var(--color-border-action-focus-destructive-light);
+    }
   }
 }
 
+.wrapper {
+  margin-bottom: 0;
+}
+
 .section {
   --right-section-end: 0.75rem;
   --left-section-start: 0.25rem;
 }
 
-.label {
-  margin-bottom: 0.2rem;
-}
-
+.description,
 .error {
-  color: var(--mantine-color-text-status-destructive-0);
-  padding-left: 0.25rem;
+  padding-block: rem(2px);
+  font-size: var(--mantine-font-size-caption-l);
+  line-height: var(--mantine-line-height-caption-l);
+  letter-spacing: var(--mantine-spacing-caption-l);
 
   &::before {
-    content: url('../../../assets/error.svg');
-    position: relative;
-    top: 3px;
-    left: -0.25rem;
+    content: '';
+    display: inline-block;
+    width: rem(16px);
+    height: rem(16px);
+    background: currentColor;
+    mask: url('../../../assets/error.svg');
+    margin-right: rem(4px);
+    vertical-align: sub;
   }
 }
+
+.description {
+  color: var(--color-text-base-tertiary);
+}
+
+.error {
+  color: var(--color-text-status-destructive);
+}

package/src/components/Inputs/Input/Input.tsx

@@ -1,21 +1,10 @@
-import '@mantine/core/styles/Input.layer.css'
 import { TextInput } from '@mantine/core'
+import '@mantine/core/styles/Input.layer.css'
 import classNames from './Input.module.css'
-import textClassNames from '../../../styles/typography.module.css'
-import clsx from 'clsx'
-import { CAPTION_L_REGULAR_FONT_VARIANT } from '../../../constants/font-variants'
-
-// ----------------------------------------------------------------------
-
-const { input, error, ...restClassNames } = classNames
-
-const captionLRegular = textClassNames[CAPTION_L_REGULAR_FONT_VARIANT]
-
-const inputClassNames = clsx(input, captionLRegular)
-const errorClassNames = clsx(error, captionLRegular)
 
 // ----------------------------------------------------------------------
 
 export const Input = TextInput.withProps({
-  classNames: { ...restClassNames, input: inputClassNames, error: errorClassNames },
+  classNames,
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
 })

package/src/components/Inputs/PasswordInput/PasswordInput.tsx

@@ -1,27 +1,14 @@
 import { PasswordInput as PasswordInputBase } from '@mantine/core'
 import classNames from '../Input/Input.module.css'
 import sectionClassNames from './PasswordInput.module.css'
-import textClassNames from '../../../styles/typography.module.css'
-import clsx from 'clsx'
-import { CAPTION_L_REGULAR_FONT_VARIANT } from '../../../constants/font-variants'
-
-// ----------------------------------------------------------------------
-
-const { input, error, ...restClassNames } = classNames
-
-const captionLRegular = textClassNames[CAPTION_L_REGULAR_FONT_VARIANT]
-
-const inputClassNames = clsx(input, captionLRegular)
-const errorClassNames = clsx(error, captionLRegular)
 
 // ----------------------------------------------------------------------
 
 export const PasswordInput = PasswordInputBase.withProps({
   classNames: {
-    ...restClassNames,
-    input: inputClassNames,
-    error: errorClassNames,
+    ...classNames,
     section: sectionClassNames.section,
   },
   autoComplete: 'current-password',
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
 })

package/src/components/Inputs/Select/Select.ts

@@ -0,0 +1,9 @@
+import { Select as MantineSelect } from '@mantine/core'
+import classNames from '../Input/Input.module.css'
+
+// ----------------------------------------------------------------------
+
+export const Select = MantineSelect.withProps({
+  classNames,
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
+})

package/src/components/Inputs/Select/index.ts

@@ -0,0 +1 @@
+export { Select } from './Select'

package/src/components/Inputs/Switch/Switch.module.css

@@ -15,7 +15,7 @@
 }
 
 .error {
-  color: var(--mantine-color-text-status-destructive-0);
+  color: var(--color-text-status-destructive);
   padding-left: 0.25rem;
   margin-top: 0;
 

package/src/components/Inputs/Textarea/Textarea.ts

@@ -0,0 +1,9 @@
+import { Textarea as MantineTextarea } from '@mantine/core'
+import classNames from '../Input/Input.module.css'
+
+// ----------------------------------------------------------------------
+
+export const Textarea = MantineTextarea.withProps({
+  classNames,
+  inputWrapperOrder: ['label', 'input', 'error', 'description'],
+})

package/src/components/Inputs/Textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea } from './Textarea'

package/src/components/KvellUiProvider/KvellUiProvider.module.css

@@ -42,3 +42,34 @@
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
     U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+:root {
+  --color-background-accent-gray-accent: #717684;
+  --color-background-accent-gray-subtle: #e9eaec;
+  --color-background-accent-green-accent: #26bd6c;
+  --color-background-button-primary: #14151a;
+  --color-background-button-primary-hover: #1f2228;
+  --color-background-button-primary-disabled: #e9eaec;
+  --color-background-button-secondary: #ffffff;
+  --color-background-button-secondary-hover: #f7f7f8;
+  --color-background-button-secondary-disabled: #fff;
+  --color-background-button-tertiary: #0a0f290a;
+  --color-background-button-tertiary-hover: #0a0f2914;
+  --color-background-button-ghost-hover: #0a0f290a;
+  --color-border-action-normal: #dee0e3;
+  --color-border-action-hover: #c8cad0;
+  --color-border-action-disabled: #e9eaec;
+  --color-border-action-focus-light: #b78af0;
+  --color-border-action-destructive: #f7c3c0;
+  --color-border-action-destructive-hover: #f5b2ad;
+  --color-border-action-focus-destructive-light: #f08b85;
+  --color-text-accent-blue-accent: #4778f5;
+  --color-text-base-tertiary: #0d112666;
+  --color-text-base-quaternary: #0a0f2940;
+  --color-text-status-destructive: #e6483d;
+  --color-icon-base-secondary: #0f132499;
+  --color-icon-base-tertiary: #0d112666;
+  --color-icon-base-quaternary: #0a0f2940;
+  --color-icon-base-inverted: #ffffff;
+  --shadow-focus-ring-light: 0px 0px 0px 2px #c8b2ff80;
+}

package/src/components/Modal/Modal.module.css

@@ -32,7 +32,7 @@ button.close {
   right: 0.25rem;
   top: 0.4rem;
   display: flex;
-  background-color: var(--mantine-color-background-button-tertiary-0);
+  background-color: var(--color-background-button-tertiary);
   border-radius: 50%;
   --cb-size: 1.5rem;
 

package/src/constants/font-variants.ts

@@ -1,8 +1,10 @@
 //heading
 export const H5_MEDIUM_FONT_VARIANT = 'h5-medium' as const
+export const H5_SEMIBOLD_FONT_VARIANT = 'h5-semibold' as const
 export const H6_BOLD_FONT_VARIANT = 'h6-bold' as const
 
 //body
+export const BODY_M_REGULAR_FONT_VARIANT = 'body-m-regular' as const
 export const BODY_M_MEDIUM_FONT_VARIANT = 'body-m-medium' as const
 export const BODY_M_BOLD_FONT_VARIANT = 'body-m-bold' as const
 export const BODY_L_BOLD_FONT_VARIANT = 'body-l-bold' as const
@@ -20,9 +22,11 @@ export const CAPTION_M_REGULAR_FONT_VARIANT = 'caption-m-regular' as const
 export const FontVariants = [
   //heading
   H5_MEDIUM_FONT_VARIANT,
+  H5_SEMIBOLD_FONT_VARIANT,
   H6_BOLD_FONT_VARIANT,
   //body
   BODY_L_BOLD_FONT_VARIANT,
+  BODY_M_REGULAR_FONT_VARIANT,
   BODY_M_MEDIUM_FONT_VARIANT,
   BODY_M_BOLD_FONT_VARIANT,
   BODY_S_MEDIUM_FONT_VARIANT,

package/src/index.ts

@@ -9,18 +9,22 @@ export { PasswordInput } from './components/Inputs/PasswordInput'
 export { CvvInput } from './components/Inputs/CvvInput'
 export { Checkbox } from './components/Inputs/Checkbox'
 export { Switch } from './components/Inputs/Switch'
+export { Select } from './components/Inputs/Select'
+export { Textarea } from './components/Inputs/Textarea'
 
 //providers
 export { KvellUiProvider } from './components/KvellUiProvider'
 
 //components
-export { Button } from './components/Button'
+export * from './components/Button'
 export { CardLogoByPan } from './components/CardLogoByPan'
 export { Loader } from './components/Loader'
 export { Modal } from './components/Modal'
 export { Text } from './components/Text'
 export { Badge } from './components/Badge'
 export { Carousel } from './components/Carousel'
+export { Card } from './components/Card'
+export * from './components/ActionIcon'
 
 // core-components ------------------------------------------------------
 

package/src/styles/typography.module.css

@@ -6,6 +6,14 @@
   letter-spacing: var(--mantine-spacing-h5);
 }
 
+.h5-semibold {
+  font-family: var(--mantine-font-family);
+  font-weight: 600;
+  font-size: var(--mantine-font-size-h5);
+  line-height: var(--mantine-line-height-h5);
+  letter-spacing: var(--mantine-spacing-h5);
+}
+
 /* heading */
 .h6-bold {
   font-family: var(--mantine-font-family);
@@ -16,6 +24,14 @@
 }
 
 /* body */
+.body-l-medium {
+  font-family: var(--mantine-font-family);
+  font-weight: 500;
+  font-size: var(--mantine-font-size-body-l);
+  line-height: var(--mantine-line-height-body-l);
+  letter-spacing: var(--mantine-spacing-body-l);
+}
+
 .body-l-bold {
   font-family: var(--mantine-font-family);
   font-weight: 700;
@@ -24,6 +40,14 @@
   letter-spacing: var(--mantine-spacing-body-l);
 }
 
+.body-m-regular {
+  font-family: var(--mantine-font-family);
+  font-weight: 400;
+  font-size: var(--mantine-font-size-body-m);
+  line-height: var(--mantine-line-height-body-m);
+  letter-spacing: var(--mantine-spacing-body-m);
+}
+
 .body-m-bold {
   font-family: var(--mantine-font-family);
   font-weight: 700;

package/src/theme/index.ts

@@ -19,17 +19,13 @@ export const theme: MantineThemeOverride = {
     //borders
     'border-action-normal': colorsTuple('#dee0e3'),
     'border-action-destructive': colorsTuple('#f7c3c0'),
-    'border-action-hover': colorsTuple('#C8CAD0'),
     'border-base-alpha': colorsTuple('#0a0f2914'),
     'border-base-surface': colorsTuple('#ffffff'),
 
-    //buttons
-    'background-button-tertiary': colorsTuple('#0a0f290a'),
-    'background-button-primary-disabled': colorsTuple('#e9eaec'),
-
     //icons
     'icon-base-secondary': colorsTuple('#0f132499'),
     'icon-base-tertiary': colorsTuple('#0D112666'),
+    'icon-base-quaternary': colorsTuple('#0A0F2940'),
     'icon-status-success': colorsTuple('#26BD6C'),
     // icon/base/secondary
 
@@ -37,8 +33,6 @@ export const theme: MantineThemeOverride = {
     'text-base-primary': colorsTuple('#14151a'),
     'text-base-secondary': colorsTuple('#0f132499'),
     'text-base-tertiary': colorsTuple('#0d112666'),
-    'text-base-quaternary': colorsTuple('#0a0f2940'),
-    'text-status-destructive': colorsTuple('#e6483d'),
     'text-accent-blue-accent': colorsTuple('#4778F5'),
 
     //toggle