@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../src/components/Radio.tsx"],"sourcesContent":[null],"names":["Radio","onBlur","className","value","label","required","helperText","disabled","checked","dataTest","renderCheckmark","id","useUID","name","onChange","errorId","useContext","RadioGroupContext","errorProps","React","classNames","styles","wrapper","error","htmlFor","undefined","createElement","TruncatedText","text","type","helpTooltipId","checkmark","Help","parentId"],"mappings":";;;;;;;;;;AA4BA;;;;;;AAMG;AACI,MAAMA,KAAK,GAAmBA,CAAC;EACpCC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,UAAU;AACVC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;EACP,WAAW,EAAEC,QAAQ,GAAG,aAAa;AACrCC,EAAAA;AAAe,CAChB,KAAI;AACH,EAAA,MAAMC,EAAE,GAAGC,eAAM,EAAE;EACnB,MAAM;IAAEC,IAAI;IAAEC,QAAQ;AAAEC,IAAAA;AAAO,GAAE,GAAGC,gBAAU,CAACC,8CAAiB,CAAC;EACjE,MAAMC,UAAU,GAAGH,OAAO,GACtB;AACE,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,mBAAmB,EAAEA;GACtB,GACD,EAAE;AAEN,EAAA,oBACEI;AACEjB,IAAAA,SAAS,EAAEkB,EAAU,CACnBC,oBAAM,CAACC,OAAO,EACd;AACE,MAAA,CAACD,oBAAM,CAACd,QAAQ,GAAGA,QAAQ;AAC3B,MAAA,CAACc,oBAAM,CAACE,KAAK,GAAG,CAAC,CAACR;KACnB,EACDb,SAAS,CACV;AAAA,IAAA,WAAA,EACUO,QAAQ;AACnBe,IAAAA,OAAO,EAAEb;GAAE,EAMVP,KAAK,KAAKqB,SAAS,kBAClBN,KAAA,CAAAO,aAAA,CAAA,KAAA,EAAA;IAAKxB,SAAS,EAAEmB,oBAAM,CAACR,IAAI;IAAA,WAAA,EAAa,GAAGJ,QAAQ,CAAA,MAAA;AAAQ,GAAA,eACzDU,KAAA,CAAAO,aAAA,CAACC,sCAAa,EAAA;AAACC,IAAAA,IAAI,EAAExB;GAAK,CAAI,CAC1B,CACP,eACDe,KAAA,CAAAO,aAAA,CAAA,OAAA,EAAA;AACEG,IAAAA,IAAI,EAAC,OAAO;AACZlB,IAAAA,EAAE,EAAEA,EAAE;AACNE,IAAAA,IAAI,EAAEA,IAAI;AACVL,IAAAA,OAAO,EAAEA,OAAO;AAChBH,IAAAA,QAAQ,EAAEA,QAAQ;AAClBS,IAAAA,QAAQ,EAAEA,QAAQ;AAClBb,IAAAA,MAAM,EAAEA,MAAM;AACdE,IAAAA,KAAK,EAAEA,KAAK;AACZI,IAAAA,QAAQ,EAAEA,QAAQ;AAAA,IAAA,kBAAA,EACAD,UAAU,IAAIwB,6BAAa,CAACnB,EAAE,CAAC;IAAA,GAC7CO;AAAU,GAAA,CACd,EACDR,eAAe,GAAGA,eAAe,EAAE,gBAAGS,KAAA,CAAAO,aAAA,CAAA,MAAA,EAAA;IAAMxB,SAAS,EAAEmB,oBAAM,CAACU;GAAS,CAAI,EAC3EzB,UAAU,iBAAIa,KAAA,CAAAO,aAAA,CAACM,oBAAI,EAAA;IAAA,WAAA,EAAY,CAAA,EAAGvB,QAAQ,CAAA,YAAA,CAAc;AAAEwB,IAAAA,QAAQ,EAAEtB,EAAE;AAAEL,IAAAA,UAAU,EAAEA,UAAU;IAAEJ,SAAS,EAAEmB,oBAAM,CAACf;AAAU,GAAA,CAAI,CAC3H;AAEZ;;;;"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,UAAU,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,IAAI,EAAa,aAAa,EAAE,MAAM,QAAQ,CAAA;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAmB/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,WAAW,EAAE,QAAQ,GAAG,aAAa,EACrC,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjE,MAAM,UAAU,GAAG,OAAO;QACxB,CAAC,CAAC;YACE,cAAc,EAAE,IAAI;YACpB,mBAAmB,EAAE,OAAO;SAC7B;QACH,CAAC,CAAC,EAAE,CAAA;IAEN,OAAO,CACL,+BACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO;SAC1B,EACD,SAAS,CACV,eACU,QAAQ,EACnB,OAAO,EAAE,EAAE;QAMV,KAAK,KAAK,SAAS,IAAI,CACtB,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,eAAa,GAAG,QAAQ,QAAQ;YACzD,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,GAAI,CAC1B,CACP;QACD,+BACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,sBACA,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC,KAC7C,UAAU,GACd;QACD,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,SAAS,GAAI;QAC3E,UAAU,IAAI,oBAAC,IAAI,iBAAY,GAAG,QAAQ,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,GAAI,CAC3H,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Radio.module.scss

