react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/components/ag-grid/types.js

@@ -0,0 +1,6 @@
+/**
+ * AG Grid-like Types
+ * Comprehensive type definitions matching AG Grid's API
+ * Reference: https://www.ag-grid.com/react-data-grid/getting-started/
+ */
+export {};

package/lib/src/core-components/src/components/index.d.ts

@@ -27,3 +27,4 @@ export * from './SpeedDial';
 export * from './Masonry';
 export * from './TreeSelect';
 export * from './Table';
+export * from './ag-grid';

package/lib/src/core-components/src/components/index.js

@@ -1 +1,31 @@
-"use strict";export*from"./Accordion/AccordionSection";export*from"./Accordion/Collapsible/Collapsible2.component";export*from"./AutoComplete";export*from"./Avatar/Avatar";export*from"./Badge/Badge";export*from"./Button";export*from"./FormField";export*from"./Icon";export*from"./Loader/loader.component";export*from"./Modal";export*from"./Picker";export*from"./Selection";export*from"./Stepper2/stepper.component";export*from"./Tabs/tabs.component";export*from"./Tags1/Tags.component";export*from"./Timer1/timer.component";export*from"./Tooltip";export*from"./Breadcrumb";export*from"./DynamicGrid";export*from"./AlertBanner";export*from"./Chip";export*from"./Divider";export*from"./Skeleton";export*from"./Switch";export*from"./Toast";export*from"./SpeedDial";export*from"./Masonry";export*from"./TreeSelect";export*from"./Table";
+export * from './Accordion/AccordionSection';
+export * from './Accordion/Collapsible/Collapsible2.component';
+export * from './AutoComplete';
+export * from './Avatar/Avatar';
+export * from './Badge/Badge';
+export * from './Button';
+export * from './FormField';
+export * from './Icon';
+export * from './Loader/loader.component';
+export * from './Modal';
+export * from './Picker';
+export * from './Selection';
+export * from './Stepper2/stepper.component';
+export * from './Tabs/tabs.component';
+export * from './Tags1/Tags.component';
+export * from './Timer1/timer.component';
+export * from './Tooltip';
+// New components
+export * from './Breadcrumb';
+export * from './DynamicGrid';
+export * from './AlertBanner';
+export * from './Chip';
+export * from './Divider';
+export * from './Skeleton';
+export * from './Switch';
+export * from './Toast';
+export * from './SpeedDial';
+export * from './Masonry';
+export * from './TreeSelect';
+export * from './Table';
+export * from './ag-grid';

package/lib/src/core-components/src/components/pdf/pdf-images.components.js

@@ -1 +1,7 @@
-"use strict";import{jsx as r,Fragment as m}from"react/jsx-runtime";import{Image as e}from"@react-pdf/renderer";export const PdfImage=({src:t="https://picsum.photos/200/300",style:s})=>r(m,{children:r(e,{style:{...s},src:t})});
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from '@react-pdf/renderer';
+export const PdfImage = ({ src = 'https://picsum.photos/200/300', style, }) => {
+    return (_jsx(_Fragment, { children: _jsx(Image, { style: {
+                ...style,
+            }, src: src }) }));
+};

package/lib/src/core-components/src/components/pdf/pdf-table.components.js

