@superdispatch/ui-lab 0.15.0 → 0.16.0-alpha.0

package/dist-src/index.js

@@ -1,3 +1,4 @@
+import * as v5 from "./v5/index.js";
 export * from "./alert/Alert.js";
 export * from "./banner/Banner.js";
 export * from "./box/Box.js";
@@ -13,4 +14,5 @@ export * from "./sidebar/SidebarMenuItem.js";
 export * from "./sidebar/SidebarMenuItemAction.js";
 export * from "./sidebar/SidebarMenuItemAvatar.js";
 export * from "./sidebar/SidebarSubheader.js";
-export * from "./text-box/TextBox.js";
+export * from "./text-box/TextBox.js";
+export { v5 };

package/dist-src/v5/alert/Alert.js

@@ -0,0 +1,43 @@
+import { CheckCircle, Error, Info } from '@mui/icons-material';
+import { Alert as MaterialAlert } from '@mui/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);
+}
+
+var StyledAlert = /*#__PURE__*/styled(MaterialAlert).withConfig({
+  displayName: "Alert__StyledAlert",
+  componentId: "SD__sc-ahws81-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));
+
+function toMaterialSeverity(severity) {
+  return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
+}
+
+var iconMapping = {
+  success: /*#__PURE__*/_jsx(CheckCircle, {}),
+  info: /*#__PURE__*/_jsx(Info, {}),
+  error: /*#__PURE__*/_jsx(Error, {})
+};
+export var Alert = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children,
+    onClose: _onClose,
+    severity = 'positive'
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledAlert, {
+    ref: ref,
+    variant: "outlined",
+    iconMapping: iconMapping,
+    severity: toMaterialSeverity(severity),
+    onClose: () => {
+      _onClose === null || _onClose === void 0 ? void 0 : _onClose();
+    },
+    children: children
+  });
+});
+if (process.env.NODE_ENV !== "production") Alert.displayName = "Alert";

package/dist-src/v5/banner/Banner.js

