@superdispatch/ui-lab 0.23.4 → 0.24.0

package/dist-src/alert/Alert.js

@@ -1,18 +1,18 @@
-import { CheckCircle, Error, Info } from '@material-ui/icons';
+import { CheckCircle, Error, Info, Warning } from '@material-ui/icons';
 import { Alert as MaterialAlert } from '@material-ui/lab';
 import { Color } from '@superdispatch/ui';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-function colorMixin(textColor, backgroundColor, buttonHoverColor) {
-  return css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
+function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
+  return css(["color:", ";border-color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{color:", ";& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, textColor, backgroundColor, iconColor, iconColor, buttonHoverColor);
 }
 
 var StyledAlert = /*#__PURE__*/styled(MaterialAlert).withConfig({
   displayName: "Alert__StyledAlert",
   componentId: "SD__sc-1j6qebb-0"
-})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(Color.Green500, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red50, Color.Red400));
+})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(Color.Green500, Color.Green300, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue300, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow300, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red300, Color.Red50, Color.Red400));
 
 function toMaterialSeverity(severity) {
   return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
@@ -21,7 +21,8 @@ function toMaterialSeverity(severity) {
 var iconMapping = {
   success: /*#__PURE__*/_jsx(CheckCircle, {}),
   info: /*#__PURE__*/_jsx(Info, {}),
-  error: /*#__PURE__*/_jsx(Error, {})
+  error: /*#__PURE__*/_jsx(Error, {}),
+  warning: /*#__PURE__*/_jsx(Warning, {})
 };
 export var Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {

package/dist-src/description-line-item/DescriptionLineItem.js

@@ -0,0 +1,31 @@
+import { Color, Column, Columns } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var DottedLine = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DescriptionLineItem__DottedLine",
+  componentId: "SD__sc-1ixx5h8-0"
+})(["border-bottom:1px dotted ", ";margin:0px 8px;height:7px;"], Color.Silver400);
+export var DescriptionLineItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    title,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsxs(Columns, {
+    ref: ref,
+    align: "center",
+    children: [/*#__PURE__*/_jsx(Column, {
+      width: "content",
+      children: title
+    }), /*#__PURE__*/_jsx(Column, {
+      width: "fluid",
+      children: /*#__PURE__*/_jsx(DottedLine, {})
+    }), /*#__PURE__*/_jsx(Column, {
+      width: "content",
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DescriptionLineItem.displayName = "DescriptionLineItem";
+DescriptionLineItem.displayName = 'DescriptionLineItem';

package/dist-src/index.js

@@ -7,6 +7,7 @@ export * from "./chat/Chat.js";
 export * from "./chat/ChatMessage.js";
 export * from "./container/Container.js";
 export * from "./description-item/DescriptionItem.js";
+export * from "./description-line-item/DescriptionLineItem.js";
 export * from "./file-drop-zone/FileDropZone.js";
 export * from "./file-list-item/FileListItem.js";
 export * from "./linked-text/LinkedText.js";

package/dist-src/text-box/TextBox.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
   primary: Color.Dark500,
-  secondary: Color.Dark200,
+  secondary: Color.Dark300,
   white: Color.White,
   blue: Color.Blue300,
   green: Color.Green300,

package/dist-types/index.d.ts

@@ -7,8 +7,8 @@ import { Property } from 'csstype';
 import { ButtonBaseProps, AvatarProps, IconButtonProps, TooltipProps } from '@material-ui/core';
 import { PrimitiveDateInput } from '@superdispatch/dates';
 import { DateTime } from 'luxon';
-import { FileRejection } from 'react-dropzone';
 import { StyledComponent, DefaultTheme } from 'styled-components';
+import { FileRejection } from 'react-dropzone';
 
 declare type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
 interface AlertProps {
@@ -157,6 +157,13 @@ interface DescriptionItemProps {
 }
 declare const DescriptionItem: ForwardRefExoticComponent<DescriptionItemProps & RefAttributes<HTMLDivElement>>;
 
+declare const DottedLine: StyledComponent<"div", DefaultTheme, {}, never>;
+interface DescriptionLineItemProps {
+    title: ReactNode;
+    children: ReactNode;
+}
+declare const DescriptionLineItem: ForwardRefExoticComponent<DescriptionLineItemProps & RefAttributes<HTMLDivElement>>;
+
 declare function toBytes(input: number, unit: 'kb' | 'mb' | 'gb'): number;
 declare function formatBytes(bytes: number): string;
 interface FileDropZoneProps {
@@ -392,4 +399,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/dist-web/index.js

@@ -1,4 +1,4 @@
-import { CheckCircle, Info, Error as Error$1, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
+import { CheckCircle, Info, Error as Error$1, Warning, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
 import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
@@ -15,14 +15,14 @@ import Dropzone from 'react-dropzone';
 import { Anchorme } from 'react-anchorme';
 import { noop } from 'lodash';
 
-function colorMixin(textColor, backgroundColor, buttonHoverColor) {
-  return css(["color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, backgroundColor, textColor, buttonHoverColor);
+function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
+  return css(["color:", ";border-color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{color:", ";& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, textColor, backgroundColor, iconColor, iconColor, buttonHoverColor);
 }
 
 var StyledAlert = /*#__PURE__*/styled(Alert$1).withConfig({
   displayName: "Alert__StyledAlert",
   componentId: "SD__sc-1j6qebb-0"
-})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(Color.Green500, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red50, Color.Red400));
+})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(Color.Green500, Color.Green300, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue300, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow300, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red300, Color.Red50, Color.Red400));
 
 function toMaterialSeverity(severity) {
   return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
@@ -31,7 +31,8 @@ function toMaterialSeverity(severity) {
 var iconMapping = {
   success: /*#__PURE__*/jsx(CheckCircle, {}),
   info: /*#__PURE__*/jsx(Info, {}),
-  error: /*#__PURE__*/jsx(Error$1, {})
+  error: /*#__PURE__*/jsx(Error$1, {}),
+  warning: /*#__PURE__*/jsx(Warning, {})
 };
 var Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -677,7 +678,7 @@ var _excluded$4 = ["variant", "as", "align", "color", "display", "noWrap", "wrap
 var normalizeTextColor = /*#__PURE__*/createRuleNormalizer({
   inherit: 'inherit',
   primary: Color.Dark500,
-  secondary: Color.Dark200,
+  secondary: Color.Dark300,
   white: Color.White,
   blue: Color.Blue300,
   green: Color.Green300,
@@ -856,6 +857,33 @@ var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";
 
+var DottedLine = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DescriptionLineItem__DottedLine",
+  componentId: "SD__sc-1ixx5h8-0"
+})(["border-bottom:1px dotted ", ";margin:0px 8px;height:7px;"], Color.Silver400);
+var DescriptionLineItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    title,
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxs(Columns, {
+    ref: ref,
+    align: "center",
+    children: [/*#__PURE__*/jsx(Column, {
+      width: "content",
+      children: title
+    }), /*#__PURE__*/jsx(Column, {
+      width: "fluid",
+      children: /*#__PURE__*/jsx(DottedLine, {})
+    }), /*#__PURE__*/jsx(Column, {
+      width: "content",
+      children: children
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DescriptionLineItem.displayName = "DescriptionLineItem";
+DescriptionLineItem.displayName = 'DescriptionLineItem';
+
 var _excluded$5 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
@@ -2180,5 +2208,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, FileDropZone, FileListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, FileDropZone, FileListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map