@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/components/Select/Select.tokens.js

@@ -0,0 +1,311 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import { calculateHeightWithLineHeight } from '../../utils/text.js';
+import { hoverInputfield, hoverDangerInputfield } from '../../helpers/styling/hover.js';
+import { focusInputfield, focusDangerInputfield } from '../../helpers/styling/focus.js';
+import { dangerInputfield } from '../../helpers/styling/danger.js';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages,
+    BorderRadius = ddsBaseTokens.borderRadius,
+    Border = ddsBaseTokens.border,
+    IconSizes = ddsBaseTokens.iconSizes;
+var textDefault = ddsReferenceTokens.textDefault;
+var multiValueContainerMinHeight = "".concat(Spacing.SizesDdsSpacingLocalX0125NumberPx * 2 + Spacing.SizesDdsSpacingLocalX025NumberPx * 2 + calculateHeightWithLineHeight(FontPackages.supportingStyle_inputtext_01.numbers.lineHeightNumber, FontPackages.supportingStyle_inputtext_01.numbers.fontSizeNumber), "px"); //custom spacing so that multiselect has same height as single value select
+
+var valueContainerMarginBottomMultiWithLabel = "".concat(Spacing.SizesDdsSpacingLocalX025NumberPx + Spacing.SizesDdsSpacingLocalX0125NumberPx, "px"); //custom spacing so that multiselect has same height as single value select
+
+var inputMultiNoLabelPaddingTop = "".concat(Spacing.SizesDdsSpacingLocalX05NumberPx + Spacing.SizesDdsSpacingLocalX0125NumberPx, "px");
+var labelBase = Object.assign({
+  color: Colors.DdsColorNeutralsGray7,
+  paddingTop: Spacing.SizesDdsSpacingLocalX075,
+  paddingLeft: Spacing.SizesDdsSpacingLocalX1,
+  paddingBottom: 0,
+  paddingRight: Spacing.SizesDdsSpacingLocalX05
+}, FontPackages.supportingStyle_label_01.base);
+var labelHoverBase = {
+  color: Colors.DdsColorInteractiveBase
+};
+var labelFocusBase = {
+  color: Colors.DdsColorInteractiveBase
+};
+var valueContainerWithLabelBase = {
+  marginBottom: Spacing.SizesDdsSpacingLocalX075
+};
+var valueContainerNoLabelBase = {
+  marginBottom: Spacing.SizesDdsSpacingLocalX075
+};
+var valueContainerIsMultiBase = {
+  minHeight: multiValueContainerMinHeight
+};
+var valueContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var valueContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing.SizesDdsSpacingLocalX05
+};
+var containerBase = {
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  borderColor: Colors.DdsColorNeutralsGray5,
+  backgroundColor: Colors.DdsColorNeutralsWhite
+};
+var containerHoverBase = Object.assign({}, hoverInputfield);
+var containerFocusBase = Object.assign({}, focusInputfield);
+var containerDangerBase = Object.assign({}, dangerInputfield);
+var containerDangerHoverBase = Object.assign({}, hoverDangerInputfield);
+var containerDangerFocusBase = Object.assign({}, focusDangerInputfield);
+var inputBase = Object.assign({
+  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX05, " 0 ").concat(Spacing.SizesDdsSpacingLocalX1)
+}, FontPackages.supportingStyle_inputtext_02.base);
+var inputNoLabelBase = {
+  paddingTop: Spacing.SizesDdsSpacingLocalX075
+};
+var inputIsMultiNoLabelBase = {
+  paddingTop: inputMultiNoLabelPaddingTop
+};
+var placeholderBase = Object.assign({
+  color: Colors.DdsColorNeutralsGray6
+}, FontPackages.supportingStyle_placeholdertext_01.base);
+var indicatorsContainerWithLabelBase = {
+  marginBottom: Spacing.SizesDdsSpacingLocalX1
+};
+var indicatorsContainerNoLabelBase = {
+  marginBottom: Spacing.SizesDdsSpacingLocalX075
+};
+var indicatorsContainerIsMultiWithLabelBase = {
+  marginBottom: valueContainerMarginBottomMultiWithLabel
+};
+var indicatorsContainerIsMultiNoLabelBase = {
+  marginBottom: Spacing.SizesDdsSpacingLocalX05
+};
+var dropdownIndicatorBase = {
+  color: Colors.DdsColorNeutralsGray6,
+  padding: 0
+};
+var dropdownIndicatorHoverBase = {
+  color: Colors.DdsColorInteractiveBase
+};
+var drodownIndicatorReadOnlyBase = {
+  color: 'transparent'
+};
+var clearIndicatorBase = {
+  color: Colors.DdsColorNeutralsGray6,
+  padding: " 0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 0")
+};
+var loadingIndicatorBase = {
+  color: Colors.DdsColorNeutralsGray6,
+  padding: 0
+};
+var clearIndicatorHoverBase = {
+  color: Colors.DdsColorInteractiveBase
+};
+var menuBase = {
+  border: '1px solid',
+  borderColor: Colors.DdsColorInteractiveBase,
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  marginTop: Spacing.SizesDdsSpacingLocalX025,
+  marginBottom: Spacing.SizesDdsSpacingLocalX025
+};
+var optionBase = Object.assign(Object.assign({
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1)
+}, FontPackages.body_sans_02.base), {
+  color: textDefault.textColor
+});
+var optionHoverBase = {
+  backgroundColor: Colors.DdsColorInteractiveLighter
+};
+var optionSelectedBase = Object.assign(Object.assign({
+  backgroundColor: Colors.DdsColorInteractiveLightest
+}, FontPackages.body_sans_02.base), {
+  fontWeight: 600
+});
+var noOptionsMessageBase = Object.assign({
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1),
+  color: Colors.DdsColorNeutralsGray6
+}, FontPackages.supportingStyle_placeholdertext_01.base);
+var multiValueBase = {
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  margin: Spacing.SizesDdsSpacingLocalX0125
+};
+var multiValueEnabledBase = {
+  backgroundColor: Colors.DdsColorInteractiveLighter
+};
+var multiValueDisabledBase = {
+  backgroundColor: Colors.DdsColorNeutralsGray3
+};
+var multiValueLabelBase = Object.assign(Object.assign({
+  paddingTop: "".concat(Spacing.SizesDdsSpacingLocalX025),
+  paddingRight: "".concat(Spacing.SizesDdsSpacingLocalX05),
+  paddingLeft: "".concat(Spacing.SizesDdsSpacingLocalX05),
+  paddingBottom: "".concat(Spacing.SizesDdsSpacingLocalX025),
+  color: Colors.DdsColorNeutralsGray9
+}, FontPackages.supportingStyle_inputtext_01.base), {
+  fontWeight: 'bold'
+});
+var multiValueRemoveBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX025),
+  color: Colors.DdsColorNeutralsGray9
+};
+var multiValueRemoveHoverBase = {
+  color: Colors.DdsColorNeutralsWhite,
+  backgroundColor: Colors.DdsColorInteractiveBase
+};
+var multiValueRemoveIconBase = {
+  height: IconSizes.DdsIconsizeSmall,
+  width: IconSizes.DdsIconsizeSmall
+};
+var containerDisabledBase = {
+  backgroundColor: Colors.DdsColorNeutralsGray1,
+  borderColor: Colors.DdsColorNeutralsGray5
+};
+var containerReadOnlyBase = {
+  borderColor: 'transparent',
+  backgroundColor: 'transparent'
+};
+var defaultWidth = '320px';
+var selectTokens = {
+  container: {
+    base: containerBase,
+    defaultWidth: defaultWidth,
+    hover: {
+      base: containerHoverBase
+    },
+    focus: {
+      base: containerFocusBase
+    },
+    danger: {
+      base: containerDangerBase,
+      hover: {
+        base: containerDangerHoverBase
+      },
+      focus: {
+        base: containerDangerFocusBase
+      }
+    },
+    disabled: {
+      base: containerDisabledBase
+    },
+    readOnly: {
+      base: containerReadOnlyBase
+    }
+  },
+  label: {
+    base: labelBase,
+    hover: {
+      base: labelHoverBase
+    },
+    focus: {
+      base: labelFocusBase
+    }
+  },
+  input: {
+    base: inputBase,
+    noLabel: {
+      base: inputNoLabelBase
+    },
+    isMulti: {
+      noLabel: {
+        base: inputIsMultiNoLabelBase
+      }
+    }
+  },
+  placeholder: {
+    base: placeholderBase
+  },
+  menu: {
+    base: menuBase,
+    spaceTop: Spacing.SizesDdsSpacingLocalX1NumberPx + 2 //grunnet shadow-box
+
+  },
+  option: {
+    base: optionBase,
+    hover: {
+      base: optionHoverBase
+    },
+    selected: {
+      base: optionSelectedBase,
+      icon: {
+        margin: "0 ".concat(Spacing.SizesDdsSpacingLocalX05, " 0 0")
+      }
+    }
+  },
+  valueContainer: {
+    withLabel: {
+      base: valueContainerWithLabelBase
+    },
+    noLabel: {
+      base: valueContainerNoLabelBase
+    },
+    isMulti: {
+      base: valueContainerIsMultiBase,
+      withLabel: {
+        base: valueContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: valueContainerIsMultiNoLabelBase
+      }
+    }
+  },
+  multiValue: {
+    base: multiValueBase,
+    enabled: {
+      base: multiValueEnabledBase
+    },
+    disabled: {
+      base: multiValueDisabledBase
+    }
+  },
+  multiValueLabel: {
+    base: multiValueLabelBase
+  },
+  multiValueRemove: {
+    base: multiValueRemoveBase,
+    hover: {
+      base: multiValueRemoveHoverBase
+    },
+    icon: {
+      base: multiValueRemoveIconBase
+    }
+  },
+  indicatorsContainer: {
+    withLabel: {
+      base: indicatorsContainerWithLabelBase
+    },
+    noLabel: {
+      base: indicatorsContainerNoLabelBase
+    },
+    isMulti: {
+      withLabel: {
+        base: indicatorsContainerIsMultiWithLabelBase
+      },
+      noLabel: {
+        base: indicatorsContainerIsMultiNoLabelBase
+      }
+    }
+  },
+  dropdownIndicator: {
+    base: dropdownIndicatorBase,
+    hover: {
+      base: dropdownIndicatorHoverBase
+    },
+    readOnly: {
+      base: drodownIndicatorReadOnlyBase
+    }
+  },
+  noOptionsMessage: {
+    base: noOptionsMessageBase
+  },
+  clearIndicator: {
+    base: clearIndicatorBase,
+    hover: {
+      base: clearIndicatorHoverBase
+    }
+  },
+  loadingIndicator: {
+    base: loadingIndicatorBase
+  }
+};
+
+export { multiValueContainerMinHeight, selectTokens };

