react-restyle-components 0.4.47 → 0.4.48

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

@@ -1 +1,15 @@
-"use strict";export{AgGrid,default}from"./AgGrid";export{useSorting as useAgSorting,useFiltering as useAgFiltering,usePagination as useAgPagination,useRowSelection as useAgRowSelection,useRowExpansion as useAgRowExpansion,useColumnState as useAgColumnState,useCellEditing as useAgCellEditing,useRowGrouping as useAgRowGrouping,useVirtualScrolling as useAgVirtualScrolling,useClipboard as useAgClipboard,useResponsive as useAgResponsive,useContextMenu as useAgContextMenu,useKeyboardNavigation as useAgKeyboardNavigation,useSetFilter as useAgSetFilter,useAggregationPanel as useAgAggregationPanel,useRowGroupingPanel as useAgRowGroupingPanel,useColumnMenu as useAgColumnMenu,useSidePanel as useAgSidePanel,usePivotMode as useAgPivotMode,getNestedValue as agGetNestedValue,setNestedValue as agSetNestedValue,createRowNode as agCreateRowNode,aggregations as agAggregations,exportToCsv as agExportToCsv}from"./hooks";export{getTheme as agGetTheme,themes as agThemes}from"./elements";
+/**
+ * AG Grid Component Exports
+ * A comprehensive, AG Grid-like data table with all enterprise features
+ * Reference: https://www.ag-grid.com/react-data-grid/getting-started/
+ */
+// Main Component
+export { AgGrid, default } from './AgGrid';
+// Hooks - Prefixed with "useAg" to avoid conflicts
+export { useSorting as useAgSorting, useFiltering as useAgFiltering, usePagination as useAgPagination, useRowSelection as useAgRowSelection, useRowExpansion as useAgRowExpansion, useColumnState as useAgColumnState, useCellEditing as useAgCellEditing, useRowGrouping as useAgRowGrouping, useVirtualScrolling as useAgVirtualScrolling, useClipboard as useAgClipboard, useResponsive as useAgResponsive, useContextMenu as useAgContextMenu, useKeyboardNavigation as useAgKeyboardNavigation, 
+// New hooks for Side Panel, Column Menu, Set Filter, etc.
+useSetFilter as useAgSetFilter, useAggregationPanel as useAgAggregationPanel, useRowGroupingPanel as useAgRowGroupingPanel, useColumnMenu as useAgColumnMenu, useSidePanel as useAgSidePanel, usePivotMode as useAgPivotMode, 
+// Utilities - Prefixed with "ag"
+getNestedValue as agGetNestedValue, setNestedValue as agSetNestedValue, createRowNode as agCreateRowNode, aggregations as agAggregations, exportToCsv as agExportToCsv, } from './hooks';
+// Theme utilities - Prefixed with "ag"
+export { getTheme as agGetTheme, themes as agThemes } from './elements';

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

@@ -1 +1,6 @@
-"use strict";export{};
+/**
+ * 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.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"./ag-grid";
+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';