@trafilea/afrodita-components 7.1.2 → 7.1.3

package/build/es/components/icons/Messaging/MailSent.js

@@ -0,0 +1,2 @@
+import{__assign as e}from"tslib";import{jsx as r}from"react/jsx-runtime";import"../../atoms/PriceLabel/PriceLabel.js";import"../../atoms/PriceLabelV2/PriceLabelV2.js";import"../../atoms/ClubPriceMemberLabel/ClubPriceMemberLabel.styled.js";import"../../atoms/HorizontalDivider/HorizontalDivider.js";import{Icon as o}from"../../atoms/Icon/Icon.js";import"../../atoms/Image/Image.js";import"react";import"../../atoms/Toggle/toggle.styled.js";var t=function(t){return r(o,e({},t,{name:"messaging/mail_sent"}),void 0)};export{t as MailSent};
+//# sourceMappingURL=MailSent.js.map

package/build/es/components/icons/Messaging/MailSent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MailSent.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/es/components/icons/Messaging/index.js

@@ -1,2 +1,2 @@
-export{AdaChat}from"./AdaChat.js";export{Comment}from"./Comment.js";export{CommentDots}from"./CommentDots.js";export{CommentLight}from"./CommentLight.js";export{CommentMoney}from"./CommentMoney.js";export{Community}from"./Community.js";export{Light}from"./Light.js";export{LightBulb}from"./LightBulb.js";export{LightBulbSolid}from"./LightBulbSolid.js";export{Mail}from"./Mail.js";export{Messenger}from"./Messenger.js";export{QuestionCircle}from"./QuestionCircle.js";export{QuestionCircleLight}from"./QuestionCircleLight.js";export{QuoteLeft}from"./QuoteLeft.js";export{QuoteRight}from"./QuoteRight.js";export{QuoteSolidLeft}from"./QuoteSolidLeft.js";export{QuoteSolidRight}from"./QuoteSolidRight.js";
+export{AdaChat}from"./AdaChat.js";export{Comment}from"./Comment.js";export{CommentDots}from"./CommentDots.js";export{CommentLight}from"./CommentLight.js";export{CommentMoney}from"./CommentMoney.js";export{Community}from"./Community.js";export{Light}from"./Light.js";export{LightBulb}from"./LightBulb.js";export{LightBulbSolid}from"./LightBulbSolid.js";export{Mail}from"./Mail.js";export{MailSent}from"./MailSent.js";export{Messenger}from"./Messenger.js";export{QuestionCircle}from"./QuestionCircle.js";export{QuestionCircleLight}from"./QuestionCircleLight.js";export{QuoteLeft}from"./QuoteLeft.js";export{QuoteRight}from"./QuoteRight.js";export{QuoteSolidLeft}from"./QuoteSolidLeft.js";export{QuoteSolidRight}from"./QuoteSolidRight.js";
 //# sourceMappingURL=index.js.map

package/build/es/core/theme/defaults.js