package/dist/components/SkipToContent/SkipToContent.js

@@ -0,0 +1,49 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { skipToContentTokens } from './SkipToContent.tokens.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Wrapper = styled.div.withConfig({
+  displayName: "SkipToContent__Wrapper",
+  componentId: "sc-57o1qv-0"
+})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;", " &:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
+  var top = _ref.top;
+  return top;
+}, skipToContentTokens.wrapper.base);
+var Link = styled.a.withConfig({
+  displayName: "SkipToContent__Link",
+  componentId: "sc-57o1qv-1"
+})(["", " &:focus{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover{", "}"], skipToContentTokens.link.base, skipToContentTokens.link.focus.base, focusVisibleTransitionValue, skipToContentTokens.link.hover.base);
+var SkipToContent = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$text = props.text,
+      text = _props$text === void 0 ? 'Til hovedinnhold' : _props$text,
+      _props$top = props.top,
+      top = _props$top === void 0 ? 0 : _props$top,
+      id = props.id,
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["text", "top", "id", "className", "htmlProps"]);
+
+  var htmlPropsClassName = htmlProps.className,
+      style = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["className", "style"]);
+
+  var wrapperProps = {
+    top: top,
+    className: joinClassNames(className, htmlPropsClassName),
+    style: style
+  };
+  return jsx(Wrapper, Object.assign({}, wrapperProps, {
+    children: jsx(Link, Object.assign({}, getBaseHTMLProps(id, restHtmlProps, rest), {
+      ref: ref
+    }, {
+      children: text
+    }))
+  }));
+});
+
+export { SkipToContent };

