@paubox/ui 0.8.7 → 0.8.9

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import * as React from 'react';
 import React__default, { useState, useRef, forwardRef, useLayoutEffect, useEffect, createElement, cloneElement, Component, createRef, useCallback, useMemo } from 'react';
 import * as ReactDOM from 'react-dom';
@@ -1663,7 +1663,7 @@ function _templateObject5$3() {
     };
     return data;
 }
-function _templateObject6$2() {
+function _templateObject6$1() {
     var data = _tagged_template_literal$o([
         "\n  ",
         "\n  font-size: ",
@@ -1671,12 +1671,12 @@ function _templateObject6$2() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject6$2 = function _templateObject() {
+    _templateObject6$1 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject7$1() {
+function _templateObject7() {
     var data = _tagged_template_literal$o([
         "\n  ",
         "\n  font-size: ",
@@ -1684,12 +1684,12 @@ function _templateObject7$1() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject7$1 = function _templateObject() {
+    _templateObject7 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject8$1() {
+function _templateObject8() {
     var data = _tagged_template_literal$o([
         "\n  ",
         "\n  font-size: ",
@@ -1697,12 +1697,12 @@ function _templateObject8$1() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 600;\n"
     ]);
-    _templateObject8$1 = function _templateObject() {
+    _templateObject8 = function _templateObject() {
         return data;
     };
     return data;
 }
-function _templateObject9$1() {
+function _templateObject9() {
     var data = _tagged_template_literal$o([
         "\n  ",
         "\n  font-size: ",
@@ -1710,7 +1710,7 @@ function _templateObject9$1() {
         "rem;\n  letter-spacing: ",
         "px;\n  font-weight: 400;\n"
     ]);
-    _templateObject9$1 = function _templateObject() {
+    _templateObject9 = function _templateObject() {
         return data;
     };
     return data;
@@ -1930,11 +1930,11 @@ var $headline100Semibold = css(_templateObject2$a(), commonStyles, headline100Fo
 var $headline200Regular = css(_templateObject3$7(), 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 $headline300Semibold = css(_templateObject6$2(), 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$1(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
-var $paragraph100Semibold = css(_templateObject8$1(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
-var $paragraph200Regular = css(_templateObject9$1(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
+var $paragraph100Regular = css(_templateObject7(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
+var $paragraph100Semibold = css(_templateObject8(), commonStyles, paragraph100FontSize / BASE_FONT_SIZE, paragraph100LineHeight / BASE_FONT_SIZE, paragraph100LetterSpacing);
+var $paragraph200Regular = css(_templateObject9(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
 var $paragraph200Semibold = css(_templateObject10(), commonStyles, paragraph200FontSize / BASE_FONT_SIZE, paragraph200LineHeight / BASE_FONT_SIZE, paragraph200LetterSpacing);
 var $paragraph300Regular = css(_templateObject11(), commonStyles, paragraph300FontSize / BASE_FONT_SIZE, paragraph300LineHeight / BASE_FONT_SIZE, paragraph300LetterSpacing);
 var $paragraph300Medium = css(_templateObject12(), commonStyles, paragraph300FontSize / BASE_FONT_SIZE, paragraph300LineHeight / BASE_FONT_SIZE, paragraph300LetterSpacing);
@@ -2041,9 +2041,10 @@ function _unsupported_iterable_to_array$i(o, minLen) {
 }
 function _templateObject$n() {
     var data = _tagged_template_literal$n([
-        "\n    padding: ",
-        ";\n    margin: 10px;\n    border-radius: 5px;\n    color: ",
-        ";\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    gap: 0.5rem;\n  "
+        "\n  padding: ",
+        ";\n  margin: 10px;\n  border-radius: 5px;\n  color: ",
+        ";\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: 0.5rem;\n  background-color: ",
+        ";\n"
     ]);
     _templateObject$n = function _templateObject() {
         return data;
@@ -2052,8 +2053,8 @@ function _templateObject$n() {
 }
 function _templateObject1$c() {
     var data = _tagged_template_literal$n([
-        "\n    ",
-        "\n    margin: 0;\n  "
+        "\n  ",
+        ";\n  margin: 0;\n"
     ]);
     _templateObject1$c = function _templateObject() {
         return data;
@@ -2062,8 +2063,8 @@ function _templateObject1$c() {
 }
 function _templateObject2$9() {
     var data = _tagged_template_literal$n([
-        "\n    ",
-        "\n    margin: 0;\n  "
+        "\n  ",
+        ";\n  margin: 0;\n"
     ]);
     _templateObject2$9 = function _templateObject() {
         return data;
@@ -2072,8 +2073,8 @@ function _templateObject2$9() {
 }
 function _templateObject3$6() {
     var data = _tagged_template_literal$n([
-        "\n      background-color: ",
-        ";\n    "
+        "\n  font-size: 1.5rem;\n  color: ",
+        ";\n  margin-bottom: auto;\n  flex-shrink: 0;\n"
     ]);
     _templateObject3$6 = function _templateObject() {
         return data;
@@ -2082,8 +2083,7 @@ function _templateObject3$6() {
 }
 function _templateObject4$4() {
     var data = _tagged_template_literal$n([
-        "\n      background-color: ",
-        ";\n    "
+        "\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n"
     ]);
     _templateObject4$4 = function _templateObject() {
         return data;
@@ -2092,54 +2092,36 @@ function _templateObject4$4() {
 }
 function _templateObject5$2() {
     var data = _tagged_template_literal$n([
-        "\n      background-color: ",
-        ";\n    "
+        "\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() {
         return data;
     };
     return data;
 }
-function _templateObject6$1() {
-    var data = _tagged_template_literal$n([
-        "\n      background-color: ",
-        ";\n    "
-    ]);
-    _templateObject6$1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal$n([
-        "\n    font-size: 1.5rem;\n    color: ",
-        ";\n    margin-bottom: auto;\n    flex-shrink: 0;\n  "
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal$n([
-        "\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n  "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal$n([
-        "\n    background-color: transparent;\n    border: none;\n    color: ",
-        ";\n    cursor: pointer;\n    padding: 0.25rem;\n    font-size: 0.75;\n    margin-left: ",
-        ";\n  "
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
+var AlertContainer = styled.div(_templateObject$n(), function(param) {
+    var size = param.size;
+    return size === 'large' ? '1rem' : '0.5rem 0.625rem';
+}, neutral900, function(param) {
+    var type = param.type;
+    return type === 'info' ? primary100 : type === 'warning' ? warning100 : type === 'error' ? danger100 : success100;
+});
+var Title = styled.h1(_templateObject1$c(), function(param) {
+    var size = param.size;
+    return size === 'large' ? $paragraph100Semibold : $paragraph200Regular;
+});
+var Text = styled.p(_templateObject2$9(), $paragraph200Regular);
+var StyledIcon = styled.div(_templateObject3$6(), function(param) {
+    var type = param.type;
+    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 isExpanded = param.isExpanded;
+    return !isExpanded ? '0' : '0.25rem';
+});
 var AlertBar = function(props) {
     var title = props.title, _props_text = props.text, text = _props_text === void 0 ? '' : _props_text, _props_size = props.size, size = _props_size === void 0 ? 'small' : _props_size, _props_type = props.type, type = _props_type === void 0 ? 'info' : _props_type;
     var _useState = _sliced_to_array$e(useState(false), 2), isExpanded = _useState[0], setIsExpanded = _useState[1];
@@ -2147,18 +2129,6 @@ var AlertBar = function(props) {
     var isTooLong = text.length > maxLength;
     var displayText = isExpanded || !isTooLong ? text : "".concat(text.slice(0, maxLength), "...");
     var textRef = useRef(null);
-    var alertBaseStyles = css(_templateObject$n(), size === 'large' ? '1rem' : '0.5rem 0.625rem ', neutral900);
-    var titleStyles = css(_templateObject1$c(), size === 'large' ? $paragraph100Semibold : $paragraph200Regular);
-    var textStyles = css(_templateObject2$9(), $paragraph200Regular);
-    var alertStyles = {
-        info: css(_templateObject3$6(), primary100),
-        warning: css(_templateObject4$4(), warning100),
-        error: css(_templateObject5$2(), danger100),
-        success: css(_templateObject6$1(), success100)
-    };
-    var iconStyles = css(_templateObject7(), type === 'info' ? "".concat(primary700) : type === 'error' ? "".concat(danger700) : type === 'success' ? "".concat(success700) : "".concat(warning700));
-    var textWrapperStyles = css(_templateObject8());
-    var truncaterButtonStyles = css(_templateObject9(), primary700, !isExpanded ? '0' : '0.25rem');
     var icon = {
         info: Info,
         warning: Warning,
@@ -2166,29 +2136,26 @@ var AlertBar = function(props) {
         success: Success
     };
     var Icon = icon[type];
-    return /*#__PURE__*/ jsxs("div", {
-        css: [
-            alertBaseStyles,
-            alertStyles[type]
-        ],
+    return /*#__PURE__*/ jsxs(AlertContainer, {
+        type: type,
+        size: size,
         children: [
-            /*#__PURE__*/ jsx(Icon, {
-                css: iconStyles
+            /*#__PURE__*/ jsx(StyledIcon, {
+                type: type,
+                children: /*#__PURE__*/ jsx(Icon, {})
             }),
-            /*#__PURE__*/ jsxs("div", {
-                css: textWrapperStyles,
+            /*#__PURE__*/ jsxs(TextWrapper, {
                 children: [
-                    /*#__PURE__*/ jsx("h1", {
-                        css: titleStyles,
+                    /*#__PURE__*/ jsx(Title, {
+                        size: size,
                         children: title
                     }),
-                    text && /*#__PURE__*/ jsxs("p", {
+                    text && /*#__PURE__*/ jsxs(Text, {
                         ref: textRef,
-                        css: textStyles,
                         children: [
                             displayText,
-                            isTooLong && /*#__PURE__*/ jsx("button", {
-                                css: truncaterButtonStyles,
+                            isTooLong && /*#__PURE__*/ jsx(TruncaterButton, {
+                                isExpanded: isExpanded,
                                 type: "button",
                                 onClick: function() {
                                     return setIsExpanded(!isExpanded);

package/package.json

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