@@ -1,5 +1,48 @@
-"use strict";import{jsx as t,Fragment as g,jsxs as s}from"react/jsx-runtime";import{Text as x,View as a,StyleSheet as m}from"@react-pdf/renderer";import{PdfSmall as l}from"./pdf-typography.components";import{PdfBorderView as p}from"./pdf-wrapped-view.components";const r=m.create({table:{borderColor:"#000000",borderWidth:1,marginHorizontal:20,flexFlow:1},tableRow:{flexDirection:"row"},headerBg:{backgroundColor:"#aaa",borderStyle:"solid",borderColor:"#000000",borderWidth:1},tableCellHeader:{margin:2,fontSize:10,fontWeight:"bold",textAlign:"center"},tableCell:{margin:2,fontSize:12},textCenter:{textAlign:"center"}});export const PdfTable=({headerFixed:c=!1,fields:d,data:h,style:y,headerStyle:b})=>s(a,{style:[r.table,{...y}],children:[t(a,{style:[r.tableRow,r.headerBg,{...b}],fixed:c,children:d.map((n,o)=>t(a,{style:[{width:n.width+"%"}],children:t(x,{style:[r.tableCellHeader],children:n?.title})},o))}),h?.map((n,o)=>t(a,{style:r.tableRow,children:Object.entries(n).map((e,i)=>t(p,{style:{width:d[i]?.width+"%",borderStyle:"solid"},mh:0,mv:0,p:0,bw:1,borderColor:"#000000",children:typeof e[1]=="object"?s(g,{children:[t(l,{style:{textAlign:"center"},children:e[1]?.panelDesc?`Panel Description : ${e[1]?.panelDesc} 
-`:""}),t(l,{style:{textAlign:"center"},children:e[1]?.panelMethodName?`Panel Method Name: ${e[1]?.panelMethodName} 
-`:""}),t(l,{style:{textAlign:"center"},children:e[1]?.testMethodName?`Test Method Name: ${e[1]?.testMethodName} 
-`:""}),t(l,{style:{textAlign:"center"},children:e[1]?.analyteDesc?`Analyte Description: ${e[1]?.analyteDesc} 
-`:""}),t(l,{style:{textAlign:"center"},children:e[1]?.analyteMethodName?`Analyte Method Name: ${e[1]?.analyteMethodName}`:""})]}):t(l,{style:{textAlign:"center"},children:e[1]||""})},i))},o))]});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View, StyleSheet } from '@react-pdf/renderer';
+import { PdfSmall } from './pdf-typography.components';
+import { PdfBorderView } from './pdf-wrapped-view.components';
+const styles = StyleSheet.create({
+    table: {
+        borderColor: '#000000',
+        borderWidth: 1,
+        marginHorizontal: 20,
+        flexFlow: 1,
+    },
+    tableRow: {
+        flexDirection: 'row',
+    },
+    headerBg: {
+        backgroundColor: '#aaa',
+        borderStyle: 'solid',
+        borderColor: '#000000',
+        borderWidth: 1,
+    },
+    tableCellHeader: {
+        margin: 2,
+        fontSize: 10,
+        fontWeight: 'bold',
+        textAlign: 'center',
+    },
+    tableCell: {
+        margin: 2,
+        fontSize: 12,
+    },
+    textCenter: {
+        textAlign: 'center',
+    },
+});
+export const PdfTable = ({ headerFixed = false, fields, data, style, headerStyle, }) => (_jsxs(View, { style: [styles.table, { ...style }], children: [_jsx(View, { style: [styles.tableRow, styles.headerBg, { ...headerStyle }], fixed: headerFixed, children: fields.map((item, index) => (_jsx(View, { style: [{ width: item.width + '%' }], children: _jsx(Text, { style: [styles.tableCellHeader], children: item?.title }) }, index))) }), data?.map((item, index) => (_jsx(View, { style: styles.tableRow, children: Object.entries(item).map((_item, _idx) => (_jsx(PdfBorderView, { style: {
+                    width: fields[_idx]?.width + '%',
+                    borderStyle: 'solid',
+                }, mh: 0, mv: 0, p: 0, bw: 1, borderColor: "#000000", children: typeof _item[1] == 'object' ? (_jsxs(_Fragment, { children: [_jsx(PdfSmall, { style: { textAlign: 'center' }, children: _item[1]?.panelDesc
+                                ? `Panel Description : ${_item[1]?.panelDesc} \n`
+                                : '' }), _jsx(PdfSmall, { style: { textAlign: 'center' }, children: _item[1]?.panelMethodName
+                                ? `Panel Method Name: ${_item[1]?.panelMethodName} \n`
+                                : '' }), _jsx(PdfSmall, { style: { textAlign: 'center' }, children: _item[1]?.testMethodName
+                                ? `Test Method Name: ${_item[1]?.testMethodName} \n`
+                                : '' }), _jsx(PdfSmall, { style: { textAlign: 'center' }, children: _item[1]?.analyteDesc
+                                ? `Analyte Description: ${_item[1]?.analyteDesc} \n`
+                                : '' }), _jsx(PdfSmall, { style: { textAlign: 'center' }, children: _item[1]?.analyteMethodName
+                                ? `Analyte Method Name: ${_item[1]?.analyteMethodName}`
+                                : '' })] })) : (_jsx(PdfSmall, { style: { textAlign: 'center' }, children: _item[1] || '' })) }, _idx))) }, index)))] }));

package/lib/src/core-components/src/components/pdf/pdf-typography.components.js