@@ -0,0 +1,112 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.wrapper {
+  display: inline-flex;
+
+  // inline-flex changes vertical align compared to display: flex
+  // setting vertical-align allows us to easily use radio button
+  // inline e.g. next to the text
+  // Most common use case will be still the usage in a form where parent
+  // wrapper controls this.
+  vertical-align: bottom;
+  align-items: center;
+  cursor: pointer;
+
+  @include c.typographyBodySmall;
+
+  // hide native checkbox
+  input {
+    @include h.visuallyHidden;
+  }
+
+  .helperText {
+    margin-left: c.$grid * 0.5;
+  }
+
+  // default visible checkmark
+  .checkmark {
+    // using min-{size} because the circle can be broken in a flex wrapper
+    min-width: c.$iconSizeSmall;
+    min-height: c.$iconSizeSmall;
+    border: c.$borderWidth solid c.$colorNeutralLight;
+    border-radius: 50%;
+
+    // because of ~ and + selectors used below, we need to keep the current order in DOM and
+    // fix it visually with order property
+    order: -1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.inline {
+    .checkmark {
+      // in case we have inline mode, we should have a padding like native radio button has
+      margin-left: c.$grid;
+    }
+  }
+
+  & > input:checked ~ .checkmark {
+    background-color: c.$colorSuccess;
+    border-color: c.$colorSuccess;
+  }
+
+  /**
+    Hover
+   */
+  &:hover,
+  &.hover {
+    input ~ .checkmark {
+      border-color: c.$colorPrimary;
+    }
+  }
+
+  /* Style the indicator (dot/circle) */
+  .checkmark::after {
+    content: '';
+    width: 1.5 * c.$grid;
+    height: 1.5 * c.$grid;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  input:checked ~ .checkmark::after {
+    background: c.$colorNeutralWhite;
+  }
+
+  .name {
+    overflow: hidden;
+    padding-left: c.$grid * 1.25;
+    padding-right: c.$grid * 1.25;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: c.$colorNeutralLight;
+
+    input ~ .checkmark {
+      border-color: c.$colorNeutralLight;
+    }
+
+    input:checked ~ .checkmark {
+      background-color: c.$colorNeutral;
+    }
+  }
+
+  // Error state
+  &.error input:checked ~ .checkmark {
+    border-color: c.$colorError;
+  }
+
+  // :checked, :not(:checked) is added here to make the specificity more important than the error's state
+  // where we make the radio as error if and only if it's checked
+  &.focus > input:not(:checked),
+  &.focus > input:checked,
+  input:focus:not(:checked),
+  input:focus:checked {
+    ~ .checkmark {
+      @include h.outlineFormField;
+    }
+  }
+}

package/lib/components/RadioFormik.js

@@ -1,27 +1,12 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_Radio = require('./Radio.js');
-var components_RadioGroupContext = require('./RadioGroupContext.js');
-
-const RadioFieldFormik = ({
-  value,
-  ...props
-}) => {
-  const {
-    name
-  } = React.useContext(components_RadioGroupContext.RadioGroupContext);
-  const [field] = formik.useField({
-    name
-  });
-  return /*#__PURE__*/React.createElement(components_Radio.Radio, {
-    ...props,
-    checked: field.value === value,
-    value: value,
-    onBlur: field.onBlur
-  });
+import React, { useContext } from 'react';
+import { useField } from 'formik';
+import { Radio } from './Radio';
+import { RadioGroupContext } from './RadioGroupContext';
+export const RadioFieldFormik = ({ value, ...props }) => {
+    const { name } = useContext(RadioGroupContext);
+    const [field] = useField({
+        name,
+    });
+    return React.createElement(Radio, { ...props, checked: field.value === value, value: value, onBlur: field.onBlur });
 };
-
-exports.RadioFieldFormik = RadioFieldFormik;
-//# sourceMappingURL=RadioFormik.js.map
+//# sourceMappingURL=RadioFormik.js.map

package/lib/components/RadioFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioFormik.js","sources":["../../src/components/RadioFormik.tsx"],"sourcesContent":[null],"names":["RadioFieldFormik","value","props","name","useContext","RadioGroupContext","field","useField","React","createElement","Radio","checked","onBlur"],"mappings":";;;;;;;AAUO,MAAMA,gBAAgB,GAAGA,CAAC;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAoB,KAAkB;EACtF,MAAM;AAAEC,IAAAA;AAAI,GAAE,GAAGC,gBAAU,CAACC,8CAAiB,CAAC;AAC9C,EAAA,MAAM,CAACC,KAAK,CAAC,GAAGC,eAAQ,CAAqB;AAC3CJ,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBAAOK,KAAA,CAAAC,aAAA,CAACC,sBAAK,EAAA;AAAA,IAAA,GAAKR,KAAK;AAAES,IAAAA,OAAO,EAAEL,KAAK,CAACL,KAAK,KAAKA,KAAK;AAAEA,IAAAA,KAAK,EAAEA,KAAK;IAAEW,MAAM,EAAEN,KAAK,CAACM;AAAM,GAAA,CAAI;AACjG;;;;"}
+{"version":3,"file":"RadioFormik.js","sourceRoot":"","sources":["../../src/components/RadioFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAMvD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAoB,EAAgB,EAAE;IACtF,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAC9C,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAqB;QAC3C,IAAI;KACL,CAAC,CAAA;IAEF,OAAO,oBAAC,KAAK,OAAK,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAI,CAAA;AACjG,CAAC,CAAA"}

package/lib/components/RadioGroup.js

@@ -1,57 +1,24 @@
-'use strict';
-
-var React = require('react');
-var reactUid = require('react-uid');
-var cn = require('classnames');
-var components_Error = require('./Error.js');
-var components_RadioGroupContext = require('./RadioGroupContext.js');
-var RadioGroup_module = require('./RadioGroup.module.scss.js');
-
+import React, { useMemo } from 'react';
+import { useUID } from 'react-uid';
+import classNames from 'classnames';
+import { Error, errorId } from './Error';
+import { RadioGroupContext } from './RadioGroupContext';
+import styles from './RadioGroup.module.scss';
 /**
  * ### Purpose
  * Forms require input from users. If you need information that can be represented as a choice of multiple values, use input with type 'radio'.
  * You can use RadioGroup in order to group radios buttons into logical cells and provide corresponding error if needed.
  */
-const RadioGroup = props => {
-  const {
-    radioGroupClassName,
-    error,
-    children,
-    className,
-    name,
-    onChange,
-    inline = false,
-    'data-test': dataTest = 'radio-group'
-  } = props;
-  const id = reactUid.useUID();
-  const errorIdString = error && components_Error.errorId(id);
-  const providerValue = React.useMemo(() => ({
-    name,
-    errorId: errorIdString,
-    onChange
-  }), [name, errorIdString, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, {
-      [RadioGroup_module.default.withError]: 'error' in props
-    }),
-    "data-test": `${dataTest}-wrapper`
-  }, /*#__PURE__*/React.createElement("div", {
-    role: "radiogroup",
-    "data-test": dataTest,
-    className: cn({
-      [RadioGroup_module.default.inline]: inline
-    }, RadioGroup_module.default.radioGroup, radioGroupClassName),
-    "aria-invalid": !!error,
-    "aria-errormessage": errorIdString
-  }, /*#__PURE__*/React.createElement(components_RadioGroupContext.RadioGroupContext.Provider, {
-    value: providerValue
-  }, children)), /*#__PURE__*/React.createElement(components_Error.Error, {
-    truncated: true,
-    error: error,
-    className: RadioGroup_module.default.errorContainer,
-    inputId: id
-  }));
+export const RadioGroup = (props) => {
+    const { radioGroupClassName, error, children, className, name, onChange, inline = false, 'data-test': dataTest = 'radio-group' } = props;
+    const id = useUID();
+    const errorIdString = error && errorId(id);
+    const providerValue = useMemo(() => ({ name, errorId: errorIdString, onChange }), [name, errorIdString, onChange]);
+    return (React.createElement("div", { className: classNames(className, { [styles.withError]: 'error' in props }), "data-test": `${dataTest}-wrapper` },
+        React.createElement("div", { role: "radiogroup", "data-test": dataTest, className: classNames({
+                [styles.inline]: inline,
+            }, styles.radioGroup, radioGroupClassName), "aria-invalid": !!error, "aria-errormessage": errorIdString },
+            React.createElement(RadioGroupContext.Provider, { value: providerValue }, children)),
+        React.createElement(Error, { truncated: true, error: error, className: styles.errorContainer, inputId: id })));
 };
-
-exports.RadioGroup = RadioGroup;
-//# sourceMappingURL=RadioGroup.js.map
+//# sourceMappingURL=RadioGroup.js.map

package/lib/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../src/components/RadioGroup.tsx"],"sourcesContent":[null],"names":["RadioGroup","props","radioGroupClassName","error","children","className","name","onChange","inline","dataTest","id","useUID","errorIdString","errorId","providerValue","useMemo","React","classNames","styles","withError","createElement","role","radioGroup","RadioGroupContext","Provider","value","Error","truncated","errorContainer","inputId"],"mappings":";;;;;;;;;AA0BA;;;;AAIG;AACI,MAAMA,UAAU,GAAyBC,KAAK,IAAI;EACvD,MAAM;IAAEC,mBAAmB;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,IAAI;IAAEC,QAAQ;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAE,WAAW,EAAEC,QAAQ,GAAG;AAAa,GAAE,GAAGR,KAAK;AACxI,EAAA,MAAMS,EAAE,GAAGC,eAAM,EAAE;AACnB,EAAA,MAAMC,aAAa,GAAuBT,KAAK,IAAIU,wBAAO,CAACH,EAAE,CAAC;AAE9D,EAAA,MAAMI,aAAa,GAAGC,aAAO,CAAC,OAAO;IAAET,IAAI;AAAEO,IAAAA,OAAO,EAAED,aAAa;AAAEL,IAAAA;GAAU,CAAC,EAAE,CAACD,IAAI,EAAEM,aAAa,EAAEL,QAAQ,CAAC,CAAC;AAElH,EAAA,oBACES;AAAKX,IAAAA,SAAS,EAAEY,EAAU,CAACZ,SAAS,EAAE;AAAE,MAAA,CAACa,yBAAM,CAACC,SAAS,GAAG,OAAO,IAAIlB;KAAO,CAAC;IAAA,WAAA,EAAa,GAAGQ,QAAQ,CAAA,QAAA;AAAU,GAAA,eAC/GO,KAAA,CAAAI,aAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,WAAA,EACNZ,QAAQ;IACnBJ,SAAS,EAAEY,EAAU,CACnB;MACE,CAACC,yBAAM,CAACV,MAAM,GAAGA;KAClB,EACDU,yBAAM,CAACI,UAAU,EACjBpB,mBAAmB,CACpB;IAAA,cAAA,EACa,CAAC,CAACC,KAAK;AAAA,IAAA,mBAAA,EACFS;GAAa,eAEhCI,KAAA,CAAAI,aAAA,CAACG,8CAAiB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEX;GAAa,EAAGV,QAAQ,CAA8B,CACrF,eACNY,KAAA,CAAAI,aAAA,CAACM,sBAAK;AAACC,IAAAA,SAAS,EAAA,IAAA;AAACxB,IAAAA,KAAK,EAAEA,KAAK;IAAEE,SAAS,EAAEa,yBAAM,CAACU,cAAc;AAAEC,IAAAA,OAAO,EAAEnB;AAAE,GAAA,CAAI,CAC5E;AAEV;;;;"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/components/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiC,OAAO,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,UAAU,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAGvD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAiB7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,EAAE,mBAAmB,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,KAAK,EAAE,WAAW,EAAE,QAAQ,GAAG,aAAa,EAAE,GAAG,KAAK,CAAA;IACxI,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;IACnB,MAAM,aAAa,GAAuB,KAAK,IAAI,OAAO,CAAC,EAAE,CAAC,CAAA;IAE9D,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAA;IAElH,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,OAAO,IAAI,KAAK,EAAE,CAAC,eAAa,GAAG,QAAQ,UAAU;QAC/G,6BACE,IAAI,EAAC,YAAY,eACN,QAAQ,EACnB,SAAS,EAAE,UAAU,CACnB;gBACE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;aACxB,EACD,MAAM,CAAC,UAAU,EACjB,mBAAmB,CACpB,kBACa,CAAC,CAAC,KAAK,uBACF,aAAa;YAEhC,oBAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,aAAa,IAAG,QAAQ,CAA8B,CACrF;QACN,oBAAC,KAAK,IAAC,SAAS,QAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,OAAO,EAAE,EAAE,GAAI,CAC5E,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/RadioGroup.module.scss

@@ -0,0 +1,21 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+@include h.withError;
+
+.radioGroup {
+  display: flex;
+  flex-direction: column;
+
+  &:not(.inline) > *:not(:last-child) {
+    // we need to provide spacing between radios if they're in a vertical column
+    margin-bottom: c.$grid;
+  }
+
+  &.inline {
+    flex-direction: row;
+
+    > *:not(:first-child) {
+      margin-left: c.$grid;
+    }
+  }
+}

package/lib/components/RadioGroupContext.js

@@ -1,10 +1,3 @@
-'use strict';
-
-var React = require('react');
-
-const RadioGroupContext = /*#__PURE__*/React.createContext({
-  name: ''
-});
-
-exports.RadioGroupContext = RadioGroupContext;
-//# sourceMappingURL=RadioGroupContext.js.map
+import React from 'react';
+export const RadioGroupContext = React.createContext({ name: '' });
+//# sourceMappingURL=RadioGroupContext.js.map

package/lib/components/RadioGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupContext.js","sources":["../../src/components/RadioGroupContext.ts"],"sourcesContent":[null],"names":["RadioGroupContext","React","createContext","name"],"mappings":";;;;MAEaA,iBAAiB,gBAAGC,KAAK,CAACC,aAAa,CAIjD;AAAEC,EAAAA,IAAI,EAAE;AAAE,CAAE;;;;"}
+{"version":3,"file":"RadioGroupContext.js","sourceRoot":"","sources":["../../src/components/RadioGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAIjD,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAA"}

package/lib/components/RadioGroupFormik.js

@@ -1,35 +1,17 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_RadioGroup = require('./RadioGroup.js');
-var utils_formik = require('../utils/formik.js');
-
-const RadioGroupFieldFormik = ({
-  name,
-  validate,
-  children,
-  onChange,
-  ...props
-}) => {
-  const [{
-    onChange: onFormikChange
-  }, meta] = formik.useField({
-    name,
-    validate
-  });
-  return /*#__PURE__*/React.createElement(components_RadioGroup.RadioGroup, {
-    ...props,
-    name: name,
-    error: utils_formik.getFieldError(meta),
-    onChange: React.useCallback(e => {
-      if (onChange) {
-        onChange(e.target.value);
-      }
-      onFormikChange(e);
-    }, [onFormikChange, onChange])
-  }, children);
+import React, { useCallback } from 'react';
+import { useField } from 'formik';
+import { RadioGroup } from './RadioGroup';
+import { getFieldError } from '../utils/formik';
+export const RadioGroupFieldFormik = ({ name, validate, children, onChange, ...props }) => {
+    const [{ onChange: onFormikChange }, meta] = useField({
+        name,
+        validate,
+    });
+    return (React.createElement(RadioGroup, { ...props, name: name, error: getFieldError(meta), onChange: useCallback((e) => {
+            if (onChange) {
+                onChange(e.target.value);
+            }
+            onFormikChange(e);
+        }, [onFormikChange, onChange]) }, children));
 };
-
-exports.RadioGroupFieldFormik = RadioGroupFieldFormik;
-//# sourceMappingURL=RadioGroupFormik.js.map
+//# sourceMappingURL=RadioGroupFormik.js.map

package/lib/components/RadioGroupFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupFormik.js","sources":["../../src/components/RadioGroupFormik.tsx"],"sourcesContent":[null],"names":["RadioGroupFieldFormik","name","validate","children","onChange","props","onFormikChange","meta","useField","React","createElement","RadioGroup","error","getFieldError","useCallback","e","target","value"],"mappings":";;;;;;;AAaO,MAAMA,qBAAqB,GAAGA,CAAmB;EACtDC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR,GAAGC;AAAK,CACiB,KAAkB;AAC3C,EAAA,MAAM,CAAC;AAAED,IAAAA,QAAQ,EAAEE;AAAc,GAAE,EAAEC,IAAI,CAAC,GAAGC,eAAQ,CAAqB;IACxEP,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,oBACEO,KAAA,CAAAC,aAAA,CAACC,gCAAU,EAAA;AAAA,IAAA,GACLN,KAAK;AACTJ,IAAAA,IAAI,EAAEA,IAAI;AACVW,IAAAA,KAAK,EAAEC,0BAAa,CAACN,IAAI,CAAC;AAC1BH,IAAAA,QAAQ,EAAEU,iBAAW,CAClBC,CAAC,IAAI;AACJ,MAAA,IAAIX,QAAQ,EAAE;AACZA,QAAAA,QAAQ,CAACW,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;AAC1B,MAAA;MAEAX,cAAc,CAACS,CAAC,CAAC;AACnB,IAAA,CAAC,EACD,CAACT,cAAc,EAAEF,QAAQ,CAAC;GAC3B,EAEAD,QAAQ,CACE;AAEjB;;;;"}
+{"version":3,"file":"RadioGroupFormik.js","sourceRoot":"","sources":["../../src/components/RadioGroupFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAStE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAmB,EACtD,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACiB,EAAgB,EAAE;IAC3C,MAAM,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB;QACxE,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,OACL,KAAK,EACT,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,EAC1B,QAAQ,EAAE,WAAW,CACnB,CAAC,CAAC,EAAE,EAAE;YACJ,IAAI,QAAQ,EAAE,CAAC;gBACb,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YAC1B,CAAC;YAED,cAAc,CAAC,CAAC,CAAC,CAAA;QACnB,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,IAEA,QAAQ,CACE,CACd,CAAA;AACH,CAAC,CAAA"}

package/lib/components/SegmentedControl.js

@@ -1,43 +1,9 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var react = require('@headlessui/react');
-var SegmentedControl_module = require('./SegmentedControl.module.scss.js');
-
-const SegmentedControl = ({
-  label,
-  value,
-  onChange,
-  options,
-  size = 'medium',
-  className,
-  optionClassName,
-  labelClassName,
-  'data-test': dataTest = 'segmented'
-}) => (/*#__PURE__*/React.createElement(react.RadioGroup, {
-  "data-test": dataTest,
-  className: cn(SegmentedControl_module.default.group, {
-    [SegmentedControl_module.default.small]: size === 'small'
-  }, className),
-  value: value,
-  onChange: onChange
-}, label && (/*#__PURE__*/React.createElement(react.RadioGroup.Label, {
-  "data-test": `${dataTest}-label`,
-  className: SegmentedControl_module.default.groupLabel
-}, label)), options.map(option => (/*#__PURE__*/React.createElement(react.RadioGroup.Option, {
-  "data-test": `${dataTest}-${option.value}`,
-  key: option.value,
-  value: option.value,
-  className: ({
-    checked
-  }) => cn(SegmentedControl_module.default.option, {
-    [SegmentedControl_module.default.checked]: checked
-  }, optionClassName)
-}, /*#__PURE__*/React.createElement(react.RadioGroup.Label, {
-  "data-test": `${dataTest}-${option.value}-label`,
-  className: cn(SegmentedControl_module.default.label, labelClassName)
-}, option.label))))));
-
-exports.SegmentedControl = SegmentedControl;
-//# sourceMappingURL=SegmentedControl.js.map
+import React from 'react';
+import cn from 'classnames';
+import { RadioGroup } from '@headlessui/react';
+import styles from './SegmentedControl.module.scss';
+export const SegmentedControl = ({ label, value, onChange, options, size = 'medium', className, optionClassName, labelClassName, 'data-test': dataTest = 'segmented', }) => (React.createElement(RadioGroup, { "data-test": dataTest, className: cn(styles.group, { [styles.small]: size === 'small' }, className), value: value, onChange: onChange },
+    label && (React.createElement(RadioGroup.Label, { "data-test": `${dataTest}-label`, className: styles.groupLabel }, label)),
+    options.map((option) => (React.createElement(RadioGroup.Option, { "data-test": `${dataTest}-${option.value}`, key: option.value, value: option.value, className: ({ checked }) => cn(styles.option, { [styles.checked]: checked }, optionClassName) },
+        React.createElement(RadioGroup.Label, { "data-test": `${dataTest}-${option.value}-label`, className: cn(styles.label, labelClassName) }, option.label))))));
+//# sourceMappingURL=SegmentedControl.js.map

package/lib/components/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":[null],"names":["SegmentedControl","label","value","onChange","options","size","className","optionClassName","labelClassName","dataTest","React","createElement","RadioGroup","cn","styles","group","small","Label","groupLabel","map","option","Option","key","checked"],"mappings":";;;;;;;AA0BO,MAAMA,gBAAgB,GAAGA,CAA4B;EAC1DC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;AACPC,EAAAA,IAAI,GAAG,QAAQ;EACfC,SAAS;EACTC,eAAe;EACfC,cAAc;EACd,WAAW,EAAEC,QAAQ,GAAG;AAAW,CACV,mBACzBC,KAAA,CAAAC,aAAA,CAACC,gBAAU,EAAA;AAAA,EAAA,WAAA,EACEH,QAAQ;AACnBH,EAAAA,SAAS,EAAEO,EAAE,CAACC,+BAAM,CAACC,KAAK,EAAE;AAAE,IAAA,CAACD,+BAAM,CAACE,KAAK,GAAGX,IAAI,KAAK;GAAS,EAAEC,SAAS,CAAC;AAC5EJ,EAAAA,KAAK,EAAEA,KAAK;AACZC,EAAAA,QAAQ,EAAEA;AAAQ,CAAA,EAEjBF,KAAK,kBACJS,KAAA,CAAAC,aAAA,CAACC,gBAAU,CAACK,KAAK;eAAY,CAAA,EAAGR,QAAQ,CAAA,MAAA,CAAQ;EAAEH,SAAS,EAAEQ,+BAAM,CAACI;AAAU,CAAA,EAC3EjB,KAAK,CACW,CACpB,EACAG,OAAO,CAACe,GAAG,CAAEC,MAAM,kBAClBV,KAAA,CAAAC,aAAA,CAACC,gBAAU,CAACS,MAAM,EAAA;AAAA,EAAA,WAAA,EACL,CAAA,EAAGZ,QAAQ,IAAIW,MAAM,CAAClB,KAAK,CAAA,CAAE;EACxCoB,GAAG,EAAEF,MAAM,CAAClB,KAAK;EACjBA,KAAK,EAAEkB,MAAM,CAAClB,KAAK;AACnBI,EAAAA,SAAS,EAAEA,CAAC;AAAEiB,IAAAA;AAAO,GAAE,KAAKV,EAAE,CAACC,+BAAM,CAACM,MAAM,EAAE;IAAE,CAACN,+BAAM,CAACS,OAAO,GAAGA;AAAO,GAAE,EAAEhB,eAAe;AAAC,CAAA,eAE7FG,KAAA,CAAAC,aAAA,CAACC,gBAAU,CAACK,KAAK,EAAA;AAAA,EAAA,WAAA,EAAY,CAAA,EAAGR,QAAQ,IAAIW,MAAM,CAAClB,KAAK,CAAA,MAAA,CAAQ;AAAEI,EAAAA,SAAS,EAAEO,EAAE,CAACC,+BAAM,CAACb,KAAK,EAAEO,cAAc;GACzGY,MAAM,CAACnB,KAAK,CACI,CACD,CACrB,CAAC,CACS;;;;"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/components/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAI9C,OAAO,MAAM,MAAM,gCAAgC,CAAA;AAoBnD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAA4B,EAC1D,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,cAAc,EACd,WAAW,EAAE,QAAQ,GAAG,WAAW,GACV,EAAE,EAAE,CAAC,CAC9B,oBAAC,UAAU,iBACE,QAAQ,EACnB,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO,EAAE,EAAE,SAAS,CAAC,EAC5E,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ;IAEjB,KAAK,IAAI,CACR,oBAAC,UAAU,CAAC,KAAK,iBAAY,GAAG,QAAQ,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,IAC3E,KAAK,CACW,CACpB;IACA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,UAAU,CAAC,MAAM,iBACL,GAAG,QAAQ,IAAI,MAAM,CAAC,KAAK,EAAE,EACxC,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,CAAC;QAE7F,oBAAC,UAAU,CAAC,KAAK,iBAAY,GAAG,QAAQ,IAAI,MAAM,CAAC,KAAK,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IAC1G,MAAM,CAAC,KAAK,CACI,CACD,CACrB,CAAC,CACS,CACd,CAAA"}

package/lib/components/SegmentedControl.module.scss

@@ -0,0 +1,81 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.group {
+  display: flex;
+
+  .groupLabel {
+    @include h.visuallyHidden;
+  }
+
+  .option {
+    position: relative;
+    box-sizing: border-box;
+    height: c.$inputHeight;
+    min-width: c.$grid * 37.5;
+    border: 1px solid c.$colorNeutralLight;
+    border-bottom-width: 6px;
+    background-color: c.$colorNeutralLighter;
+    color: c.$colorTextSecondary;
+    cursor: pointer;
+
+    .label {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      padding-left: c.$grid * 2;
+      padding-right: c.$grid * 2;
+      cursor: pointer;
+
+      @include c.typographyBodyNormal('bold');
+    }
+
+    &.checked {
+      color: c.$colorText;
+      border-bottom-color: c.$colorSuccess;
+    }
+
+    &:first-of-type {
+      border-top-left-radius: c.$borderRadius;
+      border-bottom-left-radius: c.$borderRadius;
+    }
+
+    &:last-of-type {
+      border-top-right-radius: c.$borderRadius;
+      border-bottom-right-radius: c.$borderRadius;
+    }
+
+    // Border collapse
+    &:not(:first-of-type) {
+      margin-left: -1px;
+    }
+
+    &:hover {
+      color: c.$colorText;
+    }
+
+    &:focus-visible {
+      // Do not remove outline for high-contrast modes
+      // https://stackoverflow.com/a/52616313
+      outline: c.$outlineWidth solid transparent;
+      color: c.$colorText;
+      position: relative;
+      z-index: c.$zIndex200;
+
+      @include h.outlineAround;
+    }
+  }
+
+  &.small {
+    .option {
+      min-width: c.$grid * 28.125;
+      height: c.$inputHeightSmall;
+      border-bottom-width: 4px;
+
+      .label {
+        @include c.typographyBodySmall('bold');
+      }
+    }
+  }
+}

package/lib/components/SegmentedControlFormik.js

@@ -1,31 +1,13 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_SegmentedControl = require('./SegmentedControl.js');
-var utils_formik = require('../utils/formik.js');
-
-const SegmentedControlFormik = ({
-  name,
-  validate,
-  ...props
-}) => {
-  const [{
-    value
-  },, {
-    setValue,
-    setTouched
-  }] = formik.useField({
-    name,
-    validate
-  });
-  const onChange = React.useMemo(() => utils_formik.formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
-  return /*#__PURE__*/React.createElement(components_SegmentedControl.SegmentedControl, {
-    ...props,
-    value: value,
-    onChange: onChange
-  });
+import React, { useMemo } from 'react';
+import { useField } from 'formik';
+import { SegmentedControl } from './SegmentedControl';
+import { formikTouchAndUpdate } from '../utils/formik';
+export const SegmentedControlFormik = ({ name, validate, ...props }) => {
+    const [{ value }, , { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const onChange = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    return React.createElement(SegmentedControl, { ...props, value: value, onChange: onChange });
 };
-
-exports.SegmentedControlFormik = SegmentedControlFormik;
-//# sourceMappingURL=SegmentedControlFormik.js.map
+//# sourceMappingURL=SegmentedControlFormik.js.map

package/lib/components/SegmentedControlFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlFormik.js","sources":["../../src/components/SegmentedControlFormik.tsx"],"sourcesContent":[null],"names":["SegmentedControlFormik","name","validate","props","value","setValue","setTouched","useField","onChange","useMemo","formikTouchAndUpdate","React","createElement","SegmentedControl"],"mappings":";;;;;;;AAYO,MAAMA,sBAAsB,GAAGA,CAA+C;EACnFC,IAAI;EACJC,QAAQ;EACR,GAAGC;AAAK,CAC2B,KAAkB;AACrD,EAAA,MAAM,CAAC;AAAEC,IAAAA;AAAK,GAAE,GAAI;IAAEC,QAAQ;AAAEC,IAAAA;GAAY,CAAC,GAAGC,eAAQ,CAAK;IAC3DN,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMM,QAAQ,GAAGC,aAAO,CAAC,MAAMC,iCAAoB,CAAKL,QAAQ,EAAEC,UAAU,CAAC,EAAE,CAACD,QAAQ,EAAEC,UAAU,CAAC,CAAC;AAEtG,EAAA,oBAAOK,KAAA,CAAAC,aAAA,CAACC,4CAAgB,EAAA;AAAA,IAAA,GAASV,KAAK;AAAEC,IAAAA,KAAK,EAAEA,KAAK;AAAEI,IAAAA,QAAQ,EAAEA;IAAY;AAC9E;;;;"}
+{"version":3,"file":"SegmentedControlFormik.js","sourceRoot":"","sources":["../../src/components/SegmentedControlFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,OAAO,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAA;AAC5E,OAAO,EAAyB,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAQ7E,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAA+C,EACnF,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EAC2B,EAAgB,EAAE;IACrD,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,AAAD,EAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAK;QAC3D,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAK,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IAEtG,OAAO,oBAAC,gBAAgB,OAAS,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;AAC9E,CAAC,CAAA"}