@bosonprotocol/react-kit 0.33.0-alpha.1 → 0.33.0-alpha.11

package/dist/esm/types/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/types/helpers.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAI,CAAY,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AA4BzD,YAAY"}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/types/helpers.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAI,CAAY,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AA4BzD,YAAY"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.33.0-alpha.1",
+  "version": "0.33.0-alpha.11",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,9 +15,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.5-alpha.0",
-    "@bosonprotocol/ethers-sdk": "^1.14.5-alpha.0",
-    "@bosonprotocol/ipfs-storage": "^1.11.3",
+    "@bosonprotocol/core-sdk": "^1.40.5-alpha.10",
+    "@bosonprotocol/ethers-sdk": "^1.14.5-alpha.10",
+    "@bosonprotocol/ipfs-storage": "^1.11.4-alpha.5",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
     "@glidejs/glide": "3.6.0",
@@ -188,5 +188,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "1c23ba2ae19b282fc300ddb8a69d50771fb7c8c3"
+  "gitHead": "ef36d597644bb21937e62fc64d86ff22ef714651"
 }

package/src/components/buttons/BaseButton.tsx

@@ -19,6 +19,7 @@ const colors = theme.colors.light;
 const ButtonWithThemeProps = styled.button<{
   size: ButtonSizeProp;
   fill: boolean | undefined;
+  theme: BaseButtonTheme;
 }>`
   ${() => Styles.button};
   ${(props) => Styles[props.size as keyof typeof Styles]}
@@ -26,6 +27,8 @@ const ButtonWithThemeProps = styled.button<{
   border-color: ${(props) => props.theme?.borderColor || "transparent"};
   border-width: ${(props) => props.theme?.borderWidth || 0}px;
   border-radius: ${(props) => props.theme?.borderRadius || 0}px;
+  ${(props) =>
+    props.theme?.boxShadow ? `box-shadow: ${props.theme.boxShadow}` : ""};
   color: ${(props) => props.theme?.color || "#000000"};
   background-color: ${(props) => props.theme?.background || "transparent"};
   svg {
@@ -110,6 +113,7 @@ export type BaseButtonTheme = {
   borderColor?: CSSProperties["borderColor"];
   borderRadius?: CSSProperties["borderRadius"];
   borderWidth?: CSSProperties["borderWidth"];
+  boxShadow?: CSSProperties["boxShadow"];
   color?: CSSProperties["color"];
   padding?: CSSProperties["padding"];
   gap?: CSSProperties["gap"];

package/src/components/form/Select.tsx

@@ -8,9 +8,10 @@ import { zIndex } from "../ui/zIndex";
 
 import Error from "./Error";
 import type { SelectDataProps, SelectProps } from "./types";
+export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (error: any) => ({
+const customStyles = (error: any, customTheme: SelectProps["theme"]) => ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   singleValue: (provided: any, state: any) => {
     return {
@@ -34,16 +35,18 @@ const customStyles = (error: any) => ({
       borderRadius: 0,
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
-      ":hover": {
-        borderColor: colors.secondary,
-        borderWidth: "1px"
-      },
       background: colors.lightGrey,
+      ...customTheme?.control,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? customTheme?.control?.focus?.border ?? `1px solid ${colors.secondary}`
         : !checkIfValueIsEmpty(error)
-          ? `1px solid ${colors.orange}`
-          : `1px solid ${colors.border}`,
+          ? customTheme?.control?.error?.border ?? `1px solid ${colors.orange}`
+          : customTheme?.control?.border ?? `1px solid ${colors.border}`,
+      ":hover": {
+        borderColor: colors.secondary,
+        borderWidth: "1px",
+        ...customTheme?.control?.hover
+      },
       ...before
     };
   },
@@ -56,15 +59,17 @@ const customStyles = (error: any) => ({
   option: (provided: any, state: any) => ({
     ...provided,
     cursor: state.isDisabled ? "not-allowed" : "pointer",
-    opacity: state.isDisabled ? "0.5" : "1",
+    opacity: state.isDisabled
+      ? customTheme?.option?.disabled?.opacity ?? "0.5"
+      : customTheme?.option?.opacity ?? "1",
     background:
       state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
-        : colors.white,
+        ? customTheme?.option?.selected?.background ?? colors.lightGrey
+        : customTheme?.option?.background ?? colors.white,
     color:
       state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
+        ? customTheme?.option?.selected?.color ?? colors.secondary
+        : customTheme?.option?.color ?? colors.black
   }),
   indicatorSeparator: () => ({
     display: "none"
@@ -80,6 +85,7 @@ export default function SelectComponent({
   disabled = false,
   errorMessage,
   onChange,
+  theme,
   ...props
 }: SelectProps) {
   const [field, meta, helpers] = useField(name);
@@ -109,7 +115,7 @@ export default function SelectComponent({
   return (
     <>
       <Select
-        styles={customStyles(displayErrorMessage)}
+        styles={customStyles(displayErrorMessage, theme)}
         {...field}
         {...props}
         placeholder={placeholder}

package/src/components/form/index.ts

@@ -5,7 +5,7 @@ export { FormField } from "./FormField";
 export * from "./BaseInput";
 export { default as Input, InputProps } from "./Input";
 export { default as Phone } from "./Phone";
-export { default as Select } from "./Select";
+export { default as Select, SelectProps } from "./Select";
 export * from "./CountrySelect";
 export * from "./BaseTagsInput";
 export * from "./BaseTextArea";

package/src/components/form/types.ts

@@ -89,6 +89,39 @@ export interface SelectProps extends BaseProps {
   errorMessage?: string;
   onChange?: (option: SelectDataProps<string>) => void;
   label?: string;
+  theme?: Partial<{
+    control: Partial<{
+      background: CSSProperties["background"];
+      borderRadius: CSSProperties["borderRadius"];
+      padding: CSSProperties["padding"];
+      boxShadow: CSSProperties["boxShadow"];
+      borderWidth: CSSProperties["borderWidth"];
+      border: CSSProperties["border"];
+      focus: Partial<{
+        border: CSSProperties["border"];
+      }>;
+      hover: Partial<{
+        borderColor: CSSProperties["borderColor"];
+        borderWidth: CSSProperties["borderWidth"];
+        border: CSSProperties["border"];
+      }>;
+      error: Partial<{
+        border: CSSProperties["border"];
+      }>;
+    }>;
+    option: Partial<{
+      opacity: CSSProperties["opacity"];
+      background: CSSProperties["background"];
+      color: CSSProperties["color"];
+      selected: Partial<{
+        background: CSSProperties["background"];
+        color: CSSProperties["color"];
+      }>;
+      disabled: Partial<{
+        opacity: CSSProperties["opacity"];
+      }>;
+    }>;
+  }>;
 }
 
 export type UploadProps = BaseProps & {

package/src/components/image/Image.styles.ts

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled, { CSSProperties, css } from "styled-components";
 import { theme } from "../../theme";
 
 export const ImageWrapper = styled.div<{ $hide?: boolean }>`
