@clubmed/trident-ui 1.3.0-beta.4 → 1.3.0-beta.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # ClubMed React UI components changelog
 
+# [1.3.0-beta.5](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-beta.4...v1.3.0-beta.5) (2025-07-25)
+
+
+### Features
+
+* **arrows:** implement Arrows component with customizable labels and button states ([ea0e6d4](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/ea0e6d450a777e7c8727d9adc04e044816965cb6))
+* **button:** add ArrowButton component with accessibility support ([ce45b69](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/ce45b69ba2879bbccb469766a1396797bd4dc642))
+* **button:** implement new Button component with customizable styles and themes ([4895a94](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/4895a94690ba09f2c7b0792df6eddcb14076248f))
+* **button:** refactor ButtonAnchor to use new theme and variant properties ([629f8cb](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/629f8cb884e2e908dc2e665e672038bd50620e9c))
+* **pagination:** update button components for improved accessibility and styling ([c149272](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/c14927289ba0c65e2d2c25b0a0af77b9f1c4adc9))
+* **tailwind:** update tailwind configuration from DCX ([f55fe54](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/f55fe5407deb0bc408f3a7f464951e485c1fc56c))
+
 # [1.3.0-beta.4](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-beta.3...v1.3.0-beta.4) (2025-07-03)
 
 

package/assets/style.css