@@ -1,2 +1,2 @@
-var e={mobile:640,tablet:1024,desktop:1280};export{e as DEFAULT_BREAKPOINTS};
+var x={mobile:640,tablet:1024,desktop:1280,xs:"480px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};export{x as DEFAULT_BREAKPOINTS};
 //# sourceMappingURL=defaults.js.map

package/build/index.d.ts

@@ -183,7 +183,7 @@ declare type Arrows$1 = 'arrows/chevron_down' | 'arrows/chevron_down_variant' |
 declare type Custom$1 = 'custom/atom' | 'custom/avatar_placeholder' | 'custom/bra' | 'custom/bubbles' | 'custom/bullet_one' | 'custom/bullet_three' | 'custom/bullet_two' | 'custom/certified' | 'custom/clinically_tested' | 'custom/cruelty_free' | 'custom/fair_advantages' | 'custom/frown' | 'custom/money_flow' | 'custom/new_sixty_days_guarantee' | 'custom/packs_and_bundles' | 'custom/seamless_support_bra' | 'custom/sixty_days_bold' | 'custom/sixty_days_guarantee' | 'custom/smiling' | 'custom/subscription' | 'custom/thumbs_down' | 'custom/thumbs_up' | 'custom/underwear' | 'custom/wire_free_comfort' | 'custom/wire_free_comfort_bold' | 'custom/tk_sixty_days_bold' | 'custom/free_shipping_truck' | 'custom/higher_discounts' | 'custom/zoom' | 'custom/focus' | 'custom/beauty_face' | 'custom/bar' | 'custom/ears' | 'custom/pain' | 'custom/rociar' | 'custom/star' | 'custom/time' | 'custom/winter_light' | 'custom/priority_support' | 'custom/sound_on' | 'custom/sound_off' | 'custom/gift_thin' | 'custom/returns' | 'custom/paint_brush' | 'custom/savings' | 'custom/unhappy' | 'custom/no_trial_time' | 'custom/expensive_wallet' | 'custom/eye' | 'custom/product_usage';
 declare type Download$1 = 'download/apple_store' | 'download/google_play';
 declare type Emoji$1 = 'emoji/blowing_kiss' | 'emoji/frowning' | 'emoji/grinning' | 'emoji/grinning_with_sweat' | 'emoji/relieved' | 'emoji/smiling_v2' | 'emoji/smiling_v3' | 'emoji/thinking';
-declare type Messaging$1 = 'messaging/ada_chat' | 'messaging/comment' | 'messaging/comment_dots' | 'messaging/comment_light' | 'messaging/comment_money' | 'messaging/community' | 'messaging/light' | 'messaging/light_bulb' | 'messaging/light_bulb_solid' | 'messaging/mail' | 'messaging/messenger' | 'messaging/question_circle' | 'messaging/quote_left' | 'messaging/quote_right' | 'messaging/quote_solid_left' | 'messaging/quote_solid_right' | 'messaging/question_circle_light';
+declare type Messaging$1 = 'messaging/ada_chat' | 'messaging/comment' | 'messaging/comment_dots' | 'messaging/comment_light' | 'messaging/comment_money' | 'messaging/community' | 'messaging/light' | 'messaging/light_bulb' | 'messaging/light_bulb_solid' | 'messaging/mail' | 'messaging/mail_sent' | 'messaging/messenger' | 'messaging/question_circle' | 'messaging/quote_left' | 'messaging/quote_right' | 'messaging/quote_solid_left' | 'messaging/quote_solid_right' | 'messaging/question_circle_light';
 declare type MyAccount$1 = 'myaccount/birthday_gifts' | 'myaccount/community' | 'myaccount/deals_offers' | 'myaccount/free_returns' | 'myaccount/free_shipping' | 'myaccount/guard' | 'myaccount/members_only_discount' | 'myaccount/members_only_discount_opposite' | 'myaccount/personal_stylist' | 'myaccount/priority_shipping' | 'myaccount/profile' | 'myaccount/place_image' | 'myaccount/sale_tag' | 'myaccount/style_fashion_content' | 'myaccount/cart' | 'myaccount/vip' | 'myaccount/calendar' | 'myaccount/skin_type' | 'myaccount/magnify' | 'myaccount/beauty_products' | 'myaccount/email' | 'myaccount/contact';
 declare type Navigation$1 = 'navigation/address_information' | 'navigation/benefits' | 'navigation/benefits_v2' | 'navigation/club_membership' | 'navigation/ellipsis' | 'navigation/ellipsis_horizontal' | 'navigation/filters' | 'navigation/hamburger' | 'navigation/home' | 'navigation/home_solid' | 'navigation/loading' | 'navigation/lock' | 'navigation/lock_solid' | 'navigation/map_marker' | 'navigation/map_marker_light' | 'navigation/map_solid' | 'navigation/menu_lines' | 'navigation/search' | 'navigation/shaperbox' | 'navigation/shopping_bag' | 'navigation/shopping_bag_v2' | 'navigation/shopping_bag_v3' | 'navigation/shopping_bag_v4' | 'navigation/shopping_cart' | 'navigation/shopping_cart_v2' | 'navigation/slide_dot' | 'navigation/slide_dot_solid' | 'navigation/user' | 'navigation/address_information_light' | 'navigation/user_solid' | 'navigation/user_v2' | 'navigation/filters_v2' | 'navigation/gift';
 declare type Other$1 = 'other/bod_con_label' | 'other/bod_con_mobile_label' | 'other/call_us' | 'other/chat' | 'other/email' | 'other/express_shipping' | 'other/fit_guarantee' | 'other/fit_predictor' | 'other/free_exchange' | 'other/get_discount' | 'other/hassel_free_returns' | 'other/loading' | 'other/mc_afee' | 'other/megafone' | 'other/play' | 'other/qr_code' | 'other/question_with_circle' | 'other/revel_beauty' | 'other/shapermint' | 'other/shapermint_club_icon' | 'other/shapermint_club_icon2' | 'other/shapermint_club_label' | 'other/shapermint_club_mobile_label' | 'other/shapermint_logo' | 'other/shm_club' | 'other/shop_now' | 'other/sign_form' | 'other/sixty_days_tsd' | 'other/the_bod_con' | 'other/the_spa_dr' | 'other/lock' | 'other/help_center' | 'other/arrow_outward' | 'other/coupons' | 'other/flag_usa' | 'other/flag_canada' | 'other/flag_aus' | 'other/flag_uk' | 'other/flag_nz' | 'other/flag_sg';
@@ -698,6 +698,8 @@ declare const LightBulbSolid: IconComponent;
 
 declare const Mail: IconComponent;
 
+declare const MailSent: IconComponent;
+
 declare const Messenger: IconComponent;
 
 declare const QuestionCircle: IconComponent;
@@ -720,6 +722,7 @@ declare const Messaging_CommentMoney: typeof CommentMoney;
 declare const Messaging_Light: typeof Light;
 declare const Messaging_LightBulbSolid: typeof LightBulbSolid;
 declare const Messaging_Mail: typeof Mail;
+declare const Messaging_MailSent: typeof MailSent;
 declare const Messaging_Messenger: typeof Messenger;
 declare const Messaging_QuestionCircle: typeof QuestionCircle;
 declare const Messaging_QuestionCircleLight: typeof QuestionCircleLight;
@@ -739,6 +742,7 @@ declare namespace Messaging {
     LightBulb$1 as LightBulb,
     Messaging_LightBulbSolid as LightBulbSolid,
     Messaging_Mail as Mail,
+    Messaging_MailSent as MailSent,
     Messaging_Messenger as Messenger,
     Messaging_QuestionCircle as QuestionCircle,
     Messaging_QuestionCircleLight as QuestionCircleLight,
@@ -1584,9 +1588,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -1599,11 +1601,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -2433,15 +2443,32 @@ declare type ThemeComponent = {
         };
     };
 };
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
+};
 declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -2525,7 +2552,42 @@ declare const Viewports: {
     readonly desktop: "desktop";
     readonly desktopLarge: "desktopLarge";
 };
