react-restyle-components 0.4.37 → 0.4.39

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

@@ -1,186 +1,100 @@
-'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: `
+"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:`
       height: 2rem;
       padding: 0.25rem 1rem;
-    `,
-    medium: `
+    `,medium:`
       height: 3rem;
       padding: 0.75rem 1.75rem;
-    `,
-    large: `
+    `,large:`
       height: 4rem;
       padding: 1rem 1.75rem;
-    `,
-})[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};
+    `})[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};
       text-decoration: unset;
-      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: `
+      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:`
       background: transparent;
-      color: ${themeColor};
-      border: 2px solid ${themeColor};
-    `,
-        flat: `
+      color: ${o};
+      border: 2px solid ${o};
+    `,flat:`
       background: transparent;
-      color: ${themeColor};
+      color: ${o};
       border-color: transparent;
-      ${!hasIcon
-            ? 'text-decoration: underline; text-underline-position: under;'
-            : ''}
-    `,
-        text: `
+      ${i?"":"text-decoration: underline; text-underline-position: under;"}
+    `,text:`
       margin: 0;
       padding: 0;
       border: none;
       border-radius: 0.0625rem;
-      color: ${themeColor};
+      color: ${o};
       text-decoration: underline;
       text-underline-position: under;
       background: inherit;
       height: initial;
-    `,
-    }[variant];
-};
-export const iconOnlyStyle = {
-    small: `
+    `}[n]};export const iconOnlyStyle={small:`
     padding: 0.375rem;
     height: auto;
-  `,
-    medium: `
+  `,medium:`
     padding: 0.75rem;
     height: auto;
-  `,
-    large: `
+  `,large:`
     padding: 1rem;
     height: auto;
-  `,
-};
-export const iconOnlyFigmaStyle = {
-    small: `
+  `},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 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()) `
+  `};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())`
   font-family: inherit;
-  font-weight: ${getFontWeight('base')};
+  font-weight: ${g("base")};
   font-style: normal;
-  font-size: ${({ size }) => getFontSize(size === 'large' ? 3 : 2)};
+  font-size: ${({size:e})=>l(e==="large"?3:2)};
   letter-spacing: 0;
   text-align: center;
   white-space: nowrap;
   width: auto;
 
-  ${getButtonSize};
+  ${s};
 
   display: flex;
   justify-content: center;
@@ -190,7 +104,7 @@ export const ButtonElement = styled.button.withConfig(dontForwardProps()) `
   border-width: 0.125rem;
   border-radius: 10rem;
 
-  ${getBaseStyle}
+  ${h}
 
   &:not(:disabled) {
     &:focus {
@@ -207,47 +121,24 @@ export const ButtonElement = styled.button.withConfig(dontForwardProps()) `
 
     &:hover {
       cursor: pointer;
-      ${getHoverStyle}
+      ${u}
     }
     &:active {
-      ${getActiveStyle}
+      ${c}
     }
   }
 
   &:disabled {
-    ${getDisabledStyle}
+    ${m}
 
-    color: ${colors.disabledText};
-    -webkit-text-fill-color: ${colors.disabledText};
+    color: ${t.disabledText};
+    -webkit-text-fill-color: ${t.disabledText};
     cursor: not-allowed;
   }
 
-  ${getIconButtonPadding};
+  ${p};
 