@@ -1 +1,70 @@
-"use strict";import{jsx as l}from"react/jsx-runtime";import{Text as n,Font as f}from"@react-pdf/renderer";f.register({family:"ArimaBold",fonts:[{src:"../../../library/assets/fonts/arima/arima-bold.ttf",fontStyle:"normal",fontWeight:"bold"}]}),f.register({family:"ArimaRegular",src:"../../../library/assets/fonts/arima/arima-regular.ttf"});export const PdfHeading=({fontWeight:t="bold",fontSize:e=22,fontFamily:r="ArimaRegular",style:i,children:o})=>l(n,{style:{fontWeight:t,fontSize:e,fontFamily:r,...i},children:o}),PdfSubHeading=({fontWeight:t="bold",fontSize:e=20,fontFamily:r="ArimaRegular",style:i,children:o})=>l(n,{style:{fontWeight:t,fontSize:e,fontFamily:r,...i},children:o}),PdfMedium=({fontWeight:t="medium",fontSize:e=16,textAlign:r="left",fontFamily:i="ArimaRegular",style:o,children:a})=>l(n,{style:{fontWeight:t,fontSize:e,fontFamily:i,textAlign:r,...o},children:a}),PdfRegular=({fontWeight:t="normal",fontSize:e=12,textAlign:r="left",fontFamily:i="ArimaRegular",style:o,children:a})=>l(n,{style:{fontWeight:t,fontSize:e,fontFamily:i,textAlign:r,...o},children:a}),PdfSmall=({fontSize:t=10,fontFamily:e="ArimaRegular",fontWeight:r="normal",textAlign:i="left",lineHeight:o=0,fixed:a=!1,style:m,children:s})=>l(n,{style:{fontSize:t,fontFamily:e,fontWeight:r,lineHeight:o,textAlign:i,...m},fixed:a,children:s}),PdfPageNumber=({style:t,bottom:e=55})=>l(n,{style:{position:"absolute",bottom:e,right:14,fontSize:10,color:"black",...t},render:({pageNumber:r,totalPages:i})=>`Page ${r} of ${i}`,fixed:!0});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, Font } from '@react-pdf/renderer';
+Font.register({
+    family: 'ArimaBold',
+    fonts: [
+        {
+            src: '../../../library/assets/fonts/arima/arima-bold.ttf',
+            fontStyle: 'normal',
+            fontWeight: 'bold',
+        },
+    ],
+});
+Font.register({
+    family: 'ArimaRegular',
+    src: '../../../library/assets/fonts/arima/arima-regular.ttf',
+});
+export const PdfHeading = ({ fontWeight = 'bold', fontSize = 22, fontFamily = 'ArimaRegular', style, children, }) => {
+    return (_jsx(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            ...style,
+        }, children: children }));
+};
+export const PdfSubHeading = ({ fontWeight = 'bold', fontSize = 20, fontFamily = 'ArimaRegular', style, children, }) => {
+    return (_jsx(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            ...style,
+        }, children: children }));
+};
+export const PdfMedium = ({ fontWeight = 'medium', fontSize = 16, textAlign = 'left', fontFamily = 'ArimaRegular', style, children, }) => {
+    return (_jsx(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            textAlign: textAlign,
+            ...style,
+        }, children: children }));
+};
+export const PdfRegular = ({ fontWeight = 'normal', fontSize = 12, textAlign = 'left', fontFamily = 'ArimaRegular', style, children, }) => {
+    return (_jsx(Text, { style: {
+            fontWeight: fontWeight,
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            textAlign: textAlign,
+            ...style,
+        }, children: children }));
+};
+export const PdfSmall = ({ fontSize = 10, fontFamily = 'ArimaRegular', fontWeight = 'normal', textAlign = 'left', lineHeight = 0, fixed = false, style, children, }) => {
+    return (_jsx(Text, { style: {
+            fontSize: fontSize,
+            fontFamily: fontFamily,
+            fontWeight: fontWeight,
+            lineHeight: lineHeight,
+            textAlign: textAlign,
+            ...style,
+        }, fixed: fixed, children: children }));
+};
+export const PdfPageNumber = ({ style, bottom = 55 }) => {
+    return (_jsx(Text, { style: {
+            position: 'absolute',
+            bottom: bottom,
+            right: 14,
+            fontSize: 10,
+            color: 'black',
+            ...style,
+        }, render: ({ pageNumber, totalPages }) => `Page ${pageNumber} of ${totalPages}`, fixed: true }));
+};

