@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/components/Tabs/Tabs.tokens.js

@@ -0,0 +1,96 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
+
+var Border = ddsBaseTokens.border,
+    Spacing = ddsBaseTokens.spacing,
+    Colors = ddsBaseTokens.colors;
+var tabListBase = {
+  '@media (prefers-reduced-motion: no-preference)': {
+    transition: focusVisibleTransitionValue
+  },
+  display: 'flex',
+  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke),
+  overflowX: 'auto'
+};
+var tabListFocusBase = Object.assign({}, focusVisible);
+var tabBase = Object.assign(Object.assign({}, removeButtonStyling), {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid transparent"),
+  color: Colors.DdsColorNeutralsGray7
+});
+var tabRowBase = {
+  flexDirection: 'row',
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX05),
+  gap: Spacing.SizesDdsSpacingLocalX05
+};
+var tabColumnBase = {
+  flexDirection: 'column',
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX025),
+  gap: Spacing.SizesDdsSpacingLocalX025
+};
+var tabActiveBase = {
+  backgroundColor: Colors.DdsColorInteractiveLightest,
+  color: Colors.DdsColorInteractiveDarkest,
+  boxShadow: "inset 0 -2px 0 0 ".concat(Colors.DdsColorInteractiveDarker),
+  borderBottom: "1px solid ".concat(Colors.DdsColorInteractiveDarker)
+};
+var tabHoverBase = {
+  color: Colors.DdsColorInteractiveDarkest,
+  boxShadow: "inset 0 -2px 0 0 ".concat(Colors.DdsColorInteractiveDarker),
+  borderBottom: "1px solid ".concat(Colors.DdsColorInteractiveDarker)
+};
+var tabActiveHoverBase = {
+  backgroundColor: Colors.DdsColorInteractiveLightest,
+  color: Colors.DdsColorInteractiveDarkest,
+  boxShadow: "inset 0 -2px 0 0 ".concat(Colors.DdsColorInteractiveDarker),
+  borderBottom: "1px solid ".concat(Colors.DdsColorInteractiveDarker)
+};
+var tabFocusBase = Object.assign(Object.assign({}, focusVisible), {
+  outlineOffset: '-1px'
+});
+var tabPanelBase = {
+  padding: Spacing.SizesDdsSpacingLocalX025
+};
+var tabPanelFocusVisibleBase = Object.assign({}, focusVisible);
+var tabsTokens = {
+  tabList: {
+    base: tabListBase,
+    focus: {
+      base: tabListFocusBase
+    }
+  },
+  tab: {
+    base: tabBase,
+    direction: {
+      row: {
+        base: tabRowBase
+      },
+      column: {
+        base: tabColumnBase
+      }
+    },
+    active: {
+      base: tabActiveBase
+    },
+    hover: {
+      base: tabHoverBase,
+      active: {
+        base: tabActiveHoverBase
+      }
+    },
+    focus: {
+      base: tabFocusBase
+    }
+  },
+  panel: {
+    base: tabPanelBase,
+    focusVisible: {
+      base: tabPanelFocusVisibleBase
+    }
+  }
+};
+
+export { tabsTokens };

package/dist/components/Tag/Tag.js

@@ -0,0 +1,41 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { tagTokens } from './Tag.tokens.js';
+import { Typography } from '../Typography/Typography.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Wrapper = styled(Typography).withConfig({
+  displayName: "Tag__Wrapper",
+  componentId: "sc-rdxtch-0"
+})(["", " ", ""], tagTokens.wrapper.base, function (_ref) {
+  var purpose = _ref.purpose;
+  return css(["", ""], tagTokens.wrapper.type[purpose].base);
+});
+var Inner = styled.span.withConfig({
+  displayName: "Tag__Inner",
+  componentId: "sc-rdxtch-1"
+})(["", ""], tagTokens.inner.base);
+var Tag = /*#__PURE__*/forwardRef(function (props, ref) {
+  var text = props.text,
+      _props$purpose = props.purpose,
+      purpose = _props$purpose === void 0 ? 'default' : _props$purpose,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["text", "purpose", "id", "className", "htmlProps"]);
+
+  return jsx(Wrapper, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    forwardedAs: "span",
+    typographyType: "bodySans01",
+    ref: ref,
+    purpose: purpose
+  }, {
+    children: jsx(Inner, {
+      children: text
+    })
+  }));
+});
+
+export { Tag };

