@code0-tech/pictor 0.11.1 → 0.13.0

package/LICENSE

@@ -1,7 +1,27 @@
 Copyright 2023-2026 Code0 UG (haftungsbeschränkt)
 
+This license applies to all files in this repository EXCEPT the contents of the
+directory "src/components/icon/codezero" (and any build artifacts derived from
+it), which are governed by the "Excluded Assets" section at the bottom of this
+file.
+
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+Excluded Assets
+
+The contents of the directory "src/components/icon/codezero" (and any build
+artifacts derived from it, such as the corresponding files in the published
+package) are NOT covered by the MIT license above. These files include brand
+logos and trademarks that are the property of their respective owners and are
+used by Code0 UG (haftungsbeschränkt) under permission.
+
+No license or right to use, copy, modify, distribute, sublicense, or otherwise
+exploit these excluded assets is granted to any third party. All rights are
+reserved by their respective owners. Any use of these assets requires the prior
+written permission of the respective rights holder.

package/dist/assets/components/avatar/Avatar.style.css

@@ -1 +1 @@
-.avatar{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%}.avatar{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:transparent;box-shadow:none}.avatar--image{padding:0}.avatar--identicon>div>div{--color: inherit;background:#201e2c}.avatar--identicon>div>div>span,.avatar--identicon>div>div>p{color:var(--color)}
+.avatar{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}.avatar{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:transparent;box-shadow:none}.avatar--image{padding:0}.avatar--identicon>div>div{--color: inherit;background:transparent;width:calc(var(--size) * 1px);height:calc(var(--size) * 1px)}.avatar--identicon>div>div>span>svg{width:calc(var(--size) * 1px);height:calc(var(--size) * 1px)}.avatar--identicon>div>div>span,.avatar--identicon>div>div>p{color:var(--color);font-size:calc(var(--size) * 1px)}

package/dist/assets/components/card/Card.style.css

@@ -1 +1 @@
-.card{display:block;position:relative;font-size:.8rem}.card{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.card>.card__section>img{border-radius:.5rem}.card>.card__section--border:first-child{margin-top:calc(-1 * var(--padding));border-top:none}.card>.card__section--border:not(:has(~.card__section)){margin-bottom:calc(-1 * var(--padding));border-bottom:none}.card *.card__section>img{border-radius:.5rem}.card__section{position:relative;box-sizing:border-box}.card__section--border{margin-right:calc(-1 * var(--padding));margin-left:calc(-1 * var(--padding));padding:var(--padding);border-top:1px solid rgba(191,191,191,.1);border-bottom:1px solid rgba(191,191,191,.1)}.card__section--border+.card__section--border{border-top:none}.card__section--hover{cursor:pointer}.card__section--hover:hover{background:#100e1d}.card__section:first-child{border-top-left-radius:1rem;border-top-right-radius:1rem}.card__section:last-child{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.card--primary{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--primary.card--none{background:transparent;border-color:transparent}.card--primary.card--filled{border-color:transparent}.card--primary.card--outlined{background:transparent}.card--primary.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--primary.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--primary.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--primary.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--primary.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--primary.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--primary.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-primary{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(191,191,191,.1) solid 1px}.card--border-primary{box-shadow:1px solid #bfbfbf1a}.card--secondary{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--secondary.card--none{background:transparent;border-color:transparent}.card--secondary.card--filled{border-color:transparent}.card--secondary.card--outlined{background:transparent}.card--secondary.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--secondary.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--secondary.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--secondary.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--secondary.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--secondary.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--secondary.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-secondary{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(191,191,191,.1) solid 1px}.card--border-secondary{box-shadow:1px solid #bfbfbf1a}.card--tertiary{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--tertiary.card--none{background:transparent;border-color:transparent}.card--tertiary.card--filled{border-color:transparent}.card--tertiary.card--outlined{background:transparent}.card--tertiary.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--tertiary.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--tertiary.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--tertiary.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--tertiary.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--tertiary.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--tertiary.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-tertiary{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(255,255,255,.1) solid 1px}.card--border-tertiary{box-shadow:1px solid #ffffff1a}.card--success{background:#0a1814;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--success.card--none{background:transparent;border-color:transparent}.card--success.card--filled{border-color:transparent}.card--success.card--outlined{background:transparent}.card--success.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--success.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--success.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--success.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--success.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--success.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--success.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-success{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(41,191,18,.1) solid 1px}.card--border-success{box-shadow:1px solid #29bf121a}.card--warning{background:#201813;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--warning.card--none{background:transparent;border-color:transparent}.card--warning.card--filled{border-color:transparent}.card--warning.card--outlined{background:transparent}.card--warning.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--warning.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--warning.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--warning.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--warning.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--warning.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--warning.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-warning{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(255,190,11,.1) solid 1px}.card--border-warning{box-shadow:1px solid #ffbe0b1a}.card--error{background:#1c0516;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--error.card--none{background:transparent;border-color:transparent}.card--error.card--filled{border-color:transparent}.card--error.card--outlined{background:transparent}.card--error.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--error.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--error.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--error.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--error.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--error.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--error.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-error{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(217,4,41,.1) solid 1px}.card--border-error{box-shadow:1px solid #d904291a}.card--info{background:#121e24;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--info.card--none{background:transparent;border-color:transparent}.card--info.card--filled{border-color:transparent}.card--info.card--outlined{background:transparent}.card--info.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--info.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--info.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--info.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--info.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--info.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--info.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--outline-info{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(112,255,178,.1) solid 1px}.card--border-info{box-shadow:1px solid #70ffb21a}.card--border--dashed{border-style:dashed}.card--xxs{--padding: .35rem;padding:var(--padding)}.card--xs{--padding: .7rem;padding:var(--padding)}.card--sm{--padding: .8rem;padding:var(--padding)}.card--md{--padding: 1rem;padding:var(--padding)}.card--lg{--padding: 1.2rem;padding:var(--padding)}.card--xl{--padding: 1.3rem;padding:var(--padding)}
+.card{display:block;position:relative;font-size:.8rem}.card{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.card>.card__section>img{border-radius:.5rem}.card>.card__section--border:first-child{margin-top:calc(-1 * var(--padding));border-top:none}.card>.card__section--border:not(:has(~.card__section)){margin-bottom:calc(-1 * var(--padding));border-bottom:none}.card *.card__section>img{border-radius:.5rem}.card__section{position:relative;box-sizing:border-box}.card__section--border{margin-right:calc(-1 * var(--padding));margin-left:calc(-1 * var(--padding));padding:var(--padding);border-top:1px solid rgba(191,191,191,.1);border-bottom:1px solid rgba(191,191,191,.1)}.card__section--border+.card__section--border{border-top:none}.card__section--hover{cursor:pointer}.card__section--hover:hover{background:#100e1d}.card__section:first-child{border-top-left-radius:1rem;border-top-right-radius:1rem}.card__section:last-child{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem}.card--primary{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--primary.card--none{background:transparent;border-color:transparent}.card--primary.card--filled{border-color:transparent}.card--primary.card--outlined{background:transparent}.card--primary.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--primary.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--primary.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--primary.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--primary.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--primary.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--primary.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--primary.card--clickable:hover{background:#bfbfbf26;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--primary.card--clickable:active,.card--primary.card--clickable:focus,.card--primary.card--clickable[aria-selected=true],.card--primary.card--clickable[data-state=open]{background:#bfbfbf33;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--primary.card--clickable{cursor:pointer}.card--outline-primary{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(191,191,191,.1) solid 1px}.card--border-primary{box-shadow:1px solid #bfbfbf1a}.card--secondary{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--secondary.card--none{background:transparent;border-color:transparent}.card--secondary.card--filled{border-color:transparent}.card--secondary.card--outlined{background:transparent}.card--secondary.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--secondary.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--secondary.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--secondary.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--secondary.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--secondary.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--secondary.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--secondary.card--clickable:hover{background:#23212e;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--secondary.card--clickable:active,.card--secondary.card--clickable:focus,.card--secondary.card--clickable[aria-selected=true],.card--secondary.card--clickable[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--secondary.card--clickable{cursor:pointer}.card--outline-secondary{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(191,191,191,.1) solid 1px}.card--border-secondary{box-shadow:1px solid #bfbfbf1a}.card--tertiary{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--tertiary.card--none{background:transparent;border-color:transparent}.card--tertiary.card--filled{border-color:transparent}.card--tertiary.card--outlined{background:transparent}.card--tertiary.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--tertiary.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--tertiary.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--tertiary.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--tertiary.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--tertiary.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--tertiary.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--tertiary.card--clickable:hover{background:#2c2b37;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--tertiary.card--clickable:active,.card--tertiary.card--clickable:focus,.card--tertiary.card--clickable[aria-selected=true],.card--tertiary.card--clickable[data-state=open]{background:#393743;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--tertiary.card--clickable{cursor:pointer}.card--outline-tertiary{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(255,255,255,.1) solid 1px}.card--border-tertiary{box-shadow:1px solid #ffffff1a}.card--success{background:#0a1814;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--success.card--none{background:transparent;border-color:transparent}.card--success.card--filled{border-color:transparent}.card--success.card--outlined{background:transparent}.card--success.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--success.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--success.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--success.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--success.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--success.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--success.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--success.card--clickable:hover{background:#0c2114;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--success.card--clickable:active,.card--success.card--clickable:focus,.card--success.card--clickable[aria-selected=true],.card--success.card--clickable[data-state=open]{background:#0e2a14;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--success.card--clickable{cursor:pointer}.card--outline-success{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(41,191,18,.1) solid 1px}.card--border-success{box-shadow:1px solid #29bf121a}.card--warning{background:#201813;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--warning.card--none{background:transparent;border-color:transparent}.card--warning.card--filled{border-color:transparent}.card--warning.card--outlined{background:transparent}.card--warning.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--warning.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--warning.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--warning.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--warning.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--warning.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--warning.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--warning.card--clickable:hover{background:#2c2113;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--warning.card--clickable:active,.card--warning.card--clickable:focus,.card--warning.card--clickable[aria-selected=true],.card--warning.card--clickable[data-state=open]{background:#392a12;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--warning.card--clickable{cursor:pointer}.card--outline-warning{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(255,190,11,.1) solid 1px}.card--border-warning{box-shadow:1px solid #ffbe0b1a}.card--error{background:#1c0516;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--error.card--none{background:transparent;border-color:transparent}.card--error.card--filled{border-color:transparent}.card--error.card--outlined{background:transparent}.card--error.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--error.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--error.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--error.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--error.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--error.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--error.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--error.card--clickable:hover{background:#270517;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--error.card--clickable:active,.card--error.card--clickable:focus,.card--error.card--clickable[aria-selected=true],.card--error.card--clickable[data-state=open]{background:#310518;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--error.card--clickable{cursor:pointer}.card--outline-error{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(217,4,41,.1) solid 1px}.card--border-error{box-shadow:1px solid #d904291a}.card--info{background:#121e24;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem}.card--info.card--none{background:transparent;border-color:transparent}.card--info.card--filled{border-color:transparent}.card--info.card--outlined{background:transparent}.card--info.card--gradient-primary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #070514}.card--info.card--gradient-secondary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #191825}.card--info.card--gradient-tertiary{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201e2c}.card--info.card--gradient-success{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #0a1814}.card--info.card--gradient-warning{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #201813}.card--info.card--gradient-error{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #1c0516}.card--info.card--gradient-info{box-shadow:inset 0 0 calc(var(--padding) * 2) calc(var(--padding) / 2) #121e24}.card--info.card--clickable:hover{background:#172b2c;box-shadow:inset 0 1px 1px #bfbfbf1a}.card--info.card--clickable:active,.card--info.card--clickable:focus,.card--info.card--clickable[aria-selected=true],.card--info.card--clickable[data-state=open]{background:#1c3734;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.card--info.card--clickable{cursor:pointer}.card--outline-info{outline-offset:calc(var(--padding) / 3);margin:calc(var(--padding) / 3);outline:rgba(112,255,178,.1) solid 1px}.card--border-info{box-shadow:1px solid #70ffb21a}.card--border--dashed{border-style:dashed}.card--xxs{--padding: .35rem;padding:var(--padding)}.card--xs{--padding: .7rem;padding:var(--padding)}.card--sm{--padding: .8rem;padding:var(--padding)}.card--md{--padding: 1rem;padding:var(--padding)}.card--lg{--padding: 1.2rem;padding:var(--padding)}.card--xl{--padding: 1.3rem;padding:var(--padding)}

package/dist/assets/components/data-table/DataTable.style.css

@@ -1 +1 @@
-.data-table{width:100%;-webkit-border-horizontal-spacing:0;-webkit-border-vertical-spacing:0;border-spacing:0}.data-table__row td{border-bottom:.5px solid rgba(191,191,191,.1);border-top:.5px solid rgba(191,191,191,.1);padding:.7rem .35rem}.data-table__row:hover{background:#191825;cursor:pointer}.data-table__row td:last-child{width:1px;white-space:nowrap}
+.data-table{width:100%;-webkit-border-horizontal-spacing:0;-webkit-border-vertical-spacing:0;border-spacing:0}.data-table__header th{text-align:left;padding:.7rem 0;border-bottom:.5px solid rgba(191,191,191,.1)}.data-table__header th:last-child{width:1px;white-space:nowrap}.data-table__row td{border-bottom:.5px solid rgba(191,191,191,.1);border-top:.5px solid rgba(191,191,191,.1);padding:.7rem 0}.data-table__row:hover{background:#ffffff0d;cursor:pointer}.data-table__row:active{background:#ffffff1a}.data-table__row td:last-child{width:1px;white-space:nowrap}.data-table__pagination{display:flex;align-items:center;justify-content:space-between;gap:.7rem}

package/dist/assets/components/form/Input.style.css

@@ -1 +1 @@
-.input{display:flex;z-index:1;align-items:center;box-sizing:border-box}.input{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input:hover{background:#bfbfbf26;box-shadow:inset 0 1px 1px #ffffff1a}.input:active,.input:focus,.input[aria-selected=true],.input[data-state=open]{background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:1rem}.input:has(.input__control:focus),.input:has(.input__control[contenteditable=true]:focus){background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input--not-valid{background:#1c0516;box-shadow:inset 0 1px 1px #d904291a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input__left,.input__right{display:flex;align-items:stretch;margin:.175rem;gap:.7rem}.input__left>button,.input__right>button{height:100%;padding-left:0;padding-right:0}.input__left--action,.input__right--action{padding:0}.input__left--placeholder,.input__right--placeholder{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:.825rem;padding:.7rem;box-shadow:none}.input__left{padding-left:.7rem}.input__left--icon{align-items:center}.input__right{padding-right:.7rem}.input__right--icon{align-items:center}.input__control{background:none;box-shadow:none;border:none;outline:none;margin:.7rem;vertical-align:middle;flex:1;width:100%;font-size:.8rem;box-sizing:border-box;color:#ffffff80}.input__control{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__token{display:inline-flex;align-items:center;vertical-align:middle;user-select:none;-webkit-user-select:none;-moz-user-select:none}.input__label{text-transform:uppercase;color:#ffffff80;font-size:.7rem;display:block}.input__label{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__description{color:#ffffff80;font-size:.8rem;margin:.35rem 0 .7rem;display:block}.input__description{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__message{z-index:0;display:flex;align-items:center;font-size:.8rem;gap:.35rem;margin-top:.7rem}.input__message{border-radius:1rem;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;color:#ffffffbf;box-shadow:none}.input__message>svg{width:1rem;height:1rem;min-width:1rem;min-height:1rem}.pin-input{display:flex;justify-content:space-between;gap:.7rem;position:relative;background:transparent}.pin-input__field{flex:1;width:100%;aspect-ratio:1/1;text-align:center}.number-input::-webkit-outer-spin-button,.number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield}.radio-input{background:transparent!important;box-shadow:none!important;display:flex;align-items:center;box-sizing:border-box;gap:.35rem;position:relative}.radio-input__button{top:-1px;width:18px;height:18px;padding:.35rem}.radio-input__button{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.radio-input__button:active,.radio-input__button:focus,.radio-input__button[aria-selected=true],.radio-input__button[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.radio-input__button{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.radio-input__button:disabled,.radio-input__button[data-disabled],.radio-input__button[aria-disabled=true],.radio-input__button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.radio-input__button{border-radius:1rem}.radio-input__button[data-state=checked]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.radio-input__indicator{height:100%;position:relative;display:block;aspect-ratio:1/1}.radio-input__indicator[data-state=checked]{background-color:#70ffb2}.radio-input__indicator[data-state=checked]{border-radius:1rem}.radio-button{padding:0;display:inline-flex}.checkbox-input{background:transparent!important;box-shadow:none!important;align-items:center;box-sizing:border-box;gap:.35rem}.checkbox-input__button{aspect-ratio:1/1;width:1.3rem;height:1.3rem;display:flex;align-items:center;justify-content:center;border-radius:.35rem;cursor:pointer}.checkbox-input__button{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.checkbox-input__button:active,.checkbox-input__button:focus,.checkbox-input__button[aria-selected=true],.checkbox-input__button[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.checkbox-input__button{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.checkbox-input__button:disabled,.checkbox-input__button[data-disabled],.checkbox-input__button[aria-disabled=true],.checkbox-input__button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.checkbox-input__indicator{position:relative;display:flex;align-items:center;justify-content:center;top:1px;color:#70ffb2}.switch-input{box-shadow:none!important;background:transparent!important;width:fit-content}.switch-input .input__control{position:relative;box-sizing:border-box;padding:0;margin:0;height:16px;width:0;appearance:none;outline:none;cursor:pointer;background-color:transparent;border-radius:50%}.switch-input .input__control:checked:after{-webkit-transform:translateX(22px);-ms-transform:translateX(22px);transform:translate(22px);-webkit-transition:.4s;transition:.4s}.switch-input .input__control:checked:before{background:#121e24;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;position:absolute;width:2.6rem;height:1.25rem}.switch-input .input__control:after{width:.9rem;height:.9rem;background-color:#fff;border-radius:50%;position:absolute;content:"";-webkit-transition:.4s;transition:.4s}.switch-input .input__control:before{content:"";z-index:-1;-webkit-transition:.4s;transition:.4s;top:-.175rem;left:-.175rem}.switch-input .input__control:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem;position:absolute;width:2.6rem;height:1.25rem}
+.input{display:flex;z-index:1;align-items:center;box-sizing:border-box}.input{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input:hover{background:#bfbfbf26;box-shadow:inset 0 1px 1px #ffffff1a}.input:active,.input:focus,.input[aria-selected=true],.input[data-state=open]{background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:1rem}.input:has(.input__control:focus),.input:has(.input__control[contenteditable=true]:focus){background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.input--not-valid{background:#1c0516;box-shadow:inset 0 1px 1px #d904291a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.input__left,.input__right{display:flex;align-items:stretch;margin:.175rem;gap:.7rem}.input__left>button,.input__right>button{height:100%;padding-left:0;padding-right:0}.input__left--action,.input__right--action{padding:0}.input__left--placeholder,.input__right--placeholder{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:.825rem;padding:.7rem;box-shadow:none}.input__left{padding-left:.7rem}.input__left--icon{align-items:center}.input__right{padding-right:.7rem}.input__right--icon{align-items:center}.input__control{background:none;box-shadow:none;border:none;outline:none;margin:.7rem;vertical-align:middle;flex:1;width:100%;font-size:.8rem;box-sizing:border-box;color:#ffffff80}.input__control{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__token{display:inline-flex;align-items:center;vertical-align:middle;user-select:none;-webkit-user-select:none;-moz-user-select:none}.input__label{text-transform:uppercase;color:#ffffff80;font-size:.7rem;display:block}.input__label{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__description{color:#ffffff80;font-size:.8rem;margin:.35rem 0 .7rem;display:block}.input__description{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.input__message{z-index:0;display:flex;align-items:center;font-size:.8rem;gap:.35rem;margin-top:.7rem}.input__message{border-radius:1rem;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;color:#ffffffbf;box-shadow:none}.input__message>svg{width:1rem;height:1rem;min-width:1rem;min-height:1rem}.pin-input{display:flex;align-items:stretch;position:relative;width:100%;overflow:hidden}.pin-input{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.pin-input:hover{background:#bfbfbf26;box-shadow:inset 0 1px 1px #ffffff1a}.pin-input{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;border-radius:1rem}.pin-input:has(.pin-input__field:focus){background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}.pin-input--not-valid{background:#1c0516;box-shadow:inset 0 1px 1px #d904291a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.pin-input__field{flex:1;min-width:0;padding:.7rem 0;text-align:center;background-color:transparent;background-repeat:no-repeat;background-position:left center;background-size:1px 100%;border:none;box-shadow:none;outline:none;font-size:.8rem;color:#fff;box-sizing:border-box}.pin-input__field{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.pin-input__field:disabled,.pin-input__field[data-disabled],.pin-input__field[aria-disabled=true],.pin-input__field--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.pin-input__field:not(:first-of-type){background-image:linear-gradient(to bottom,transparent 25%,rgba(255,255,255,.12) 25%,rgba(255,255,255,.12) 75%,transparent 75%)}.pin-input__field:focus{background-color:#ffffff0f}.pin-input__field::placeholder{color:#ffffff59}.number-input::-webkit-outer-spin-button,.number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number-input[type=number]{-moz-appearance:textfield}.radio-input{background:transparent!important;box-shadow:none!important;display:flex;align-items:center;box-sizing:border-box;gap:.35rem;position:relative}.radio-input__button{top:-1px;width:18px;height:18px;padding:.35rem}.radio-input__button{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.radio-input__button:active,.radio-input__button:focus,.radio-input__button[aria-selected=true],.radio-input__button[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.radio-input__button{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.radio-input__button:disabled,.radio-input__button[data-disabled],.radio-input__button[aria-disabled=true],.radio-input__button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.radio-input__button{border-radius:1rem}.radio-input__button[data-state=checked]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.radio-input__indicator{height:100%;position:relative;display:block;aspect-ratio:1/1}.radio-input__indicator[data-state=checked]{background-color:#70ffb2}.radio-input__indicator[data-state=checked]{border-radius:1rem}.radio-button{padding:0;display:inline-flex}.checkbox-input{background:transparent!important;box-shadow:none!important;align-items:center;box-sizing:border-box;gap:.35rem}.checkbox-input__button{aspect-ratio:1/1;width:1.3rem;height:1.3rem;display:flex;align-items:center;justify-content:center;border-radius:.35rem;cursor:pointer}.checkbox-input__button{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.checkbox-input__button:active,.checkbox-input__button:focus,.checkbox-input__button[aria-selected=true],.checkbox-input__button[data-state=open]{background:#2c2a36;box-shadow:inset 0 1px 1px #bfbfbf1a;outline:none}.checkbox-input__button{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.checkbox-input__button:disabled,.checkbox-input__button[data-disabled],.checkbox-input__button[aria-disabled=true],.checkbox-input__button--disabled{cursor:not-allowed;opacity:25%;pointer-events:unset}.checkbox-input__indicator{position:relative;display:flex;align-items:center;justify-content:center;top:1px;color:#70ffb2}.switch-input{box-shadow:none!important;background:transparent!important;width:fit-content}.switch-input .input__control{position:relative;box-sizing:border-box;padding:0;margin:0;height:16px;width:0;appearance:none;outline:none;cursor:pointer;background-color:transparent;border-radius:50%}.switch-input .input__control:checked:after{-webkit-transform:translateX(22px);-ms-transform:translateX(22px);transform:translate(22px);-webkit-transition:.4s;transition:.4s}.switch-input .input__control:checked:before{background:#121e24;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;position:absolute;width:2.6rem;height:1.25rem}.switch-input .input__control:after{width:.9rem;height:.9rem;background-color:#fff;border-radius:50%;position:absolute;content:"";-webkit-transition:.4s;transition:.4s}.switch-input .input__control:before{content:"";z-index:-1;-webkit-transition:.4s;transition:.4s;top:-.175rem;left:-.175rem}.switch-input .input__control:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem;position:absolute;width:2.6rem;height:1.25rem}

package/dist/assets/components/icon/Icon.style.css

@@ -0,0 +1 @@
+.icon{display:inline-block;flex-shrink:0;vertical-align:middle}

package/dist/components/avatar/Avatar.js

@@ -8,32 +8,33 @@ import "react";
 import { hashToColor as A } from "../../utils/color.js";
 const $ = (m) => {
   const t = d.c(3), {
-    src: e,
-    size: i
+    src: i,
+    size: e
   } = m;
   let o;
-  return t[0] !== i || t[1] !== e ? (o = /* @__PURE__ */ p("img", { src: e, width: i, height: i, alt: "Avatar image" }), t[0] = i, t[1] = e, t[2] = o) : o = t[2], o;
+  return t[0] !== e || t[1] !== i ? (o = /* @__PURE__ */ p("img", { src: i, width: e, height: e, alt: "Avatar image" }), t[0] = e, t[1] = i, t[2] = o) : o = t[2], o;
 }, x = (m) => {
-  const t = d.c(12), {
-    identifier: e,
-    size: i,
+  const t = d.c(13), {
+    identifier: i,
+    size: e,
     color: o,
     type: s
   } = m;
   let r;
-  t[0] !== o || t[1] !== e ? (r = o ?? A(e), t[0] = o, t[1] = e, t[2] = r) : r = t[2];
+  t[0] !== o || t[1] !== i ? (r = o ?? A(i), t[0] = o, t[1] = i, t[2] = r) : r = t[2];
   let l;
-  t[3] !== r ? (l = {
-    "--color": r
-  }, t[3] = r, t[4] = l) : l = t[4];
+  t[3] !== e || t[4] !== r ? (l = {
+    "--color": r,
+    "--size": e
+  }, t[3] = e, t[4] = r, t[5] = l) : l = t[5];
   const n = l, c = s ?? "shape";
   let a;
-  t[5] !== e || t[6] !== i || t[7] !== c ? (a = /* @__PURE__ */ p(z, { style: c, value: e, size: i }), t[5] = e, t[6] = i, t[7] = c, t[8] = a) : a = t[8];
+  t[6] !== i || t[7] !== e || t[8] !== c ? (a = /* @__PURE__ */ p(z, { style: c, value: i, size: e }), t[6] = i, t[7] = e, t[8] = c, t[9] = a) : a = t[9];
   let f;
-  return t[9] !== n || t[10] !== a ? (f = /* @__PURE__ */ p("div", { style: n, children: a }), t[9] = n, t[10] = a, t[11] = f) : f = t[11], f;
+  return t[10] !== n || t[11] !== a ? (f = /* @__PURE__ */ p("div", { style: n, children: a }), t[10] = n, t[11] = a, t[12] = f) : f = t[12], f;
 }, b = (m) => {
   const t = d.c(16);
-  let e, i, o, s, r, l;
+  let i, e, o, s, r, l;
   if (t[0] !== m) {
     const {
       identifier: a,
@@ -43,11 +44,11 @@ const $ = (m) => {
       type: g,
       ...u
     } = m;
-    i = a, e = f, s = h, l = g, o = v === void 0 ? 32 : v, r = y(`avatar ${!i && s ? "avatar--image" : "avatar--identicon"}`, u), t[0] = m, t[1] = e, t[2] = i, t[3] = o, t[4] = s, t[5] = r, t[6] = l;
+    e = a, i = f, s = h, l = g, o = v === void 0 ? 32 : v, r = y(`avatar ${!e && s ? "avatar--image" : "avatar--identicon"}`, u), t[0] = m, t[1] = i, t[2] = e, t[3] = o, t[4] = s, t[5] = r, t[6] = l;
   } else
-    e = t[1], i = t[2], o = t[3], s = t[4], r = t[5], l = t[6];
+    i = t[1], e = t[2], o = t[3], s = t[4], r = t[5], l = t[6];
   let n;
-  t[7] !== e || t[8] !== i || t[9] !== o || t[10] !== s || t[11] !== l ? (n = i ? /* @__PURE__ */ p(x, { type: l, color: e, identifier: i, size: o }) : s ? /* @__PURE__ */ p($, { src: s, size: o }) : null, t[7] = e, t[8] = i, t[9] = o, t[10] = s, t[11] = l, t[12] = n) : n = t[12];
+  t[7] !== i || t[8] !== e || t[9] !== o || t[10] !== s || t[11] !== l ? (n = e ? /* @__PURE__ */ p(x, { type: l, color: i, identifier: e, size: o }) : s ? /* @__PURE__ */ p($, { src: s, size: o }) : null, t[7] = i, t[8] = e, t[9] = o, t[10] = s, t[11] = l, t[12] = n) : n = t[12];
   let c;
   return t[13] !== r || t[14] !== n ? (c = /* @__PURE__ */ p("div", { ...r, children: n }), t[13] = r, t[14] = n, t[15] = c) : c = t[15], c;
 };

package/dist/components/card/Card.d.ts

@@ -10,6 +10,7 @@ export interface Card extends Component<HTMLDivElement> {
     outline?: boolean;
     outlineColor?: Color;
     dashed?: boolean;
+    clickable?: boolean;
     paddingSize?: Sizes;
 }
 export declare const Card: React.FC<Card>;

package/dist/components/card/Card.js

@@ -1,45 +1,47 @@
-import { jsx as f, Fragment as j } from "react/jsx-runtime";
-import { c as E } from "../../_virtual/compiler-runtime.js";
+import { jsx as C, Fragment as E } from "react/jsx-runtime";
+import { c as F } from "../../_virtual/compiler-runtime.js";
 import '../../assets/components/card/Card.style.css';/* empty css                */
 import "../../utils/contextStore.js";
 import "react";
-import { mergeComponentProps as F } from "../../utils/component.js";
+import { mergeComponentProps as P } from "../../utils/component.js";
 import "js-md5";
-const G = (e) => {
-  const o = E.c(6);
+const I = (e) => {
+  const o = F.c(6);
   let r, t;
   if (o[0] !== e) {
     const {
-      children: C,
+      children: b,
       color: i,
-      variant: n,
-      gradient: a,
+      variant: a,
+      gradient: n,
       gradientColor: c,
       borderColor: l,
       outlineColor: s,
       outline: m,
-      dashed: g,
-      paddingSize: p,
+      dashed: v,
+      clickable: $,
+      paddingSize: g,
       ...u
     } = e;
-    r = C;
-    const h = i === void 0 ? "primary" : i, b = n === void 0 ? "normal" : n, v = a === void 0 ? !1 : a, x = c === void 0 ? "secondary" : c, $ = l === void 0 ? "secondary" : l, y = s === void 0 ? "secondary" : s, z = m === void 0 ? !1 : m, S = g === void 0 ? !1 : g;
-    t = F(`
+    r = b;
+    const h = i === void 0 ? "primary" : i, x = a === void 0 ? "normal" : a, p = n === void 0 ? !1 : n, y = c === void 0 ? "secondary" : c, f = l === void 0 ? "secondary" : l, k = s === void 0 ? "secondary" : s, z = m === void 0 ? !1 : m, S = v === void 0 ? !1 : v, j = $ === void 0 ? !1 : $;
+    t = P(`
                     card 
-                    card--${h} card--${b}
-                    card--${p === void 0 ? "xl" : p}
-                    ${z ? `card--outline-${y}` : ""} 
-                    ${v ? "card--gradient" : ""} 
-                    ${$ ? `card--border-${$}` : ""} 
-                    ${S ? "card--border--dashed" : ""} 
-                    ${v ? `card--gradient-${x}` : ""} 
-                   
+                    card--${h} card--${x}
+                    card--${g === void 0 ? "xl" : g}
+                    ${z ? `card--outline-${k}` : ""} 
+                    ${p ? "card--gradient" : ""} 
+                    ${f ? `card--border-${f}` : ""} 
+                    ${S ? "card--border--dashed" : ""}
+                    ${p ? `card--gradient-${y}` : ""}
+                    ${j ? "card--clickable" : ""}
+
                `, u), o[0] = e, o[1] = r, o[2] = t;
   } else
     r = o[1], t = o[2];
   let d;
-  return o[3] !== r || o[4] !== t ? (d = /* @__PURE__ */ f(j, { children: /* @__PURE__ */ f("div", { ...t, children: r }) }), o[3] = r, o[4] = t, o[5] = d) : d = o[5], d;
+  return o[3] !== r || o[4] !== t ? (d = /* @__PURE__ */ C(E, { children: /* @__PURE__ */ C("div", { ...t, children: r }) }), o[3] = r, o[4] = t, o[5] = d) : d = o[5], d;
 };
 export {
-  G as Card
+  I as Card
 };

package/dist/components/data-table/DataTable.d.ts

@@ -10,14 +10,17 @@ export interface DataTableFilterProps {
 export interface DataTableSortProps {
     [key: string]: 'asc' | 'desc' | undefined;
 }
+export type DataTableRowRenderer<T> = (item: T, index: number) => React.ReactNode;
 export interface DataTableProps<T> extends Omit<Component<HTMLTableElement>, 'data' | 'children' | 'onSelect'> {
     data: Array<T>;
     sort?: DataTableSortProps;
     filter?: DataTableFilterProps;
+    limit?: number;
+    pagination?: boolean;
     loading?: boolean;
     loadingComponent?: React.ReactNode;
     emptyComponent?: React.ReactNode;
     onSelect?: (item: T | undefined) => void;
-    children?: (item: T, index: number) => React.ReactNode;
+    children?: DataTableRowRenderer<T> | React.ReactNode | Array<DataTableRowRenderer<T> | React.ReactNode>;
 }
 export declare const DataTable: <T>(props: DataTableProps<T>) => React.JSX.Element;

package/dist/components/data-table/DataTable.js

@@ -1,42 +1,64 @@
-import { jsxs as _, jsx as p } from "react/jsx-runtime";
-import g from "react";
+import { jsxs as x, jsx as y } from "react/jsx-runtime";
+import c from "react";
 import '../../assets/components/data-table/DataTable.style.css';/* empty css                     */
 import "../../utils/contextStore.js";
-import { mergeComponentProps as h } from "../../utils/component.js";
+import { mergeComponentProps as E } from "../../utils/component.js";
 import "js-md5";
-const d = (l, m) => m.split(".").reduce((t, f) => {
-  if (t != null)
-    return Array.isArray(t) ? t.map((a) => a?.[f]).filter((a) => a !== void 0) : t[f];
-}, l), w = (l) => {
+import { Flex as F } from "../flex/Flex.js";
+import { DataTableHeader as R } from "./DataTableHeader.js";
+import { DataTablePaginationContext as v } from "./DataTablePagination.js";
+const C = (u, p) => p.split(".").reduce((n, m) => {
+  if (n != null)
+    return Array.isArray(n) ? n.map((i) => i?.[m]).filter((i) => i !== void 0) : n[m];
+}, u), U = (u) => {
   const {
-    data: m,
-    sort: t,
-    filter: f,
-    loading: a,
-    loadingComponent: C,
-    emptyComponent: A,
-    onSelect: u,
-    children: O,
-    ...b
-  } = l, y = m.filter((i) => Object.entries(f || {}).every(([o, {
-    operator: n,
-    value: r
+    data: p,
+    sort: n,
+    filter: m,
+    limit: i,
+    pagination: A,
+    loading: _,
+    loadingComponent: z,
+    emptyComponent: D,
+    onSelect: N,
+    children: g,
+    ...k
+  } = u, [b, P] = c.useState(0), h = Array.isArray(g) ? g : [g], w = h.find((r) => typeof r == "function"), V = h.find((r) => c.isValidElement(r) && r.type === R), S = h.filter((r) => typeof r != "function" && r !== V), O = p.filter((r) => Object.entries(m || {}).every(([o, {
+    operator: a,
+    value: e
   }]) => {
-    const e = d(i, o);
-    return n === "isOneOf" && !Array.isArray(r) && !Array.isArray(e) ? e === r : n === "isOneOf" && !Array.isArray(r) && Array.isArray(e) ? Array.from(e).includes(r) : n === "isOneOf" && Array.isArray(r) && !Array.isArray(e) ? Array.from(r).some((s) => s === e) : n === "isOneOf" && Array.isArray(r) && Array.isArray(e) ? Array.from(r).some((s) => Array.from(e).includes(s)) : !1;
-  })), c = g.useMemo(() => t ? [...y].sort((i, o) => {
-    for (const [n, r] of Object.entries(t)) {
-      const e = d(i, n), s = d(o, n);
-      if (e < s) return r === "asc" ? -1 : 1;
-      if (e > s) return r === "asc" ? 1 : -1;
+    const t = C(r, o);
+    return a === "isOneOf" && !Array.isArray(e) && !Array.isArray(t) ? t === e : a === "isOneOf" && !Array.isArray(e) && Array.isArray(t) ? Array.from(t).includes(e) : a === "isOneOf" && Array.isArray(e) && !Array.isArray(t) ? Array.from(e).some((l) => l === t) : a === "isOneOf" && Array.isArray(e) && Array.isArray(t) ? Array.from(e).some((l) => Array.from(t).includes(l)) : !1;
+  })), f = c.useMemo(() => n ? [...O].sort((r, o) => {
+    for (const [a, e] of Object.entries(n)) {
+      const t = C(r, a), l = C(o, a);
+      if (t < l) return e === "asc" ? -1 : 1;
+      if (t > l) return e === "asc" ? 1 : -1;
     }
     return 0;
-  }) : y, [y, t]);
-  return /* @__PURE__ */ _("table", { ...h("data-table", b), children: [
-    c.map((i, o) => /* @__PURE__ */ p("tr", { className: "data-table__row", onClick: () => u?.(i), children: O?.(i, o) })),
-    c.length === 0 && !a && A ? /* @__PURE__ */ p("tr", { className: "data-table__row", onClick: () => u?.(void 0), children: A }) : null
+  }) : O, [O, n]), d = typeof i == "number" ? i : 10, j = A ? Math.max(1, Math.ceil(f.length / d)) : 1, s = Math.min(b, j - 1);
+  c.useEffect(() => {
+    b !== s && P(s);
+  }, [b, s]);
+  const T = A ? f.slice(s * d, s * d + d) : typeof i == "number" ? f.slice(0, i) : f, M = /* @__PURE__ */ x("table", { ...E("data-table", k), children: [
+    V,
+    /* @__PURE__ */ x("tbody", { children: [
+      T.map((r, o) => /* @__PURE__ */ y("tr", { className: "data-table__row", onClick: () => N?.(r), children: w?.(r, o) })),
+      f.length === 0 && !_ && D ? /* @__PURE__ */ y("tr", { className: "data-table__row", onClick: () => N?.(void 0), children: D }) : null
+    ] })
   ] });
+  return A ? /* @__PURE__ */ y(v.Provider, { value: {
+    page: s,
+    pageCount: j,
+    setPage: P
+  }, children: /* @__PURE__ */ x(F, { style: {
+    flexDirection: "column",
+    gap: "0.5rem"
+  }, children: [
+    M,
+    S.map((r, o) => /* @__PURE__ */ y(c.Fragment, { children: r }, o))
+  ] }) }) : M;
 };
 export {
-  w as DataTable
+  U as DataTable
 };

package/dist/components/data-table/DataTableHeader.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { Component } from '../../utils';
+export interface DataTableHeaderProps extends Component<HTMLTableSectionElement> {
+    children?: React.ReactNode | React.ReactNode[];
+}
+/**
+ * Optional header for a <DataTable/>. Place it as a child (alongside the row renderer) and fill it
+ * with <DataTableHeaderColumn/> cells that line up with the columns your row renderer emits.
+ */
+export declare const DataTableHeader: React.FC<DataTableHeaderProps>;
+export interface DataTableHeaderColumnProps extends Component<HTMLTableCellElement> {
+    children?: React.ReactNode | React.ReactNode[];
+}
+export declare const DataTableHeaderColumn: React.FC<DataTableHeaderColumnProps>;

package/dist/components/data-table/DataTableHeader.js

@@ -0,0 +1,39 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c } from "../../_virtual/compiler-runtime.js";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as m } from "../../utils/component.js";
+import "js-md5";
+const p = (a) => {
+  const e = c.c(8);
+  let t, r;
+  if (e[0] !== a) {
+    const {
+      children: i,
+      ...s
+    } = a;
+    t = i, r = m("data-table__header", s), e[0] = a, e[1] = t, e[2] = r;
+  } else
+    t = e[1], r = e[2];
+  let l;
+  e[3] !== t ? (l = /* @__PURE__ */ n("tr", { className: "data-table__header-row", children: t }), e[3] = t, e[4] = l) : l = e[4];
+  let o;
+  return e[5] !== r || e[6] !== l ? (o = /* @__PURE__ */ n("thead", { ...r, children: l }), e[5] = r, e[6] = l, e[7] = o) : o = e[7], o;
+}, x = (a) => {
+  const e = c.c(6);
+  let t, r;
+  if (e[0] !== a) {
+    const {
+      children: o,
+      ...i
+    } = a;
+    t = o, r = m("data-table__header-column", i), e[0] = a, e[1] = t, e[2] = r;
+  } else
+    t = e[1], r = e[2];
+  let l;
+  return e[3] !== t || e[4] !== r ? (l = /* @__PURE__ */ n("th", { ...r, children: t }), e[3] = t, e[4] = r, e[5] = l) : l = e[5], l;
+};
+export {
+  p as DataTableHeader,
+  x as DataTableHeaderColumn
+};

package/dist/components/data-table/DataTablePagination.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { Component } from '../../utils';
+export interface DataTablePaginationContextValue {
+    page: number;
+    pageCount: number;
+    setPage: React.Dispatch<React.SetStateAction<number>>;
+}
+export declare const DataTablePaginationContext: React.Context<DataTablePaginationContextValue | null>;
+export declare const useDataTablePagination: () => DataTablePaginationContextValue;
+export interface DataTablePaginationProps extends Component<HTMLDivElement> {
+}
+/**
+ * Layout container for the pagination controls. Place it as a child of a paginated
+ * <DataTable/>, which creates the context these controls read from. Fully styleable –
+ * compose it with <DataTablePaginationValue/>, the triggers and your own <Text/>/<Button/>.
+ */
+export declare const DataTablePagination: React.FC<DataTablePaginationProps>;
+/**
+ * Renders the 1-indexed current page number. Unstyled – wrap it in your own <Text/> to style it.
+ */
+export declare const DataTablePaginationValue: React.FC;
+/**
+ * Renders the total number of pages. Unstyled – wrap it in your own <Text/> to style it.
+ */
+export declare const DataTableMaxPaginationValue: React.FC;
+export interface DataTablePaginationTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+export declare const DataTablePaginationForwardTrigger: React.ForwardRefExoticComponent<DataTablePaginationTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DataTablePaginationBackwardsTrigger: React.ForwardRefExoticComponent<DataTablePaginationTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/data-table/DataTablePagination.js

@@ -0,0 +1,75 @@
+import { jsx as r, Fragment as f } from "react/jsx-runtime";
+import { c } from "../../_virtual/compiler-runtime.js";
+import i from "react";
+import "../../utils/contextStore.js";
+import { mergeComponentProps as x } from "../../utils/component.js";
+import "js-md5";
+const h = i.createContext(null), d = () => {
+  const a = i.useContext(h);
+  if (!a)
+    throw new Error("DataTablePagination components must be rendered inside a paginated <DataTable/>");
+  return a;
+}, V = (a) => {
+  const e = c.c(4);
+  let t;
+  e[0] !== a ? (t = x("data-table__pagination", a), e[0] = a, e[1] = t) : t = e[1];
+  let n;
+  return e[2] !== t ? (n = /* @__PURE__ */ r("div", { ...t }), e[2] = t, e[3] = n) : n = e[3], n;
+}, y = () => {
+  const a = c.c(2), {
+    page: e
+  } = d(), t = e + 1;
+  let n;
+  return a[0] !== t ? (n = /* @__PURE__ */ r(f, { children: t }), a[0] = t, a[1] = n) : n = a[1], n;
+}, B = () => {
+  const a = c.c(2), {
+    pageCount: e
+  } = d();
+  let t;
+  return a[0] !== e ? (t = /* @__PURE__ */ r(f, { children: e }), a[0] = e, a[1] = t) : t = a[1], t;
+}, T = i.forwardRef((a, e) => {
+  const {
+    page: t,
+    pageCount: n,
+    setPage: w
+  } = d(), {
+    direction: g,
+    asChild: C,
+    onClick: u,
+    disabled: P,
+    children: l,
+    ...p
+  } = a, D = g === "forward" ? t >= n - 1 : t <= 0, s = P ?? D, m = () => {
+    s || w((o) => g === "forward" ? Math.min(n - 1, o + 1) : Math.max(0, o - 1));
+  };
+  if (C && i.isValidElement(l)) {
+    const o = l;
+    return i.cloneElement(o, {
+      ref: e,
+      disabled: o.props.disabled ?? s,
+      onClick: (b) => {
+        o.props.onClick?.(b), u?.(b), m();
+      }
+    });
+  }
+  return /* @__PURE__ */ r("button", { ...p, ref: e, type: "button", disabled: s, onClick: (o) => {
+    u?.(o), m();
+  }, children: l });
+}), F = i.forwardRef((a, e) => {
+  const t = c.c(3);
+  let n;
+  return t[0] !== a || t[1] !== e ? (n = /* @__PURE__ */ r(T, { ...a, direction: "forward", ref: e }), t[0] = a, t[1] = e, t[2] = n) : n = t[2], n;
+}), j = i.forwardRef((a, e) => {
+  const t = c.c(3);
+  let n;
+  return t[0] !== a || t[1] !== e ? (n = /* @__PURE__ */ r(T, { ...a, direction: "backward", ref: e }), t[0] = a, t[1] = e, t[2] = n) : n = t[2], n;
+});
+export {
+  B as DataTableMaxPaginationValue,
+  V as DataTablePagination,
+  j as DataTablePaginationBackwardsTrigger,
+  h as DataTablePaginationContext,
+  F as DataTablePaginationForwardTrigger,
+  y as DataTablePaginationValue,
+  d as useDataTablePagination
+};

package/dist/components/data-table/index.d.ts

@@ -1,4 +1,6 @@
 export * from './DataTable';
 export * from './DataTableColumn';
+export * from './DataTableHeader';
+export * from './DataTablePagination';
 export * from './DataTableFilterInput';
 export * from './DataTableFilterSuggestionMenu';

package/dist/components/data-table/index.js

@@ -1,11 +1,22 @@
 import { DataTable as t } from "./DataTable.js";
 import { DataTableColumn as o } from "./DataTableColumn.js";
-import { DataTableFilterInput as u, createFilterQueryLanguage as m } from "./DataTableFilterInput.js";
-import { DataTableFilterSuggestionMenu as p } from "./DataTableFilterSuggestionMenu.js";
+import { DataTableHeader as i, DataTableHeaderColumn as l } from "./DataTableHeader.js";
+import { DataTableMaxPaginationValue as T, DataTablePagination as b, DataTablePaginationBackwardsTrigger as D, DataTablePaginationContext as u, DataTablePaginationForwardTrigger as m, DataTablePaginationValue as x, useDataTablePagination as p } from "./DataTablePagination.js";
+import { DataTableFilterInput as f, createFilterQueryLanguage as d } from "./DataTableFilterInput.js";
+import { DataTableFilterSuggestionMenu as s } from "./DataTableFilterSuggestionMenu.js";
 export {
   t as DataTable,
   o as DataTableColumn,
-  u as DataTableFilterInput,
-  p as DataTableFilterSuggestionMenu,
-  m as createFilterQueryLanguage
+  f as DataTableFilterInput,
+  s as DataTableFilterSuggestionMenu,
+  i as DataTableHeader,
+  l as DataTableHeaderColumn,
+  T as DataTableMaxPaginationValue,
+  b as DataTablePagination,
+  D as DataTablePaginationBackwardsTrigger,
+  u as DataTablePaginationContext,
+  m as DataTablePaginationForwardTrigger,
+  x as DataTablePaginationValue,
+  d as createFilterQueryLanguage,
+  p as useDataTablePagination
 };