@loomhq/lens 10.102.1 → 10.102.2

package/dist/components/button/button.js

@@ -1,192 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { getColorValue, getFocusRing, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
-import Icon from '../icon/icon';
-import Loader from '../loader/loader';
-import React from 'react';
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-const sizesStyles = {
-    small: {
-        height: u(4),
-        textSize: 'small',
-        iconSize: 2,
-        xSpace: u(1.5),
-    },
-    medium: {
-        height: u(4.5),
-        textSize: 'medium',
-        iconSize: 3,
-        xSpace: u(2),
-    },
-    large: {
-        height: u(7),
-        textSize: 'large',
-        iconSize: 4,
-        xSpace: u(2.5),
-    },
-};
-const hasLoaderStyles = props => css `
-  transition: opacity 0.5s;
-  ${props.hasLoader && `opacity: 0`};
-`;
-const variantStyles = {
-    neutral: {
-        color: getColorValue('body'),
-        background: 'transparent',
-        borderColor: getColorValue('buttonBorder'),
-        hover: getColorValue('backgroundHover'),
-        active: getColorValue('backgroundActive'),
-    },
-    primary: {
-        color: getColorValue('white'),
-        background: getColorValue('blurple'),
-        borderColor: null,
-        hover: getColorValue('primaryHover'),
-        active: getColorValue('primaryActive'),
-    },
-    record: {
-        color: getColorValue('white'),
-        background: getColorValue('record'),
-        borderColor: null,
-        hover: getColorValue('recordHover'),
-        active: getColorValue('recordActive'),
-    },
-    upgrade: {
-        color: getColorValue('grey7'),
-        background: getColorValue('upgrade'),
-        borderColor: null,
-        hover: getColorValue('upgradeHover'),
-        active: getColorValue('upgradeActive'),
-        focusRing: getFocusRing(),
-    },
-    danger: {
-        color: getColorValue('white'),
-        background: getColorValue('danger'),
-        borderColor: null,
-        hover: getColorValue('dangerHover'),
-        active: getColorValue('dangerActive'),
-    },
-    ai: {
-        color: getColorValue('white'),
-        background: 'linear-gradient(135deg, #565ADD, #9F92EC, #DC43BE)',
-        borderColor: null,
-        hover: null,
-        active: null,
-    },
-};
-const statusStyles = {
-    enabled: css `
-    cursor: pointer;
-  `,
-    disabled: css `
-    pointer-events: none;
-    background-color: ${getColorValue('disabledBackground')};
-    color: ${getColorValue('disabledContent')};
-    border: none;
-  `,
-};
-const iconGap = u(1);
-const ButtonWrapper = styled.button `
-  appearance: none;
-  padding: 0
-    ${props => (props.hasChildren ? sizesStyles[props.size].xSpace : 0)};
-  font: inherit;
-  text-decoration: none;
-  transition: 0.6s background, 0.6s border-color;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  white-space: nowrap;
-  ${getFontWeight('bold')};
-  ${getRadius('full')};
-  ${props => props.hasFullWidth ? 'display: flex; width: 100%' : 'display: inline-flex'};
-  height: ${props => sizesStyles[props.size].height};
-  min-width: ${props => sizesStyles[props.size].height};
-  ${props => getTextSize(sizesStyles[props.size].textSize)};
-  ${props => (props.disabled ? statusStyles.disabled : statusStyles.enabled)};
-  ${props => !props.disabled &&
-    `
-    border: ${variantStyles[props.variant].borderColor
-        ? `1px solid ${variantStyles[props.variant].borderColor}`
-        : 'none'};
-    background: ${variantStyles[props.variant].background};
-    background-position: left;
-    background-size: 125%;
-    color: ${variantStyles[props.variant].color};
-  `};
-
-  &:hover {
-    transition: 0.3s background, 0.3s border-color;
-    background: ${props => variantStyles[props.variant].hover};
-    background-position: 75% center;
-  }
-
-  &:active {
-    transition: 0s background, 0s border-color;
-    background: ${props => variantStyles[props.variant].active};
-    background-position: right;
-  }
-
-  &:focus-visible {
-    outline: 1px solid transparent;
-    ${getFocusRing()};
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-`;
-const IconSection = styled.span `
-  ${props => getSize('padding-left', props.paddingLeft)};
-  ${props => getSize('padding-right', props.paddingRight)};
-  ${hasLoaderStyles};
-`;
-const LogoImage = styled.img `
-  max-width: 1.45em;
-  max-height: 1.45em;
-  height: ${props => sizesStyles[props.size].height};
-  width: ${props => sizesStyles[props.size].height};
-  ${props => props.hasSpacing && `margin-right: 0.57em`};
-  ${hasLoaderStyles};
-`;
-const LoaderSection = styled.span `
-  position: absolute;
-  display: flex;
-  align-items: center;
-`;
-const ChildrenSection = styled.span `
-  ${hasLoaderStyles};
-`;
-const Button = (_a) => {
-    var { size = 'medium', children, variant = 'neutral', hasFullWidth, icon, iconPosition = 'left', logoSrc, hasLoader, isDisabled, htmlTag = 'button' } = _a, props = __rest(_a, ["size", "children", "variant", "hasFullWidth", "icon", "iconPosition", "logoSrc", "hasLoader", "isDisabled", "htmlTag"]);
-    const buttonIcon = (React.createElement(IconSection, { hasLoader: hasLoader, paddingLeft: children && iconPosition === 'right' && iconGap, paddingRight: children && iconPosition === 'left' && iconGap },
-        React.createElement(Icon, { icon: icon, color: "currentColor", hasWidthOffset: true, size: sizesStyles[size].iconSize })));
-    return (React.createElement(ButtonWrapper, Object.assign({ size: size, variant: variant, hasFullWidth: hasFullWidth, icon: icon, iconPosition: iconPosition, logoSrc: logoSrc, disabled: isDisabled, as: htmlTag, hasChildren: children }, props),
-        hasLoader && (React.createElement(LoaderSection, null,
-            React.createElement(Loader, { color: "currentColor" }))),
-        icon && iconPosition === 'left' && buttonIcon,
-        logoSrc && (React.createElement(LogoImage
-        // Assumes image is only referencing information written within the button.
-        , { 
-            // Assumes image is only referencing information written within the button.
-            alt: "", hasSpacing: children, src: logoSrc, size: size, 
-            // Assumes all images are 1:1 aspectRatio
-            height: sizesStyles[size].height, width: sizesStyles[size].height, hasLoader: hasLoader })),
-        React.createElement(ChildrenSection, { hasLoader: hasLoader }, children),
-        icon && iconPosition === 'right' && buttonIcon));
-};
-export const availableSizes = Object.keys(sizesStyles);
-export const availableVariants = Object.keys(variantStyles);
-export const availableHtmlTags = ['button', 'a'];
-export const availableIconPositions = ['left', 'right'];
-export default Button;

package/dist/components/checkbox/checkbox.js

@@ -1,97 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef, useEffect, useRef } from 'react';
-import { getColorValue, getFocusRing, u } from '../../utilities';
-import styled from '@emotion/styled';
-const SvgCheckboxCheck = props => (React.createElement("svg", Object.assign({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props),
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L4 6.586 10.293.293a1 1 0 011.414 0z", fill: "currentColor" })));
-const SvgCheckboxMinus = props => (React.createElement("svg", Object.assign({ width: 12, height: 2, viewBox: "0 0 12 2", fill: "none" }, props),
-    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 1a1 1 0 011-1h10a1 1 0 110 2H1a1 1 0 01-1-1z", fill: "currentColor" })));
-const CheckboxWrapper = styled.div `
-  display: block;
-  position: relative;
-`;
-const CheckboxInput = styled.input `
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  position: absolute;
-  width: 100%;
-
-  &:not(:disabled) {
-    cursor: pointer;
-
-    & ~ .CheckboxBox {
-      border: 2px solid ${getColorValue('body')};
-    }
-
-    &:checked ~ .CheckboxBox,
-    &:indeterminate ~ .CheckboxBox {
-      background-color: ${getColorValue('body')};
-    }
-  }
-
-  &:disabled,
-  &:disabled ~ .CheckboxBox {
-    pointer-events: none;
-  }
-
-  &:disabled ~ .CheckboxBox {
-    background-color: ${getColorValue('disabledBackground')};
-
-    .Icon {
-      color: ${getColorValue('disabledContent')};
-    }
-  }
-
-  &:focus-visible ~ .CheckboxBox {
-    ${getFocusRing()};
-  }
-
-  & ~ .CheckboxBox .Icon {
-    display: none;
-    color: ${getColorValue('background')};
-  }
-
-  &:checked ~ .CheckboxBox .IconCheck {
-    display: block;
-  }
-
-  &:indeterminate ~ .CheckboxBox .IconMinus {
-    display: block;
-  }
-`;
-const CheckboxBox = styled.span `
-  cursor: pointer;
-  width: ${u(2.25)};
-  height: ${u(2.25)};
-  border-radius: ${u(0.5)};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-`;
-const Checkbox = forwardRef((_a, ref) => {
-    var { isDisabled, isChecked, isIndeterminate, onFocus, onChange, onBlur } = _a, props = __rest(_a, ["isDisabled", "isChecked", "isIndeterminate", "onFocus", "onChange", "onBlur"]);
-    const defaultRef = useRef();
-    const checkboxRef = ref || defaultRef;
-    const iconColor = getColorValue(isDisabled ? 'disabledContent' : 'currentColor');
-    useEffect(() => {
-        checkboxRef.current.indeterminate = isIndeterminate;
-    });
-    return (React.createElement(CheckboxWrapper, null,
-        React.createElement(CheckboxInput, Object.assign({ role: "checkbox", type: "checkbox", disabled: isDisabled, checked: isChecked, onFocus: onFocus, onChange: onChange, onBlur: onBlur, ref: checkboxRef, "aria-checked": isChecked }, props)),
-        React.createElement(CheckboxBox, { className: "CheckboxBox" },
-            React.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }),
-            React.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor }))));
-});
-export default Checkbox;

package/dist/components/color-picker/color-picker.js

@@ -1,151 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useState } from 'react';
-import { HexColorPicker, HexColorInput } from 'react-colorful';
-import styled from '@emotion/styled';
-import { getRadius, u } from '../../utilities';
-const ColorfulWrapper = styled.div `
-  padding: var(--lns-space-medium);
-  & .react-colorful {
-    width: auto;
-    height: auto;
-  }
-  & .react-colorful__saturation {
-    height: ${u(14)};
-    border-bottom: none;
-    box-shadow: inset 0 0 0 1px var(--lns-color-border);
-    border-radius: var(--lns-radius-medium);
-    margin-bottom: var(--lns-space-small);
-  }
-
-  & .react-colorful__hue {
-    height: ${u(2)};
-    width: 100%;
-    box-shadow: inset 0 0 0 1px var(--lns-color-border);
-    border-radius: 3px;
-    margin-bottom: var(--lns-space-medium);
-  }
-
-  & .react-colorful__saturation-pointer {
-    width: ${u(1)};
-    height: ${u(1)};
-    cursor: pointer;
-    border: 2px solid white;
-    box-shadow: 0 0 0 3px var(--lns-color-border);
-    border-radius: var(--lns-radius-medium);
-  }
-  & .react-colorful__hue-pointer {
-    width: ${u(1)};
-    height: ${u(2.5)};
-    border-radius: 2px;
-    box-shadow: 0 0 0 2px var(--lns-color-border);
-    cursor: pointer;
-    border: 2px solid white;
-  }
-`;
-const ColorPickerContainer = styled.div `
-  position: relative;
-  width: ${u(31)};
-  background-color: var(--lns-color-overlay);
-  border-radius: var(--lns-radius-medium);
-  box-shadow: 0 0 0 1px var(--lns-color-border), var(--lns-shadow-medium);
-`;
-const InputContainer = styled.div `
-  position: relative;
-  width: 100%;
-
-  input {
-    padding: 0 0 0 ${u(4)};
-    height: ${u(4)};
-    width: 100%;
-    font: inherit;
-    font-size: var(--lns-fontSize-small);
-    border: none;
-    box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
-      var(--lns-color-formFieldBorder);
-    border-radius: var(--lns-formFieldRadius);
-    transition: 0.3s box-shadow;
-    background-color: var(--lns-color-overlay);
-    color: var(--lns-color-body);
-
-    &:hover {
-      box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidthFocus)
-        var(--lns-color-blurple);
-    }
-
-    &:focus {
-      outline: 1px solid transparent;
-      box-shadow: var(--lns-formFieldBorderShadowFocus);
-    }
-  }
-`;
-const ColorBox = styled.div `
-  position: absolute;
-  width: ${u(3)};
-  height: ${u(3)};
-  left: var(--lns-space-xsmall);
-  top: var(--lns-space-xsmall);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  ${getRadius('full')};
-  background-color: ${props => props.color};
-`;
-const ButtonWrapper = styled.div `
-  position: relative;
-  border-radius: var(--lns-radius-medium);
-  padding: 0 var(--lns-space-medium) var(--lns-space-medium)
-    var(--lns-space-medium);
-`;
-const SwatchesContainer = styled.div `
-  display: grid;
-  grid-template-columns: repeat(7, ${u(3)});
-  gap: ${u(1)} ${u(1)};
-  border-bottom: 1px solid var(--lns-color-border);
-  padding: var(--lns-space-medium);
-`;
-const Swatch = styled.div `
-  cursor: pointer;
-  width: ${u(3)};
-  height: ${u(3)};
-  border-radius: 2px;
-  background-color: ${props => props.color};
-  border: ${props => props.selected === props.color
-    ? '1px solid white'
-    : '1px solid var(--lns-color-border)'};
-  box-shadow: ${props => props.selected === props.color && '0 0 0 2px var(--lns-color-focusRing)'};
-`;
-const SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
-    const selectedSwatch = swatches.includes(currentColor) && currentColor;
-    return (React.createElement(SwatchesContainer, null, swatches.map(swatch => (React.createElement(Swatch, { key: swatch, color: swatch, selected: selectedSwatch, onClick: () => onSwatchClick(swatch) })))));
-};
-const ColorSelector = ({ color, setColor }) => {
-    return (React.createElement(ColorfulWrapper, null,
-        React.createElement(HexColorPicker, { color: color, onChange: setColor }),
-        React.createElement(InputContainer, null,
-            React.createElement(HexColorInput, { prefixed: true, color: color, onChange: setColor }),
-            React.createElement(ColorBox, { color: color }))));
-};
-const ColorPicker = (_a) => {
-    var { defaultColor = '#ffffff', confirmButton, swatches, onChange } = _a, props = __rest(_a, ["defaultColor", "confirmButton", "swatches", "onChange"]);
-    const [tempColor, setTempColor] = useState(defaultColor ? defaultColor : '#FFFFFF');
-    const handleOnChange = hex => {
-        setTempColor(hex);
-        onChange(hex);
-    };
-    const onSwatchClick = swatch => {
-        handleOnChange(swatch);
-    };
-    return (React.createElement(ColorPickerContainer, Object.assign({}, props),
-        swatches && (React.createElement(SwatchSelector, { swatches: swatches, currentColor: tempColor, onSwatchClick: onSwatchClick })),
-        React.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }),
-        confirmButton && React.createElement(ButtonWrapper, null, confirmButton)));
-};
-export default ColorPicker;

