qoretechnologies · Copilot · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.55.5",
+  "version": "0.55.6",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
@@ -50,17 +50,29 @@ export interface IReqoreBreadcrumbsProps
 
 interface IStyledBreadcrumbs extends Omit<IReqoreBreadcrumbsProps, 'items'> {
   theme: IReqoreTheme;
+  $size?: string;
+  $flat?: boolean;
+  $padded?: boolean;
+  $margin?: string;
+  $responsive?: boolean;
 }
 
 const StyledReqoreBreadcrumbs = styled.div<IStyledBreadcrumbs>`
-  ${({ theme, size, flat, padded = true, margin = 'both', responsive }: IStyledBreadcrumbs) => css`
-    width: ${responsive ? '100%' : undefined};
-    margin-top: ${margin === 'both' || margin === 'top' ? MARGIN_FROM_SIZE[size!] : 0}px;
-    margin-bottom: $ ${margin === 'both' || margin === 'bottom' ? MARGIN_FROM_SIZE[size!] : 0}px;
+  ${({
+    theme,
+    $size,
+    $flat,
+    $padded = true,
+    $margin = 'both',
+    $responsive,
+  }: IStyledBreadcrumbs) => css`
+    width: ${$responsive ? '100%' : undefined};
+    margin-top: ${$margin === 'both' || $margin === 'top' ? MARGIN_FROM_SIZE[$size!] : 0}px;
+    margin-bottom: ${$margin === 'both' || $margin === 'bottom' ? MARGIN_FROM_SIZE[$size!] : 0}px;
     display: flex;
-    padding: 0 ${padded ? PADDING_FROM_SIZE[size!] : 0}px;
+    padding: 0 ${$padded ? PADDING_FROM_SIZE[$size!] : 0}px;
     justify-content: space-between;
-    border-bottom: ${flat ? undefined : `1px solid ${changeLightness(theme.main, 0.05)}`};
+    border-bottom: ${$flat ? undefined : `1px solid ${changeLightness(theme.main, 0.05)}`};
     background-color: ${({ theme }: { theme: IReqoreTheme }) =>
       theme.breadcrumbs?.main || 'transparent'};
 
@@ -240,16 +252,20 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
     );
   };
 
+  const { padded, margin, ...domRest } = rest as any;
+
   return (
     <ReqoreErrorBoundary {...errorBoundaryOptions}>
       <StyledReqoreBreadcrumbs
-        {...rest}
+        {...domRest}
         className={`${rest.className || ''} reqore-breadcrumbs-wrapper`}
         ref={ref}
-        flat={flat}
         theme={theme}
-        size={size}
-        responsive={responsive}
+        $flat={flat}
+        $size={size}
+        $responsive={responsive}
+        $padded={padded}
+        $margin={margin}
       >
         <div key='reqore-breadcrumbs-left-wrapper'>
           {transformedItems.map(

diff --git a/src/components/Checkbox/index.tsx b/src/components/Checkbox/index.tsx
@@ -65,6 +65,13 @@ export interface IReqoreCheckboxProps
 
 export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
   theme: IReqoreTheme;
+  $size?: TSizes;
+  $fluid?: boolean;
+  $fixed?: boolean;
+  $disabled?: boolean;
+  $readOnly?: boolean;
+  $checked?: boolean;
+  $parentHasGradient?: boolean;
 }
 
 const StyledSwitchToggle = styled.div`
@@ -101,10 +108,10 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   justify-content: center;
   flex-shrink: 0;
 
-  height: ${({ size }) => SWITCH_SIZE_TO_PX[size]}px;
-  min-width: ${({ size }) => SWITCH_SIZE_TO_PX[size] * 1.8}px;
+  height: ${({ $size }) => SWITCH_SIZE_TO_PX[$size]}px;
+  min-width: ${({ $size }) => SWITCH_SIZE_TO_PX[$size] * 1.8}px;
 
-  border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.35 : 0.2)};
+  border: 1px solid ${({ theme, $checked }) => changeLightness(theme.main, $checked ? 0.35 : 0.2)};
   border-radius: 50px;
 
   background-color: ${({ theme }) => rgba(changeLightness(theme.main, 0.3), 0.1)};
@@ -121,24 +128,24 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
 `;
 
 const StyledSwitchTextWrapper = styled(StyledTextEffect)`
