@loomhq/lens 10.102.1 → 10.102.2

package/dist/components/select/select.js

@@ -1,208 +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 { getColorValue, getSize, u } from '../../utilities';
-import Downshift from 'downshift';
-import Icon from '../icon/icon';
-import ResizeObserver from 'resize-observer-polyfill';
-import { SvgChevronSmallDown } from '../icon/available-icons';
-import Text from '../text/text';
-import { getDownshiftEnvironment } from '../../utilities/downshift';
-import styled from '@emotion/styled';
-import { useLayer } from 'react-laag';
-const SelectWrapper = styled.div `
-  position: relative;
-`;
-const SelectHeaderWrapper = styled.button `
-  appearance: none;
-  font: inherit;
-  text-align: left;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: ${props => props.columns};
-  ${getSize('grid-gap', 'small')};
-  align-items: center;
-  cursor: pointer;
-  width: 100%;
-  min-height: ${u(4.5)};
-  padding: 0 ${u(1.5)} 0 var(--lns-formFieldHorizontalPadding);
-  color: ${getColorValue('body')};
-  border: none;
-  background-color: ${getColorValue('formFieldBackground')};
-  transition: 0.3s box-shadow;
-  border-radius: var(--lns-formFieldRadius);
-  box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
-    var(--lns-color-formFieldBorder);
-
-  &:hover:not(:disabled) {
-    box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidthFocus)
-      var(--lns-color-blurple);
-  }
-
-  &:focus {
-    outline: 1px solid transparent;
-    box-shadow: var(--lns-formFieldBorderShadowFocus);
-  }
-
-  &:disabled {
-    color: ${getColorValue('disabledContent')};
-    background-color: ${getColorValue('disabledBackground')};
-    cursor: default;
-  }
-`;
-const getSelectedOptionObject = ({ options, selectedOptionValue }) => {
-    const selectedOptionArray = options.filter(option => option.value === selectedOptionValue);
-    return selectedOptionArray[0] || { icon: null, title: null };
-};
-const getIcon = ({ options, selectedItem, selectedOptionValue }) => {
-    if (selectedItem) {
-        return selectedItem.icon;
-    }
-    if (selectedOptionValue) {
-        return getSelectedOptionObject({ options, selectedOptionValue }).icon;
-    }
-};
-const getTitle = ({ options, selectedItem, selectedOptionValue, selectPlaceholder, }) => {
-    if (selectedItem) {
-        return selectedItem.title;
-    }
-    if (selectedOptionValue) {
-        return getSelectedOptionObject({ options, selectedOptionValue }).title;
-    }
-    return selectPlaceholder;
-};
-const SelectHeader = ({ getToggleButtonProps, inputValue, selectedItem, selectedOptionValue, selectPlaceholder, isDisabled, options, }) => {
-    const hasIcon = Boolean(getIcon({ options, selectedItem, selectedOptionValue }));
-    const hasPlaceholder = !selectedOptionValue && !selectedItem;
-    const iconColumn = hasIcon ? 'auto' : '';
-    const columns = `${iconColumn} 1fr auto`;
-    const color = isDisabled ? 'disabledContent' : undefined;
-    return (React.createElement(SelectHeaderWrapper, Object.assign({}, getToggleButtonProps({
-        onKeyDown: event => {
-            if (event.key === 'Escape') {
-                event.nativeEvent.preventDownshiftDefault = true;
-            }
-        },
-    }), { hasValue: inputValue || selectedOptionValue, disabled: isDisabled, columns: columns }),
-        hasIcon && (React.createElement(Icon, { icon: getIcon({ options, selectedItem, selectedOptionValue }), color: color })),
-        React.createElement(Text, { hasEllipsis: true, color: hasPlaceholder ? 'grey5' : 'inherit' }, getTitle({
-            options,
-            selectedItem,
-            selectedOptionValue,
-            selectPlaceholder,
-        })),
-        React.createElement(Icon, { icon: React.createElement(SvgChevronSmallDown, null), color: color })));
-};
-const CustomHeader = ({ selectedOptionValue, selectedItem, trigger, getToggleButtonProps, options, selectPlaceholder, isDisabled, }) => {
-    const buttonProps = () => {
-        return Object.assign({}, getToggleButtonProps({
-            onKeyDown: event => {
-                if (event.key === 'Escape') {
-                    event.nativeEvent.preventDownshiftDefault = true;
-                }
-            },
-        }));
-    };
-    const getTriggerTitle = () => {
-        if (selectedItem) {
-            return selectedItem.title;
-        }
-        if (!selectedItem && selectedOptionValue) {
-            return getSelectedOptionObject({ options, selectedOptionValue }).title;
-        }
-    };
-    const getTriggerIcon = () => {
-        if (selectedItem && selectedItem.icon) {
-            return selectedItem.icon;
-        }
-        if (!selectedItem && selectedOptionValue) {
-            return getSelectedOptionObject({ options, selectedOptionValue }).icon;
-        }
-    };
-    const triggerContent = {
-        title: getTriggerTitle(),
-        placeholder: selectPlaceholder,
-        icon: getTriggerIcon(),
-        isDisabled,
-    };
-    return trigger(triggerContent, buttonProps());
-};
-const getSelectedOption = (value, options) => options.find(o => o.value === value);
-const didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
-    return Boolean(prevSelectedItem && selectedOptionValue !== prevSelectedItem.value);
-};
-const Select = (_a) => {
-    var { container, onChange, menuZIndex = 1100, menuMaxWidth, menuMaxHeight = 34, menuMinWidth, selectedOptionValue, onOuterClick, options, placeholder, menuPosition = 'left', isDisabled, onOpenChange, trigger } = _a, props = __rest(_a, ["container", "onChange", "menuZIndex", "menuMaxWidth", "menuMaxHeight", "menuMinWidth", "selectedOptionValue", "onOuterClick", "options", "placeholder", "menuPosition", "isDisabled", "onOpenChange", "trigger"]);
-    const environment = getDownshiftEnvironment(container);
-    const [downshiftIsOpen, setDownshiftIsOpen] = useState(false);
-    const [prevSelectedItem, setPrevSelectedItem] = useState(getSelectedOption(selectedOptionValue, options));
-    const [selectedItem, setSelectedItem] = useState(prevSelectedItem);
-    const onDownshiftChange = item => {
-        setSelectedItem(item);
-        onChange && onChange(item ? item : '');
-    };
-    const downshiftProps = {
-        itemToString: item => (item ? item.value : ''),
-        onChange: onDownshiftChange,
-        onOuterClick,
-        environment,
-        selectedItem,
-    };
-    if (environment) {
-        downshiftProps.environment = environment;
-    }
-    const { layerProps, triggerProps, renderLayer, triggerBounds } = useLayer({
-        isOpen: downshiftIsOpen,
-        container,
-        ResizeObserver,
-        placement: menuPositions[menuPosition],
-        auto: true,
-        snap: true,
-    });
-    useEffect(() => {
-        if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
-            const selectedItem = getSelectedOption(selectedOptionValue, options);
-            setPrevSelectedItem(selectedItem);
-            setSelectedItem(selectedItem);
-        }
-    }, [selectedOptionValue, options, prevSelectedItem]);
-    useEffect(() => {
-        onOpenChange && onOpenChange(downshiftIsOpen);
-    }, [downshiftIsOpen, onOpenChange]);
-    const stateReducer = (state, changes) => {
-        if (changes.isOpen !== undefined) {
-            setDownshiftIsOpen(changes.isOpen);
-        }
-        return changes;
-    };
-    return (React.createElement(SelectWrapper, Object.assign({}, props),
-        React.createElement(Downshift, Object.assign({}, downshiftProps, { stateReducer: stateReducer }), ({ getItemProps, getMenuProps, getToggleButtonProps, isOpen, inputValue, highlightedIndex, selectedItem, }) => {
-            return (React.createElement("div", null,
-                React.createElement("div", Object.assign({}, triggerProps), trigger ? (React.createElement(CustomHeader, { getToggleButtonProps: getToggleButtonProps, selectedItem: selectedItem, selectedOptionValue: selectedOptionValue, selectPlaceholder: placeholder, isDisabled: isDisabled, options: options, trigger: trigger })) : (React.createElement(SelectHeader, { getToggleButtonProps: getToggleButtonProps, selectedItem: selectedItem, selectedOptionValue: selectedOptionValue, selectPlaceholder: placeholder, options: options, inputValue: inputValue, isDisabled: isDisabled }))),
-                downshiftIsOpen &&
-                    isOpen &&
-                    renderLayer(React.createElement("div", Object.assign({}, layerProps, { style: Object.assign(Object.assign({}, layerProps.style), { zIndex: menuZIndex, width: menuMinWidth ? 'auto' : triggerBounds === null || triggerBounds === void 0 ? void 0 : triggerBounds.width }) }),
-                        React.createElement(Menu, { position: menuPosition, downshiftMenuProps: getMenuProps, maxWidth: menuMaxWidth, maxHeight: menuMaxHeight, minWidth: menuMinWidth }, options.map((item, index) => {
-                            return (React.createElement(MenuItem, Object.assign({ key: index, getItemProps: getItemProps, icon: item.icon, hidden: item.hidden }, getItemProps({
-                                key: `${item.value}-${index}`,
-                                index,
-                                item,
-                                disabled: item.isDisabled,
-                            }), { isDisabled: item.isDisabled, hasDivider: item.hasDivider, isHighlighted: highlightedIndex === index, isSelected: (!selectedItem &&
-                                    item.value === selectedOptionValue) ||
-                                    (selectedItem &&
-                                        selectedItem.value === item.value) }), item.title));
-                        }))))));
-        })));
-};
-export default Select;

