@flodesk/grain 6.1.0 → 6.1.1

package/es/components/autocomplete.js

@@ -35,16 +35,8 @@ import { Combobox } from '@headlessui/react';
 import { types } from '../types';
 import { InputField, MenuCard, MenuItem, MenuGroupTitle, FieldLabel, componentVars, MenuTransition } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
-var Root = function Root(_ref) {
+var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var props = Object.assign({}, _ref);
-  return ___EmotionJSX(Box, _extends({}, props, {
-    position: "relative"
-  }));
-};
-
-var Trigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var props = Object.assign({}, _ref2);
   return ___EmotionJSX(Box, _extends({
     ref: ref
   }, props, {
@@ -87,17 +79,17 @@ var getShowGroupTitle = function getShowGroupTitle(index, option, filteredOption
   return firstOptionHasTitle || titleChanged;
 };
 
-export var Autocomplete = function Autocomplete(_ref3) {
-  var options = _ref3.options,
-      defaultOption = _ref3.defaultOption,
-      onChange = _ref3.onChange,
-      _ref3$menuPlacement = _ref3.menuPlacement,
-      menuPlacement = _ref3$menuPlacement === void 0 ? 'bottomStart' : _ref3$menuPlacement,
-      _ref3$menuWidth = _ref3.menuWidth,
-      menuWidth = _ref3$menuWidth === void 0 ? '100%' : _ref3$menuWidth,
-      menuZIndex = _ref3.menuZIndex,
-      placeholder = _ref3.placeholder,
-      label = _ref3.label;
+export var Autocomplete = function Autocomplete(_ref2) {
+  var options = _ref2.options,
+      defaultOption = _ref2.defaultOption,
+      onChange = _ref2.onChange,
+      _ref2$menuPlacement = _ref2.menuPlacement,
+      menuPlacement = _ref2$menuPlacement === void 0 ? 'bottomStart' : _ref2$menuPlacement,
+      _ref2$menuWidth = _ref2.menuWidth,
+      menuWidth = _ref2$menuWidth === void 0 ? '100%' : _ref2$menuWidth,
+      menuZIndex = _ref2.menuZIndex,
+      placeholder = _ref2.placeholder,
+      label = _ref2.label;
 
   var _useState = useState(defaultOption),
       _useState2 = _slicedToArray(_useState, 2),
@@ -118,12 +110,14 @@ export var Autocomplete = function Autocomplete(_ref3) {
   var filteredOptions = getFilteredOptions(query, options);
   var noResults = !Boolean(filteredOptions.length);
   return ___EmotionJSX(Combobox, {
-    as: Root,
+    as: "div",
     value: selectedOption,
     onChange: handleChange
   }, label && ___EmotionJSX(Combobox.Label, {
     as: FieldLabel
-  }, label), ___EmotionJSX(Combobox.Button, {
+  }, label), ___EmotionJSX(Box, {
+    position: "relative"
+  }, ___EmotionJSX(Combobox.Button, {
     as: Trigger
   }, ___EmotionJSX(Combobox.Input, {
     as: InputField,
@@ -151,16 +145,16 @@ export var Autocomplete = function Autocomplete(_ref3) {
       value: option,
       as: Fragment,
       disabled: option.isDisabled
-    }, function (_ref4) {
-      var active = _ref4.active,
-          selected = _ref4.selected;
+    }, function (_ref3) {
+      var active = _ref3.active,
+          selected = _ref3.selected;
       return ___EmotionJSX(MenuItem, {
         isSelected: selected,
         isActive: !option.isDisabled && active,
         isDisabled: option.isDisabled
       }, option.content);
     }));
-  }), noResults && ___EmotionJSX(EmptyState, null))));
+  }), noResults && ___EmotionJSX(EmptyState, null)))));
 };
 Autocomplete.propTypes = {
   options: PropTypes.array,

package/es/components/checkbox.js

@@ -11,7 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 import { getColor, getRadius } from '../utilities';
-import React from 'react';
+import React, { useId } from 'react';
 import PropTypes from 'prop-types';
 import { componentVars, InlineFieldLabel } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -25,7 +25,7 @@ var Input = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "production"
 } : {
   target: "erxmy1h1",
   label: "Input"
-})("--checkColor:", getColor('contentInvert'), ";--backgroundColor:transparent;--backgroundColorActive:", getColor('content'), ";--borderColor:", getColor('grey4'), ";appearance:none;height:", size, "px;width:", size, "px;display:block;border-radius:", getRadius('s'), ";cursor:pointer;margin:0;position:relative;background-color:var(--backgroundColor);border:1px solid var(--borderColor);transition:border-color ", componentVars.transitionDefault, ";&:hover{--borderColor:", getColor('grey7'), ";transition:border-color ", componentVars.transitionHover, ";}&:checked{--borderColor:var(--backgroundColorActive);--backgroundColor:var(--backgroundColorActive);}&:after{content:'';position:absolute;left:0;right:0;top:0;margin:auto;height:", checkHeight, "px;width:", checkWidth, "px;box-shadow:inset -", checkStroke, "px -", checkStroke, "px 0 var(--checkColor);display:block;transform:rotate(45deg);pointer-events:none;opacity:0;}&:checked:after{opacity:1;}&:disabled{--checkColor:", getColor('contentDisabled'), ";--backgroundColor:", getColor('backgroundDisabled'), ";--backgroundColorActive:", getColor('backgroundDisabled'), ";--borderColor:transparent;pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvY2hlY2tib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cyB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIElubGluZUZpZWxkTGFiZWwgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBzaXplID0gMTY7XG5jb25zdCBjaGVja0hlaWdodCA9IHNpemUgLyAxLjY7XG5jb25zdCBjaGVja1dpZHRoID0gY2hlY2tIZWlnaHQgLyAxLjg7XG5jb25zdCBjaGVja1N0cm9rZSA9IDEuNTtcblxuY29uc3QgSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gIC0tY2hlY2tDb2xvcjogJHtnZXRDb2xvcignY29udGVudEludmVydCcpfTtcbiAgLS1iYWNrZ3JvdW5kQ29sb3I6IHRyYW5zcGFyZW50O1xuICAtLWJhY2tncm91bmRDb2xvckFjdGl2ZTogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignZ3JleTQnKX07XG5cbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgaGVpZ2h0OiAke3NpemV9cHg7XG4gIHdpZHRoOiAke3NpemV9cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBtYXJnaW46IDA7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yKTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tYm9yZGVyQ29sb3IpO1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtjb21wb25lbnRWYXJzLnRyYW5zaXRpb25EZWZhdWx0fTtcblxuICAmOmhvdmVyIHtcbiAgICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdncmV5NycpfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtjb21wb25lbnRWYXJzLnRyYW5zaXRpb25Ib3Zlcn07XG4gIH1cblxuICAmOmNoZWNrZWQge1xuICAgIC0tYm9yZGVyQ29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvckFjdGl2ZSk7XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvckFjdGl2ZSk7XG4gIH1cblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgICB0b3A6IDA7XG4gICAgbWFyZ2luOiBhdXRvO1xuICAgIGhlaWdodDogJHtjaGVja0hlaWdodH1weDtcbiAgICB3aWR0aDogJHtjaGVja1dpZHRofXB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IC0ke2NoZWNrU3Ryb2tlfXB4IC0ke2NoZWNrU3Ryb2tlfXB4IDAgdmFyKC0tY2hlY2tDb2xvcik7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cblxuICAmOmNoZWNrZWQ6YWZ0ZXIge1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLWNoZWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogJHtnZXRDb2xvcignYmFja2dyb3VuZERpc2FibGVkJyl9O1xuICAgIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kRGlzYWJsZWQnKX07XG4gICAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gIGdhcDogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94ID0gKHsgaXNEaXNhYmxlZCwgaXNDaGVja2VkLCBsYWJlbCwgaWQsIG9uQ2hhbmdlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFJvb3Qgey4uLnByb3BzfT5cbiAgICAgIDxJbnB1dFxuICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWQ9e2lkfVxuICAgICAgICBjaGVja2VkPXtpc0NoZWNrZWR9XG4gICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgIC8+XG4gICAgICB7bGFiZWwgJiYgPElubGluZUZpZWxkTGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0lubGluZUZpZWxkTGFiZWw+fVxuICAgIDwvUm9vdD5cbiAgKTtcbn07XG5cbkNoZWNrYm94LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNDaGVja2VkOiBQcm9wVHlwZXMuYm9vbCxcbiAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */"));
+})("--checkColor:", getColor('contentInvert'), ";--backgroundColor:transparent;--backgroundColorActive:", getColor('content'), ";--borderColor:", getColor('grey4'), ";appearance:none;height:", size, "px;width:", size, "px;display:block;border-radius:", getRadius('s'), ";cursor:pointer;margin:0;position:relative;background-color:var(--backgroundColor);border:1px solid var(--borderColor);transition:border-color ", componentVars.transitionDefault, ";&:hover{--borderColor:", getColor('grey7'), ";transition:border-color ", componentVars.transitionHover, ";}&:checked{--borderColor:var(--backgroundColorActive);--backgroundColor:var(--backgroundColorActive);}&:after{content:'';position:absolute;left:0;right:0;top:0;margin:auto;height:", checkHeight, "px;width:", checkWidth, "px;box-shadow:inset -", checkStroke, "px -", checkStroke, "px 0 var(--checkColor);display:block;transform:rotate(45deg);pointer-events:none;opacity:0;}&:checked:after{opacity:1;}&:disabled{--checkColor:", getColor('contentDisabled'), ";--backgroundColor:", getColor('backgroundDisabled'), ";--backgroundColorActive:", getColor('backgroundDisabled'), ";--borderColor:transparent;pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvY2hlY2tib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cyB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlSWQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgSW5saW5lRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IHNpemUgPSAxNjtcbmNvbnN0IGNoZWNrSGVpZ2h0ID0gc2l6ZSAvIDEuNjtcbmNvbnN0IGNoZWNrV2lkdGggPSBjaGVja0hlaWdodCAvIDEuODtcbmNvbnN0IGNoZWNrU3Ryb2tlID0gMS41O1xuXG5jb25zdCBJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgLS1jaGVja0NvbG9yOiAke2dldENvbG9yKCdjb250ZW50SW52ZXJ0Jyl9O1xuICAtLWJhY2tncm91bmRDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdncmV5NCcpfTtcblxuICBhcHBlYXJhbmNlOiBub25lO1xuICBoZWlnaHQ6ICR7c2l6ZX1weDtcbiAgd2lkdGg6ICR7c2l6ZX1weDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG1hcmdpbjogMDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kQ29sb3IpO1xuICBib3JkZXI6IDFweCBzb2xpZCB2YXIoLS1ib3JkZXJDb2xvcik7XG4gIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2NvbXBvbmVudFZhcnMudHJhbnNpdGlvbkRlZmF1bHR9O1xuXG4gICY6aG92ZXIge1xuICAgIC0tYm9yZGVyQ29sb3I6ICR7Z2V0Q29sb3IoJ2dyZXk3Jyl9O1xuICAgIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2NvbXBvbmVudFZhcnMudHJhbnNpdGlvbkhvdmVyfTtcbiAgfVxuXG4gICY6Y2hlY2tlZCB7XG4gICAgLS1ib3JkZXJDb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yQWN0aXZlKTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yQWN0aXZlKTtcbiAgfVxuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBsZWZ0OiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIHRvcDogMDtcbiAgICBtYXJnaW46IGF1dG87XG4gICAgaGVpZ2h0OiAke2NoZWNrSGVpZ2h0fXB4O1xuICAgIHdpZHRoOiAke2NoZWNrV2lkdGh9cHg7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgLSR7Y2hlY2tTdHJva2V9cHggLSR7Y2hlY2tTdHJva2V9cHggMCB2YXIoLS1jaGVja0NvbG9yKTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuXG4gICY6Y2hlY2tlZDphZnRlciB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0tY2hlY2tDb2xvcjogJHtnZXRDb2xvcignY29udGVudERpc2FibGVkJyl9O1xuICAgIC0tYmFja2dyb3VuZENvbG9yOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kRGlzYWJsZWQnKX07XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmU6ICR7Z2V0Q29sb3IoJ2JhY2tncm91bmREaXNhYmxlZCcpfTtcbiAgICAtLWJvcmRlckNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgZ2FwOiA4cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2hlY2tib3ggPSAoeyBpc0Rpc2FibGVkLCBpc0NoZWNrZWQsIGxhYmVsLCBpZCwgb25DaGFuZ2UsIC4uLnByb3BzIH0pID0+IHtcbiAgY29uc3QgaW50ZXJuYWxJZCA9IHVzZUlkKCk7XG4gIGNvbnN0IGZpbmFsSWQgPSBpZCB8fCBpbnRlcm5hbElkO1xuXG4gIHJldHVybiAoXG4gICAgPFJvb3Qgey4uLnByb3BzfT5cbiAgICAgIDxJbnB1dFxuICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWQ9e2ZpbmFsSWR9XG4gICAgICAgIGNoZWNrZWQ9e2lzQ2hlY2tlZH1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgLz5cbiAgICAgIHtsYWJlbCAmJiA8SW5saW5lRmllbGRMYWJlbCBodG1sRm9yPXtmaW5hbElkfT57bGFiZWx9PC9JbmxpbmVGaWVsZExhYmVsPn1cbiAgICA8L1Jvb3Q+XG4gICk7XG59O1xuXG5DaGVja2JveC5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0NoZWNrZWQ6IFByb3BUeXBlcy5ib29sLFxuICBsYWJlbDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG4iXX0= */"));
 
 var Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "erxmy1h0"
