@equinor/eds-core-react 0.14.3 → 0.15.0-dev.20211116

package/dist/esm/components/SideSheet/SideSheet.tokens.js

@@ -0,0 +1,45 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background
+      },
+      background__light: {
+        rgba: borderColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      xx_small: spacingXXS,
+      medium: spacingMedium
+    }
+  }
+} = tokens;
+const comfortable = {
+  background,
+  spacings: {
+    left: '14px',
+    // padding left is 14px, because of border-left 'steals' 2px of the padding
+    right: spacingMedium,
+    top: spacingMedium
+  },
+  border: {
+    type: 'bordergroup',
+    left: {
+      color: borderColor,
+      width: spacingXXS,
+      style: 'solid'
+    }
+  }
+};
+const variants = {
+  small: '240px',
+  medium: '320px',
+  large: '480px',
+  xlarge: '640px'
+};
+
+export { comfortable, variants };

package/dist/esm/components/Slider/MinMax.js

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { slider } from './Slider.tokens.js';
+import { typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  entities: {
+    track,
+    output
+  }
+} = slider;
+const StyledMinMax = styled.span.withConfig({
+  displayName: "MinMax__StyledMinMax",
+  componentId: "sc-lxmlid-0"
+})(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], typographyTemplate(output.typography), track.spacings.top);
+const MinMax = /*#__PURE__*/forwardRef(function MinMax({
+  children
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledMinMax, {
+    ref: ref
+  }, children);
+});
+
+export { MinMax };

package/dist/esm/components/Slider/Output.js

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { slider } from './Slider.tokens.js';
+import { typographyTemplate } from '../../utils/templates/index.js';
+
+const {
+  entities: {
+    track,
+    output
+  }
+} = slider;
+const StyledOutput = styled.output.withConfig({
+  displayName: "Output__StyledOutput",
+  componentId: "sc-1dy945x-0"
+})(["--val:", ";--realWidth:calc(100% - 12px);width:fit-content;position:relative;z-index:1;", " background:", ";padding:0 5px;top:", ";pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;"], ({
+  value
+}) => value, typographyTemplate(output.typography), slider.background, track.spacings.top);
+const Output = /*#__PURE__*/forwardRef(function Output({
+  children,
+  value,
+  htmlFor
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledOutput, {
+    ref: ref,
+    value: value,
+    htmlFor: htmlFor
+  }, children);
+});
+
+export { Output };

package/dist/esm/components/Slider/Slider.js