-  ${({ 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'};
+  ${({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"};
 `;

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

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

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

@@ -1,6 +1 @@
-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';
+"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";

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

@@ -1,12 +1 @@
-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] }));
+"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]});

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

@@ -1,23 +1,8 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useContext } from 'react';
-import { styled } from 'styled-components';
-import { colors } from '../../utils';
-// import {CardContext} from '../../components/Card/CardContext';
-import { dontForwardProps } from '../../utils';
-const CardContext = React.createContext({
-    isInsideCard: false,
-});
-export const StyledDivider = styled.hr.withConfig(dontForwardProps()) `
+"use strict";"use client";import{jsx as o}from"react/jsx-runtime";import e,{useContext as i}from"react";import{styled as s}from"styled-components";import{colors as n}from"../../utils";import{dontForwardProps as d}from"../../utils";const m=e.createContext({isInsideCard:!1});export const StyledDivider=s.hr.withConfig(d())`
   margin: 0;
   border: 0;
-  border-top: 1px solid ${colors.neutralBrightest};
+  border-top: 1px solid ${n.neutralBrightest};
 
-  ${({ isInsideCard }) => isInsideCard &&
-    `margin-left: -1rem; 
+  ${({isInsideCard:r})=>r&&`margin-left: -1rem; 
     margin-right: -1rem;`}
-`;
-export const Divider = (props) => {
-    const { isInsideCard } = useContext(CardContext);
-    return _jsx(StyledDivider, { isInsideCard: isInsideCard, ...props });
-};
+`,Divider=r=>{const{isInsideCard:t}=i(m);return o(StyledDivider,{isInsideCard:t,...r})};

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

@@ -1 +1 @@
-export * from './Divider';
+"use strict";export*from"./Divider";

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

@@ -1 +1 @@
-export { SelectionCardStrip } from './selectionCardStrip';
+"use strict";export{SelectionCardStrip}from"./selectionCardStrip";

package/lib/src/core-components/src/core-components/SelectionCardStrip/selectionCardStrip.js

@@ -1,15 +1,4 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { styled } from 'styled-components';
-// import {Card, CardProps} from '../../components/Card';
-import { createTransition, dontForwardProps } from '../../utils';
-import { colors } from '../../utils';
-import { toggleParentStyles } from '../ToggleCore';
-const Card = (props) => {
-    return _jsx("div", { ...props });
-};
-const StyledCard = styled(Card).withConfig(dontForwardProps()) `
+"use strict";"use client";import{jsx as t}from"react/jsx-runtime";import s from"react";import{styled as r}from"styled-components";import{createTransition as i,dontForwardProps as n}from"../../utils";import{colors as l}from"../../utils";import{toggleParentStyles as a}from"../ToggleCore";const d=e=>t("div",{...e}),c=r(d).withConfig(n())`
   display: inline-flex;
   align-items: flex-start;
   box-sizing: border-box;
@@ -17,37 +6,25 @@ const StyledCard = styled(Card).withConfig(dontForwardProps()) `
   line-height: 1.3;
   -moz-osx-font-smoothing: grayscale;
 
-  ${() => createTransition({
-    properties: ['box-shadow', 'background-color'],
-})}
+  ${()=>i({properties:["box-shadow","background-color"]})}
 
-  ${toggleParentStyles};
-`;
-const Wrapper = React.forwardRef((props, fRef) => (_jsx(StyledCard, { ref: fRef, element: "label", type: "selection", selected: props.checked || props.focused, ...props })));
-const InternalWrapper = styled.div.withConfig(dontForwardProps()) `
+  ${a};
+`,f=s.forwardRef((e,o)=>t(c,{ref:o,element:"label",type:"selection",selected:e.checked||e.focused,...e})),p=r.div.withConfig(n())`
   display: flex;
   z-index: 1;
   width: 100%;
   justify-content: center;
   padding: 0.1rem 0 0 0;
-  ${createTransition({
-    properties: ['color'],
-})};
+  ${i({properties:["color"]})};
 
-  ${({ isDisabled }) => isDisabled &&
-    `
+  ${({isDisabled:e})=>e&&`
       cursor: not-allowed;
-      color: ${colors.disabledText};
+      color: ${l.disabledText};
 `}
-  ${({ disableSvgColorOverride, isDisabled }) => !disableSvgColorOverride &&
-    `
+  ${({disableSvgColorOverride:e,isDisabled:o})=>!e&&`
     svg path {
       fill: none;
-      stroke: ${isDisabled && colors.disabledText};
+      stroke: ${o&&l.disabledText};
     }
 `}
-`;
-export const SelectionCardStrip = {
-    Wrapper,
-    InternalWrapper,
-};
+`;export const SelectionCardStrip={Wrapper:f,InternalWrapper:p};

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

@@ -1,6 +1,4 @@
-import { styled } from 'styled-components';
-import { tokens } from '../utils/designTokens';
-export const StateLayer = styled.div `
+"use strict";import{styled as o}from"styled-components";import{tokens as t}from"../utils/designTokens";export const StateLayer=o.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -8,6 +6,6 @@ export const StateLayer = styled.div `
   left: 0;
   pointer-events: none;
   z-index: 0;
-  background: ${tokens.darkGray || '#4a4a4a'} !important;
-  opacity: ${tokens.stateLayerNone};
+  background: ${t.darkGray||"#4a4a4a"} !important;
+  opacity: ${t.stateLayerNone};
 `;

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

@@ -1,12 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styled, css } from 'styled-components';
-import { createTransition } from '../../utils';
-import { StateLayer } from '../StateLayer';
-// import {Text} from '../../components/Text';
-const Text = (props) => {
-    return _jsx("span", { ...props });
-};
-const baseToggleStyles = css `
+"use strict";import{jsx as r,jsxs as c}from"react/jsx-runtime";import{styled as i,css as o}from"styled-components";import{createTransition as n}from"../../utils";import{StateLayer as a}from"../StateLayer";const p=e=>r("span",{...e}),u=o`
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -17,18 +9,15 @@ const baseToggleStyles = css `
   flex-shrink: 0;
   margin-right: var(--aui-spacing-100);
 
-  ${({ $showInteraction }) => $showInteraction &&
-    css `
+  ${({$showInteraction:e})=>e&&o`
       // Transitions
       &:before,
       [data-aui='icon'],
-      ${StateLayer} {
-        ${createTransition({ properties: ['opacity'] })}
+      ${a} {
+        ${n({properties:["opacity"]})}
       }
 
-      ${createTransition({
-        properties: ['box-shadow', 'background-color', 'color'],
-    })}
+      ${n({properties:["box-shadow","background-color","color"]})}
 
       // Support keyboard focus
       &:has(~ input:focus-visible) {
@@ -40,8 +29,7 @@ const baseToggleStyles = css `
         opacity: var(--aui-state-layer-on-disabled);
       }
     `}
-`;
-const StyledCheckbox = styled.span `
+`,s=i.span`
   [data-aui='icon-check'],
   [data-aui='icon-minus'] {
     position: absolute;
@@ -50,33 +38,28 @@ const StyledCheckbox = styled.span `
     transition: opacity 0.15s;
     pointer-events: none;
   }
-  ${baseToggleStyles};
+  ${u};
 
   border-radius: var(--aui-border-radius-050);
 
-  ${({ $checked, $indeterminate }) => $checked || $indeterminate
-    ? css `
+  ${({$checked:e,$indeterminate:d})=>e||d?o`
           box-shadow: 0 0 0 1px var(--aui-inverse-surface) inset;
           background: var(--aui-inverse-surface);
           color: var(--aui-inverse-on-surface);
-        `
-    : css `
+        `:o`
           box-shadow: 0 0 0 1px var(--aui-outline) inset;
           background: var(--aui-surface);
           color: var(--aui-on-surface);
         `}
-`;
-const StyledRadio = styled.span `
-  ${baseToggleStyles};
+`,t=i.span`
+  ${u};
 
   border-radius: var(--aui-border-radius-round);
   background: var(--aui-surface);
 
-  ${({ $checked }) => $checked
-    ? css `
+  ${({$checked:e})=>e?o`
           box-shadow: 0 0 0 2px var(--aui-inverse-surface) inset;
-        `
-    : css `
+        `:o`
           box-shadow: 0 0 0 1px var(--aui-outline) inset;
         `}
 
@@ -89,14 +72,9 @@ const StyledRadio = styled.span `
     top: 0.3125rem;
     left: 0.3125rem;
     background: var(--aui-inverse-surface);
-    opacity: ${({ $checked }) => ($checked ? '1' : '0')};
+    opacity: ${({$checked:e})=>e?"1":"0"};
   }
-`;
-export const CheckboxToggle = ({ ...props }) => (_jsxs(StyledCheckbox, { ...props, children: [_jsx(StateLayer, {}), _jsx("span", { children: "Icons" })] }));
-export const RadioToggle = (props) => (_jsx(StyledRadio, { ...props, children: _jsx(StateLayer, {}) }));
-export const StyledDescription = styled(Text).attrs({
-    size: 2,
-}) `
+`;export const CheckboxToggle=({...e})=>c(s,{...e,children:[r(a,{}),r("span",{children:"Icons"})]}),RadioToggle=e=>r(t,{...e,children:r(a,{})}),StyledDescription=i(p).attrs({size:2})`
   color: var(--aui-on-surface);
   line-height: 1.3;
 
@@ -104,30 +82,27 @@ export const StyledDescription = styled(Text).attrs({
     opacity: var(--aui-state-layer-on-disabled);
     cursor: not-allowed;
   }
-`;
-export const HiddenInput = styled.input `
+`,HiddenInput=i.input`
   position: fixed;
   opacity: 0;
   pointer-events: none;
-`;
-/** Add this style snippet to the label containing this ToggleCore component */
-export const toggleParentStyles = css `
+`,toggleParentStyles=o`
   &:not(:has(input:disabled)) {
     &:hover
-      ${StyledCheckbox}
-      ${StateLayer},
+      ${s}
+      ${a},
       &:hover
-      ${StyledRadio}
-      ${StateLayer} {
+      ${t}
+      ${a} {
       opacity: var(--aui-state-layer-hover);
     }
 
     &:active
-      ${StyledCheckbox}
-      ${StateLayer},
+      ${s}
+      ${a},
       &:hover
-      ${StyledRadio}
-      ${StateLayer} {
+      ${t}
+      ${a} {
       opacity: var(--aui-state-layer-press);
     }
   }

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

@@ -1,2 +1 @@
-export { ToggleCore } from './toggleCore';
-export { toggleParentStyles } from './elements';
+"use strict";export{ToggleCore}from"./toggleCore";export{toggleParentStyles}from"./elements";

package/lib/src/core-components/src/core-components/ToggleCore/toggleCore.js

@@ -1,14 +1 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { useId } from '../../utils';
-import { CheckboxToggle, RadioToggle, StyledDescription, HiddenInput, } from './elements';
-/** To apply hover states, apply `toggleParentStyles` to the label containing this component */
-export const ToggleCore = React.forwardRef(({ id, children, checked, isToggleShowing = true, showInteraction = true, onFocusChange, toggleType, indeterminate = false, ...rest }, ref) => {
-    const inputId = useId(toggleType, id);
-    if (typeof children === 'string') {
-        children = _jsx(StyledDescription, { children: children });
-    }
-    const ToggleComponent = toggleType === 'checkbox' ? CheckboxToggle : RadioToggle;
-    return (_jsxs(_Fragment, { children: [isToggleShowing && (_jsx(ToggleComponent, { "$checked": checked ?? false, "$showInteraction": showInteraction, "$indeterminate": indeterminate })), children, _jsx(HiddenInput, { readOnly: true, id: inputId, ref: ref, ...rest, checked: checked, type: toggleType, onFocus: () => onFocusChange?.(true), onBlur: () => onFocusChange?.(false), "aria-checked": indeterminate ? 'mixed' : undefined })] }));
-});
+"use strict";"use client";import{jsx as r,Fragment as u,jsxs as p}from"react/jsx-runtime";import l from"react";import{useId as g}from"../../utils";import{CheckboxToggle as x,RadioToggle as j,StyledDescription as k,HiddenInput as I}from"./elements";export const ToggleCore=l.forwardRef(({id:i,children:e,checked:t,isToggleShowing:a=!0,showInteraction:c=!0,onFocusChange:n,toggleType:o,indeterminate:s=!1,...d},f)=>{const m=g(o,i);return typeof e=="string"&&(e=r(k,{children:e})),p(u,{children:[a&&r(o==="checkbox"?x:j,{$checked:t??!1,$showInteraction:c,$indeterminate:s}),e,r(I,{readOnly:!0,id:m,ref:f,...d,checked:t,type:o,onFocus:()=>n?.(!0),onBlur:()=>n?.(!1),"aria-checked":s?"mixed":void 0})]})});

package/lib/src/core-components/src/core-components/atoms/Input/Input.js

@@ -1,22 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import s from '../../../tc.module.css';
-import { cn } from '../../../utils';
-export const Input = React.forwardRef(({ className, error, label, id, onChange, onBlur, onValueChange, onValueBlur, ...props }, ref) => {
-    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
-    // Handle onChange - always pass event to onChange, value to onValueChange
-    const handleChange = (e) => {
-        onChange?.(e);
-        onValueChange?.(e.target.value);
-    };
-    // Handle onBlur - always pass event to onBlur, value to onValueBlur
-    const handleBlur = (e) => {
-        onBlur?.(e);
-        onValueBlur?.(e.target.value);
-    };
-    return (_jsxs("div", { className: cn(s['w-full']), children: [label && (_jsx("label", { className: cn(s['block'], s['text-sm'], s['font-medium'], s['text-gray-700'], s['dark:text-gray-300'], s['mb-1']), children: label })), _jsx("input", { ref: ref, id: inputId, className: cn(s['w-full'], s['px-4'], s['py-2'], s['border'], s['rounded-lg'], s['transition-colors'], s['bg-white'], s['dark:bg-gray-800'], s['border-gray-300'], s['dark:border-gray-600'], s['text-gray-900'], s['dark:text-gray-100'], s['placeholder-gray-500'], s['dark:placeholder-gray-400'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-primary'], s['focus:ring-offset-1'], error && s['border-red-500'], error && s['focus:ring-red-500'], className), style: {
-                    ...props.style,
-                    '--tw-ring-offset-color': '#ffffff',
-                }, onChange: handleChange, onBlur: handleBlur, ...props }), error && (_jsx("p", { className: cn(s['mt-1'], s['text-sm'], s['text-red-600'], s['dark:text-red-400']), children: error }))] }));
-});
-Input.displayName = 'Input';
+"use strict";import{jsx as o,jsxs as y}from"react/jsx-runtime";import h from"react";import r from"../../../tc.module.css";import{cn as a}from"../../../utils";export const Input=h.forwardRef(({className:d,error:e,label:s,id:l,onChange:f,onBlur:i,onValueChange:c,onValueBlur:g,...n},m)=>{const u=l||`input-${Math.random().toString(36).substr(2,9)}`,p=t=>{f?.(t),c?.(t.target.value)},x=t=>{i?.(t),g?.(t.target.value)};return y("div",{className:a(r["w-full"]),children:[s&&o("label",{className:a(r.block,r["text-sm"],r["font-medium"],r["text-gray-700"],r["dark:text-gray-300"],r["mb-1"]),children:s}),o("input",{ref:m,id:u,className:a(r["w-full"],r["px-4"],r["py-2"],r.border,r["rounded-lg"],r["transition-colors"],r["bg-white"],r["dark:bg-gray-800"],r["border-gray-300"],r["dark:border-gray-600"],r["text-gray-900"],r["dark:text-gray-100"],r["placeholder-gray-500"],r["dark:placeholder-gray-400"],r["focus:outline-none"],r["focus:ring-2"],r["focus:ring-primary"],r["focus:ring-offset-1"],e&&r["border-red-500"],e&&r["focus:ring-red-500"],d),style:{...n.style,"--tw-ring-offset-color":"#ffffff"},onChange:p,onBlur:x,...n}),e&&o("p",{className:a(r["mt-1"],r["text-sm"],r["text-red-600"],r["dark:text-red-400"]),children:e})]})});Input.displayName="Input";