package/dist/components/SkipToContent/SkipToContent.tokens.js

@@ -0,0 +1,40 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisibleOnDark } from '../../helpers/styling/focusVisible.js';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages,
+    Border = ddsBaseTokens.border;
+var linkBase = Object.assign(Object.assign({
+  color: Colors.DdsColorNeutralsWhite
+}, FontPackages.body_sans_02.base), {
+  textDecoration: 'none'
+});
+var linkHoverBase = {
+  color: Colors.DdsColorNeutralsWhite
+};
+var linkFocusBase = Object.assign({}, focusVisibleOnDark);
+var wrapperBase = {
+  backgroundColor: Colors.DdsColorPrimaryBase,
+  padding: Spacing.SizesDdsSpacingLocalX025
+};
+var skipToContentTokens = {
+  link: {
+    base: linkBase,
+    hover: {
+      base: linkHoverBase
+    },
+    focus: {
+      base: linkFocusBase
+    },
+    focusOutline: {
+      color: Colors.DdsColorWarningDark,
+      width: Border.BordersDdsBorderFocusBaseStrokeWeight
+    }
+  },
+  wrapper: {
+    base: wrapperBase
+  }
+};
+
+export { skipToContentTokens };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,80 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { spinnerTokens } from './Spinner.tokens.js';
+import { getTextColor } from '../Typography/Typography.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var StyledSpinner = styled.svg.withConfig({
+  displayName: "Spinner__StyledSpinner",
+  componentId: "sc-13hsttm-0"
+})(["display:block;width:", ";height:", ";stroke-dasharray:90,150;animation:rotate 1.5s linear infinite;animation-delay:", "ms;@media (prefers-reduced-motion:no-preference){animation:rotate 2s linear infinite;}@keyframes rotate{100%{transform:rotate(360deg);}}"], function (_ref) {
+  var size = _ref.size;
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size;
+}, function (_ref3) {
+  var outerAnimationDelay = _ref3.outerAnimationDelay;
+  return outerAnimationDelay;
+});
+var Circle = styled.circle.withConfig({
+  displayName: "Spinner__Circle",
+  componentId: "sc-13hsttm-1"
+})(["", " stroke:", ";stroke-linecap:round;@media (prefers-reduced-motion:no-preference){animation:dash 1.5s ease-in-out infinite;animation-delay:", "ms;@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}}"], spinnerTokens.circle.base, function (_ref4) {
+  var color = _ref4.color;
+  return color && getTextColor(color);
+}, function (_ref5) {
+  var innerAnimationDelay = _ref5.innerAnimationDelay;
+  return innerAnimationDelay;
+});
+var nextUniqueId = 0;
+function Spinner(props) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? ddsBaseTokens.iconSizes.DdsIconsizeMedium : _props$size,
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'interactive' : _props$color,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["size", "color", "id", "className", "htmlProps"]);
+
+  var mountTime = React.useRef(Date.now());
+  var outerAnimationDelay = -(mountTime.current % 2000);
+  var innerAnimationDelay = -(mountTime.current % 1500);
+
+  var _useState = useState("spinnerTitle-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var spinnerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    outerAnimationDelay: outerAnimationDelay,
+    size: size
+  });
+  var circleProps = {
+    innerAnimationDelay: innerAnimationDelay,
+    color: color
+  };
+  return jsxs(StyledSpinner, Object.assign({
+    viewBox: "0 0 50 50",
+    role: "img",
+    "aria-labelledby": uniqueId
+  }, spinnerProps, {
+    children: [jsx("title", Object.assign({
+      id: uniqueId
+    }, {
+      children: "innlastning p\xE5g\xE5r"
+    })), jsx(Circle, Object.assign({}, circleProps, {
+      cx: "25",
+      cy: "25",
+      r: "20",
+      fill: "none",
+      strokeWidth: "4"
+    }))]
+  }));
+}
+
+export { Spinner };