@@ -0,0 +1,224 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useState, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { slider } from './Slider.tokens.js';
+import { MinMax } from './MinMax.js';
+import { Output } from './Output.js';
+import { SliderInput } from './SliderInput.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const {
+  entities: {
+    track,
+    handle,
+    dot
+  }
+} = slider;
+const fakeTrackBg = css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
+const fakeTrackBgHover = css({
+  backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
+});
+const trackFill = css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
+const wrapperGrid = css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
+const RangeWrapper = styled.div.withConfig({
+  displayName: "Slider__RangeWrapper",
+  componentId: "sc-n1grrg-0"
+})(["--a:", ";--b:", ";--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", " background:", ";}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::before,&::after{background:", ";}}}"], ({
+  valA
+}) => valA, ({
+  valB
+}) => valB, ({
+  min
+}) => min, ({
+  max
+}) => max, wrapperGrid, fakeTrackBg, trackFill, ({
+  disabled
+}) => disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background, handle.width, handle.width, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+const Wrapper = styled.div.withConfig({
+  displayName: "Slider__Wrapper",
+  componentId: "sc-n1grrg-1"
+})(["--min:", ";--max:", ";--dif:calc(var(--max) - var(--min));--value:", ";--realWidth:calc(100% - 12px);", " ", " &::after{", " background:", "}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}@media (hover:hover) and (pointer:fine){&:hover:not([disabled]){", " &::after{background:", ";}}}"], ({
+  min
+}) => min, ({
+  max
+}) => max, ({
+  value
+}) => value, wrapperGrid, fakeTrackBg, trackFill, ({
+  disabled
+}) => disabled ? track.entities.indicator.states.disabled.background : track.entities.indicator.background, fakeTrackBgHover, track.entities.indicator.states.hover.background);
+const WrapperGroupLabel = styled.div.withConfig({
+  displayName: "Slider__WrapperGroupLabel",
+  componentId: "sc-n1grrg-2"
+})(["grid-row:1;grid-column:1 / 3;"]);
+const WrapperGroupLabelDots = styled(WrapperGroupLabel).withConfig({
+  displayName: "Slider__WrapperGroupLabelDots",
+  componentId: "sc-n1grrg-3"
+})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", " bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, bordersTemplate(dot.border), dot.spacings.bottom);
+const SrOnlyLabel = styled.label.withConfig({
+  displayName: "Slider__SrOnlyLabel",
+  componentId: "sc-n1grrg-4"
+})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
+const Slider = /*#__PURE__*/forwardRef(function Slider({
+  min = 0,
+  max = 100,
+  value = [40, 60],
+  outputFunction,
+  onChange,
+  onChangeCommitted,
+  minMaxDots = true,
+  minMaxValues = true,
+  step = 1,
+  disabled,
+  ariaLabelledby,
+  ...rest
+}, ref) {
+  const isRangeSlider = Array.isArray(value);
+  const [sliderValue, setSliderValue] = useState(isRangeSlider ? value : [value]);
+  const minRange = useRef(null);
+  const maxRange = useRef(null);
+
+  const onValueChange = (event, valueArrIdx) => {
+    const target = event.target;
+    const changedValue = parseFloat(target.value);
+
+    if (isRangeSlider) {
+      const newValue = sliderValue.slice();
+      newValue[valueArrIdx] = changedValue;
+      setSliderValue(newValue);
+
+      if (onChange) {
+        // Callback for provided onChange func
+        onChange(event, newValue);
+      }
+
+      return;
+    }
+
+    setSliderValue([changedValue]);
+
+    if (onChange) {
+      // Callback for provided onChange func
+      onChange(event, [changedValue]);
+    }
+  };
+
+  const handleKeyUp = event => {
+    if (event.keyCode === 37 || event.keyCode === 39) {
+      handleCommitedValue(event);
+    }
+  };
+
+  const handleCommitedValue = event => {
+    if (onChangeCommitted) {
+      onChangeCommitted(event, sliderValue);
+    }
+  };
+
+  const getFormattedText = text => {
+    return outputFunction ? outputFunction(text) : text;
+  };
+
+  const findClosestRange = event => {
+    const target = event.target;
+
+    if (target.type === 'output') {
+      return;
+    }
+
+    const bounds = target.getBoundingClientRect();
+    const x = event.clientX - bounds.left;
+    const inputWidth = minRange.current.offsetWidth;
+    const minValue = minRange.current.value;
+    const maxValue = maxRange.current.value;
+    const diff = max - min;
+    const normX = x / inputWidth * diff + min;
+    const maxX = Math.abs(normX - parseFloat(maxValue));
+    const minX = Math.abs(normX - parseFloat(minValue));
+
+    if (minX > maxX) {
+      minRange.current.style.zIndex = '10';
+      maxRange.current.style.zIndex = '20';
+    } else {
+      minRange.current.style.zIndex = '20';
+      maxRange.current.style.zIndex = '10';
+    }
+  };
+
+  const inputIdA = `${ariaLabelledby}-thumb-a`;
+  const inputIdB = `${ariaLabelledby}-thumb-b`;
+  const inputId = `${ariaLabelledby}-thumb`;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isRangeSlider ? /*#__PURE__*/React.createElement(RangeWrapper, _extends({}, rest, {
+    ref: ref,
+    role: "group",
+    "aria-labelledby": ariaLabelledby,
+    valA: sliderValue[0],
+    valB: sliderValue[1],
+    max: max,
+    min: min,
+    disabled: disabled,
+    onMouseMove: findClosestRange
+  }), minMaxDots && /*#__PURE__*/React.createElement(WrapperGroupLabelDots, null), /*#__PURE__*/React.createElement(SrOnlyLabel, {
+    htmlFor: inputIdA
+  }, "Value A"), /*#__PURE__*/React.createElement(SliderInput, {
+    type: "range",
+    ref: minRange,
+    value: sliderValue[0],
+    max: max,
+    min: min,
+    id: inputIdA,
+    step: step,
+    onChange: event => {
+      onValueChange(event, 0);
+    },
+    onMouseUp: event => handleCommitedValue(event),
+    onKeyUp: event => handleKeyUp(event),
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Output, {
+    htmlFor: inputIdA,
+    value: sliderValue[0]
+  }, getFormattedText(sliderValue[0])), minMaxValues && /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(min)), /*#__PURE__*/React.createElement(SrOnlyLabel, {
+    htmlFor: inputIdB
+  }, "Value B"), /*#__PURE__*/React.createElement(SliderInput, {
+    type: "range",
+    value: sliderValue[1],
+    min: min,
+    max: max,
+    id: inputIdB,
+    step: step,
+    ref: maxRange,
+    onChange: event => {
+      onValueChange(event, 1);
+    },
+    onMouseUp: event => handleCommitedValue(event),
+    onKeyUp: event => handleKeyUp(event),
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(Output, {
+    htmlFor: inputIdB,
+    value: sliderValue[1]
+  }, getFormattedText(sliderValue[1])), minMaxValues && /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(max))) : /*#__PURE__*/React.createElement(Wrapper, _extends({}, rest, {
+    ref: ref,
+    max: max,
+    min: min,
+    value: sliderValue[0],
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(SliderInput, {
+    type: "range",
+    value: sliderValue[0],
+    min: min,
+    max: max,
+    step: step,
+    id: inputId,
+    onChange: event => {
+      onValueChange(event);
+    },
+    disabled: disabled,
+    "aria-labelledby": ariaLabelledby,
+    onMouseUp: event => handleCommitedValue(event),
+    onKeyUp: event => handleKeyUp(event)
+  }), /*#__PURE__*/React.createElement(Output, {
+    htmlFor: inputId,
+    value: sliderValue[0]
+  }, getFormattedText(sliderValue[0])), minMaxDots && /*#__PURE__*/React.createElement(WrapperGroupLabelDots, null), minMaxValues && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(min)), /*#__PURE__*/React.createElement(MinMax, null, getFormattedText(max)))));
+});
+
+export { Slider };