package/dist/components/Tag/Tag.tokens.js

@@ -0,0 +1,54 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { localMessageTokens } from '../LocalMessage/LocalMessage.tokens.js';
+
+var colors = ddsBaseTokens.colors,
+    borderRadius = ddsBaseTokens.borderRadius,
+    spacing = ddsBaseTokens.spacing;
+var wrapperBase = {
+  border: '1px solid',
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+  padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
+  maxWidth: '100%',
+  display: 'inline-flex',
+  alignItems: 'center'
+};
+var innerBase = {
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
+var defaultBase = {
+  backgroundColor: colors.DdsColorNeutralsGray1,
+  borderColor: colors.DdsColorNeutralsGray3
+};
+var successBase = Object.assign({}, localMessageTokens.container.success.base);
+var warningBase = Object.assign({}, localMessageTokens.container.warning.base);
+var dangerBase = Object.assign({}, localMessageTokens.container.danger.base);
+var infoBase = Object.assign({}, localMessageTokens.container.info.base);
+var tagTokens = {
+  wrapper: {
+    base: wrapperBase,
+    type: {
+      success: {
+        base: successBase
+      },
+      warning: {
+        base: warningBase
+      },
+      danger: {
+        base: dangerBase
+      },
+      "default": {
+        base: defaultBase
+      },
+      info: {
+        base: infoBase
+      }
+    }
+  },
+  inner: {
+    base: innerBase
+  }
+};
+
+export { tagTokens };

package/dist/components/TextInput/CharCounter.js

@@ -0,0 +1,37 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { charCounterTokens } from './CharCounter.tokens.js';
+import { Typography } from '../Typography/Typography.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Wrapper = styled(Typography).withConfig({
+  displayName: "CharCounter__Wrapper",
+  componentId: "sc-qty1z2-0"
+})(["margin-left:auto;", ""], charCounterTokens.base);
+var nextUniqueId = 0;
+
+function CharCounter(props) {
+  var current = props.current,
+      max = props.max,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["current", "max", "id", "className", "htmlProps"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "characterCounter-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  return jsxs(Wrapper, Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest), {
+    forwardedAs: "div",
+    typographyType: "supportingStyleHelperText01",
+    "aria-label": "".concat(current, " av ").concat(max, " tegn skrevet")
+  }, {
+    children: [current, "/", max]
+  }));
+}
+
+export { CharCounter as default };

package/dist/components/TextInput/CharCounter.tokens.js

@@ -0,0 +1,11 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing;
+var charCounterBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX025, " ").concat(Spacing.SizesDdsSpacingLocalX05)
+};
+var charCounterTokens = {
+  base: charCounterBase
+};
+
+export { charCounterTokens };