package/dist/components/skeleton-text/skeleton-text.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { getTextSize } from '../../utilities';
-const SkeletonTextWrapper = styled.div `
-  ${props => getTextSize(props.size)};
-  color: transparent;
-  position: relative;
-  &::after {
-    content '';
-    position: absolute;
-    background-color: var(--lns-color-disabledBackground);
-    border-radius: var(--lns-radius-full);
-    width: 100%;
-    display: block;
-    height: 71.45%;
-    top: .2em;
-  }
-  ${props => props.lines > 1 &&
-    `
-      &:nth-of-type(3n+1) {
-        width: calc(100% - 2.25rem);
-      }
-      &:nth-of-type(3n) {
-        width: calc(100% - 4.125rem);
-      }
-    }
-  `};
-`;
-const SkeletonText = ({ size = 'body-md', lines = 1, }) => {
-    return (React.createElement(React.Fragment, null, [...Array(lines)].map((_, i) => (React.createElement(SkeletonTextWrapper, { key: i, size: size, lines: lines }, "Loading")))));
-};
-export default SkeletonText;

package/dist/components/spacer/spacer.js

@@ -1,28 +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 from 'react';
-import styled from '@emotion/styled';
-import { getSize } from '../../utilities';
-const SpacerWrapper = styled.div `
-  display: ${props => (props.isInline ? 'inline-block' : 'block')};
-  vertical-align: middle;
-  ${props => getSize('padding', props.all)};
-  ${props => getSize('padding-top', props.top)};
-  ${props => getSize('padding-right', props.right)};
-  ${props => getSize('padding-bottom', props.bottom)};
-  ${props => getSize('padding-left', props.left)};
-`;
-const Spacer = (_a) => {
-    var { children, all, y, x, top, right, bottom, left, isInline } = _a, props = __rest(_a, ["children", "all", "y", "x", "top", "right", "bottom", "left", "isInline"]);
-    return (React.createElement(SpacerWrapper, Object.assign({ all: all, top: y || top, bottom: y || bottom, right: x || right, left: x || left, isInline: isInline }, props), children));
-};
-export default Spacer;