package/dist/components/Spinner/Spinner.tokens.js

@@ -0,0 +1,13 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Colors = ddsBaseTokens.colors;
+var ciclreBase = {
+  stroke: Colors.DdsColorInteractiveBase
+};
+var spinnerTokens = {
+  circle: {
+    base: ciclreBase
+  }
+};
+
+export { spinnerTokens };

package/dist/components/Table/Body.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+var StyledBody = styled.tbody.withConfig({
+  displayName: "Body__StyledBody",
+  componentId: "sc-67qjfs-0"
+})([""]);
+var Body = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var bodyProps = Object.assign({}, rest);
+  return jsx(StyledBody, Object.assign({
+    ref: ref
+  }, bodyProps, {
+    children: children
+  }));
+});
+
+export { Body };

package/dist/components/Table/Cell.js

@@ -0,0 +1,75 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { cellTokens } from './Cell.tokens.js';
+
+var layoutStyle = function layoutStyle(layout) {
+  switch (layout) {
+    case 'center':
+      return css(["justify-content:center;"]);
+
+    case 'right':
+      return css(["justify-content:flex-end;"]);
+
+    case 'text and icon':
+      return css(["& > *:first-of-type{", "}"], cellTokens.data.layout.textAndIcon.base);
+
+    default:
+    case 'left':
+      return;
+  }
+};
+
+var StyledCell = styled.td.withConfig({
+  displayName: "Cell__StyledCell",
+  componentId: "sc-ghfpfs-0"
+})(["", " ", ""], cellTokens.base, function (_ref) {
+  var type = _ref.type;
+  return type && css(["", ""], cellTokens[type].base);
+});
+var InnerCell = styled.div.withConfig({
+  displayName: "Cell__InnerCell",
+  componentId: "sc-ghfpfs-1"
+})(["display:flex;align-items:center;", ""], function (_ref2) {
+  var layout = _ref2.layout;
+  return layoutStyle(layout);
+});
+
+var getTableCellType = function getTableCellType(type) {
+  switch (type) {
+    case 'head':
+      return 'th';
+
+    default:
+    case 'data':
+      return 'td';
+  }
+};
+
+var Cell = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'data' : _a$type,
+      _a$layout = _a.layout,
+      layout = _a$layout === void 0 ? 'left' : _a$layout,
+      rest = __rest(_a, ["children", "type", "layout"]);
+
+  var as = getTableCellType(type);
+  var cellProps = Object.assign({
+    as: as,
+    type: type
+  }, rest);
+  var innerCellProps = {
+    layout: layout
+  };
+  return jsx(StyledCell, Object.assign({
+    ref: ref
+  }, cellProps, {
+    children: jsx(InnerCell, Object.assign({}, innerCellProps, {
+      children: children
+    }))
+  }));
+});
+
+export { Cell };