package/dist/esm/components/Slider/Slider.tokens.js

@@ -0,0 +1,136 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  colors: {
+    ui: {
+      background__light: {
+        rgba: backgroundColor
+      },
+      background__default: {
+        rgba: backgroundColorDefault
+      },
+      background__medium: {
+        rgba: backgroundColorMedium
+      }
+    },
+    interactive: {
+      primary__resting: {
+        rgba: indicatorColor
+      },
+      primary__hover_alt: {
+        rgba: primaryHoverAlt
+      },
+      primary__hover: {
+        rgba: primaryHover
+      },
+      focus: {
+        rgba: focusOutlineColor
+      },
+      disabled__fill: {
+        rgba: backgroundColorDisabled
+      },
+      disabled__border: {
+        rgba: backgroundBorderDisabled
+      }
+    },
+    text: {
+      static_icons__tertiary: {
+        rgba: textColor
+      }
+    }
+  },
+  typography: {
+    paragraph
+  }
+} = tokens;
+const slider = {
+  background: backgroundColorDefault,
+  entities: {
+    track: {
+      background: backgroundColor,
+      height: '4px',
+      spacings: {
+        top: '24px',
+        bottom: '9px'
+      },
+      entities: {
+        indicator: {
+          background: indicatorColor,
+          states: {
+            hover: {
+              background: primaryHover
+            },
+            disabled: {
+              background: backgroundBorderDisabled
+            }
+          }
+        }
+      },
+      states: {
+        hover: {
+          background: backgroundColorMedium
+        }
+      }
+    },
+    output: {
+      typography: { ...paragraph.overline,
+        color: textColor
+      }
+    },
+    handle: {
+      background: backgroundColorDefault,
+      height: '12px',
+      width: '12px',
+      border: {
+        type: 'border',
+        color: indicatorColor,
+        radius: '50%',
+        width: '2px',
+        style: 'solid'
+      },
+      states: {
+        focus: {
+          outline: {
+            type: 'outline',
+            color: focusOutlineColor,
+            width: '1px',
+            style: 'dashed',
+            offset: '2px'
+          }
+        },
+        hover: {
+          background: primaryHoverAlt,
+          border: {
+            type: 'border',
+            color: primaryHover
+          }
+        }
+      }
+    },
+    dot: {
+      height: '6px',
+      width: '6px',
+      border: {
+        type: 'border',
+        color: backgroundColorMedium,
+        width: '1px',
+        style: 'solid',
+        radius: '50%'
+      },
+      spacings: {
+        bottom: '8px'
+      }
+    }
+  },
+  states: {
+    disabled: {
+      background: backgroundColorDisabled,
+      border: {
+        type: 'border',
+        color: backgroundColorMedium
+      }
+    }
+  }
+};
+
+export { slider };

