odaptos_design_system 1.2.8 → 1.3.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.8",
+  "version": "1.3.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,11 +15,11 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
+    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "storybook": "storybook dev -p 8080",
-    "build-storybook": "storybook build",
-    "deploy:dev": "sh deploy.sh dev"
+    "storybook": "storybook dev",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -54,15 +54,13 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-essentials": "^7.0.8",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/cli": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
-    "@types/css-modules": "^1.0.4",
+    "@storybook/addon-links": "^7.0.10",
+    "@storybook/addons": "^7.0.8",
+    "@storybook/cli": "^7.0.8",
+    "@storybook/react": "^7.0.8",
+    "@storybook/react-webpack5": "^7.0.9",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "babel-loader": "^9.1.2",
@@ -70,30 +68,28 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "resolve-url-loader": "^5.0.0",
     "size-limit": "^8.2.4",
-    "storybook": "^7.5.3",
-    "storybook-addon-grid-overlay": "^0.0.7",
+    "storybook": "^7.0.8",
     "storybook-design-token": "^3.0.0-beta.3",
+    "tsdx": "^0.14.1",
     "tslib": "^2.5.0",
-    "typescript": "^5.2.2",
-    "typescript-plugin-css-modules": "^5.0.2"
+    "typescript": "^3.9.10"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
-    "@mui/material": "^5.14.15",
-    "@storybook/addon-interactions": "^7.5.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.18",
+    "@storybook/addon-interactions": "^7.0.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@types/typescript": "^2.0.0",
     "autoprefixer": "^10.4.16",
     "css-loader": "^6.7.3",
     "cssnano": "^6.0.1",
     "eslint-plugin-mdx": "^2.1.0",
+    "resolve-url-loader": "^5.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.62.1",
     "sass-loader": "^13.2.2",
     "storybook-css-modules-preset": "^1.1.1",
-    "style-loader": "^3.3.2",
-    "tsdx": "^0.14.1"
+    "style-loader": "^3.3.2"
   }
 }

package/src/Accordion/Accordion.tsx

@@ -45,7 +45,11 @@ export const Accordion = ({
           }
         />
       </div>
-      {isAccordionOpen && <div>{children}</div>}
+      {isAccordionOpen && (
+        <div>
+          {children}
+        </div>
+      )}
     </div>
   );
 };

package/src/Badge/Badge.tsx

@@ -6,8 +6,8 @@ interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
   text: string;
   status: 'idle' | 'success' | 'info' | 'warning' | 'critical';
   size: 'sm' | 'base' | 'lg';
-  iconLeft: JSX.Element;
-  iconRight: JSX.Element;
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
   className?: string;
 }
 

package/src/Cards/Card.tsx

@@ -1,14 +1,11 @@
 import React, { HTMLAttributes } from 'react';
-import { Title } from '../index';
 import styles from './Card.modules.scss';
 
 export interface CardProps extends HTMLAttributes<HTMLButtonElement> {
-  children: string;
+  children: JSX.Element;
   className: string;
 }
 
 export const Card = ({ children, className }: CardProps) => (
-  <div className={`${styles.card} ${className}`}>
-    <Title text={children} />
-  </div>
+  <div className={`${styles.card} ${className}`}>{children}</div>
 );

package/src/Checkbox/Checkbox.tsx

@@ -1,8 +1,8 @@
+import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Checkbox as MuiCheckbox } from '@mui/material';
 import styles from './Checkbox.module.scss';
 import { Text } from '../Typography/Text';