@@ -1 +1 @@
-.tab-focus-pill{transform:translate(calc(var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% - (.25rem * (var(--tab-index) - var(--active-tab, 0)))))}[dir=rtl] .tab-focus-pill{transform:translate(calc(var(--tab-index) * 100% + var(--active-tab) * -100% + (.25rem * (var(--tab-index) - var(--active-tab)))))}label>span>input[type=checkbox]:not([role=switch]),label>span>input[type=radio]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>span>input[type=checkbox]:not([role=switch])+span,label>span>input[type=radio]+span{position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));--tw-ring-opacity: 0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox]:not([role=switch])+span svg,label>span>input[type=radio]+span svg{opacity:0;transform:scale(0);transform-origin:center;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox]:not([role=switch]):checked+span svg,label>span>input[type=radio]:checked+span svg{opacity:1;transform:scale(1)}label>span>input[type=checkbox]:not([role=switch]):checked+span,label>span>input[type=checkbox]:not([role=switch]):not([disabled]):hover+span,label>span>input[type=radio]:checked+span,label>span>input[type=radio]:not([disabled]):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>span>input[type=checkbox]:not([role=switch]):focus-visible+span,label>span>input[type=radio]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=radio]+span{border-radius:100%}label>span>input[type=checkbox]:not([role=switch])+span{border-radius:.5rem}label>input[type=checkbox][data-name=Filter]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>input[type=checkbox][data-name=Filter]+span{--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;justify-content:center;border-radius:7.5rem;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));padding:.75rem 1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>input[type=checkbox][data-name=Filter]+span [data-icon=CheckDefault]{--tw-text-opacity: 1;color:hsl(var(--color-black) / var(--tw-text-opacity));opacity:0;transform:scale(0);transform-origin:center;width:0;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>input[type=checkbox][data-name=Filter]:not([disabled]):not(:checked):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span{--tw-border-opacity: 1;border-color:hsl(var(--color-saffron) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span [data-icon=CheckDefault]{margin-left:.5rem;opacity:1;width:24px;transform:scale(1)}label>input[type=checkbox][data-name=Filter]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=checkbox][role=switch]+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / var(--tw-ring-opacity));--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;border-radius:7.5rem;--tw-bg-opacity: 1;background-color:hsl(var(--color-grey) / var(--tw-bg-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox][role=switch]+span>svg{transition:all var(--transition-duration-boop) var(--transition-fn-boop);transform:translate(calc(0% + 4px))}label>span>input[type=checkbox][role=switch]+span>svg circle+circle{opacity:1;transition:opacity var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox][role=switch]:checked+span{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>span>input[type=checkbox][role=switch]:checked+span>svg{transform:translate(calc(100% + 4px))}label>span>input[type=checkbox][role=switch]:checked+span>svg circle+circle{opacity:0}label>span>input[type=checkbox][role=switch]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}a[data-name=ButtonAnchor]:not([disabled]),button[data-name=Button]:not([disabled]){--tw-ring-opacity: 0;transition:all .2s ease-in-out;transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scaleZ(1) skew(0)}a[data-name=ButtonAnchor]:not([disabled]) .transition-colors,a[data-name=ButtonAnchor]:not([disabled]) small,button[data-name=Button]:not([disabled]) .transition-colors,button[data-name=Button]:not([disabled]) small{transition:color .2s ease-in-out;transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scaleZ(1) skew(0)}a[data-name=ButtonAnchor]:not([disabled]):active,button[data-name=Button]:not([disabled]):active{transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scale3D(.9799515022153259,.9799515022153259,.9799515022153259) skew(0)}a[data-name=ButtonAnchor]:not([disabled]):focus-visible,button[data-name=Button]:not([disabled]):focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2);outline:none}.container{width:100%}@media (min-width: 96em){.container{max-width:96em}}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1220px){.container{max-width:1220px}}@media (min-width: 2060px){.container{max-width:2060px}}.input-range-container{position:relative;--tw-bg-opacity: 1;background-color:hsl(var(--color-pearl) / var(--tw-bg-opacity));display:grid;--diff: calc(var(--max) - var(--min));--tickmarkWidth: 2px;grid-template:repeat(2,max-content) var(--inputHeight) / 1fr 1fr;width:var(--inputWidth);background-image:repeating-linear-gradient(90deg,#999,#999 var(--tickmarkWidth),hsl(var(--color-pearl)) 0,hsl(var(--color-pearl)) calc(((100% - var(--tickmarkWidth)) / var(--max))))}.input-range-container:before,.input-range-container:after{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity));grid-column:1 / span 2;grid-row:3;content:""}html:not(.rtl) .input-range-container:before{margin-left:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}html:not(.rtl) .input-range-container:after{margin-left:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:before{margin-right:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:after{margin-right:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.input-range{z-index:1;top:0;left:0;margin:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-column:1 / span 2;grid-row:3;background:none;--col: #000}.input-range-sliderThumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-webkit-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-moz-range-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-moz-appearance:none;-webkit-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-moz-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-moz-range-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-ms-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-ms-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-ms-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range-output{display:block;position:absolute;margin-top:1.25rem;font-size:.75rem;line-height:.875rem;font-weight:600;left:calc(.5 * var(--thumbWidth))}html:not(.rtl) .input-range-output{transform:translate(calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}.rtl .input-range-output{transform:translate(calc((var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}
+.button{border-width:1px;border-style:solid;font-family:var(--font-family-sans, Inter),Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;-moz-column-gap:.5rem;column-gap:.5rem;align-items:center;justify-content:center;flex-shrink:0;text-align:center;transition-property:transform,color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.button:disabled{pointer-events:none}@media (hover: hover) and (pointer: fine){.button:active:not(:disabled):active{--tw-scale-x: .98;--tw-scale-y: .98;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.button-outline,.button-solid{--button-bg-opacity: 1;--button-bg-opacity-active: 1;--button-border-opacity: 1;--button-border-opacity-active: 1}.button-outline{background-color:transparent;border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-primary))}@media (hover: hover) and (pointer: fine){.button-outline:active:not(:disabled),.button-outline:hover:not(:disabled),.button-outline:focus:not(:disabled),.group:hover .button-outline:not(:disabled){background-color:hsl(var(--button-primary) / var(--button-bg-opacity));border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-secondary))}}.button-solid{background-color:hsl(var(--button-primary) / var(--button-bg-opacity));border-color:hsl(var(--button-primary) / var(--button-border-opacity));color:hsl(var(--button-secondary))}@media (hover: hover) and (pointer: fine){.button-solid:active:not(:disabled),.button-solid:hover:not(:disabled),.button-solid:focus:not(:disabled),.group:hover .button-solid:not(:disabled){background-color:hsl(var(--button-active) / var(--button-bg-opacity-active));border-color:hsl(var(--button-active) / var(--button-border-opacity-active));color:hsl(var(--button-secondary))}}.button-black{--button-primary: var(--color-black);--button-secondary: var(--color-white);--button-active: var(--color-black-active)}.button-green{--button-primary: var(--color-green);--button-secondary: var(--color-white);--button-active: var(--color-green-active)}.button-lavender{--button-primary: var(--color-lavender);--button-secondary: var(--color-white);--button-active: var(--color-lavender-active)}.button-lightSand{--button-primary: var(--color-lightSand);--button-secondary: var(--color-black);--button-active: var(--color-lightSand-active)}.button-marygold{--button-primary: var(--color-marygold);--button-secondary: var(--color-black);--button-active: var(--color-marygold-active)}.button-orange{--button-primary: var(--color-orange);--button-secondary: var(--color-white);--button-active: var(--color-orange-active)}.button-red{--button-primary: var(--color-red);--button-secondary: var(--color-white);--button-active: var(--color-red-active)}.button-saffron{--button-primary: var(--color-saffron);--button-secondary: var(--color-black);--button-active: var(--color-saffron-active)}.button-sand{--button-primary: var(--color-sand);--button-secondary: var(--color-black);--button-active: var(--color-sand-active)}.button-sienna{--button-primary: var(--color-sienna);--button-secondary: var(--color-white);--button-active: var(--color-sienna-active)}.button-ultramarine{--button-primary: var(--color-ultramarine);--button-secondary: var(--color-white);--button-active: var(--color-ultramarine-active)}.button-verdigris{--button-primary: var(--color-verdigris);--button-secondary: var(--color-black);--button-active: var(--color-verdigris-active)}.button-wave{--button-primary: var(--color-wave);--button-secondary: var(--color-white);--button-active: var(--color-wave-active)}.button-white{--button-primary: var(--color-white);--button-secondary: var(--color-black);--button-active: var(--color-white-active)}.button-solid:disabled{--button-primary: var(--color-pearl);--button-secondary: var(--color-grey)}.button-outline:disabled{--button-primary: var(--color-grey);--button-secondary: var(--color-grey)}.button-pill{aspect-ratio:auto;height:auto;border-radius:7.5rem;font-size:1rem;line-height:1.5rem}.button-pill.button-small{padding:.75rem 1.25rem}.button-pill.button-large,.button-pill.button-medium{padding:.75rem 2rem}.button-circle{aspect-ratio:1 / 1;overflow:hidden;border-radius:100%;font-size:1rem;line-height:1.5rem}.button-circle.button-small,.button-circle.button-medium{width:3rem;height:3rem;padding:0}.button-circle.button-large{width:6.25rem;height:6.25rem;padding:0}.tab-focus-pill{transform:translate(calc(var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% - (.25rem * (var(--tab-index) - var(--active-tab, 0)))))}[dir=rtl] .tab-focus-pill{transform:translate(calc(var(--tab-index) * 100% + var(--active-tab) * -100% + (.25rem * (var(--tab-index) - var(--active-tab)))))}label>span>input[type=checkbox]:not([role=switch]),label>span>input[type=radio]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>span>input[type=checkbox]:not([role=switch])+span,label>span>input[type=radio]+span{position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));--tw-ring-opacity: 0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox]:not([role=switch])+span svg,label>span>input[type=radio]+span svg{opacity:0;transform:scale(0);transform-origin:center;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox]:not([role=switch]):checked+span svg,label>span>input[type=radio]:checked+span svg{opacity:1;transform:scale(1)}label>span>input[type=checkbox]:not([role=switch]):checked+span,label>span>input[type=checkbox]:not([role=switch]):not([disabled]):hover+span,label>span>input[type=radio]:checked+span,label>span>input[type=radio]:not([disabled]):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>span>input[type=checkbox]:not([role=switch]):focus-visible+span,label>span>input[type=radio]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=radio]+span{border-radius:100%}label>span>input[type=checkbox]:not([role=switch])+span{border-radius:.5rem}label>input[type=checkbox][data-name=Filter]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>input[type=checkbox][data-name=Filter]+span{--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;justify-content:center;border-radius:7.5rem;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));padding:.75rem 1.25rem;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>input[type=checkbox][data-name=Filter]+span [data-icon=CheckDefault]{--tw-text-opacity: 1;color:hsl(var(--color-black) / var(--tw-text-opacity));opacity:0;transform:scale(0);transform-origin:center;width:0;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>input[type=checkbox][data-name=Filter]:not([disabled]):not(:checked):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span{--tw-border-opacity: 1;border-color:hsl(var(--color-saffron) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span [data-icon=CheckDefault]{margin-left:.5rem;opacity:1;width:24px;transform:scale(1)}label>input[type=checkbox][data-name=Filter]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=checkbox][role=switch]+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / var(--tw-ring-opacity));--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;border-radius:7.5rem;--tw-bg-opacity: 1;background-color:hsl(var(--color-grey) / var(--tw-bg-opacity));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox][role=switch]+span>svg{transition:all var(--transition-duration-boop) var(--transition-fn-boop);transform:translate(calc(0% + 4px))}label>span>input[type=checkbox][role=switch]+span>svg circle+circle{opacity:1;transition:opacity var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox][role=switch]:checked+span{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>span>input[type=checkbox][role=switch]:checked+span>svg{transform:translate(calc(100% + 4px))}label>span>input[type=checkbox][role=switch]:checked+span>svg circle+circle{opacity:0}label>span>input[type=checkbox][role=switch]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}.container{width:100%}@media (min-width: 40rem){.container{max-width:40rem}}@media (min-width: 48rem){.container{max-width:48rem}}@media (min-width: 64rem){.container{max-width:64rem}}@media (min-width: 76.25rem){.container{max-width:76.25rem}}@media (min-width: 96rem){.container{max-width:96rem}}@media (min-width: 128.75rem){.container{max-width:128.75rem}}.input-range-container{position:relative;--tw-bg-opacity: 1;background-color:hsl(var(--color-pearl) / var(--tw-bg-opacity));display:grid;--diff: calc(var(--max) - var(--min));--tickmarkWidth: 2px;grid-template:repeat(2,max-content) var(--inputHeight) / 1fr 1fr;width:var(--inputWidth);background-image:repeating-linear-gradient(90deg,#999,#999 var(--tickmarkWidth),hsl(var(--color-pearl)) 0,hsl(var(--color-pearl)) calc(((100% - var(--tickmarkWidth)) / var(--max))))}.input-range-container:before,.input-range-container:after{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity));grid-column:1 / span 2;grid-row:3;content:""}html:not(.rtl) .input-range-container:before{margin-left:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}html:not(.rtl) .input-range-container:after{margin-left:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:before{margin-right:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:after{margin-right:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.input-range{z-index:1;top:0;left:0;margin:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-column:1 / span 2;grid-row:3;background:none;--col: #000}.input-range-sliderThumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-webkit-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-moz-range-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-moz-appearance:none;-webkit-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-moz-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-moz-range-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-ms-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-ms-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-ms-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range-output{display:block;position:absolute;margin-top:1.25rem;font-size:.75rem;line-height:.875rem;font-weight:600;left:calc(.5 * var(--thumbWidth))}html:not(.rtl) .input-range-output{transform:translate(calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}.rtl .input-range-output{transform:translate(calc((var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}

package/chunks/plugin.js

@@ -0,0 +1,53 @@
+import { g as f } from "./_commonjsHelpers.js";
+var a = {}, c = {};
+(function(n) {
+  Object.defineProperty(n, "__esModule", {
+    value: !0
+  }), Object.defineProperty(n, "default", {
+    enumerable: !0,
+    get: function() {
+      return i;
+    }
+  });
+  function u(t, e) {
+    return {
+      handler: t,
+      config: e
+    };
+  }
+  u.withOptions = function(t, e = () => ({})) {
+    const r = function(l) {
+      return {
+        __options: l,
+        handler: t(l),
+        config: e(l)
+      };
+    };
+    return r.__isOptionsFunction = !0, r.__pluginFunction = t, r.__configFunction = e, r;
+  };
+  const i = u;
+})(c);
+(function(n) {
+  Object.defineProperty(n, "__esModule", {
+    value: !0
+  }), Object.defineProperty(n, "default", {
+    enumerable: !0,
+    get: function() {
+      return t;
+    }
+  });
+  const u = /* @__PURE__ */ i(c);
+  function i(e) {
+    return e && e.__esModule ? e : {
+      default: e
+    };
+  }
+  const t = u.default;
+})(a);
+let o = a;
+var _ = (o.__esModule ? o : { default: o }).default;
+const s = /* @__PURE__ */ f(_);
+export {
+  s as p
+};
+//# sourceMappingURL=plugin.js.map

package/chunks/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../node_modules/tailwindcss/lib/util/createPlugin.js","../../node_modules/tailwindcss/lib/public/create-plugin.js","../../node_modules/tailwindcss/plugin.js"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nfunction createPlugin(plugin, config) {\n    return {\n        handler: plugin,\n        config\n    };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n    const optionsFunction = function(options) {\n        return {\n            __options: options,\n            handler: pluginFunction(options),\n            config: configFunction(options)\n        };\n    };\n    optionsFunction.__isOptionsFunction = true;\n    // Expose plugin dependencies so that `object-hash` returns a different\n    // value if anything here changes, to ensure a rebuild is triggered.\n    optionsFunction.__pluginFunction = pluginFunction;\n    optionsFunction.__configFunction = configFunction;\n    return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : {\n        default: obj\n    };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n"],"names":["exports","_default","createPlugin","plugin","config","pluginFunction","configFunction","optionsFunction","options","_createPlugin","_interop_require_default","require$$0","obj"],"mappings":";;;AACA,SAAO,eAAwBA,GAAA,cAAc;AAAA,IACzC,OAAO;AAAA,EACX,CAAC,GACD,OAAO,eAAeA,GAAS,WAAW;AAAA,IACtC,YAAY;AAAA,IACZ,KAAK,WAAW;AACZ,aAAOC;AAAA,IACV;AAAA,EACL,CAAC;AACD,WAASC,EAAaC,GAAQC,GAAQ;AAClC,WAAO;AAAA,MACH,SAASD;AAAA,MACT,QAAAC;AAAA,IACR;AAAA,EACC;AACD,EAAAF,EAAa,cAAc,SAASG,GAAgBC,IAAiB,OAAK,CAAE,IAAG;AAC3E,UAAMC,IAAkB,SAASC,GAAS;AACtC,aAAO;AAAA,QACH,WAAWA;AAAA,QACX,SAASH,EAAeG,CAAO;AAAA,QAC/B,QAAQF,EAAeE,CAAO;AAAA,MAC1C;AAAA,IACA;AACI,WAAAD,EAAgB,sBAAsB,IAGtCA,EAAgB,mBAAmBF,GACnCE,EAAgB,mBAAmBD,GAC5BC;AAAA,EACX;AACA,QAAMN,IAAWC;;;AC9BjB,SAAO,eAAwBF,GAAA,cAAc;AAAA,IACzC,OAAO;AAAA,EACX,CAAC,GACD,OAAO,eAAeA,GAAS,WAAW;AAAA,IACtC,YAAY;AAAA,IACZ,KAAK,WAAW;AACZ,aAAOC;AAAA,IACV;AAAA,EACL,CAAC;AACD,QAAMQ,IAA8B,gBAAAC,EAAyBC,CAA+B;AAC5F,WAASD,EAAyBE,GAAK;AACnC,WAAOA,KAAOA,EAAI,aAAaA,IAAM;AAAA,MACjC,SAASA;AAAA,IACjB;AAAA,EACC;AACD,QAAMX,IAAWQ,EAAc;;AChB/B,IAAIP,IAAeS;AACnB,IAAAR,KAAkBD,EAAa,aAAaA,IAAe,EAAE,SAASA,EAAY,GAAI;;","x_google_ignoreList":[0,1,2]}

