@app-studio/web 0.1.0 → 0.1.1

package/dist/components/Button/Button/Button.props.d.ts

@@ -49,7 +49,7 @@ export interface ButtonProps {
     /**
      * The event handler called when the button is clicked or pressed.
      */
-    onPress?: Function;
+    onClick?: Function;
     /**
      * Specifies the size of the button's text and padding.
      */

package/dist/components/Form/TextField/TextField/TextField.props.d.ts

@@ -70,7 +70,7 @@ export interface TextFieldProps {
     /**
      * Event called when the input field is clicked/pressed.
      */
-    onPress?: () => void;
+    onClick?: () => void;
     /**
      * Callback function called when the text input receives focus.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -141,13 +141,13 @@
   },
   "size-limit": [
     {
-      "path": "dist/app-studio-web.esm.cjs.production.min.js",
+      "path": "dist/web.esm.cjs.production.min.js",
       "limit": "10 KB"
     },
     {
-      "path": "dist/app-studio-web.esm.esm.js",
+      "path": "dist/web.esm.esm.js",
       "limit": "10 KB"
     }
   ],
-  "module": "dist/app-studio-web.esm.js"
+  "module": "dist/web.esm.js"
 }

package/src/components/Button/Button/Button.props.ts

@@ -51,7 +51,7 @@ export interface ButtonProps {
   /**
    * The event handler called when the button is clicked or pressed.
    */
-  onPress?: Function;
+  onClick?: Function;
   /**
    * Specifies the size of the button's text and padding.
    */

package/src/components/Button/Button/Button.view.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { Element, useTheme } from 'app-studio';
+import { Element } from 'app-studio';
 import { Link } from 'src/components';
 
 import { ButtonProps } from './Button.props';
@@ -22,11 +22,10 @@ const ButtonView: React.FC<ButtonProps> = ({
   iconPosition = 'left',
   colorScheme = 'theme.primary',
   shape = 'rounded',
-  onPress = () => {},
+  onClick = () => {},
   ...props
 }) => {
   const isActive = !(isDisabled || isLoading);
-  const {getColor} = useTheme()
 
   const defaultNativeProps = { disabled: !isActive };
 
@@ -77,8 +76,6 @@ const ButtonView: React.FC<ButtonProps> = ({
     </>
   );
 
-  console.log({buttonColor, r: getColor(buttonColor)})
-
   return (
     <Element
       gap={8}
@@ -92,7 +89,7 @@ const ButtonView: React.FC<ButtonProps> = ({
       ariaLabel={ariaLabel}
       backgroundColor={buttonColor}
       borderRadius={ButtonShapes[shape]}
-      onPress={props.onClick ?? onPress}
+      onClick={props.onClick ?? onClick}
       cursor={isActive ? 'pointer' : 'default'}
       {...defaultNativeProps} // set default native html button properties
       {...buttonSizeStyles} // set default width, paddings and fonts

package/src/components/Button/examples/DefaultButton.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Button } from 'src/components';
 
-export const DefaultButton = () => <Button onPress={() => alert('Hello, World!')}>Default</Button>;
+export const DefaultButton = () => <Button onClick={() => alert('Hello, World!')}>Default</Button>;

package/src/components/Button/examples/DisabledButton.tsx

@@ -3,7 +3,7 @@ import { Button } from 'src/components';
 
 export const DisabledButton = () => (
   <Button
-    onPress={() => {
+    onClick={() => {
       alert('Disabled');
     }}
     isDisabled

package/src/components/Button/examples/LoadingButtons.tsx

@@ -20,7 +20,11 @@ export const LoadingButtons = () => (
       </Loading>
     </Button>
     <Button isLoading isFilled>
-      <Loading type="quarter" textPosition="right" styles={{ loader: { color: 'color.black' }, text: { color: 'color.black' } }}>
+      <Loading
+        type="quarter"
+        textPosition="right"
+        styles={{ loader: { color: 'color.black' }, text: { color: 'color.black' } }}
+      >
         Submitting
       </Loading>
     </Button>

package/src/components/Form/Checkbox/Checkbox/Checkbox.view.tsx

@@ -75,8 +75,8 @@ const CheckboxView: React.FC<CheckboxViewProps> = ({
   return (
     <Label
       htmlFor={id}
-      as="checkbox"
-      onPress={handleChange}
+      as="div"
+      onClick={handleChange}
       onMouseEnter={handleHover}
       onMouseLeave={handleHover}
       size={Typography.fontSizes[size]}

package/src/components/Form/Checkbox/examples/FormCheckout.tsx

@@ -37,7 +37,7 @@ export const FormCheckbox = () => {
           isChecked={isCarrotChecked}
           onChange={setIsCarrotChecked}
         />
-        <Button type="submit" onPress={handleSubmit}>
+        <Button type="submit" onClick={handleSubmit}>
           Submit
         </Button>
       </Vertical>

package/src/components/Form/CountryPicker/CountryPicker/CountryPicker.view.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Element,Input,Typography,useTheme } from 'app-studio';
+import { Element, Input, Typography, useTheme } from 'app-studio';
 import { FieldContainer, FieldContent, FieldIcons, FieldLabel, FieldWrapper } from 'src/components/Layout/Input';
 import { ArrowDownSvg } from 'src/components/Svg/ArrowDown';
 import { ArrowUpSvg } from 'src/components/Svg/ArrowUp';
@@ -38,7 +38,7 @@ export const DropDownItem: React.FC<DropDownItemProps> = ({
       paddingHorizontal={12}
       onMouseEnter={handleHover}
       onMouseLeave={handleHover}
-      onPress={handleOptionClick}
+      onClick={handleOptionClick}
       fontSize={Typography.fontSizes[size]}
       backgroundColor={isHovered ? 'trueGray.100' : 'transparent'}
       {...styles['text']}
@@ -177,7 +177,7 @@ const CountryPickerView: React.FC<CountryPickerViewProps> = ({
   };
 
   return (
-    <FieldContainer helperText={helperText} error={error} styles={styles} onPress={handleClick}>
+    <FieldContainer helperText={helperText} error={error} styles={styles} onClick={handleClick}>
       <FieldContent
         label={label}
         size={size}

package/src/components/Form/CountryPicker/examples/StylesInput.tsx

@@ -7,9 +7,7 @@ export const StyledCountryPicker = () => (
     name="colorScheme"
     colorScheme="theme.primary"
     styles={{
-      box: { borderRadius: 10,  borderColor: 'theme.primary',
-      borderStyle: 'solid',
-      borderWidth: 1, },
+      box: { borderRadius: 10, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
       text: { color: 'theme.primary' },
       label: { fontWeight: 'bold', color: 'theme.primary' },
       dropDown: { color: 'theme.primary' },

package/src/components/Form/DatePicker/DatePicker/DatePicker.view.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input,Typography } from 'app-studio';
+import { Input, Typography } from 'app-studio';
 import { FieldContainer } from 'src/components/Layout/Input/FieldContainer/FieldContainer';
 import { FieldContent } from 'src/components/Layout/Input/FieldContent/FieldContent';
 import { FieldLabel } from 'src/components/Layout/Input/FieldLabel/FieldLabel';

package/src/components/Form/Label/Label/Label.style.ts

@@ -1,4 +1,3 @@
-
 import { Headings } from './Label.type';
 
 export const HeadingSizes: Record<Headings, Record<string, number | string>> = {

package/src/components/Form/Label/Label/Label.view.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Element,Typography } from 'app-studio';
+import { Element, Typography } from 'app-studio';
 
 import { LabelProps } from './Label.props';
 import { HeadingSizes } from './Label.style';

package/src/components/Form/Password/Password/Password.view.tsx

@@ -17,7 +17,7 @@ const PasswordView: React.FC<PasswordViewProps> = ({
     type={isVisible ? 'text' : 'password'}
     rightChild={
       <View
-        onPress={() => {
+        onClick={() => {
           if (!isDisabled) setIsVisible(!isVisible);
         }}
       >

package/src/components/Form/Password/example/FormikErrorInput.tsx

@@ -39,7 +39,13 @@ export const FormikErrorPassword = () => {
       {({ errors, touched, isSubmitting }) => (
         <Form>
           <Vertical gap={10}>
-            <Field as={TextField} name="name" label="Name" error={touched.name && errors.name} colorScheme="theme.secondary" />
+            <Field
+              as={TextField}
+              name="name"
+              label="Name"
+              error={touched.name && errors.name}
+              colorScheme="theme.secondary"
+            />
             <Field
               as={Password}
               name="password"

package/src/components/Form/Select/Select/Select.view.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Element } from 'app-studio';
-import {Typography} from 'app-studio';
+import { Typography } from 'app-studio';
 import { Horizontal, Text } from 'src/components';
 import { FieldContainer } from 'src/components/Layout/Input/FieldContainer/FieldContainer';
 import { FieldContent } from 'src/components/Layout/Input/FieldContent/FieldContent';
@@ -34,7 +34,7 @@ const Item: React.FC<ItemProps> = ({ isHovered, setIsHovered, option, size = 'md
       onMouseEnter={handleHover}
       onMouseLeave={handleHover}
       fontSize={Typography.fontSizes[size]}
-      onPress={() => handleOptionClick(option)}
+      onClick={() => handleOptionClick(option)}
       backgroundColor={isHovered ? 'trueGray.100' : 'transparent'}
       {...props}
     >
@@ -177,12 +177,7 @@ const DropDown: React.FC<DropDownProps> = ({ size, styles = { dropDown: {} }, op
   );
 };
 
-export const MultiSelect: React.FC<MultiSelectProps> = ({
-  option,
-  size = 'md',
-  removeOption = () => {},
-  ...props
-}) => {
+export const MultiSelect: React.FC<MultiSelectProps> = ({ option, size = 'md', removeOption = () => {}, ...props }) => {
   const handleClick = () => removeOption(option);
 
   return (
@@ -193,7 +188,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
       alignItems="center"
       fontSize={Typography.fontSizes[size]}
       backgroundColor="trueGray.300"
-      onPress={(event: any) => event.stopPropagation()}
+      onClick={(event: any) => event.stopPropagation()}
       {...props}
     >
       <Text size={size}>{option}</Text>
@@ -274,7 +269,7 @@ const SelectView: React.FC<SelectViewProps> = ({
       helperText={helperText}
       error={error}
       styles={styles}
-      onPress={isDisabled || isReadOnly ? () => {} : handleClick}
+      onClick={isDisabled || isReadOnly ? () => {} : handleClick}
     >
       <FieldContent
         label={label}

package/src/components/Form/Switch/examples/StylesInput.tsx

@@ -19,9 +19,7 @@ export const StyledSwitch = () => {
           variant="unStyled"
           shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
           styles={{
-            slider: { borderRadius: 8,  borderColor: 'theme.primary',
-            borderStyle: 'solid',
-            borderWidth: 1, },
+            slider: { borderRadius: 8, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
             circle: { backgroundColor: 'theme.primary' },
           }}
         />

package/src/components/Form/TextArea/TextArea/TextArea.view.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Element,Typography } from 'app-studio';
+import { Element, Typography } from 'app-studio';
 import { FieldContainer, FieldContent, FieldLabel, FieldWrapper } from 'src/components/Layout/Input';
 
 import { TextAreaViewProps } from './TextArea.props';

package/src/components/Form/TextArea/examples/StylesInput.tsx

@@ -18,9 +18,7 @@ export const StyledArea = () => {
           label="Surname"
           variant="unStyled"
           styles={{
-            box: { borderRadius: 8, padding: 5,  borderColor: 'theme.primary',
-            borderStyle: 'solid',
-            borderWidth: 1, },
+            box: { borderRadius: 8, padding: 5, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
             field: { color: 'theme.primary', padding: 0 },
             label: { color: 'theme.primary' },
           }}

package/src/components/Form/TextField/TextField/TextField.props.ts

@@ -72,7 +72,7 @@ export interface TextFieldProps {
   /**
    * Event called when the input field is clicked/pressed.
    */
-  onPress?: () => void;
+  onClick?: () => void;
   /**
    * Callback function called when the text input receives focus.
    */

package/src/components/Form/TextField/TextField/TextField.view.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Input,Typography,useTheme } from 'app-studio';
+import { Input, Typography, useTheme } from 'app-studio';
 import { FieldContainer } from 'src/components/Layout/Input/FieldContainer/FieldContainer';
 import { FieldContent } from 'src/components/Layout/Input/FieldContent/FieldContent';
 import { FieldIcons } from 'src/components/Layout/Input/FieldIcons/FieldIcons';
@@ -41,7 +41,7 @@ const TextFieldView: React.FC<TextFieldViewProps> = ({
   setIsFocused = () => {},
   setIsHovered = () => {},
   setInputValue = () => {},
-  onPress = () => {},
+  onClick = () => {},
   onFocus,
   onBlur = () => {},
   ...props

package/src/components/Form/TextField/examples/StylesInput.tsx

@@ -19,9 +19,7 @@ export const StyledInput = () => {
           variant="unStyled"
           shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
           styles={{
-            box: { borderRadius: 8,  borderColor: 'theme.primary',
-            borderStyle: 'solid',
-            borderWidth: 1, },
+            box: { borderRadius: 8, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
             text: { color: 'theme.primary' },
             label: { color: 'theme.primary' },
           }}

package/src/components/Layout/Input/FieldContent/FieldContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Typography} from 'app-studio';
+import { Typography } from 'app-studio';
 
 import { InputVariants, PadddingWithLabel, PaddingWithoutLabel, Shapes } from '../../configs/Input.style';
 import { Horizontal } from '../../Horizontal/Horizontal';

package/src/components/Layout/Input/FieldLayout/FieldLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Typography} from 'app-studio';
+import { Typography } from 'app-studio';
 
 import { Vertical } from '../../Vertical/Vertical';
 

package/src/components/Layout/View/View.tsx

@@ -1,2 +1,2 @@
 export type { ViewProps } from 'app-studio';
-export {  View } from 'app-studio';
+export { View } from 'app-studio';

package/src/components/Modal/Examples/BlurModal.tsx

@@ -8,7 +8,7 @@ export const BlurModal = () => {
   const [show, setShow] = useState(false);
   return (
     <>
-      <Button onPress={() => setShow(true)} isAuto>
+      <Button onClick={() => setShow(true)} isAuto>
         Blur Overlay
       </Button>
 
@@ -28,7 +28,7 @@ export const BlurModal = () => {
               </Text>
             </Modal.Body>
             <Modal.Footer>
-              <Button onPress={() => setShow(false)}>Cancel</Button>
+              <Button onClick={() => setShow(false)}>Cancel</Button>
             </Modal.Footer>
           </Modal.Container>
         </Modal.Overlay>

package/src/components/Modal/Examples/CloseButtonModal.tsx

@@ -10,10 +10,10 @@ export const CloseButtonModal = () => {
   return (
     <>
       <Horizontal gap={10}>
-        <Button onPress={() => setShowWith(true)} isAuto>
+        <Button onClick={() => setShowWith(true)} isAuto>
           With Close Button
         </Button>
-        <Button onPress={() => setShowWithout(true)} isAuto>
+        <Button onClick={() => setShowWithout(true)} isAuto>
           Without Close Button
         </Button>
       </Horizontal>
@@ -23,7 +23,7 @@ export const CloseButtonModal = () => {
             <Modal.Header buttonPosition="left" />
             <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
             <Modal.Footer>
-              <Button onPress={() => setShowWith(false)}>Cancel</Button>
+              <Button onClick={() => setShowWith(false)}>Cancel</Button>
             </Modal.Footer>
           </Modal.Container>
         </Modal.Overlay>
@@ -34,7 +34,7 @@ export const CloseButtonModal = () => {
             <Modal.Header buttonPosition="none">Without Close Button</Modal.Header>
             <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
             <Modal.Footer>
-              <Button onPress={() => setShowWithout(false)}>Cancel</Button>
+              <Button onClick={() => setShowWithout(false)}>Cancel</Button>
             </Modal.Footer>
           </Modal.Container>
         </Modal.Overlay>

package/src/components/Modal/Examples/DefaultModal.tsx

@@ -8,7 +8,7 @@ export const DefaultModal = () => {
 
   return (
     <>
-      <Button onPress={() => setShow(true)} isAuto>
+      <Button onClick={() => setShow(true)} isAuto>
         Blur Overlay
       </Button>
 
@@ -28,7 +28,7 @@ export const DefaultModal = () => {
               </Text>
             </Modal.Body>
             <Modal.Footer>
-              <Button onPress={() => setShow(false)}>Cancel</Button>
+              <Button onClick={() => setShow(false)}>Cancel</Button>
             </Modal.Footer>
           </Modal.Container>
         </Modal.Overlay>

package/src/components/Modal/Examples/FullScreenModal.tsx

@@ -7,7 +7,7 @@ export const FullScreenModal = () => {
   const [show, setShow] = useState(false);
   return (
     <>
-      <Button onPress={() => setShow(true)} isAuto>
+      <Button onClick={() => setShow(true)} isAuto>
         Full Screen
       </Button>
       <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
@@ -19,7 +19,7 @@ export const FullScreenModal = () => {
             scelerisque nisl consectetur et.
           </Modal.Body>
           <Modal.Footer>
-            <Button onPress={() => setShow(false)}>Cancel</Button>
+            <Button onClick={() => setShow(false)}>Cancel</Button>
           </Modal.Footer>
         </Modal.Container>
       </Modal.Overlay>

package/src/components/Modal/Examples/ModalPosition.tsx

@@ -23,11 +23,11 @@ export const ModalPosition = () => {
   return (
     <>
       <Horizontal gap={10} wrap="nowrap">
-        <Button onPress={() => setShowTop(true)}>Top</Button>
-        <Button onPress={() => setShowBottom(true)}>Bottom</Button>
-        <Button onPress={() => setShowRight(true)}>Right</Button>
-        <Button onPress={() => setShowLeft(true)}>Left</Button>
-        <Button onPress={() => setShowCenter(true)}>Center</Button>
+        <Button onClick={() => setShowTop(true)}>Top</Button>
+        <Button onClick={() => setShowBottom(true)}>Bottom</Button>
+        <Button onClick={() => setShowRight(true)}>Right</Button>
+        <Button onClick={() => setShowLeft(true)}>Left</Button>
+        <Button onClick={() => setShowCenter(true)}>Center</Button>
       </Horizontal>
 
       {showTop && (

package/src/components/Modal/Examples/PreventCloseModal.tsx

@@ -7,7 +7,7 @@ export const PreventClose = () => {
   const [prevent, setPrevent] = useState(false);
   return (
     <>
-      <Button onPress={() => setPrevent(true)} isAuto>
+      <Button onClick={() => setPrevent(true)} isAuto>
         Prevent Close Button on Overlay
       </Button>
 
@@ -17,7 +17,7 @@ export const PreventClose = () => {
             <Modal.Header> Prevent Close Button on Overlay</Modal.Header>
             <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
             <Modal.Footer>
-              <Button onPress={() => setPrevent(false)}>Cancel</Button>
+              <Button onClick={() => setPrevent(false)}>Cancel</Button>
             </Modal.Footer>
           </Modal.Container>
         </Modal.Overlay>

package/src/components/Modal/Examples/ScrollModal.tsx

@@ -7,7 +7,7 @@ export const ScrollModal = () => {
   const [show, setShow] = useState(false);
   return (
     <>
-      <Button onPress={() => setShow(true)} isAuto>
+      <Button onClick={() => setShow(true)} isAuto>
         Scroll
       </Button>
       {show && (
@@ -31,7 +31,7 @@ export const ScrollModal = () => {
               fermentum.
             </Modal.Body>
             <Modal.Footer>
-              <Button onPress={() => setShow(false)}>Cancel</Button>
+              <Button onClick={() => setShow(false)}>Cancel</Button>
             </Modal.Footer>
           </Modal.Container>
         </Modal.Overlay>

package/src/components/Modal/Examples/ShadowModal.tsx

@@ -7,7 +7,7 @@ export const ShadowModal = () => {
   const [show, setShow] = useState(false);
   return (
     <>
-      <Button onPress={() => setShow(true)} isAuto>
+      <Button onClick={() => setShow(true)} isAuto>
         Shadow
       </Button>
 

package/src/components/Modal/Examples/VariantModal.tsx

@@ -9,10 +9,10 @@ export const VariantModal = () => {
   return (
     <>
       <Horizontal gap={10}>
-        <Button onPress={() => setShowSharp(true)} isAuto>
+        <Button onClick={() => setShowSharp(true)} isAuto>
           Sharp
         </Button>
-        <Button onPress={() => setShowRounded(true)} isAuto>
+        <Button onClick={() => setShowRounded(true)} isAuto>
           Rounded
         </Button>
       </Horizontal>

package/src/components/Modal/Modal/Modal.view.tsx

@@ -41,7 +41,7 @@ export const ModalOverlay: React.FC<OverlayProps> = ({
       width="100%"
       height="100%"
       zIndex={1000}
-      onPress={handleClick}
+      onClick={handleClick}
       visibility={isOpen ? 'visible' : 'hidden'}
     >
       <View
@@ -55,7 +55,7 @@ export const ModalOverlay: React.FC<OverlayProps> = ({
         display="flex"
         backgroundColor="blackAlpha.500"
         backdropFilter={blur ? `blur(${blur}px)` : undefined}
-        onPress={handleClick}
+        onClick={handleClick}
         {...OverlayAlignments[position]}
         {...props}
       >
@@ -93,7 +93,7 @@ export const ModalContainer: React.FC<ContainerProps> = ({
       backgroundColor="white"
       width={isFullScreen ? '100%' : 600}
       height={isFullScreen ? '100%' : 'fit-content'}
-      onPress={handleClick}
+      onClick={handleClick}
       {...(shadow ? shadow : defaultShadow)}
       {...ContainerShapes[shape]}
       {...props}
@@ -114,7 +114,7 @@ export const ModalHeader: React.FC<HeaderProps> = ({
 
   const buttonIcon = (
     <Button
-      onPress={onClose}
+      onClick={onClose}
       colorScheme="transparent"
       icon={<CloseSvg size={HeaderIconSizes[iconSize]} color={buttonColor} />}
       padding={0}

package/src/components/Modal/Modal.md

@@ -15,7 +15,7 @@ import { useState } from 'react';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)} isAuto>
+  <Button onClick={() => setShow(true)} isAuto>
     Open Modal
   </Button>
   <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
@@ -27,7 +27,7 @@ const [show, setShow] = useState(false);
         nisl consectetur et.
       </Modal.Body>
       <Modal.Footer>
-        <Button onPress={() => setShow(false)}>Cancel</Button>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
       </Modal.Footer>
     </Modal.Container>
   </Modal.Overlay>
@@ -49,7 +49,7 @@ import { useState } from 'react';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)} isAuto>
+  <Button onClick={() => setShow(true)} isAuto>
     Full Screen
   </Button>
   <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
@@ -61,7 +61,7 @@ const [show, setShow] = useState(false);
         nisl consectetur et.
       </Modal.Body>
       <Modal.Footer>
-        <Button onPress={() => setShow(false)}>Cancel</Button>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
       </Modal.Footer>
     </Modal.Container>
   </Modal.Overlay>
@@ -85,11 +85,11 @@ const [showCenter, setShowCenter] = useState(false);
 
 <>
   <Horizontal gap={10} wrap="nowrap">
-    <Button onPress={() => setShowTop(true)}>Top</Button>
-    <Button onPress={() => setShowBottom(true)}>Bottom</Button>
-    <Button onPress={() => setShowRight(true)}>Right</Button>
-    <Button onPress={() => setShowLeft(true)}>Left</Button>
-    <Button onPress={() => setShowCenter(true)}>Center</Button>
+    <Button onClick={() => setShowTop(true)}>Top</Button>
+    <Button onClick={() => setShowBottom(true)}>Bottom</Button>
+    <Button onClick={() => setShowRight(true)}>Right</Button>
+    <Button onClick={() => setShowLeft(true)}>Left</Button>
+    <Button onClick={() => setShowCenter(true)}>Center</Button>
   </Horizontal>
 
   {showBottom && (
@@ -102,7 +102,7 @@ const [showCenter, setShowCenter] = useState(false);
           nisl consectetur et.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowBottom(false)}>Cancel</Button>
+          <Button onClick={() => setShowBottom(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -117,7 +117,7 @@ const [showCenter, setShowCenter] = useState(false);
           nisl consectetur et.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowTop(false)}>Cancel</Button>
+          <Button onClick={() => setShowTop(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -132,7 +132,7 @@ const [showCenter, setShowCenter] = useState(false);
           nisl consectetur et.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowLeft(false)}>Cancel</Button>
+          <Button onClick={() => setShowLeft(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -147,7 +147,7 @@ const [showCenter, setShowCenter] = useState(false);
           nisl consectetur et.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowRight(false)}>Cancel</Button>
+          <Button onClick={() => setShowRight(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -162,7 +162,7 @@ const [showCenter, setShowCenter] = useState(false);
           nisl consectetur et.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowCenter(false)}>Cancel</Button>
+          <Button onClick={() => setShowCenter(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -181,7 +181,7 @@ import { Button } from '../Button/Button';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)}>Blur Overlay</Button>
+  <Button onClick={() => setShow(true)}>Blur Overlay</Button>
   <Modal.Overlay isOpen={show} onClose={() => setShow(false)} blur={10}>
     <Modal.Container>
       <Modal.Header>Title</Modal.Header>
@@ -191,7 +191,7 @@ const [show, setShow] = useState(false);
         nisl consectetur et.
       </Modal.Body>
       <Modal.Footer>
-        <Button onPress={() => setShow(false)}>Cancel</Button>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
       </Modal.Footer>
     </Modal.Container>
   </Modal.Overlay>
@@ -209,7 +209,7 @@ import { Button } from '../Button/Button';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)} isAuto>
+  <Button onClick={() => setShow(true)} isAuto>
     Prevent Close on Overlay
   </Button>
   <Modal.Overlay isOpen={show} onClose={() => setShow(false)} isClosePrevented>
@@ -221,7 +221,7 @@ const [show, setShow] = useState(false);
         nisl consectetur et.
       </Modal.Body>
       <Modal.Footer>
-        <Button onPress={() => setShow(false)}>Cancel</Button>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
       </Modal.Footer>
     </Modal.Container>
   </Modal.Overlay>
@@ -247,8 +247,8 @@ const [showRounded, setShowRounded] = useState(false);
 
 <>
   <Horizontal gap={10}>
-    <Button onPress={() => setShowSharp(true)}>Sharp</Button>
-    <Button onPress={() => setShowRounded(true)}>Rounded</Button>
+    <Button onClick={() => setShowSharp(true)}>Sharp</Button>
+    <Button onClick={() => setShowRounded(true)}>Rounded</Button>
   </Horizontal>
 
   {showSharp && (
@@ -292,7 +292,7 @@ import { Text } from '../Text/Text';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)}>Shadow</Button>
+  <Button onClick={() => setShow(true)}>Shadow</Button>
 
   {show && (
     <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
@@ -329,13 +329,13 @@ const [showLeft, setShowLeft] = useState(false);
 
 <>
   <Horizontal gap={10}>
-    <Button onPress={() => setShowRight(true)} isAuto>
+    <Button onClick={() => setShowRight(true)} isAuto>
       Close button on the right
     </Button>
-    <Button onPress={() => setShowWithout(true)} isAuto>
+    <Button onClick={() => setShowWithout(true)} isAuto>
       Without Close Button
     </Button>
-    <Button onPress={() => setShowLeft(true)} isAuto>
+    <Button onClick={() => setShowLeft(true)} isAuto>
       Without Close left
     </Button>
   </Horizontal>
@@ -345,7 +345,7 @@ const [showLeft, setShowLeft] = useState(false);
         <Modal.Header> Close Button</Modal.Header>
         <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowRight(false)}>Cancel</Button>
+          <Button onClick={() => setShowRight(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -356,7 +356,7 @@ const [showLeft, setShowLeft] = useState(false);
         <Modal.Header buttonPosition="none"> Close Button</Modal.Header>
         <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowWithout(false)}>Cancel</Button>
+          <Button onClick={() => setShowWithout(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -367,7 +367,7 @@ const [showLeft, setShowLeft] = useState(false);
         <Modal.Header buttonPosition="left">Close Button</Modal.Header>
         <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShowLeft(false)}>Cancel</Button>
+          <Button onClick={() => setShowLeft(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -391,7 +391,7 @@ import { Text } from '../Text/Text';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)}>Scroll</Button>
+  <Button onClick={() => setShow(true)}>Scroll</Button>
   {show && (
     <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
       <Modal.Container>
@@ -412,7 +412,7 @@ const [show, setShow] = useState(false);
           fermentum.Cras mattis consectetur purus sit amet fermentum.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShow(false)}>Cancel</Button>
+          <Button onClick={() => setShow(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>
@@ -432,7 +432,7 @@ import { Text } from '../Text/Text';
 const [show, setShow] = useState(false);
 
 <>
-  <Button onPress={() => setShow(true)}>Footer</Button>
+  <Button onClick={() => setShow(true)}>Footer</Button>
   {show && (
     <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
       <Modal.Container>
@@ -447,7 +447,7 @@ const [show, setShow] = useState(false);
           purus sit amet fermentum.
         </Modal.Body>
         <Modal.Footer>
-          <Button onPress={() => setShow(false)}>Cancel</Button>
+          <Button onClick={() => setShow(false)}>Cancel</Button>
         </Modal.Footer>
       </Modal.Container>
     </Modal.Overlay>

package/src/components/Text/Text/Text.view.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Element,Typography } from 'app-studio';
+import { Element, Typography } from 'app-studio';
 
 import { ContentProps, TextProps, TruncateTextProps } from './Text.props';
 import { HeadingSizes } from './Text.style';

package/src/components/Wrapper.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ResponsiveProvider,ThemeProvider } from 'app-studio';
+import { ResponsiveProvider, ThemeProvider } from 'app-studio';
 import { RouterProvider } from 'src/providers/Router';
 
 interface WrapperProps {

package/src/components/index.tsx

@@ -15,4 +15,4 @@ export * from 'src/components/Layout/View/View';
 export * from 'src/components/Link/Link';
 export * from 'src/components/Loader/Loader';
 export * from 'src/components/Modal/Modal';
-export * from 'src/components/Text/Text';
+export * from 'src/components/Text/Text';