@@ -38,7 +38,7 @@ var Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   name: "1nsltal",
   styles: "display:grid;grid-auto-flow:column;align-items:center;width:fit-content;gap:8px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRXVCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBjb21wb25lbnRWYXJzLCBJbmxpbmVGaWVsZExhYmVsIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3Qgc2l6ZSA9IDE2O1xuY29uc3QgY2hlY2tIZWlnaHQgPSBzaXplIC8gMS42O1xuY29uc3QgY2hlY2tXaWR0aCA9IGNoZWNrSGVpZ2h0IC8gMS44O1xuY29uc3QgY2hlY2tTdHJva2UgPSAxLjU7XG5cbmNvbnN0IElucHV0ID0gc3R5bGVkLmlucHV0YFxuICAtLWNoZWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnRJbnZlcnQnKX07XG4gIC0tYmFja2dyb3VuZENvbG9yOiB0cmFuc3BhcmVudDtcbiAgLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmU6ICR7Z2V0Q29sb3IoJ2NvbnRlbnQnKX07XG4gIC0tYm9yZGVyQ29sb3I6ICR7Z2V0Q29sb3IoJ2dyZXk0Jyl9O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGhlaWdodDogJHtzaXplfXB4O1xuICB3aWR0aDogJHtzaXplfXB4O1xuICBkaXNwbGF5OiBibG9jaztcbiAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgbWFyZ2luOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvcik7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHZhcigtLWJvcmRlckNvbG9yKTtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7Y29tcG9uZW50VmFycy50cmFuc2l0aW9uRGVmYXVsdH07XG5cbiAgJjpob3ZlciB7XG4gICAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignZ3JleTcnKX07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7Y29tcG9uZW50VmFycy50cmFuc2l0aW9uSG92ZXJ9O1xuICB9XG5cbiAgJjpjaGVja2VkIHtcbiAgICAtLWJvcmRlckNvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmUpO1xuICAgIC0tYmFja2dyb3VuZENvbG9yOiB2YXIoLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmUpO1xuICB9XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGxlZnQ6IDA7XG4gICAgcmlnaHQ6IDA7XG4gICAgdG9wOiAwO1xuICAgIG1hcmdpbjogYXV0bztcbiAgICBoZWlnaHQ6ICR7Y2hlY2tIZWlnaHR9cHg7XG4gICAgd2lkdGg6ICR7Y2hlY2tXaWR0aH1weDtcbiAgICBib3gtc2hhZG93OiBpbnNldCAtJHtjaGVja1N0cm9rZX1weCAtJHtjaGVja1N0cm9rZX1weCAwIHZhcigtLWNoZWNrQ29sb3IpO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDQ1ZGVnKTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG5cbiAgJjpjaGVja2VkOmFmdGVyIHtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgLS1jaGVja0NvbG9yOiAke2dldENvbG9yKCdjb250ZW50RGlzYWJsZWQnKX07XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3I6ICR7Z2V0Q29sb3IoJ2JhY2tncm91bmREaXNhYmxlZCcpfTtcbiAgICAtLWJhY2tncm91bmRDb2xvckFjdGl2ZTogJHtnZXRDb2xvcignYmFja2dyb3VuZERpc2FibGVkJyl9O1xuICAgIC0tYm9yZGVyQ29sb3I6IHRyYW5zcGFyZW50O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5gO1xuXG5jb25zdCBSb290ID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuICBnYXA6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaGVja2JveCA9ICh7IGlzRGlzYWJsZWQsIGlzQ2hlY2tlZCwgbGFiZWwsIGlkLCBvbkNoYW5nZSwgLi4ucHJvcHMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxSb290IHsuLi5wcm9wc30+XG4gICAgICA8SW5wdXRcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgY2hlY2tlZD17aXNDaGVja2VkfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAvPlxuICAgICAge2xhYmVsICYmIDxJbmxpbmVGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9JbmxpbmVGaWVsZExhYmVsPn1cbiAgICA8L1Jvb3Q+XG4gICk7XG59O1xuXG5DaGVja2JveC5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGlzQ2hlY2tlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvRXVCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZUlkIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIElubGluZUZpZWxkTGFiZWwgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBzaXplID0gMTY7XG5jb25zdCBjaGVja0hlaWdodCA9IHNpemUgLyAxLjY7XG5jb25zdCBjaGVja1dpZHRoID0gY2hlY2tIZWlnaHQgLyAxLjg7XG5jb25zdCBjaGVja1N0cm9rZSA9IDEuNTtcblxuY29uc3QgSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gIC0tY2hlY2tDb2xvcjogJHtnZXRDb2xvcignY29udGVudEludmVydCcpfTtcbiAgLS1iYWNrZ3JvdW5kQ29sb3I6IHRyYW5zcGFyZW50O1xuICAtLWJhY2tncm91bmRDb2xvckFjdGl2ZTogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignZ3JleTQnKX07XG5cbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgaGVpZ2h0OiAke3NpemV9cHg7XG4gIHdpZHRoOiAke3NpemV9cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBtYXJnaW46IDA7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yKTtcbiAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tYm9yZGVyQ29sb3IpO1xuICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtjb21wb25lbnRWYXJzLnRyYW5zaXRpb25EZWZhdWx0fTtcblxuICAmOmhvdmVyIHtcbiAgICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdncmV5NycpfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtjb21wb25lbnRWYXJzLnRyYW5zaXRpb25Ib3Zlcn07XG4gIH1cblxuICAmOmNoZWNrZWQge1xuICAgIC0tYm9yZGVyQ29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvckFjdGl2ZSk7XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvckFjdGl2ZSk7XG4gIH1cblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgICB0b3A6IDA7XG4gICAgbWFyZ2luOiBhdXRvO1xuICAgIGhlaWdodDogJHtjaGVja0hlaWdodH1weDtcbiAgICB3aWR0aDogJHtjaGVja1dpZHRofXB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IC0ke2NoZWNrU3Ryb2tlfXB4IC0ke2NoZWNrU3Ryb2tlfXB4IDAgdmFyKC0tY2hlY2tDb2xvcik7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cblxuICAmOmNoZWNrZWQ6YWZ0ZXIge1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLWNoZWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogJHtnZXRDb2xvcignYmFja2dyb3VuZERpc2FibGVkJyl9O1xuICAgIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kRGlzYWJsZWQnKX07XG4gICAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gIGdhcDogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94ID0gKHsgaXNEaXNhYmxlZCwgaXNDaGVja2VkLCBsYWJlbCwgaWQsIG9uQ2hhbmdlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IGludGVybmFsSWQgPSB1c2VJZCgpO1xuICBjb25zdCBmaW5hbElkID0gaWQgfHwgaW50ZXJuYWxJZDtcblxuICByZXR1cm4gKFxuICAgIDxSb290IHsuLi5wcm9wc30+XG4gICAgICA8SW5wdXRcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGlkPXtmaW5hbElkfVxuICAgICAgICBjaGVja2VkPXtpc0NoZWNrZWR9XG4gICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgIC8+XG4gICAgICB7bGFiZWwgJiYgPElubGluZUZpZWxkTGFiZWwgaHRtbEZvcj17ZmluYWxJZH0+e2xhYmVsfTwvSW5saW5lRmllbGRMYWJlbD59XG4gICAgPC9Sb290PlxuICApO1xufTtcblxuQ2hlY2tib3gucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZyxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNDaGVja2VkOiBQcm9wVHlwZXMuYm9vbCxcbiAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