package/lib/src/core-components/src/components/pdf/pdf-wrapped-view.components.js

@@ -1 +1,50 @@
-"use strict";import{jsx as d}from"react/jsx-runtime";import{View as l}from"@react-pdf/renderer";export const PdfView=({mh:e=20,p:r=2,flexDirection:o="column",style:n,fixed:t=!1,isBreak:i=!1,alignItems:a,mt:s,isWrap:f=!0,children:c})=>d(l,{break:i,style:{marginHorizontal:e,marginTop:s,padding:r,flexDirection:o,alignItems:a,...n},fixed:t,wrap:f,children:c}),PdfBorderView=({mh:e=20,mv:r=50,p:o=2,borderColor:n="gray",bw:t=2,style:i,flexDirection:a="column",fixed:s=!1,isBreak:f=!1,children:c})=>d(l,{break:f,style:{flexDirection:a,marginHorizontal:e,marginVertical:r,padding:o,borderColor:n,borderWidth:t,...i},fixed:s,children:c}),PdfHeader=({bg:e="orange",p:r=10,alignItems:o="flex-start",fixed:n=!1,style:t,children:i})=>d(l,{style:{backgroundColor:e,alignItems:o,padding:r,...t},fixed:n,children:i}),PdfSubHeader=({bg:e="yellow",p:r=4,alignItems:o="flex-end",fixed:n=!1,style:t,children:i})=>d(l,{style:{backgroundColor:e,alignItems:o,padding:r,...t},fixed:n,children:i}),PdfFooterView=({bottom:e=0,left:r=0,right:o=0,bg:n="orange",p:t=10,alignItems:i="center",fixed:a=!1,height:s="100%",style:f,children:c})=>d(l,{style:[{position:"absolute",bottom:e,left:r,right:o,height:s},{backgroundColor:n,padding:t,alignItems:i,...f}],fixed:a,children:c}),PdfGrid=({cols:e=1,bg:r="white",style:o,children:n})=>d(l,{style:{width:`${100/e}%`,backgroundColor:r,...o},children:n});
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from '@react-pdf/renderer';
+export const PdfView = ({ mh = 20, p = 2, flexDirection = 'column', style, fixed = false, isBreak = false, alignItems, mt, isWrap = true, children, }) => {
+    return (_jsx(View, { break: isBreak, style: {
+            marginHorizontal: mh,
+            marginTop: mt,
+            padding: p,
+            flexDirection: flexDirection,
+            alignItems: alignItems,
+            ...style,
+        }, fixed: fixed, wrap: isWrap, children: children }));
+};
+export const PdfBorderView = ({ mh = 20, mv = 50, p = 2, borderColor = 'gray', bw = 2, style, flexDirection = 'column', fixed = false, isBreak = false, children, }) => {
+    return (_jsx(View, { break: isBreak, style: {
+            flexDirection: flexDirection,
+            marginHorizontal: mh,
+            marginVertical: mv,
+            padding: p,
+            borderColor: borderColor,
+            borderWidth: bw,
+            ...style,
+        }, fixed: fixed, children: children }));
+};
+export const PdfHeader = ({ bg = 'orange', p = 10, alignItems = 'flex-start', fixed = false, style, children, }) => {
+    return (_jsx(View, { style: {
+            backgroundColor: bg,
+            alignItems: alignItems,
+            padding: p,
+            ...style,
+        }, fixed: fixed, children: children }));
+};
+export const PdfSubHeader = ({ bg = 'yellow', p = 4, alignItems = 'flex-end', fixed = false, style, children, }) => {
+    return (_jsx(View, { style: {
+            backgroundColor: bg,
+            alignItems: alignItems,
+            padding: p,
+            ...style,
+        }, fixed: fixed, children: children }));
+};
+export const PdfFooterView = ({ bottom = 0, left = 0, right = 0, bg = 'orange', p = 10, alignItems = 'center', fixed = false, height = '100%', style, children, }) => {
+    return (_jsx(View, { style: [
+            { position: 'absolute', bottom, left, right, height },
+            { backgroundColor: bg, padding: p, alignItems: alignItems, ...style },
+        ], fixed: fixed, children: children }));
+};
+export const PdfGrid = ({ cols = 1, bg = 'white', style, children, }) => (_jsx(View, { style: {
+        width: `${100 / cols}%`,
+        backgroundColor: bg,
+        ...style,
+    }, children: children }));