@@ -0,0 +1,61 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"],
+    _excluded2 = ["in"];
+import { Color } from '@superdispatch/ui';
+import { forwardRef, useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group'; // eslint-disable-next-line import/no-internal-modules
+
+import styled, { css, keyframes } from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function enterMixin(border) {
+  return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color.Dark500, Color.White, border);
+}
+
+function enterAnimation(border) {
+  return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], Color.White, Color.Dark500, Color.White, Color.Dark500, Color.White, Color.Dark500, enterMixin(border));
+}
+
+var CustomTransition = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    timeout: 3000,
+    classNames: props.className,
+    children: /*#__PURE__*/_jsx("div", {
+      children: children
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") CustomTransition.displayName = "CustomTransition";
+var BannerContent = /*#__PURE__*/styled(CustomTransition).withConfig({
+  displayName: "Banner__BannerContent",
+  componentId: "SD__sc-1y16295-0"
+})(_ref2 => {
+  var {
+    border = 'bottom'
+  } = _ref2;
+  return css(["height:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;color:", ";background-color:", ";&-enter-active{animation:", " 2s 1s forwards;}&-enter-done{", ";}&-exit{", ";}&-exit-active{min-height:0;transition:min-height 2s 1s;}"], Color.White, Color.White, enterAnimation(border), enterMixin(border), enterMixin(border));
+});
+export var Banner = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  var {
+    in: inProp
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  var [isIn, setIn] = useState(false); // transition is not triggered on initial render with `in: true`
+
+  useEffect(() => {
+    setIn(!!inProp);
+  }, [inProp]);
+  return /*#__PURE__*/_jsx(BannerContent, _objectSpread({
+    ref: ref,
+    in: isIn
+  }, props));
+});
+if (process.env.NODE_ENV !== "production") Banner.displayName = "Banner";

package/dist-src/v5/box/Box.js

@@ -0,0 +1,153 @@
+import { v5 } from '@superdispatch/ui';
+import styled from 'styled-components';
+import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
+var {
+  Color,
+  isColorProp,
+  parseResponsiveProp,
+  parseSpaceProp
+} = v5;
+
+//
+// Colors
+//
+function normalizeColor(input) {
+  return isColorProp(input) ? Color[input] : undefined;
+} //
+// Space
+//
+
+
+function parseSpace(space) {
+  return "".concat(parseSpaceProp(space), "px");
+} //
+// Margins
+//
+
+
+function parseMargin(input) {
+  if (input === 'auto') return input;
+  var prefix = '';
+
+  if (typeof input == 'string' && input.startsWith('-')) {
+    prefix = '-';
+    input = input.slice(1);
+  }
+
+  return prefix + parseSpace(input);
+} //
+// Borders
+//
+
+
+var normalizeBorderRadius = /*#__PURE__*/createRuleNormalizer({
+  none: 0,
+  small: 4
+});
+var normalizeBorderWidth = /*#__PURE__*/createRuleNormalizer({
+  none: 0,
+  small: 1,
+  medium: 2,
+  large: 4
+}); //
+// Rules
+//
+
+var normalizers = {
+  display: undefined,
+  color: normalizeColor,
+  backgroundColor: normalizeColor,
+  borderColor: normalizeColor,
+  borderTopColor: normalizeColor,
+  borderLeftColor: normalizeColor,
+  borderRightColor: normalizeColor,
+  borderBottomColor: normalizeColor,
+  borderWidth: normalizeBorderWidth,
+  borderTopWidth: normalizeBorderWidth,
+  borderLeftWidth: normalizeBorderWidth,
+  borderRightWidth: normalizeBorderWidth,
+  borderBottomWidth: normalizeBorderWidth,
+  margin: parseMargin,
+  marginTop: parseMargin,
+  marginLeft: parseMargin,
+  marginRight: parseMargin,
+  marginBottom: parseMargin,
+  padding: parseSpace,
+  paddingTop: parseSpace,
+  paddingLeft: parseSpace,
+  paddingRight: parseSpace,
+  paddingBottom: parseSpace,
+  borderRadius: normalizeBorderRadius,
+  borderTopLeftRadius: normalizeBorderRadius,
+  borderTopRightRadius: normalizeBorderRadius,
+  borderBottomLeftRadius: normalizeBorderRadius,
+  borderBottomRightRadius: normalizeBorderRadius,
+  fontSize: undefined,
+  width: undefined,
+  maxWidth: undefined,
+  minWidth: undefined,
+  height: undefined,
+  maxHeight: undefined,
+  minHeight: undefined,
+  overflow: undefined,
+  overflowY: undefined,
+  overflowX: undefined,
+  top: undefined,
+  left: undefined,
+  right: undefined,
+  bottom: undefined,
+  position: undefined
+};
+
+function injectRule(styles, key, breakpoint, value, normalizer) {
+  if (normalizer != null) value = normalizer(value);
+
+  if (value != null) {
+    var rules = styles[breakpoint];
+
+    if (typeof rules != 'object') {
+      rules = {};
+      styles[breakpoint] = rules;
+    }
+
+    rules[key] = String(value);
+  }
+} //
+// Box
+//
+
+
+export var Box = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Box",
+  componentId: "SD__sc-1cy411s-0"
+})(props => {
+  var {
+    breakpoints
+  } = props.theme;
+  var xs = breakpoints.up('xs');
+  var sm = breakpoints.up('sm');
+  var md = breakpoints.up('md');
+  var styles = {
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderStyle: 'solid'
+  };
+
+  for (var k in props) {
+    if (Object.prototype.hasOwnProperty.call(props, k) && k in normalizers) {
+      var key = k;
+      var prop = props[key];
+
+      if (prop != null) {
+        var [mobile, tablet, desktop] = parseResponsiveProp(prop);
+        var normalizer = normalizers[key];
+        injectRule(styles, key, xs, mobile, normalizer);
+        injectRule(styles, key, sm, tablet, normalizer);
+        injectRule(styles, key, md, desktop, normalizer);
+      }
+    }
+  }
+
+  return styles;
+});

package/dist-src/v5/button/Button.js

