@amboss/design-system 1.15.2 → 1.15.4

package/build/esm/src/components/Form/RadioButton/RadioButton.js

@@ -0,0 +1,117 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _styled from '@emotion/styled/base';
+import React from 'react';
+import { FormField } from '../FormField/FormField.js';
+import { Icon } from '../../Icon/Icon.js';
+import { Inline } from '../../Inline/Inline.js';
+
+const StyledContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ecpa6et2"
+} : {
+  target: "ecpa6et2",
+  label: "StyledContainer"
+})(() => ({
+  userSelect: "none",
+  display: "block",
+  position: "relative",
+  width: "100%",
+  boxSizing: "border-box"
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJhZGlvQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQndCIiwiZmlsZSI6IlJhZGlvQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wcm9wcy1uby1zcHJlYWRpbmcgKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBGb3JtRmllbGQsIEZvcm1GaWVsZFByb3BzIH0gZnJvbSBcIi4uL0Zvcm1GaWVsZC9Gb3JtRmllbGRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uLy4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uLy4uL0lubGluZS9JbmxpbmVcIjtcblxuZXhwb3J0IHR5cGUgUmFkaW9CdXR0b25Qcm9wcyA9IHtcbiAgbmFtZTogc3RyaW5nO1xuICB2YWx1ZT86IHN0cmluZztcbiAgY2hlY2tlZD86IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIGljb24/OiBJY29uTmFtZTtcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgb25DaGFuZ2U/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkNsaWNrPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbiAgb25CbHVyPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbiAgb25Gb2N1cz86IChlOiBSZWFjdC5Gb3JtRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHZvaWQ7XG59ICYgT21pdDxGb3JtRmllbGRQcm9wcywgXCJsYWJlbEhpbnRcIj47XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXYoKCkgPT4gKHtcbiAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxufSkpO1xuXG5jb25zdCBTdHlsZWRSZWFsSW5wdXQgPSBzdHlsZWQuaW5wdXQoKCkgPT4gKHtcbiAgb3BhY2l0eTogMCxcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgaGVpZ2h0OiAwLFxuICB3aWR0aDogMCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbn0pKTtcblxuY29uc3QgU3R5bGVkRmFrZUlucHV0ID0gc3R5bGVkLmRpdjxQYXJ0aWFsPFJhZGlvQnV0dG9uUHJvcHM+PigoeyB0aGVtZSB9KSA9PiAoe1xuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICB0ZXh0VHJhbnNmb3JtOiBcIm5vbmVcIixcbiAgdGV4dERlY29yYXRpb246IFwibm9uZVwiLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmJvcmRlclJhZGl1cy5idXR0b24ubSxcbiAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQuYnV0dG9uLm0sXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy53ZWlnaHQuYm9sZCxcbiAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC5idXR0b24ubSxcbiAgcGFkZGluZzogYCR7dGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5zfSAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubH1gLFxuXG4gIFwiaW5wdXQ6IGZvY3VzLXZpc2libGUgKyAmXCI6IHtcbiAgICBvdXRsaW5lV2lkdGg6IFwiMnB4XCIsXG4gICAgb3V0bGluZVN0eWxlOiBcInNvbGlkXCIsXG4gICAgb3V0bGluZUNvbG9yOiBcIkhpZ2hsaWdodFwiLFxuICB9LFxuXG4gIFwiQG1lZGlhICgtd2Via2l0LW1pbi1kZXZpY2UtcGl4ZWwtcmF0aW86MClcIjoge1xuICAgIFwiaW5wdXQ6IGZvY3VzLXZpc2libGUgKyAmXCI6IHtcbiAgICAgIG91dGxpbmVDb2xvcjogXCItd2Via2l0LWZvY3VzLXJpbmctY29sb3JcIixcbiAgICAgIG91dGxpbmVTdHlsZTogXCJhdXRvXCIsXG4gICAgfSxcbiAgfSxcblxuICBcImlucHV0Om5vdCg6Y2hlY2tlZCkgKyAmXCI6IHtcbiAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS52YWx1ZXMuY29sb3IuYm9yZGVyLnNlY29uZGFyeS5kZWZhdWx0fWAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnNlY29uZGFyeS5kZWZhdWx0LFxuXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQuc2Vjb25kYXJ5LmRlZmF1bHQsXG4gICAgfSxcbiAgfSxcbiAgXCJpbnB1dDpjaGVja2VkICsgJiBcIjoge1xuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYWNjZW50U3VidGxlLmRlZmF1bHR9YCxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLmFjY2VudFN1YnRsZS5kZWZhdWx0LFxuICAgIGNvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC5hY2NlbnQuZGVmYXVsdCxcbiAgfSxcbn0pKTtcblxuLyoqIEBkZXByZWNhdGVkIFVzZSBSYWRpbyBvciBTZWdtZW50ZWRDb250cm9sIGNvbXBvbmVudCBpbnN0ZWFkICovXG5leHBvcnQgZnVuY3Rpb24gUmFkaW9CdXR0b24oe1xuICBuYW1lLFxuICB2YWx1ZSA9IFwiXCIsXG4gIGNoZWNrZWQgPSB1bmRlZmluZWQsXG4gIGxhYmVsID0gXCJcIixcbiAgaWNvbixcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgb25DaGFuZ2UsXG4gIG9uQ2xpY2ssXG4gIG9uQmx1cixcbiAgb25Gb2N1cyxcbiAgLi4ucmVzdFxufTogUmFkaW9CdXR0b25Qcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIHJldHVybiAoXG4gICAgPEZvcm1GaWVsZCBkYXRhLWRzLWlkPVwiUmFkaW9CdXR0b25cIiB7Li4ucmVzdH0gZGlzYWJsZWQ9e2Rpc2FibGVkfT5cbiAgICAgIDxTdHlsZWRDb250YWluZXI+XG4gICAgICAgIDxTdHlsZWRSZWFsSW5wdXRcbiAgICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIGNoZWNrZWQ9e2NoZWNrZWR9XG4gICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgIG9uQmx1cj17b25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e29uRm9jdXN9XG4gICAgICAgIC8+XG4gICAgICAgIDxTdHlsZWRGYWtlSW5wdXQ+XG4gICAgICAgICAgPElubGluZSB2QWxpZ25JdGVtcz1cImNlbnRlclwiIGFsaWduSXRlbXM9XCJzcGFjZUJldHdlZW5cIiBub1dyYXA+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICB7aWNvbiAmJiA8SWNvbiBuYW1lPXtpY29ufSAvPn1cbiAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgPC9TdHlsZWRGYWtlSW5wdXQ+XG4gICAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgICA8L0Zvcm1GaWVsZD5cbiAgKTtcbn1cbiJdfQ== */");
+const StyledRealInput = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "production" ? {
+  target: "ecpa6et1"
+} : {
+  target: "ecpa6et1",
+  label: "StyledRealInput"
+})(() => ({
+  opacity: 0,
+  cursor: "pointer",
+  height: 0,
+  width: 0,
+  position: "absolute"
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJhZGlvQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QndCIiwiZmlsZSI6IlJhZGlvQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wcm9wcy1uby1zcHJlYWRpbmcgKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBGb3JtRmllbGQsIEZvcm1GaWVsZFByb3BzIH0gZnJvbSBcIi4uL0Zvcm1GaWVsZC9Gb3JtRmllbGRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uLy4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uLy4uL0lubGluZS9JbmxpbmVcIjtcblxuZXhwb3J0IHR5cGUgUmFkaW9CdXR0b25Qcm9wcyA9IHtcbiAgbmFtZTogc3RyaW5nO1xuICB2YWx1ZT86IHN0cmluZztcbiAgY2hlY2tlZD86IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIGljb24/OiBJY29uTmFtZTtcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgb25DaGFuZ2U/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkNsaWNrPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbiAgb25CbHVyPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbiAgb25Gb2N1cz86IChlOiBSZWFjdC5Gb3JtRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHZvaWQ7XG59ICYgT21pdDxGb3JtRmllbGRQcm9wcywgXCJsYWJlbEhpbnRcIj47XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXYoKCkgPT4gKHtcbiAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxufSkpO1xuXG5jb25zdCBTdHlsZWRSZWFsSW5wdXQgPSBzdHlsZWQuaW5wdXQoKCkgPT4gKHtcbiAgb3BhY2l0eTogMCxcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgaGVpZ2h0OiAwLFxuICB3aWR0aDogMCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbn0pKTtcblxuY29uc3QgU3R5bGVkRmFrZUlucHV0ID0gc3R5bGVkLmRpdjxQYXJ0aWFsPFJhZGlvQnV0dG9uUHJvcHM+PigoeyB0aGVtZSB9KSA9PiAoe1xuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICB0ZXh0VHJhbnNmb3JtOiBcIm5vbmVcIixcbiAgdGV4dERlY29yYXRpb246IFwibm9uZVwiLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmJvcmRlclJhZGl1cy5idXR0b24ubSxcbiAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQuYnV0dG9uLm0sXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy53ZWlnaHQuYm9sZCxcbiAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC5idXR0b24ubSxcbiAgcGFkZGluZzogYCR7dGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5zfSAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubH1gLFxuXG4gIFwiaW5wdXQ6IGZvY3VzLXZpc2libGUgKyAmXCI6IHtcbiAgICBvdXRsaW5lV2lkdGg6IFwiMnB4XCIsXG4gICAgb3V0bGluZVN0eWxlOiBcInNvbGlkXCIsXG4gICAgb3V0bGluZUNvbG9yOiBcIkhpZ2hsaWdodFwiLFxuICB9LFxuXG4gIFwiQG1lZGlhICgtd2Via2l0LW1pbi1kZXZpY2UtcGl4ZWwtcmF0aW86MClcIjoge1xuICAgIFwiaW5wdXQ6IGZvY3VzLXZpc2libGUgKyAmXCI6IHtcbiAgICAgIG91dGxpbmVDb2xvcjogXCItd2Via2l0LWZvY3VzLXJpbmctY29sb3JcIixcbiAgICAgIG91dGxpbmVTdHlsZTogXCJhdXRvXCIsXG4gICAgfSxcbiAgfSxcblxuICBcImlucHV0Om5vdCg6Y2hlY2tlZCkgKyAmXCI6IHtcbiAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS52YWx1ZXMuY29sb3IuYm9yZGVyLnNlY29uZGFyeS5kZWZhdWx0fWAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnNlY29uZGFyeS5kZWZhdWx0LFxuXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQuc2Vjb25kYXJ5LmRlZmF1bHQsXG4gICAgfSxcbiAgfSxcbiAgXCJpbnB1dDpjaGVja2VkICsgJiBcIjoge1xuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYWNjZW50U3VidGxlLmRlZmF1bHR9YCxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLmFjY2VudFN1YnRsZS5kZWZhdWx0LFxuICAgIGNvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC5hY2NlbnQuZGVmYXVsdCxcbiAgfSxcbn0pKTtcblxuLyoqIEBkZXByZWNhdGVkIFVzZSBSYWRpbyBvciBTZWdtZW50ZWRDb250cm9sIGNvbXBvbmVudCBpbnN0ZWFkICovXG5leHBvcnQgZnVuY3Rpb24gUmFkaW9CdXR0b24oe1xuICBuYW1lLFxuICB2YWx1ZSA9IFwiXCIsXG4gIGNoZWNrZWQgPSB1bmRlZmluZWQsXG4gIGxhYmVsID0gXCJcIixcbiAgaWNvbixcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgb25DaGFuZ2UsXG4gIG9uQ2xpY2ssXG4gIG9uQmx1cixcbiAgb25Gb2N1cyxcbiAgLi4ucmVzdFxufTogUmFkaW9CdXR0b25Qcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIHJldHVybiAoXG4gICAgPEZvcm1GaWVsZCBkYXRhLWRzLWlkPVwiUmFkaW9CdXR0b25cIiB7Li4ucmVzdH0gZGlzYWJsZWQ9e2Rpc2FibGVkfT5cbiAgICAgIDxTdHlsZWRDb250YWluZXI+XG4gICAgICAgIDxTdHlsZWRSZWFsSW5wdXRcbiAgICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIGNoZWNrZWQ9e2NoZWNrZWR9XG4gICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgIG9uQmx1cj17b25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e29uRm9jdXN9XG4gICAgICAgIC8+XG4gICAgICAgIDxTdHlsZWRGYWtlSW5wdXQ+XG4gICAgICAgICAgPElubGluZSB2QWxpZ25JdGVtcz1cImNlbnRlclwiIGFsaWduSXRlbXM9XCJzcGFjZUJldHdlZW5cIiBub1dyYXA+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICB7aWNvbiAmJiA8SWNvbiBuYW1lPXtpY29ufSAvPn1cbiAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgPC9TdHlsZWRGYWtlSW5wdXQ+XG4gICAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgICA8L0Zvcm1GaWVsZD5cbiAgKTtcbn1cbiJdfQ== */");
+const StyledFakeInput = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "ecpa6et0"
+} : {
+  target: "ecpa6et0",
+  label: "StyledFakeInput"
+})(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    cursor: "pointer",
+    textTransform: "none",
+    textDecoration: "none",
+    borderRadius: theme.variables.size.borderRadius.button.m,
+    fontFamily: theme.variables.fontFamily.lato,
+    fontSize: theme.variables.size.font.button.m,
+    fontWeight: theme.variables.weight.bold,
+    lineHeight: theme.variables.size.lineHeight.button.m,
+    padding: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,
+    "input: focus-visible + &": {
+      outlineWidth: "2px",
+      outlineStyle: "solid",
+      outlineColor: "Highlight"
+    },
+    "@media (-webkit-min-device-pixel-ratio:0)": {
+      "input: focus-visible + &": {
+        outlineColor: "-webkit-focus-ring-color",
+        outlineStyle: "auto"
+      }
+    },
+    "input:not(:checked) + &": {
+      border: `1px solid ${theme.values.color.border.secondary.default}`,
+      backgroundColor: theme.values.color.background.primary.default,
+      color: theme.values.color.text.secondary.default,
+      "&:hover": {
+        backgroundColor: theme.values.color.background.secondary.default
+      }
+    },
+    "input:checked + & ": {
+      border: `1px solid ${theme.values.color.border.accentSubtle.default}`,
+      backgroundColor: theme.values.color.background.accentSubtle.default,
+      color: theme.values.color.text.accent.default
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlJhZGlvQnV0dG9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ3dCIiwiZmlsZSI6IlJhZGlvQnV0dG9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2pzeC1wcm9wcy1uby1zcHJlYWRpbmcgKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBGb3JtRmllbGQsIEZvcm1GaWVsZFByb3BzIH0gZnJvbSBcIi4uL0Zvcm1GaWVsZC9Gb3JtRmllbGRcIjtcbmltcG9ydCB7IEljb25OYW1lLCBJY29uIH0gZnJvbSBcIi4uLy4uL0ljb24vSWNvblwiO1xuaW1wb3J0IHsgSW5saW5lIH0gZnJvbSBcIi4uLy4uL0lubGluZS9JbmxpbmVcIjtcblxuZXhwb3J0IHR5cGUgUmFkaW9CdXR0b25Qcm9wcyA9IHtcbiAgbmFtZTogc3RyaW5nO1xuICB2YWx1ZT86IHN0cmluZztcbiAgY2hlY2tlZD86IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIGljb24/OiBJY29uTmFtZTtcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgb25DaGFuZ2U/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkNsaWNrPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbiAgb25CbHVyPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbiAgb25Gb2N1cz86IChlOiBSZWFjdC5Gb3JtRXZlbnQ8SFRNTElucHV0RWxlbWVudD4pID0+IHZvaWQ7XG59ICYgT21pdDxGb3JtRmllbGRQcm9wcywgXCJsYWJlbEhpbnRcIj47XG5cbmNvbnN0IFN0eWxlZENvbnRhaW5lciA9IHN0eWxlZC5kaXYoKCkgPT4gKHtcbiAgdXNlclNlbGVjdDogXCJub25lXCIsXG4gIGRpc3BsYXk6IFwiYmxvY2tcIixcbiAgcG9zaXRpb246IFwicmVsYXRpdmVcIixcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBib3hTaXppbmc6IFwiYm9yZGVyLWJveFwiLFxufSkpO1xuXG5jb25zdCBTdHlsZWRSZWFsSW5wdXQgPSBzdHlsZWQuaW5wdXQoKCkgPT4gKHtcbiAgb3BhY2l0eTogMCxcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgaGVpZ2h0OiAwLFxuICB3aWR0aDogMCxcbiAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbn0pKTtcblxuY29uc3QgU3R5bGVkRmFrZUlucHV0ID0gc3R5bGVkLmRpdjxQYXJ0aWFsPFJhZGlvQnV0dG9uUHJvcHM+PigoeyB0aGVtZSB9KSA9PiAoe1xuICBjdXJzb3I6IFwicG9pbnRlclwiLFxuICB0ZXh0VHJhbnNmb3JtOiBcIm5vbmVcIixcbiAgdGV4dERlY29yYXRpb246IFwibm9uZVwiLFxuICBib3JkZXJSYWRpdXM6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmJvcmRlclJhZGl1cy5idXR0b24ubSxcbiAgZm9udEZhbWlseTogdGhlbWUudmFyaWFibGVzLmZvbnRGYW1pbHkubGF0byxcbiAgZm9udFNpemU6IHRoZW1lLnZhcmlhYmxlcy5zaXplLmZvbnQuYnV0dG9uLm0sXG4gIGZvbnRXZWlnaHQ6IHRoZW1lLnZhcmlhYmxlcy53ZWlnaHQuYm9sZCxcbiAgbGluZUhlaWdodDogdGhlbWUudmFyaWFibGVzLnNpemUubGluZUhlaWdodC5idXR0b24ubSxcbiAgcGFkZGluZzogYCR7dGhlbWUudmFyaWFibGVzLnNpemUuc3BhY2luZy5zfSAke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcubH1gLFxuXG4gIFwiaW5wdXQ6IGZvY3VzLXZpc2libGUgKyAmXCI6IHtcbiAgICBvdXRsaW5lV2lkdGg6IFwiMnB4XCIsXG4gICAgb3V0bGluZVN0eWxlOiBcInNvbGlkXCIsXG4gICAgb3V0bGluZUNvbG9yOiBcIkhpZ2hsaWdodFwiLFxuICB9LFxuXG4gIFwiQG1lZGlhICgtd2Via2l0LW1pbi1kZXZpY2UtcGl4ZWwtcmF0aW86MClcIjoge1xuICAgIFwiaW5wdXQ6IGZvY3VzLXZpc2libGUgKyAmXCI6IHtcbiAgICAgIG91dGxpbmVDb2xvcjogXCItd2Via2l0LWZvY3VzLXJpbmctY29sb3JcIixcbiAgICAgIG91dGxpbmVTdHlsZTogXCJhdXRvXCIsXG4gICAgfSxcbiAgfSxcblxuICBcImlucHV0Om5vdCg6Y2hlY2tlZCkgKyAmXCI6IHtcbiAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS52YWx1ZXMuY29sb3IuYm9yZGVyLnNlY29uZGFyeS5kZWZhdWx0fWAsXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gICAgY29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci50ZXh0LnNlY29uZGFyeS5kZWZhdWx0LFxuXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUudmFsdWVzLmNvbG9yLmJhY2tncm91bmQuc2Vjb25kYXJ5LmRlZmF1bHQsXG4gICAgfSxcbiAgfSxcbiAgXCJpbnB1dDpjaGVja2VkICsgJiBcIjoge1xuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYWNjZW50U3VidGxlLmRlZmF1bHR9YCxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5iYWNrZ3JvdW5kLmFjY2VudFN1YnRsZS5kZWZhdWx0LFxuICAgIGNvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IudGV4dC5hY2NlbnQuZGVmYXVsdCxcbiAgfSxcbn0pKTtcblxuLyoqIEBkZXByZWNhdGVkIFVzZSBSYWRpbyBvciBTZWdtZW50ZWRDb250cm9sIGNvbXBvbmVudCBpbnN0ZWFkICovXG5leHBvcnQgZnVuY3Rpb24gUmFkaW9CdXR0b24oe1xuICBuYW1lLFxuICB2YWx1ZSA9IFwiXCIsXG4gIGNoZWNrZWQgPSB1bmRlZmluZWQsXG4gIGxhYmVsID0gXCJcIixcbiAgaWNvbixcbiAgZGlzYWJsZWQgPSBmYWxzZSxcbiAgb25DaGFuZ2UsXG4gIG9uQ2xpY2ssXG4gIG9uQmx1cixcbiAgb25Gb2N1cyxcbiAgLi4ucmVzdFxufTogUmFkaW9CdXR0b25Qcm9wcyk6IFJlYWN0LlJlYWN0RWxlbWVudCB7XG4gIHJldHVybiAoXG4gICAgPEZvcm1GaWVsZCBkYXRhLWRzLWlkPVwiUmFkaW9CdXR0b25cIiB7Li4ucmVzdH0gZGlzYWJsZWQ9e2Rpc2FibGVkfT5cbiAgICAgIDxTdHlsZWRDb250YWluZXI+XG4gICAgICAgIDxTdHlsZWRSZWFsSW5wdXRcbiAgICAgICAgICB0eXBlPVwicmFkaW9cIlxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIGNoZWNrZWQ9e2NoZWNrZWR9XG4gICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgICAgIG9uQmx1cj17b25CbHVyfVxuICAgICAgICAgIG9uRm9jdXM9e29uRm9jdXN9XG4gICAgICAgIC8+XG4gICAgICAgIDxTdHlsZWRGYWtlSW5wdXQ+XG4gICAgICAgICAgPElubGluZSB2QWxpZ25JdGVtcz1cImNlbnRlclwiIGFsaWduSXRlbXM9XCJzcGFjZUJldHdlZW5cIiBub1dyYXA+XG4gICAgICAgICAgICB7bGFiZWx9XG4gICAgICAgICAgICB7aWNvbiAmJiA8SWNvbiBuYW1lPXtpY29ufSAvPn1cbiAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgPC9TdHlsZWRGYWtlSW5wdXQ+XG4gICAgICA8L1N0eWxlZENvbnRhaW5lcj5cbiAgICA8L0Zvcm1GaWVsZD5cbiAgKTtcbn1cbiJdfQ== */");
+
+/** @deprecated Use Radio or SegmentedControl component instead */
+function RadioButton(_ref2) {
+  let {
+    name,
+    value = "",
+    checked = undefined,
+    label = "",
+    icon,
+    disabled = false,
+    onChange,
+    onClick,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(FormField, _extends({
+    "data-ds-id": "RadioButton"
+  }, rest, {
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(StyledContainer, null, /*#__PURE__*/React.createElement(StyledRealInput, {
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    onClick: onClick,
+    onBlur: onBlur,
+    onFocus: onFocus
+  }), /*#__PURE__*/React.createElement(StyledFakeInput, null, /*#__PURE__*/React.createElement(Inline, {
+    vAlignItems: "center",
+    alignItems: "spaceBetween",
+    noWrap: true
+  }, label, icon && /*#__PURE__*/React.createElement(Icon, {
+    name: icon
+  })))));
+}
+
+export { RadioButton };
+//# sourceMappingURL=RadioButton.js.map

package/build/esm/src/components/Form/RadioButton/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sources":["../../../../../../src/components/Form/RadioButton/RadioButton.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { IconName, Icon } from \"../../Icon/Icon\";\nimport { Inline } from \"../../Inline/Inline\";\n\nexport type RadioButtonProps = {\n  name: string;\n  value?: string;\n  checked?: boolean | undefined;\n  icon?: IconName;\n  label?: string;\n  disabled?: boolean;\n  onChange?: (e: React.FormEvent<HTMLInputElement>) => void;\n  onClick?: (e: React.FormEvent<HTMLInputElement>) => void;\n  onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;\n  onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;\n} & Omit<FormFieldProps, \"labelHint\">;\n\nconst StyledContainer = styled.div(() => ({\n  userSelect: \"none\",\n  display: \"block\",\n  position: \"relative\",\n  width: \"100%\",\n  boxSizing: \"border-box\",\n}));\n\nconst StyledRealInput = styled.input(() => ({\n  opacity: 0,\n  cursor: \"pointer\",\n  height: 0,\n  width: 0,\n  position: \"absolute\",\n}));\n\nconst StyledFakeInput = styled.div<Partial<RadioButtonProps>>(({ theme }) => ({\n  cursor: \"pointer\",\n  textTransform: \"none\",\n  textDecoration: \"none\",\n  borderRadius: theme.variables.size.borderRadius.button.m,\n  fontFamily: theme.variables.fontFamily.lato,\n  fontSize: theme.variables.size.font.button.m,\n  fontWeight: theme.variables.weight.bold,\n  lineHeight: theme.variables.size.lineHeight.button.m,\n  padding: `${theme.variables.size.spacing.s} ${theme.variables.size.spacing.l}`,\n\n  \"input: focus-visible + &\": {\n    outlineWidth: \"2px\",\n    outlineStyle: \"solid\",\n    outlineColor: \"Highlight\",\n  },\n\n  \"@media (-webkit-min-device-pixel-ratio:0)\": {\n    \"input: focus-visible + &\": {\n      outlineColor: \"-webkit-focus-ring-color\",\n      outlineStyle: \"auto\",\n    },\n  },\n\n  \"input:not(:checked) + &\": {\n    border: `1px solid ${theme.values.color.border.secondary.default}`,\n    backgroundColor: theme.values.color.background.primary.default,\n    color: theme.values.color.text.secondary.default,\n\n    \"&:hover\": {\n      backgroundColor: theme.values.color.background.secondary.default,\n    },\n  },\n  \"input:checked + & \": {\n    border: `1px solid ${theme.values.color.border.accentSubtle.default}`,\n    backgroundColor: theme.values.color.background.accentSubtle.default,\n    color: theme.values.color.text.accent.default,\n  },\n}));\n\n/** @deprecated Use Radio or SegmentedControl component instead */\nexport function RadioButton({\n  name,\n  value = \"\",\n  checked = undefined,\n  label = \"\",\n  icon,\n  disabled = false,\n  onChange,\n  onClick,\n  onBlur,\n  onFocus,\n  ...rest\n}: RadioButtonProps): React.ReactElement {\n  return (\n    <FormField data-ds-id=\"RadioButton\" {...rest} disabled={disabled}>\n      <StyledContainer>\n        <StyledRealInput\n          type=\"radio\"\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n          onClick={onClick}\n          onBlur={onBlur}\n          onFocus={onFocus}\n        />\n        <StyledFakeInput>\n          <Inline vAlignItems=\"center\" alignItems=\"spaceBetween\" noWrap>\n            {label}\n            {icon && <Icon name={icon} />}\n          </Inline>\n        </StyledFakeInput>\n      </StyledContainer>\n    </FormField>\n  );\n}\n"],"names":["StyledContainer","_styled","process","env","NODE_ENV","target","label","userSelect","display","position","width","boxSizing","StyledRealInput","opacity","cursor","height","StyledFakeInput","_ref","theme","textTransform","textDecoration","borderRadius","variables","size","button","m","fontFamily","lato","fontSize","font","fontWeight","weight","bold","lineHeight","padding","spacing","s","l","outlineWidth","outlineStyle","outlineColor","border","values","color","secondary","default","backgroundColor","background","primary","text","accentSubtle","accent","RadioButton","_ref2","name","value","checked","undefined","icon","disabled","onChange","onClick","onBlur","onFocus","rest","React","createElement","FormField","_extends","type","Inline","vAlignItems","alignItems","noWrap","Icon"],"mappings":"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"}

package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { FormFieldProps } from "../FormField/FormField";
+export declare type SegmentedControlOption = {
+    name: string;
+    label: string;
+    value: string;
+    sublabel?: string;
+    displayAsOptionWithSublabel?: boolean;
+    onClick?: (e: React.FormEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;
+};
+export declare type SegmentedControlProps = {
+    /**
+     * Meta data for options
+     * @param name - Name for radio input
+     * @param label - Label for display
+     * @param value - Value for radio input
+     * @param sublabel - Sublabel displayed below label (Optional)
+     * @param displayAsOptionWithSublabel - Set this to true if no sublabel is available, but option is displayed as one with sublabel
+     */
+    options: SegmentedControlOption[];
+    /** Current selected value */
+    value: string;
+    /** Justified layout, with equal size segments spanning to container width */
+    justified?: boolean;
+    /** Segment size, not applicable on mobile breakpoint */
+    size?: "s" | "m" | "l";
+    onChange: (value: string) => void;
+} & FormFieldProps;
+export declare function SegmentedControl({ options, value, disabled, justified, size, onChange, ...rest }: SegmentedControlProps): React.ReactElement;

package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,124 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _styled from '@emotion/styled/base';
+import React from 'react';
+import { FormField } from '../FormField/FormField.js';
+import { SegmentedControlOption } from './SegmentedControlOption.js';
+import breakpoints from '../../../../build-tokens/_breakpoints.json.js';
+
+const StyledDivider = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1tj4hl31"
+} : {
+  target: "e1tj4hl31",
+  label: "StyledDivider"
+})(_ref => {
+  let {
+    theme,
+    isChecked,
+    justified
+  } = _ref;
+  const border = `1px solid ${theme.values.color.border.secondary.default}`;
+  const baseStyles = {
+    backgroundColor: theme.values.color.background.primary.default
+  };
+  const checkedStyle = isChecked && {
+    borderColor: theme.values.color.border.accentSubtle.default
+  };
+  const borderRightStyle = {
+    borderRight: border,
+    ...baseStyles,
+    ...checkedStyle
+  };
+  if (!justified) {
+    return borderRightStyle;
+  }
+  return {
+    // Layout on tablet and desktop
+    [`@media (min-width: ${breakpoints.medium.value}px)`]: {
+      ...borderRightStyle
+    },
+    // Layout on mobile
+    [`@media (max-width: ${breakpoints.medium.value}px)`]: {
+      borderBottom: border,
+      ...baseStyles,
+      ...checkedStyle
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlZ21lbnRlZENvbnRyb2wudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlDc0IiLCJmaWxlIjoiU2VnbWVudGVkQ29udHJvbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEZvcm1GaWVsZCwgRm9ybUZpZWxkUHJvcHMgfSBmcm9tIFwiLi4vRm9ybUZpZWxkL0Zvcm1GaWVsZFwiO1xuaW1wb3J0IHsgU2VnbWVudGVkQ29udHJvbE9wdGlvbiB9IGZyb20gXCIuL1NlZ21lbnRlZENvbnRyb2xPcHRpb25cIjtcbmltcG9ydCBicmVha3BvaW50cyBmcm9tIFwiLi4vLi4vLi4vLi4vYnVpbGQtdG9rZW5zL19icmVha3BvaW50cy5qc29uXCI7XG5cbmV4cG9ydCB0eXBlIFNlZ21lbnRlZENvbnRyb2xPcHRpb24gPSB7XG4gIG5hbWU6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFsdWU6IHN0cmluZztcbiAgc3VibGFiZWw/OiBzdHJpbmc7XG4gIGRpc3BsYXlBc09wdGlvbldpdGhTdWJsYWJlbD86IGJvb2xlYW47XG4gIG9uQ2xpY2s/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkJsdXI/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkZvY3VzPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbn07XG5cbmV4cG9ydCB0eXBlIFNlZ21lbnRlZENvbnRyb2xQcm9wcyA9IHtcbiAgLyoqXG4gICAqIE1ldGEgZGF0YSBmb3Igb3B0aW9uc1xuICAgKiBAcGFyYW0gbmFtZSAtIE5hbWUgZm9yIHJhZGlvIGlucHV0XG4gICAqIEBwYXJhbSBsYWJlbCAtIExhYmVsIGZvciBkaXNwbGF5XG4gICAqIEBwYXJhbSB2YWx1ZSAtIFZhbHVlIGZvciByYWRpbyBpbnB1dFxuICAgKiBAcGFyYW0gc3VibGFiZWwgLSBTdWJsYWJlbCBkaXNwbGF5ZWQgYmVsb3cgbGFiZWwgKE9wdGlvbmFsKVxuICAgKiBAcGFyYW0gZGlzcGxheUFzT3B0aW9uV2l0aFN1YmxhYmVsIC0gU2V0IHRoaXMgdG8gdHJ1ZSBpZiBubyBzdWJsYWJlbCBpcyBhdmFpbGFibGUsIGJ1dCBvcHRpb24gaXMgZGlzcGxheWVkIGFzIG9uZSB3aXRoIHN1YmxhYmVsXG4gICAqL1xuICBvcHRpb25zOiBTZWdtZW50ZWRDb250cm9sT3B0aW9uW107XG4gIC8qKiBDdXJyZW50IHNlbGVjdGVkIHZhbHVlICovXG4gIHZhbHVlOiBzdHJpbmc7XG4gIC8qKiBKdXN0aWZpZWQgbGF5b3V0LCB3aXRoIGVxdWFsIHNpemUgc2VnbWVudHMgc3Bhbm5pbmcgdG8gY29udGFpbmVyIHdpZHRoICovXG4gIGp1c3RpZmllZD86IGJvb2xlYW47XG4gIC8qKiBTZWdtZW50IHNpemUsIG5vdCBhcHBsaWNhYmxlIG9uIG1vYmlsZSBicmVha3BvaW50ICovXG4gIHNpemU/OiBcInNcIiB8IFwibVwiIHwgXCJsXCI7XG4gIG9uQ2hhbmdlOiAodmFsdWU6IHN0cmluZykgPT4gdm9pZDtcbn0gJiBGb3JtRmllbGRQcm9wcztcblxudHlwZSBTdHlsZWREaXZpZGVyUHJvcHMgPSB7XG4gIGlzQ2hlY2tlZDogYm9vbGVhbjtcbn0gJiBQaWNrPFNlZ21lbnRlZENvbnRyb2xQcm9wcywgXCJqdXN0aWZpZWRcIj47XG5cbmNvbnN0IFN0eWxlZERpdmlkZXIgPSBzdHlsZWQuZGl2PFN0eWxlZERpdmlkZXJQcm9wcz4oXG4gICh7IHRoZW1lLCBpc0NoZWNrZWQsIGp1c3RpZmllZCB9KSA9PiB7XG4gICAgY29uc3QgYm9yZGVyID0gYDFweCBzb2xpZCAke3RoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuc2Vjb25kYXJ5LmRlZmF1bHR9YDtcbiAgICBjb25zdCBiYXNlU3R5bGVzID0ge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gICAgfTtcbiAgICBjb25zdCBjaGVja2VkU3R5bGUgPSBpc0NoZWNrZWQgJiYge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYWNjZW50U3VidGxlLmRlZmF1bHQsXG4gICAgfTtcblxuICAgIGNvbnN0IGJvcmRlclJpZ2h0U3R5bGUgPSB7XG4gICAgICBib3JkZXJSaWdodDogYm9yZGVyLFxuICAgICAgLi4uYmFzZVN0eWxlcyxcbiAgICAgIC4uLmNoZWNrZWRTdHlsZSxcbiAgICB9O1xuXG4gICAgaWYgKCFqdXN0aWZpZWQpIHtcbiAgICAgIHJldHVybiBib3JkZXJSaWdodFN0eWxlO1xuICAgIH1cblxuICAgIHJldHVybiB7XG4gICAgICAvLyBMYXlvdXQgb24gdGFibGV0IGFuZCBkZXNrdG9wXG4gICAgICBbYEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLm1lZGl1bS52YWx1ZX1weClgXToge1xuICAgICAgICAuLi5ib3JkZXJSaWdodFN0eWxlLFxuICAgICAgfSxcblxuICAgICAgLy8gTGF5b3V0IG9uIG1vYmlsZVxuICAgICAgW2BAbWVkaWEgKG1heC13aWR0aDogJHticmVha3BvaW50cy5tZWRpdW0udmFsdWV9cHgpYF06IHtcbiAgICAgICAgYm9yZGVyQm90dG9tOiBib3JkZXIsXG4gICAgICAgIC4uLmJhc2VTdHlsZXMsXG4gICAgICAgIC4uLmNoZWNrZWRTdHlsZSxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuKTtcblxudHlwZSBTdHlsZWRDb250YWluZXJQcm9wcyA9IFBpY2s8XG4gIFNlZ21lbnRlZENvbnRyb2xQcm9wcyxcbiAgXCJqdXN0aWZpZWRcIiB8IFwib3B0aW9uc1wiXG4+O1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFN0eWxlZENvbnRhaW5lclByb3BzPihcbiAgKHsganVzdGlmaWVkLCBvcHRpb25zIH0pID0+IHtcbiAgICBjb25zdCBiYXNlU3R5bGUgPSB7XG4gICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICB9O1xuXG4gICAgaWYgKCFqdXN0aWZpZWQpIHtcbiAgICAgIHJldHVybiBiYXNlU3R5bGU7XG4gICAgfVxuXG4gICAgcmV0dXJuIHtcbiAgICAgIC4uLmJhc2VTdHlsZSxcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIFwiJiA+ICpcIjoge1xuICAgICAgICBmbGV4OiBgMSAxICR7MTAwIC8gb3B0aW9ucy5sZW5ndGh9JWAsXG4gICAgICB9LFxuXG4gICAgICBbYCYgPiAke1N0eWxlZERpdmlkZXJ9YF06IHtcbiAgICAgICAgZmxleDogXCIwIDAgYXV0b1wiLFxuICAgICAgfSxcblxuICAgICAgLy8gTGF5b3V0IG9uIHRhYmxldCBhbmQgZGVza3RvcFxuICAgICAgW2BAbWVkaWEgKG1pbi13aWR0aDogJHticmVha3BvaW50cy5tZWRpdW0udmFsdWV9cHgpYF06IHtcbiAgICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIFNlZ21lbnRlZENvbnRyb2woe1xuICBvcHRpb25zLFxuICB2YWx1ZSxcbiAgZGlzYWJsZWQsXG4gIGp1c3RpZmllZCxcbiAgc2l6ZSA9IFwibVwiLFxuICBvbkNoYW5nZSxcbiAgLi4ucmVzdFxufTogU2VnbWVudGVkQ29udHJvbFByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgaGFuZGxlQ2hhbmdlOiBSZWFjdC5Gb3JtRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+ID0gKGV2dCkgPT4ge1xuICAgIG9uQ2hhbmdlKChldnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlKTtcbiAgfTtcblxuICBjb25zdCBvcHRpb25FbG1zID0gb3B0aW9ucy5tYXAoXG4gICAgKHsgdmFsdWU6IG9wdGlvblZhbHVlLCAuLi5vdGhlclByb3BzIH0sIGluZGV4KSA9PiB7XG4gICAgICBjb25zdCBpc0NoZWNrZWQgPSB2YWx1ZSA9PT0gb3B0aW9uVmFsdWU7XG4gICAgICBjb25zdCBkaXZpZGVyRWxtID1cbiAgICAgICAgaW5kZXggIT09IDAgPyAoXG4gICAgICAgICAgPFN0eWxlZERpdmlkZXIgaXNDaGVja2VkPXtpc0NoZWNrZWR9IGp1c3RpZmllZD17anVzdGlmaWVkfSAvPlxuICAgICAgICApIDogbnVsbDtcblxuICAgICAgcmV0dXJuIChcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50IGtleT17b3B0aW9uVmFsdWV9PlxuICAgICAgICAgIHtkaXZpZGVyRWxtfVxuICAgICAgICAgIDxTZWdtZW50ZWRDb250cm9sT3B0aW9uXG4gICAgICAgICAgICB2YWx1ZT17b3B0aW9uVmFsdWV9XG4gICAgICAgICAgICBzaXplPXtzaXplfVxuICAgICAgICAgICAgY2hlY2tlZD17aXNDaGVja2VkfVxuICAgICAgICAgICAgaXNSZXNwb25zaXZlPXtqdXN0aWZpZWR9XG4gICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICAgICAgey4uLm90aGVyUHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICk7XG4gICAgfVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEZvcm1GaWVsZCBkYXRhLWRzLWlkPVwiU2VnbWVudGVkQ29udHJvbFwiIHsuLi5yZXN0fSBkaXNhYmxlZD17ZGlzYWJsZWR9PlxuICAgICAgPFN0eWxlZENvbnRhaW5lciBqdXN0aWZpZWQ9e2p1c3RpZmllZH0gb3B0aW9ucz17b3B0aW9uc30+XG4gICAgICAgIHtvcHRpb25FbG1zfVxuICAgICAgPC9TdHlsZWRDb250YWluZXI+XG4gICAgPC9Gb3JtRmllbGQ+XG4gICk7XG59XG4vKiBlc2xpbnQtZW5hYmxlIHJlYWN0L2pzeC1wcm9wcy1uby1zcHJlYWRpbmcgKi9cbiJdfQ== */");
+const StyledContainer = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e1tj4hl30"
+} : {
+  target: "e1tj4hl30",
+  label: "StyledContainer"
+})(_ref2 => {
+  let {
+    justified,
+    options
+  } = _ref2;
+  const baseStyle = {
+    display: "flex"
+  };
+  if (!justified) {
+    return baseStyle;
+  }
+  return {
+    ...baseStyle,
+    flexDirection: "column",
+    "& > *": {
+      flex: `1 1 ${100 / options.length}%`
+    },
+    [`& > ${StyledDivider}`]: {
+      flex: "0 0 auto"
+    },
+    // Layout on tablet and desktop
+    [`@media (min-width: ${breakpoints.medium.value}px)`]: {
+      flexDirection: "row"
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNlZ21lbnRlZENvbnRyb2wudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtGd0IiLCJmaWxlIjoiU2VnbWVudGVkQ29udHJvbC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSByZWFjdC9qc3gtcHJvcHMtbm8tc3ByZWFkaW5nICovXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEZvcm1GaWVsZCwgRm9ybUZpZWxkUHJvcHMgfSBmcm9tIFwiLi4vRm9ybUZpZWxkL0Zvcm1GaWVsZFwiO1xuaW1wb3J0IHsgU2VnbWVudGVkQ29udHJvbE9wdGlvbiB9IGZyb20gXCIuL1NlZ21lbnRlZENvbnRyb2xPcHRpb25cIjtcbmltcG9ydCBicmVha3BvaW50cyBmcm9tIFwiLi4vLi4vLi4vLi4vYnVpbGQtdG9rZW5zL19icmVha3BvaW50cy5qc29uXCI7XG5cbmV4cG9ydCB0eXBlIFNlZ21lbnRlZENvbnRyb2xPcHRpb24gPSB7XG4gIG5hbWU6IHN0cmluZztcbiAgbGFiZWw6IHN0cmluZztcbiAgdmFsdWU6IHN0cmluZztcbiAgc3VibGFiZWw/OiBzdHJpbmc7XG4gIGRpc3BsYXlBc09wdGlvbldpdGhTdWJsYWJlbD86IGJvb2xlYW47XG4gIG9uQ2xpY2s/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkJsdXI/OiAoZTogUmVhY3QuRm9ybUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB2b2lkO1xuICBvbkZvY3VzPzogKGU6IFJlYWN0LkZvcm1FdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4gdm9pZDtcbn07XG5cbmV4cG9ydCB0eXBlIFNlZ21lbnRlZENvbnRyb2xQcm9wcyA9IHtcbiAgLyoqXG4gICAqIE1ldGEgZGF0YSBmb3Igb3B0aW9uc1xuICAgKiBAcGFyYW0gbmFtZSAtIE5hbWUgZm9yIHJhZGlvIGlucHV0XG4gICAqIEBwYXJhbSBsYWJlbCAtIExhYmVsIGZvciBkaXNwbGF5XG4gICAqIEBwYXJhbSB2YWx1ZSAtIFZhbHVlIGZvciByYWRpbyBpbnB1dFxuICAgKiBAcGFyYW0gc3VibGFiZWwgLSBTdWJsYWJlbCBkaXNwbGF5ZWQgYmVsb3cgbGFiZWwgKE9wdGlvbmFsKVxuICAgKiBAcGFyYW0gZGlzcGxheUFzT3B0aW9uV2l0aFN1YmxhYmVsIC0gU2V0IHRoaXMgdG8gdHJ1ZSBpZiBubyBzdWJsYWJlbCBpcyBhdmFpbGFibGUsIGJ1dCBvcHRpb24gaXMgZGlzcGxheWVkIGFzIG9uZSB3aXRoIHN1YmxhYmVsXG4gICAqL1xuICBvcHRpb25zOiBTZWdtZW50ZWRDb250cm9sT3B0aW9uW107XG4gIC8qKiBDdXJyZW50IHNlbGVjdGVkIHZhbHVlICovXG4gIHZhbHVlOiBzdHJpbmc7XG4gIC8qKiBKdXN0aWZpZWQgbGF5b3V0LCB3aXRoIGVxdWFsIHNpemUgc2VnbWVudHMgc3Bhbm5pbmcgdG8gY29udGFpbmVyIHdpZHRoICovXG4gIGp1c3RpZmllZD86IGJvb2xlYW47XG4gIC8qKiBTZWdtZW50IHNpemUsIG5vdCBhcHBsaWNhYmxlIG9uIG1vYmlsZSBicmVha3BvaW50ICovXG4gIHNpemU/OiBcInNcIiB8IFwibVwiIHwgXCJsXCI7XG4gIG9uQ2hhbmdlOiAodmFsdWU6IHN0cmluZykgPT4gdm9pZDtcbn0gJiBGb3JtRmllbGRQcm9wcztcblxudHlwZSBTdHlsZWREaXZpZGVyUHJvcHMgPSB7XG4gIGlzQ2hlY2tlZDogYm9vbGVhbjtcbn0gJiBQaWNrPFNlZ21lbnRlZENvbnRyb2xQcm9wcywgXCJqdXN0aWZpZWRcIj47XG5cbmNvbnN0IFN0eWxlZERpdmlkZXIgPSBzdHlsZWQuZGl2PFN0eWxlZERpdmlkZXJQcm9wcz4oXG4gICh7IHRoZW1lLCBpc0NoZWNrZWQsIGp1c3RpZmllZCB9KSA9PiB7XG4gICAgY29uc3QgYm9yZGVyID0gYDFweCBzb2xpZCAke3RoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuc2Vjb25kYXJ5LmRlZmF1bHR9YDtcbiAgICBjb25zdCBiYXNlU3R5bGVzID0ge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS52YWx1ZXMuY29sb3IuYmFja2dyb3VuZC5wcmltYXJ5LmRlZmF1bHQsXG4gICAgfTtcbiAgICBjb25zdCBjaGVja2VkU3R5bGUgPSBpc0NoZWNrZWQgJiYge1xuICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnZhbHVlcy5jb2xvci5ib3JkZXIuYWNjZW50U3VidGxlLmRlZmF1bHQsXG4gICAgfTtcblxuICAgIGNvbnN0IGJvcmRlclJpZ2h0U3R5bGUgPSB7XG4gICAgICBib3JkZXJSaWdodDogYm9yZGVyLFxuICAgICAgLi4uYmFzZVN0eWxlcyxcbiAgICAgIC4uLmNoZWNrZWRTdHlsZSxcbiAgICB9O1xuXG4gICAgaWYgKCFqdXN0aWZpZWQpIHtcbiAgICAgIHJldHVybiBib3JkZXJSaWdodFN0eWxlO1xuICAgIH1cblxuICAgIHJldHVybiB7XG4gICAgICAvLyBMYXlvdXQgb24gdGFibGV0IGFuZCBkZXNrdG9wXG4gICAgICBbYEBtZWRpYSAobWluLXdpZHRoOiAke2JyZWFrcG9pbnRzLm1lZGl1bS52YWx1ZX1weClgXToge1xuICAgICAgICAuLi5ib3JkZXJSaWdodFN0eWxlLFxuICAgICAgfSxcblxuICAgICAgLy8gTGF5b3V0IG9uIG1vYmlsZVxuICAgICAgW2BAbWVkaWEgKG1heC13aWR0aDogJHticmVha3BvaW50cy5tZWRpdW0udmFsdWV9cHgpYF06IHtcbiAgICAgICAgYm9yZGVyQm90dG9tOiBib3JkZXIsXG4gICAgICAgIC4uLmJhc2VTdHlsZXMsXG4gICAgICAgIC4uLmNoZWNrZWRTdHlsZSxcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuKTtcblxudHlwZSBTdHlsZWRDb250YWluZXJQcm9wcyA9IFBpY2s8XG4gIFNlZ21lbnRlZENvbnRyb2xQcm9wcyxcbiAgXCJqdXN0aWZpZWRcIiB8IFwib3B0aW9uc1wiXG4+O1xuXG5jb25zdCBTdHlsZWRDb250YWluZXIgPSBzdHlsZWQuZGl2PFN0eWxlZENvbnRhaW5lclByb3BzPihcbiAgKHsganVzdGlmaWVkLCBvcHRpb25zIH0pID0+IHtcbiAgICBjb25zdCBiYXNlU3R5bGUgPSB7XG4gICAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICB9O1xuXG4gICAgaWYgKCFqdXN0aWZpZWQpIHtcbiAgICAgIHJldHVybiBiYXNlU3R5bGU7XG4gICAgfVxuXG4gICAgcmV0dXJuIHtcbiAgICAgIC4uLmJhc2VTdHlsZSxcbiAgICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG5cbiAgICAgIFwiJiA+ICpcIjoge1xuICAgICAgICBmbGV4OiBgMSAxICR7MTAwIC8gb3B0aW9ucy5sZW5ndGh9JWAsXG4gICAgICB9LFxuXG4gICAgICBbYCYgPiAke1N0eWxlZERpdmlkZXJ9YF06IHtcbiAgICAgICAgZmxleDogXCIwIDAgYXV0b1wiLFxuICAgICAgfSxcblxuICAgICAgLy8gTGF5b3V0IG9uIHRhYmxldCBhbmQgZGVza3RvcFxuICAgICAgW2BAbWVkaWEgKG1pbi13aWR0aDogJHticmVha3BvaW50cy5tZWRpdW0udmFsdWV9cHgpYF06IHtcbiAgICAgICAgZmxleERpcmVjdGlvbjogXCJyb3dcIixcbiAgICAgIH0sXG4gICAgfTtcbiAgfVxuKTtcblxuZXhwb3J0IGZ1bmN0aW9uIFNlZ21lbnRlZENvbnRyb2woe1xuICBvcHRpb25zLFxuICB2YWx1ZSxcbiAgZGlzYWJsZWQsXG4gIGp1c3RpZmllZCxcbiAgc2l6ZSA9IFwibVwiLFxuICBvbkNoYW5nZSxcbiAgLi4ucmVzdFxufTogU2VnbWVudGVkQ29udHJvbFByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgY29uc3QgaGFuZGxlQ2hhbmdlOiBSZWFjdC5Gb3JtRXZlbnRIYW5kbGVyPEhUTUxJbnB1dEVsZW1lbnQ+ID0gKGV2dCkgPT4ge1xuICAgIG9uQ2hhbmdlKChldnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlKTtcbiAgfTtcblxuICBjb25zdCBvcHRpb25FbG1zID0gb3B0aW9ucy5tYXAoXG4gICAgKHsgdmFsdWU6IG9wdGlvblZhbHVlLCAuLi5vdGhlclByb3BzIH0sIGluZGV4KSA9PiB7XG4gICAgICBjb25zdCBpc0NoZWNrZWQgPSB2YWx1ZSA9PT0gb3B0aW9uVmFsdWU7XG4gICAgICBjb25zdCBkaXZpZGVyRWxtID1cbiAgICAgICAgaW5kZXggIT09IDAgPyAoXG4gICAgICAgICAgPFN0eWxlZERpdmlkZXIgaXNDaGVja2VkPXtpc0NoZWNrZWR9IGp1c3RpZmllZD17anVzdGlmaWVkfSAvPlxuICAgICAgICApIDogbnVsbDtcblxuICAgICAgcmV0dXJuIChcbiAgICAgICAgPFJlYWN0LkZyYWdtZW50IGtleT17b3B0aW9uVmFsdWV9PlxuICAgICAgICAgIHtkaXZpZGVyRWxtfVxuICAgICAgICAgIDxTZWdtZW50ZWRDb250cm9sT3B0aW9uXG4gICAgICAgICAgICB2YWx1ZT17b3B0aW9uVmFsdWV9XG4gICAgICAgICAgICBzaXplPXtzaXplfVxuICAgICAgICAgICAgY2hlY2tlZD17aXNDaGVja2VkfVxuICAgICAgICAgICAgaXNSZXNwb25zaXZlPXtqdXN0aWZpZWR9XG4gICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgICAgICAgey4uLm90aGVyUHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICk7XG4gICAgfVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPEZvcm1GaWVsZCBkYXRhLWRzLWlkPVwiU2VnbWVudGVkQ29udHJvbFwiIHsuLi5yZXN0fSBkaXNhYmxlZD17ZGlzYWJsZWR9PlxuICAgICAgPFN0eWxlZENvbnRhaW5lciBqdXN0aWZpZWQ9e2p1c3RpZmllZH0gb3B0aW9ucz17b3B0aW9uc30+XG4gICAgICAgIHtvcHRpb25FbG1zfVxuICAgICAgPC9TdHlsZWRDb250YWluZXI+XG4gICAgPC9Gb3JtRmllbGQ+XG4gICk7XG59XG4vKiBlc2xpbnQtZW5hYmxlIHJlYWN0L2pzeC1wcm9wcy1uby1zcHJlYWRpbmcgKi9cbiJdfQ== */");
+function SegmentedControl(_ref3) {
+  let {
+    options,
+    value,
+    disabled,
+    justified,
+    size = "m",
+    onChange,
+    ...rest
+  } = _ref3;
+  const handleChange = evt => {
+    onChange(evt.target.value);
+  };
+  const optionElms = options.map((_ref4, index) => {
+    let {
+      value: optionValue,
+      ...otherProps
+    } = _ref4;
+    const isChecked = value === optionValue;
+    const dividerElm = index !== 0 ? /*#__PURE__*/React.createElement(StyledDivider, {
+      isChecked: isChecked,
+      justified: justified
+    }) : null;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: optionValue
+    }, dividerElm, /*#__PURE__*/React.createElement(SegmentedControlOption, _extends({
+      value: optionValue,
+      size: size,
+      checked: isChecked,
+      isResponsive: justified,
+      disabled: disabled,
+      onChange: handleChange
+    }, otherProps)));
+  });
+  return /*#__PURE__*/React.createElement(FormField, _extends({
+    "data-ds-id": "SegmentedControl"
+  }, rest, {
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(StyledContainer, {
+    justified: justified,
+    options: options
+  }, optionElms));
+}
+/* eslint-enable react/jsx-props-no-spreading */
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

package/build/esm/src/components/Form/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../../../../src/components/Form/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { SegmentedControlOption } from \"./SegmentedControlOption\";\nimport breakpoints from \"../../../../build-tokens/_breakpoints.json\";\n\nexport type SegmentedControlOption = {\n  name: string;\n  label: string;\n  value: string;\n  sublabel?: string;\n  displayAsOptionWithSublabel?: boolean;\n  onClick?: (e: React.FormEvent<HTMLInputElement>) => void;\n  onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;\n  onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;\n};\n\nexport type SegmentedControlProps = {\n  /**\n   * Meta data for options\n   * @param name - Name for radio input\n   * @param label - Label for display\n   * @param value - Value for radio input\n   * @param sublabel - Sublabel displayed below label (Optional)\n   * @param displayAsOptionWithSublabel - Set this to true if no sublabel is available, but option is displayed as one with sublabel\n   */\n  options: SegmentedControlOption[];\n  /** Current selected value */\n  value: string;\n  /** Justified layout, with equal size segments spanning to container width */\n  justified?: boolean;\n  /** Segment size, not applicable on mobile breakpoint */\n  size?: \"s\" | \"m\" | \"l\";\n  onChange: (value: string) => void;\n} & FormFieldProps;\n\ntype StyledDividerProps = {\n  isChecked: boolean;\n} & Pick<SegmentedControlProps, \"justified\">;\n\nconst StyledDivider = styled.div<StyledDividerProps>(\n  ({ theme, isChecked, justified }) => {\n    const border = `1px solid ${theme.values.color.border.secondary.default}`;\n    const baseStyles = {\n      backgroundColor: theme.values.color.background.primary.default,\n    };\n    const checkedStyle = isChecked && {\n      borderColor: theme.values.color.border.accentSubtle.default,\n    };\n\n    const borderRightStyle = {\n      borderRight: border,\n      ...baseStyles,\n      ...checkedStyle,\n    };\n\n    if (!justified) {\n      return borderRightStyle;\n    }\n\n    return {\n      // Layout on tablet and desktop\n      [`@media (min-width: ${breakpoints.medium.value}px)`]: {\n        ...borderRightStyle,\n      },\n\n      // Layout on mobile\n      [`@media (max-width: ${breakpoints.medium.value}px)`]: {\n        borderBottom: border,\n        ...baseStyles,\n        ...checkedStyle,\n      },\n    };\n  }\n);\n\ntype StyledContainerProps = Pick<\n  SegmentedControlProps,\n  \"justified\" | \"options\"\n>;\n\nconst StyledContainer = styled.div<StyledContainerProps>(\n  ({ justified, options }) => {\n    const baseStyle = {\n      display: \"flex\",\n    };\n\n    if (!justified) {\n      return baseStyle;\n    }\n\n    return {\n      ...baseStyle,\n      flexDirection: \"column\",\n\n      \"& > *\": {\n        flex: `1 1 ${100 / options.length}%`,\n      },\n\n      [`& > ${StyledDivider}`]: {\n        flex: \"0 0 auto\",\n      },\n\n      // Layout on tablet and desktop\n      [`@media (min-width: ${breakpoints.medium.value}px)`]: {\n        flexDirection: \"row\",\n      },\n    };\n  }\n);\n\nexport function SegmentedControl({\n  options,\n  value,\n  disabled,\n  justified,\n  size = \"m\",\n  onChange,\n  ...rest\n}: SegmentedControlProps): React.ReactElement {\n  const handleChange: React.FormEventHandler<HTMLInputElement> = (evt) => {\n    onChange((evt.target as HTMLInputElement).value);\n  };\n\n  const optionElms = options.map(\n    ({ value: optionValue, ...otherProps }, index) => {\n      const isChecked = value === optionValue;\n      const dividerElm =\n        index !== 0 ? (\n          <StyledDivider isChecked={isChecked} justified={justified} />\n        ) : null;\n\n      return (\n        <React.Fragment key={optionValue}>\n          {dividerElm}\n          <SegmentedControlOption\n            value={optionValue}\n            size={size}\n            checked={isChecked}\n            isResponsive={justified}\n            disabled={disabled}\n            onChange={handleChange}\n            {...otherProps}\n          />\n        </React.Fragment>\n      );\n    }\n  );\n\n  return (\n    <FormField data-ds-id=\"SegmentedControl\" {...rest} disabled={disabled}>\n      <StyledContainer justified={justified} options={options}>\n        {optionElms}\n      </StyledContainer>\n    </FormField>\n  );\n}\n/* eslint-enable react/jsx-props-no-spreading */\n"],"names":["StyledDivider","_styled","process","env","NODE_ENV","target","label","_ref","theme","isChecked","justified","border","values","color","secondary","default","baseStyles","backgroundColor","background","primary","checkedStyle","borderColor","accentSubtle","borderRightStyle","borderRight","breakpoints","medium","value","borderBottom","StyledContainer","_ref2","options","baseStyle","display","flexDirection","flex","length","SegmentedControl","_ref3","disabled","size","onChange","rest","handleChange","evt","optionElms","map","_ref4","index","optionValue","otherProps","dividerElm","React","createElement","Fragment","key","SegmentedControlOption","_extends","checked","isResponsive","FormField"],"mappings":"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"}

package/build/esm/src/components/Form/SegmentedControl/SegmentedControlOption.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { SegmentedControlOption, SegmentedControlProps } from "./SegmentedControl";
+export declare type SegmentedControlOptionProps = Pick<SegmentedControlProps, "size" | "disabled"> & SegmentedControlOption & {
+    checked: boolean | undefined;
+    isResponsive?: boolean;
+    onChange?: (e: React.FormEvent<HTMLInputElement>) => void;
+};
+export declare function SegmentedControlOption({ name, value, checked, label, sublabel, size, disabled, isResponsive, displayAsOptionWithSublabel, onChange, onClick, onBlur, onFocus, }: SegmentedControlOptionProps): React.ReactElement;