package/dist/components/container/container.js

@@ -1,76 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { getColorValue, getRadius, getShadow, getSize, getSizeValue, } from '../../utilities';
-import React from 'react';
-import styled from '@emotion/styled';
-const getBorderSideAndColor = (side, color, width) => {
-    const borderColor = color ? color : 'border';
-    const borderWidth = getSizeValue(width);
-    const borderStyle = `${borderWidth} solid ${getColorValue(borderColor)}`;
-    if (side) {
-        if (side === 'all') {
-            return `border: ${borderStyle};`;
-        }
-        return `border-${side}: ${borderStyle};`;
-    }
-};
-const ContainerWrapper = styled.div `
-  ${props => props.position && `position: ${props.position}`};
-  ${props => props.overflow && `overflow: ${props.overflow}`};
-  ${props => props.backgroundColor &&
-    `background-color: ${getColorValue(props.backgroundColor)}`};
-  ${props => props.backgroundImage && `background-image: ${props.backgroundImage}`}
-  ${props => props.contentColor && `color: ${getColorValue(props.contentColor)}`};
-  ${props => getBorderSideAndColor(props.borderSide, props.borderColor, props.borderWidth)};
-  ${props => getRadius(props.radius)};
-  ${props => getShadow(props.shadow)};
-  ${props => getSize('width', props.width)};
-  ${props => getSize('height', props.height)};
-  ${props => getSize('min-width', props.minWidth)};
-  ${props => getSize('min-height', props.minHeight)};
-  ${props => getSize('max-width', props.maxWidth)};
-  ${props => getSize('max-height', props.maxHeight)};
-  ${props => getSize('padding', props.padding)};
-  ${props => getSize('padding-top', props.paddingTop)};
-  ${props => getSize('padding-right', props.paddingRight)};
-  ${props => getSize('padding-bottom', props.paddingBottom)};
-  ${props => getSize('padding-left', props.paddingLeft)};
-  ${props => getSize('margin', props.margin)};
-  ${props => getSize('margin-top', props.marginTop)};
-  ${props => getSize('margin-right', props.marginRight)};
-  ${props => getSize('margin-bottom', props.marginBottom)};
-  ${props => getSize('margin-left', props.marginLeft)};
-  ${props => getSize('top', props.top)};
-  ${props => getSize('right', props.right)};
-  ${props => getSize('bottom', props.bottom)};
-  ${props => getSize('left', props.left)};
-  ${props => props.zIndex && `z-index: ${props.zIndex}`};
-`;
-const Container = (_a) => {
-    var { children, backgroundColor, backgroundImage, contentColor, borderColor, radius, borderSide, borderWidth = '1px', shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag = 'div', position, overflow, zIndex, top, bottom, left, right, refHandler } = _a, props = __rest(_a, ["children", "backgroundColor", "backgroundImage", "contentColor", "borderColor", "radius", "borderSide", "borderWidth", "shadow", "padding", "paddingX", "paddingY", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "margin", "marginX", "marginY", "marginLeft", "marginRight", "marginTop", "marginBottom", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "htmlTag", "position", "overflow", "zIndex", "top", "bottom", "left", "right", "refHandler"]);
-    return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, backgroundImage: backgroundImage, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, margin: margin, marginLeft: marginX || marginLeft, marginRight: marginX || marginRight, marginTop: marginY || marginTop, marginBottom: marginY || marginBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth, ref: ref => refHandler && refHandler(ref) }, props), children));
-};
-export const availableBorderSides = ['all', 'left', 'right', 'top', 'bottom'];
-export const availableRadii = ['medium', 'large', 'xlarge', 'full'];
-export const availableHtmlTags = [
-    'div',
-    'header',
-    'article',
-    'section',
-    'nav',
-    'aside',
-    'footer',
-    'main',
-    'span',
-    'form',
-];
-export default Container;