@@ -0,0 +1,227 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
+    _excluded2 = ["type"],
+    _excluded3 = ["href", "target"];
+import { CircularProgress } from '@mui/material';
+import { Color } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+function createButtonVariables(size, _ref) {
+  var {
+    fontSize = size === 'large' ? 16 : 14,
+    lineHeight = size === 'large' ? 24 : 20,
+    fontSizeMobile = size === 'large' ? 18 : 16,
+    lineHeightMobile = size === 'large' ? 28 : 24,
+    paddingX = size === 'large' ? 32 : 16,
+    paddingY = size === 'large' ? 8 : size === 'small' ? 2 : 6,
+    paddingXMobile = size === 'large' ? 64 : 24,
+    paddingYMobile = size === 'large' ? 14 : size === 'small' ? 4 : 10,
+    textColor = Color.Transparent,
+    textColorHovered = textColor,
+    textColorDisabled = textColor,
+    outlineColor = Color.Transparent,
+    borderColor = Color.Transparent,
+    borderColorHovered = borderColor,
+    borderColorDisabled = borderColor,
+    backgroundColor = Color.Transparent,
+    backgroundColorHovered = backgroundColor,
+    backgroundColorActive = backgroundColorHovered,
+    backgroundColorDisabled = backgroundColor
+  } = _ref;
+  return {
+    paddingX,
+    paddingY,
+    fontSize,
+    lineHeight,
+    paddingXMobile,
+    paddingYMobile,
+    fontSizeMobile,
+    lineHeightMobile,
+    textColor,
+    borderColor,
+    outlineColor,
+    backgroundColor,
+    textColorHovered,
+    borderColorHovered,
+    backgroundColorHovered,
+    backgroundColorActive,
+    textColorDisabled,
+    borderColorDisabled,
+    backgroundColorDisabled
+  };
+}
+
+function getDefaultVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.White,
+    outlineColor: Color.Blue100,
+    backgroundColor: Color.Blue300,
+    textColorHovered: Color.White,
+    backgroundColorHovered: Color.Blue500,
+    backgroundColorActive: Color.Blue400,
+    backgroundColorDisabled: Color.Blue100
+  });
+}
+
+function getPrimaryVariables(size) {
+  return getDefaultVariables(size);
+}
+
+function getNeutralVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.Dark500,
+    borderColor: Color.Silver500,
+    outlineColor: Color.Blue100,
+    backgroundColor: Color.White,
+    textColorHovered: Color.Blue300,
+    borderColorHovered: Color.Blue300,
+    backgroundColorHovered: Color.Blue50,
+    backgroundColorActive: Color.Blue75,
+    textColorDisabled: Color.Silver500
+  });
+}
+
+function getCriticalVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.Red300,
+    borderColor: Color.Red300,
+    outlineColor: Color.Red75,
+    backgroundColor: Color.Red50,
+    backgroundColorHovered: Color.Red75,
+    backgroundColorActive: Color.Red100,
+    textColorDisabled: Color.Red100,
+    borderColorDisabled: Color.Red100,
+    backgroundColorDisabled: Color.Red50
+  });
+}
+
+function getTextVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.Blue400,
+    outlineColor: Color.Blue100,
+    textColorHovered: Color.Blue500,
+    backgroundColorHovered: Color.Blue50,
+    backgroundColorActive: Color.Blue75,
+    textColorDisabled: Color.Blue100
+  });
+}
+
+function getInvertedVariables(size) {
+  return createButtonVariables(size, {
+    textColor: Color.White,
+    outlineColor: Color.White40,
+    backgroundColor: Color.White20,
+    textColorHovered: Color.White,
+    backgroundColorHovered: Color.White40,
+    backgroundColorActive: Color.White20,
+    textColorDisabled: Color.White50,
+    backgroundColorDisabled: Color.White08
+  });
+}
+
+var ButtonRoot = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Button__ButtonRoot",
+  componentId: "SD__sc-1yjd62w-0"
+})(_ref2 => {
+  var {
+    size,
+    theme,
+    variant,
+    fullWidth
+  } = _ref2;
+  var variables = variant === 'primary' ? getPrimaryVariables(size) : variant === 'neutral' ? getNeutralVariables(size) : variant === 'critical' ? getCriticalVariables(size) : variant === 'text' ? getTextVariables(size) : variant === 'inverted' ? getInvertedVariables(size) : getDefaultVariables(size);
+  return css(JSON.parse('["border:0;margin:0;outline:0;position:relative;vertical-align:middle;cursor:pointer;text-decoration:none;&[aria-disabled=\'true\']{cursor:default;pointer-events:none;}-moz-appearance:none;&::-moz-focus-inner{border-style:none;}-webkit-appearance:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;@media print{-webkit-print-color-adjust:exact;}--button-visibility:visible;--button-text-color:",";--button-border-color:",";--button-outline-color:",";--button-background-color:",";--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;","{--button-padding-x:","px;--button-padding-y:","px;--button-font-size:","px;--button-line-height:","px;}&[aria-disabled=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";&[aria-busy=\'true\']{--button-visibility:hidden;}}&[aria-disabled=\'false\']{&[aria-expanded=\'true\']{--button-text-color:",";--button-border-color:",";--button-background-color:",";}&,&[aria-expanded=\'true\']{&:focus{--button-outline-color:",";}@media (hover:hover) and (pointer:fine){&:hover{--button-text-color:",";--button-border-color:",";--button-background-color:",";}}&:active{--button-background-color:",";}}}display:inline-flex;align-items:center;justify-content:center;min-width:48px;width:",";border-radius:4px;font-family:",";font-weight:",";color:var(--button-text-color);background-color:var(--button-background-color);font-size:var(--button-font-size);line-height:var(--button-line-height);padding:var(--button-padding-y) var(--button-padding-x);box-shadow:inset 0 0 0 1px var(--button-border-color),0 0 0 2px var(--button-outline-color);transition:",";"]'), variables.textColor, variables.borderColor, Color.Transparent, variables.backgroundColor, variables.paddingXMobile, variables.paddingYMobile, variables.fontSizeMobile, variables.lineHeightMobile, theme.breakpoints.up('sm'), variables.paddingX, variables.paddingY, variables.fontSize, variables.lineHeight, variables.textColorDisabled, variables.borderColorDisabled, variables.backgroundColorDisabled, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.outlineColor, variables.textColorHovered, variables.borderColorHovered, variables.backgroundColorHovered, variables.backgroundColorActive, fullWidth ? '100%' : 'auto', theme.typography.fontFamily, theme.typography.fontWeightBold, theme.transitions.create(['color', 'box-shadow', 'background-color']));
+});
+var ButtonLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Button__ButtonLabel",
+  componentId: "SD__sc-1yjd62w-1"
+})(["display:inherit;align-items:inherit;justify-content:inherit;visibility:var(--button-visibility);--mui-svg-icon-size:var(--button-line-height);"]);
+var ButtonStartIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Button__ButtonStartIcon",
+  componentId: "SD__sc-1yjd62w-2"
+})(["margin-right:4px;"]);
+var ButtonEndIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Button__ButtonEndIcon",
+  componentId: "SD__sc-1yjd62w-3"
+})(["margin-left:4px;"]);
+var ButtonPendingIndicator = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Button__ButtonPendingIndicator",
+  componentId: "SD__sc-1yjd62w-4"
+})(["left:50%;display:flex;position:absolute;visibility:visible;transform:translate(-50%);"]);
+
+function useButtonProps(_ref3) {
+  var {
+    children,
+    endIcon,
+    startIcon,
+    tabIndex: tabIndexProp = 0,
+    active = false,
+    pending = false,
+    disabled: disabledProp = false,
+    size = 'medium',
+    fullWidth = false,
+    variant = 'default'
+  } = _ref3,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
+  var disabled = pending || disabledProp;
+  var tabIndex = disabled ? -1 : tabIndexProp;
+  return _objectSpread(_objectSpread({}, props), {}, {
+    size,
+    variant,
+    fullWidth,
+    tabIndex,
+    disabled,
+    'aria-busy': pending,
+    'aria-expanded': active,
+    'aria-disabled': disabled,
+    children: /*#__PURE__*/_jsxs(ButtonLabel, {
+      children: [!!startIcon && /*#__PURE__*/_jsx(ButtonStartIcon, {
+        children: startIcon
+      }), children, !!endIcon && /*#__PURE__*/_jsx(ButtonEndIcon, {
+        children: endIcon
+      }), pending && /*#__PURE__*/_jsx(ButtonPendingIndicator, {
+        children: /*#__PURE__*/_jsx(CircularProgress, {
+          size: "1em",
+          color: "inherit"
+        })
+      })]
+    })
+  });
+}
+
+export var Button = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  var {
+    type = 'button'
+  } = _ref4,
+      props = _objectWithoutProperties(_ref4, _excluded2);
+
+  var buttonProps = useButtonProps(props);
+  return /*#__PURE__*/_jsx(ButtonRoot, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    ref: ref,
+    type: type
+  }));
+});
+if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
+export var AnchorButton = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  var {
+    href,
+    target
+  } = _ref5,
+      props = _objectWithoutProperties(_ref5, _excluded3);
+
+  var buttonProps = useButtonProps(props);
+  var rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+  return /*#__PURE__*/_jsx(ButtonRoot, _objectSpread(_objectSpread({}, buttonProps), {}, {
+    as: "a",
+    ref: ref,
+    rel: rel,
+    href: href,
+    target: target
+  }));
+});
+if (process.env.NODE_ENV !== "production") AnchorButton.displayName = "AnchorButton";