@@ -50,18 +50,20 @@ export var Checkbox = function Checkbox(_ref) {
       onChange = _ref.onChange,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var internalId = useId();
+  var finalId = id || internalId;
   return ___EmotionJSX(Root, props, ___EmotionJSX(Input, {
     type: "checkbox",
     disabled: isDisabled,
-    id: id,
+    id: finalId,
     checked: isChecked,
     onChange: onChange
   }), label && ___EmotionJSX(InlineFieldLabel, {
-    htmlFor: id
+    htmlFor: finalId
   }, label));
 };
 Checkbox.propTypes = {
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
   onChange: PropTypes.func,
   isDisabled: PropTypes.bool,
   isChecked: PropTypes.bool,

package/es/components/select.js

@@ -49,7 +49,7 @@ var TriggerButton = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "pro
 } : {
   target: "e17qd7kh0",
   label: "TriggerButton"
-})(styles.buttonReset, ";", styles.transitions, ";color:inherit;display:flex;align-items:center;gap:8px;border:none;background:", getColor('fade1'), ";padding:0 ", componentVars.fieldXPadding, ";min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJtQyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zZWxlY3QuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgZm9yd2FyZFJlZiwgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBJY29uLCBCb3gsIFRleHQsIFRleHRCdXR0b24gfSBmcm9tICcuJztcbmltcG9ydCB7IEljb25DaGV2cm9uRG93biB9IGZyb20gJy4uL2ljb25zJztcbmltcG9ydCB7IExpc3Rib3ggfSBmcm9tICdAaGVhZGxlc3N1aS9yZWFjdCc7XG5pbXBvcnQgeyBnZXRDb2xvciwgZ2V0UmFkaXVzIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHtcbiAgRmllbGRMYWJlbCxcbiAgTWVudUNhcmQsXG4gIE1lbnVJdGVtLFxuICBzdHlsZXMsXG4gIGNvbXBvbmVudFZhcnMsXG4gIE1lbnVUcmFuc2l0aW9uLFxufSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBUcmlnZ2VyQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgY29sb3I6IGluaGVyaXQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogOHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2ZhZGUxJyl9O1xuICBwYWRkaW5nOiAwICR7Y29tcG9uZW50VmFycy5maWVsZFhQYWRkaW5nfTtcbiAgbWluLWhlaWdodDogJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgd2lkdGg6IDEwMCU7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJjpob3ZlciB7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignZmFkZTInKX07XG4gIH1cbmA7XG5cbmNvbnN0IFRyaWdnZXIgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0cmlnZ2VyVmFyaWFudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDw+XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAnYm94JyAmJiAoXG4gICAgICA8VHJpZ2dlckJ1dHRvbiByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICAgICAgPFRleHQgaGFzRWxsaXBzaXM+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgICAgPEJveCBtYXJnaW5MZWZ0PVwiYXV0b1wiPlxuICAgICAgICAgIDxJY29uIGljb249ezxJY29uQ2hldnJvbkRvd24gLz59IC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgPC9UcmlnZ2VyQnV0dG9uPlxuICAgICl9XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAndGV4dCcgJiYgKFxuICAgICAgPFRleHRCdXR0b24gcmVmPXtyZWZ9IGljb249ezxJY29uQ2hldnJvbkRvd24gLz59IGljb25Qb3NpdGlvbj1cInJpZ2h0XCIgey4uLnByb3BzfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICl9XG4gIDwvPlxuKSk7XG5cbmNvbnN0IFNlbGVjdFJvb3QgPSAoeyAuLi5wcm9wcyB9KSA9PiA8Qm94IHsuLi5wcm9wc30gcG9zaXRpb249XCJyZWxhdGl2ZVwiIG1pbldpZHRoPVwiMHB4XCIgLz47XG5cbmV4cG9ydCBjb25zdCBTZWxlY3QgPSAoe1xuICBvcHRpb25zLFxuICBkZWZhdWx0T3B0aW9uLFxuICBvbkNoYW5nZSxcbiAgbWVudVBsYWNlbWVudCA9ICdib3R0b21TdGFydCcsXG4gIG1lbnVXaWR0aCA9ICcxMDAlJyxcbiAgdHJpZ2dlcjogY3VzdG9tVHJpZ2dlcixcbiAgdHJpZ2dlclZhcmlhbnQgPSAnYm94JyxcbiAgbGFiZWwsXG4gIG1lbnVaSW5kZXgsXG59KSA9PiB7XG4gIGNvbnN0IFtzZWxlY3RlZE9wdGlvbiwgc2V0U2VsZWN0ZWRPcHRpb25dID0gdXNlU3RhdGUoZGVmYXVsdE9wdGlvbiB8fCB7fSk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gb3B0aW9uID0+IHtcbiAgICBzZXRTZWxlY3RlZE9wdGlvbihvcHRpb24pO1xuICAgIG9uQ2hhbmdlICYmIG9uQ2hhbmdlKG9wdGlvbik7XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8TGlzdGJveCBhcz17U2VsZWN0Um9vdH0gdmFsdWU9e3NlbGVjdGVkT3B0aW9ufSBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfT5cbiAgICAgIHtsYWJlbCAmJiA8TGlzdGJveC5MYWJlbCBhcz17RmllbGRMYWJlbH0+e2xhYmVsfTwvTGlzdGJveC5MYWJlbD59XG4gICAgICA8TGlzdGJveC5CdXR0b24gYXM9e0ZyYWdtZW50fT5cbiAgICAgICAge2N1c3RvbVRyaWdnZXIgPyAoXG4gICAgICAgICAgY3VzdG9tVHJpZ2dlcihzZWxlY3RlZE9wdGlvbilcbiAgICAgICAgKSA6IChcbiAgICAgICAgICA8VHJpZ2dlciB0cmlnZ2VyVmFyaWFudD17dHJpZ2dlclZhcmlhbnR9PntzZWxlY3RlZE9wdGlvbi5jb250ZW50fTwvVHJpZ2dlcj5cbiAgICAgICAgKX1cbiAgICAgIDwvTGlzdGJveC5CdXR0b24+XG5cbiAgICAgIDxNZW51VHJhbnNpdGlvbj5cbiAgICAgICAgPExpc3Rib3guT3B0aW9uc1xuICAgICAgICAgIHBsYWNlbWVudD17bWVudVBsYWNlbWVudH1cbiAgICAgICAgICB3aWR0aD17bWVudVdpZHRofVxuICAgICAgICAgIGFzPXtNZW51Q2FyZH1cbiAgICAgICAgICB6SW5kZXg9e21lbnVaSW5kZXh9XG4gICAgICAgID5cbiAgICAgICAgICB7b3B0aW9ucy5tYXAoKG9wdGlvbiwgaW5kZXgpID0+IChcbiAgICAgICAgICAgIDxMaXN0Ym94Lk9wdGlvbiBrZXk9e2luZGV4fSB2YWx1ZT17b3B0aW9ufSBhcz17RnJhZ21lbnR9IGRpc2FibGVkPXtvcHRpb24uaXNEaXNhYmxlZH0+XG4gICAgICAgICAgICAgIHsoeyBhY3RpdmUsIHNlbGVjdGVkIH0pID0+IChcbiAgICAgICAgICAgICAgICA8TWVudUl0ZW0gaXNTZWxlY3RlZD17c2VsZWN0ZWR9IGlzQWN0aXZlPXthY3RpdmV9IGlzRGlzYWJsZWQ9e29wdGlvbi5pc0Rpc2FibGVkfT5cbiAgICAgICAgICAgICAgICAgIHtvcHRpb24uY29udGVudH1cbiAgICAgICAgICAgICAgICA8L01lbnVJdGVtPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbj5cbiAgICAgICAgICApKX1cbiAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbnM+XG4gICAgICA8L01lbnVUcmFuc2l0aW9uPlxuICAgIDwvTGlzdGJveD5cbiAgKTtcbn07XG5cblNlbGVjdC5wcm9wVHlwZXMgPSB7XG4gIG9wdGlvbnM6IFByb3BUeXBlcy5hcnJheSxcbiAgZGVmYXVsdE9wdGlvbjogUHJvcFR5cGVzLm9iamVjdCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBtZW51UGxhY2VtZW50OiB0eXBlcy5tZW51UGxhY2VtZW50LFxuICBtZW51V2lkdGg6IHR5cGVzLmRpbWVuc2lvbixcbiAgbWVudVpJbmRleDogdHlwZXMuekluZGV4LFxuICB0cmlnZ2VyOiBQcm9wVHlwZXMuZnVuYyxcbiAgdHJpZ2dlclZhcmlhbnQ6IFByb3BUeXBlcy5vbmVPZihbJ2JveCcsICd0ZXh0J10pLFxuICBsYWJlbDogdHlwZXMubGFiZWwsXG59O1xuIl19 */"));
+})(styles.buttonReset, ";", styles.transitions, ";color:inherit;display:flex;align-items:center;gap:8px;border:none;background:", getColor('fade1'), ";padding:0 ", componentVars.fieldXPadding, ";min-height:", componentVars.textBoxHeight, ";border-radius:", getRadius('s'), ";width:100%;text-align:left;&:hover{background:", getColor('fade2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NlbGVjdC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUJtQyIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zZWxlY3QuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSwgZm9yd2FyZFJlZiwgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBJY29uLCBCb3gsIFRleHQsIFRleHRCdXR0b24gfSBmcm9tICcuJztcbmltcG9ydCB7IEljb25DaGV2cm9uRG93biB9IGZyb20gJy4uL2ljb25zJztcbmltcG9ydCB7IExpc3Rib3ggfSBmcm9tICdAaGVhZGxlc3N1aS9yZWFjdCc7XG5pbXBvcnQgeyBnZXRDb2xvciwgZ2V0UmFkaXVzIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHtcbiAgRmllbGRMYWJlbCxcbiAgTWVudUNhcmQsXG4gIE1lbnVJdGVtLFxuICBzdHlsZXMsXG4gIGNvbXBvbmVudFZhcnMsXG4gIE1lbnVUcmFuc2l0aW9uLFxufSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBUcmlnZ2VyQnV0dG9uID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG5cbiAgY29sb3I6IGluaGVyaXQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGdhcDogOHB4O1xuICBib3JkZXI6IG5vbmU7XG4gIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2ZhZGUxJyl9O1xuICBwYWRkaW5nOiAwICR7Y29tcG9uZW50VmFycy5maWVsZFhQYWRkaW5nfTtcbiAgbWluLWhlaWdodDogJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9O1xuICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgd2lkdGg6IDEwMCU7XG4gIHRleHQtYWxpZ246IGxlZnQ7XG5cbiAgJjpob3ZlciB7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignZmFkZTInKX07XG4gIH1cbmA7XG5cbmNvbnN0IFRyaWdnZXIgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCB0cmlnZ2VyVmFyaWFudCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDw+XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAnYm94JyAmJiAoXG4gICAgICA8VHJpZ2dlckJ1dHRvbiByZWY9e3JlZn0gey4uLnByb3BzfT5cbiAgICAgICAgPFRleHQgaGFzRWxsaXBzaXM+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgICAgPEJveCBtYXJnaW5MZWZ0PVwiYXV0b1wiPlxuICAgICAgICAgIDxJY29uIGljb249ezxJY29uQ2hldnJvbkRvd24gLz59IC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgPC9UcmlnZ2VyQnV0dG9uPlxuICAgICl9XG4gICAge3RyaWdnZXJWYXJpYW50ID09PSAndGV4dCcgJiYgKFxuICAgICAgPFRleHRCdXR0b24gcmVmPXtyZWZ9IGljb249ezxJY29uQ2hldnJvbkRvd24gLz59IGljb25Qb3NpdGlvbj1cInJpZ2h0XCIgey4uLnByb3BzfT5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UZXh0QnV0dG9uPlxuICAgICl9XG4gIDwvPlxuKSk7XG5cbmNvbnN0IFNlbGVjdFJvb3QgPSAoeyAuLi5wcm9wcyB9KSA9PiA8Qm94IHsuLi5wcm9wc30gbWluV2lkdGg9XCIwcHhcIiAvPjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdCA9ICh7XG4gIG9wdGlvbnMsXG4gIGRlZmF1bHRPcHRpb24sXG4gIG9uQ2hhbmdlLFxuICBtZW51UGxhY2VtZW50ID0gJ2JvdHRvbVN0YXJ0JyxcbiAgbWVudVdpZHRoID0gJzEwMCUnLFxuICB0cmlnZ2VyOiBjdXN0b21UcmlnZ2VyLFxuICB0cmlnZ2VyVmFyaWFudCA9ICdib3gnLFxuICBsYWJlbCxcbiAgbWVudVpJbmRleCxcbn0pID0+IHtcbiAgY29uc3QgW3NlbGVjdGVkT3B0aW9uLCBzZXRTZWxlY3RlZE9wdGlvbl0gPSB1c2VTdGF0ZShkZWZhdWx0T3B0aW9uIHx8IHt9KTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSBvcHRpb24gPT4ge1xuICAgIHNldFNlbGVjdGVkT3B0aW9uKG9wdGlvbik7XG4gICAgb25DaGFuZ2UgJiYgb25DaGFuZ2Uob3B0aW9uKTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxMaXN0Ym94IGFzPXtTZWxlY3RSb290fSB2YWx1ZT17c2VsZWN0ZWRPcHRpb259IG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9PlxuICAgICAge2xhYmVsICYmIDxMaXN0Ym94LkxhYmVsIGFzPXtGaWVsZExhYmVsfT57bGFiZWx9PC9MaXN0Ym94LkxhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICA8TGlzdGJveC5CdXR0b24gYXM9e0ZyYWdtZW50fT5cbiAgICAgICAgICB7Y3VzdG9tVHJpZ2dlciA/IChcbiAgICAgICAgICAgIGN1c3RvbVRyaWdnZXIoc2VsZWN0ZWRPcHRpb24pXG4gICAgICAgICAgKSA6IChcbiAgICAgICAgICAgIDxUcmlnZ2VyIHRyaWdnZXJWYXJpYW50PXt0cmlnZ2VyVmFyaWFudH0+e3NlbGVjdGVkT3B0aW9uLmNvbnRlbnR9PC9UcmlnZ2VyPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvTGlzdGJveC5CdXR0b24+XG5cbiAgICAgICAgPE1lbnVUcmFuc2l0aW9uPlxuICAgICAgICAgIDxMaXN0Ym94Lk9wdGlvbnNcbiAgICAgICAgICAgIHBsYWNlbWVudD17bWVudVBsYWNlbWVudH1cbiAgICAgICAgICAgIHdpZHRoPXttZW51V2lkdGh9XG4gICAgICAgICAgICBhcz17TWVudUNhcmR9XG4gICAgICAgICAgICB6SW5kZXg9e21lbnVaSW5kZXh9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiAoXG4gICAgICAgICAgICAgIDxMaXN0Ym94Lk9wdGlvbiBrZXk9e2luZGV4fSB2YWx1ZT17b3B0aW9ufSBhcz17RnJhZ21lbnR9IGRpc2FibGVkPXtvcHRpb24uaXNEaXNhYmxlZH0+XG4gICAgICAgICAgICAgICAgeyh7IGFjdGl2ZSwgc2VsZWN0ZWQgfSkgPT4gKFxuICAgICAgICAgICAgICAgICAgPE1lbnVJdGVtIGlzU2VsZWN0ZWQ9e3NlbGVjdGVkfSBpc0FjdGl2ZT17YWN0aXZlfSBpc0Rpc2FibGVkPXtvcHRpb24uaXNEaXNhYmxlZH0+XG4gICAgICAgICAgICAgICAgICAgIHtvcHRpb24uY29udGVudH1cbiAgICAgICAgICAgICAgICAgIDwvTWVudUl0ZW0+XG4gICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgPC9MaXN0Ym94Lk9wdGlvbj5cbiAgICAgICAgICAgICkpfVxuICAgICAgICAgIDwvTGlzdGJveC5PcHRpb25zPlxuICAgICAgICA8L01lbnVUcmFuc2l0aW9uPlxuICAgICAgPC9Cb3g+XG4gICAgPC9MaXN0Ym94PlxuICApO1xufTtcblxuU2VsZWN0LnByb3BUeXBlcyA9IHtcbiAgb3B0aW9uczogUHJvcFR5cGVzLmFycmF5LFxuICBkZWZhdWx0T3B0aW9uOiBQcm9wVHlwZXMub2JqZWN0LFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIG1lbnVQbGFjZW1lbnQ6IHR5cGVzLm1lbnVQbGFjZW1lbnQsXG4gIG1lbnVXaWR0aDogdHlwZXMuZGltZW5zaW9uLFxuICBtZW51WkluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHRyaWdnZXI6IFByb3BUeXBlcy5mdW5jLFxuICB0cmlnZ2VyVmFyaWFudDogUHJvcFR5cGVzLm9uZU9mKFsnYm94JywgJ3RleHQnXSksXG4gIGxhYmVsOiB0eXBlcy5sYWJlbCxcbn07XG4iXX0= */"));
 
 var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -74,7 +74,6 @@ var Trigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var SelectRoot = function SelectRoot(_ref2) {
   var props = Object.assign({}, _ref2);
   return ___EmotionJSX(Box, _extends({}, props, {
-    position: "relative",
     minWidth: "0px"
   }));
 };
@@ -109,7 +108,9 @@ export var Select = function Select(_ref3) {
     onChange: handleChange
   }, label && ___EmotionJSX(Listbox.Label, {
     as: FieldLabel
-  }, label), ___EmotionJSX(Listbox.Button, {
+  }, label), ___EmotionJSX(Box, {
+    position: "relative"
+  }, ___EmotionJSX(Listbox.Button, {
     as: Fragment
   }, customTrigger ? customTrigger(selectedOption) : ___EmotionJSX(Trigger, {
     triggerVariant: triggerVariant
@@ -133,7 +134,7 @@ export var Select = function Select(_ref3) {
         isDisabled: option.isDisabled
       }, option.content);
     });
-  }))));
+  })))));
 };
 Select.propTypes = {
   options: PropTypes.array,

package/es/components/switch.js

@@ -11,7 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 import { getColor, getTransition } from '../utilities';
-import React from 'react';
+import React, { useId } from 'react';
 import PropTypes from 'prop-types';
 import { InlineFieldLabel } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -26,7 +26,7 @@ var Input = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "production"
 } : {
   target: "ez8kn7b1",
   label: "Input"
-})("--trackColor:", getColor('grey3'), ";--knobColor:", getColor('white'), ";appearance:none;height:", trackHeightPx, "px;width:", trackWidthPx, "px;display:block;border-radius:", trackHeightPx / 2, "px;transition:background-color ", getTransition('xFast'), ";cursor:pointer;margin:0;position:relative;background-color:var(--trackColor);&:after{content:'';position:absolute;left:", trackOffsetPx, "px;top:", trackOffsetPx, "px;height:", knobSizePx, "px;width:", knobSizePx, "px;border-radius:100%;background-color:var(--knobColor);display:block;transition:transform ", getTransition('xFast'), ";pointer-events:none;}&:checked{--trackColor:", getColor('content'), ";}&:checked:after{transform:translateX(", knobActivePositionPx, "px);}&:disabled{--trackColor:", getColor('backgroundDisabled'), ";--knobColor:", getColor('contentDisabled'), ";pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTBCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRDb2xvciwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IElubGluZUZpZWxkTGFiZWwgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBrbm9iU2l6ZVB4ID0gMTY7XG5jb25zdCB0cmFja09mZnNldFB4ID0gMjtcbmNvbnN0IHRyYWNrV2lkdGhQeCA9IDQwO1xuY29uc3QgdHJhY2tIZWlnaHRQeCA9IGtub2JTaXplUHggKyB0cmFja09mZnNldFB4ICogMjtcbmNvbnN0IGtub2JBY3RpdmVQb3NpdGlvblB4ID0gdHJhY2tXaWR0aFB4IC0ga25vYlNpemVQeCAtIHRyYWNrT2Zmc2V0UHggKiAyO1xuXG5jb25zdCBJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdncmV5MycpfTtcbiAgLS1rbm9iQ29sb3I6ICR7Z2V0Q29sb3IoJ3doaXRlJyl9O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGhlaWdodDogJHt0cmFja0hlaWdodFB4fXB4O1xuICB3aWR0aDogJHt0cmFja1dpZHRoUHh9cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiAke3RyYWNrSGVpZ2h0UHggLyAyfXB4O1xuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgbWFyZ2luOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRyYWNrQ29sb3IpO1xuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBsZWZ0OiAke3RyYWNrT2Zmc2V0UHh9cHg7XG4gICAgdG9wOiAke3RyYWNrT2Zmc2V0UHh9cHg7XG4gICAgaGVpZ2h0OiAke2tub2JTaXplUHh9cHg7XG4gICAgd2lkdGg6ICR7a25vYlNpemVQeH1weDtcbiAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWtub2JDb2xvcik7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cblxuICAmOmNoZWNrZWQge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuXG4gICY6Y2hlY2tlZDphZnRlciB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKCR7a25vYkFjdGl2ZVBvc2l0aW9uUHh9cHgpO1xuICB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kRGlzYWJsZWQnKX07XG4gICAgLS1rbm9iQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgZ2FwOiA4cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3dpdGNoID0gKHsgaXNEaXNhYmxlZCwgaXNBY3RpdmUsIGxhYmVsLCBpZCwgb25DaGFuZ2UsIC4uLnByb3BzIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8V3JhcHBlciB7Li4ucHJvcHN9PlxuICAgICAgPElucHV0IHR5cGU9XCJjaGVja2JveFwiIGRpc2FibGVkPXtpc0Rpc2FibGVkfSBpZD17aWR9IGNoZWNrZWQ9e2lzQWN0aXZlfSBvbkNoYW5nZT17b25DaGFuZ2V9IC8+XG4gICAgICB7bGFiZWwgJiYgPElubGluZUZpZWxkTGFiZWwgaHRtbEZvcj17aWR9PntsYWJlbH08L0lubGluZUZpZWxkTGFiZWw+fVxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn07XG5cblN3aXRjaC5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIG9uQ2hhbmdlOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */"));
+})("--trackColor:", getColor('grey3'), ";--knobColor:", getColor('white'), ";appearance:none;height:", trackHeightPx, "px;width:", trackWidthPx, "px;display:block;border-radius:", trackHeightPx / 2, "px;transition:background-color ", getTransition('xFast'), ";cursor:pointer;margin:0;position:relative;background-color:var(--trackColor);&:after{content:'';position:absolute;left:", trackOffsetPx, "px;top:", trackOffsetPx, "px;height:", knobSizePx, "px;width:", knobSizePx, "px;border-radius:100%;background-color:var(--knobColor);display:block;transition:transform ", getTransition('xFast'), ";pointer-events:none;}&:checked{--trackColor:", getColor('content'), ";}&:checked:after{transform:translateX(", knobActivePositionPx, "px);}&:disabled{--trackColor:", getColor('backgroundDisabled'), ";--knobColor:", getColor('contentDisabled'), ";pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTBCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRDb2xvciwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlSWQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgSW5saW5lRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IGtub2JTaXplUHggPSAxNjtcbmNvbnN0IHRyYWNrT2Zmc2V0UHggPSAyO1xuY29uc3QgdHJhY2tXaWR0aFB4ID0gNDA7XG5jb25zdCB0cmFja0hlaWdodFB4ID0ga25vYlNpemVQeCArIHRyYWNrT2Zmc2V0UHggKiAyO1xuY29uc3Qga25vYkFjdGl2ZVBvc2l0aW9uUHggPSB0cmFja1dpZHRoUHggLSBrbm9iU2l6ZVB4IC0gdHJhY2tPZmZzZXRQeCAqIDI7XG5cbmNvbnN0IElucHV0ID0gc3R5bGVkLmlucHV0YFxuICAtLXRyYWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2dyZXkzJyl9O1xuICAtLWtub2JDb2xvcjogJHtnZXRDb2xvcignd2hpdGUnKX07XG5cbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgaGVpZ2h0OiAke3RyYWNrSGVpZ2h0UHh9cHg7XG4gIHdpZHRoOiAke3RyYWNrV2lkdGhQeH1weDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6ICR7dHJhY2tIZWlnaHRQeCAvIDJ9cHg7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBtYXJnaW46IDA7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tdHJhY2tDb2xvcik7XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGxlZnQ6ICR7dHJhY2tPZmZzZXRQeH1weDtcbiAgICB0b3A6ICR7dHJhY2tPZmZzZXRQeH1weDtcbiAgICBoZWlnaHQ6ICR7a25vYlNpemVQeH1weDtcbiAgICB3aWR0aDogJHtrbm9iU2l6ZVB4fXB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0ta25vYkNvbG9yKTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gJHtnZXRUcmFuc2l0aW9uKCd4RmFzdCcpfTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuXG4gICY6Y2hlY2tlZCB7XG4gICAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICB9XG5cbiAgJjpjaGVja2VkOmFmdGVyIHtcbiAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoJHtrbm9iQWN0aXZlUG9zaXRpb25QeH1weCk7XG4gIH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLXRyYWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2JhY2tncm91bmREaXNhYmxlZCcpfTtcbiAgICAtLWtub2JDb2xvcjogJHtnZXRDb2xvcignY29udGVudERpc2FibGVkJyl9O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5gO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuICBnYXA6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBTd2l0Y2ggPSAoeyBpc0Rpc2FibGVkLCBpc0FjdGl2ZSwgbGFiZWwsIGlkLCBvbkNoYW5nZSwgLi4ucHJvcHMgfSkgPT4ge1xuICBjb25zdCBpbnRlcm5hbElkID0gdXNlSWQoKTtcbiAgY29uc3QgZmluYWxJZCA9IGlkIHx8IGludGVybmFsSWQ7XG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXIgey4uLnByb3BzfT5cbiAgICAgIDxJbnB1dFxuICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWQ9e2ZpbmFsSWR9XG4gICAgICAgIGNoZWNrZWQ9e2lzQWN0aXZlfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAvPlxuICAgICAge2xhYmVsICYmIDxJbmxpbmVGaWVsZExhYmVsIGh0bWxGb3I9e2ZpbmFsSWR9PntsYWJlbH08L0lubGluZUZpZWxkTGFiZWw+fVxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn07XG5cblN3aXRjaC5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */"));
 
 var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "ez8kn7b0"
