@paubox/ui 0.10.0 → 0.10.2

package/index.esm.js

@@ -1650,7 +1650,7 @@ function _templateObject4$5() {
     };
     return data;
 }
-function _templateObject5$3() {
+function _templateObject5$4() {
     var data = _tagged_template_literal$p([
         "\n  ",
         "\n  font-size: ",
@@ -1658,7 +1658,7 @@ function _templateObject5$3() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject5$3 = function _templateObject() {
+    _templateObject5$4 = function _templateObject() {
         return data;
     };
     return data;
@@ -1929,7 +1929,7 @@ var $headline100Regular = css(_templateObject1$e(), commonStyles, headline100Fon
 var $headline100Semibold = css(_templateObject2$b(), commonStyles, headline100FontSize / BASE_FONT_SIZE, headline100LineHeight / BASE_FONT_SIZE, headline100LetterSpacing);
 var $headline200Regular = css(_templateObject3$8(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
 var $headline200Semibold = css(_templateObject4$5(), commonStyles, headline200FontSize / BASE_FONT_SIZE, headline200LineHeight / BASE_FONT_SIZE, headline200LetterSpacing);
-var $headline300Regular = css(_templateObject5$3(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
+var $headline300Regular = css(_templateObject5$4(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 var $headline300Semibold = css(_templateObject6$1(), commonStyles, headline300FontSize / BASE_FONT_SIZE, headline300LineHeight / BASE_FONT_SIZE, headline300LetterSpacing);
 // PARAGRAPH
 var $paragraph100Regular = css(_templateObject7(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
@@ -2090,13 +2090,13 @@ function _templateObject4$4() {
     };
     return data;
 }
-function _templateObject5$2() {
+function _templateObject5$3() {
     var data = _tagged_template_literal$o([
         "\n  background-color: transparent;\n  border: none;\n  color: ",
         ";\n  cursor: pointer;\n  padding: 0.25rem;\n  font-size: 0.75rem;\n  margin-left: ",
         ";\n"
     ]);
-    _templateObject5$2 = function _templateObject() {
+    _templateObject5$3 = function _templateObject() {
         return data;
     };
     return data;
@@ -2118,7 +2118,7 @@ var StyledIcon = styled.div(_templateObject3$7(), function(param) {
     return type === 'info' ? primary700 : type === 'error' ? danger700 : type === 'success' ? success700 : warning700;
 });
 var TextWrapper = styled.div(_templateObject4$4());
-var TruncaterButton = styled.button(_templateObject5$2(), primary700, function(param) {
+var TruncaterButton = styled.button(_templateObject5$3(), primary700, function(param) {
     var isExpanded = param.isExpanded;
     return !isExpanded ? '0' : '0.25rem';
 });
@@ -22266,7 +22266,7 @@ function _templateObject$h() {
     };
     return data;
 }
-var Menu = styled.div(_templateObject$h(), function(param) {
+var Menu = styled('div')(_templateObject$h(), function(param) {
     var open = param.open;
     return open ? 'flex' : 'none';
 }, textPrimaryWhite, function(param) {
@@ -22328,7 +22328,7 @@ function _tagged_template_literal$g(strings, raw) {
 }
 function _templateObject$g() {
     var data = _tagged_template_literal$g([
-        "\n    cursor: pointer;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    box-sizing: border-box;\n    white-space: nowrap;\n    gap: 0.5rem;\n  "
+        "\n  display: inline-block;\n  width: 100%;\n"
     ]);
     _templateObject$g = function _templateObject() {
         return data;
@@ -22337,8 +22337,8 @@ function _templateObject$g() {
 }
 function _templateObject1$b() {
     var data = _tagged_template_literal$g([
-        "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 0.5rem;\n    &:hover {\n      background-color: ",
-        ";\n    }\n  "
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5rem;\n  &:hover {\n    background-color: ",
+        ";\n  }\n"
     ]);
     _templateObject1$b = function _templateObject() {
         return data;
@@ -22347,8 +22347,7 @@ function _templateObject1$b() {
 }
 function _templateObject2$8() {
     var data = _tagged_template_literal$g([
-        "\n    cursor: pointer;\n    background-color: transparent;\n    text-align: left;\n    border: none;\n    padding: 1rem 0.625rem;\n    white-space: nowrap;\n    width: 100%;\n    ",
-        "\n  "
+        "\n  cursor: pointer;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  white-space: nowrap;\n  gap: 0.5rem;\n"
     ]);
     _templateObject2$8 = function _templateObject() {
         return data;
@@ -22357,7 +22356,7 @@ function _templateObject2$8() {
 }
 function _templateObject3$6() {
     var data = _tagged_template_literal$g([
-        "\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "
+        "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"
     ]);
     _templateObject3$6 = function _templateObject() {
         return data;
@@ -22366,24 +22365,34 @@ function _templateObject3$6() {
 }
 function _templateObject4$3() {
     var data = _tagged_template_literal$g([
-        "\n    display: inline-block;\n    width: 100%;\n  "
+        "\n  cursor: pointer;\n  background-color: transparent;\n  text-align: left;\n  border: none;\n  padding: 1rem 0.625rem;\n  white-space: nowrap;\n  width: 100%;\n  ",
+        "\n"
     ]);
     _templateObject4$3 = function _templateObject() {
         return data;
     };
     return data;
 }
+function _templateObject5$2() {
+    var data = _tagged_template_literal$g([
+        "\n  ",
+        "\n"
+    ]);
+    _templateObject5$2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var DropdownOptionWrapper = styled.div(_templateObject$g());
+var CheckboxContainer = styled.div(_templateObject1$b(), primary100);
+var DropdownOptionContainer = styled.div(_templateObject2$8());
+var IconContainer = styled.div(_templateObject3$6());
+var StyledOption = styled.button(_templateObject4$3(), $paragraph200Regular);
+var StyledLink = styled.a(_templateObject5$2(), StyledOption);
 var DropdownOption = function(param) {
     var label = param.label, href = param.href, selected = param.selected, checkbox = param.checkbox, onClick = param.onClick, icon = param.icon;
-    var dropdownOptionStyles = css(_templateObject$g());
-    var checkboxStyles = css(_templateObject1$b(), primary100);
-    var optionStyles = css(_templateObject2$8(), $paragraph200Regular);
-    var iconStyles = css(_templateObject3$6());
-    var dropdownOptionWrapper = css(_templateObject4$3());
-    return /*#__PURE__*/ jsx("div", {
-        css: dropdownOptionWrapper,
-        children: /*#__PURE__*/ jsxs("div", {
-            css: checkboxStyles,
+    return /*#__PURE__*/ jsx(DropdownOptionWrapper, {
+        children: /*#__PURE__*/ jsxs(CheckboxContainer, {
             children: [
                 checkbox && /*#__PURE__*/ jsx(Checkbox, {
                     checked: selected,
@@ -22391,15 +22400,12 @@ var DropdownOption = function(param) {
                         return onClick === null || onClick === void 0 ? void 0 : onClick();
                     }
                 }),
-                /*#__PURE__*/ jsxs("div", {
-                    css: dropdownOptionStyles,
+                /*#__PURE__*/ jsxs(DropdownOptionContainer, {
                     children: [
-                        icon && /*#__PURE__*/ jsx("div", {
-                            css: iconStyles,
+                        icon && /*#__PURE__*/ jsx(IconContainer, {
                             children: icon
                         }),
-                        href ? /*#__PURE__*/ jsx("a", {
-                            css: optionStyles,
+                        href ? /*#__PURE__*/ jsx(StyledLink, {
                             href: href,
                             onClick: function() {
                                 return onClick === null || onClick === void 0 ? void 0 : onClick();
@@ -22407,8 +22413,7 @@ var DropdownOption = function(param) {
                             children: /*#__PURE__*/ jsx("div", {
                                 children: label
                             })
-                        }) : /*#__PURE__*/ jsx("button", {
-                            css: optionStyles,
+                        }) : /*#__PURE__*/ jsx(StyledOption, {
                             type: "button",
                             onClick: function() {
                                 return onClick === null || onClick === void 0 ? void 0 : onClick();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "type": "module",
   "private": false,
   "publishConfig": {