package/dist/components/TextInput/TextInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TextInput: React.ForwardRefExoticComponent<{
     multiline?: boolean | undefined;
+    withCharacterCounter?: boolean | undefined;
 } & {
     label?: string | undefined;
     width?: import("csstype").Property.Width<string> | undefined;

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,139 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { textInputTokens } from './TextInput.tokens.js';
+import CharCounter from './CharCounter.js';
+import { TextArea, Label, MessageContainer } from './TextInput.styles.js';
+import { OuterInputContainer, InputContainer, StatefulInput } from '../../helpers/Input/Input.styles.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+
+var nextUniqueId = 0;
+var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var label = _a.label,
+      disabled = _a.disabled,
+      readOnly = _a.readOnly,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      required = _a.required,
+      maxLength = _a.maxLength,
+      multiline = _a.multiline,
+      onChange = _a.onChange,
+      id = _a.id,
+      _a$width = _a.width,
+      width = _a$width === void 0 ? textInputTokens.wrapper.defaultWidth : _a$width,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'text' : _a$type,
+      _a$withCharacterCount = _a.withCharacterCounter,
+      withCharacterCounter = _a$withCharacterCount === void 0 ? true : _a$withCharacterCount,
+      className = _a.className,
+      style = _a.style,
+      ariaDescribedby = _a['aria-describedby'],
+      rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "multiline", "onChange", "id", "width", "type", "withCharacterCounter", "className", "style", 'aria-describedby']);
+
+  var textAreaRef = useRef(null);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  useEffect(function () {
+    if (textAreaRef && textAreaRef.current) {
+      textAreaRef.current.style.height = "".concat(textAreaRef.current.scrollHeight + 2, "px");
+    }
+  }, [text]);
+
+  var onChangeHandler = function onChangeHandler(event) {
+    setText(event.target.value);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  var onChangeHandlerMultiline = function onChangeHandlerMultiline(event) {
+    setText(event.target.value);
+
+    if (onChange) {
+      onChange(event);
+    }
+  };
+
+  var _useState3 = useState(id !== null && id !== void 0 ? id : "textInput-".concat(nextUniqueId++)),
+      _useState4 = _slicedToArray(_useState3, 1),
+      uniqueId = _useState4[0];
+
+  var hasErrorMessage = !!errorMessage;
+  var hasTip = !!tip;
+  var hasLabel = !!label;
+  var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
+  var hasMessage = hasErrorMessage || hasTip || !!maxLength;
+  var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter', maxLength && withCharacterCounter);
+  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
+  var generalInputProps = Object.assign({
+    id: uniqueId,
+    hasLabel: labelPresence,
+    errorMessage: errorMessage,
+    hasErrorMessage: hasErrorMessage,
+    required: required,
+    disabled: disabled,
+    readOnly: readOnly,
+    tabIndex: readOnly ? -1 : 0,
+    maxLength: maxLength,
+    'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, characterCounterId, ariaDescribedby]),
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  var labelProps = {
+    multiline: multiline,
+    disabled: disabled,
+    readOnly: readOnly
+  };
+  var inputContainerProps = {
+    multiline: multiline,
+    label: label
+  };
+  var outerInputContainerProps = {
+    className: className,
+    style: style,
+    width: width
+  };
+  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [jsxs(InputContainer, Object.assign({}, inputContainerProps, {
+      children: [multiline ? jsx(TextArea, Object.assign({
+        ref: textAreaRef,
+        as: "textarea",
+        onChange: onChangeHandlerMultiline
+      }, generalInputProps)) : jsx(StatefulInput, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type
+      }, generalInputProps)), hasLabel && jsxs(Label, Object.assign({}, labelProps, {
+        typographyType: "supportingStyleLabel01",
+        forwardedAs: "label",
+        htmlFor: uniqueId
+      }, {
+        children: [label, " ", required && jsx(RequiredMarker, {})]
+      }))]
+    })), hasMessage && jsxs(MessageContainer, {
+      children: [hasErrorMessage && jsx(InputMessage, {
+        message: errorMessage,
+        messageType: "error",
+        id: errorMessageId
+      }), hasTip && !errorMessage && jsx(InputMessage, {
+        message: tip,
+        messageType: "tip",
+        id: tipId
+      }), maxLength && Number.isInteger(maxLength) && maxLength > 0 && withCharacterCounter && jsx(CharCounter, {
+        id: characterCounterId,
+        current: text.length,
+        max: maxLength
+      })]
+    })]
+  }));
+});
+
+export { TextInput };

package/dist/components/TextInput/TextInput.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
         multiline?: boolean | undefined;
