@pedidopago/ui 1.3.1 → 1.3.4

package/dist/components/Select/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectContainer = exports.OptionsModalList = exports.OptionsModal = exports.OptionPlaceholder = void 0;
+exports.SelectContainer = exports.OptionPlaceholder = exports.Option = void 0;
 
 var _react = require("@emotion/react");
 
@@ -11,30 +11,40 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _List = _interopRequireDefault(require("../List"));
 
-var _Modal = require("../Modal");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var SelectContainer = _styled.default.div(function (props) {
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n\n    width: ", ";\n\n    ", "\n\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n\n      border-radius: ", ";\n      padding: 0 20px;\n\n      width: 100%;\n      height: 56px;\n\n      position: relative;\n\n      cursor: pointer;\n\n      color: ", ";\n\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", "\n\n      ", "\n\n      & > label {\n        position: absolute;\n        left: 20px;\n        top: 50%;\n        transform: translateY(-50%);\n\n        font-size: 1rem;\n        font-weight: 500;\n\n        color: ", ";\n\n        transition: top ease, left ease, color ease;\n        transition-duration: ", ";\n\n        ", "\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n\n        transform: rotate(0deg);\n\n        color: ", ";\n\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 14px;\n\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n\n        pointer-events: none;\n\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 16px;\n\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    // Helper text\n    & > p {\n      margin: 8px 20px;\n\n      ", "\n    }\n\n    & > input {\n      appearance: none;\n      border: 0;\n\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), typeof props.width === 'string' ? props.width : typeof props.width === 'number' ? "".concat(props.width, "px") : '100%', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:hover {\n        & > div {\n          color: ", ";\n\n          & > label {\n            color: ", ";\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n\n      &:focus {\n        & > div {\n          color: ", ";\n\n          & > svg {\n            transform: rotate(180deg);\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n            &:last-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n    "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: ", "33;\n      "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background: ", ";\n        cursor: default;\n      "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          left: 20px;\n          top: -1px;\n\n          font-size: 0.875rem;\n        "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none', props.disabled && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), props.theme.colors.neutral.neutral3));
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    outline: none;\n    user-select: none;\n    width: ", ";\n    height: ", ";\n    ", ";\n    & > div {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n      border-radius: ", ";\n      padding: 0 ", ";\n      width: 100%;\n      height: 100%;\n      position: relative;\n      cursor: pointer;\n      color: ", ";\n      transition: background-color ease;\n      transition-duration: ", ";\n\n      ", ";\n\n      ", ";\n\n      & > label {\n        position: absolute;\n        left: 20px;\n        top: 50%;\n        transform: translateY(-50%);\n        font-size: 1rem;\n        font-weight: 500;\n        color: ", ";\n        transition: top ease, left ease, color ease;\n        transition-duration: ", ";\n\n        ", "\n      }\n\n      // Chevron Down icon\n      & > svg {\n        flex-shrink: 0;\n        transform: rotate(0deg);\n        color: ", ";\n        transition: transform ease;\n        transition-duration: ", ";\n      }\n\n      & > fieldset {\n        border: 2px solid;\n        border-color: ", ";\n        border-radius: ", ";\n        padding: 0 14px;\n        position: absolute;\n        left: 0px;\n        right: 0px;\n        top: 0px;\n        bottom: 0px;\n        pointer-events: none;\n        transition: border-color ease;\n        transition-duration: ", ";\n\n        &:last-of-type {\n          border-radius: calc(", " + 2px);\n          padding: 0 16px;\n          border-color: transparent;\n          left: -2px;\n          right: -2px;\n          top: -2px;\n          bottom: -2px;\n        }\n\n        & > legend {\n          display: ", ";\n          line-height: 2px;\n          user-select: none;\n          padding: 0 4px;\n          & > span {\n            color: transparent;\n          }\n        }\n      }\n    }\n\n    // Helper text\n    & > p {\n      margin: 8px 20px;\n\n      ", "\n    }\n\n    & > input {\n      appearance: none;\n      border: 0;\n      width: 0px;\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  "])), props.size ? {
+    sm: '78px',
+    md: '100%'
+  }[props.size] : props.width, props.size ? {
+    sm: '36px',
+    md: '56px'
+  }[props.size] : '56px', !props.disabled && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:hover {\n        & > div {\n          color: ", ";\n\n          & > label {\n            color: ", ";\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n\n      &:focus {\n        & > div {\n          color: ", ";\n\n          & > svg {\n            transform: rotate(180deg);\n          }\n\n          & > fieldset {\n            &:first-of-type {\n              border-color: ", ";\n            }\n            &:last-of-type {\n              border-color: ", ";\n            }\n          }\n        }\n      }\n    "])), props.theme.colors.neutral.black, props.theme.colors.neutral.neutral5, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.hover, props.theme.colors.neutral.black, props.alert ? props.theme.colors[props.alert].default : props.theme.colors.primary.hover, props.alert ? props.theme.colors[props.alert].blurred : props.theme.colors.primary.disabled), props.theme.borderRadius.default, props.size && {
+    sm: '16px',
+    md: '20px'
+  }[props.size], props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        background: ", "33;\n      "])), props.theme.colors[props.alert].blurred), props.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        background: ", ";\n        cursor: default;\n      "])), props.theme.colors.neutral.neutral1), props.theme.colors.neutral.neutral3, props.theme.transition.speed, props.filled && (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          left: 20px;\n          top: -1px;\n          font-size: 0.875rem;\n        "]))), props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.alert && !props.disabled ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral2, props.theme.borderRadius.default, props.theme.transition.speed, props.theme.borderRadius.default, props.filled ? 'block' : 'none', props.disabled && (0, _react.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), props.theme.colors.neutral.neutral3));
 });
 
 exports.SelectContainer = SelectContainer;