package/dist-src/v5/button-area/ButtonArea.js

@@ -0,0 +1,48 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["icon", "children", "variant", "active", "disabled", "fullWidth"];
+import { ButtonBase, Typography } from '@mui/material';
+import { v5 } 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";
+var {
+  Color,
+  Stack
+} = v5;
+var ButtonRoot = /*#__PURE__*/styled(ButtonBase).withConfig({
+  displayName: "ButtonArea__ButtonRoot",
+  componentId: "SD__sc-5sq1bg-0"
+})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], Color.Silver500, Color.Dark100, Color.White, Color.Silver500, Color.Silver400, Color.Green300, Color.Green100, Color.Green300, Color.Green300, Color.Green300, Color.Green50, Color.Red300, Color.Red100, Color.Red300, Color.Red300, Color.Red300, Color.Red50);
+export var ButtonArea = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    icon,
+    children,
+    variant,
+    active,
+    disabled,
+    fullWidth
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(ButtonRoot, _objectSpread(_objectSpread({
+    ref: ref,
+    disabled: disabled,
+    "data-active": active,
+    "data-disabled": disabled,
+    "data-variant": variant,
+    "data-full-width": fullWidth
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(Stack, {
+      align: "center",
+      space: "xxsmall",
+      children: [icon, /*#__PURE__*/_jsx(Typography, {
+        variant: "h4",
+        color: disabled ? 'inherit' : 'textPrimary',
+        children: children
+      })]
+    })
+  }));
+});
+if (process.env.NODE_ENV !== "production") ButtonArea.displayName = "ButtonArea";

