@soul-refiner/design-system 0.2.3 → 0.2.5

package/dist/components/atoms/typography/paragraph.d.ts

@@ -7,5 +7,6 @@ export interface CommonProps extends TypographyProps {
 export interface ParagraphProps extends CommonProps {
     $fontSize?: 10 | 11 | 12 | 14 | 16;
     $lineHeight?: 14 | 16 | 20 | 24;
+    $sx?: string;
 }
-export declare const P: ({ as, children, $fontSize, $lineHeight, $textAlign, ...rest }: ParagraphProps) => React.JSX.Element;
+export declare const P: ({ as, children, $fontSize, $lineHeight, $textAlign, sx, ...rest }: ParagraphProps) => React.JSX.Element;

package/dist/components/atoms/typography/paragraph.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Styles } from '../../../common';
-export const P = ({ as = 'p', children, $fontSize = 16, $lineHeight = 24, $textAlign = 'left', ...rest }) => (React.createElement(StyledP, { as: as, "$fontSize": $fontSize, "$lineHeight": $lineHeight, "$textAlign": $textAlign, ...rest }, children));
+export const P = ({ as = 'p', children, $fontSize = 16, $lineHeight = 24, $textAlign = 'left', sx, ...rest }) => (React.createElement(StyledP, { as: as, "$fontSize": $fontSize, "$lineHeight": $lineHeight, "$textAlign": $textAlign, "$sx": sx, ...rest }, children));
 const StyledP = styled.p `
   margin: 0px;
   font-family: Inter;
@@ -14,4 +14,5 @@ const StyledP = styled.p `
   ${Styles.typography}
   ${Styles.styleable}
   ${({ $textClampLines }) => ($textClampLines ? Styles.textClamp : '')}
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

package/dist/components/card/action/action.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Box, H, P } from '../../';
 export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx, title, }) => {
     const isAnchor = !!href;
-    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div' },
+    return (React.createElement(Wrapper, { as: isAnchor ? 'a' : 'div', href: href },
         React.createElement(Action, { "$backgroundImage": image, "$sx": sx },
             React.createElement("img", { src: image, alt: "" }),
             React.createElement(Figcaption, null,
@@ -14,7 +14,10 @@ export const ActionCard = ({ actions, content, href, image, logo, subtitle, sx,
                 React.createElement(P, { as: "span", "$color": "grey-3", "$fontSize": 14, "$lineHeight": 20, "$textAlign": "center", sx: "margin-top: 12px;" }, content),
                 React.createElement(Box, { "$display": "flex", "$dir": "row", "$gap": 8, sx: "margin-top: 8px; width: 100%;" }, React.Children.toArray(actions))))));
 };
-const Wrapper = styled.div ``;
+const Wrapper = styled.div `
+  text-decoration: none;
+  ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
+`;
 const Action = styled.figure `
   position: relative;
   aspect-ratio: 310 / 374;
@@ -32,8 +35,6 @@ const Action = styled.figure `
     border-radius: 16px 16px 0px 0px;
   }
 
-  ${({ as }) => (as === 'a' ? 'cursor: pointer;' : '')}
-
   ${({ $sx }) => ($sx ? $sx : '')};
 `;
 const Figcaption = styled.figcaption `

package/dist/components/navigation/inner/inner.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, Drawer } from '../../';
+import { Button } from '../../../components/actions/button';
+import { Drawer } from '../../../components/surfaces/drawer';
 import { ChevronDown, ChevronLeft, ChevronUp, Plus } from '../../../icons';
 const INNER_NAV_CHILD_TYPES = [
     'Item',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {