@ndlib/component-library 0.0.105 → 0.0.106

package/dist/components/elements/Alerts/Alerts.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Alerts>;
 export default meta;
 type Story = StoryObj<typeof Alerts>;
 export declare const Default: Story;
+export declare const CustomizeAlertStyles: Story;

package/dist/components/elements/Alerts/Alerts.stories.js

@@ -10,3 +10,6 @@ export default meta;
 export const Default = {
     render: () => (_jsx(AlertsProvider, Object.assign({ startTime: new Date('2022-01-01').toISOString(), endTime: new Date('2022-01-01').toISOString(), endpoint: "http://localhost:1337/graphql" }, { children: _jsx(Alerts, {}) }))),
 };
+export const CustomizeAlertStyles = {
+    render: () => (_jsx(AlertsProvider, Object.assign({ startTime: new Date('2022-01-01').toISOString(), endTime: new Date('2022-01-01').toISOString(), endpoint: "http://localhost:1337/graphql" }, { children: _jsx(Alerts, { alertStyles: { borderRadius: '0px' } }) }))),
+};

package/dist/components/elements/Alerts/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ALERT_TYPE } from '../../providers/alerts';
-import { StyledElementProps } from '../../../theme';
+import { StyledElementProps, StylesProp } from '../../../theme';
 type AlertsProps = StyledElementProps<HTMLDivElement, {
     pageAlerts?: string[];
+    alertStyles?: StylesProp;
 }>;
 export declare const Alerts: React.FC<AlertsProps>;
 type AlertProps = StyledElementProps<HTMLDivElement, {

package/dist/components/elements/Alerts/index.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import _WarningIcon from '@mui/icons-material/Warning';
 import _InfoIcon from '@mui/icons-material/Info';
 import _SuccessIcon from '@mui/icons-material/CheckCircle';
@@ -22,17 +22,16 @@ import { useAlerts, ALERT_TYPE } from '../../providers/alerts';
 import { useTheme } from '../../../theme';
 import { BUTTON_TYPE, Button } from '../Button';
 import { importedDefaultComponentShim } from '../../../utils/misc';
+import { Box } from '../layout/Box';
 const WarningIcon = importedDefaultComponentShim(_WarningIcon);
 const InfoIcon = importedDefaultComponentShim(_InfoIcon);
 const SuccessIcon = importedDefaultComponentShim(_SuccessIcon);
 export const Alerts = (_a) => {
-    var { pageAlerts } = _a, rest = __rest(_a, ["pageAlerts"]);
+    var { pageAlerts, alertStyles } = _a, rest = __rest(_a, ["pageAlerts", "alertStyles"]);
     const { alerts, dismiss } = useAlerts(pageAlerts);
-    return (_jsx("div", Object.assign({}, rest, { children: alerts.map((alert, i) => {
+    return (_jsx(Box, Object.assign({}, rest, { children: alerts.map((alert, i) => {
             const { type, description } = alert;
-            return (_jsx(Alert, { type: type, description: description, css: {
-                    marginTop: i ? '4px' : 0,
-                }, dismiss: () => {
+            return (_jsx(Alert, { type: type, description: description, sx: Object.assign({ mt: i ? '4px' : 0 }, alertStyles), dismiss: () => {
                     dismiss(alert.uuid);
                 } }, i));
         }) })));
@@ -44,7 +43,6 @@ export const Alert = (_a) => {
         backgroundColor: COLOR.ALERT_INFORMATIONAL_BG,
         boxShadow: theme.boxShadow.NORMAL,
         border: '2px solid',
-        borderRadius: '4px',
         borderColor: COLOR.ALERT_INFORMATIONAL_BORDER,
         m: 0,
         p: '1rem',
@@ -73,9 +71,5 @@ export const Alert = (_a) => {
                 pl: '.5rem',
                 pr: '.5rem',
                 width: '100%',
-                '@media screen and (min-width: 1212px)': {
-                    maxWidth: '1200px',
-                    padding: '0',
-                },
             } }, { children: [icon && _jsx(Icon, { icon: icon, sx: { mr: 4 }, size: FONT_SIZE.LG }), _jsx(Row, Object.assign({ sx: { flexGrow: 1, justifyContent: 'center' } }, { children: _jsx(Markdown, { content: description }) })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: dismiss, sx: { ml: 4 } }, { children: "Dismiss" }))] })) })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.105",
+  "version": "0.0.106",
   "type": "module",
   "sideEffects": false,
   "files": [