package/dist-src/v5/description-item/DescriptionItem.js

@@ -0,0 +1,75 @@
+import { v5 } from '@superdispatch/ui';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { TextBox } from "../text-box/TextBox.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var {
+  Color,
+  Column,
+  Columns,
+  Inline,
+  isEmptyReactNode,
+  useUID
+} = v5;
+
+function descriptionItemIconMixin(size) {
+  return css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
+}
+
+var DescriptionItemIcon = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DescriptionItem__DescriptionItemIcon",
+  componentId: "SD__sc-l1c918-0"
+})(_ref => {
+  var {
+    theme
+  } = _ref;
+  return css(["display:flex;align-items:center;& > .MuiSvgIcon-root{color:", ";}", ";", "{", ";}"], Color.Dark100, descriptionItemIconMixin(20), theme.breakpoints.up('sm'), descriptionItemIconMixin(16));
+});
+export var DescriptionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    icon,
+    wrap,
+    inset,
+    label,
+    children,
+    fallback,
+    id: idProp,
+    'aria-label': ariaLabel
+  } = _ref2;
+  var id = useUID(idProp);
+  var labelID = "".concat(id, "-label");
+  var isEmptyChildren = isEmptyReactNode(children);
+  return /*#__PURE__*/_jsxs(Columns, {
+    id: id,
+    ref: ref,
+    space: "xsmall",
+    "aria-label": ariaLabel,
+    children: [!!(icon || inset) && /*#__PURE__*/_jsx(Column, {
+      width: "content",
+      children: /*#__PURE__*/_jsx(DescriptionItemIcon, {
+        children: icon
+      })
+    }), /*#__PURE__*/_jsx(Column, {
+      width: "adaptive",
+      children: /*#__PURE__*/_jsxs(Inline, {
+        space: "xxsmall",
+        noWrap: !wrap,
+        children: [!!label && /*#__PURE__*/_jsx(TextBox, {
+          as: "label",
+          id: labelID,
+          color: "secondary",
+          children: label
+        }), /*#__PURE__*/_jsx(TextBox, {
+          as: "div",
+          noWrap: !wrap,
+          wrapOverflow: !!wrap,
+          "aria-labelledby": label == null ? undefined : labelID,
+          color: isEmptyChildren && label == null ? 'secondary' : 'primary',
+          children: isEmptyChildren ? fallback : children
+        })]
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") DescriptionItem.displayName = "DescriptionItem";