-import React from 'react';
 
 const BpIcon = styled('span')(() => ({
   borderRadius: '0.25rem',

package/src/Icons/Arrows/ArrowDoubleLineDownIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowDoubleLineDownIcon({
   stroke,

package/src/Icons/Arrows/ArrowDoubleLineLeftIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowDoubleLineLeftIcon({
   stroke,

package/src/Icons/Arrows/ArrowDoubleLineRightIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowDoubleLineRightIcon({
   stroke,

package/src/Icons/Arrows/ArrowDoubleLineUpIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowDoubleLineUpIcon({
   stroke,

package/src/Icons/Arrows/ArrowFilledDownIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowFilledDownIcon({
   stroke,

package/src/Icons/Arrows/ArrowFilledLeftIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowFilledLeftIcon({
   stroke,

package/src/Icons/Arrows/ArrowFilledRightIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowFilledRightIcon({
   stroke,

package/src/Icons/Arrows/ArrowFilledUpIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowFilledUpIcon({
   stroke,

package/src/Icons/Arrows/ArrowLineDownIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowLineDowIcon({
   stroke,

package/src/Icons/Arrows/ArrowLineLeftIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowLineLeftIcon({
   stroke,

package/src/Icons/Arrows/ArrowLineRightIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowLineRightIcon({
   stroke,

package/src/Icons/Arrows/ArrowLineUpIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowLineUpIcon({
   stroke,

package/src/Icons/Arrows/ArrowPointerDown.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerDown({
   stroke,

package/src/Icons/Arrows/ArrowPointerDownLeft.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerDownLeft({
   stroke,

package/src/Icons/Arrows/ArrowPointerDownRight.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerDownRight({
   stroke,

package/src/Icons/Arrows/ArrowPointerLeft.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerLeft({
   stroke,

package/src/Icons/Arrows/ArrowPointerRight.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerRight({
   stroke,

package/src/Icons/Arrows/ArrowPointerUp.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerUp({
   stroke,

package/src/Icons/Arrows/ArrowPointerUpLeft.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerUpLeft({
   stroke,

package/src/Icons/Arrows/ArrowPointerUpRight.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ArrowPointerUpRight({
   stroke,

package/src/Icons/Circled/AddCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AddCircledIcon({
   stroke,

package/src/Icons/Circled/AlertCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AlertCircledIcon({
   stroke,

package/src/Icons/Circled/CheckedCircled.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CheckedCircled({
   stroke,

package/src/Icons/Circled/InfoCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function InfoCircledIcon({
   stroke,

package/src/Icons/Circled/MinusCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MinusCircledIcon({
   stroke,

package/src/Icons/Circled/NavigationCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function NavigationCircledIcon({
   stroke,

package/src/Icons/Circled/QuestionCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function QuestionCircledIcon({
   stroke,

package/src/Icons/Circled/RemoveCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function RemoveCircledIcon({
   stroke,

package/src/Icons/Circled/SearchCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SearchCircledIcon({
   stroke,

package/src/Icons/Circled/SettingsCircledIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SettingsCircledIcon({
   stroke,

package/src/Icons/Equipment/CameraIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CameraIcon({
   stroke,

package/src/Icons/Equipment/LaptopIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LaptopIcon({
   stroke,

package/src/Icons/Equipment/MicrophonePodcastIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MicrophonePodcastIcon({
   stroke,

package/src/Icons/Equipment/MobileIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MobileIcon({
   stroke,

package/src/Icons/Equipment/TvFlatScreenIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function TvFlatScreenIcon({
   stroke,

package/src/Icons/Equipment/TvIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function TvIcon({
   stroke,

package/src/Icons/Interaction/AccountIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AccountIcon({
   stroke,

package/src/Icons/Interaction/AddIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AddIcon({
   stroke,

package/src/Icons/Interaction/AgendaIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function AgendaIcon({
   stroke,

package/src/Icons/Interaction/BillingIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function BillingIcon({
   stroke,

package/src/Icons/Interaction/BinIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function BinIcon({
   stroke,

package/src/Icons/Interaction/CheckedIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CheckedIcon({
   stroke,

package/src/Icons/Interaction/ClockIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ClockIcon({
   stroke,

package/src/Icons/Interaction/CopyPasteIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function CopyPasteIcon({
   stroke,

package/src/Icons/Interaction/DragDropIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function DragDropIcon({
   stroke,

package/src/Icons/Interaction/EditIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function EditIcon({
   stroke,

package/src/Icons/Interaction/EditTextIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function EditTextIcon({
   stroke,

package/src/Icons/Interaction/LogoutIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LogoutIcon({
   stroke,

package/src/Icons/Interaction/MenuHorizontalIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MenuHorizontalIcon({
   stroke,

package/src/Icons/Interaction/MenuVerticalIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MenuVerticalIcon({
   stroke,

package/src/Icons/Interaction/MinusIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function MinusIcon({
   stroke,

package/src/Icons/Interaction/SearchIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SearchIcon({
   stroke,

package/src/Icons/Interaction/SearchRemoveIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function SearchRemoveIcon({
   stroke,

package/src/Icons/Interaction/ShareIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function ShareIcon({
   stroke,

package/src/Icons/Interaction/TeamIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function TeamIcon({
   stroke,

package/src/Icons/Logos/LogoBeta.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LogoBeta({
   stroke,

package/src/Icons/Logos/LogoNormal.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LogoNormal({
   stroke,

package/src/Icons/Logos/LogoSmall.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LogoSmall({
   stroke,

package/src/Icons/Logos/LogoSquare.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LogoSquare({
   stroke,

package/src/Icons/Logos/LogoText.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function LogoText({
   stroke,

package/src/Icons/MediaControl/HangUpIcon.tsx

@@ -1,5 +1,5 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
 import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
 export default function HangUpIcon({
   stroke,