-var OptionsModal = (0, _styled.default)(_Modal.Modal)(function (_ref) {
-  var theme = _ref.theme;
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    border: 2px solid ", ";\n    box-shadow: none;\n  "])), theme.colors.neutral.neutral1);
-});
-exports.OptionsModal = OptionsModal;
-var OptionsModalList = (0, _styled.default)(_List.default)(function () {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    border: none;\n  "])));
+
+var Option = _styled.default.div(function (props) {
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    box-sizing: border-box;\n    outline: none;\n    padding: ", ";\n    text-align: ", ";\n    font-weight: ", ";\n    font-size: ", ";\n    color: ", ";\n    background: transparent;\n    transition: background-color ease;\n    transition-duration: ", ";\n    cursor: pointer;\n    & > svg:first-of-type {\n      margin-right: ", ";\n    }\n    & > svg:last-of-type:not(:first-of-type) {\n      margin-left: ", ";\n    }\n    &:hover,\n    &:focus {\n      background: ", ";\n    }\n  "])), {
+    sm: '8px',
+    md: '16px 32px'
+  }[props.sizeSelect || 'md'], {
+    sm: 'center',
+    md: 'left'
+  }[props.sizeSelect || 'md'], props.theme.fontWeight['500'], props.theme.fontSizes.xs, props.theme.colors.neutral.neutral5, props.theme.transition.speed, props.theme.spacing.xxxs, props.theme.spacing.xxxs, props.theme.colors.neutral.neutral1);
 });
-exports.OptionsModalList = OptionsModalList;
-var OptionPlaceholder = (0, _styled.default)(_List.default)(function (_ref2) {
-  var theme = _ref2.theme;
-  return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), theme.colors.neutral.neutral3);
+
+exports.Option = Option;
+var OptionPlaceholder = (0, _styled.default)(_List.default)(function (_ref) {
+  var theme = _ref.theme;
+  return (0, _react.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), theme.colors.neutral.neutral3);
 });
 exports.OptionPlaceholder = OptionPlaceholder;

package/dist/components/Select/types.d.ts

@@ -3,16 +3,21 @@ export interface SelectOption {
     label: string;
     value: string;
 }
+export declare type sizeSelect = 'sm' | 'md';
 export interface SelectProps {
-    label: string;
+    label?: string;
     options: SelectOption[];
     helperText?: string;
     alert?: SelectAlertType;
+    placeholder?: string;
+    width?: string;
+    sizeSelect?: sizeSelect;
 }
 export interface SelectContainerProps {
     alert?: SelectAlertType;
     filled: boolean;
     disabled: boolean;
-    width?: string | number;
+    width?: string;
+    size?: sizeSelect;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GACvB,SAAS,GACT,OAAO,GACP,SAAS,GACT,aAAa,GACb,UAAU,GACV,mBAAmB,GACnB,mBAAmB,CAAC;AAExB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB"}

package/dist/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAsBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eA8LjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAkD,MAAM,OAAO,CAAC;AAsBjG,OAAO,EAAE,WAAW,EAAkB,MAAM,SAAS,CAAC;AAMtD,wBAAgB,KAAK,CAAC,EACpB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,MAAM,EACN,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,wBAAwB,CAAC,OAAO,CAAC,eAsMjD"}

package/dist/components/Table/index.js

@@ -206,13 +206,23 @@ function Table(_ref) {
           }), header.map(function (label) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxs",
+                color: "neutral.neutral5",
+                fontSize: "xxxs",
                 fontWeight: "600",
                 children: label
               })
             }, (0, _GenerateKey.generateKey)());
           })]