-declare type Viewport = typeof Viewports[keyof typeof Viewports];
+declare type Viewport = typeof Viewports[keyof typeof Viewports];
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+};
 
 declare type ThemeProviderProps = {
     config?: Theme$1['config'];

package/build/lib/components/icons/Messaging/MailSent.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),r=require("react/jsx-runtime");require("../../atoms/PriceLabel/PriceLabel.js"),require("../../atoms/PriceLabelV2/PriceLabelV2.js"),require("../../atoms/ClubPriceMemberLabel/ClubPriceMemberLabel.styled.js"),require("../../atoms/HorizontalDivider/HorizontalDivider.js");var i=require("../../atoms/Icon/Icon.js");require("../../atoms/Image/Image.js"),require("react"),require("../../atoms/Toggle/toggle.styled.js");exports.MailSent=function(s){return r.jsx(i.Icon,e.__assign({},s,{name:"messaging/mail_sent"}),void 0)};
+//# sourceMappingURL=MailSent.js.map

package/build/lib/components/icons/Messaging/MailSent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MailSent.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/lib/components/icons/Messaging/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./AdaChat.js"),t=require("./Comment.js"),o=require("./CommentDots.js"),i=require("./CommentLight.js"),r=require("./CommentMoney.js"),s=require("./Community.js"),u=require("./Light.js"),m=require("./LightBulb.js"),n=require("./LightBulbSolid.js"),l=require("./Mail.js"),g=require("./Messenger.js"),h=require("./QuestionCircle.js"),C=require("./QuestionCircleLight.js"),L=require("./QuoteLeft.js"),p=require("./QuoteRight.js"),j=require("./QuoteSolidLeft.js"),x=require("./QuoteSolidRight.js");exports.AdaChat=e.AdaChat,exports.Comment=t.Comment,exports.CommentDots=o.CommentDots,exports.CommentLight=i.CommentLight,exports.CommentMoney=r.CommentMoney,exports.Community=s.Community,exports.Light=u.Light,exports.LightBulb=m.LightBulb,exports.LightBulbSolid=n.LightBulbSolid,exports.Mail=l.Mail,exports.Messenger=g.Messenger,exports.QuestionCircle=h.QuestionCircle,exports.QuestionCircleLight=C.QuestionCircleLight,exports.QuoteLeft=L.QuoteLeft,exports.QuoteRight=p.QuoteRight,exports.QuoteSolidLeft=j.QuoteSolidLeft,exports.QuoteSolidRight=x.QuoteSolidRight;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./AdaChat.js"),t=require("./Comment.js"),i=require("./CommentDots.js"),o=require("./CommentLight.js"),r=require("./CommentMoney.js"),s=require("./Community.js"),u=require("./Light.js"),n=require("./LightBulb.js"),m=require("./LightBulbSolid.js"),l=require("./Mail.js"),g=require("./MailSent.js"),h=require("./Messenger.js"),C=require("./QuestionCircle.js"),L=require("./QuestionCircleLight.js"),p=require("./QuoteLeft.js"),j=require("./QuoteRight.js"),x=require("./QuoteSolidLeft.js"),q=require("./QuoteSolidRight.js");exports.AdaChat=e.AdaChat,exports.Comment=t.Comment,exports.CommentDots=i.CommentDots,exports.CommentLight=o.CommentLight,exports.CommentMoney=r.CommentMoney,exports.Community=s.Community,exports.Light=u.Light,exports.LightBulb=n.LightBulb,exports.LightBulbSolid=m.LightBulbSolid,exports.Mail=l.Mail,exports.MailSent=g.MailSent,exports.Messenger=h.Messenger,exports.QuestionCircle=C.QuestionCircle,exports.QuestionCircleLight=L.QuestionCircleLight,exports.QuoteLeft=p.QuoteLeft,exports.QuoteRight=j.QuoteRight,exports.QuoteSolidLeft=x.QuoteSolidLeft,exports.QuoteSolidRight=q.QuoteSolidRight;
 //# sourceMappingURL=index.js.map

