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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superdispatch/ui-lab",
-  "version": "0.16.0-alpha.0",
+  "version": "0.16.0-alpha.1",
   "license": "MIT",
   "files": [
     "dist-*/",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@superdispatch/hooks": "^0.15.0",
-    "@superdispatch/ui": "^0.16.0-alpha.0",
+    "@superdispatch/ui": "^0.16.0-alpha.1",
     "react-dropzone": "^11.3.4"
   },
   "peerDependencies": {

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

@@ -1,43 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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

@@ -1,227 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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";