+        withCharacterCounter?: boolean | undefined;
     } & {
         label?: string | undefined;
         width?: import("csstype").Property.Width<string> | undefined;

package/dist/components/TextInput/TextInput.styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import { textInputTokens } from './TextInput.tokens.js';
+import { StatefulInput, Label as Label$1 } from '../../helpers/Input/Input.styles.js';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { inputTokens } from '../../helpers/Input/Input.tokens.js';
+
+var TextArea = styled(StatefulInput).withConfig({
+  displayName: "TextInputstyles__TextArea",
+  componentId: "sc-165zflr-0"
+})(["", " ", " ", " &:hover:enabled:read-write ~ label{background-color:", ";}"], scrollbarStyling, textInputTokens.multiline.base, function (_ref) {
+  var hasLabel = _ref.hasLabel;
+  return css(["", ""], textInputTokens.multiline[hasLabel].base);
+}, function (_ref2) {
+  var hasErrorMessage = _ref2.hasErrorMessage;
+  return hasErrorMessage ? inputTokens.error.hover.base.backgroundColor : inputTokens.general.input.hover.backgroundColor;
+});
+var MessageContainer = styled.div.withConfig({
+  displayName: "TextInputstyles__MessageContainer",
+  componentId: "sc-165zflr-1"
+})(["display:flex;justify-content:space-between;"]);
+var Label = styled(Label$1).withConfig({
+  displayName: "TextInputstyles__Label",
+  componentId: "sc-165zflr-2"
+})(["", " ", ""], function (_ref3) {
+  var multiline = _ref3.multiline;
+  return multiline && css(["", ""], textInputTokens.label.multiline.base);
+}, function (_ref4) {
+  var multiline = _ref4.multiline,
+      disabled = _ref4.disabled,
+      readOnly = _ref4.readOnly;
+  return multiline && readOnly ? css(["background-color:", ";"], inputTokens.readOnly.base.backgroundColor) : multiline && disabled ? css(["background-color:", ";"], inputTokens.readOnly.base.backgroundColor) : '';
+});
+
+export { Label, MessageContainer, TextArea };

package/dist/components/TextInput/TextInput.tokens.js

@@ -0,0 +1,50 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import { scrollbarWidthNumberPx } from '../../helpers/styling/scrollbarStyling.js';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing;
+var TextInput = ddsReferenceTokens.textInput;
+var inputMultilineBase = {
+  height: 'auto',
+  resize: 'vertical',
+  paddingBottom: Spacing.SizesDdsSpacingLocalX05,
+  verticalAlign: 'bottom'
+};
+var inputMultilineWithLabelBase = {
+  paddingTop: Spacing.SizesDdsSpacingLocalX2,
+  minHeight: '99px'
+};
+var inputMultilineNoLabelBase = {
+  paddingTop: Spacing.SizesDdsSpacingLocalX075,
+  minHeight: '78px'
+};
+var inputLabelMultilineBase = {
+  marginTop: Spacing.SizesDdsSpacingLocalX0125,
+  marginLeft: Spacing.SizesDdsSpacingLocalX0125,
+  width: "calc(100% - ".concat(scrollbarWidthNumberPx + Spacing.SizesDdsSpacingLocalX0125NumberPx + 1, "px)"),
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX075NumberPx - 2, "px ").concat(Spacing.SizesDdsSpacingLocalX1, " 0px ").concat(Spacing.SizesDdsSpacingLocalX1NumberPx - 2, "px")
+};
+var defaultWidth = '320px';
+var textInputTokens = {
+  general: TextInput,
+  multiline: {
+    base: inputMultilineBase,
+    hasLabel: {
+      base: inputMultilineWithLabelBase
+    },
+    noLabel: {
+      base: inputMultilineNoLabelBase
+    }
+  },
+  label: {
+    multiline: {
+      base: inputLabelMultilineBase
+    }
+  },
+  wrapper: {
+    defaultWidth: defaultWidth
+  }
+};
+
+export { textInputTokens };

package/dist/components/TextInput/TextInput.types.d.ts

@@ -3,4 +3,6 @@ import { InputProps } from '../../helpers';
 export declare type TextInputProps = {
     /**Gjør inputfeltet om til `<textarea>`. */
     multiline?: boolean;
+    /** Spesifiserer om tegntelleren skal vises. */
+    withCharacterCounter?: boolean;
 } & InputProps & InputHTMLAttributes<HTMLTextAreaElement>;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,56 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import styled from 'styled-components';