package/lib/src/core-components/src/core-components/Avatar.js

@@ -1,13 +1,42 @@
-"use strict";"use client";import{jsx as a}from"react/jsx-runtime";import{styled as n}from"styled-components";const o=({size:r,weight:e,children:t})=>a("span",{style:{fontSize:{1:"0.75rem",4:"1.25rem"}[r],fontWeight:{regular:400,heavy:700}[e]},children:t}),s=n.div`
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from 'styled-components';
+const Text = ({ size, weight, children, }) => {
+    return (_jsx("span", { style: {
+            fontSize: {
+                1: '0.75rem',
+                4: '1.25rem',
+            }[size],
+            fontWeight: {
+                regular: 400,
+                heavy: 700,
+            }[weight],
+        }, children: children }));
+};
+const StyledAvatarBackground = styled.div `
   background-color: var(--aui-primary);
   color: var(--aui-on-primary);
 
   flex-shrink: 0;
-  width: ${({$diameter:r})=>r};
-  height: ${({$diameter:r})=>r};
+  width: ${({ $diameter }) => $diameter};
+  height: ${({ $diameter }) => $diameter};
   border-radius: var(--aui-border-radius-round);
 
   display: inline-flex;
   justify-content: center;
   align-items: center;
-`;export const Avatar=({size:r,children:e})=>{const t={sm:"1.25rem",lg:"2rem"}[r],i={sm:1,lg:4}[r];return a(s,{"data-aui":"avatar",$diameter:t,children:a(o,{size:i,weight:"heavy",children:e})})};
+`;
+/**
+ * Internal Avatar component with basic feature set
+ */
+export const Avatar = ({ size, children }) => {
+    const diameter = {
+        sm: '1.25rem',
+        lg: '2rem',
+    }[size];
+    const fontSize = {
+        sm: 1,
+        lg: 4,
+    }[size];
+    return (_jsx(StyledAvatarBackground, { "data-aui": "avatar", "$diameter": diameter, children: _jsx(Text, { size: fontSize, weight: "heavy", children: children }) }));
+};

package/lib/src/core-components/src/core-components/CoreButton/CoreButton.js

@@ -1 +1,10 @@
-"use strict";"use client";import{jsx as e}from"react/jsx-runtime";import u from"react";import{ButtonElement as _}from"./elements";import{InternalProvider as d,useDeviceDetect as p}from"../../utils";import{DEFAULT_BUTTON_COLOR as F,DEFAULT_BUTTON_SIZE as U,DEFAULT_BUTTON_VARIANT as h}from"./types";export const CoreButton=u.forwardRef(({variant:r=h,color:t=F,ariaLabel:o,size:i=U,children:s,hasChildren:l=!0,iconSide:a="left",hasIcon:n=!1,options:m={useFigmaStyles:!1},...f},c)=>{const{isMobile:T}=p();return e(d,{children:e(_,{ref:c,"aria-label":o,size:i,variant:r,color:t,hasChildren:l,iconSide:a,hasIcon:n,useFigmaStyles:m.useFigmaStyles??!1,isMobile:T,...f,children:s})})});
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ButtonElement } from './elements';
+import { InternalProvider, useDeviceDetect } from '../../utils';
+import { DEFAULT_BUTTON_COLOR, DEFAULT_BUTTON_SIZE, DEFAULT_BUTTON_VARIANT, } from './types';
+export const CoreButton = React.forwardRef(({ variant = DEFAULT_BUTTON_VARIANT, color = DEFAULT_BUTTON_COLOR, ariaLabel, size = DEFAULT_BUTTON_SIZE, children, hasChildren = true, iconSide = 'left', hasIcon = false, options = { useFigmaStyles: false }, ...rest }, fRef) => {
+    const { isMobile } = useDeviceDetect();
+    return (_jsx(InternalProvider, { children: _jsx(ButtonElement, { ref: fRef, "aria-label": ariaLabel, size: size, variant: variant, color: color, hasChildren: hasChildren, iconSide: iconSide, hasIcon: hasIcon, useFigmaStyles: options.useFigmaStyles ?? false, isMobile: isMobile, ...rest, children: children }) }));
+});

package/lib/src/core-components/src/core-components/CoreButton/elements.js

