glints-aries 4.0.386 → 4.0.387

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,6 +8,10 @@ export declare type AlertProps = {
8
8
  /** Duration of alert in miliseconds */
9
9
  duration?: number;
10
10
  zIndex?: number;
11
+ position?: {
12
+ top?: string;
13
+ right?: string;
14
+ };
11
15
  onDismissed?: () => void;
12
16
  };
13
17
  export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
@@ -17,6 +17,7 @@ export var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, ref) {
17
17
  duration = _ref$duration === void 0 ? 4000 : _ref$duration,
18
18
  children = _ref.children,
19
19
  zIndex = _ref.zIndex,
20
+ position = _ref.position,
20
21
  onDismissed = _ref.onDismissed;
21
22
  useEffect(function () {
22
23
  if (!show) {
@@ -43,7 +44,8 @@ export var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, ref) {
43
44
  role: "alert",
44
45
  "data-titled": hasTitle,
45
46
  "data-status": status || 'info',
46
- zIndex: zIndex
47
+ zIndex: zIndex,
48
+ position: position
47
49
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
48
50
  name: iconName
49
51
  })), /*#__PURE__*/React.createElement("div", null, hasTitle && /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
@@ -1,5 +1,9 @@
1
1
  export declare const StyledAlertContainer: import("styled-components").StyledComponent<"div", any, {
2
2
  zIndex?: number;
3
+ position?: {
4
+ top?: string;
5
+ right?: string;
6
+ };
3
7
  }, never>;
4
8
  export declare const StyledAlertCloseIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
9
  export declare const StyledAlertContentColumn: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -6,7 +6,13 @@ import { space12, space8 } from '../utilities/spacing';
6
6
  export var StyledAlertContainer = styled.div.withConfig({
7
7
  displayName: "AlertStyle__StyledAlertContainer",
8
8
  componentId: "sc-1e5i2kj-0"
9
- })(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], space12, space8, borderRadius4, function (props) {
9
+ })(["position:fixed;top:", ";right:", ";display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], function (props) {
10
+ var _props$position;
11
+ return (_props$position = props.position) != null && _props$position.top ? props.position.top : '90px';
12
+ }, function (props) {
13
+ var _props$position2;
14
+ return (_props$position2 = props.position) != null && _props$position2.right ? props.position.right : '24px';
15
+ }, space12, space8, borderRadius4, function (props) {
10
16
  return props.zIndex ? props.zIndex : 100;
11
17
  }, Neutral.B18, Green.B89, Green.B61, Blue.S08, Blue.S99, Orange.S21, Orange.S86, Red.B100, Red.B93, Breakpoints.large, space8);
12
18
  export var StyledAlertCloseIconContainer = styled.div.withConfig({
@@ -8,6 +8,10 @@ export declare type AlertProps = {
8
8
  /** Duration of alert in miliseconds */
9
9
  duration?: number;
10
10
  zIndex?: number;
11
+ position?: {
12
+ top?: string;
13
+ right?: string;
14
+ };
11
15
  onDismissed?: () => void;
12
16
  };
13
17
  export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
@@ -23,6 +23,7 @@ var Alert = /*#__PURE__*/_react["default"].forwardRef(function Alert(_ref, ref)
23
23
  duration = _ref$duration === void 0 ? 4000 : _ref$duration,
24
24
  children = _ref.children,
25
25
  zIndex = _ref.zIndex,
26
+ position = _ref.position,
26
27
  onDismissed = _ref.onDismissed;
27
28
  (0, _react.useEffect)(function () {
28
29
  if (!show) {
@@ -49,7 +50,8 @@ var Alert = /*#__PURE__*/_react["default"].forwardRef(function Alert(_ref, ref)
49
50
  role: "alert",
50
51
  "data-titled": hasTitle,
51
52
  "data-status": status || 'info',
52
- zIndex: zIndex
53
+ zIndex: zIndex,
54
+ position: position
53
55
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
54
56
  name: iconName
55
57
  })), /*#__PURE__*/_react["default"].createElement("div", null, hasTitle && /*#__PURE__*/_react["default"].createElement(_AlertStyle.StyledAlertContentColumn, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
@@ -1,5 +1,9 @@
1
1
  export declare const StyledAlertContainer: import("styled-components").StyledComponent<"div", any, {
2
2
  zIndex?: number;
3
+ position?: {
4
+ top?: string;
5
+ right?: string;
6
+ };
3
7
  }, never>;
4
8
  export declare const StyledAlertCloseIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
5
9
  export declare const StyledAlertContentColumn: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -13,7 +13,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
13
13
  var StyledAlertContainer = _styledComponents["default"].div.withConfig({
14
14
  displayName: "AlertStyle__StyledAlertContainer",
15
15
  componentId: "sc-1e5i2kj-0"
16
- })(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, function (props) {
16
+ })(["position:fixed;top:", ";right:", ";display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], function (props) {
17
+ var _props$position;
18
+ return (_props$position = props.position) != null && _props$position.top ? props.position.top : '90px';
19
+ }, function (props) {
20
+ var _props$position2;
21
+ return (_props$position2 = props.position) != null && _props$position2.right ? props.position.right : '24px';
22
+ }, _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, function (props) {
17
23
  return props.zIndex ? props.zIndex : 100;
18
24
  }, _colors.Neutral.B18, _colors.Green.B89, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.S99, _colors.Orange.S21, _colors.Orange.S86, _colors.Red.B100, _colors.Red.B93, Breakpoints.large, _spacing.space8);
19
25
  exports.StyledAlertContainer = StyledAlertContainer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.386",
3
+ "version": "4.0.387",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",