@kvdbil/components 14.2.3 → 14.2.4

package/cjs/components/Flex/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function i(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var s=i(e);const a=(o,l)=>l!=="gap"&&l!=="row-gap"||typeof o!="number"?o:`${o}rem`,n=i(r).default.div(({$direction:o,$justify:l,$align:u,$gap:$,$rowGap:c,$wrap:d,$basis:g,$grow:w,$shrink:m})=>r.css`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/media-queries.js");function i(o){return o&&typeof o=="object"&&"default"in o?o:{default:o}}var s=i(e);const n=(o,l)=>l!=="gap"&&l!=="row-gap"||typeof o!="number"?o:`${o}rem`,a=i(r).default.div(({$direction:o,$justify:l,$align:$,$gap:c,$rowGap:f,$wrap:d,$basis:g,$grow:w,$shrink:m})=>r.css`
   display: flex;
 
   ${o&&["column","column-reverse"].includes(String(o))&&r.css`
@@ -7,11 +7,13 @@
       }
     `}
 
-  ${[[o,"flex-direction"],[l,"justify-content"],[u,"align-items"],[$,"gap"],[c,"row-gap"],[c,"row-gap"],[d,"flex-wrap"],[g,"flex-basis"],[w,"flex-grow"],[m,"flex-shrink"]].map(([p,f])=>typeof p=="string"||typeof p=="number"?r.css`
-        ${f}: ${a(p,f)};
-      `:typeof p=="object"?Object.entries(p).map(([y,b])=>r.css`
-          ${t.mq(y)} {
-            ${f}: ${a(b,f)};
+  ${[[o,"flex-direction"],[l,"justify-content"],[$,"align-items"],[c,"gap"],[f,"row-gap"],[f,"row-gap"],[d,"flex-wrap"],[g,"flex-basis"],[w,"flex-grow"],[m,"flex-shrink"]].map(([u,p])=>{if(typeof u=="string"||typeof u=="number")return r.css`
+        ${p}: ${n(u,p)};
+      `;if(typeof u=="object"){const y=[],{initial:b,...h}=u;return b&&y.push(r.css`
+          ${p}: ${n(b,p)};
+        `),Object.entries(h).forEach(([j,x])=>{y.push(r.css`
+          ${t.mq(j)} {
+            ${p}: ${n(x,p)};
           }
-        `):"")}
-`);exports.default=({direction:o,justify:l,align:u,gap:$,rowGap:c,wrap:d,basis:g,grow:w,shrink:m,...p})=>s.default.createElement(n,{$direction:o!=null?o:"row",$justify:l!=null?l:"center",$align:u!=null?u:"center",$gap:$!=null?$:"1rem",$rowGap:c,$wrap:d,$basis:g,$grow:w,$shrink:m,...p});
+        `)}),y}return""})}
+`);exports.default=({direction:o,justify:l,align:$,gap:c,rowGap:f,wrap:d,basis:g,grow:w,shrink:m,...u})=>s.default.createElement(a,{$direction:o!=null?o:"row",$justify:l!=null?l:"center",$align:$!=null?$:"center",$gap:c!=null?c:"1rem",$rowGap:f,$wrap:d,$basis:g,$grow:w,$shrink:m,...u});

package/esm/components/Flex/index.js

@@ -1,17 +1,19 @@
-import w from"react";import x,{css as o}from"styled-components";import{mq as p}from"../../shared/media-queries.js";const b="row",h="1rem",c="center",$=(e,t)=>(t==="gap"||t==="row-gap")&&typeof e=="number"?`${e}rem`:e,y=({$direction:e,$justify:t,$align:r,$gap:l,$rowGap:a,$wrap:s,$basis:f,$grow:u,$shrink:m})=>o`
+import p from"react";import b,{css as r}from"styled-components";import{mq as j}from"../../shared/media-queries.js";const y="row",k="1rem",g="center",$=(e,t)=>(t==="gap"||t==="row-gap")&&typeof e=="number"?`${e}rem`:e,q=({$direction:e,$justify:t,$align:a,$gap:i,$rowGap:s,$wrap:o,$basis:f,$grow:u,$shrink:m})=>r`
   display: flex;
 
-  ${e&&["column","column-reverse"].includes(String(e))&&o`
+  ${e&&["column","column-reverse"].includes(String(e))&&r`
       & > * {
         width: 100%;
       }
     `}
 
-  ${[[e,"flex-direction"],[t,"justify-content"],[r,"align-items"],[l,"gap"],[a,"row-gap"],[a,"row-gap"],[s,"flex-wrap"],[f,"flex-basis"],[u,"flex-grow"],[m,"flex-shrink"]].map(([n,i])=>typeof n=="string"||typeof n=="number"?o`
-        ${i}: ${$(n,i)};
-      `:typeof n=="object"?Object.entries(n).map(([d,g])=>o`
-          ${p(d)} {
-            ${i}: ${$(g,i)};
+  ${[[e,"flex-direction"],[t,"justify-content"],[a,"align-items"],[i,"gap"],[s,"row-gap"],[s,"row-gap"],[o,"flex-wrap"],[f,"flex-basis"],[u,"flex-grow"],[m,"flex-shrink"]].map(([n,l])=>{if(typeof n=="string"||typeof n=="number")return r`
+        ${l}: ${$(n,l)};
+      `;if(typeof n=="object"){const c=[],{initial:d,...w}=n;return d&&c.push(r`
+          ${l}: ${$(d,l)};
+        `),Object.entries(w).forEach(([x,h])=>{c.push(r`
+          ${j(x)} {
+            ${l}: ${$(h,l)};
           }
-        `):"")}
-`,j=x.div(y),k=({direction:e,justify:t,align:r,gap:l,rowGap:a,wrap:s,basis:f,grow:u,shrink:m,...n})=>w.createElement(j,{$direction:e!=null?e:b,$justify:t!=null?t:c,$align:r!=null?r:c,$gap:l!=null?l:h,$rowGap:a,$wrap:s,$basis:f,$grow:u,$shrink:m,...n});export{k as default};
+        `)}),c}else return""})}
+`,E=b.div(q),F=({direction:e,justify:t,align:a,gap:i,rowGap:s,wrap:o,basis:f,grow:u,shrink:m,...n})=>p.createElement(E,{$direction:e!=null?e:y,$justify:t!=null?t:g,$align:a!=null?a:g,$gap:i!=null?i:k,$rowGap:s,$wrap:o,$basis:f,$grow:u,$shrink:m,...n});export{F as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "14.2.3",
+  "version": "14.2.4",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Flex/index.d.ts

@@ -10,7 +10,7 @@ import { SCREEN_SIZE } from '../../shared/media-queries';
  * direction: 'row' | 'column' | 'row-reverse' | 'column-reverse'
  * direction: { mobileS: 'column', tablet: 'row' }
  */
-declare type CSSPropertyWithResponsive<P extends keyof CSSProperties> = CSSProperties[P] | Partial<Record<Partial<SCREEN_SIZE>, CSSProperties[P]>>;
+declare type CSSPropertyWithResponsive<P extends keyof CSSProperties> = CSSProperties[P] | Partial<Record<Partial<SCREEN_SIZE> | 'initial', CSSProperties[P]>>;
 export interface FlexProps {
     direction?: CSSPropertyWithResponsive<'flexDirection'>;
     justify?: CSSPropertyWithResponsive<'justifyContent'>;