-  margin: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  margin: 0 ${({ $size }) => PADDING_FROM_SIZE[$size]}px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
-  min-width: ${({ size }) => SWITCH_SIZE_TO_PX[size]}px;
+  min-width: ${({ $size }) => SWITCH_SIZE_TO_PX[$size]}px;
 `;
 
 const StyledOnSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
-  color: ${({ theme, checked, parentHasGradient }) =>
-    !parentHasGradient &&
-    getReadableColorFrom(checked ? changeLightness(theme.main, 0.25) : theme.originalMain)};
+  color: ${({ theme, $checked, $parentHasGradient }) =>
+    !$parentHasGradient &&
+    getReadableColorFrom($checked ? changeLightness(theme.main, 0.25) : theme.originalMain)};
 `;
 
 const StyledOffSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
-  color: ${({ theme, checked, parentHasGradient }) =>
-    !parentHasGradient &&
-    getReadableColorFrom(checked ? theme.originalMain : changeLightness(theme.main, 0.2))};
+  color: ${({ theme, $checked, $parentHasGradient }) =>
+    !$parentHasGradient &&
+    getReadableColorFrom($checked ? theme.originalMain : changeLightness(theme.main, 0.2))};
 `;
 
 const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
@@ -148,33 +155,33 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
   padding: 0px;
   transition: all 0.2s ease-out;
 
-  height: ${({ size }) => SIZE_TO_PX[size]}px;
-  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
+  height: ${({ $size }) => SIZE_TO_PX[$size]}px;
+  font-size: ${({ $size }) => CONTROL_TEXT_FROM_SIZE[$size]}px;
 
-  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  max-width: ${({ $fluid, $fixed }) => ($fluid && !$fixed ? '100%' : undefined)};
+  flex: ${({ $fluid, $fixed }) => ($fixed ? '0 auto' : $fluid ? '1 auto' : '0 0 auto')};
 
-  ${({ disabled }) =>
-    disabled &&
+  ${({ $disabled }) =>
+    $disabled &&
     css`
       ${DisabledElement};
     `}
 
-  ${({ readOnly }) =>
-    readOnly &&
+  ${({ $readOnly }) =>
+    $readOnly &&
     css`
       ${ReadOnlyElement};
     `}
 
-  color: ${({ theme, checked }) =>
-    getReadableColor(theme, undefined, undefined, !checked, theme.originalMain)};
+  color: ${({ theme, $checked }) =>
+    getReadableColor(theme, undefined, undefined, !$checked, theme.originalMain)};
 
   &:hover {
     color: ${({ theme }) =>
       getReadableColor(theme, undefined, undefined, false, theme.originalMain)};
 
     > ${StyledSwitch} {
-      border-color: ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.4 : 0.35)};
+      border-color: ${({ theme, $checked }) => changeLightness(theme.main, $checked ? 0.4 : 0.35)};
     }
   }
 `;
@@ -232,12 +239,14 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       {
         ...rest,
         theme,
-        size,
         tooltip,
-        disabled,
-        checked,
-        readOnly,
         className: `${className || ''} reqore-checkbox reqore-control`,
+        $size: size,
+        $disabled: disabled,
+        $checked: checked,
+        $readOnly: readOnly,
+        $fluid: rest.fluid,
+        $fixed: rest.fixed,
       },
       StyledCheckbox,
       ref