@@ -1,100 +1,186 @@
-"use strict";"use client";import{styled as a}from"styled-components";import{colors as t,getFontSize as l,getFontWeight as g}from"../../utils";import{dontForwardProps as d}from"../../utils";const s=({size:e})=>({small:`
+'use client';
+// import {styled,StyledProps} from 'styled-components';
+import { styled } from 'styled-components';
+import { colors, getFontSize, getFontWeight } from '../../utils';
+import { dontForwardProps } from '../../utils';
+const getButtonSize = ({ size }) => ({
+    small: `
       height: 2rem;
       padding: 0.25rem 1rem;
-    `,medium:`
+    `,
+    medium: `
       height: 3rem;
       padding: 0.75rem 1.75rem;
-    `,large:`
+    `,
+    large: `
       height: 4rem;
       padding: 1rem 1.75rem;
-    `})[e],u=({theme:e,color:r,variant:n,isMobile:i})=>{if(i)return"";const o={...e,whiteHover:t.neutralBrighter}[`${r}Hover`];return{default:`
-      background: ${o};
-      border-color: ${o};
-    `,outline:`
-      background: ${r==="white"?"transparent":t.neutralBrightest};
-      border-color: ${r==="primary"?e.primary:o};
-      color: ${r==="primary"?e.primary:o};
-    `,flat:`
-      background: ${r==="white"?"transparent":t.neutralBrightest};
-      border-color: ${r==="white"?o:t.neutralBrightest};
+    `,
+})[size];
+const getHoverStyle = ({ theme, color, variant, isMobile, }) => {
+    if (isMobile)
+        return '';
+    const themeHover = {
+        ...theme,
+        whiteHover: colors.neutralBrighter,
+    }[`${color}Hover`];
+    return {
+        default: `
+      background: ${themeHover};
+      border-color: ${themeHover};
+    `,
+        outline: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrightest};
+      border-color: ${color === 'primary' ? theme.primary : themeHover};
+      color: ${color === 'primary' ? theme.primary : themeHover};
+    `,
+        flat: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrightest};
+      border-color: ${color === 'white' ? themeHover : colors.neutralBrightest};
       text-decoration: unset;
-      color: ${o};
-    `,text:`
-      color: ${o};
-    `}[n]},c=({theme:e,color:r,variant:n})=>{const i={...e,whitePressed:t.neutralBright}[`${r}Pressed`];return{default:`
-      background: ${i};
-      border-color: ${i};
-      color: ${{primary:e.textOnPrimary,secondary:e.textOnSecondary,white:t.black}[r]};
-    `,outline:`
-      background: ${r==="white"?"transparent":t.neutralBrighter};
-      border-color: ${i};
-      color: ${i};
-    `,flat:`
-      background: ${r==="white"?"transparent":t.neutralBrighter};
-      border-color: ${r==="white"?i:t.neutralBrighter};
-      color: ${i};
-    `,text:`
-      color: ${i};
-    `}[n]},m=({variant:e})=>({default:`
-      background: ${t.disabledBackground};
-      border-color: ${t.disabledBackground};
-    `,outline:`
-      border-color: ${t.disabledText};
-    `})[e],h=({theme:e,color:r,variant:n,hasIcon:i})=>{const o={...e,white:t.white}[r];return{default:`
-      background: ${o};
-      border-color: ${o};
-      color: ${{primary:e.textOnPrimary,secondary:e.textOnSecondary,white:t.black}[r]};
-    `,outline:`
+      color: ${themeHover};
+    `,
+        text: `
+      color: ${themeHover};
+    `,
+    }[variant];
+};
+const getActiveStyle = ({ theme, color, variant, }) => {
+    const themePressed = {
+        ...theme,
+        whitePressed: colors.neutralBright,
+    }[`${color}Pressed`];
+    return {
+        default: `
+      background: ${themePressed};
+      border-color: ${themePressed};
+      color: ${{
+            primary: theme.textOnPrimary,
+            secondary: theme.textOnSecondary,
+            white: colors.black,
+        }[color]};
+    `,
+        outline: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrighter};
+      border-color: ${themePressed};
+      color: ${themePressed};
+    `,
+        flat: `
+      background: ${color === 'white' ? 'transparent' : colors.neutralBrighter};
+      border-color: ${color === 'white' ? themePressed : colors.neutralBrighter};
+      color: ${themePressed};
+    `,
+        text: `
+      color: ${themePressed};
+    `,
+    }[variant];
+};
+const getDisabledStyle = ({ variant }) => ({
+    default: `
+      background: ${colors.disabledBackground};
+      border-color: ${colors.disabledBackground};
+    `,
+    outline: `
+      border-color: ${colors.disabledText};
+    `,
+})[variant];
+const getBaseStyle = ({ theme, color, variant, hasIcon, }) => {
+    const themeColor = {
+        ...theme,
+        white: colors.white,
+    }[color];
+    return {
+        default: `
+      background: ${themeColor};
+      border-color: ${themeColor};
+      color: ${{
+            primary: theme.textOnPrimary,
+            secondary: theme.textOnSecondary,
+            white: colors.black,
+        }[color]};
+    `,
+        outline: `
       background: transparent;
-      color: ${o};
-      border: 2px solid ${o};
-    `,flat:`
+      color: ${themeColor};
+      border: 2px solid ${themeColor};
+    `,
+        flat: `
       background: transparent;
-      color: ${o};
+      color: ${themeColor};
       border-color: transparent;
-      ${i?"":"text-decoration: underline; text-underline-position: under;"}
-    `,text:`
+      ${!hasIcon
+            ? 'text-decoration: underline; text-underline-position: under;'
+            : ''}
+    `,
+        text: `
       margin: 0;
       padding: 0;
       border: none;
       border-radius: 0.0625rem;
-      color: ${o};
+      color: ${themeColor};
       text-decoration: underline;
       text-underline-position: under;
       background: inherit;
       height: initial;
-    `}[n]};export const iconOnlyStyle={small:`
+    `,
+    }[variant];
+};
+export const iconOnlyStyle = {
+    small: `
     padding: 0.375rem;
     height: auto;
-  `,medium:`
+  `,
+    medium: `
     padding: 0.75rem;
     height: auto;
-  `,large:`
+  `,
+    large: `
     padding: 1rem;
     height: auto;
-  `},iconOnlyFigmaStyle={small:`
+  `,
+};
+export const iconOnlyFigmaStyle = {
+    small: `
     padding: 0.375rem;
     width: 2rem;
     height: 2rem;
-  `,medium:`
+  `,
+    medium: `
     padding: 0.75rem;
     width: 3rem;
     height: 3rem;
-  `,large:`
+  `,
+    large: `
     padding: 1rem;
     width: 4rem;
     height: 4rem;
-  `};const p=({hasIcon:e,iconSide:r,size:n})=>e?n!=="small"?r==="left"?"padding-left: 1.25rem":"padding-right: 1.25rem":r==="left"?"padding-left: 0.75rem":"padding-right: 0.75rem":"";export const ButtonElement=a.button.withConfig(d())`
+  `,
+};
+const getIconButtonPadding = ({ hasIcon, iconSide, size, }) => {
+    if (!hasIcon)
+        return '';
+    if (size !== 'small') {
+        return iconSide === 'left'
+            ? 'padding-left: 1.25rem'
+            : 'padding-right: 1.25rem';
+    }
+    else {
+        return iconSide === 'left'
+            ? 'padding-left: 0.75rem'
+            : 'padding-right: 0.75rem';
+    }
+};
+export const ButtonElement = styled.button.withConfig(dontForwardProps()) `
   font-family: inherit;
-  font-weight: ${g("base")};
+  font-weight: ${getFontWeight('base')};
   font-style: normal;
-  font-size: ${({size:e})=>l(e==="large"?3:2)};
+  font-size: ${({ size }) => getFontSize(size === 'large' ? 3 : 2)};
   letter-spacing: 0;
   text-align: center;
   white-space: nowrap;
   width: auto;
 
-  ${s};
+  ${getButtonSize};
 
   display: flex;
   justify-content: center;
@@ -104,7 +190,7 @@
   border-width: 0.125rem;
   border-radius: 10rem;
 
-  ${h}
+  ${getBaseStyle}
 
   &:not(:disabled) {
     &:focus {
@@ -121,24 +207,47 @@
 
     &:hover {
       cursor: pointer;
-      ${u}
+      ${getHoverStyle}
     }
     &:active {
-      ${c}
+      ${getActiveStyle}
     }
   }
 
   &:disabled {
-    ${m}
+    ${getDisabledStyle}
 
-    color: ${t.disabledText};
-    -webkit-text-fill-color: ${t.disabledText};
+    color: ${colors.disabledText};
+    -webkit-text-fill-color: ${colors.disabledText};
     cursor: not-allowed;
   }
 
-  ${p};
+  ${getIconButtonPadding};
 
-  ${({hasChildren:e,size:r,useFigmaStyles:n})=>{if(!e)return n?iconOnlyFigmaStyle[r]:iconOnlyStyle[r]}}
-`,iconMargins={small:{left:"0 0.25rem 0 0",right:"0 0 0 0.25rem"},medium:{left:"0 0.5rem 0 0",right:"0 0 0 0.5rem"},large:{left:"0 0.5rem 0 0",right:"0 0 0 0.5rem"}},IconWrapper=a.div.withConfig(d())`
-  margin: ${({hasChildren:e,iconSide:r,size:n})=>e?r==="left"?iconMargins[n].left:iconMargins[n].right:"0"};
+  ${({ hasChildren, size, useFigmaStyles }) => {
+    if (!hasChildren) {
+        return useFigmaStyles ? iconOnlyFigmaStyle[size] : iconOnlyStyle[size];
+    }
+}}
+`;
+export const iconMargins = {
+    small: {
+        left: '0 0.25rem 0 0',
+        right: '0 0 0 0.25rem',
+    },
+    medium: {
+        left: '0 0.5rem 0 0',
+        right: '0 0 0 0.5rem',
+    },
+    large: {
+        left: '0 0.5rem 0 0',
+        right: '0 0 0 0.5rem',
+    },
+};
+export const IconWrapper = styled.div.withConfig(dontForwardProps()) `
+  margin: ${({ hasChildren, iconSide, size }) => hasChildren
+    ? iconSide === 'left'
+        ? iconMargins[size].left
+        : iconMargins[size].right
+    : '0'};
 `;