package/build/lib/core/theme/defaults.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.DEFAULT_BREAKPOINTS={mobile:640,tablet:1024,desktop:1280};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.DEFAULT_BREAKPOINTS={mobile:640,tablet:1024,desktop:1280,xs:"480px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};
 //# sourceMappingURL=defaults.js.map

package/build/theme/revel.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
         };
     };
 };
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
+};
 declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const revel: Theme;

package/build/theme/revel.theme.js

@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var revel = {

package/build/theme/shapermint.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
         };
     };
 };
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
+};
 declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const shapermint: Theme;

package/build/theme/shapermint.theme.js

@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var shapermint = {
@@ -860,10 +866,38 @@ var shapermint = {
                 heavy: 900,
                 bold: 700,
                 demi: 600,
+                medium: 500,
                 regular: 400,
             },
         },
+        size: {
+            xxs: '10px',
+            xs: '12px',
+            sm: '14px',
+            md: '16px',
+            lg: '18px',
+            xl: '20px',
+            '2xl': '24px',
+            '3xl': '30px',
+            '4xl': '36px',
+            '5xl': '42px',
+            '6xl': '52px',
+            '7xl': '60px',
+        },
+        lineHeight: {
+            xs: '16px',
+            sm: '20px',
+            md: '22px',
+            lg: '24px',
+            xl: '28px',
+            '2xl': '32px',
+            '3xl': '40px',
+            '4xl': '48px',
+            '5xl': '68px',
+            '6xl': '76px',
+        },
         variants: {
+            // to be removed after new foundation is implemented starting here
             hero1: {
                 fontSize: 76,
                 lineHeight: '92px',
@@ -991,6 +1025,230 @@ var shapermint = {
                 fontSize: 8,
                 lineHeight: '12px',
             },
+            // to be removed after new foundation is implemented ending here
+            // new foundation
+            // display1new: {
+            //   desktop: {
+            //     fontSize: '--typography-size-7xl-desktop',
+            //     lineHeight: '--typography-line-height-6xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-7xl-mobile',
+            //     lineHeight: '--typography-line-height-6xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-7xl-tablet',
+            //     lineHeight: '--typography-line-height-6xl-tablet',
+            //   },
+            // },
+            // display2new: {
+            //   desktop: {
+            //     fontSize: '--typography-size-6xl-desktop',
+            //     lineHeight: '--typography-line-height-5xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-6xl-mobile',
+            //     lineHeight: '--typography-line-height-5xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-6xl-tablet',
+            //     lineHeight: '--typography-line-height-5xl-tablet',
+            //   },
+            // },
+            // h1: {
+            //   desktop: {
+            //     fontSize: '--typography-size-5xl-desktop',
+            //     lineHeight: '--typography-line-height-4xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-5xl-mobile',
+            //     lineHeight: '--typography-line-height-4xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-5xl-tablet',
+            //     lineHeight: '--typography-line-height-4xl-tablet',
+            //   },
+            // },
+            // h2: {
+            //   desktop: {
+            //     fontSize: '--typography-size-4xl-desktop',
+            //     lineHeight: '--typography-line-height-3xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-4xl-mobile',
+            //     lineHeight: '--typography-line-height-3xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-4xl-tablet',
+            //     lineHeight: '--typography-line-height-3xl-tablet',
+            //   },
+            // },
+            // h3: {
+            //   desktop: {
+            //     fontSize: '--typography-size-3xl-desktop',
+            //     lineHeight: '--typography-line-height-3xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-3xl-mobile',
+            //     lineHeight: '--typography-line-height-3xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-3xl-tablet',
+            //     lineHeight: '--typography-line-height-3xl-tablet',
+            //   },
+            // },
+            // h4: {
+            //   desktop: {
+            //     fontSize: '--typography-size-2xl-desktop',
+            //     lineHeight: '--typography-line-height-2xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-2xl-mobile',
+            //     lineHeight: '--typography-line-height-2xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-2xl-tablet',
+            //     lineHeight: '--typography-line-height-2xl-tablet',
+            //   },
+            // },
+            // h5: {
+            //   desktop: {
+            //     fontSize: '--typography-size-xl-desktop',
+            //     lineHeight: '--typography-line-height-xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-xl-mobile',
+            //     lineHeight: '--typography-line-height-xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-xl-tablet',
+            //     lineHeight: '--typography-line-height-xl-tablet',
+            //   },
+            // },
+            // h6: {
+            //   desktop: {
+            //     fontSize: '--typography-size-lg-desktop',
+            //     lineHeight: '--typography-line-height-lg-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-lg-mobile',
+            //     lineHeight: '--typography-line-height-lg-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-lg-tablet',
+            //     lineHeight: '--typography-line-height-lg-tablet',
+            //   },
+            // },
+            // 'body-lg': {
+            //   desktop: {
+            //     fontSize: '--typography-size-lg-desktop',
+            //     lineHeight: '--typography-line-height-xl-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-lg-mobile',
+            //     lineHeight: '--typography-line-height-xl-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-lg-tablet',
+            //     lineHeight: '--typography-line-height-xl-tablet',
+            //   },
+            // },
+            // 'body-md': {
+            //   desktop: {
+            //     fontSize: '--typography-size-md-desktop',
+            //     lineHeight: '--typography-line-height-lg-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-md-mobile',
+            //     lineHeight: '--typography-line-height-lg-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-md-tablet',
+            //     lineHeight: '--typography-line-height-lg-tablet',
+            //   },
+            // },
+            // 'body-sm': {
+            //   desktop: {
+            //     fontSize: '--typography-size-sm-desktop',
+            //     lineHeight: '--typography-line-height-md-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-sm-mobile',
+            //     lineHeight: '--typography-line-height-md-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-sm-tablet',
+            //     lineHeight: '--typography-line-height-md-tablet',
+            //   },
+            // },
+            // 'button-md': {
+            //   desktop: {
+            //     fontSize: '--typography-size-md-desktop',
+            //     lineHeight: '--typography-line-height-md-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-md-mobile',
+            //     lineHeight: '--typography-line-height-md-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-md-tablet',
+            //     lineHeight: '--typography-line-height-md-tablet',
+            //   },
+            // },
+            // 'button-sm': {
+            //   desktop: {
+            //     fontSize: '--typography-size-sm-desktop',
+            //     lineHeight: '--typography-line-height-sm-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-sm-mobile',
+            //     lineHeight: '--typography-line-height-sm-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-sm-tablet',
+            //     lineHeight: '--typography-line-height-sm-tablet',
+            //   },
+            // },
+            // 'caption-xxs': {
+            //   // to be replaced with caption after new foundation is implemented
+            //   desktop: {
+            //     fontSize: '--typography-size-xs-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-xs-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-xs-tablet',
+            //   },
+            // },
+            // 'label-md': {
+            //   desktop: {
+            //     fontSize: '--typography-size-sm-desktop',
+            //     lineHeight: '--typography-line-height-sm-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-sm-mobile',
+            //     lineHeight: '--typography-line-height-sm-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-sm-tablet',
+            //     lineHeight: '--typography-line-height-sm-tablet',
+            //   },
+            // },
+            // 'label-sm': {
+            //   desktop: {
+            //     fontSize: '--typography-size-xs-desktop',
+            //     lineHeight: '--typography-line-height-xs-desktop',
+            //   },
+            //   mobile: {
+            //     fontSize: '--typography-size-xs-mobile',
+            //     lineHeight: '--typography-line-height-xs-mobile',
+            //   },
+            //   tablet: {
+            //     fontSize: '--typography-size-xs-tablet',
+            //     lineHeight: '--typography-line-height-xs-tablet',
+            //   },
+            // },
         },
     },
     fonts: {

package/build/theme/thebodcon.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
         };
     };
 };
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
+};
 declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const thebodcon: Theme;