+import { buttonTokens } from '../Button/Button.tokens.js';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { toggleButtonTokens } from './ToggleButton.tokens.js';
+import { hideInput } from '../../helpers/styling/hideInput.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+
+var Input = styled.input.withConfig({
+  displayName: "ToggleButton__Input",
+  componentId: "sc-ya01sa-0"
+})(["", ""], hideInput);
+var Content = styled.span.withConfig({
+  displayName: "ToggleButton__Content",
+  componentId: "sc-ya01sa-1"
+})(["display:flex;align-items:center;width:100%;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;}", ";cursor:pointer;", " width:fit-content;", " ", " ", " &::selection,*::selection{", "}&:hover{", "}"], focusVisibleTransitionValue, buttonTokens.base, buttonTokens.appearance.rounded.base, buttonTokens.sizes.small.text.base, toggleButtonTokens.base, typographyTokens.selection.base, toggleButtonTokens.hover.base);
+var Container = styled.label.withConfig({
+  displayName: "ToggleButton__Container",
+  componentId: "sc-ya01sa-2"
+})(["width:fit-content;", ":checked + ", "{", "}", ":checked + ", ":hover{", "}", ":focus-visible + ", "{", "}"], Input, Content, toggleButtonTokens.checked.base, Input, Content, toggleButtonTokens.checked.hover.base, Input, Content, toggleButtonTokens.focus.base);
+var nextUniqueId = 0;
+var ToggleButton = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var id = _a.id,
+      label = _a.label,
+      Icon = _a.Icon,
+      className = _a.className,
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["id", "label", "Icon", "className", "htmlProps"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "toggleButton-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
+    ref: ref,
+    type: 'checkbox'
+  });
+  var containerProps = {
+    htmlFor: uniqueId
+  };
+  return jsxs(Container, Object.assign({}, containerProps, {
+    children: [jsx(Input, Object.assign({}, inputProps)), jsxs(Content, {
+      children: [Icon && jsx(IconWrapper, {
+        Icon: Icon,
+        iconSize: "inline"
+      }), " ", label]
+    })]
+  }));
+});
+
+export { ToggleButton };

package/dist/components/ToggleButton/ToggleButton.tokens.js

@@ -0,0 +1,53 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { checkboxTokens } from '../Checkbox/Checkbox.tokens.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing;
+var base = {
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  color: Colors.DdsColorNeutralsGray7,
+  gap: Spacing.SizesDdsSpacingLocalX05,
+  boxShadow: 'none'
+};
+var hoverBase = Object.assign({}, checkboxTokens.checkbox.hover.base);
+var checkedBase = Object.assign(Object.assign({}, checkboxTokens.checkbox.checked.base), {
+  color: Colors.DdsColorNeutralsWhite
+});
+var checkedHoverBase = Object.assign(Object.assign({}, checkboxTokens.checkbox.checked.hover.base), {
+  color: Colors.DdsColorNeutralsWhite
+});
+var focusBase = Object.assign({}, focusVisible);
+var groupBase = {
+  display: 'flex',
+  gap: Spacing.SizesDdsSpacingLocalX075,
+  flexWrap: 'wrap'
+};
+var containerBase = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: Spacing.SizesDdsSpacingLocalX05
+};
+var toggleButtonTokens = {
+  base: base,
+  hover: {
+    base: hoverBase
+  },
+  focus: {
+    base: focusBase
+  },
+  checked: {
+    base: checkedBase,
+    hover: {
+      base: checkedHoverBase
+    }
+  },
+  group: {
+    base: groupBase
+  },
+  container: {
+    base: containerBase
+  }
+};
+
+export { toggleButtonTokens };

package/dist/components/ToggleButton/ToggleButtonGroup.js

@@ -0,0 +1,57 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { toggleButtonTokens } from './ToggleButton.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Group = styled.div.withConfig({
+  displayName: "ToggleButtonGroup__Group",
+  componentId: "sc-14ijdag-0"
+})(["", " ", ""], toggleButtonTokens.group.base, function (_ref) {
+  var direction = _ref.direction;
+  return css(["flex-direction:", ";"], direction);
+});
+var Container = styled.div.withConfig({
+  displayName: "ToggleButtonGroup__Container",
+  componentId: "sc-14ijdag-1"
+})(["", ""], toggleButtonTokens.container.base);
+var nextUniqueId = 0;
+var ToggleButtonGroup = function ToggleButtonGroup(props) {
+  var children = props.children,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'row' : _props$direction,
+      label = props.label,
+      labelId = props.labelId,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "direction", "label", "labelId", "id", "className", "htmlProps"]);
+
+  var _useState = useState(labelId !== null && labelId !== void 0 ? labelId : "ToggleButtonGroupLabel-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueLabelId = _useState2[0];
+
+  var groupProps = {
+    direction: direction
+  };
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    role: 'group',
+    'aria-labelledby': label ? uniqueLabelId : undefined
+  });
+  return jsxs(Container, Object.assign({}, containerProps, {
+    children: [!!label && jsx(Typography, Object.assign({
+      as: "span",
+      typographyType: "supportingStyleLabel01",
+      id: uniqueLabelId
+    }, {
+      children: label
+    })), jsx(Group, Object.assign({}, groupProps, {
+      children: children
+    }))]
+  }));
+};
+
+export { ToggleButtonGroup };