package/molecules/Arrows/Arrows.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import type { ArrowsLabels } from './ArrowsLabels';
+import { ArrowButton } from '../Buttons/ArrowButton';
+export interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    color?: ComponentProps<typeof ArrowButton>['color'];
+    iconType?: 'ArrowDefault' | 'ArrowTail';
+    isDisabledHidden?: boolean;
+    isNextDisabled?: boolean;
+    isPrevDisabled?: boolean;
+    labels?: ArrowsLabels;
+    onNext: ComponentProps<typeof ArrowButton>['onClick'];
+    onPrev: ComponentProps<typeof ArrowButton>['onClick'];
+    size?: ComponentProps<typeof ArrowButton>['size'];
+    theme?: ComponentProps<typeof ArrowButton>['theme'];
+}
+export declare const Arrows: FunctionComponent<ArrowsProps>;

package/molecules/Arrows/Arrows.js

@@ -0,0 +1,66 @@
+import { jsxs as x, jsx as p } from "react/jsx-runtime";
+import { c as t } from "../../chunks/index.js";
+import { ArrowButton as l } from "../Buttons/ArrowButton.js";
+const A = ({
+  className: f,
+  color: o,
+  iconType: e = "ArrowDefault",
+  isDisabledHidden: n = !1,
+  isNextDisabled: r = !1,
+  isPrevDisabled: a = !1,
+  labels: s = {
+    next: "",
+    previous: ""
+  },
+  onNext: m,
+  onPrev: u,
+  size: i,
+  theme: c,
+  ...w
+}) => /* @__PURE__ */ x(
+  "div",
+  {
+    ...w,
+    className: t(
+      "pointer-events-none flex w-full items-center justify-between gap-x-20",
+      f
+    ),
+    "data-name": "Arrows",
+    children: [
+      /* @__PURE__ */ p(
+        l,
+        {
+          className: t("pointer-events-auto transition-opacity", {
+            "opacity-0": n && a
+          }),
+          color: o,
+          disabled: a,
+          icon: `${e}Left`,
+          onClick: u,
+          size: i,
+          theme: c,
+          children: s.previous
+        }
+      ),
+      /* @__PURE__ */ p(
+        l,
+        {
+          className: t("pointer-events-auto transition-opacity", {
+            "opacity-0": n && r
+          }),
+          color: o,
+          disabled: r,
+          icon: `${e}Right`,
+          onClick: m,
+          size: i,
+          theme: c,
+          children: s.next
+        }
+      )
+    ]
+  }
+);
+export {
+  A as Arrows
+};
+//# sourceMappingURL=Arrows.js.map