package/dist/components/distribute/distribute.js

@@ -1,82 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { arrayToBreakpoints, getAlignmentStyles, getResponsiveBoolean, getSizeValue, } from '../../utilities';
-import React from 'react';
-import styled from '@emotion/styled';
-import { distributeDeprecatedWarning } from '../../console-messages';
-const alignments = {
-    start: 'flex-start',
-    center: 'center',
-    end: 'flex-end',
-    stretch: 'stretch',
-};
-let alreadyWarned = false;
-const propToArray = prop => {
-    if (!Array.isArray(prop)) {
-        return [prop];
-    }
-    return prop;
-};
-const formatItems = (items, targetRulesetLength) => {
-    if (items.length === targetRulesetLength) {
-        return items;
-    }
-    const lastItem = items[items.length - 1];
-    return [...Array(targetRulesetLength)].map((_, i) => items[i] || lastItem);
-};
-const getDirectionAndGap = (direction, gap) => {
-    const targetRulesetLength = Math.max(propToArray(direction).length, propToArray(gap).length);
-    const gapsArray = formatItems(propToArray(gap), targetRulesetLength);
-    const directionsArray = formatItems(propToArray(direction), targetRulesetLength);
-    const childrenSelector = '& > * + *';
-    const gapsRulesets = gapsArray.map((gapItem, index) => {
-        const marginTop = `${getSizeValue(gapItem)} 0 0 0`;
-        const marginRight = `0 0 0 ${getSizeValue(gapItem)}`;
-        const marginValue = directionsArray[index] === 'column' ? marginTop : marginRight;
-        return `${childrenSelector}{ margin: ${marginValue}; }`;
-    });
-    const directionsRulesets = directionsArray.map(directionItem => `flex-direction: ${directionItem}`);
-    return (arrayToBreakpoints(gapsRulesets) + arrayToBreakpoints(directionsRulesets));
-};
-const DistributeWrapper = styled.div `
-  display: flex;
-  flex-wrap: wrap;
-  ${props => getDirectionAndGap(props.flexDirection, props.gap)};
-  ${props => getAlignmentStyles(props.flexAlign, alignments)};
-  ${props => props.isSpread &&
-    getResponsiveBoolean('justify-content', ['space-between', 'initial'], props.isSpread)};
-
-  & > * {
-    flex-shrink: 0;
-  }
-`;
-const Distribute = (_a) => {
-    var { children, gap, direction = 'row', alignment = 'start', isSpread, htmlTag = 'div' } = _a, props = __rest(_a, ["children", "gap", "direction", "alignment", "isSpread", "htmlTag"]);
-    if (!alreadyWarned) {
-        console.warn(distributeDeprecatedWarning);
-        alreadyWarned = true;
-    }
-    return (React.createElement(DistributeWrapper, Object.assign({ gap: gap, flexDirection: direction, flexAlign: alignment, isSpread: isSpread, as: htmlTag }, props), children));
-};
-export const availableDirections = ['row', 'column'];
-export const availableAlignments = Object.keys(alignments);
-export const availableHtmlTags = [
-    'div',
-    'header',
-    'article',
-    'section',
-    'nav',
-    'aside',
-    'footer',
-    'main',
-];
-export default Distribute;