package/dist/esm/components/Slider/SliderInput.js

@@ -0,0 +1,60 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { slider } from './Slider.tokens.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+import { outlineTemplate } from '../../utils/templates/focus.js';
+
+const {
+  entities: {
+    handle
+  },
+  states: {
+    disabled: _disabled
+  }
+} = slider;
+const track = css(["width:100%;height:100%;cursor:pointer;background:none;"]);
+const thumb = css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], bordersTemplate(handle.border), handle.height, handle.width, handle.background);
+const thumbHover = css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle.states.hover.background, handle.states.hover.border.type === 'border' && handle.states.hover.border.color);
+const thumbHoverAndDisabled = css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
+const thumbDisabled = css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.type === 'border' && _disabled.border.color);
+const StyledSliderInput = styled.input.attrs(() => ({
+  type: 'range'
+})).withConfig({
+  displayName: "SliderInput__StyledSliderInput",
+  componentId: "sc-17orw4f-0"
+})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], outlineTemplate(handle.states.focus.outline), outlineTemplate(handle.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track, track);
+const SliderInput = /*#__PURE__*/forwardRef(function SliderInput({
+  value,
+  min,
+  max,
+  id,
+  step,
+  onChange,
+  onMouseUp,
+  onKeyUp,
+  disabled,
+  ...restProps
+}, ref) {
+  return /*#__PURE__*/React.createElement(StyledSliderInput, _extends({}, restProps, {
+    value: value,
+    ref: ref,
+    min: min,
+    max: max,
+    id: id,
+    step: step,
+    onChange: event => {
+      onChange(event);
+    },
+    onMouseUp: event => {
+      onMouseUp(event);
+    },
+    onKeyUp: event => {
+      onKeyUp(event);
+    },
+    disabled: disabled
+  }));
+});
+SliderInput.displayName = 'SliderInput';
+
+export { SliderInput };

package/dist/esm/components/Snackbar/Snackbar.js