package/molecules/Arrows/Arrows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrows.js","sources":["../../../lib/molecules/Arrows/Arrows.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport type { ArrowsLabels } from './ArrowsLabels';\n\nimport { ArrowButton } from '../Buttons/ArrowButton';\n\nexport interface ArrowsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {\n  color?: ComponentProps<typeof ArrowButton>['color'];\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  isDisabledHidden?: boolean;\n  isNextDisabled?: boolean;\n  isPrevDisabled?: boolean;\n  labels?: ArrowsLabels;\n  onNext: ComponentProps<typeof ArrowButton>['onClick'];\n  onPrev: ComponentProps<typeof ArrowButton>['onClick'];\n  size?: ComponentProps<typeof ArrowButton>['size'];\n  theme?: ComponentProps<typeof ArrowButton>['theme'];\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  className,\n  color,\n  iconType = 'ArrowDefault',\n  isDisabledHidden = false,\n  isNextDisabled = false,\n  isPrevDisabled = false,\n  labels = {\n    next: '',\n    previous: '',\n  },\n  onNext,\n  onPrev,\n  size,\n  theme,\n  ...attrs\n}) => {\n  return (\n    <div\n      {...attrs}\n      className={classnames(\n        'pointer-events-none flex w-full items-center justify-between gap-x-20',\n        className,\n      )}\n      data-name=\"Arrows\"\n    >\n      <ArrowButton\n        className={classnames('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isPrevDisabled,\n        })}\n        color={color}\n        disabled={isPrevDisabled}\n        icon={`${iconType}Left`}\n        onClick={onPrev}\n        size={size}\n        theme={theme}\n      >\n        {labels.previous}\n      </ArrowButton>\n      <ArrowButton\n        className={classnames('pointer-events-auto transition-opacity', {\n          'opacity-0': isDisabledHidden && isNextDisabled,\n        })}\n        color={color}\n        disabled={isNextDisabled}\n        icon={`${iconType}Right`}\n        onClick={onNext}\n        size={size}\n        theme={theme}\n      >\n        {labels.next}\n      </ArrowButton>\n    </div>\n  );\n};\n"],"names":["Arrows","className","color","iconType","isDisabledHidden","isNextDisabled","isPrevDisabled","labels","onNext","onPrev","size","theme","attrs","jsxs","classnames","jsx","ArrowButton"],"mappings":";;;AAoBO,MAAMA,IAAyC,CAAC;AAAA,EACrD,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,QAAAC,IAAS;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE;AAAA,MACT;AAAA,MACAb;AAAA,IACF;AAAA,IACA,aAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAW,0CAA0C;AAAA,YAC9D,aAAaV,KAAoBE;AAAA,UAAA,CAClC;AAAA,UACD,OAAAJ;AAAA,UACA,UAAUI;AAAA,UACV,MAAM,GAAGH,CAAQ;AAAA,UACjB,SAASM;AAAA,UACT,MAAAC;AAAA,UACA,OAAAC;AAAA,UAEC,UAAOJ,EAAA;AAAA,QAAA;AAAA,MACV;AAAA,MACA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWF,EAAW,0CAA0C;AAAA,YAC9D,aAAaV,KAAoBC;AAAA,UAAA,CAClC;AAAA,UACD,OAAAH;AAAA,UACA,UAAUG;AAAA,UACV,MAAM,GAAGF,CAAQ;AAAA,UACjB,SAASK;AAAA,UACT,MAAAE;AAAA,UACA,OAAAC;AAAA,UAEC,UAAOJ,EAAA;AAAA,QAAA;AAAA,MACV;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/molecules/Arrows/ArrowsLabels.d.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=ArrowsLabels.d.js.map

package/molecules/Arrows/ArrowsLabels.d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowsLabels.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/molecules/Arrows.d.ts

@@ -1,50 +1 @@
-import type { ComponentProps, FunctionComponent } from 'react';
-import { Button } from './Buttons/Button';
-interface ArrowsProps {
-    /**
-     * onNext handler
-     */
-    onNext: () => void;
-    /**
-     * onPrev handler
-     */
-    onPrev: () => void;
-    /**
-     * Next label
-     */
-    nextLabel?: string;
-    /**
-     * Prev label
-     */
-    prevLabel?: string;
-    /**
-     * Disable next button
-     */
-    disableNext?: boolean;
-    /**
-     * Disable prev button
-     */
-    disablePrev?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Theme
-     */
-    theme?: ComponentProps<typeof Button>['theme'];
-    /**
-     * Variant
-     */
-    variant?: ComponentProps<typeof Button>['variant'];
-    /**
-     * Arrow icon type
-     */
-    iconType?: 'ArrowDefault' | 'ArrowTail';
-    /**
-     * Hide disabled arrows
-     */
-    hideDisabled?: boolean;
-}
-export declare const Arrows: FunctionComponent<ArrowsProps>;
-export {};
+export { Arrows } from './Arrows/Arrows';

package/molecules/Arrows.js

@@ -1,59 +1,5 @@
-import { jsxs as w, jsx as n } from "react/jsx-runtime";
-import { c as o } from "../chunks/index.js";
-import { Button as c } from "./Buttons/Button.js";
-const d = ({
-  onNext: l,
-  onPrev: m,
-  nextLabel: p = "",
-  prevLabel: u = "",
-  disableNext: t,
-  disablePrev: a,
-  className: f,
-  theme: r = "white",
-  variant: s = "icon",
-  iconType: e = "ArrowDefault",
-  hideDisabled: i = !1
-}) => /* @__PURE__ */ w(
-  "div",
-  {
-    role: "navigation",
-    className: o("flex w-full items-center justify-between", f),
-    "data-name": "Arrows",
-    children: [
-      /* @__PURE__ */ n(
-        c,
-        {
-          variant: s,
-          theme: r,
-          icon: `${e}Left`,
-          className: o("pointer-events-auto me-auto transition-opacity", {
-            "opacity-0": i && a
-          }),
-          onClick: m,
-          label: u,
-          disabled: a,
-          groupName: "arrows"
-        }
-      ),
-      /* @__PURE__ */ n(
-        c,
-        {
-          variant: s,
-          theme: r,
-          icon: `${e}Right`,
-          className: o("pointer-events-auto ms-auto transition-opacity", {
-            "opacity-0": i && t
-          }),
-          onClick: l,
-          label: p,
-          disabled: t,
-          groupName: "arrows"
-        }
-      )
-    ]
-  }
-);
+import { Arrows as e } from "./Arrows/Arrows.js";
 export {
-  d as Arrows
+  e as Arrows
 };
 //# sourceMappingURL=Arrows.js.map

package/molecules/Arrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"Arrows.js","sources":["../../lib/molecules/Arrows.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, FunctionComponent } from 'react';\n\nimport { Button } from './Buttons/Button';\n\ninterface ArrowsProps {\n  /**\n   * onNext handler\n   */\n  onNext: () => void;\n  /**\n   * onPrev handler\n   */\n  onPrev: () => void;\n  /**\n   * Next label\n   */\n  nextLabel?: string;\n  /**\n   * Prev label\n   */\n  prevLabel?: string;\n  /**\n   * Disable next button\n   */\n  disableNext?: boolean;\n  /**\n   * Disable prev button\n   */\n  disablePrev?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Theme\n   */\n  theme?: ComponentProps<typeof Button>['theme'];\n  /**\n   * Variant\n   */\n  variant?: ComponentProps<typeof Button>['variant'];\n  /**\n   * Arrow icon type\n   */\n  iconType?: 'ArrowDefault' | 'ArrowTail';\n  /**\n   * Hide disabled arrows\n   */\n  hideDisabled?: boolean;\n}\n\nexport const Arrows: FunctionComponent<ArrowsProps> = ({\n  onNext,\n  onPrev,\n  nextLabel = '',\n  prevLabel = '',\n  disableNext,\n  disablePrev,\n  className,\n  theme = 'white',\n  variant = 'icon',\n  iconType = 'ArrowDefault',\n  hideDisabled = false,\n}) => {\n  return (\n    <div\n      role=\"navigation\"\n      className={classnames('flex w-full items-center justify-between', className)}\n      data-name=\"Arrows\"\n    >\n      <Button\n        variant={variant}\n        theme={theme}\n        icon={`${iconType}Left`}\n        className={classnames('pointer-events-auto me-auto transition-opacity', {\n          'opacity-0': hideDisabled && disablePrev,\n        })}\n        onClick={onPrev}\n        label={prevLabel}\n        disabled={disablePrev}\n        groupName=\"arrows\"\n      />\n      <Button\n        variant={variant}\n        theme={theme}\n        icon={`${iconType}Right`}\n        className={classnames('pointer-events-auto ms-auto transition-opacity', {\n          'opacity-0': hideDisabled && disableNext,\n        })}\n        onClick={onNext}\n        label={nextLabel}\n        disabled={disableNext}\n        groupName=\"arrows\"\n      />\n    </div>\n  );\n};\n"],"names":["Arrows","onNext","onPrev","nextLabel","prevLabel","disableNext","disablePrev","className","theme","variant","iconType","hideDisabled","jsxs","classnames","jsx","Button"],"mappings":";;;AAoDO,MAAMA,IAAyC,CAAC;AAAA,EACrD,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AACjB,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,WAAWC,EAAW,4CAA4CN,CAAS;AAAA,IAC3E,aAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAN;AAAA,UACA,OAAAD;AAAA,UACA,MAAM,GAAGE,CAAQ;AAAA,UACjB,WAAWG,EAAW,kDAAkD;AAAA,YACtE,aAAaF,KAAgBL;AAAA,UAAA,CAC9B;AAAA,UACD,SAASJ;AAAA,UACT,OAAOE;AAAA,UACP,UAAUE;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MACA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAN;AAAA,UACA,OAAAD;AAAA,UACA,MAAM,GAAGE,CAAQ;AAAA,UACjB,WAAWG,EAAW,kDAAkD;AAAA,YACtE,aAAaF,KAAgBN;AAAA,UAAA,CAC9B;AAAA,UACD,SAASJ;AAAA,UACT,OAAOE;AAAA,UACP,UAAUE;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Arrows.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/molecules/Buttons/ArrowButton.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps, FunctionComponent } from 'react';
+import { Button } from './Button';
+interface Props extends ComponentProps<typeof Button> {
+    icon: 'ArrowDefaultLeft' | 'ArrowDefaultRight' | 'ArrowTailLeft' | 'ArrowTailRight';
+}
+export declare const ArrowButton: FunctionComponent<Props>;
+export {};

package/molecules/Buttons/ArrowButton.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import { BUTTON_THEME_LEGACY as a, BUTTON_VARIANT_LEGACY as e, Button as m } from "./Button.js";
+const c = ({ children: r, ...t }) => {
+  const n = {
+    ...t,
+    ...a[t.theme] || {},
+    ...e[t.variant] || {}
+  };
+  return /* @__PURE__ */ o(m, { ...n, variant: "circle", children: r && /* @__PURE__ */ o("span", { className: "sr-only", children: r }) });
+};
+export {
+  c as ArrowButton
+};
+//# sourceMappingURL=ArrowButton.js.map

package/molecules/Buttons/ArrowButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowButton.js","sources":["../../../lib/molecules/Buttons/ArrowButton.tsx"],"sourcesContent":["import type { ComponentProps, FunctionComponent } from 'react';\n\nimport { Button } from './Button';\nimport { BUTTON_THEME_LEGACY, BUTTON_VARIANT_LEGACY } from '@/molecules/Buttons/Button';\n\ninterface Props extends ComponentProps<typeof Button> {\n  icon: 'ArrowDefaultLeft' | 'ArrowDefaultRight' | 'ArrowTailLeft' | 'ArrowTailRight';\n}\n\nexport const ArrowButton: FunctionComponent<Props> = ({ children, ...props }) => {\n  const opts = {\n    ...props,\n    ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n    ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n  };\n\n  return (\n    <Button {...opts} variant=\"circle\">\n      {children && <span className=\"sr-only\">{children}</span>}\n    </Button>\n  );\n};\n"],"names":["ArrowButton","children","props","opts","BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","jsx","Button"],"mappings":";;AASO,MAAMA,IAAwC,CAAC,EAAE,UAAAC,GAAU,GAAGC,QAAY;AAC/E,QAAMC,IAAO;AAAA,IACX,GAAGD;AAAA,IACH,GAAIE,EAAoBF,EAAM,KAAM,KAAK,CAAC;AAAA,IAC1C,GAAIG,EAAsBH,EAAM,OAAQ,KAAK,CAAC;AAAA,EAAA;AAGhD,SACG,gBAAAI,EAAAC,GAAA,EAAQ,GAAGJ,GAAM,SAAQ,UACvB,UAAYF,KAAA,gBAAAK,EAAC,QAAK,EAAA,WAAU,WAAW,UAAAL,EAAA,CAAS,EACnD,CAAA;AAEJ;"}

package/molecules/Buttons/Button.d.ts

@@ -1,30 +1,26 @@
-import { type ButtonHTMLAttributes, type FunctionComponent, type MouseEventHandler, type ReactNode } from 'react';
-import './button.css';
+import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';
 import type { IconicNames, IconicTypes } from '../../atoms/Icons/index.js';
-export interface CommonButtonProps {
+import { type ButtonProps as ButtonPropsV2 } from './v2/Button.js';
+export declare const BUTTON_THEME_LEGACY: any;
+export declare const BUTTON_VARIANT_LEGACY: any;
+export type ButtonPropsLegacy = {
     /**
      * Button themes defining background color and text/icon color
      */
-    theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke';
+    theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke' | ButtonPropsV2['theme'];
     /**
      * Is it a text button? An icon button? An arrow button?
      */
-    variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram';
+    variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram' | ButtonPropsV2['variant'];
     /**
      * Background Color override
      * Ideally please use ONLY for the "white" and "black" themes
+     * @deprecated
      */
     backgroundOverride?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Button title
-     */
-    title?: string;
     /**
      * Button contents
+     * @deprecated
      */
     label?: string;
     /**
@@ -39,31 +35,14 @@ export interface CommonButtonProps {
      * Force the icon type to be svg, font or default
      */
     iconType?: IconicTypes;
-    /**
-     * Data test id
-     */
-    dataTestId?: string;
     /**
      * Group name
      * Used to group buttons together (you might not need this)
+     * @deprecated
      */
     groupName?: string;
-}
-interface ButtonProps extends CommonButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Optional click handler
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-    /**
-     * Button tabIndex
-     *
-     * @default 0
-     */
-    tabIndex?: number;
-    /**
-     * Data test id
-     */
-    dataTestId?: string;
-}
+};
+export type CommonButtonProps = Omit<ButtonPropsV2, 'theme' | 'variant'> & ButtonPropsLegacy;
+type ButtonProps = CommonButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 export declare const Button: FunctionComponent<ButtonProps>;
 export {};

