wex-ui-lib 1.4.4 → 1.4.6

package/dist/index.d.ts

@@ -58,6 +58,10 @@ type NavbarProps = {
             onClick?: () => void;
         }[];
     }[];
+    mobileItems?: {
+        label: string;
+        onClick?: () => void;
+    }[];
     button?: ButtonProps & {
         label: string;
         onClick?: () => void;

package/dist/index.esm.js

@@ -1960,11 +1960,11 @@ function Icon(props) {
         icon.includes("arrow-caret") && (React__default.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", strokeWidth: "1.5" })))));
 }
-var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  transition: 100ms;\n  cursor: pointer;\n  svg {\n    transform: ", ";\n    height: ", ";\n    fill: ", ";\n    path{\n      fill: ", "\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      fill: ", ";\n      path{\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  transition: 100ms;\n  cursor: pointer;\n  svg {\n    transform: ", ";\n    height: ", ";\n    fill: ", ";\n    path{\n      fill: ", "\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      fill: ", ";\n      path{\n        fill: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? "2px solid ".concat(props.color) : "unset"; }, function (props) {
+var IconContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  transition: 100ms;\n  cursor: pointer;\n  svg {\n    transform: ", ";\n    height: ", ";\n    fill: ", ";\n    stroke: ", ";\n    path{\n      fill: ", ";\n      stroke: ", ";\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      fill: ", ";\n      path{\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: ", ";\n  transition: 100ms;\n  cursor: pointer;\n  svg {\n    transform: ", ";\n    height: ", ";\n    fill: ", ";\n    stroke: ", ";\n    path{\n      fill: ", ";\n      stroke: ", ";\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      fill: ", ";\n      path{\n        fill: ", ";\n      }\n    }\n  }\n"])), function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? props.size : "unset"; }, function (props) { return props.border ? "2px solid ".concat(props.color) : "unset"; }, function (props) {
     return props.border === "rounded" ? "2px" :
         props.border === "circle" ? "50px" :
             "unset";
-}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
+}, function (props) { return props.icon.includes("left") ? "rotateY(180deg)" : ""; }, function (props) { return props.border ? "46%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.color; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; }, function (props) { return props.hoverColor; });
 var templateObject_1$d;
 
 var theme = {
@@ -2168,39 +2168,62 @@ var disappearAnimation = keyframes(templateObject_2$7 || (templateObject_2$7 = _
 var fadeInFromLeft = keyframes(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
 var fadeInFromRight = keyframes(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
 var fadeInFromTop = keyframes(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-var fadeInFromBottom = keyframes(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
-var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$1;
+var fadeInFromBottom = keyframes(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$5, templateObject_5$5, templateObject_6$2;
 
 function Navbar(props) {
     var logo = props.logo, items = props.items, button = props.button, config = props.config;
+    var _a = useState(false), sideNavOpen = _a[0], setSideNavOpen = _a[1];
+    var isMobile = typeof window !== 'undefined' && window.innerWidth <= 800;
+    var sideNavItems = props.mobileItems || [];
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(NavbarContainer, __assign({}, props),
             React__default.createElement(Logo$1, { src: logo === null || logo === undefined ? undefined : logo.url, width: logo === null || logo === undefined ? undefined : logo.width, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
-            React__default.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
-                var _a, _b;
-                return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
-                        e.preventDefault();
-                        item.onClick && item.onClick();
-                    }, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
-                    item.label,
-                    item.subitems && React__default.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
-                    item.subitems && (React__default.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
-                        return (React__default.createElement(Subitem, { key: subitem.label },
-                            React__default.createElement("a", { href: "#", onClick: function (e) {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    subitem.onClick && subitem.onClick();
-                                } }, subitem.label)));
-                    })))));
-            })),
-            button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))));
+            !isMobile ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(ItemsContainer, null, items === null || items === undefined ? undefined : items.map(function (item) {
+                    var _a, _b;
+                    return (React__default.createElement(Item$1, { key: item.label, href: "#", onClick: function (e) {
+                            e.preventDefault();
+                            item.onClick && item.onClick();
+                        }, config: config, hasSubitems: ((_a = item.subitems) === null || _a === undefined ? undefined : _a.length) > 0 },
+                        item.label,
+                        item.subitems && React__default.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
+                        item.subitems && (React__default.createElement("div", null, (_b = item.subitems) === null || _b === undefined ? undefined : _b.map(function (subitem) {
+                            return (React__default.createElement(Subitem, { key: subitem.label },
+                                React__default.createElement("a", { href: "#", onClick: function (e) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        subitem.onClick && subitem.onClick();
+                                    } }, subitem.label)));
+                        })))));
+                })),
+                button && (React__default.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label)))) : (React__default.createElement(Icon, { icon: 'hamburgerMenu', color: 'white', callback: function () { return setSideNavOpen(true); } }))),
+        isMobile && (React__default.createElement(SideNav, { open: sideNavOpen },
+            React__default.createElement(SideNavOverlay, { open: sideNavOpen, onClick: function () { return setSideNavOpen(false); } }),
+            React__default.createElement(SideNavContent, { open: sideNavOpen },
+                React__default.createElement(CloseButton, { onClick: function () { return setSideNavOpen(false); } }, "\u00D7"), sideNavItems === null || sideNavItems === undefined ? undefined :
+                sideNavItems.map(function (item) { return (React__default.createElement(SideNavItem, { key: item.label, onClick: function () { setSideNavOpen(false); item.onClick && item.onClick(); } }, item.label)); }))))));
 }
-var NavbarContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-rows: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  & > button {\n    margin-left: auto;\n    grid-area: button;\n  }\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n"], ["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-rows: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  & > button {\n    margin-left: auto;\n    grid-area: button;\n  }\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
+var NavbarContainer = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-rows: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  & > button {\n    margin-left: auto;\n    grid-area: button;\n  }\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n  @media only screen and (max-width: 1024px) {\n    grid-template-columns: auto auto;\n    grid-template-areas: \"logo hamburgerIcon\";\n  }\n"], ["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: grid;\n  ", ";\n  ", ";\n  grid-template-rows: 100%;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  & > button {\n    margin-left: auto;\n    grid-area: button;\n  }\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n  @media only screen and (max-width: 1024px) {\n    grid-template-columns: auto auto;\n    grid-template-areas: \"logo hamburgerIcon\";\n  }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.background) || theme.black; }, function (props) { var _a; return ((_a = props.config) === null || _a === undefined ? undefined : _a.height) || '80px'; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-columns: auto auto auto" : "grid-template-columns: auto auto"; }, function (props) { var _a; return ((_a = props.button) === null || _a === undefined ? undefined : _a.label) ? "grid-template-areas: \"logo items button\"" : "grid-template-areas: \"logo items\""; });
 var ItemsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  grid-area: items;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  @media only screen and (max-width: 1024px) {\n    display: none;\n  }\n"], ["\n  grid-area: items;\n  display: flex;\n  align-items: center;\n  height: 100%;\n  @media only screen and (max-width: 1024px) {\n    display: none;\n  }\n"])));
 var Item$1 = newStyled.a(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  display: flex;\n  gap: 5px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  font-size: 12px;\n  letter-spacing: 2px;\n  font-weight: 500;\n  text-transform: uppercase;\n  text-decoration: none;\n  padding: 6px 22px 0;\n  transition: 0.3s;\n  border-bottom: 4px solid transparent;\n  svg {\n    margin-bottom: 1px;\n    transition: 300ms;\n    transform: rotateZ(90deg);\n  }\n  & > div:nth-of-type(2) {\n    z-index: 10;\n    position: absolute;\n    display: none;\n    flex-direction: column;\n    align-items: flex-start;\n    width: max-content;\n    top: 88%;\n    left: 0;\n    background-color: ", ";\n    padding: 16px 14px;\n    animation-name: ", ";\n    animation-duration: 0.3s;\n    animation-fill-mode: forwards;\n    a {\n      color: ", ";\n      &:hover {\n        color: ", ";\n      }\n    }\n    &:hover {\n      animation-name: ", ";\n      display: flex;\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n    }\n    & > div{\n      animation-name: ", ";\n      display: flex;\n    }\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  display: flex;\n  gap: 5px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  font-size: 12px;\n  letter-spacing: 2px;\n  font-weight: 500;\n  text-transform: uppercase;\n  text-decoration: none;\n  padding: 6px 22px 0;\n  transition: 0.3s;\n  border-bottom: 4px solid transparent;\n  svg {\n    margin-bottom: 1px;\n    transition: 300ms;\n    transform: rotateZ(90deg);\n  }\n  & > div:nth-of-type(2) {\n    z-index: 10;\n    position: absolute;\n    display: none;\n    flex-direction: column;\n    align-items: flex-start;\n    width: max-content;\n    top: 88%;\n    left: 0;\n    background-color: ", ";\n    padding: 16px 14px;\n    animation-name: ", ";\n    animation-duration: 0.3s;\n    animation-fill-mode: forwards;\n    a {\n      color: ", ";\n      &:hover {\n        color: ", ";\n      }\n    }\n    &:hover {\n      animation-name: ", ";\n      display: flex;\n    }\n  }\n  &:hover {\n    border-color: ", ";\n    svg {\n      transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n    }\n    & > div{\n      animation-name: ", ";\n      display: flex;\n    }\n  }\n"])), function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, theme.gray, disappearAnimation, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.text) || theme.white; }, function (props) { var _a, _b; return ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.textHover) || theme.primary; }, appearAnimation, function (props) { var _a, _b; return !props.hasSubitems ? ((_b = (_a = props.config) === null || _a === undefined ? undefined : _a.colors) === null || _b === undefined ? undefined : _b.borderHover) || "white" : "transparent"; }, appearAnimation);
 var Logo$1 = newStyled.img(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  grid-area: logo;\n  cursor: pointer;\n  width: ", ";\n  transition: all 0.2s;\n  &:hover {\n    filter: brightness(1.2);\n  }\n  @media only screen and (max-width: 1024px) {\n    width: calc(", "/1.3);\n  }\n"], ["\n  grid-area: logo;\n  cursor: pointer;\n  width: ", ";\n  transition: all 0.2s;\n  &:hover {\n    filter: brightness(1.2);\n  }\n  @media only screen and (max-width: 1024px) {\n    width: calc(", "/1.3);\n  }\n"])), function (props) { return props.width || '130px'; }, function (props) { return props.width || '130px'; });
 var Subitem = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  width: 100%;\n  cursor: pointer;\n  height: 100%;\n  max-height: 90px;\n  text-transform: uppercase;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  transition: 0.3s;\n  a {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font-size: 12px;\n    letter-spacing: 2px;\n    font-weight: 500;\n    text-decoration: none;\n  }\n  &:not(:first-of-type) {\n    a {\n      padding-top: 9px;\n    }\n  }\n  &:not(:last-of-type) {\n    a {\n      padding-bottom: 9px;\n    }\n  }\n"], ["\n  width: 100%;\n  cursor: pointer;\n  height: 100%;\n  max-height: 90px;\n  text-transform: uppercase;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  transition: 0.3s;\n  a {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    font-size: 12px;\n    letter-spacing: 2px;\n    font-weight: 500;\n    text-decoration: none;\n  }\n  &:not(:first-of-type) {\n    a {\n      padding-top: 9px;\n    }\n  }\n  &:not(:last-of-type) {\n    a {\n      padding-bottom: 9px;\n    }\n  }\n"])));
-var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4;
+var SideNav = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 200;\n  pointer-events: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 200;\n  pointer-events: ", ";\n"])), function (_a) {
+    var open = _a.open;
+    return open ? 'auto' : 'none';
+});
+var SideNavOverlay = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0,0,0,0.4);\n  opacity: ", ";\n  transition: opacity 0.3s;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background: rgba(0,0,0,0.4);\n  opacity: ", ";\n  transition: opacity 0.3s;\n"])), function (_a) {
+    var open = _a.open;
+    return open ? 1 : 0;
+});
+var SideNavContent = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 80vw;\n  max-width: 320px;\n  height: 100vh;\n  background: ", ";\n  box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n  transform: ", ";\n  transition: transform 0.3s;\n  display: flex;\n  flex-direction: column;\n  padding: 32px 20px 20px 20px;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 80vw;\n  max-width: 320px;\n  height: 100vh;\n  background: ", ";\n  box-shadow: -2px 0 16px rgba(0,0,0,0.15);\n  transform: ", ";\n  transition: transform 0.3s;\n  display: flex;\n  flex-direction: column;\n  padding: 32px 20px 20px 20px;\n"])), theme.black2, function (_a) {
+    var open = _a.open;
+    return open ? 'translateX(0)' : 'translateX(100%)';
+});
+var CloseButton = newStyled.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  color: white;\n  font-size: 2rem;\n  align-self: flex-end;\n  cursor: pointer;\n"], ["\n  background: none;\n  border: none;\n  color: white;\n  font-size: 2rem;\n  align-self: flex-end;\n  cursor: pointer;\n"])));
+var SideNavItem = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: white;\n  font-size: 1.1rem;\n  padding: 16px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  cursor: pointer;\n  &:last-of-type { border-bottom: none; }\n"], ["\n  color: white;\n  font-size: 1.1rem;\n  padding: 16px 0;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  cursor: pointer;\n  &:last-of-type { border-bottom: none; }\n"])));
+var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$4, templateObject_5$4, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 function Hero(props) {
     var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, backgroundColor = props.backgroundColor, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
@@ -2545,6 +2568,7 @@ var Item = newStyled.button(templateObject_4$1 || (templateObject_4$1 = __makeTe
 var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  grid-area: content;\n  display: flex;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  flex-direction: column;\n  gap: 20px;\n"], ["\n  grid-area: content;\n  display: flex;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  flex-direction: column;\n  gap: 20px;\n"])));
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
+var isTouchDevice = function () { return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0); };
 var Tabs = function (_a) {
     var _b, _c;
     var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
@@ -2553,6 +2577,9 @@ var Tabs = function (_a) {
     var activeTab = isControlled ? activeTabId : internalActiveTabId;
     var _f = useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
     var tabRefs = useRef([]);
+    var tabsListRef = useRef(null);
+    // Drag state for mobile
+    var dragState = useRef({ startX: 0, scrollLeft: 0, dragging: false });
     useEffect(function () {
         onTabChange && onTabChange(activeTab);
         var updateIndicator = function () {
@@ -2572,14 +2599,43 @@ var Tabs = function (_a) {
         }
         onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
     };
+    // Drag handlers
+    useEffect(function () {
+        var el = tabsListRef.current;
+        if (!el || !isTouchDevice())
+            return;
+        var onTouchStart = function (e) {
+            dragState.current.dragging = true;
+            dragState.current.startX = e.touches[0].pageX - el.offsetLeft;
+            dragState.current.scrollLeft = el.scrollLeft;
+        };
+        var onTouchMove = function (e) {
+            if (!dragState.current.dragging)
+                return;
+            var x = e.touches[0].pageX - el.offsetLeft;
+            var walk = dragState.current.startX - x;
+            el.scrollLeft = dragState.current.scrollLeft + walk;
+        };
+        var onTouchEnd = function () {
+            dragState.current.dragging = false;
+        };
+        el.addEventListener('touchstart', onTouchStart);
+        el.addEventListener('touchmove', onTouchMove);
+        el.addEventListener('touchend', onTouchEnd);
+        return function () {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', onTouchEnd);
+        };
+    }, [tabs]);
     return (React__default.createElement(TabsContainer, null,
-        React__default.createElement(TabsList, null,
+        React__default.createElement(TabsList, { ref: tabsListRef },
             tabs.map(function (tab, index) { return (React__default.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
             React__default.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
         React__default.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
 };
 var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  position: relative;\n"])));
-var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: relative;\n"], ["\n  display: flex;\n  justify-content: center;\n  position: relative;\n"])));
+var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: relative;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar { display: none; }\n  width: 100%;\n  scroll-behavior: smooth;\n  @media (max-width: 700px) {\n    justify-content: flex-start;\n    cursor: grab;\n    -webkit-overflow-scrolling: touch;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  position: relative;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar { display: none; }\n  width: 100%;\n  scroll-behavior: smooth;\n  @media (max-width: 700px) {\n    justify-content: flex-start;\n    cursor: grab;\n    -webkit-overflow-scrolling: touch;\n  }\n"])));
 var Tab = newStyled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n  width: fit-content;\n  border: none;\n  background: ", ";\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n  border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n  outline: none;\n  transition: color 0.3s;\n  font-size: ", ";\n  font-weight: ", ";\n  letter-spacing: 1px;\n  &:hover {\n    background: ", "\n  }\n"], ["\n  padding: ", ";\n  width: fit-content;\n  border: none;\n  background: ", ";\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n  border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n  outline: none;\n  transition: color 0.3s;\n  font-size: ", ";\n  font-weight: ", ";\n  letter-spacing: 1px;\n  &:hover {\n    background: ", "\n  }\n"])), function (props) { return props.tabPadding || "14px 32px 12px"; }, function (props) { return props.active ? (props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black) : "transparent"; }, function (props) { return (props.active ? (props.displayMode === "dark" ? "white" : "black") : (props.displayMode === "dark" ? "#AEAEAE" : theme.black)); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.size) || "12px"); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.weight) || "12px"); }, function (props) { return props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black; });
 var ActiveIndicator = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: ", "px;\n  width: ", "px;\n  height: 2px;\n  background: ", ";\n  transition: left 0.3s ease, width 0.3s ease;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: ", "px;\n  width: ", "px;\n  height: 2px;\n  background: ", ";\n  transition: left 0.3s ease, width 0.3s ease;\n"])), function (props) { return props.left; }, function (props) { return props.width; }, function (props) { return props.accentColor || theme.primary; });
 var TabPanel = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 16px;\n  font-size: 14px;\n"], ["\n  padding: 16px;\n  font-size: 14px;\n"])));