@@ -27,11 +27,13 @@ const buttonText = css`
   line-height: 24px;
 `;
 
-export const ImagePlaceholder = styled.div<{ position?: string }>`
-  ${({ position }) =>
-    position
+export const ImagePlaceholder = styled.div<{
+  $position?: CSSProperties["position"];
+}>`
+  ${({ $position }) =>
+    $position
       ? css`
-          position: ${position};
+          position: ${$position};
         `
       : css`
           position: absolute;

package/src/components/image/Image.tsx

@@ -48,7 +48,7 @@ export const Image: React.FC<IBaseImage> = ({
   return (
     <>
       <ImageWrapper {...rest} data-image-wrapper $hide={!isError}>
-        <ImagePlaceholder data-image-placeholder position="static">
+        <ImagePlaceholder data-image-placeholder $position="static">
           {errorConfig.errorIcon ?? null}
           <ImageErrorText>
             {errorConfig.errorImageText || "Failed to load image"}
@@ -56,7 +56,7 @@ export const Image: React.FC<IBaseImage> = ({
         </ImagePlaceholder>
       </ImageWrapper>
       <ImageWrapper {...rest} data-image-wrapper $hide={!isLoading}>
-        <ImagePlaceholder data-image-placeholder position="static">
+        <ImagePlaceholder data-image-placeholder $position="static">
           <Loading />
         </ImagePlaceholder>
       </ImageWrapper>

package/src/components/modal/components/Commit/DetailView/InnerCommitDetailView.tsx

@@ -28,7 +28,7 @@ import { Typography } from "../../../../ui/Typography";
 import {
   getItemFromStorage,
   saveItemInStorage
-} from "../../../../widgets/finance/storage/useLocalStorage";
+} from "../../../../../hooks/storage/useBosonLocalStorage";
 import { useModal } from "../../../useModal";
 import { InnerDetailViewWithPortal } from "../../common/detail/InnerDetailViewWithPortal";
 import { BuyOrSwapContainer } from "../../common/detail/BuyOrSwapContainer";

package/src/components/modal/components/Redeem/ExchangeView/RedeemSuccess.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { useExchanges } from "../../../../../hooks/useExchanges";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
 import { Grid } from "../../../../ui/Grid";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import Loading from "../../../../ui/loading/LoadingWrapper";
 import { Typography } from "../../../../ui/Typography";
 import DetailOpenSea from "../../common/DetailOpenSea";

package/src/components/modal/components/common/OfferFullDescription/DigitalProductData.tsx

@@ -19,7 +19,7 @@ import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkW
 import { isNftItem } from "../../../../../lib/bundle/filter";
 import { isTruthy } from "../../../../../types/helpers";
 import Video from "../../../../ui/Video";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 
 const StyledDetailsSummary = styled(DetailsSummary)`
   .icon-wrapper {

package/src/components/modal/components/common/detail/DetailSlider.tsx

@@ -13,7 +13,7 @@ import styled, { css } from "styled-components";
 import { breakpointNumbers } from "../../../../../lib/ui/breakpoint";
 import { theme } from "../../../../../theme";
 import { Grid } from "../../../../ui/Grid";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import Video from "../../../../ui/Video";
 import { zIndex } from "../../../../ui/zIndex";
 import { GlideSlide } from "./Detail.style";

package/src/components/modal/components/common/detail/PhygitalProduct.tsx

@@ -12,7 +12,7 @@ import { theme } from "../../../../../theme";
 import { Offer } from "../../../../../types/offer";
 import { Tooltip } from "../../../../tooltip/Tooltip";
 import { Grid } from "../../../../ui/Grid";
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import ThemedButton from "../../../../ui/ThemedButton";
 import { Typography } from "../../../../ui/Typography";
 import Video from "../../../../ui/Video";

package/src/components/modal/components/common/detail/SlickSlider.tsx

@@ -3,7 +3,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import _Slider, { Settings } from "react-slick";
 
-import IpfsImage from "../../../../ui/IpfsImage";
+import { IpfsImage } from "../../../../ui/IpfsImage";
 import Video from "../../../../ui/Video";
 import styled, { CSSProperties, css } from "styled-components";
 import { theme } from "../../../../../theme";

package/src/components/ui/CardCTA.tsx

@@ -0,0 +1,77 @@
+import React, { ReactElement } from "react";
+import styled, { CSSProperties, css } from "styled-components";
+import { Grid, GridProps } from "./Grid";
+import { Typography, TypographyProps } from "./Typography";
+
+export type CardCTAProps = GridProps & {
+  title: string;
+  text: string;
+  icon: ReactElement;
+  cta: ReactElement;
+  titleProps?: TypographyProps;
+  textProps?: TypographyProps;
+  theme: {
+    background: CSSProperties["background"];
+    color: CSSProperties["color"];
+    padding: CSSProperties["padding"];
+    border: CSSProperties["border"];
+    borderRadius: CSSProperties["borderRadius"];
+  };
+};
+
+const StyledGrid = styled(Grid)<{ theme: CardCTAProps["theme"] }>`
+  ${(props) => {
+    return css`
+      background: ${props.theme.background};
+      color: ${props.theme.color};
+      padding: ${props.theme.padding};
+      border: ${props.theme.border};
+      border-radius: ${props.theme.borderRadius};
+    `;
+  }}
+`;
+
+const IconContainer = styled(Grid)`
+  top: 0.5rem;
+  right: 0;
+  margin-bottom: 1rem;
+  svg {
+    > * {
+      stroke-width: 14px;
+    }
+  }
+`;
+
+export const CardCTA: React.FC<CardCTAProps> = ({
+  title,
+  text,
+  icon,
+  cta,
+  theme,
+  titleProps,
+  textProps,
+  ...rest
+}) => {
+  return (
+    <StyledGrid
+      flexDirection="column"
+      alignItems="flex-start"
+      padding="1.5rem"
+      theme={theme}
+      {...rest}
+    >
+      <>
+        <div>
+          <IconContainer>{icon}</IconContainer>
+          <Typography fontWeight="600" fontSize="1.25rem" {...titleProps}>
+            {title}
+          </Typography>
+        </div>
+        <Typography tag="p" {...textProps}>
+          {text}
+        </Typography>
+        {cta}
+      </>
+    </StyledGrid>
+  );
+};

package/src/components/ui/Grid.tsx

@@ -1,6 +1,7 @@
 import React, { ElementRef, HTMLAttributes, forwardRef } from "react";
 import styled, { CSSProperties } from "styled-components";
 import { getTransientCustomProps } from "./getTransientCustomProps";
+import { isDefined } from "./common";
 const pickedProps = {
   alignItems: true,
   flexBasis: true,
@@ -29,31 +30,42 @@ type IGrid = Pick<CSSProperties, keyof typeof pickedProps>;
 type InnerGridProps = Record<`$${keyof IGrid}`, IGrid[keyof IGrid]>;
 
 const Container = styled.div<InnerGridProps>`
-  width: ${({ $width }) => $width || "100%"};
-  height: ${({ $height }) => $height || "initial"};
+  ${({ $width }) => (isDefined($width) ? `width:${$width};` : "width: 100%;")}
+  height: ${({ $height }) => (isDefined($height) ? $height : "initial")};
   display: flex;
-  align-items: ${({ $alignItems }) => $alignItems || "center"};
-  flex-basis: ${({ $flexBasis }) => $flexBasis || "auto"};
-  flex-direction: ${({ $flexDirection }) => $flexDirection || "row"};
-  flex-grow: ${({ $flexGrow }) => $flexGrow || "initial"};
-  flex-shrink: ${({ $flexShrink }) => $flexShrink || "initial"};
+  align-items: ${({ $alignItems }) =>
+    isDefined($alignItems) ? $alignItems : "center"};
+  flex-basis: ${({ $flexBasis }) =>
+    isDefined($flexBasis) ? $flexBasis : "auto"};
+  flex-direction: ${({ $flexDirection }) =>
+    isDefined($flexDirection) ? $flexDirection : "row"};
+  flex-grow: ${({ $flexGrow }) =>
+    isDefined($flexGrow) ? $flexGrow : "initial"};
+  flex-shrink: ${({ $flexShrink }) =>
+    isDefined($flexShrink) ? $flexShrink : "initial"};
   justify-content: ${({ $justifyContent }) =>
-    $justifyContent || "space-between"};
+    isDefined($justifyContent) ? $justifyContent : "space-between"};
 
-  ${({ $flexWrap }) => ($flexWrap ? `flex-wrap:${$flexWrap};` : "")}
-  ${({ $rowGap }) => ($rowGap ? `row-gap:${$rowGap};` : "")}
-  ${({ $columnGap }) => ($columnGap ? `column-gap:${$columnGap};` : "")}
-  ${({ $gap }) => ($gap ? `gap:${$gap};` : "")}
-  ${({ $flex }) => ($flex ? `> * { flex: ${$flex}; }` : "")}
-  ${({ $padding }) => ($padding ? `padding:${$padding};` : "")}
-  ${({ $margin }) => ($margin ? `margin:${$margin};` : "")}
-  ${({ $marginTop }) => ($marginTop ? `margin-top:${$marginTop};` : "")}
-  ${({ $marginRight }) => ($marginRight ? `margin-right:${$marginRight};` : "")}
+  ${({ $flexWrap }) => (isDefined($flexWrap) ? `flex-wrap:${$flexWrap};` : "")}
+  ${({ $rowGap }) => (isDefined($rowGap) ? `row-gap:${$rowGap};` : "")}
+  ${({ $columnGap }) =>
+    isDefined($columnGap) ? `column-gap:${$columnGap};` : ""}
+  ${({ $gap }) => (isDefined($gap) ? `gap:${$gap};` : "")}
+  ${({ $flex }) => (isDefined($flex) ? `> * { flex: ${$flex}; }` : "")}
+  ${({ $padding }) => (isDefined($padding) ? `padding:${$padding};` : "")}
+  ${({ $margin }) => (isDefined($margin) ? `margin:${$margin};` : "")}
+  ${({ $marginTop }) =>
+    isDefined($marginTop) ? `margin-top:${$marginTop};` : ""}
+  ${({ $marginRight }) =>
+    isDefined($marginRight) ? `margin-right:${$marginRight};` : ""}
   ${({ $marginBottom }) =>
-    $marginBottom ? `margin-bottom:${$marginBottom};` : ""}
-  ${({ $marginLeft }) => ($marginLeft ? `margin-left:${$marginLeft};` : "")}
-  ${({ $alignSelf }) => ($alignSelf ? `align-self:${$alignSelf};` : "")}
-  ${({ $justifySelf }) => ($justifySelf ? `justify-self:${$justifySelf};` : "")}
+    isDefined($marginBottom) ? `margin-bottom:${$marginBottom};` : ""}
+  ${({ $marginLeft }) =>
+    isDefined($marginLeft) ? `margin-left:${$marginLeft};` : ""}
+  ${({ $alignSelf }) =>
+    isDefined($alignSelf) ? `align-self:${$alignSelf};` : ""}
+  ${({ $justifySelf }) =>
+    isDefined($justifySelf) ? `justify-self:${$justifySelf};` : ""}
 `;
 export type GridProps = {
   children?: React.ReactNode;

package/src/components/ui/IpfsImage.tsx

@@ -86,7 +86,9 @@ interface IImage {
     ipfsGateway?: string;
   };
 }
-const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
+export const IpfsImage: React.FC<
+  IImage & React.HTMLAttributes<HTMLDivElement>
+> = ({
   src,
   children,
   dataTestId = "image",
@@ -179,5 +181,3 @@ const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
     </>
   );
 };
-
-export default IpfsImage;

package/src/components/ui/Typography.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import styled, { CSSProperties } from "styled-components";
 import { getTransientCustomProps } from "./getTransientCustomProps";
+import { isDefined } from "./common";
 
 const pickedProps = {
   alignItems: true,
@@ -38,43 +39,52 @@ type InnerTypographyProps = Record<
   `$${keyof WrapperProps}`,
   WrapperProps[keyof WrapperProps]
 >;
-
 const Wrapper = styled.div<InnerTypographyProps>`
   display: flex;
-  ${({ $display }) => ($display ? `display:${$display};` : "")}
-  ${({ $alignItems }) => $alignItems && `align-items: ${$alignItems}`};
-  ${({ $flexBasis }) => $flexBasis && `flex-basis: ${$flexBasis}`};
+  ${({ $display }) => (isDefined($display) ? `display:${$display};` : "")}
+  ${({ $alignItems }) =>
+    isDefined($alignItems) && `align-items: ${$alignItems}`};
+  ${({ $flexBasis }) => isDefined($flexBasis) && `flex-basis: ${$flexBasis}`};
   ${({ $flexDirection }) =>
-    $flexDirection && `flex-direction: ${$flexDirection}`};
-  ${({ $flexGrow }) => $flexGrow && `flex-grow: ${$flexGrow}`};
-  ${({ $flexShrink }) => $flexShrink && `flex-shrink: ${$flexShrink}`};
+    isDefined($flexDirection) && `flex-direction: ${$flexDirection}`};
+  ${({ $flexGrow }) => isDefined($flexGrow) && `flex-grow: ${$flexGrow}`};
+  ${({ $flexShrink }) =>
+    isDefined($flexShrink) && `flex-shrink: ${$flexShrink}`};
   ${({ $justifyContent }) =>
-    $justifyContent && `justify-content: ${$justifyContent}`};
-  ${({ $flexWrap }) => ($flexWrap ? `flex-wrap:${$flexWrap};` : "")}
-  ${({ $rowGap }) => ($rowGap ? `row-gap:${$rowGap};` : "")}
-  ${({ $columnGap }) => ($columnGap ? `column-gap:${$columnGap};` : "")}
-  ${({ $gap }) => ($gap ? `gap:${$gap};` : "")}
-  ${({ $flex }) => ($flex ? `> * { flex: ${$flex}; }` : "")}
-  ${({ $padding }) => ($padding ? `padding:${$padding};` : "")}
-  ${({ $margin }) => ($margin ? `margin:${$margin};` : "")}
-  ${({ $marginTop }) => ($marginTop ? `margin-top:${$marginTop};` : "")}
-  ${({ $marginRight }) => ($marginRight ? `margin-right:${$marginRight};` : "")}
+    isDefined($justifyContent) && `justify-content: ${$justifyContent}`};
+  ${({ $flexWrap }) => (isDefined($flexWrap) ? `flex-wrap:${$flexWrap};` : "")}
+  ${({ $rowGap }) => (isDefined($rowGap) ? `row-gap:${$rowGap};` : "")}
+  ${({ $columnGap }) =>
+    isDefined($columnGap) ? `column-gap:${$columnGap};` : ""}
+  ${({ $gap }) => (isDefined($gap) ? `gap:${$gap};` : "")}
+  ${({ $flex }) => (isDefined($flex) ? `> * { flex: ${$flex}; }` : "")}
+  ${({ $padding }) => (isDefined($padding) ? `padding:${$padding};` : "")}
+  ${({ $margin }) => (isDefined($margin) ? `margin:${$margin};` : "")}
+  ${({ $marginTop }) =>
+    isDefined($marginTop) ? `margin-top:${$marginTop};` : ""}
+  ${({ $marginRight }) =>
+    isDefined($marginRight) ? `margin-right:${$marginRight};` : ""}
   ${({ $marginBottom }) =>
-    $marginBottom ? `margin-bottom:${$marginBottom};` : ""}
-  ${({ $marginLeft }) => ($marginLeft ? `margin-left:${$marginLeft};` : "")}
+    isDefined($marginBottom) ? `margin-bottom:${$marginBottom};` : ""}
+  ${({ $marginLeft }) =>
+    isDefined($marginLeft) ? `margin-left:${$marginLeft};` : ""}
 
 
-  ${({ $fontSize }) => ($fontSize ? `font-size:${$fontSize};` : "")}
-  ${({ $fontWeight }) => ($fontWeight ? `font-weight:${$fontWeight};` : "")}
-  ${({ $lineHeight }) => ($lineHeight ? `line-height:${$lineHeight};` : "")}
-  ${({ $color }) => ($color ? `color:${$color};` : "")}
-  ${({ $background }) => ($background ? `background:${$background};` : "")}
-  ${({ $cursor }) => ($cursor ? `cursor:${$cursor};` : "")}
+  ${({ $fontSize }) => (isDefined($fontSize) ? `font-size:${$fontSize};` : "")}
+  ${({ $fontWeight }) =>
+    isDefined($fontWeight) ? `font-weight:${$fontWeight};` : ""}
+  ${({ $lineHeight }) =>
+    isDefined($lineHeight) ? `line-height:${$lineHeight};` : ""}
+  ${({ $color }) => (isDefined($color) ? `color:${$color};` : "")}
+  ${({ $background }) =>
+    isDefined($background) ? `background:${$background};` : ""}
+  ${({ $cursor }) => (isDefined($cursor) ? `cursor:${$cursor};` : "")}
   ${({ $letterSpacing }) =>
-    $letterSpacing ? `letter-spacing:${$letterSpacing};` : ""}
-    ${({ $textAlign }) => ($textAlign ? `text-align:${$textAlign};` : "")}
-    ${({ $opacity }) => ($opacity ? `opacity:${$opacity};` : "")}
-    ${({ $width }) => ($width ? `width:${$width};` : "")}
+    isDefined($letterSpacing) ? `letter-spacing:${$letterSpacing};` : ""}
+    ${({ $textAlign }) =>
+    isDefined($textAlign) ? `text-align:${$textAlign};` : ""}
+    ${({ $opacity }) => (isDefined($opacity) ? `opacity:${$opacity};` : "")}
+    ${({ $width }) => (isDefined($width) ? `width:${$width};` : "")}
 `;
 
 export type TypographyProps = WrapperProps &