@@ -0,0 +1,59 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import * as ReactDom from 'react-dom';
+import styled, { css } from 'styled-components';
+import { snackbar } from './Snackbar.tokens.js';
+import { Paper } from '../Paper/Paper.js';
+import { spacingsTemplate, typographyTemplate } from '../../utils/templates/index.js';
+import { bordersTemplate } from '../../utils/templates/borders.js';
+
+const StyledSnackbar = styled(Paper).attrs(() => ({
+  role: 'alert'
+})).withConfig({
+  displayName: "Snackbar__StyledSnackbar",
+  componentId: "sc-ac6no8-0"
+})(["position:fixed;background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;z-index:300;", " a,button{color:", ";}"], snackbar.background, spacingsTemplate(snackbar.spacings), bordersTemplate(snackbar.border), typographyTemplate(snackbar.typography), snackbar.minHeight, ({
+  placement
+}) => css({
+  top: placement.includes('top') ? snackbar.spacings.top : placement === 'left' || placement === 'right' ? '50%' : undefined,
+  bottom: placement.includes('bottom') ? snackbar.spacings.bottom : undefined,
+  right: placement.includes('right') ? snackbar.spacings.right : undefined,
+  left: placement.includes('left') ? snackbar.spacings.left : placement === 'top' || placement === 'bottom' ? '50%' : undefined,
+  transform: placement === 'left' || placement === 'right' ? 'translateY(-50%)' : placement === 'top' || placement === 'bottom' ? 'translateX(-50%)' : undefined
+}), snackbar.entities.button.typography.color);
+const Snackbar = /*#__PURE__*/forwardRef(function Snackbar({
+  open = false,
+  autoHideDuration = 7000,
+  onClose,
+  placement = 'bottom',
+  children,
+  ...rest
+}, ref) {
+  const [visible, setVisible] = useState(open);
+  const timer = useRef();
+  const {
+    setTimeout,
+    clearTimeout
+  } = window;
+  useEffect(() => {
+    setVisible(open);
+    timer.current = setTimeout(() => {
+      setVisible(false);
+
+      if (onClose) {
+        onClose();
+      }
+    }, autoHideDuration);
+    return () => clearTimeout(timer.current);
+  }, [open, autoHideDuration, setVisible, onClose, clearTimeout, setTimeout]);
+  const props = {
+    ref,
+    placement,
+    ...rest
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, visible && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/React.createElement(StyledSnackbar, _extends({
+    elevation: "overlay"
+  }, props), children), document.body));
+});
+
+export { Snackbar };

package/dist/esm/components/Snackbar/Snackbar.tokens.js

@@ -0,0 +1,74 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const {
+  typography: {
+    ui: {
+      snackbar: typography
+    }
+  },
+  colors: {
+    ui: {
+      background__overlay: {
+        rgba: background
+      }
+    },
+    text: {
+      static_icons__primary_white: {
+        rgba: color
+      }
+    },
+    interactive: {
+      link_in_snackbars: {
+        rgba: buttonColor
+      }
+    }
+  },
+  spacings: {
+    comfortable: {
+      medium: spacingMedium,
+      x_large: spacingXLarge
+    }
+  },
+  clickbounds: {
+    default__base: clickbounds
+  },
+  shape: {
+    button: {
+      borderRadius: radius
+    }
+  }
+} = tokens;
+const snackbar = {
+  background,
+  minHeight: clickbounds,
+  border: {
+    type: 'border',
+    width: 0,
+    radius
+  },
+  entities: {
+    actions: {
+      spacings: {
+        left: spacingXLarge,
+        top: '-10px',
+        bottom: '-10px'
+      }
+    },
+    button: {
+      typography: {
+        color: buttonColor
+      }
+    }
+  },
+  spacings: {
+    left: spacingMedium,
+    bottom: spacingMedium,
+    right: spacingMedium,
+    top: spacingMedium
+  },
+  typography: { ...typography,
+    color
+  }
+};
+
+export { snackbar };

package/dist/esm/components/Snackbar/SnackbarAction.js

@@ -0,0 +1,19 @@
+import { forwardRef, Children } from 'react';
+import styled from 'styled-components';
+import { snackbar } from './Snackbar.tokens.js';
+
+const StyledSnackbarAction = styled.div.withConfig({
+  displayName: "SnackbarAction__StyledSnackbarAction",
+  componentId: "sc-1v5mjvd-0"
+})(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], snackbar.entities.actions.spacings.left, snackbar.entities.actions.spacings.top, snackbar.entities.actions.spacings.bottom);
+const SnackbarAction = /*#__PURE__*/forwardRef(function SnackbarAction({
+  children,
+  ...rest
+}, ref) {
+  const props = { ...rest,
+    ref
+  };
+  return /*#__PURE__*/React.createElement(StyledSnackbarAction, props, Children.only(children));
+});
+
+export { SnackbarAction };

package/dist/esm/components/Snackbar/index.js

@@ -0,0 +1,7 @@
+import { SnackbarAction } from './SnackbarAction.js';
+import { Snackbar as Snackbar$1 } from './Snackbar.js';
+
+const Snackbar = Snackbar$1;
+Snackbar.Action = SnackbarAction;
+
+export { Snackbar };