package/dist/components/dropdown/dropdown.js

@@ -1,60 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import Menu, { MenuItem, menuPositions } from '../menu/menu';
-import React, { useEffect, useState } from 'react';
-import Downshift from 'downshift';
-import ResizeObserver from 'resize-observer-polyfill';
-import { getDownshiftEnvironment } from '../../utilities/downshift';
-import styled from '@emotion/styled';
-import { useLayer } from 'react-laag';
-const TriggerSection = styled.div `
-  display: inline-block;
-  vertical-align: middle;
-`;
-const Dropdown = (_a) => {
-    var { menuPosition = 'left', menuZIndex = 1100, options, trigger, isOpen: isOpenFromProps, menuMinWidth = 24, menuMaxWidth = 48, menuMaxHeight, container, onOuterClick, triggerOffset = 0, onOpenChange } = _a, props = __rest(_a, ["menuPosition", "menuZIndex", "options", "trigger", "isOpen", "menuMinWidth", "menuMaxWidth", "menuMaxHeight", "container", "onOuterClick", "triggerOffset", "onOpenChange"]);
-    const environment = getDownshiftEnvironment(container);
-    const [downshiftIsOpen, setDownshiftIsOpen] = useState(false);
-    const isOpen = isOpenFromProps || downshiftIsOpen;
-    const { layerProps, triggerProps, renderLayer } = useLayer({
-        isOpen,
-        container,
-        placement: menuPositions[menuPosition],
-        ResizeObserver,
-        auto: true,
-        snap: true,
-        triggerOffset,
-    });
-    useEffect(() => {
-        onOpenChange && onOpenChange(isOpen);
-    }, [isOpen, onOpenChange]);
-    const stateReducer = (state, changes) => {
-        if (changes.isOpen !== undefined) {
-            setDownshiftIsOpen(changes.isOpen);
-        }
-        return changes;
-    };
-    return (React.createElement(Downshift, { stateReducer: stateReducer, itemToString: item => (item ? item.title : ''), onSelect: item => item && !item.disabled && item.onClick && item.onClick(), onOuterClick: onOuterClick, environment: environment }, ({ getItemProps, getMenuProps, getToggleButtonProps, highlightedIndex, }) => (React.createElement("div", Object.assign({}, props),
-        React.createElement("div", Object.assign({}, triggerProps),
-            React.createElement(TriggerSection, Object.assign({}, getToggleButtonProps({})), trigger)),
-        isOpen &&
-            renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex: menuZIndex }) }),
-                React.createElement(Menu, { position: menuPosition, minWidth: menuMinWidth, maxWidth: menuMaxWidth, maxHeight: menuMaxHeight, downshiftMenuProps: getMenuProps }, options.map((item, index) => {
-                    return (React.createElement(MenuItem, Object.assign({ key: index, isHighlighted: highlightedIndex === index, isDisabled: item.disabled, icon: item.icon, hasDivider: item.hasDivider, getItemProps: getItemProps, index: index }, getItemProps({
-                        key: index,
-                        index,
-                        item,
-                        disabled: item.disabled,
-                    })), item.title));
-                }))))))));
-};
-export default Dropdown;