@binamik/components 0.1.1 → 0.1.2

package/dist/binamik-components.umd.js

@@ -1,4 +1,4 @@
-(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("@emotion/react"),require("@emotion/styled"),require("react")):typeof define=="function"&&define.amd?define(["exports","@emotion/react","@emotion/styled","react"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.BinamikCompoents={},e["emotion-react"],e.styled,e.React))})(this,function(e,t,a,x){"use strict";var nr=Object.defineProperty,ar=Object.defineProperties;var ir=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var F=(e,t,a)=>t in e?nr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,O=(e,t)=>{for(var a in t||(t={}))E.call(t,a)&&F(e,a,t[a]);if(b)for(var a of b(t))A.call(t,a)&&F(e,a,t[a]);return e},j=(e,t)=>ar(e,ir(t));var B=(e,t)=>{var a={};for(var x in e)E.call(e,x)&&t.indexOf(x)<0&&(a[x]=e[x]);if(e!=null&&b)for(var x of b(e))t.indexOf(x)<0&&A.call(e,x)&&(a[x]=e[x]);return a};function m(r){return r&&typeof r=="object"&&"default"in r?r:{default:r}}var d=m(a),C=m(x);const D=t.keyframes`
+(function(i,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("@emotion/react"),require("@emotion/styled"),require("react"),require("framer-motion")):typeof define=="function"&&define.amd?define(["exports","@emotion/react","@emotion/styled","react","framer-motion"],s):(i=typeof globalThis!="undefined"?globalThis:i||self,s(i.BinamikCompoents={},i["emotion-react"],i.styled,i.React,i.framerMotion))})(this,function(i,s,g,c,h){"use strict";var tr=Object.defineProperty,ar=Object.defineProperties;var or=Object.getOwnPropertyDescriptors;var F=Object.getOwnPropertySymbols;var re=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var ee=(i,s,g)=>s in i?tr(i,s,{enumerable:!0,configurable:!0,writable:!0,value:g}):i[s]=g,$=(i,s)=>{for(var g in s||(s={}))re.call(s,g)&&ee(i,g,s[g]);if(F)for(var g of F(s))te.call(s,g)&&ee(i,g,s[g]);return i},A=(i,s)=>ar(i,or(s));var N=(i,s)=>{var g={};for(var c in i)re.call(i,c)&&s.indexOf(c)<0&&(g[c]=i[c]);if(i!=null&&F)for(var c of F(i))s.indexOf(c)<0&&te.call(i,c)&&(g[c]=i[c]);return g};function P(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var b=P(g),v=P(c);const ae=s.keyframes`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -11,22 +11,22 @@
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`,S=t.keyframes`
+`,oe=s.keyframes`
   100% {
     transform: rotate(360deg);
   }
-`,$=d.default.div`
+`,ne=b.default.div`
   position: relative;
   margin: 0 auto;
-  width: ${({size:r})=>r||"1.5rem"};
+  width: ${({size:e})=>e||"1.5rem"};
 
   &:before {
     content: '';
     display: block;
     padding-top: 100%;
   }
-`,P=d.default.svg`
-  animation: ${S} 2s linear infinite;
+`,le=b.default.svg`
+  animation: ${oe} 2s linear infinite;
   height: 100%;
   transform-origin: center center;
   width: 100%;
@@ -36,31 +36,31 @@
   left: 0;
   right: 0;
   margin: auto;
-`,q=d.default.circle`
+`,ie=b.default.circle`
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: ${D} 1.5s ease-in-out infinite;
+  animation: ${ae} 1.5s ease-in-out infinite;
   stroke-linecap: round;
-`;var g={exports:{}},u={};/*
+`;var T={exports:{}},k={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var y=Object.getOwnPropertySymbols,R=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;function N(r){if(r==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(r)}function T(){try{if(!Object.assign)return!1;var r=new String("abc");if(r[5]="de",Object.getOwnPropertyNames(r)[0]==="5")return!1;for(var p={},o=0;o<10;o++)p["_"+String.fromCharCode(o)]=o;var n=Object.getOwnPropertyNames(p).map(function(l){return p[l]});if(n.join("")!=="0123456789")return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach(function(l){i[l]=l}),Object.keys(Object.assign({},i)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}T();/** @license React v17.0.2
+*/var D=Object.getOwnPropertySymbols,pe=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;function de(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function ce(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var r={},t=0;t<10;t++)r["_"+String.fromCharCode(t)]=t;var a=Object.getOwnPropertyNames(r).map(function(p){return r[p]});if(a.join("")!=="0123456789")return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(p){n[p]=p}),Object.keys(Object.assign({},n)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}ce();/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var z=C.default,h=60103;if(u.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var v=Symbol.for;h=v("react.element"),u.Fragment=v("react.fragment")}var I=z.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,L=Object.prototype.hasOwnProperty,U={key:!0,ref:!0,__self:!0,__source:!0};function k(r,p,o){var n,i={},l=null,s=null;o!==void 0&&(l=""+o),p.key!==void 0&&(l=""+p.key),p.ref!==void 0&&(s=p.ref);for(n in p)L.call(p,n)&&!U.hasOwnProperty(n)&&(i[n]=p[n]);if(r&&r.defaultProps)for(n in p=r.defaultProps,p)i[n]===void 0&&(i[n]=p[n]);return{$$typeof:h,type:r,key:l,ref:s,props:i,_owner:I.current}}u.jsx=k,u.jsxs=k,g.exports=u;const c=g.exports.jsx,G=g.exports.jsxs,w=({size:r,color:p,thickness:o})=>c($,{size:r,children:c(P,{viewBox:"25 25 50 50",children:c(q,{className:"path",cx:"50",cy:"50",r:"20",fill:"none",stroke:p||"currentColor",opacity:"0.5",strokeWidth:o||5,strokeMiterlimit:"10"})})}),H=t.keyframes`
+ */var ue=v.default,M=60103;if(k.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var R=Symbol.for;M=R("react.element"),k.Fragment=R("react.fragment")}var xe=ue.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,me=Object.prototype.hasOwnProperty,be={key:!0,ref:!0,__self:!0,__source:!0};function I(e,r,t){var a,n={},p=null,u=null;t!==void 0&&(p=""+t),r.key!==void 0&&(p=""+r.key),r.ref!==void 0&&(u=r.ref);for(a in r)me.call(r,a)&&!be.hasOwnProperty(a)&&(n[a]=r[a]);if(e&&e.defaultProps)for(a in r=e.defaultProps,r)n[a]===void 0&&(n[a]=r[a]);return{$$typeof:M,type:e,key:p,ref:u,props:n,_owner:xe.current}}k.jsx=I,k.jsxs=I,T.exports=k;const d=T.exports.jsx,y=T.exports.jsxs,C=T.exports.Fragment,q=({size:e,color:r,thickness:t})=>d(ne,{size:e,children:d(le,{viewBox:"25 25 50 50",children:d(ie,{className:"path",cx:"50",cy:"50",r:"20",fill:"none",stroke:r||"currentColor",opacity:"0.5",strokeWidth:t||5,strokeMiterlimit:"10"})})}),ge=s.keyframes`
   100% {
     opacity: 0.5;
   }
-`,W=d.default.button`
+`,fe=b.default.button`
   --button-hover-brightness: 0.88;
 
   position: relative;
-  padding: ${({isLoading:r,hasLoadingText:p})=>r&&p?"0.75em 1.125em 0.75em 2.5em":"0.75em 1.25em"};
+  padding: ${({isLoading:e,hasLoadingText:r})=>e&&r?"0.75em 1.125em 0.75em 2.5em":"0.75em 1.25em"};
   border-radius: 30px;
   border: 0;
 
@@ -74,7 +74,7 @@ object-assign
   cursor: pointer;
 
   .button__text_wrapper {
-    animation: ${({isLoading:r})=>r?H:"none"} 0.75s infinite
+    animation: ${({isLoading:e})=>e?ge:"none"} 0.75s infinite
       alternate;
   }
 
@@ -121,20 +121,20 @@ object-assign
     content: '';
     display: block;
 
-    width: ${({isLoading:r,hasLoadingText:p})=>r&&p?"2em":"0"};
+    width: ${({isLoading:e,hasLoadingText:r})=>e&&r?"2em":"0"};
   }
 
   .button__spinner_wrapper {
     margin: -0.5em 0;
-    display: ${({isLoading:r})=>r?"block":"none"};
-    ${({hasLoadingText:r})=>r&&t.css`
+    display: ${({isLoading:e})=>e?"block":"none"};
+    ${({hasLoadingText:e})=>e&&s.css`
         top: calc(50% + 0.5em);
         transform: translateY(-50%);
         position: absolute;
         left: 0.5rem;
       `}
   }
-`,Y=f=>{var _=f,{disabled:r=!1,isLoading:p=!1,loadingText:o="",outlined:n=!1,className:i="",children:l}=_,s=B(_,["disabled","isLoading","loadingText","outlined","className","children"]);return G(W,j(O({disabled:r||p,isLoading:p,hasLoadingText:!!o,className:`${i} ${n?"button__outline":""}`,type:"button"},s),{children:[c("div",{className:"button__spinner_wrapper",children:c(w,{size:"1.5em"})}),c("span",{className:"button__text_wrapper",children:p?o||"":l})]}))},J=t.css`
+`,he=o=>{var l=o,{disabled:e=!1,isLoading:r=!1,loadingText:t="",outlined:a=!1,className:n="",children:p}=l,u=N(l,["disabled","isLoading","loadingText","outlined","className","children"]);return y(fe,A($({disabled:e||r,isLoading:r,hasLoadingText:!!t,className:`${n} ${a?"button__outline":""}`,type:"button"},u),{children:[d("div",{className:"button__spinner_wrapper",children:d(q,{size:"1.5em"})}),d("span",{className:"button__text_wrapper",children:r?t||"":p})]}))},ve=s.css`
   :root {
     --clr-white: #ffffff;
     --clr-black: #000000;
@@ -234,7 +234,7 @@ object-assign
 
     --bp-tablet: 64rem; // 1024px
   }
-`,K=t.css`
+`,ye=s.css`
   html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
   blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
   img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,
@@ -320,7 +320,7 @@ object-assign
     background-clip: text;
     -webkit-background-clip: text;
   }
-`,Q=t.css`
+`,we=s.css`
   body {
     line-height: 1;
     color: #444;
@@ -382,10 +382,388 @@ object-assign
   .primary_color_txt {
     color: var(--clr-primary);
   }
-`,X=(r="normal")=>r==="light"?"rgba(0, 0, 0, 0.05)":r==="normal"?"rgba(0, 0, 0, 0.1)":"rgba(0, 0, 0, 0.2)",Z=(r="normal")=>r==="light"?"rgba(0, 0, 0, 0.03)":r==="normal"?"rgba(0, 0, 0, 0.07)":"rgba(0, 0, 0, 0.14)",V=(r="normal")=>r==="light"?"rgba(0, 0, 0, 0.02)":r==="normal"?"rgba(0, 0, 0, 0.06)":"rgba(0, 0, 0, 0.12)",rr={0:"0px 0px 0px 0px",1:"0px 2px 1px -1px",2:"0px 3px 1px -2px",3:"0px 3px 3px -2px",4:"0px 2px 4px -1px",5:"0px 3px 5px -1px",6:"0px 3px 5px -1px",7:"0px 4px 5px -2px",8:"0px 5px 5px -3px",9:"0px 5px 6px -3px",10:"0px 6px 6px -3px",11:"0px 6px 7px -4px",12:"0px 7px 8px -4px",13:"0px 7px 8px -4px",14:"0px 7px 9px -4px",15:"0px 8px 9px -5px",16:"0px 8px 10px -5px",17:"0px 8px 11px -5px",18:"0px 9px 11px -5px",19:"0px 9px 12px -6px",20:"0px 10px 13px -6px",21:"0px 10px 13px -6px",22:"0px 10px 14px -6px",23:"0px 11px 14px -7px",24:"0px 11px 15px -7px"},er={0:"0px 0px 0px 0px",1:"0px 1px 1px 0px",2:"0px 2px 2px 0px",3:"0px 3px 4px 0px",4:"0px 4px 5px 0px",5:"0px 5px 8px 0px",6:"0px 6px 10px 0px",7:"0px 7px 10px 1px",8:"0px 8px 10px 1px",9:"0px 9px 12px 1px",10:"0px 10px 14px 1px",11:"0px 11px 15px 1px",12:"0px 12px 17px 2px",13:"0px 13px 19px 2px",14:"0px 14px 21px 2px",15:"0px 15px 22px 2px",16:"0px 16px 24px 2px",17:"0px 17px 26px 2px",18:"0px 18px 28px 2px",19:"0px 19px 29px 2px",20:"0px 20px 31px 3px",21:"0px 21px 33px 3px",22:"0px 22px 35px 3px",23:"0px 23px 36px 3px",24:"0px 24px 38px 3px"},tr={0:"0px 0px 0px 0px",1:"0px 1px 3px 0px",2:"0px 1px 5px 0px",3:"0px 1px 8px 0px",4:"0px 1px 10px 0px",5:"0px 1px 14px 0px",6:"0px 1px 18px 0px",7:"0px 2px 16px 1px",8:"0px 3px 14px 2px",9:"0px 3px 16px 2px",10:"0px 4px 18px 3px",11:"0px 4px 20px 3px",12:"0px 5px 22px 4px",13:"0px 5px 24px 4px",14:"0px 5px 26px 4px",15:"0px 6px 28px 5px",16:"0px 6px 30px 5px",17:"0px 6px 32px 5px",18:"0px 7px 34px 6px",19:"0px 7px 36px 6px",20:"0px 8px 38px 7px",21:"0px 8px 40px 7px",22:"0px 8px 42px 7px",23:"0px 9px 44px 8px",24:"0px 9px 46px 8px"},pr=(r,p="light")=>`box-shadow: ${rr[r]} ${X(p)},
-                      ${er[r]} ${Z(p)},
-                      ${tr[r]} ${V(p)};`,or=()=>c(t.Global,{styles:t.css`
+`,ke=(e="normal")=>e==="light"?"rgba(0, 0, 0, 0.05)":e==="normal"?"rgba(0, 0, 0, 0.1)":"rgba(0, 0, 0, 0.2)",Ce=(e="normal")=>e==="light"?"rgba(0, 0, 0, 0.03)":e==="normal"?"rgba(0, 0, 0, 0.07)":"rgba(0, 0, 0, 0.14)",Te=(e="normal")=>e==="light"?"rgba(0, 0, 0, 0.02)":e==="normal"?"rgba(0, 0, 0, 0.06)":"rgba(0, 0, 0, 0.12)",_e={0:"0px 0px 0px 0px",1:"0px 2px 1px -1px",2:"0px 3px 1px -2px",3:"0px 3px 3px -2px",4:"0px 2px 4px -1px",5:"0px 3px 5px -1px",6:"0px 3px 5px -1px",7:"0px 4px 5px -2px",8:"0px 5px 5px -3px",9:"0px 5px 6px -3px",10:"0px 6px 6px -3px",11:"0px 6px 7px -4px",12:"0px 7px 8px -4px",13:"0px 7px 8px -4px",14:"0px 7px 9px -4px",15:"0px 8px 9px -5px",16:"0px 8px 10px -5px",17:"0px 8px 11px -5px",18:"0px 9px 11px -5px",19:"0px 9px 12px -6px",20:"0px 10px 13px -6px",21:"0px 10px 13px -6px",22:"0px 10px 14px -6px",23:"0px 11px 14px -7px",24:"0px 11px 15px -7px"},Ee={0:"0px 0px 0px 0px",1:"0px 1px 1px 0px",2:"0px 2px 2px 0px",3:"0px 3px 4px 0px",4:"0px 4px 5px 0px",5:"0px 5px 8px 0px",6:"0px 6px 10px 0px",7:"0px 7px 10px 1px",8:"0px 8px 10px 1px",9:"0px 9px 12px 1px",10:"0px 10px 14px 1px",11:"0px 11px 15px 1px",12:"0px 12px 17px 2px",13:"0px 13px 19px 2px",14:"0px 14px 21px 2px",15:"0px 15px 22px 2px",16:"0px 16px 24px 2px",17:"0px 17px 26px 2px",18:"0px 18px 28px 2px",19:"0px 19px 29px 2px",20:"0px 20px 31px 3px",21:"0px 21px 33px 3px",22:"0px 22px 35px 3px",23:"0px 23px 36px 3px",24:"0px 24px 38px 3px"},Oe={0:"0px 0px 0px 0px",1:"0px 1px 3px 0px",2:"0px 1px 5px 0px",3:"0px 1px 8px 0px",4:"0px 1px 10px 0px",5:"0px 1px 14px 0px",6:"0px 1px 18px 0px",7:"0px 2px 16px 1px",8:"0px 3px 14px 2px",9:"0px 3px 16px 2px",10:"0px 4px 18px 3px",11:"0px 4px 20px 3px",12:"0px 5px 22px 4px",13:"0px 5px 24px 4px",14:"0px 5px 26px 4px",15:"0px 6px 28px 5px",16:"0px 6px 30px 5px",17:"0px 6px 32px 5px",18:"0px 7px 34px 6px",19:"0px 7px 36px 6px",20:"0px 8px 38px 7px",21:"0px 8px 40px 7px",22:"0px 8px 42px 7px",23:"0px 9px 44px 8px",24:"0px 9px 46px 8px"},L=(e,r="light")=>`box-shadow: ${_e[e]} ${ke(r)},
+                      ${Ee[e]} ${Ce(r)},
+                      ${Oe[e]} ${Te(r)};`,Fe=()=>d(s.Global,{styles:s.css`
         body {
           overflow: hidden;
         }
-      `});e.Button=Y,e.PreventScroll=or,e.Spinner=w,e.binamikCssReset=K,e.binamikGlobalStyles=Q,e.binamikTheme=J,e.depth=pr,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+      `}),S=480,$e=e=>Math.max(e.mobileBreakpoint,S),Ae={shouldForwardProp(e){return!["columnTemplate","mobileBreakpoint","customCss"].includes(e)}},Se=b.default(h.motion.div,Ae)`
+  --radius: 0.625rem;
+  --column-template: ${e=>e.columnTemplate};
+  --table-padding: 1.875rem;
+
+  --header-row-display: grid;
+  --label-background: rgba(0, 0, 0, 0.045);
+  --highlight-transition: 150ms ease-in-out;
+
+  --row-padding: 0.5rem;
+  --row-margin: 0;
+  --row-border: none;
+  --row-even-background: var(--clr-gray14);
+  --row-odd-background: var(--clr-white);
+  --row-hover-background: var(--clr-gray11);
+
+  --cell-column-template: 1fr;
+  --cell-padding: 0.75rem;
+
+  --row-annex-border: 1px solid var(--clr-gray7);
+  --row-annex-padding: calc(var(--row-padding) + var(--cell-padding));
+  --row-annex-margin: 0 var(--row-annex-padding) var(--row-annex-padding);
+
+  --mobile-decorators-content: none;
+  --mobile-ref-width: 20ch;
+  --mobile-ref-display: none;
+  --mobile-sorting-display: none;
+
+  --table-row-height: 3.75rem;
+
+  width: 100%;
+  color: #2d2d2d;
+  line-height: 1.25;
+  border-collapse: collapse;
+  background-color: var(--clr-white);
+  border: 1px solid var(--clr-gray11);
+  padding: var(--table-padding);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  position: relative;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  @media (max-width: ${$e}px) {
+    --column-template: 1fr;
+
+    --header-row-display: none;
+
+    --row-padding: 0;
+    --row-margin: 1rem 0;
+    --row-border: 1px solid var(--clr-gray7);
+    --row-even-background: var(--clr-gray15);
+    --row-hover-background: var(--clr-gray14);
+
+    --cell-column-template: var(--mobile-ref-width) minmax(0, 1fr);
+    --cell-padding: 1rem;
+
+    --row-annex-padding: var(--cell-padding);
+    --row-annex-margin: var(--row-annex-padding);
+
+    --mobile-decorators-content: '';
+    --mobile-ref-display: block;
+    --mobile-sorting-display: flex;
+    --mobile-cell-display: grid;
+  }
+
+  @media (max-width: 480px) {
+    --table-padding: 1.25rem;
+
+    --cell-padding: 0.9rem 0.8rem;
+    --mobile-ref-width: 15ch;
+  }
+
+  @media (max-width: 360px) {
+    --table-padding: 0.7rem;
+    --cell-padding: 0.8rem 0.65rem;
+  }
+
+  ${e=>e.customCss}
+`,Be=b.default(h.motion.div)`
+  width: auto;
+  position: relative;
+  border: var(--row-annex-border);
+  border-radius: var(--radius);
+  margin: var(--row-annex-margin);
+  padding: var(--row-annex-padding);
+  background-color: rgba(255, 255, 255, 0.6);
+  transition: background-color var(--highlight-transition);
+`,W=s.css`
+  display: grid;
+  width: 100%;
+  grid-template-columns: var(--column-template);
+  padding: var(--row-padding);
+  border-radius: var(--radius);
+  transition: background-color var(--highlight-transition);
+  min-height: var(--table-row-height);
+  color: var(--clr-gray3);
+  min-height: 0;
+  min-width: 0;
+`,je=b.default(h.motion.li)`
+  margin: var(--row-margin);
+  border: var(--row-border);
+  border-radius: var(--radius);
+  padding: 0.01px 0;
+  transition: background-color var(--highlight-transition);
+  background-color: var(--clr-white);
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+  &:nth-of-type(even) {
+    background-color: var(--row-even-background);
+  }
+  &:nth-of-type(odd) {
+    background-color: var(--row-odd-background);
+  }
+  &:not(.empty_row):hover {
+    background-color: var(--row-hover-background);
+  }
+`,ze=b.default(h.motion.div)`
+  ${W}
+
+  max-width: 100%;
+  min-width: 0;
+
+  &:last-of-type .TableCellWrapper:last-of-type::before {
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+  &:last-of-type .TableCellWrapper:last-of-type .TableCellRef {
+    border-radius: 0 0 0 var(--radius);
+  }
+`,Ne=b.default(h.motion.div)`
+  ${W}
+  min-height: 4.375rem;
+  background-color: var(--label-background);
+  font-weight: bold;
+  color: var(--clr-gray3);
+  border-radius: var(--radius);
+  display: var(--header-row-display);
+`,Pe=b.default(h.motion.ul)`
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`,B=s.css`
+  padding: var(--cell-padding);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: 0;
+`,De=s.css`
+  position: relative;
+
+  &::before {
+    content: var(--mobile-decorators-content);
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background-color: transparent;
+    transition: background-color var(--highlight-transition);
+  }
+
+  &:nth-of-type(even) {
+    &::before {
+      background-color: rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  &:hover {
+    &::before {
+      background-color: rgba(0, 0, 0, 0.06);
+    }
+  }
+
+  &:first-of-type::before {
+    border-radius: var(--radius) var(--radius) 0 0;
+  }
+`,Me=b.default.div`
+  ${B}
+
+  width: 100%;
+`,Re=b.default.div`
+  ${De}
+
+  min-width: 0;
+
+  display: var(--mobile-cell-display, flex);
+
+  margin: 0;
+  width: 100%;
+  align-items: center;
+  grid-template-columns: var(--cell-column-template);
+
+  & > * {
+    border-radius: none;
+  }
+
+  &:first-of-type {
+    .TableCellRef {
+      border-radius: var(--radius) 0 0 0;
+    }
+  }
+`,Ie=b.default.div`
+  ${B}
+
+  display: var(--mobile-ref-display);
+  background-color: var(--label-background);
+  font-weight: bold;
+  color: var(--clr-gray3);
+`,qe=s.css`
+  &.sortable,
+  &.sorted-asc,
+  &.sorted-desc {
+    cursor: pointer;
+    position: relative;
+    padding-left: 3.5ch;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 0.8ch;
+    width: 0.8ch;
+    border: 0 solid var(--clr-gray3);
+    transform: rotate(45deg);
+    left: var(--cell-padding);
+  }
+  &::before {
+    border-width: 1.5px 0 0 1.5px;
+    margin-bottom: 1.2ch;
+  }
+  &::after {
+    border-width: 0 1.5px 1.5px 0;
+    margin-top: 0.8ch;
+  }
+  &:not(.sortable) {
+    cursor: default;
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+  &.sorted-desc {
+    &::before {
+      content: none;
+    }
+    &::after {
+      content: '';
+      margin-top: 0;
+      margin-bottom: 0.65ch;
+    }
+  }
+  &.sorted-asc {
+    &::after {
+      content: none;
+    }
+    &::before {
+      content: '';
+      margin-bottom: 0;
+      margin-top: 0.2ch;
+    }
+  }
+`,Le=b.default.div`
+  ${B}
+  transition: background-color var(--highlight-transition);
+  border-radius: var(--radius);
+
+  &:hover {
+    background-color: var(--clr-gray8);
+  }
+
+  ${qe}
+`,We=b.default(h.motion.button)`
+  display: var(--mobile-sorting-display);
+  align-items: center;
+  color: var(--clr-gray3);
+  margin: 0.5rem;
+  background-color: var(--clr-gray12);
+  border-radius: var(--radius);
+  padding: 0.5rem;
+  margin: -0.5rem 0 1rem auto;
+  cursor: default;
+
+  > svg {
+    margin-right: 0.5rem;
+    font-size: 1.75rem;
+  }
+
+  > p {
+    margin-right: 0.25rem;
+  }
+
+  &.sortable {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--clr-gray8);
+    }
+
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 0.4rem;
+      height: 0.4rem;
+      border: 1px solid var(--clr-gray4);
+      border-width: 0 1px 1px 0;
+      transform: rotate(45deg);
+      margin: 0 0.25rem;
+      transition: transform 300ms, margin 300ms;
+      margin-bottom: 0.25rem;
+    }
+
+    &.open {
+      z-index: 11;
+      &::after {
+        transform: rotate(225deg);
+        margin-top: 0.1rem;
+        margin-bottom: 0;
+      }
+    }
+  }
+`,He=b.default(h.motion.div)`
+  position: absolute;
+  top: 2.5rem;
+  right: 0;
+  background-color: var(--clr-white);
+  color: var(--clr-gray3);
+  margin: var(--table-padding);
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  z-index: 11;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  border: 1px solid var(--clr-gray10);
+  overflow: auto;
+  max-height: calc(100vh - 5rem);
+  transform-origin: top right;
+  ${L(8)}
+`,Ue=b.default.button`
+  background-color: var(--clr-white);
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  color: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  width: 100%;
+
+  > p {
+    margin: 0.17rem 0;
+    margin-right: 0.25rem;
+    margin-left: 1.75rem;
+    &:not(:last-child) {
+      margin-left: 0.5rem;
+    }
+  }
+  &:hover {
+    background-color: var(--clr-gray8);
+  }
+`,Ge=b.default(h.motion.button)`
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  cursor: default;
+`,_=`
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+`,H=(e=[])=>e.map(({width:t})=>(t==null?void 0:t.replace(/\s/g,""))||"1fr").join(" "),Ve=({columns:e=[],children:r=[],mobileBreakpoint:t=900})=>{t<S&&console.warn(`Table: mobileBreakpoint (${t}) is too small. The minimum of ${S} will be used instead.${_}`),H(e).split(" ").map((o,l)=>({value:o,idx:l})).filter(o=>!CSS.supports("grid-template-columns",o.value)).forEach(o=>{const l=o.value.replace(/"/g,'\\"');console.warn(`Table: Invalid width value "${l}" on columnsWidths[${o.idx}].${_}`)});const p=r.map((o,l)=>({value:o,idx:l})).filter(o=>{var l,x,f,m;return v.default.isValidElement(o.value)&&(((x=(l=o.value)==null?void 0:l.type)==null?void 0:x.displayName)==="TableRow"||((m=(f=o.value)==null?void 0:f.type)==null?void 0:m.displayName)==="EmptyRow")});p.forEach(o=>{var x,f,m,O,Z;const l=(m=(f=(x=o.value)==null?void 0:x.props)==null?void 0:f.children)==null?void 0:m.filter(rr=>rr!==void 0).length;v.default.isValidElement(o.value)&&((Z=(O=o.value)==null?void 0:O.type)==null?void 0:Z.displayName)!=="EmptyRow"&&l!==e.length&&console.warn(`Table: children[${o.idx}] length (${l}) should be equal to labels length (${e.length}).${_}`)}),r.map((o,l)=>({value:o,idx:l})).filter(o=>!p.some(l=>l.idx===o.idx)).forEach(o=>{console.warn(`Table: children[${o.idx}] is not a TableRow. See TableRow component.${_}`)})},U=e=>e!=="asc"?"asc":"desc",Ke=({column:e,onSort:r})=>{const{sortedColumn:t,sortedOrder:a=""}=E(),n=c.useMemo(()=>t===e.name?a:"",[e.name,t,a]),p=c.useCallback(()=>{!e.sortable||r(U(n))},[e.sortable,r,n]);return d(Le,{className:["TableHeader",n?`sorted-${n}`:"",e.sortable?"sortable":""].join(" "),onClick:p,role:e.sortable?"button":void 0,children:e.label})};var G={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},V=v.default.createContext&&v.default.createContext(G),w=globalThis&&globalThis.__assign||function(){return w=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++){r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},w.apply(this,arguments)},Ye=globalThis&&globalThis.__rest||function(e,r){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var n=0,a=Object.getOwnPropertySymbols(e);n<a.length;n++)r.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(t[a[n]]=e[a[n]]);return t};function K(e){return e&&e.map(function(r,t){return v.default.createElement(r.tag,w({key:t},r.attr),K(r.child))})}function j(e){return function(r){return v.default.createElement(Je,w({attr:w({},e.attr)},r),K(e.child))}}function Je(e){var r=function(t){var a=e.attr,n=e.size,p=e.title,u=Ye(e,["attr","size","title"]),o=n||t.size||"1em",l;return t.className&&(l=t.className),e.className&&(l=(l?l+" ":"")+e.className),v.default.createElement("svg",w({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},t.attr,a,u,{className:l,style:w(w({color:e.color||t.color},t.style),e.style),height:o,width:o,xmlns:"http://www.w3.org/2000/svg"}),p&&v.default.createElement("title",null,p),e.children)};return V!==void 0?v.default.createElement(V.Consumer,null,function(t){return r(t)}):r(G)}function Qe(e){return j({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M7 20h2V8h3L8 4 4 8h3zm13-4h-3V4h-2v12h-3l4 4z"}}]})(e)}function Y(e){return j({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"m6 20 4-4H7V4H5v12H2zm5-12h9v2h-9zm0 4h7v2h-7zm0-8h11v2H11zm0 12h5v2h-5z"}}]})(e)}function J(e){return j({tag:"svg",attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{d:"M11 9h9v2h-9zm0 4h7v2h-7zm0-8h11v2H11zm0 12h5v2h-5zm-6 3h2V8h3L6 4 2 8h3z"}}]})(e)}const Xe=({onSortingChange:e})=>{const{columns:r=[],sortedOrder:t="",sortedColumn:a=""}=E(),n=c.useMemo(()=>r.filter(({sortable:m})=>m),[r]),p=c.useMemo(()=>{var m;return((m=r.find(({name:O})=>O===a))==null?void 0:m.label)||""},[r,a]),u=c.useMemo(()=>n.length,[n]),[o,l]=c.useState(!1),x=c.useCallback(()=>{u&&l(m=>!m)},[u]);c.useEffect(()=>{u&&l(!1)},[u]);const f=c.useCallback(m=>()=>{l(!1),e(m)(U(a===m.name?t:""))},[e,a,t]);return u||p&&t?y(C,{children:[y(We,{className:[u?"sortable":"",o?"open":""].join(" "),onClick:x,disabled:!u,type:"button",layout:!0,children:[u&&(!p||!t)?y(C,{children:[d(Qe,{}),d("p",{children:"Ordenar"})]}):null,p&&t?y(C,{children:[t==="asc"?d(Y,{}):d(J,{}),d("p",{children:p})]}):null]}),d(h.AnimatePresence,{children:o?y(C,{children:[d(Ge,{onClick:x,type:"button"}),d(He,{initial:{transform:"scale(0)",opacity:0},animate:{transform:"scale(1)",opacity:1},exit:{transform:"scale(0)",opacity:0},transition:{type:"tween"},children:n.map(m=>y(Ue,{onClick:f(m),children:[d("p",{children:m.label}),m.name===a?t==="desc"?d(Y,{size:"1.25rem"}):d(J,{size:"1.25rem"}):null]},m.key))})]}):null})]}):null},Ze=e=>{},Q=c.createContext({}),er=({columns:e=[],children:r,customCss:t,sorting:a,onSortingChange:n=Ze,mobileBreakpoint:p=900})=>{const u=c.useCallback(x=>f=>{!(x!=null&&x.sortable)||n({column:x.name,order:f})},[n]);c.useEffect(()=>{const x=r.flat().filter(Boolean);Ve({columns:e,children:x,mobileBreakpoint:p})},[r,e,p]);const o=c.useMemo(()=>H(e),[e]),l=c.useMemo(()=>e.map((x,f)=>A($({},x),{index:f,key:`${x.name}-${f}`})),[e]);return d(Q.Provider,{value:{columns:l,sortedOrder:a==null?void 0:a.order,sortedColumn:a==null?void 0:a.column},children:y(Se,{columnTemplate:o,customCss:t,mobileBreakpoint:p,layout:!0,children:[d(Xe,{onSortingChange:u}),d(Ne,{layout:!0,children:l.map(x=>d(Ke,{column:x,onSort:u(x)},x.key))}),d(Pe,{children:r.map((x,f)=>d(c.Fragment,{children:x},f))})]})})};function E(){const e=c.useContext(Q);if(!e)throw new Error("useTable and TableRow must be used within a Table");return e}const z=n=>{var p=n,{children:e,className:r,annex:t}=p,a=N(p,["children","className","annex"]);const{columns:u=[]}=E(),o=c.useMemo(()=>`table-row-${Math.random().toString(16).slice(2)}`,[]);return d(C,{children:y(je,A($({layout:!0,className:r},a),{children:[d(ze,{id:o,layoutId:o,className:"TableRow",children:u.map(l=>y(Re,{className:`TableCellWrapper column-${l.index}`,children:[d(Ie,{className:`TableCellRef column-${l.index}`,children:l.label}),d(Me,{className:`TableCell column-${l.index}`,children:e[l.index]||null})]},l.key))}),d(h.AnimatePresence,{children:t?d(Be,{layoutId:`${o}-annex`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0,height:0,padding:0,margin:0,overflow:"hidden"},transition:{type:"tween"},"aria-details":o,className:"TableRowAnnex",children:t},"annex"):null})]}))})};z.displayName="TableRow";const X=()=>{const{columns:e=[]}=E();return d(z,{className:"empty_row",children:Array(e.length).fill(null)})};X.displayName="EmptyRow",i.Button=he,i.EmptyRow=X,i.PreventScroll=Fe,i.Spinner=q,i.Table=er,i.TableRow=z,i.binamikCssReset=ye,i.binamikGlobalStyles=we,i.binamikTheme=ve,i.depth=L,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Buttons/';
 export * from './Styles';
 export * from './Assets';
+export * from './Table';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@binamik/components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",