@soul-refiner/design-system 2.14.151 → 2.14.152

package/dist/src/components/atoms/typography/heading.d.ts

@@ -2,46 +2,47 @@ import React from 'react';
 import { TypographyProps } from '../../../components/atoms/typography/typography';
 export interface CommonProps extends TypographyProps {
     $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+    $fluid?: boolean;
 }
 export interface HeadingProps extends CommonProps {
     as?: React.ElementType;
-    $fontSize?: 16 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 64;
+    $fontSize?: 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 64 | 80 | 100;
     $lineHeight?: 96 | 64 | 60 | 54 | 48 | 36 | 28 | 26;
     $sx?: string;
     title?: string;
 }
 export declare const H: {
-    ({ sx, ...args }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+    (props: HeadingProps): import("react/jsx-runtime").JSX.Element;
     One: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Two: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Three: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Four: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Five: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Six: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Seven: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Eight: {
-        ({ sx, ...rest }: CommonProps): import("react/jsx-runtime").JSX.Element;
+        (props: CommonProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/dist/src/components/atoms/typography/heading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/heading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAElF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;CAClE;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAC5D,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AASD,eAAO,MAAM,CAAC;sBAAqB,YAAY;;0BAIjB,WAAW;;;;0BAMX,WAAW;;;;0BAMT,WAAW;;;;0BAMZ,WAAW;;;;0BAMX,WAAW;;;;0BAMZ,WAAW;;;;0BAMT,WAAW;;;;0BAMX,WAAW;;;CA5C1C,CAAC"}
+{"version":3,"file":"heading.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/heading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAIlF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;IAClE,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0BD,eAAO,MAAM,CAAC;YAAW,YAAY;;gBAEjB,WAAW;;;;gBAMX,WAAW;;;;gBAMT,WAAW;;;;gBAMZ,WAAW;;;;gBAMX,WAAW;;;;gBAMZ,WAAW;;;;gBAMT,WAAW;;;;gBAMX,WAAW;;;CA5C+B,CAAC"}

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

@@ -7,8 +7,9 @@ export interface CommonProps extends TypographyProps {
 export interface ParagraphProps extends CommonProps {
     $fontSize?: 10 | 11 | 12 | 14 | 16;
     $lineHeight?: 14 | 16 | 20 | 24;
+    $fluid?: boolean;
     $sx?: string;
     innerRef?: React.RefObject<HTMLParagraphElement>;
 }
-export declare const P: ({ as, children, $fontSize, $lineHeight, $textAlign, sx, innerRef, ...rest }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+export declare const P: ({ as, children, $fontSize, $lineHeight, $textAlign, $fluid, innerRef, ...rest }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=paragraph.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/paragraph.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAGlF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;CAClE;AAED,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,CAAC,gFASX,cAAc,4CAYhB,CAAC"}
+{"version":3,"file":"paragraph.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/paragraph.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iDAAiD,CAAC;AAIlF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;CAClE;AAED,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACnC,WAAW,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,CAAC,oFASX,cAAc,4CAYhB,CAAC"}

package/dist/src/components/atoms/typography/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/typography.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EACxC,UAAU,GACV,WAAW,GACX,yBAAyB,GACzB,IAAI,GACJ,QAAQ,GACR,eAAe,GACf,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,WAAW,GACX,kBAAkB,GAClB,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,GAC3C,SAAS,GACT,SAAS,GACT,eAAe,GACf,gBAAgB,CAAC;AAEnB,eAAO,MAAM,UAAU,wOAQtB,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/typography/typography.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,EACxC,UAAU,GACV,WAAW,GACX,yBAAyB,GACzB,IAAI,GACJ,QAAQ,GACR,eAAe,GACf,SAAS,GACT,UAAU,GACV,QAAQ,GACR,OAAO,GACP,WAAW,GACX,kBAAkB,GAClB,SAAS,GACT,gBAAgB,GAChB,aAAa,GACb,oBAAoB,GACpB,cAAc,GACd,cAAc,GACd,YAAY,GACZ,aAAa,CAChB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,GAC3C,SAAS,GACT,SAAS,GACT,eAAe,GACf,gBAAgB,CAAC;AAEnB,eAAO,MAAM,UAAU,wOAUtB,CAAC"}

package/dist/src/components/card/styles.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const PurchaseTextWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../components/atoms/box/box").BoxProps, never>> & Omit<({ $display, sx, ...args }: import("../../components/atoms/box/box").BoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const PurchaseTextWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../../components/atoms/box/box").BoxProps, never>> & Omit<(props: import("../../components/atoms/box/box").BoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/src/components/card/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/card/styles.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,mBAAmB,iVAO/B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/card/styles.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,mBAAmB,6TAO/B,CAAC"}

package/dist/src/styles/globals.css

@@ -1 +1 @@
-@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem;--font-inter:Inter;--color-page-bg:#f8fafc;--color-white:#fff;--color-primary-blue-0:#003f73;--color-primary-blue-1:#005aa6;--color-primary-blue-2:#0076d9;--color-primary-blue-3:#d4e7fa;--color-primary-blue-4:#e9f2fb;--color-grey-0:#080809;--color-grey-1:#17191b;--color-grey-2:#313438;--color-grey-3:#4a4f55;--color-grey-4:#636971;--color-grey-5:#7c838d;--color-grey-6:#989da4;--color-grey-7:#b3b7bc;--color-grey-8:#d0d2d6;--color-grey-9:#eaebed;--color-grey-10:#f8f9f9;--color-red-0:#491410;--color-red-1:#5b1914;--color-red-2:#83241d;--color-red-3:#aa2f25;--color-red-4:#cf3a2e;--color-red-5:#f34638;--color-red-6:#f66e63;--color-red-7:#f8948c;--color-red-8:#fbbdb8;--color-red-9:#fee3e1;--color-red-10:#fff8f7;--color-green-0:#113a1c;--color-green-1:#154923;--color-green-2:#1f6933;--color-green-3:#288641;--color-green-4:#31a450;--color-green-5:#3cc260;--color-green-6:#66cf82;--color-green-7:#8edca3;--color-green-8:#b8e9c6;--color-green-9:#e0f6e6;--color-green-10:#f7fdf9;--color-blue-0:#0a2c48;--color-blue-1:#0c375b;--color-blue-2:#114f81;--color-blue-3:#1665a6;--color-blue-4:#1b7bcb;--color-blue-5:#2393ef;--color-blue-6:#51a9f2;--color-blue-7:#80c1f6;--color-blue-8:#b1d9f9;--color-blue-9:#ddeffc;--color-blue-10:#f6fbfe;--color-turquoise-0:#033630;--color-turquoise-1:#0b4740;--color-turquoise-2:#1a685f;--color-turquoise-3:#29877e;--color-turquoise-4:#38a89c;--color-turquoise-5:#49c7ba;--color-turquoise-6:#6fd3c8;--color-turquoise-7:#95ded7;--color-turquoise-8:#baeae5;--color-turquoise-9:#e1f6f3;--color-turquoise-10:#f5fcfb;--color-purple-0:#31153a;--color-purple-1:#3d1a49;--color-purple-2:#572567;--color-purple-3:#703086;--color-purple-4:#8a3ca5;--color-purple-5:#a349c2;--color-purple-6:#b76fcf;--color-purple-7:#ca96dc;--color-purple-8:#debeea;--color-purple-9:#f0e3f6;--color-purple-10:#fbf8fd;--color-yellow-0:#4b3b02;--color-yellow-1:#5e4a02;--color-yellow-2:#876b04;--color-yellow-3:#ad8905;--color-yellow-4:#d5a806;--color-yellow-5:#fac70a;--color-yellow-6:#fbd33d;--color-yellow-7:#fcde71;--color-yellow-8:#fdeba9;--color-yellow-9:#fef6d8;--color-yellow-10:#fffdf5;--color-orange-0:#4a2b03;--color-orange-1:#5d3604;--color-orange-2:#854d06;--color-orange-3:#ac6307;--color-orange-4:#d27909;--color-orange-5:#f7900f;--color-orange-6:#f9a742;--color-orange-7:#fbbf74;--color-orange-8:#fcd6a8;--color-orange-9:#feedd9;--color-orange-10:#fffaf5;--color-hue-pink-1:#a5199d;--color-hue-pink-2:#fed6ff;--color-hue-pink-3:#fbe7f9;--color-hue-purple-1:#584fd6;--color-hue-purple-2:#c4c1f0;--color-hue-purple-3:#f3effb;--color-hue-ocean-1:#226f91;--color-hue-ocean-2:#c1e2f0;--color-hue-ocean-3:#eff7fb;--color-hue-mint-1:#078f81;--color-hue-mint-2:#a9e4de;--color-hue-mint-3:#d8f3f0;--color-hue-blue-1:#0b5cd7;--color-hue-blue-2:#b6cff3;--color-hue-blue-3:#ecf2fc;--color-hue-orange-1:#e96d00;--color-hue-orange-2:#ffd5bd;--color-hue-orange-3:#fff2e5;--color-special-yellow-1:#efb520;--color-special-yellow-2:#fff3c7;--color-special-orange-1:#ff5722;--color-special-orange-2:#ffead2;--color-special-red-1:#f72f4d;--color-special-red-2:#feded5;--color-special-pink-1:#fb19b4;--color-special-pink-2:#fed3e1;--color-special-purple-1:#7a5bf5;--color-special-purple-2:#ece1fe;--color-special-blue-1:#6c75f7;--color-special-blue-2:#dfeaff;--color-special-turquoise-1:#24a3d0;--color-special-turquoise-2:#cff9f2;--color-special-green-1:#1ea385;--color-special-green-2:#d4fae4;--color-special-grape-1:#2fa52d;--color-special-grape-2:#e3fad6;--color-gradient-blue-1:#1d62f0;--color-gradient-blue-2:#1ad5fd;--color-gradient-teal-1:#5ac8fb;--color-gradient-teal-2:#52edc7;--color-gradient-green-1:#0cd318;--color-gradient-green-2:#87fc70;--color-gradient-spring-green-1:#09b3a1;--color-gradient-spring-green-2:#3ac15e;--color-gradient-yellow-1:#ffcd02;--color-gradient-yellow-2:#ffdb4c;--color-gradient-orange-1:#ff5e3a;--color-gradient-orange-2:#ff9500;--color-gradient-red-1:#ff2a68;--color-gradient-red-2:#ff5e3a;--color-gradient-pink-1:#c643fc;--color-gradient-pink-2:#ef4db6;--color-gradient-purple-1:#ae33e8;--color-gradient-purple-2:#5e44ff;--gradient-background-1:radial-gradient(50.49% 55.14% at 5.76% 3.88%,#d9062c 11.51%,rgba(186,24,175,0) 100%,rgba(255,0,0,0) 0),radial-gradient(50.75% 55.24% at 93.3% -5.24%,#ff7a00 6.42%,rgba(186,24,175,0) 100%,rgba(255,122,0,0) 0),linear-gradient(180deg,#b80cbf,#2d21b6);--gradient-background-2:radial-gradient(47.55% 121.02% at 24.15% 120.55%,#ff7a00 0%,rgba(186,24,175,0) 100%),radial-gradient(107.04% 116.84% at 120.44% 68.19%,#ba004b 27.09%,#ba06c8 47.64%,#0026b7 86.58%);--gradient-light:radial-gradient(39.84% 64.62% at 3.52% 96.87%,#e7f1fd 0%,rgba(232,241,254,0) 100%),radial-gradient(35.14% 65.68% at 98.89% 0%,#ece1ef 0%,rgba(236,226,240,0) 100%),linear-gradient(109.97deg,#eef9f9 4.72%,#ecf1fd 100.82%);--gradient-dark-grey:linear-gradient(360deg,#2b2b2b,#4a4a4a);--gradient-grey:linear-gradient(360deg,#898c90,#dbddde);--gradient-light-grey:linear-gradient(360deg,#d7d7d7,#f7f7f7);--extra-small:4px;--small:8px;--medium:16px;--medium-large:20px;--large:24px;--extra-large:40px;--full:80px;--elevation-1:0px 3px 3px rgba(0,0,0,.04);--elevation-2:0px 4px 8px rgba(0,0,0,.1);--elevation-3:0px 6px 10px rgba(0,0,0,.15);--elevation-4:0px 4px 10px rgba(0,0,0,.06);--elevation-5:inset 0px 2px 2px rgba(0,0,0,.12);--elevation-6:inset 0px 4px 4px rgba(0,0,0,.03);--elevation-7:0px 0px 15px rgba(0,0,0,.05);--elevation-8:0px 1px 30px rgba(0,0,0,.06);--elevation-9:0px 15px 50px rgba(0,0,0,.15);--spacing-0:4px;--spacing-1:8px;--spacing-2:16px;--spacing-3:24px;--spacing-4:32px;--spacing-5:40px;--spacing-6:48px;--spacing-7:56px;--spacing-8:64px;--spacing-9:72px;--spacing-10:80px;--spacing-11:88px;--spacing-12:96px;--spacing-13:104px;--spacing-14:112px;--spacing-15:120px}*,body{@apply bg-background text-foreground}}
+@tailwind base;@tailwind components;@tailwind utilities;@layer base{:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:222.2 84% 4.9%;--radius:0.5rem;--font-inter:Inter;--color-page-bg:#f8fafc;--color-white:#fff;--color-primary-blue-0:#003f73;--color-primary-blue-1:#005aa6;--color-primary-blue-2:#0076d9;--color-primary-blue-3:#d4e7fa;--color-primary-blue-4:#e9f2fb;--color-grey-0:#080809;--color-grey-1:#17191b;--color-grey-2:#313438;--color-grey-3:#4a4f55;--color-grey-4:#636971;--color-grey-5:#7c838d;--color-grey-6:#989da4;--color-grey-7:#b3b7bc;--color-grey-8:#d0d2d6;--color-grey-9:#eaebed;--color-grey-10:#f8f9f9;--color-red-0:#491410;--color-red-1:#5b1914;--color-red-2:#83241d;--color-red-3:#aa2f25;--color-red-4:#cf3a2e;--color-red-5:#f34638;--color-red-6:#f66e63;--color-red-7:#f8948c;--color-red-8:#fbbdb8;--color-red-9:#fee3e1;--color-red-10:#fff8f7;--color-green-0:#113a1c;--color-green-1:#154923;--color-green-2:#1f6933;--color-green-3:#288641;--color-green-4:#31a450;--color-green-5:#3cc260;--color-green-6:#66cf82;--color-green-7:#8edca3;--color-green-8:#b8e9c6;--color-green-9:#e0f6e6;--color-green-10:#f7fdf9;--color-blue-0:#0a2c48;--color-blue-1:#0c375b;--color-blue-2:#114f81;--color-blue-3:#1665a6;--color-blue-4:#1b7bcb;--color-blue-5:#2393ef;--color-blue-6:#51a9f2;--color-blue-7:#80c1f6;--color-blue-8:#b1d9f9;--color-blue-9:#ddeffc;--color-blue-10:#f6fbfe;--color-turquoise-0:#033630;--color-turquoise-1:#0b4740;--color-turquoise-2:#1a685f;--color-turquoise-3:#29877e;--color-turquoise-4:#38a89c;--color-turquoise-5:#49c7ba;--color-turquoise-6:#6fd3c8;--color-turquoise-7:#95ded7;--color-turquoise-8:#baeae5;--color-turquoise-9:#e1f6f3;--color-turquoise-10:#f5fcfb;--color-purple-0:#31153a;--color-purple-1:#3d1a49;--color-purple-2:#572567;--color-purple-3:#703086;--color-purple-4:#8a3ca5;--color-purple-5:#a349c2;--color-purple-6:#b76fcf;--color-purple-7:#ca96dc;--color-purple-8:#debeea;--color-purple-9:#f0e3f6;--color-purple-10:#fbf8fd;--color-yellow-0:#4b3b02;--color-yellow-1:#5e4a02;--color-yellow-2:#876b04;--color-yellow-3:#ad8905;--color-yellow-4:#d5a806;--color-yellow-5:#fac70a;--color-yellow-6:#fbd33d;--color-yellow-7:#fcde71;--color-yellow-8:#fdeba9;--color-yellow-9:#fef6d8;--color-yellow-10:#fffdf5;--color-orange-0:#4a2b03;--color-orange-1:#5d3604;--color-orange-2:#854d06;--color-orange-3:#ac6307;--color-orange-4:#d27909;--color-orange-5:#f7900f;--color-orange-6:#f9a742;--color-orange-7:#fbbf74;--color-orange-8:#fcd6a8;--color-orange-9:#feedd9;--color-orange-10:#fffaf5;--color-hue-pink-1:#a5199d;--color-hue-pink-2:#fed6ff;--color-hue-pink-3:#fbe7f9;--color-hue-purple-1:#584fd6;--color-hue-purple-2:#c4c1f0;--color-hue-purple-3:#f3effb;--color-hue-ocean-1:#226f91;--color-hue-ocean-2:#c1e2f0;--color-hue-ocean-3:#eff7fb;--color-hue-mint-1:#078f81;--color-hue-mint-2:#a9e4de;--color-hue-mint-3:#d8f3f0;--color-hue-blue-1:#0b5cd7;--color-hue-blue-2:#b6cff3;--color-hue-blue-3:#ecf2fc;--color-hue-orange-1:#e96d00;--color-hue-orange-2:#ffd5bd;--color-hue-orange-3:#fff2e5;--color-special-yellow-1:#efb520;--color-special-yellow-2:#fff3c7;--color-special-orange-1:#ff5722;--color-special-orange-2:#ffead2;--color-special-red-1:#f72f4d;--color-special-red-2:#feded5;--color-special-pink-1:#fb19b4;--color-special-pink-2:#fed3e1;--color-special-purple-1:#7a5bf5;--color-special-purple-2:#ece1fe;--color-special-blue-1:#6c75f7;--color-special-blue-2:#dfeaff;--color-special-turquoise-1:#24a3d0;--color-special-turquoise-2:#cff9f2;--color-special-green-1:#1ea385;--color-special-green-2:#d4fae4;--color-special-grape-1:#2fa52d;--color-special-grape-2:#e3fad6;--color-gradient-blue-1:#1d62f0;--color-gradient-blue-2:#1ad5fd;--color-gradient-teal-1:#5ac8fb;--color-gradient-teal-2:#52edc7;--color-gradient-green-1:#0cd318;--color-gradient-green-2:#87fc70;--color-gradient-spring-green-1:#09b3a1;--color-gradient-spring-green-2:#3ac15e;--color-gradient-yellow-1:#ffcd02;--color-gradient-yellow-2:#ffdb4c;--color-gradient-orange-1:#ff5e3a;--color-gradient-orange-2:#ff9500;--color-gradient-red-1:#ff2a68;--color-gradient-red-2:#ff5e3a;--color-gradient-pink-1:#c643fc;--color-gradient-pink-2:#ef4db6;--color-gradient-purple-1:#ae33e8;--color-gradient-purple-2:#5e44ff;--gradient-background-1:radial-gradient(50.49% 55.14% at 5.76% 3.88%,#d9062c 11.51%,rgba(186,24,175,0) 100%,rgba(255,0,0,0) 0),radial-gradient(50.75% 55.24% at 93.3% -5.24%,#ff7a00 6.42%,rgba(186,24,175,0) 100%,rgba(255,122,0,0) 0),linear-gradient(180deg,#b80cbf,#2d21b6);--gradient-background-2:radial-gradient(47.55% 121.02% at 24.15% 120.55%,#ff7a00 0%,rgba(186,24,175,0) 100%),radial-gradient(107.04% 116.84% at 120.44% 68.19%,#ba004b 27.09%,#ba06c8 47.64%,#0026b7 86.58%);--gradient-light:radial-gradient(39.84% 64.62% at 3.52% 96.87%,#e7f1fd 0%,rgba(232,241,254,0) 100%),radial-gradient(35.14% 65.68% at 98.89% 0%,#ece1ef 0%,rgba(236,226,240,0) 100%),linear-gradient(109.97deg,#eef9f9 4.72%,#ecf1fd 100.82%);--gradient-dark-grey:linear-gradient(360deg,#2b2b2b,#4a4a4a);--gradient-grey:linear-gradient(360deg,#898c90,#dbddde);--gradient-light-grey:linear-gradient(360deg,#d7d7d7,#f7f7f7);--extra-small:4px;--small:8px;--small-medium:12px;--medium:16px;--medium-large:20px;--large:24px;--large-2x:32px;--large-3x:48px;--large-4x:64px;--extra-large:40px;--full:80px;--elevation-1:0px 3px 3px rgba(0,0,0,.04);--elevation-2:0px 4px 8px rgba(0,0,0,.1);--elevation-3:0px 6px 10px rgba(0,0,0,.15);--elevation-4:0px 4px 10px rgba(0,0,0,.06);--elevation-5:inset 0px 2px 2px rgba(0,0,0,.12);--elevation-6:inset 0px 4px 4px rgba(0,0,0,.03);--elevation-7:0px 0px 15px rgba(0,0,0,.05);--elevation-8:0px 1px 30px rgba(0,0,0,.06);--elevation-9:0px 15px 50px rgba(0,0,0,.15);--spacing-0:4px;--spacing-1:8px;--spacing-2:16px;--spacing-3:24px;--spacing-4:32px;--spacing-5:40px;--spacing-6:48px;--spacing-7:56px;--spacing-8:64px;--spacing-9:72px;--spacing-10:80px;--spacing-11:88px;--spacing-12:96px;--spacing-13:104px;--spacing-14:112px;--spacing-15:120px}*,body{@apply bg-background text-foreground}}

package/dist/src/types/attributes.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { COLORS } from '../common/colors';
+import { SxObject } from '../common/sx';
+import { BreakpointAlias } from '../common/media';
 export type Align = 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
-export type Justify = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
-export type Sizes = 'extra-small' | 'small' | 'medium' | 'medium-large' | 'large' | 'extra-large' | 'full';
+export type Justify = 'normal' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
+export type Sizes = 'extra-small' | 'small' | 'small-medium' | 'medium' | 'medium-large' | 'large' | 'large-2x' | 'large-3x' | 'large-4x' | 'extra-large' | 'full';
 export type BorderRadius = {
     $borderRadius?: Sizes;
 };
@@ -15,12 +17,14 @@ export type Color = {
 export type Elevation = {
     $elevation?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 };
+type DirValue = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type DirProp = DirValue | Partial<Record<BreakpointAlias, DirValue>>;
 export type Flex = {
     $align?: Align;
     $gap?: Sizes | number;
     $flex?: number;
     $flow?: string;
-    $dir?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    $dir?: DirProp;
     $justify?: Justify;
 };
 export type Margin = {
@@ -32,8 +36,36 @@ export type Padding = {
 export type Polymorphic = {
     as?: React.ElementType;
 };
+/**
+ * Styleable
+ *
+ * Provides two styling escape hatches:
+ *
+ * `sx` — Structured responsive overrides using CSS-in-JS property names.
+ *   Each property accepts either a plain CSS value or a breakpoint map.
+ *
+ *   Plain value (applies at all sizes):
+ *     sx={{ fontSize: '24px', color: 'red' }}
+ *
+ *   Responsive object (desktop-first — each key applies from that breakpoint down):
+ *     sx={{ fontSize: { lg: 32, md: 24, sm: 18 } }}
+ *
+ *   Each key wraps in a max-width media query. Queries are emitted largest-to-smallest
+ *   so each smaller breakpoint correctly overrides the larger one in the cascade.
+ *
+ * `$sx` — Raw CSS string override. Applied as-is after all other styles.
+ *   Use when you need full CSS control that `sx` cannot express.
+ *   Example: $sx="text-transform: uppercase; letter-spacing: 0.1em;"
+ *
+ * Relationship to component props like `$fontSize`:
+ *   Component-level props (e.g. `$fontSize={48}`) define the default for screens
+ *   above the highest breakpoint defined in sx. The `sx` prop descends from there.
+ *   So `$fontSize={48}` applies above lg, and `sx={{ fontSize: { lg: 40, md: 32 } }}`
+ *   overrides at lg and below (≤1280px), then again at md and below (≤1024px).
+ */
 export type Styleable = {
-    sx?: string;
+    sx?: SxObject | string;
+    $sx?: string;
 };
 export type TextClamp = {
     $textClampLines?: number;
@@ -54,4 +86,5 @@ export interface PostingOption {
     value: string;
     avatar: string;
 }
+export {};
 //# sourceMappingURL=attributes.d.ts.map

package/dist/src/types/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../src/types/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,MAAM,KAAK,GACb,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AAEd,MAAM,MAAM,OAAO,GACf,QAAQ,GACR,YAAY,GACZ,UAAU,GACV,eAAe,GACf,cAAc,GACd,SAAS,CAAC;AAEd,MAAM,MAAM,KAAK,GACb,aAAa,GACb,OAAO,GACP,QAAQ,GACR,cAAc,GACd,OAAO,GACP,aAAa,GACb,MAAM,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,gBAAgB,CAAC,EAAE,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../src/types/attributes.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.14.151",
+  "version": "2.14.152",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",