package/dist/components/split/split.js

@@ -1,67 +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 { customStylesWarning, splitComponentChildren, } from '../../console-messages';
-import { getResponsiveNumber, getResponsiveOneOf, getSize, } from '../../utilities';
-import React from 'react';
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-const getSizeStyles = props => css `
-  ${getSize('width', props.width)};
-  ${getSize('height', props.height)};
-  ${getSize('min-width', props.minWidth)};
-  ${getSize('min-height', props.minHeight)};
-  ${getSize('max-width', props.maxWidth)};
-  ${getSize('max-height', props.maxHeight)};
-`;
-const SplitWrapper = styled.div `
-  display: flex;
-  ${props => getResponsiveOneOf('align-items', props.alignItems)};
-  ${props => props.justifyContent &&
-    getResponsiveOneOf('justify-content', props.justifyContent)};
-  ${props => props.alignContent &&
-    getResponsiveOneOf('align-content', props.alignContent)};
-  ${props => getResponsiveOneOf('flex-wrap', props.wrap)};
-  ${props => props.direction && getResponsiveOneOf('flex-direction', props.direction)};
-  ${props => props.gap && getSize('--gap', props.gap)};
-  margin-right: calc(-1 * var(--gap));
-  margin-bottom: calc(-1 * var(--gap));
-  ${props => getSizeStyles(props)};
-`;
-const SplitSectionWrapper = styled.div `
-  ${props => getResponsiveNumber('flex-grow', props.grow)};
-  ${props => getResponsiveNumber('flex-shrink', props.shrink)};
-  ${props => props.basis && getSize('flex-basis', props.basis)};
-  margin-right: var(--gap);
-  margin-bottom: var(--gap);
-  ${props => getSizeStyles(props)};
-`;
-export const SplitSection = (_a) => {
-    var { children, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style } = _a, props = __rest(_a, ["children", "grow", "shrink", "basis", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "className", "style"]);
-    if (className || style) {
-        console.warn(customStylesWarning);
-    }
-    return (React.createElement(SplitSectionWrapper, Object.assign({ grow: grow, shrink: shrink, basis: basis, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
-};
-const Split = (_a) => {
-    var { children, gap = 'initial', alignItems = 'center', justifyContent, alignContent, wrap = 'wrap', width, height, minWidth, minHeight, maxWidth, maxHeight, className, style } = _a, props = __rest(_a, ["children", "gap", "alignItems", "justifyContent", "alignContent", "wrap", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "className", "style"]);
-    React.Children.forEach(children, child => {
-        if ((child && !React.isValidElement(child)) ||
-            (React.isValidElement(child) && child.type !== SplitSection)) {
-            throw new Error(splitComponentChildren);
-        }
-    });
-    if (className || style) {
-        console.warn(customStylesWarning);
-    }
-    return (React.createElement(SplitWrapper, Object.assign({ gap: gap, alignItems: alignItems, justifyContent: justifyContent, alignContent: alignContent, wrap: wrap, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
-};
-export default Split;

package/dist/components/switch/switch.js

@@ -1,127 +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 } from '../../utilities';
-import React from 'react';
-import styled from '@emotion/styled';
-const sizes = {
-    medium: {
-        switchHeight: 16,
-        switchWidth: 32,
-        knobOffset: 2,
-    },
-    large: {
-        switchHeight: 28,
-        switchWidth: 56,
-        knobOffset: 4,
-    },
-};
-const colorStyles = {
-    knob: {
-        active: {
-            enabled: getColorValue('white'),
-            disabled: getColorValue('disabledContent'),
-        },
-        inactive: {
-            enabled: getColorValue('white'),
-            disabled: getColorValue('disabledContent'),
-        },
-    },
-    track: {
-        active: {
-            enabled: getColorValue('blurple'),
-            disabled: getColorValue('disabledBackground'),
-        },
-        inactive: {
-            enabled: getColorValue('grey6'),
-            disabled: getColorValue('disabledBackground'),
-        },
-    },
-};
-const getKnobTravel = props => {
-    return (sizes[props.switchSize].switchWidth - sizes[props.switchSize].switchHeight);
-};
-const getKnobSize = props => {
-    return (sizes[props.switchSize].switchHeight -
-        sizes[props.switchSize].knobOffset * 2);
-};
-const SwitchLabel = styled.label `
-  display: block;
-  position: relative;
-`;
-const SwitchInput = styled.input `
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-
-  // to overlap SwitchBox and occupy the same space
-  z-index: 1;
-  margin: 0;
-  width: ${props => sizes[props.switchSize].switchWidth}px;
-  height: ${props => sizes[props.switchSize].switchHeight}px;
-
-  &:focus-visible ~ .SwitchBox {
-    ${getFocusRing()};
-  }
-  &:not(:checked) {
-    & + .SwitchBox {
-      background-color: ${colorStyles.track.inactive.enabled};
-    }
-    &:disabled + .SwitchBox {
-      background-color: ${colorStyles.track.inactive.disabled};
-    }
-  }
-  &:checked {
-    & + .SwitchBox {
-      background-color: ${colorStyles.track.active.enabled};
-    }
-    &:disabled + .SwitchBox {
-      background-color: ${colorStyles.track.active.disabled};
-    }
-    & + .SwitchBox:after {
-      transform: translateX(${props => getKnobTravel(props)}px);
-    }
-  }
-  &:disabled {
-    pointer-events: none;
-  }
-`;
-const SwitchBox = styled.div `
-  width: ${props => sizes[props.switchSize].switchWidth}px;
-  height: ${props => sizes[props.switchSize].switchHeight}px;
-  position: relative;
-  border-radius: var(--lns-radius-full);
-  transition: 0.2s;
-  cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-  &:after {
-    content: '';
-    position: absolute;
-    top: ${props => sizes[props.switchSize].knobOffset}px;
-    left: ${props => sizes[props.switchSize].knobOffset}px;
-    width: ${props => getKnobSize(props)}px;
-    height: ${props => getKnobSize(props)}px;
-    border-radius: var(--lns-radius-full);
-    transition: 0.15s;
-    background-color: ${props => props.isDisabled
-    ? colorStyles.knob.active.disabled
-    : colorStyles.knob.active.enabled};
-  }
-`;
-const Switch = (_a) => {
-    var { isActive, isDisabled, onChange, size = 'medium', ariaLabelledby, ariaLabel } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange", "size", "ariaLabelledby", "ariaLabel"]);
-    if (ariaLabelledby && ariaLabel) {
-        throw new Error('ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs.');
-    }
-    return (React.createElement(SwitchLabel, null,
-        React.createElement(SwitchInput, Object.assign({}, props, { checked: isActive, disabled: isDisabled, onChange: onChange, type: "checkbox", switchSize: size, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-checked": isActive })),
-        React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive, switchSize: size })));
-};
-export default Switch;

package/dist/components/tabs/tabs.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, getSizeValue, u, } from '../../utilities';
-import Container from '../container/container';
-import Icon from '../icon/icon';
-import React from 'react';
-import styled from '@emotion/styled';
-const TabsContext = React.createContext({});
-const negativeScrollOffset = scrollOffset => `calc(-1 * ${getSizeValue(scrollOffset)})`;
-const Wrapper = styled.div `
-  ${props => props.scrollOffset &&
-    `margin: 0 ${negativeScrollOffset(props.scrollOffset)};
-  `};
-`;
-const TabsNav = styled.nav `
-  --activeIndicatorHeight: 3px;
-
-  display: flex;
-  overflow: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  ${props => props.scrollOffset && getSize('padding-left', props.scrollOffset)};
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  & > * {
-    ${props => props.hasFullTabs && `flex: 1 0`};
-  }
-
-  & > * + * {
-    margin-left: ${u(2)};
-  }
-
-  &:after {
-    content: '';
-    flex-shrink: 0;
-    ${props => props.scrollOffset && getSize('width', props.scrollOffset)};
-  }
-`;
-const TabsNavPilled = styled.nav `
-  ${getRadius('full')};
-  background-color: var(--lns-color-backgroundSecondary);
-
-  padding: var(--lns-space-xsmall);
-
-  display: flex;
-  overflow: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  ${props => props.scrollOffset && getSize('padding-left', props.scrollOffset)};
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  & > * {
-    flex: 1 0;
-  }
-
-  & > * + * {
-    margin-left: ${u(2)};
-  }
-
-  &:after {
-    content: '';
-    flex-shrink: 0;
-    ${props => props.scrollOffset && getSize('width', props.scrollOffset)};
-  }
-`;
-const TabWrapper = styled.button `
-  appearance: none;
-  font: inherit;
-  background: transparent;
-  border: none;
-  ${getRadius('medium')};
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  padding: 0 0 calc(var(--lns-space-small) + var(--activeIndicatorHeight)) 0;
-  position: relative;
-  color: inherit;
-  text-decoration: none;
-  flex-shrink: 0;
-  ${getFontWeight('bold')};
-  transition: 0.6s color;
-  white-space: nowrap;
-  color: ${props => getColorValue(props.isActive ? 'body' : 'bodyDimmed')};
-  ${props => props.isActive &&
-    `border-color: ${getColorValue('primary')};
-  `};
-
-  &:focus,
-  &:focus-visible {
-    outline: 1px solid transparent;
-  }
-
-  &:focus-visible {
-    ${getFocusRing(undefined, 'inset')};
-  }
-
-  &:hover {
-    color: ${getColorValue('body')};
-    transition: 0.3s color;
-  }
-
-  &::after {
-    bottom: 0;
-    ${getRadius('medium')};
-    content: '';
-    height: var(--activeIndicatorHeight);
-    position: absolute;
-    width: 100%;
-    ${props => props.isActive && `background-color: ${getColorValue('primary')}`};
-  }
-`;
-const TabWrapperPilled = styled.button `
-  padding: ${u(1)} 0;
-
-  appearance: none;
-  font: inherit;
-  background: transparent;
-  border: none;
-  ${getRadius('full')};
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  position: relative;
-  color: inherit;
-  text-decoration: none;
-  flex-shrink: 0;
-  ${getFontWeight('bold')};
-
-  transition: 0.6s color;
-  white-space: nowrap;
-  ${props => props.isActive &&
-    `background-color: ${getColorValue('background')};
-    color: ${getColorValue('primary')};
-  `};
-
-  &:focus,
-  &:focus-visible {
-    outline: 1px solid transparent;
-  }
-
-  &:focus-visible {
-    ${getFocusRing(undefined, 'inset')};
-  }
-
-  &:hover {
-    color: ${getColorValue('primary')};
-    transition: 0.3s color;
-  }
-`;
-export const Tab = (_a) => {
-    var { children, isActive, htmlTag = 'button', icon } = _a, props = __rest(_a, ["children", "isActive", "htmlTag", "icon"]);
-    const { isPilledDesign } = React.useContext(TabsContext);
-    if (isPilledDesign) {
-        return (React.createElement(TabWrapperPilled, Object.assign({ as: htmlTag, isActive: isActive, icon: icon }, props),
-            icon && (React.createElement(Container, { htmlTag: "span", paddingRight: children && 'small' },
-                React.createElement(Icon, { icon: icon, color: "currentColor", hasWidthOffset: true }))),
-            children));
-    }
-    return (React.createElement(TabWrapper, Object.assign({ as: htmlTag, isActive: isActive, icon: icon }, props),
-        icon && (React.createElement(Container, { htmlTag: "span", paddingRight: children && 'small' },
-            React.createElement(Icon, { icon: icon, color: "currentColor", hasWidthOffset: true }))),
-        children));
-};
-const Tabs = (_a) => {
-    var { children, scrollOffset, hasFullTabs, isPilledDesign } = _a, props = __rest(_a, ["children", "scrollOffset", "hasFullTabs", "isPilledDesign"]);
-    const tabsContent = isPilledDesign ? (React.createElement(TabsNavPilled, Object.assign({ hasFullTabs: hasFullTabs, scrollOffset: scrollOffset }, props), children)) : (React.createElement(TabsNav, Object.assign({ hasFullTabs: hasFullTabs, scrollOffset: scrollOffset }, props), children));
-    if (scrollOffset) {
-        return React.createElement(Wrapper, { scrollOffset: scrollOffset }, tabsContent);
-    }
-    return (React.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent));
-};
-export default Tabs;