package/molecules/Buttons/Button.js

@@ -1,47 +1,55 @@
-import { jsx as n } from "react/jsx-runtime";
-import { c as w } from "../../chunks/index.js";
+import { jsxs as e } from "react/jsx-runtime";
 import "react";
-/* empty css                  */
-import { variants as y, rootClassName as C } from "./Button.helpers.js";
-import { themes as N } from "./Button.themes.js";
-import { ButtonContent as j } from "./ButtonContent.js";
-const z = ({
-  type: r = "button",
-  theme: s = "yellow",
-  backgroundOverride: a,
-  variant: t = "text",
-  className: c,
-  label: o,
-  children: i,
-  title: m,
-  icon: p,
-  iconType: u,
-  tabIndex: l = 0,
-  disabled: e = !1,
-  dataTestId: f,
-  groupName: x = "",
-  ...h
-}) => {
-  const B = ["text", "textSmall", "number"].includes(t), b = y[t], d = N(s, a, x);
-  return /* @__PURE__ */ n(
-    "button",
-    {
-      ...h,
-      "data-name": "Button",
-      "data-testid": f,
-      type: r,
-      className: w(C, d, b, t, c, {
-        "pointer-events-none": e
-      }),
-      disabled: e,
-      tabIndex: e ? -1 : l,
-      title: m || o,
-      "aria-label": m || o,
-      children: /* @__PURE__ */ n(j, { showLabel: B, label: o, icon: p, iconType: u, children: i })
-    }
-  );
+import { Button as l } from "./v2/Button.js";
+const i = {
+  white: {
+    color: "white",
+    theme: "solid"
+  },
+  black: {
+    color: "black",
+    theme: "solid"
+  },
+  yellow: {
+    color: "saffron",
+    theme: "solid"
+  },
+  whiteStroke: {
+    color: "white",
+    theme: "outline"
+  },
+  blackStroke: {
+    color: "black",
+    theme: "outline"
+  }
+}, r = {
+  textSmall: {
+    size: "small",
+    variant: void 0
+  },
+  icon: {
+    variant: "circle",
+    label: void 0
+  },
+  arrow: {
+    variant: "circle",
+    label: void 0,
+    size: "large"
+  }
+}, m = (t) => {
+  const o = {
+    ...t,
+    ...i[t.theme] || {},
+    ...r[t.variant] || {}
+  };
+  return /* @__PURE__ */ e(l, { ...o, children: [
+    o.label,
+    t.children
+  ] });
 };
 export {
-  z as Button
+  i as BUTTON_THEME_LEGACY,
+  r as BUTTON_VARIANT_LEGACY,
+  m as Button
 };
 //# sourceMappingURL=Button.js.map

package/molecules/Buttons/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../lib/molecules/Buttons/Button.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n  type ButtonHTMLAttributes,\n  type FunctionComponent,\n  type MouseEventHandler,\n  type ReactNode,\n} from 'react';\nimport './button.css';\nimport { rootClassName, variants } from './Button.helpers';\nimport { themes } from './Button.themes';\nimport { ButtonContent } from './ButtonContent';\nimport type { IconicNames, IconicTypes } from '@/atoms/Icons/index.js';\n\nexport interface CommonButtonProps {\n  /**\n   * Button themes defining background color and text/icon color\n   */\n  theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke';\n  /**\n   * Is it a text button? An icon button? An arrow button?\n   */\n  variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram';\n  /**\n   * Background Color override\n   * Ideally please use ONLY for the \"white\" and \"black\" themes\n   */\n  backgroundOverride?: string;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Button title\n   */\n  title?: string;\n  /**\n   * Button contents\n   */\n  label?: string;\n  /**\n   * Optional children (you might never use this, please actually try to avoid it)\n   */\n  children?: ReactNode;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  /**\n   * Data test id\n   */\n  dataTestId?: string;\n  /**\n   * Group name\n   * Used to group buttons together (you might not need this)\n   */\n  groupName?: string;\n}\n\ninterface ButtonProps extends CommonButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Optional click handler\n   */\n  onClick?: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Button tabIndex\n   *\n   * @default 0\n   */\n  tabIndex?: number;\n  /**\n   * Data test id\n   */\n  dataTestId?: string;\n}\n\nexport const Button: FunctionComponent<ButtonProps> = ({\n  type = 'button',\n  theme: themeName = 'yellow',\n  backgroundOverride,\n  variant = 'text',\n  className,\n  label,\n  children,\n  title,\n  icon,\n  iconType,\n  tabIndex = 0,\n  disabled = false,\n  dataTestId,\n  groupName = '',\n  ...rest\n}) => {\n  const showLabel = ['text', 'textSmall', 'number'].includes(variant);\n  const layout = variants[variant];\n  const theme = themes(themeName, backgroundOverride, groupName);\n\n  return (\n    <button\n      {...rest}\n      data-name=\"Button\"\n      data-testid={dataTestId}\n      type={type}\n      className={classNames(rootClassName, theme, layout, variant, className, {\n        'pointer-events-none': disabled,\n      })}\n      disabled={disabled}\n      tabIndex={disabled ? -1 : tabIndex}\n      title={title || label}\n      aria-label={title || label}\n    >\n      <ButtonContent showLabel={showLabel} label={label} icon={icon} iconType={iconType}>\n        {children}\n      </ButtonContent>\n    </button>\n  );\n};\n"],"names":["Button","type","themeName","backgroundOverride","variant","className","label","children","title","icon","iconType","tabIndex","disabled","dataTestId","groupName","rest","showLabel","layout","variants","theme","themes","jsx","classNames","rootClassName","ButtonContent"],"mappings":";;;;;;;AA+EO,MAAMA,IAAyC,CAAC;AAAA,EACrD,MAAAC,IAAO;AAAA,EACP,OAAOC,IAAY;AAAA,EACnB,oBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAY,CAAC,QAAQ,aAAa,QAAQ,EAAE,SAASZ,CAAO,GAC5Da,IAASC,EAASd,CAAO,GACzBe,IAAQC,EAAOlB,GAAWC,GAAoBW,CAAS;AAG3D,SAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGN;AAAA,MACJ,aAAU;AAAA,MACV,eAAaF;AAAA,MACb,MAAAZ;AAAA,MACA,WAAWqB,EAAWC,GAAeJ,GAAOF,GAAQb,GAASC,GAAW;AAAA,QACtE,uBAAuBO;AAAA,MAAA,CACxB;AAAA,MACD,UAAAA;AAAA,MACA,UAAUA,IAAW,KAAKD;AAAA,MAC1B,OAAOH,KAASF;AAAA,MAChB,cAAYE,KAASF;AAAA,MAErB,4BAACkB,GAAc,EAAA,WAAAR,GAAsB,OAAAV,GAAc,MAAAG,GAAY,UAAAC,GAC5D,UAAAH,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Button.js","sources":["../../../lib/molecules/Buttons/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, type FunctionComponent, type ReactNode } from 'react';\nimport type { IconicNames, IconicTypes } from '@/atoms/Icons/index.js';\nimport { Button as ButtonV2, type ButtonProps as ButtonPropsV2 } from './v2/Button.js';\n\nexport const BUTTON_THEME_LEGACY: any = {\n  white: {\n    color: 'white',\n    theme: 'solid',\n  },\n  black: {\n    color: 'black',\n    theme: 'solid',\n  },\n  yellow: {\n    color: 'saffron',\n    theme: 'solid',\n  },\n  whiteStroke: {\n    color: 'white',\n    theme: 'outline',\n  },\n  blackStroke: {\n    color: 'black',\n    theme: 'outline',\n  },\n};\n\nexport const BUTTON_VARIANT_LEGACY: any = {\n  textSmall: {\n    size: 'small',\n    variant: undefined,\n  },\n  icon: {\n    variant: 'circle',\n    label: undefined,\n  },\n  arrow: {\n    variant: 'circle',\n    label: undefined,\n    size: 'large',\n  },\n};\n\nexport type ButtonPropsLegacy = {\n  /**\n   * Button themes defining background color and text/icon color\n   */\n  theme?: 'yellow' | 'white' | 'black' | 'whiteStroke' | 'blackStroke' | ButtonPropsV2['theme'];\n  /**\n   * Is it a text button? An icon button? An arrow button?\n   */\n  variant?: 'text' | 'textSmall' | 'icon' | 'arrow' | 'monogram' | ButtonPropsV2['variant'];\n  /**\n   * Background Color override\n   * Ideally please use ONLY for the \"white\" and \"black\" themes\n   * @deprecated\n   */\n  backgroundOverride?: string;\n  /**\n   * Button contents\n   * @deprecated\n   */\n  label?: string;\n  /**\n   * Optional children (you might never use this, please actually try to avoid it)\n   */\n  children?: ReactNode;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  /**\n   * Group name\n   * Used to group buttons together (you might not need this)\n   * @deprecated\n   */\n  groupName?: string;\n};\n\nexport type CommonButtonProps = Omit<ButtonPropsV2, 'theme' | 'variant'> & ButtonPropsLegacy;\n\ntype ButtonProps = CommonButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport const Button: FunctionComponent<ButtonProps> = (props: ButtonProps) => {\n  const opts = {\n    ...props,\n    ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n    ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n  };\n\n  return (\n    <ButtonV2 {...opts}>\n      {opts.label}\n      {props.children}\n    </ButtonV2>\n  );\n};\n"],"names":["BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","Button","props","opts","jsxs","ButtonV2"],"mappings":";;;AAIO,MAAMA,IAA2B;AAAA,EACtC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AACF,GAEaC,IAA6B;AAAA,EACxC,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF,GA8CaC,IAAyC,CAACC,MAAuB;AAC5E,QAAMC,IAAO;AAAA,IACX,GAAGD;AAAA,IACH,GAAIH,EAAoBG,EAAM,KAAM,KAAK,CAAC;AAAA,IAC1C,GAAIF,EAAsBE,EAAM,OAAQ,KAAK,CAAC;AAAA,EAAA;AAI9C,SAAA,gBAAAE,EAACC,GAAU,EAAA,GAAGF,GACX,UAAA;AAAA,IAAKA,EAAA;AAAA,IACLD,EAAM;AAAA,EACT,EAAA,CAAA;AAEJ;"}

package/molecules/Buttons/ButtonAnchor.d.ts

@@ -1,8 +1,7 @@
 import type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';
-import './button.css';
 import { type CommonButtonProps } from './Button';
-interface ButtonAnchorProps extends CommonButtonProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+type ButtonAnchorProps = CommonButtonProps & {
     component?: FunctionComponent<PropsWithChildren<any>> | string;
-}
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare const ButtonAnchor: FunctionComponent<ButtonAnchorProps>;
 export {};