@@ -267,10 +276,9 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         ) : null}
         {asSwitch ? (
           <StyledSwitch
-            size={size}
+            $size={size}
             tabIndex='0'
-            labelPosition={labelPosition}
-            checked={checked}
+            $checked={checked}
             theme={theme}
             as='div'
             effect={
@@ -284,10 +292,10 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
               {offText || offText === 0 ? (
                 <StyledOffSwitchText
                   ref={offRef}
-                  size={size}
+                  $size={size}
                   theme={theme}
-                  checked={checked}
-                  parentHasGradient={!!effect?.gradient}
+                  $checked={checked}
+                  $parentHasGradient={!!effect?.gradient}
                   effect={
                     {
                       uppercase: true,
@@ -313,10 +321,10 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
               {onText || onText === 0 ? (
                 <StyledOnSwitchText
                   ref={onRef}
-                  size={size}
+                  $size={size}
                   theme={theme}
-                  checked={checked}
-                  parentHasGradient={!!effect?.gradient}
+                  $checked={checked}
+                  $parentHasGradient={!!effect?.gradient}
                   effect={
                     {
                       uppercase: true,

diff --git a/src/components/Collection/index.tsx b/src/components/Collection/index.tsx
@@ -77,14 +77,23 @@ export interface IReqoreCollectionProps
   paging?: TReqorePaginationType<IReqoreCollectionItemProps>;
 }
 
-export const StyledCollectionWrapper = styled(StyledColumns)`
-  height: ${({ height }) => (height ? `${height}` : 'auto')};
-  flex: ${({ fill }) => (fill ? 1 : undefined)};
+interface IStyledCollectionWrapperInternal {
+  $height?: string;
+  $fill?: boolean;
+  $rounded?: boolean;
+  $stacked?: boolean;
+}
+
+export const StyledCollectionWrapper = styled(StyledColumns).withConfig({
+  shouldForwardProp: (prop) => !prop.startsWith('$'),
+})<IStyledCollectionWrapperInternal>`
+  height: ${({ $height }) => ($height ? `${$height}` : 'auto')};
+  flex: ${({ $fill }) => ($fill ? 1 : undefined)};
 
-  ${({ rounded, stacked }: IReqoreCollectionProps) =>
-    (!rounded || stacked) &&
+  ${({ $rounded, $stacked }: IStyledCollectionWrapperInternal) =>
+    (!$rounded || $stacked) &&
     css`
-      border-radius: ${stacked && rounded ? '10px' : undefined};
+      border-radius: ${$stacked && $rounded ? '10px' : undefined};
     `}
 
   overflow: auto;
@@ -374,16 +383,16 @@ export const ReqoreCollection = memo(
               </ReqoreMessage>
             ) : (
               <StyledCollectionWrapper
-                columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
-                columnsGap={stacked ? '0px' : columnsGap}
-                rounded={rounded}
-                stacked={stacked}
-                fill={fill}
+                $columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
+                $columnsGap={stacked ? '0px' : columnsGap}
+                $rounded={rounded}
+                $stacked={stacked}
+                $fill={fill}
                 ref={setContentRef}
-                height={height}
-                alignItems={alignItems}
-                minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
-                maxColumnWidth={maxColumnWidth}
+                $height={height}
+                $alignItems={alignItems}
+                $minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
+                $maxColumnWidth={maxColumnWidth}
                 className='reqore-collection-content'
               >
                 {(() => {
@@ -481,15 +490,15 @@ export const ReqoreCollection = memo(
       return (
         <ReqorePanelSkeleton size={rest.size}>
           <StyledCollectionWrapper
-            columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
-            columnsGap={stacked ? '0px' : columnsGap}
-            rounded={rounded}
-            stacked={stacked}
-            fill={fill}
-            height={height}
-            alignItems={alignItems}
-            minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
-            maxColumnWidth={maxColumnWidth}
+            $columns={columns || (_showAs === 'grid' ? 'auto-fit' : 1)}
+            $columnsGap={stacked ? '0px' : columnsGap}
+            $rounded={rounded}
+            $stacked={stacked}
+            $fill={fill}
+            $height={height}
+            $alignItems={alignItems}
+            $minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
+            $maxColumnWidth={maxColumnWidth}
             className='reqore-collection-content'
           >
             <ReqoreSkeleton height='100px' width='100%' />

diff --git a/src/components/Collection/item.tsx b/src/components/Collection/item.tsx
@@ -47,14 +47,14 @@ export interface IReqoreCollectionItemProps
 }
 
 export const StyledCollectionItemContent = styled.div`
-  max-height: ${({ providedHeight }) => (providedHeight ? `${providedHeight}px` : 'auto')};
-  overflow: ${({ isSelected }) => (isSelected ? 'auto' : 'hidden')};
+  max-height: ${({ $providedHeight }) => ($providedHeight ? `${$providedHeight}px` : 'auto')};
+  overflow: ${({ $isSelected }) => ($isSelected ? 'auto' : 'hidden')};
   position: relative;
   transition: 0.3s ease-in-out;
   flex: 1;
 
-  ${({ contentOverflows, theme, opacity = 1 }) =>
-    contentOverflows &&
+  ${({ $contentOverflows, theme, $opacity = 1 }) =>
+    $contentOverflows &&
     css`
       &:after {
         content: '';
@@ -66,7 +66,7 @@ export const StyledCollectionItemContent = styled.div`
         transition: 0.3s ease-in-out;
         background: linear-gradient(
           to top,
-          ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)} 0%,
+          ${rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), $opacity)} 0%,
           transparent 100%
         );
       }
@@ -230,10 +230,10 @@ export const ReqoreCollectionItem = ({
         >
           <StyledCollectionItemContent
             theme={theme}
-            opacity={rest.transparent ? 0 : rest.opacity}
-            providedHeight={isSelected ? undefined : maxContentHeight}
-            isSelected={isSelected}
-            contentOverflows={
+            $opacity={rest.transparent ? 0 : rest.opacity}
+            $providedHeight={isSelected ? undefined : maxContentHeight}
+            $isSelected={isSelected}
+            $contentOverflows={
               !rest.transparent &&
               !rest.contentEffect &&
               !isSelected &&