package/dist/components/Table/Cell.tokens.js

@@ -0,0 +1,55 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing;
+var cellBase = {};
+var compactCellBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX075)
+};
+var headBase = {
+  backgroundColor: Colors.DdsColorPrimaryLightest
+};
+var dataBase = {};
+var normalCellBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX15, " ").concat(Spacing.SizesDdsSpacingLocalX075)
+};
+var sortCellIconBase = {
+  marginInlineStart: Spacing.SizesDdsSpacingLocalX05
+};
+var sortCellFocusBase = Object.assign({}, focusVisible);
+var textAndIconBase = {
+  marginRight: Spacing.SizesDdsSpacingLocalX075
+};
+var cellTokens = {
+  base: cellBase,
+  density: {
+    normal: {
+      base: normalCellBase
+    },
+    compact: {
+      base: compactCellBase
+    }
+  },
+  head: {
+    base: headBase,
+    sortCell: {
+      icon: {
+        base: sortCellIconBase
+      },
+      focus: {
+        base: sortCellFocusBase
+      }
+    }
+  },
+  data: {
+    base: dataBase,
+    layout: {
+      textAndIcon: {
+        base: textAndIconBase
+      }
+    }
+  }
+};
+
+export { cellTokens };

package/dist/components/Table/Foot.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+var StyledFoot = styled.tfoot.withConfig({
+  displayName: "Foot__StyledFoot",
+  componentId: "sc-tfpehd-0"
+})([""]);
+var Foot = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var footProps = Object.assign({}, rest);
+  return jsx(StyledFoot, Object.assign({
+    ref: ref
+  }, footProps, {
+    children: children
+  }));
+});
+
+export { Foot };

package/dist/components/Table/Head.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+var StyledHead = styled.thead.withConfig({
+  displayName: "Head__StyledHead",
+  componentId: "sc-vzd2kv-0"
+})([""]);
+var Head = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var headProps = Object.assign({}, rest);
+  return jsx(StyledHead, Object.assign({
+    ref: ref
+  }, headProps, {
+    children: children
+  }));
+});
+
+export { Head };