-        }), haveActions && /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {})]
+        }), haveActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+            children: !selectedRows.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              color: "neutral.neutral5",
+              fontSize: "xxxs",
+              fontWeight: "600",
+              children: "A\xE7\xF5es"
+            })
+          })
+        })]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
       children: rowsWithKey.map(function (row) {
@@ -229,7 +239,7 @@ function Table(_ref) {
           }), row.items.map(function (cell) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
               children: typeof cell === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                fontSize: "xxs",
+                fontSize: "xxxs",
                 fontWeight: "500",
                 children: cell
               }) : cell

package/dist/components/Table/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIAsGtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAoExB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAsB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HA6B3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Table/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,eAAO,MAAM,WAAW;;;uIA0GtB,CAAC;AAEH,eAAO,MAAM,cAAc;;;yGAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;0IAmExB,CAAC;AAEH,eAAO,MAAM,eAAe;;;yGAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;0IAiBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;yGAiB7B,CAAC;AAEF,eAAO,MAAM,eAAe;;;8HA6B3B,CAAC"}

package/dist/components/Table/styles.js

@@ -17,13 +17,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var StyledTable = _styled.default.table(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: hsla(156, 13%, 92%, 0.5);\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n          * {\n            color: #587169;\n            font-size: ", ";\n          }\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 4px 0px 0px 4px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 4px 4px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), {
-    dark: theme.colors.neutral.neutral5,
-    light: theme.colors.neutral.neutral2
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    border-spacing: 0px;\n\n    & > thead {\n      & > tr {\n        height: 64px;\n\n        & > th {\n          background: ", ";\n          border-top: 1px solid\n            ", ";\n          border-bottom: 1px solid\n            ", ";\n          padding-left: 16px;\n          padding-right: 16px;\n          text-align: left;\n\n          &:first-of-type {\n            border-left: 1px solid\n              ", ";\n            border-radius: 8px 0px 0px 0px;\n          }\n\n          &:last-child {\n            border-right: 1px solid\n              ", ";\n            border-radius: 0px 8px 0px 0px;\n          }\n        }\n      }\n    }\n\n    & > tbody {\n      tr {\n        height: 64px;\n        &:nth-of-type(even) {\n          background: ", ";\n        }\n        &:not(:last-child) {\n          & > td {\n            border-bottom: 1px solid\n              ", ";\n          }\n        }\n\n        &:hover {\n          & > td {\n            background: ", ";\n\n            &:first-of-type {\n              border-radius: 4px 0px 0px 4px;\n            }\n\n            &:last-child {\n              border-radius: 0px 4px 4px 0px;\n            }\n          }\n        }\n\n        &:focus {\n          outline: 2px solid ", ";\n          border-radius: 4px;\n        }\n\n        &[data-selected='true'] {\n          & > td {\n            background: ", ";\n          }\n        }\n\n        & > td {\n          padding-left: 16px;\n          padding-right: 16px;\n\n          text-align: left;\n\n          color: ", ";\n        }\n      }\n    }\n  "])), {
+    dark: "hsla(156, 13%, 92%, 0.05)",
+    light: "hsla(156, 13%, 92%, 0.5)"
   }[theme.colorMode], {
     dark: theme.colors.neutral.neutral5,
     light: theme.colors.neutral.neutral2
-  }[theme.colorMode], theme.fontSizes.xxxs, {
+  }[theme.colorMode], {
     dark: theme.colors.neutral.neutral5,
     light: theme.colors.neutral.neutral2
   }[theme.colorMode], {
@@ -32,6 +32,12 @@ var StyledTable = _styled.default.table(function (props) {
   }[theme.colorMode], {
     dark: theme.colors.neutral.neutral5,
     light: theme.colors.neutral.neutral2
+  }[theme.colorMode], {
+    dark: "hsla(150, 16%, 97%, 0.02)",
+    light: "hsla(150, 16%, 97%, 0.75)"
+  }[theme.colorMode], {
+    dark: 'hsla(161, 12%, 31%, 0.5)',
+    light: theme.colors.neutral.neutral1
   }[theme.colorMode], {
     dark: theme.colors.neutral.neutral6,
     light: theme.colors.neutral.neutral1
@@ -49,7 +55,7 @@ exports.SelectedHeader = SelectedHeader;
 
 var ActionsButton = _styled.default.button(function (props) {
   var theme = props.theme;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    appearance: none;\n    font-family: inherit;\n\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    margin: 0px -2px 0px 0px;\n    outline: none;\n    border: 2px solid\n      ", ";\n    padding: 0px 24px;\n    height: 44px;\n\n    white-space: nowrap;\n\n    color: ", ";\n    background: ", ";\n\n    transition: background-color linear ", ";\n\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:first-of-type {\n      color: ", ";\n      border-radius: 8px 0px 0px 8px;\n    }\n\n    &:last-of-type {\n      border-radius: 0px 8px 8px 0px;\n    }\n\n    &:only-child {\n      border-radius: 8px;\n    }\n\n    &:hover,\n    &:focus {\n      z-index: 1;\n\n      border-color: ", ";\n      background: ", ";\n    }\n\n    &:active {\n      background: ", ";\n    }\n  "])), {
     dark: theme.colors.neutral.neutral4,
     light: theme.colors.neutral.neutral2
   }[theme.colorMode], theme.colors.neutral.neutral5, {
@@ -85,10 +91,7 @@ var MenuItemContainer = _styled.default.div(_templateObject6 || (_templateObject
   return props.isOpen ? 'block' : 'none';
 }, function (_ref) {
   var theme = _ref.theme;
-  return {
-    dark: theme.colors.neutral.neutral6,
-    light: theme.colors.neutral.neutral1
-  }[theme.colorMode];
+  return theme.colors.neutral.white;
 }, function (props) {
   return props.posRight ? props.posRight : 0;
 }, function (props) {

package/dist/components/Toast/components/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,CA2E1B,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/components/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAOtC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhD,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,WAAW,CAyE1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Toast/components/Toast.js

@@ -23,12 +23,12 @@ var Toast = function Toast(_ref) {
   var type = _ref.type,
       close = _ref.close,
       duration = _ref.duration,
-      message = _ref.message,
+      content = _ref.content,
+      icon = _ref.icon,
       id = _ref.toastId,
-      buttonTitle = _ref.buttonTitle,
-      onButtonClick = _ref.onButtonClick,
       title = _ref.title,
-      position = _ref.position;
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'top-right' : _ref$position;
   (0, _react.useEffect)(function () {
     var timer = setTimeout(function () {
       close(id);
@@ -73,12 +73,11 @@ var Toast = function Toast(_ref) {
     className: "pp-toast-".concat(position),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledToastComponent, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-        message: message,
+        content: content,
         title: title,
+        icon: icon,
         variant: "closable",
         type: type,
-        buttonTitle: buttonTitle,
-        onButtonClick: onButtonClick,
         onClose: handleCloseButtonClick
       })
     })

package/dist/components/Toast/contexts/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/contexts/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAyB,MAAM,OAAO,CAAC;AAGjE,OAAO,EAA4B,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,YAAY,6CAA0C,CAAC;AAEpE,QAAA,MAAM,aAAa,EAAE,EAiCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/contexts/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAyB,MAAM,OAAO,CAAC;AAGjE,OAAO,EAA4B,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,YAAY,6CAA0C,CAAC;AAEpE,QAAA,MAAM,aAAa,EAAE,EAmCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Toast/contexts/ToastProvider.js

@@ -53,9 +53,11 @@ var ToastProvider = function ToastProvider(_ref) {
   var addToast = function addToast(options) {
     var toastOptions = {
       config: _objectSpread(_objectSpread({}, options), {}, {
+        icon: options.icon || 'info',
         duration: options.duration || 5000,
         type: options.type || 'default',
-        position: options.position || 'bottom'
+        position: options.position || 'bottom',
+        onClose: options.onClose || undefined
       }),
       id: Math.random().toString(36).substring(2, 9)
     };

package/dist/components/Toast/toast.test.js

@@ -28,7 +28,7 @@ describe('Toast', function () {
   it('should it render the toast on the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success'
     });
     container.getByText('Show toast').click();
@@ -37,7 +37,7 @@ describe('Toast', function () {
   it('should it render the toast on position top of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'top'
     });
@@ -47,7 +47,7 @@ describe('Toast', function () {
   it('should it render the toast on position top-left of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'top-left'
     });
@@ -57,7 +57,7 @@ describe('Toast', function () {
   it('should it render the toast on position top-right of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'top-right'
     });
@@ -67,7 +67,7 @@ describe('Toast', function () {
   it('should it render the toast on position bottom of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'bottom'
     });
@@ -77,7 +77,7 @@ describe('Toast', function () {
   it('should it render the toast on position bottom-left of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'bottom-left'
     });
@@ -87,7 +87,7 @@ describe('Toast', function () {
   it('should it render the toast on position bottom-right of the screen', function () {
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       position: 'bottom-right'
     });
@@ -99,7 +99,7 @@ describe('Toast', function () {
 
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success'
     });
     container.getByText('Show toast').click();
@@ -114,7 +114,7 @@ describe('Toast', function () {
     var onClose = jest.fn();
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       onClose: onClose
     });
@@ -128,7 +128,7 @@ describe('Toast', function () {
     var onClose = jest.fn();
     var container = setup({
       title: 'Toast Title',
-      message: 'Toast Message',
+      content: 'Toast Message',
       type: 'success',
       onClose: onClose
     });

package/dist/components/Toast/types.d.ts

@@ -1,28 +1,21 @@
+import { ReactNode } from 'react';
+import { IconName } from '../Icon/types';
 export declare type IToastConfig = {
     title: string;
-    message: string;
+    content: ReactNode;
     position?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
     type?: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    buttonTitle?: string;
-    onButtonClick?: () => void;
     duration?: number;
-    onClose?: (id: string) => void;
-};
-export declare type IToastConfigOnList = {
-    title: string;
-    message: string;
-    position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
-    type: 'default' | 'success' | 'warning' | 'error' | 'critical';
-    buttonTitle?: string;
-    onButtonClick?: () => void;
-    duration: number;
+    icon?: IconName;
     onClose?: (id: string) => void;
 };
 export declare type IToastList = {
     id: string;
-    config: IToastConfigOnList;
+    config: Required<Omit<IToastConfig, 'onClose'>> & {
+        onClose?: (id: string) => void;
+    };
 };
-export declare type Toast = IToastConfigOnList & {
+export declare type Toast = IToastConfig & {
     toastId: string;
     close: (id: string) => void;
 };

package/dist/components/Toast/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/types.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;IACxF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;IACvF,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,kBAAkB,CAAC;CAC5B,CAAC;AAEF,oBAAY,KAAK,GAAG,kBAAkB,GAAG;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;IACxF,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,GAAG;QAChD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;KAChC,CAAC;CACH,CAAC;AAEF,oBAAY,KAAK,GAAG,YAAY,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7B,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAC;CACtB,CAAC"}

package/dist/components/Tooltip/components/TooltipLabel.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TooltipLabelProps } from '../types';
+export declare function TooltipLabel({ tooltipPositions, handleRepositionTooltip, animationDuration, ...rest }: TooltipLabelProps): JSX.Element;
+//# sourceMappingURL=TooltipLabel.d.ts.map

package/dist/components/Tooltip/components/TooltipLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/components/TooltipLabel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE7C,wBAAgB,YAAY,CAAC,EAC3B,gBAAgB,EAChB,uBAAuB,EACvB,iBAAuB,EACvB,GAAG,IAAI,EACR,EAAE,iBAAiB,eAgCnB"}

package/dist/components/Tooltip/components/TooltipLabel.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipLabel = TooltipLabel;
+
+var _react = require("react");
+
+var _styles = require("../styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["tooltipPositions", "handleRepositionTooltip", "animationDuration"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function TooltipLabel(_ref) {
+  var tooltipPositions = _ref.tooltipPositions,
+      handleRepositionTooltip = _ref.handleRepositionTooltip,
+      _ref$animationDuratio = _ref.animationDuration,
+      animationDuration = _ref$animationDuratio === void 0 ? 0.2 : _ref$animationDuratio,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var labelRef = (0, _react.useRef)(null);
+  var animations = {
+    enter: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (labelRef.current) {
+      handleRepositionTooltip(labelRef.current);
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledTooltipLabel, _objectSpread(_objectSpread({
+    ref: labelRef,
+    initial: animations.exit,
+    animate: animations.enter,
+    exit: animations.exit,
+    transition: {
+      duration: animationDuration
+    },
+    style: tooltipPositions
+  }, rest), {}, {
+    children: rest.label
+  }));
+}

package/dist/components/Tooltip/index.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { IInputProps } from './types';
-declare const Tooltip: FC<IInputProps>;
+import { TooltipProps } from './types';
+declare const Tooltip: FC<TooltipProps>;
 export default Tooltip;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAoF5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAoB,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAuF7B,CAAC;AAEF,eAAe,OAAO,CAAC"}