package/lib/src/core-components/src/core-components/CoreButton/index.js

@@ -1 +1,3 @@
-"use strict";export*from"./CoreButton";export*from"./types";export*from"./utils";
+export * from './CoreButton';
+export * from './types';
+export * from './utils';

package/lib/src/core-components/src/core-components/CoreButton/types.js

@@ -1 +1,6 @@
-"use strict";export const BUTTON_SIZES=["small","medium","large"],BUTTON_VARIANTS=["default","outline","flat","text"],BUTTON_COLORS=["primary","secondary","white"],DEFAULT_BUTTON_SIZE="medium",DEFAULT_BUTTON_VARIANT="default",DEFAULT_BUTTON_COLOR="primary";
+export const BUTTON_SIZES = ['small', 'medium', 'large'];
+export const BUTTON_VARIANTS = ['default', 'outline', 'flat', 'text'];
+export const BUTTON_COLORS = ['primary', 'secondary', 'white'];
+export const DEFAULT_BUTTON_SIZE = 'medium';
+export const DEFAULT_BUTTON_VARIANT = 'default';
+export const DEFAULT_BUTTON_COLOR = 'primary';

package/lib/src/core-components/src/core-components/CoreButton/utils.js

@@ -1 +1,12 @@
-"use strict";import{jsx as n,Fragment as t,jsxs as m}from"react/jsx-runtime";import{IconWrapper as c}from"./elements";import{Icon as p}from"../../components/Icon/Icon";export const addIconToChildren=({children:r,size:s,icons:o,iconSide:e})=>{const a=o&&n(c,{iconSide:e,size:s,hasChildren:!!r,children:n(p,{nameIcon:o?.nameIcon,propsIcon:o?.propsIcon,className:o?.className})});return addToSide({children:r,element:a,side:e})},addToSide=({children:r,element:s,side:o})=>m(t,{children:[o==="left"&&s,r,o==="right"&&s]});
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconWrapper } from './elements';
+import { Icon } from '../../components/Icon/Icon';
+export const addIconToChildren = ({ children, size, icons, iconSide, }) => {
+    const icon = icons && (_jsx(IconWrapper, { iconSide: iconSide, size: size, hasChildren: !!children, children: _jsx(Icon, { nameIcon: icons?.nameIcon, propsIcon: icons?.propsIcon, className: icons?.className }) }));
+    return addToSide({
+        children,
+        element: icon,
+        side: iconSide,
+    });
+};
+export const addToSide = ({ children, element, side, }) => (_jsxs(_Fragment, { children: [side === 'left' && element, children, side === 'right' && element] }));