package/build/theme/thebodcon.theme.js

@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var thebodcon = {

package/build/theme/thespadr.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
         };
     };
 };
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
+};
 declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const thespadr: Theme;

package/build/theme/thespadr.theme.js

@@ -36,6 +36,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var thespadr = {
@@ -46,6 +52,11 @@ var thespadr = {
     mediaQueries: DEFAULT_BREAKPOINTS,
     radius: {
         regular: '8px',
+        none: '0px',
+        md: '4px',
+        lg: '8px',
+        xl: '16px',
+        full: '9999px',
     },
     zIndex: {
         modal: 50,
@@ -1033,10 +1044,38 @@ var thespadr = {
                 heavy: 800,
                 bold: 700,
                 demi: 500,
+                medium: 500,
                 regular: 400,
             },
         },
+        size: {
+            xxs: '10px',
+            xs: '12px',
+            sm: '14px',
+            md: '16px',
+            lg: '18px',
+            xl: '20px',
+            '2xl': '24px',
+            '3xl': '30px',
+            '4xl': '36px',
+            '5xl': '42px',
+            '6xl': '52px',
+            '7xl': '60px',
+        },
+        lineHeight: {
+            xs: '16px',
+            sm: '20px',
+            md: '22px',
+            lg: '24px',
+            xl: '28px',
+            '2xl': '32px',
+            '3xl': '40px',
+            '4xl': '48px',
+            '5xl': '68px',
+            '6xl': '76px',
+        },
         variants: {
+            // to be removed after new foundation is implemented starting from here
             hero1: {
                 fontSize: 76,
                 lineHeight: '92px',
@@ -1156,6 +1195,83 @@ var thespadr = {
                 fontSize: 12,
                 lineHeight: '14px',
             },
+            // to be removed after new foundation is implemented ending here
+            display: {
+                fontSize: '--typography-size-6xl',
+                lineHeight: '--typography-line-height-5xl',
+            },
+            'heading-xl': {
+                fontSize: '--typography-size-3xl',
+                lineHeight: '--typography-line-height-3xl',
+            },
+            'heading-lg': {
+                fontSize: '--typography-size-2xl',
+                lineHeight: '--typography-line-height-2xl',
+            },
+            'subtitle-md': {
+                fontSize: '--typography-size-xl',
+                lineHeight: '--typography-line-height-xl',
+            },
+            'subtitle-sm': {
+                fontSize: '--typography-size-lg',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'body-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'body-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-md',
+            },
+            'price-lg': {
+                fontSize: '--typography-size-lg',
+                lineHeight: '--typography-line-height-xl',
+            },
+            'price-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'button-lg': {
+                fontSize: '--typography-size-lg',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'button-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-md',
+            },
+            'button-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-sm',
+            },
+            'caption-xxs': {
+                // to be replaced with caption after new foundation is implemented
+                fontSize: '--typography-size-xxs',
+            },
+            'label-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'label-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-sm',
+            },
+            'label-xs': {
+                fontSize: '--typography-size-xs',
+                lineHeight: '--typography-line-height-xs',
+            },
+            'link-md': {
+                fontSize: '--typography-size-md',
+                lineHeight: '--typography-line-height-lg',
+            },
+            'link-sm': {
+                fontSize: '--typography-size-sm',
+                lineHeight: '--typography-line-height-md',
+            },
+            'link-xs': {
+                fontSize: '--typography-size-xs',
+                lineHeight: '--typography-line-height-sm',
+            },
         },
     },
     fonts: {
@@ -1335,6 +1451,33 @@ var thespadr = {
     label: {
         member: '',
     },
+    space: {
+        0: '0px',
+        25: '2px',
+        50: '4px',
+        75: '6px',
+        100: '8px',
+        150: '12px',
+        200: '16px',
+        250: '20px',
+        300: '24px',
+        400: '32px',
+        500: '40px',
+        600: '48px',
+        800: '64px',
+        1000: '80px',
+        1200: '96px',
+        1600: '128px',
+        2000: '160px',
+    },
+    shadow: {
+        100: '0px 1px 4px 0px rgba(12, 12, 13, 0.05);',
+        200: '0px 4px 6px -2px rgba(12, 12, 13, 0.10), 0px 2px 4px -2px rgba(12, 12, 13, 0.05)',
+        300: '0px 12px 16px -4px rgba(12, 12, 13, 0.08), 0px 4px 4px -2px rgba(12, 12, 13, 0.05)',
+        400: '0px 16px 32px -4px rgba(12, 12, 13, 0.10), 0px 4px 4px -4px rgba(12, 12, 13, 0.05)',
+        500: '0px 16px 32px -8px rgba(12, 12, 13, 0.40)',
+        600: '0px 0px 0px 4px rgba(69, 122, 65, 0.30)',
+    },
 };
 
 exports["default"] = thespadr;

package/build/theme/truekind.theme.d.ts

@@ -20,9 +20,7 @@ declare type Theme = {
     fontWeights: number[];
     lineHeights: number[];
     mediaQueries: ThemeBreakpoints;
-    radius: {
-        regular: string;
-    };
+    radius: ThemeRadius;
     zIndex: {
         modal: number;
         overlay: number;
@@ -35,11 +33,19 @@ declare type Theme = {
     label: {
         member: string;
     };
+    space?: ThemeSpacing;
+    shadow?: ThemeElevation;
 };
 declare type ThemeBreakpoints = {
     mobile: number;
     tablet: number;
     desktop: number;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
 };
 declare type ThemeBasicPallete = {
     color: string;
@@ -869,15 +875,32 @@ declare type ThemeComponent = {
         };
     };
 };
+declare type SizeConfig = {
+    xxs?: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl'?: string;
+};
 declare type ThemeTypography = {
     config: {
         weight: {
             heavy: number;
             bold: number;
             demi: number;
+            medium?: number;
             regular: number;
         };
     };
+    size?: SizeConfig;
+    lineHeight?: Omit<SizeConfig, 'xxs' | '7xl'>;
     variants: Record<string, CSSProperties>;
 };
 declare type ThemeFonts = {
@@ -954,6 +977,41 @@ declare type ThemeAssets = {
         };
     };
     [key: string]: any;
+};
+declare type ThemeSpacing = {
+    0?: string;
+    25?: string;
+    50: string;
+    75: string;
+    100: string;
+    150: string;
+    200: string;
+    250: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    800?: string;
+    1000?: string;
+    1200?: string;
+    1600?: string;
+    2000?: string;
+};
+declare type ThemeRadius = {
+    regular: string;
+    none?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    full?: string;
+};
+declare type ThemeElevation = {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
 };
 
 declare const truekind: Theme;

package/build/theme/truekind.theme.js

@@ -67,6 +67,12 @@ var DEFAULT_BREAKPOINTS = {
     mobile: 640,
     tablet: 1024,
     desktop: 1280,
+    xs: '480px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
 };
 
 var truekind = {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "private": false,
   "main": "build/lib/index.js",
   "style": "build/es/index.css",