@@ -39,7 +39,7 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
 } : {
   name: "1nsltal",
   styles: "display:grid;grid-auto-flow:column;align-items:center;width:fit-content;gap:8px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0QwQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zd2l0Y2guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFRyYW5zaXRpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBJbmxpbmVGaWVsZExhYmVsIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3Qga25vYlNpemVQeCA9IDE2O1xuY29uc3QgdHJhY2tPZmZzZXRQeCA9IDI7XG5jb25zdCB0cmFja1dpZHRoUHggPSA0MDtcbmNvbnN0IHRyYWNrSGVpZ2h0UHggPSBrbm9iU2l6ZVB4ICsgdHJhY2tPZmZzZXRQeCAqIDI7XG5jb25zdCBrbm9iQWN0aXZlUG9zaXRpb25QeCA9IHRyYWNrV2lkdGhQeCAtIGtub2JTaXplUHggLSB0cmFja09mZnNldFB4ICogMjtcblxuY29uc3QgSW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignZ3JleTMnKX07XG4gIC0ta25vYkNvbG9yOiAke2dldENvbG9yKCd3aGl0ZScpfTtcblxuICBhcHBlYXJhbmNlOiBub25lO1xuICBoZWlnaHQ6ICR7dHJhY2tIZWlnaHRQeH1weDtcbiAgd2lkdGg6ICR7dHJhY2tXaWR0aFB4fXB4O1xuICBkaXNwbGF5OiBibG9jaztcbiAgYm9yZGVyLXJhZGl1czogJHt0cmFja0hlaWdodFB4IC8gMn1weDtcbiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICBjdXJzb3I6IHBvaW50ZXI7XG4gIG1hcmdpbjogMDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS10cmFja0NvbG9yKTtcblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbGVmdDogJHt0cmFja09mZnNldFB4fXB4O1xuICAgIHRvcDogJHt0cmFja09mZnNldFB4fXB4O1xuICAgIGhlaWdodDogJHtrbm9iU2l6ZVB4fXB4O1xuICAgIHdpZHRoOiAke2tub2JTaXplUHh9cHg7XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1rbm9iQ29sb3IpO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAke2dldFRyYW5zaXRpb24oJ3hGYXN0Jyl9O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5cbiAgJjpjaGVja2VkIHtcbiAgICAtLXRyYWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnQnKX07XG4gIH1cblxuICAmOmNoZWNrZWQ6YWZ0ZXIge1xuICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWCgke2tub2JBY3RpdmVQb3NpdGlvblB4fXB4KTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignYmFja2dyb3VuZERpc2FibGVkJyl9O1xuICAgIC0ta25vYkNvbG9yOiAke2dldENvbG9yKCdjb250ZW50RGlzYWJsZWQnKX07XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBncmlkO1xuICBncmlkLWF1dG8tZmxvdzogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gIGdhcDogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFN3aXRjaCA9ICh7IGlzRGlzYWJsZWQsIGlzQWN0aXZlLCBsYWJlbCwgaWQsIG9uQ2hhbmdlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIHJldHVybiAoXG4gICAgPFdyYXBwZXIgey4uLnByb3BzfT5cbiAgICAgIDxJbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBkaXNhYmxlZD17aXNEaXNhYmxlZH0gaWQ9e2lkfSBjaGVja2VkPXtpc0FjdGl2ZX0gb25DaGFuZ2U9e29uQ2hhbmdlfSAvPlxuICAgICAge2xhYmVsICYmIDxJbmxpbmVGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9JbmxpbmVGaWVsZExhYmVsPn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5Td2l0Y2gucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLFxufTtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3N3aXRjaC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0QwQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9zd2l0Y2guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFRyYW5zaXRpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0LCB7IHVzZUlkIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IElubGluZUZpZWxkTGFiZWwgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBrbm9iU2l6ZVB4ID0gMTY7XG5jb25zdCB0cmFja09mZnNldFB4ID0gMjtcbmNvbnN0IHRyYWNrV2lkdGhQeCA9IDQwO1xuY29uc3QgdHJhY2tIZWlnaHRQeCA9IGtub2JTaXplUHggKyB0cmFja09mZnNldFB4ICogMjtcbmNvbnN0IGtub2JBY3RpdmVQb3NpdGlvblB4ID0gdHJhY2tXaWR0aFB4IC0ga25vYlNpemVQeCAtIHRyYWNrT2Zmc2V0UHggKiAyO1xuXG5jb25zdCBJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdncmV5MycpfTtcbiAgLS1rbm9iQ29sb3I6ICR7Z2V0Q29sb3IoJ3doaXRlJyl9O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGhlaWdodDogJHt0cmFja0hlaWdodFB4fXB4O1xuICB3aWR0aDogJHt0cmFja1dpZHRoUHh9cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiAke3RyYWNrSGVpZ2h0UHggLyAyfXB4O1xuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgbWFyZ2luOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLXRyYWNrQ29sb3IpO1xuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBsZWZ0OiAke3RyYWNrT2Zmc2V0UHh9cHg7XG4gICAgdG9wOiAke3RyYWNrT2Zmc2V0UHh9cHg7XG4gICAgaGVpZ2h0OiAke2tub2JTaXplUHh9cHg7XG4gICAgd2lkdGg6ICR7a25vYlNpemVQeH1weDtcbiAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWtub2JDb2xvcik7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtICR7Z2V0VHJhbnNpdGlvbigneEZhc3QnKX07XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cblxuICAmOmNoZWNrZWQge1xuICAgIC0tdHJhY2tDb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgfVxuXG4gICY6Y2hlY2tlZDphZnRlciB7XG4gICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKCR7a25vYkFjdGl2ZVBvc2l0aW9uUHh9cHgpO1xuICB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgLS10cmFja0NvbG9yOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kRGlzYWJsZWQnKX07XG4gICAgLS1rbm9iQ29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnREaXNhYmxlZCcpfTtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGdyaWQ7XG4gIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgZ2FwOiA4cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3dpdGNoID0gKHsgaXNEaXNhYmxlZCwgaXNBY3RpdmUsIGxhYmVsLCBpZCwgb25DaGFuZ2UsIC4uLnByb3BzIH0pID0+IHtcbiAgY29uc3QgaW50ZXJuYWxJZCA9IHVzZUlkKCk7XG4gIGNvbnN0IGZpbmFsSWQgPSBpZCB8fCBpbnRlcm5hbElkO1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyIHsuLi5wcm9wc30+XG4gICAgICA8SW5wdXRcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGlkPXtmaW5hbElkfVxuICAgICAgICBjaGVja2VkPXtpc0FjdGl2ZX1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgLz5cbiAgICAgIHtsYWJlbCAmJiA8SW5saW5lRmllbGRMYWJlbCBodG1sRm9yPXtmaW5hbElkfT57bGFiZWx9PC9JbmxpbmVGaWVsZExhYmVsPn1cbiAgICA8L1dyYXBwZXI+XG4gICk7XG59O1xuXG5Td2l0Y2gucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZyxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBsYWJlbDogUHJvcFR5cGVzLnN0cmluZyxcbn07XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
@@ -51,18 +51,20 @@ export var Switch = function Switch(_ref) {
       onChange = _ref.onChange,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var internalId = useId();
+  var finalId = id || internalId;
   return ___EmotionJSX(Wrapper, props, ___EmotionJSX(Input, {
     type: "checkbox",
     disabled: isDisabled,
-    id: id,
+    id: finalId,
     checked: isActive,
     onChange: onChange
   }), label && ___EmotionJSX(InlineFieldLabel, {
-    htmlFor: id
+    htmlFor: finalId
   }, label));
 };
 Switch.propTypes = {
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
   onChange: PropTypes.func,
   isDisabled: PropTypes.bool,
   isActive: PropTypes.bool,

package/es/components/text-input.js

@@ -33,7 +33,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useId } from 'react';
 import { Box, Text } from '.';
 import { Icon } from './icon';
 import { FieldLabel, InputField } from '../foundational';
@@ -47,7 +47,7 @@ var IconSection = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "producti
 } : {
   target: "e1o9e51y0",
   label: "IconSection"
-})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEZpZWxkTGFiZWwsIElucHV0RmllbGQgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gKHtcbiAgdmFsdWUsXG4gIHBsYWNlaG9sZGVyLFxuICBsYWJlbCxcbiAgaWQsXG4gIGljb24sXG4gIGhhc0Vycm9yLFxuICBlcnJvck1lc3NhZ2UsXG4gIGlzRGlzYWJsZWQsXG4gIC4uLnByb3BzXG59KSA9PiB7XG4gIGNvbnN0IGljb25SZWYgPSBSZWFjdC51c2VSZWYobnVsbCk7XG4gIGNvbnN0IFtpY29uV2lkdGgsIHNldEljb25XaWR0aF0gPSBSZWFjdC51c2VTdGF0ZSgpO1xuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGljb25SZWYuY3VycmVudCkge1xuICAgICAgc2V0SWNvbldpZHRoKGljb25SZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCk7XG4gICAgfVxuICB9LCBbXSk7XG5cbiAgY29uc3QgcGFkZGluZ0xlZnQgPSBpY29uID8gYCR7aWNvbk9mZnNldFB4ICsgaWNvbldpZHRoICsgaWNvblRleHRHYXBQeH1weGAgOiB1bmRlZmluZWQ7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICBwbGFjZWhvbGRlcj17cGxhY2Vob2xkZXJ9XG4gICAgICAgICAgcGFkZGluZ0xlZnQ9e3BhZGRpbmdMZWZ0fVxuICAgICAgICAgIGhhc0Vycm9yPXtoYXNFcnJvcn1cbiAgICAgICAgICBpc0Rpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgLz5cbiAgICAgIDwvQm94PlxuICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgIDxCb3ggbWFyZ2luVG9wPXswLjV9PlxuICAgICAgICAgIDxUZXh0IGNvbG9yPVwiZGFuZ2VyXCI+e2Vycm9yTWVzc2FnZX08L1RleHQ+XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cblRleHRJbnB1dC5wcm9wVHlwZXMgPSB7XG4gIGlkOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIHBsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB2YWx1ZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxufTtcbiJdfQ== */"));
+})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVc4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QsIHsgdXNlSWQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBCb3gsIFRleHQgfSBmcm9tICcuJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IHsgRmllbGRMYWJlbCwgSW5wdXRGaWVsZCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgaWNvbk9mZnNldFB4ID0gMTI7XG5jb25zdCBpY29uVGV4dEdhcFB4ID0gODtcblxuY29uc3QgSWNvblNlY3Rpb24gPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIG1hcmdpbjogYXV0bztcbiAgbGVmdDogJHtpY29uT2Zmc2V0UHh9cHg7XG4gIHRvcDogMDtcbiAgYm90dG9tOiAwO1xuICBoZWlnaHQ6IGZpdC1jb250ZW50O1xuICBwb2ludGVyLWV2ZW50czogbm9uZTtcbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0SW5wdXQgPSAoe1xuICB2YWx1ZSxcbiAgcGxhY2Vob2xkZXIsXG4gIGxhYmVsLFxuICBpZCxcbiAgaWNvbixcbiAgaGFzRXJyb3IsXG4gIGVycm9yTWVzc2FnZSxcbiAgaXNEaXNhYmxlZCxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgaWNvblJlZiA9IFJlYWN0LnVzZVJlZihudWxsKTtcbiAgY29uc3QgW2ljb25XaWR0aCwgc2V0SWNvbldpZHRoXSA9IFJlYWN0LnVzZVN0YXRlKCk7XG4gIGNvbnN0IGludGVybmFsSWQgPSB1c2VJZCgpO1xuICBjb25zdCBmaW5hbElkID0gaWQgfHwgaW50ZXJuYWxJZDtcblxuICBSZWFjdC51c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChpY29uUmVmLmN1cnJlbnQpIHtcbiAgICAgIHNldEljb25XaWR0aChpY29uUmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkud2lkdGgpO1xuICAgIH1cbiAgfSwgW10pO1xuXG4gIGNvbnN0IHBhZGRpbmdMZWZ0ID0gaWNvbiA/IGAke2ljb25PZmZzZXRQeCArIGljb25XaWR0aCArIGljb25UZXh0R2FwUHh9cHhgIDogdW5kZWZpbmVkO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIHtsYWJlbCAmJiA8RmllbGRMYWJlbCBodG1sRm9yPXtmaW5hbElkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiPlxuICAgICAgICB7aWNvbiAmJiAoXG4gICAgICAgICAgPEljb25TZWN0aW9uPlxuICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgIDwvSWNvblNlY3Rpb24+XG4gICAgICAgICl9XG4gICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgaWQ9e2ZpbmFsSWR9XG4gICAgICAgICAgdmFsdWU9e3ZhbHVlfVxuICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICBwYWRkaW5nTGVmdD17cGFkZGluZ0xlZnR9XG4gICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAvPlxuICAgICAgPC9Cb3g+XG4gICAgICB7ZXJyb3JNZXNzYWdlICYmIChcbiAgICAgICAgPEJveCBtYXJnaW5Ub3A9ezAuNX0+XG4gICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgPC9Cb3g+XG4gICAgICApfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuVGV4dElucHV0LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIHBsYWNlaG9sZGVyOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB2YWx1ZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxufTtcbiJdfQ== */"));
 
 export var TextInput = function TextInput(_ref) {
   var value = _ref.value,
@@ -67,6 +67,8 @@ export var TextInput = function TextInput(_ref) {
       iconWidth = _React$useState2[0],
       setIconWidth = _React$useState2[1];
 
+  var internalId = useId();
+  var finalId = id || internalId;
   React.useEffect(function () {
     if (iconRef.current) {
       setIconWidth(iconRef.current.getBoundingClientRect().width);
@@ -74,14 +76,14 @@ export var TextInput = function TextInput(_ref) {
   }, []);
   var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : undefined;
   return ___EmotionJSX("div", null, label && ___EmotionJSX(FieldLabel, {
-    htmlFor: id
+    htmlFor: finalId
   }, label), ___EmotionJSX(Box, {
     position: "relative"
   }, icon && ___EmotionJSX(IconSection, null, ___EmotionJSX(Icon, {
     ref: iconRef,
     icon: icon
   })), ___EmotionJSX(InputField, _extends({
-    id: id,
+    id: finalId,
     value: value,
     placeholder: placeholder,
     paddingLeft: paddingLeft,
@@ -94,7 +96,7 @@ export var TextInput = function TextInput(_ref) {
   }, errorMessage)));
 };
 TextInput.propTypes = {
-  id: PropTypes.string.isRequired,
+  id: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.string,
   label: types.label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",