@commercetools-uikit/select-utils 17.1.0 → 18.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -62,7 +62,7 @@ const ClearIndicator = props => {
|
|
|
62
62
|
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
|
|
63
63
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
64
64
|
ref: ref,
|
|
65
|
-
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.
|
|
65
|
+
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbmV4cG9ydCB0eXBlIFRDbGVhckluZGljYXRvclByb3BzID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw0MH07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuY29sb3JFcnJvcn07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
|
|
66
66
|
style: getStyles('clearIndicator', props),
|
|
67
67
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
68
68
|
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
@@ -144,7 +144,7 @@ const WrapperWithIcon = props => {
|
|
|
144
144
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
145
145
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
146
146
|
// spacingsXs is the margin between the icon and value
|
|
147
|
-
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.
|
|
147
|
+
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCwgdHlwZSBSZWFjdEVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7XG4gIGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMsXG4gIHR5cGUgU2luZ2xlVmFsdWVQcm9wcyxcbiAgdHlwZSBQbGFjZWhvbGRlclByb3BzLFxufSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuXG5leHBvcnQgdHlwZSBUV3JhcHBlcldpdGhJY29uU2VsZWN0UHJvcHMgPSB7XG4gIGljb25MZWZ0PzogUmVhY3RFbGVtZW50O1xufTtcbmV4cG9ydCB0eXBlIFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzID0ge1xuICB0eXBlOiAnc2luZ2xlVmFsdWUnO1xuICBzZWxlY3RQcm9wcz86IFRXcmFwcGVyV2l0aEljb25TZWxlY3RQcm9wcztcbn0gJiBTaW5nbGVWYWx1ZVByb3BzO1xuZXhwb3J0IHR5cGUgVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdwbGFjZWhvbGRlcic7XG4gIHNlbGVjdFByb3BzPzogVFdyYXBwZXJXaXRoSWNvblNlbGVjdFByb3BzO1xufSAmIFBsYWNlaG9sZGVyUHJvcHM7XG5leHBvcnQgdHlwZSBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9XG4gIFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBUU2luZ2xlVmFsdWVXcmFwcGVyV2l0aEljb25Qcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFRQbGFjZWhvbGRlcldyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBuZXZlcjtcbmV4cG9ydCB0eXBlIFREZWZhdWx0Q29tcG9uZW50PFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4gPSAoXG4gIHByb3BzOiBUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJ1xuICAgID8gU2luZ2xlVmFsdWVQcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFBsYWNlaG9sZGVyUHJvcHNcbiAgICA6IG5ldmVyXG4pID0+IEpTWC5FbGVtZW50O1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4oXG4gIHR5cGU6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlsndHlwZSddXG4pOiBURGVmYXVsdENvbXBvbmVudDxUeXBlPiB8IG51bGwgPT4ge1xuICBpZiAodHlwZSA9PT0gJ3NpbmdsZVZhbHVlJylcbiAgICByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuU2luZ2xlVmFsdWUgYXMgVERlZmF1bHRDb21wb25lbnQ8VHlwZT47XG4gIGlmICh0eXBlID09PSAncGxhY2Vob2xkZXInKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5QbGFjZWhvbGRlciBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgcmV0dXJuIG51bGw7XG59O1xuXG5jb25zdCBXcmFwcGVyV2l0aEljb24gPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgcHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlxuKSA9PiB7XG4gIGNvbnN0IERlZmF1bHRDb21wb25lbnQgPSBnZXREZWZhdWx0Q29tcG9uZW50PFR5cGU+KHByb3BzLnR5cGUpO1xuXG4gIGlmICghRGVmYXVsdENvbXBvbmVudCkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge3Byb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0ICYmXG4gICAgICAgIGNsb25lRWxlbWVudChwcm9wcy5zZWxlY3RQcm9wcy5pY29uTGVmdCwge1xuICAgICAgICAgIHNpemU6ICdiaWcnLFxuICAgICAgICB9KX1cbiAgICAgIDxzcGFuXG4gICAgICAgIC8vIHJlYWN0LXNlbGVjdCB1c2VzIGFic29sdXRlIHBvc2l0aW9uaW5nIGZvciB0aGUgU2luZ2xlVmFsdWUvUGxhY2Vob2xkZXJcbiAgICAgICAgLy8gdGhlIGljb24gaGFzIGEgZml4ZWQgc2l6ZSBvZiAyNHB4ICg9PSBTcGFjaW5nc1hsKSwgdGhlcmVmb3JlIHdlIGNhbiB1c2UgYSBmaXhlZCBtYXJnaW5cbiAgICAgICAgLy8gc3BhY2luZ3NYcyBpcyB0aGUgbWFyZ2luIGJldHdlZW4gdGhlIGljb24gYW5kIHZhbHVlXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7LyogQHRzLWlnbm9yZSAqL31cbiAgICAgICAgPERlZmF1bHRDb21wb25lbnQgey4uLnByb3BzfSAvPlxuICAgICAgPC9zcGFuPlxuICAgIDwvPlxuICApO1xufTtcblxuV3JhcHBlcldpdGhJY29uLmRpc3BsYXlOYW1lID0gJ1dyYXBwZXJXaXRoSWNvbic7XG5cbmV4cG9ydCBkZWZhdWx0IFdyYXBwZXJXaXRoSWNvbjtcblxuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdzaW5nbGVWYWx1ZSc+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwnc2luZ2xlVmFsdWUnPiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczwncGxhY2Vob2xkZXInPikgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb248J3BsYWNlaG9sZGVyJz4gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
|
|
148
148
|
children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
149
149
|
})]
|
|
150
150
|
});
|
|
@@ -254,7 +254,7 @@ var messages = reactIntl.defineMessages({
|
|
|
254
254
|
});
|
|
255
255
|
|
|
256
256
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
257
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
257
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context9, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
258
258
|
const getHorizontalConstraintValue = value => {
|
|
259
259
|
switch (value) {
|
|
260
260
|
case 'auto':
|
|
@@ -283,7 +283,7 @@ const getInputBorderColor = (props, state) => {
|
|
|
283
283
|
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
284
284
|
}
|
|
285
285
|
if (props.isReadOnly) {
|
|
286
|
-
return designSystem.designTokens.
|
|
286
|
+
return designSystem.designTokens.colorNeutral95;
|
|
287
287
|
}
|
|
288
288
|
if (state.isFocused) {
|
|
289
289
|
return designSystem.designTokens.borderColorForInputWhenFocused;
|
|
@@ -304,7 +304,7 @@ const getHoverInputBorderColor = props => {
|
|
|
304
304
|
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
305
305
|
}
|
|
306
306
|
if (props.isReadOnly) {
|
|
307
|
-
return designSystem.designTokens.
|
|
307
|
+
return designSystem.designTokens.colorNeutral95;
|
|
308
308
|
}
|
|
309
309
|
if (props.hasError) {
|
|
310
310
|
return designSystem.designTokens.borderColorForInputWhenError;
|
|
@@ -317,12 +317,12 @@ const getHoverInputBorderColor = props => {
|
|
|
317
317
|
const controlStyles = props => (base, state) => {
|
|
318
318
|
var _context;
|
|
319
319
|
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
|
|
320
|
-
fontSize: designSystem.designTokens.
|
|
320
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
321
321
|
backgroundColor: getInputBackgroundColor(props),
|
|
322
322
|
borderColor: getInputBorderColor(props, state),
|
|
323
323
|
borderWidth: (() => {
|
|
324
324
|
if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
|
|
325
|
-
return designSystem.designTokens.
|
|
325
|
+
return designSystem.designTokens.borderWidth2;
|
|
326
326
|
}
|
|
327
327
|
return designSystem.designTokens.borderWidth1;
|
|
328
328
|
})(),
|
|
@@ -333,7 +333,7 @@ const controlStyles = props => (base, state) => {
|
|
|
333
333
|
if (props.isReadOnly) return 'default';
|
|
334
334
|
return 'pointer';
|
|
335
335
|
})(),
|
|
336
|
-
padding: props.appearance === 'quiet' ?
|
|
336
|
+
padding: props.appearance === 'quiet' ? designSystem.designTokens.paddingForInputAsQuiet : designSystem.designTokens.paddingForInput,
|
|
337
337
|
transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
|
|
338
338
|
outline: 0,
|
|
339
339
|
boxShadow: 'none'
|
|
@@ -365,16 +365,17 @@ const controlStyles = props => (base, state) => {
|
|
|
365
365
|
};
|
|
366
366
|
const menuStyles = props => base => {
|
|
367
367
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
368
|
-
border: "1px solid ".concat(designSystem.designTokens.
|
|
368
|
+
border: "1px solid ".concat(designSystem.designTokens.colorSurface),
|
|
369
369
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
370
370
|
backgroundColor: designSystem.designTokens.backgroundColorForInput,
|
|
371
|
-
boxShadow:
|
|
372
|
-
fontSize: designSystem.designTokens.
|
|
371
|
+
boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
|
|
372
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
373
373
|
fontFamily: 'inherit',
|
|
374
374
|
margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
|
|
375
375
|
borderColor: (() => {
|
|
376
|
-
if (props.hasError
|
|
377
|
-
|
|
376
|
+
if (props.hasError || props.hasWarning) {
|
|
377
|
+
return designSystem.designTokens.colorSurface;
|
|
378
|
+
}
|
|
378
379
|
return base.borderColorForInput;
|
|
379
380
|
})(),
|
|
380
381
|
width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
|
|
@@ -395,36 +396,33 @@ const dropdownIndicatorStyles = props => base => {
|
|
|
395
396
|
color: designSystem.designTokens.fontColorForInput,
|
|
396
397
|
margin: '0',
|
|
397
398
|
padding: '0',
|
|
398
|
-
marginLeft: designSystem.designTokens.
|
|
399
|
+
marginLeft: designSystem.designTokens.spacing20,
|
|
399
400
|
fill: (() => {
|
|
400
401
|
if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
401
|
-
if (props.hasError) return designSystem.designTokens.
|
|
402
|
-
if (props.hasWarning) return designSystem.designTokens.
|
|
403
|
-
return designSystem.designTokens.
|
|
402
|
+
if (props.hasError) return designSystem.designTokens.colorError;
|
|
403
|
+
if (props.hasWarning) return designSystem.designTokens.colorWarning;
|
|
404
|
+
return designSystem.designTokens.colorNeutral60;
|
|
404
405
|
})()
|
|
405
406
|
});
|
|
406
407
|
};
|
|
407
408
|
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
408
409
|
display: 'flex',
|
|
409
410
|
padding: 0,
|
|
410
|
-
marginLeft: designSystem.designTokens.
|
|
411
|
+
marginLeft: designSystem.designTokens.spacing20
|
|
411
412
|
});
|
|
412
413
|
const menuListStyles = () => base => {
|
|
413
414
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
414
|
-
padding: designSystem.designTokens.
|
|
415
|
+
padding: "".concat(designSystem.designTokens.spacing10, " 0"),
|
|
415
416
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
416
417
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
417
418
|
});
|
|
418
419
|
};
|
|
419
420
|
const optionStyles = () => (base, state) => {
|
|
420
|
-
var _context2, _context3;
|
|
421
|
+
var _context2, _context3, _context4;
|
|
421
422
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
422
423
|
transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
|
|
426
|
-
paddingBottom: designSystem.designTokens.paddingBottomForSelectInputOptions,
|
|
427
|
-
lineHeight: designSystem.designTokens.lineHeightForSelectInputOptions,
|
|
424
|
+
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
|
|
425
|
+
lineHeight: designSystem.designTokens.lineHeight40,
|
|
428
426
|
color: (() => {
|
|
429
427
|
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
430
428
|
if (state.isSelected) return designSystem.designTokens.fontColorForInput;
|
|
@@ -432,7 +430,7 @@ const optionStyles = () => (base, state) => {
|
|
|
432
430
|
})(),
|
|
433
431
|
backgroundColor: (() => {
|
|
434
432
|
if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
|
|
435
|
-
if (state.isFocused) return designSystem.designTokens.
|
|
433
|
+
if (state.isFocused) return designSystem.designTokens.colorNeutral98;
|
|
436
434
|
return base.backgroundColor;
|
|
437
435
|
})(),
|
|
438
436
|
'&:active': {
|
|
@@ -449,13 +447,13 @@ const placeholderStyles = props => base => {
|
|
|
449
447
|
color: (() => {
|
|
450
448
|
if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
|
|
451
449
|
if (props.hasError) {
|
|
452
|
-
return designSystem.designTokens.
|
|
450
|
+
return designSystem.designTokens.colorError;
|
|
453
451
|
}
|
|
454
452
|
if (props.hasWarning) {
|
|
455
|
-
return designSystem.designTokens.
|
|
453
|
+
return designSystem.designTokens.colorWarning;
|
|
456
454
|
}
|
|
457
455
|
}
|
|
458
|
-
return designSystem.designTokens.
|
|
456
|
+
return designSystem.designTokens.colorNeutral60;
|
|
459
457
|
})(),
|
|
460
458
|
width: '100%',
|
|
461
459
|
overflow: 'hidden',
|
|
@@ -474,7 +472,7 @@ const valueContainerStyles = props => base => {
|
|
|
474
472
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
475
473
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
476
474
|
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
|
|
477
|
-
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.
|
|
475
|
+
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
|
|
478
476
|
});
|
|
479
477
|
};
|
|
480
478
|
const singleValueStyles = props => base => {
|
|
@@ -486,8 +484,8 @@ const singleValueStyles = props => base => {
|
|
|
486
484
|
if (props.isReadOnly) {
|
|
487
485
|
return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
488
486
|
}
|
|
489
|
-
if (props.hasError) return designSystem.designTokens.
|
|
490
|
-
if (props.hasWarning) return designSystem.designTokens.
|
|
487
|
+
if (props.hasError) return designSystem.designTokens.colorError;
|
|
488
|
+
if (props.hasWarning) return designSystem.designTokens.colorWarning;
|
|
491
489
|
return designSystem.designTokens.fontColorForInput;
|
|
492
490
|
})()
|
|
493
491
|
});
|
|
@@ -496,19 +494,19 @@ const groupStyles = props => base => {
|
|
|
496
494
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
497
495
|
padding: 0,
|
|
498
496
|
'&:not(:first-of-type)': {
|
|
499
|
-
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.
|
|
497
|
+
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
|
|
500
498
|
}
|
|
501
499
|
});
|
|
502
500
|
};
|
|
503
501
|
const groupHeadingStyles = () => base => {
|
|
504
|
-
var
|
|
502
|
+
var _context5;
|
|
505
503
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
506
504
|
color: designSystem.designTokens.fontColorForInputWhenReadonly,
|
|
507
|
-
fontSize: designSystem.designTokens.
|
|
508
|
-
borderBottom: "1px solid ".concat(designSystem.designTokens.
|
|
505
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
506
|
+
borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
|
|
509
507
|
textTransform: 'none',
|
|
510
508
|
fontWeight: designSystem.designTokens.fontWeight500,
|
|
511
|
-
padding: _concatInstanceProperty__default["default"](
|
|
509
|
+
padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
|
|
512
510
|
'&:empty': {
|
|
513
511
|
padding: 0
|
|
514
512
|
}
|
|
@@ -517,7 +515,7 @@ const groupHeadingStyles = () => base => {
|
|
|
517
515
|
const containerStyles = () => (base, state) => {
|
|
518
516
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
519
517
|
fontFamily: 'inherit',
|
|
520
|
-
minHeight: designSystem.designTokens.
|
|
518
|
+
minHeight: designSystem.designTokens.heightForInputAsSmall,
|
|
521
519
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
522
520
|
borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
|
|
523
521
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
@@ -534,50 +532,50 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
|
|
|
534
532
|
const multiValueStyles = () => base => {
|
|
535
533
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
536
534
|
display: 'flex',
|
|
537
|
-
alignItems:
|
|
538
|
-
height:
|
|
539
|
-
backgroundColor: designSystem.designTokens.
|
|
535
|
+
alignItems: 'center',
|
|
536
|
+
height: '32px',
|
|
537
|
+
backgroundColor: designSystem.designTokens.colorNeutral95,
|
|
540
538
|
padding: '0',
|
|
541
|
-
border: designSystem.designTokens.
|
|
539
|
+
border: "1px solid ".concat(designSystem.designTokens.colorNeutral85)
|
|
542
540
|
});
|
|
543
541
|
};
|
|
544
542
|
const multiValueLabelStyles = props => base => {
|
|
545
|
-
var
|
|
543
|
+
var _context6, _context7;
|
|
546
544
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
547
|
-
fontSize: designSystem.designTokens.
|
|
545
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
548
546
|
color: (() => {
|
|
549
547
|
if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
550
548
|
if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
551
549
|
return base.color;
|
|
552
550
|
})(),
|
|
553
|
-
padding: _concatInstanceProperty__default["default"](
|
|
554
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
551
|
+
padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
|
|
552
|
+
borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadius2),
|
|
555
553
|
border: 'none',
|
|
556
554
|
borderWidth: '1px 0 1px 1px',
|
|
557
555
|
'&:last-child': {
|
|
558
|
-
borderRadius: designSystem.designTokens.
|
|
556
|
+
borderRadius: designSystem.designTokens.borderRadius2,
|
|
559
557
|
borderWidth: designSystem.designTokens.borderWidth1
|
|
560
558
|
}
|
|
561
559
|
});
|
|
562
560
|
};
|
|
563
561
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
564
|
-
var
|
|
562
|
+
var _context8;
|
|
565
563
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
566
|
-
borderColor: designSystem.designTokens.
|
|
564
|
+
borderColor: designSystem.designTokens.colorNeutral,
|
|
567
565
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
568
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
566
|
+
borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context8, designSystem.designTokens.borderRadius2, " 0"),
|
|
569
567
|
borderStyle: 'none',
|
|
570
568
|
borderWidth: '0',
|
|
571
569
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
572
|
-
backgroundColor: designSystem.designTokens.
|
|
570
|
+
backgroundColor: designSystem.designTokens.colorNeutral95,
|
|
573
571
|
'svg *': {
|
|
574
572
|
fill: props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : ''
|
|
575
573
|
},
|
|
576
574
|
'&:hover, &:focus': {
|
|
577
|
-
borderColor: designSystem.designTokens.
|
|
578
|
-
backgroundColor: designSystem.designTokens.
|
|
575
|
+
borderColor: designSystem.designTokens.colorWarning,
|
|
576
|
+
backgroundColor: designSystem.designTokens.colorNeutral95,
|
|
579
577
|
'svg *': {
|
|
580
|
-
fill: designSystem.designTokens.
|
|
578
|
+
fill: designSystem.designTokens.colorError
|
|
581
579
|
}
|
|
582
580
|
}
|
|
583
581
|
});
|
|
@@ -614,7 +612,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
614
612
|
};
|
|
615
613
|
|
|
616
614
|
// NOTE: This string will be replaced on build time with the package version.
|
|
617
|
-
var version = "
|
|
615
|
+
var version = "18.0.0";
|
|
618
616
|
|
|
619
617
|
exports.ClearIndicator = ClearIndicator$1;
|
|
620
618
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|
|
@@ -62,7 +62,7 @@ const ClearIndicator = props => {
|
|
|
62
62
|
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
|
|
63
63
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
64
64
|
ref: ref,
|
|
65
|
-
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.
|
|
65
|
+
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + ("" ), "" ),
|
|
66
66
|
style: getStyles('clearIndicator', props),
|
|
67
67
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
68
68
|
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
@@ -144,7 +144,7 @@ const WrapperWithIcon = props => {
|
|
|
144
144
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
145
145
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
146
146
|
// spacingsXs is the margin between the icon and value
|
|
147
|
-
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.
|
|
147
|
+
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacing20, ";" + ("" ), "" ),
|
|
148
148
|
children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
149
149
|
})]
|
|
150
150
|
});
|
|
@@ -254,7 +254,7 @@ var messages = reactIntl.defineMessages({
|
|
|
254
254
|
});
|
|
255
255
|
|
|
256
256
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
257
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
257
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context9, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
258
258
|
const getHorizontalConstraintValue = value => {
|
|
259
259
|
switch (value) {
|
|
260
260
|
case 'auto':
|
|
@@ -283,7 +283,7 @@ const getInputBorderColor = (props, state) => {
|
|
|
283
283
|
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
284
284
|
}
|
|
285
285
|
if (props.isReadOnly) {
|
|
286
|
-
return designSystem.designTokens.
|
|
286
|
+
return designSystem.designTokens.colorNeutral95;
|
|
287
287
|
}
|
|
288
288
|
if (state.isFocused) {
|
|
289
289
|
return designSystem.designTokens.borderColorForInputWhenFocused;
|
|
@@ -304,7 +304,7 @@ const getHoverInputBorderColor = props => {
|
|
|
304
304
|
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
305
305
|
}
|
|
306
306
|
if (props.isReadOnly) {
|
|
307
|
-
return designSystem.designTokens.
|
|
307
|
+
return designSystem.designTokens.colorNeutral95;
|
|
308
308
|
}
|
|
309
309
|
if (props.hasError) {
|
|
310
310
|
return designSystem.designTokens.borderColorForInputWhenError;
|
|
@@ -317,12 +317,12 @@ const getHoverInputBorderColor = props => {
|
|
|
317
317
|
const controlStyles = props => (base, state) => {
|
|
318
318
|
var _context;
|
|
319
319
|
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
|
|
320
|
-
fontSize: designSystem.designTokens.
|
|
320
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
321
321
|
backgroundColor: getInputBackgroundColor(props),
|
|
322
322
|
borderColor: getInputBorderColor(props, state),
|
|
323
323
|
borderWidth: (() => {
|
|
324
324
|
if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
|
|
325
|
-
return designSystem.designTokens.
|
|
325
|
+
return designSystem.designTokens.borderWidth2;
|
|
326
326
|
}
|
|
327
327
|
return designSystem.designTokens.borderWidth1;
|
|
328
328
|
})(),
|
|
@@ -333,7 +333,7 @@ const controlStyles = props => (base, state) => {
|
|
|
333
333
|
if (props.isReadOnly) return 'default';
|
|
334
334
|
return 'pointer';
|
|
335
335
|
})(),
|
|
336
|
-
padding: props.appearance === 'quiet' ?
|
|
336
|
+
padding: props.appearance === 'quiet' ? designSystem.designTokens.paddingForInputAsQuiet : designSystem.designTokens.paddingForInput,
|
|
337
337
|
transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
|
|
338
338
|
outline: 0,
|
|
339
339
|
boxShadow: 'none'
|
|
@@ -365,16 +365,17 @@ const controlStyles = props => (base, state) => {
|
|
|
365
365
|
};
|
|
366
366
|
const menuStyles = props => base => {
|
|
367
367
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
368
|
-
border: "1px solid ".concat(designSystem.designTokens.
|
|
368
|
+
border: "1px solid ".concat(designSystem.designTokens.colorSurface),
|
|
369
369
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
370
370
|
backgroundColor: designSystem.designTokens.backgroundColorForInput,
|
|
371
|
-
boxShadow:
|
|
372
|
-
fontSize: designSystem.designTokens.
|
|
371
|
+
boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
|
|
372
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
373
373
|
fontFamily: 'inherit',
|
|
374
374
|
margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
|
|
375
375
|
borderColor: (() => {
|
|
376
|
-
if (props.hasError
|
|
377
|
-
|
|
376
|
+
if (props.hasError || props.hasWarning) {
|
|
377
|
+
return designSystem.designTokens.colorSurface;
|
|
378
|
+
}
|
|
378
379
|
return base.borderColorForInput;
|
|
379
380
|
})(),
|
|
380
381
|
width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
|
|
@@ -395,36 +396,33 @@ const dropdownIndicatorStyles = props => base => {
|
|
|
395
396
|
color: designSystem.designTokens.fontColorForInput,
|
|
396
397
|
margin: '0',
|
|
397
398
|
padding: '0',
|
|
398
|
-
marginLeft: designSystem.designTokens.
|
|
399
|
+
marginLeft: designSystem.designTokens.spacing20,
|
|
399
400
|
fill: (() => {
|
|
400
401
|
if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
401
|
-
if (props.hasError) return designSystem.designTokens.
|
|
402
|
-
if (props.hasWarning) return designSystem.designTokens.
|
|
403
|
-
return designSystem.designTokens.
|
|
402
|
+
if (props.hasError) return designSystem.designTokens.colorError;
|
|
403
|
+
if (props.hasWarning) return designSystem.designTokens.colorWarning;
|
|
404
|
+
return designSystem.designTokens.colorNeutral60;
|
|
404
405
|
})()
|
|
405
406
|
});
|
|
406
407
|
};
|
|
407
408
|
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
408
409
|
display: 'flex',
|
|
409
410
|
padding: 0,
|
|
410
|
-
marginLeft: designSystem.designTokens.
|
|
411
|
+
marginLeft: designSystem.designTokens.spacing20
|
|
411
412
|
});
|
|
412
413
|
const menuListStyles = () => base => {
|
|
413
414
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
414
|
-
padding: designSystem.designTokens.
|
|
415
|
+
padding: "".concat(designSystem.designTokens.spacing10, " 0"),
|
|
415
416
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
416
417
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
417
418
|
});
|
|
418
419
|
};
|
|
419
420
|
const optionStyles = () => (base, state) => {
|
|
420
|
-
var _context2, _context3;
|
|
421
|
+
var _context2, _context3, _context4;
|
|
421
422
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
422
423
|
transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
|
|
426
|
-
paddingBottom: designSystem.designTokens.paddingBottomForSelectInputOptions,
|
|
427
|
-
lineHeight: designSystem.designTokens.lineHeightForSelectInputOptions,
|
|
424
|
+
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
|
|
425
|
+
lineHeight: designSystem.designTokens.lineHeight40,
|
|
428
426
|
color: (() => {
|
|
429
427
|
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
430
428
|
if (state.isSelected) return designSystem.designTokens.fontColorForInput;
|
|
@@ -432,7 +430,7 @@ const optionStyles = () => (base, state) => {
|
|
|
432
430
|
})(),
|
|
433
431
|
backgroundColor: (() => {
|
|
434
432
|
if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
|
|
435
|
-
if (state.isFocused) return designSystem.designTokens.
|
|
433
|
+
if (state.isFocused) return designSystem.designTokens.colorNeutral98;
|
|
436
434
|
return base.backgroundColor;
|
|
437
435
|
})(),
|
|
438
436
|
'&:active': {
|
|
@@ -449,13 +447,13 @@ const placeholderStyles = props => base => {
|
|
|
449
447
|
color: (() => {
|
|
450
448
|
if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
|
|
451
449
|
if (props.hasError) {
|
|
452
|
-
return designSystem.designTokens.
|
|
450
|
+
return designSystem.designTokens.colorError;
|
|
453
451
|
}
|
|
454
452
|
if (props.hasWarning) {
|
|
455
|
-
return designSystem.designTokens.
|
|
453
|
+
return designSystem.designTokens.colorWarning;
|
|
456
454
|
}
|
|
457
455
|
}
|
|
458
|
-
return designSystem.designTokens.
|
|
456
|
+
return designSystem.designTokens.colorNeutral60;
|
|
459
457
|
})(),
|
|
460
458
|
width: '100%',
|
|
461
459
|
overflow: 'hidden',
|
|
@@ -474,7 +472,7 @@ const valueContainerStyles = props => base => {
|
|
|
474
472
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
475
473
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
476
474
|
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
|
|
477
|
-
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.
|
|
475
|
+
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
|
|
478
476
|
});
|
|
479
477
|
};
|
|
480
478
|
const singleValueStyles = props => base => {
|
|
@@ -486,8 +484,8 @@ const singleValueStyles = props => base => {
|
|
|
486
484
|
if (props.isReadOnly) {
|
|
487
485
|
return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
488
486
|
}
|
|
489
|
-
if (props.hasError) return designSystem.designTokens.
|
|
490
|
-
if (props.hasWarning) return designSystem.designTokens.
|
|
487
|
+
if (props.hasError) return designSystem.designTokens.colorError;
|
|
488
|
+
if (props.hasWarning) return designSystem.designTokens.colorWarning;
|
|
491
489
|
return designSystem.designTokens.fontColorForInput;
|
|
492
490
|
})()
|
|
493
491
|
});
|
|
@@ -496,19 +494,19 @@ const groupStyles = props => base => {
|
|
|
496
494
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
497
495
|
padding: 0,
|
|
498
496
|
'&:not(:first-of-type)': {
|
|
499
|
-
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.
|
|
497
|
+
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral90) : base.borderTop
|
|
500
498
|
}
|
|
501
499
|
});
|
|
502
500
|
};
|
|
503
501
|
const groupHeadingStyles = () => base => {
|
|
504
|
-
var
|
|
502
|
+
var _context5;
|
|
505
503
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
506
504
|
color: designSystem.designTokens.fontColorForInputWhenReadonly,
|
|
507
|
-
fontSize: designSystem.designTokens.
|
|
508
|
-
borderBottom: "1px solid ".concat(designSystem.designTokens.
|
|
505
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
506
|
+
borderBottom: "1px solid ".concat(designSystem.designTokens.colorNeutral90),
|
|
509
507
|
textTransform: 'none',
|
|
510
508
|
fontWeight: designSystem.designTokens.fontWeight500,
|
|
511
|
-
padding: _concatInstanceProperty__default["default"](
|
|
509
|
+
padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.spacing30),
|
|
512
510
|
'&:empty': {
|
|
513
511
|
padding: 0
|
|
514
512
|
}
|
|
@@ -517,7 +515,7 @@ const groupHeadingStyles = () => base => {
|
|
|
517
515
|
const containerStyles = () => (base, state) => {
|
|
518
516
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
519
517
|
fontFamily: 'inherit',
|
|
520
|
-
minHeight: designSystem.designTokens.
|
|
518
|
+
minHeight: designSystem.designTokens.heightForInputAsSmall,
|
|
521
519
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
522
520
|
borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
|
|
523
521
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
@@ -534,50 +532,50 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
|
|
|
534
532
|
const multiValueStyles = () => base => {
|
|
535
533
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
536
534
|
display: 'flex',
|
|
537
|
-
alignItems:
|
|
538
|
-
height:
|
|
539
|
-
backgroundColor: designSystem.designTokens.
|
|
535
|
+
alignItems: 'center',
|
|
536
|
+
height: '32px',
|
|
537
|
+
backgroundColor: designSystem.designTokens.colorNeutral95,
|
|
540
538
|
padding: '0',
|
|
541
|
-
border: designSystem.designTokens.
|
|
539
|
+
border: "1px solid ".concat(designSystem.designTokens.colorNeutral85)
|
|
542
540
|
});
|
|
543
541
|
};
|
|
544
542
|
const multiValueLabelStyles = props => base => {
|
|
545
|
-
var
|
|
543
|
+
var _context6, _context7;
|
|
546
544
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
547
|
-
fontSize: designSystem.designTokens.
|
|
545
|
+
fontSize: designSystem.designTokens.fontSize30,
|
|
548
546
|
color: (() => {
|
|
549
547
|
if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
550
548
|
if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
551
549
|
return base.color;
|
|
552
550
|
})(),
|
|
553
|
-
padding: _concatInstanceProperty__default["default"](
|
|
554
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
551
|
+
padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
|
|
552
|
+
borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadius2),
|
|
555
553
|
border: 'none',
|
|
556
554
|
borderWidth: '1px 0 1px 1px',
|
|
557
555
|
'&:last-child': {
|
|
558
|
-
borderRadius: designSystem.designTokens.
|
|
556
|
+
borderRadius: designSystem.designTokens.borderRadius2,
|
|
559
557
|
borderWidth: designSystem.designTokens.borderWidth1
|
|
560
558
|
}
|
|
561
559
|
});
|
|
562
560
|
};
|
|
563
561
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
564
|
-
var
|
|
562
|
+
var _context8;
|
|
565
563
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
566
|
-
borderColor: designSystem.designTokens.
|
|
564
|
+
borderColor: designSystem.designTokens.colorNeutral,
|
|
567
565
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
568
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
566
|
+
borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context8, designSystem.designTokens.borderRadius2, " 0"),
|
|
569
567
|
borderStyle: 'none',
|
|
570
568
|
borderWidth: '0',
|
|
571
569
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
572
|
-
backgroundColor: designSystem.designTokens.
|
|
570
|
+
backgroundColor: designSystem.designTokens.colorNeutral95,
|
|
573
571
|
'svg *': {
|
|
574
572
|
fill: props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : ''
|
|
575
573
|
},
|
|
576
574
|
'&:hover, &:focus': {
|
|
577
|
-
borderColor: designSystem.designTokens.
|
|
578
|
-
backgroundColor: designSystem.designTokens.
|
|
575
|
+
borderColor: designSystem.designTokens.colorWarning,
|
|
576
|
+
backgroundColor: designSystem.designTokens.colorNeutral95,
|
|
579
577
|
'svg *': {
|
|
580
|
-
fill: designSystem.designTokens.
|
|
578
|
+
fill: designSystem.designTokens.colorError
|
|
581
579
|
}
|
|
582
580
|
}
|
|
583
581
|
});
|
|
@@ -611,7 +609,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
611
609
|
};
|
|
612
610
|
|
|
613
611
|
// NOTE: This string will be replaced on build time with the package version.
|
|
614
|
-
var version = "
|
|
612
|
+
var version = "18.0.0";
|
|
615
613
|
|
|
616
614
|
exports.ClearIndicator = ClearIndicator$1;
|
|
617
615
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|
|
@@ -42,7 +42,7 @@ const ClearIndicator = props => {
|
|
|
42
42
|
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
|
|
43
43
|
return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
44
44
|
ref: ref,
|
|
45
|
-
css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.
|
|
45
|
+
css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.colorNeutral40, ";:hover svg *{fill:", designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbmV4cG9ydCB0eXBlIFRDbGVhckluZGljYXRvclByb3BzID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw0MH07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuY29sb3JFcnJvcn07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
|
|
46
46
|
style: getStyles('clearIndicator', props),
|
|
47
47
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
48
48
|
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
@@ -124,7 +124,7 @@ const WrapperWithIcon = props => {
|
|
|
124
124
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
125
125
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
126
126
|
// spacingsXs is the margin between the icon and value
|
|
127
|
-
css: /*#__PURE__*/css("margin-left:", designTokens.
|
|
127
|
+
css: /*#__PURE__*/css("margin-left:", designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCwgdHlwZSBSZWFjdEVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7XG4gIGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMsXG4gIHR5cGUgU2luZ2xlVmFsdWVQcm9wcyxcbiAgdHlwZSBQbGFjZWhvbGRlclByb3BzLFxufSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuXG5leHBvcnQgdHlwZSBUV3JhcHBlcldpdGhJY29uU2VsZWN0UHJvcHMgPSB7XG4gIGljb25MZWZ0PzogUmVhY3RFbGVtZW50O1xufTtcbmV4cG9ydCB0eXBlIFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzID0ge1xuICB0eXBlOiAnc2luZ2xlVmFsdWUnO1xuICBzZWxlY3RQcm9wcz86IFRXcmFwcGVyV2l0aEljb25TZWxlY3RQcm9wcztcbn0gJiBTaW5nbGVWYWx1ZVByb3BzO1xuZXhwb3J0IHR5cGUgVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdwbGFjZWhvbGRlcic7XG4gIHNlbGVjdFByb3BzPzogVFdyYXBwZXJXaXRoSWNvblNlbGVjdFByb3BzO1xufSAmIFBsYWNlaG9sZGVyUHJvcHM7XG5leHBvcnQgdHlwZSBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9XG4gIFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBUU2luZ2xlVmFsdWVXcmFwcGVyV2l0aEljb25Qcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFRQbGFjZWhvbGRlcldyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBuZXZlcjtcbmV4cG9ydCB0eXBlIFREZWZhdWx0Q29tcG9uZW50PFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4gPSAoXG4gIHByb3BzOiBUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJ1xuICAgID8gU2luZ2xlVmFsdWVQcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFBsYWNlaG9sZGVyUHJvcHNcbiAgICA6IG5ldmVyXG4pID0+IEpTWC5FbGVtZW50O1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4oXG4gIHR5cGU6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlsndHlwZSddXG4pOiBURGVmYXVsdENvbXBvbmVudDxUeXBlPiB8IG51bGwgPT4ge1xuICBpZiAodHlwZSA9PT0gJ3NpbmdsZVZhbHVlJylcbiAgICByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuU2luZ2xlVmFsdWUgYXMgVERlZmF1bHRDb21wb25lbnQ8VHlwZT47XG4gIGlmICh0eXBlID09PSAncGxhY2Vob2xkZXInKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5QbGFjZWhvbGRlciBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgcmV0dXJuIG51bGw7XG59O1xuXG5jb25zdCBXcmFwcGVyV2l0aEljb24gPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgcHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlxuKSA9PiB7XG4gIGNvbnN0IERlZmF1bHRDb21wb25lbnQgPSBnZXREZWZhdWx0Q29tcG9uZW50PFR5cGU+KHByb3BzLnR5cGUpO1xuXG4gIGlmICghRGVmYXVsdENvbXBvbmVudCkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge3Byb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0ICYmXG4gICAgICAgIGNsb25lRWxlbWVudChwcm9wcy5zZWxlY3RQcm9wcy5pY29uTGVmdCwge1xuICAgICAgICAgIHNpemU6ICdiaWcnLFxuICAgICAgICB9KX1cbiAgICAgIDxzcGFuXG4gICAgICAgIC8vIHJlYWN0LXNlbGVjdCB1c2VzIGFic29sdXRlIHBvc2l0aW9uaW5nIGZvciB0aGUgU2luZ2xlVmFsdWUvUGxhY2Vob2xkZXJcbiAgICAgICAgLy8gdGhlIGljb24gaGFzIGEgZml4ZWQgc2l6ZSBvZiAyNHB4ICg9PSBTcGFjaW5nc1hsKSwgdGhlcmVmb3JlIHdlIGNhbiB1c2UgYSBmaXhlZCBtYXJnaW5cbiAgICAgICAgLy8gc3BhY2luZ3NYcyBpcyB0aGUgbWFyZ2luIGJldHdlZW4gdGhlIGljb24gYW5kIHZhbHVlXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7LyogQHRzLWlnbm9yZSAqL31cbiAgICAgICAgPERlZmF1bHRDb21wb25lbnQgey4uLnByb3BzfSAvPlxuICAgICAgPC9zcGFuPlxuICAgIDwvPlxuICApO1xufTtcblxuV3JhcHBlcldpdGhJY29uLmRpc3BsYXlOYW1lID0gJ1dyYXBwZXJXaXRoSWNvbic7XG5cbmV4cG9ydCBkZWZhdWx0IFdyYXBwZXJXaXRoSWNvbjtcblxuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdzaW5nbGVWYWx1ZSc+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwnc2luZ2xlVmFsdWUnPiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczwncGxhY2Vob2xkZXInPikgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb248J3BsYWNlaG9sZGVyJz4gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
|
|
128
128
|
children: jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
129
129
|
})]
|
|
130
130
|
});
|
|
@@ -234,7 +234,7 @@ var messages = defineMessages({
|
|
|
234
234
|
});
|
|
235
235
|
|
|
236
236
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
237
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
237
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context9, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
238
238
|
const getHorizontalConstraintValue = value => {
|
|
239
239
|
switch (value) {
|
|
240
240
|
case 'auto':
|
|
@@ -263,7 +263,7 @@ const getInputBorderColor = (props, state) => {
|
|
|
263
263
|
return designTokens.borderColorForInputWhenDisabled;
|
|
264
264
|
}
|
|
265
265
|
if (props.isReadOnly) {
|
|
266
|
-
return designTokens.
|
|
266
|
+
return designTokens.colorNeutral95;
|
|
267
267
|
}
|
|
268
268
|
if (state.isFocused) {
|
|
269
269
|
return designTokens.borderColorForInputWhenFocused;
|
|
@@ -284,7 +284,7 @@ const getHoverInputBorderColor = props => {
|
|
|
284
284
|
return designTokens.borderColorForInputWhenDisabled;
|
|
285
285
|
}
|
|
286
286
|
if (props.isReadOnly) {
|
|
287
|
-
return designTokens.
|
|
287
|
+
return designTokens.colorNeutral95;
|
|
288
288
|
}
|
|
289
289
|
if (props.hasError) {
|
|
290
290
|
return designTokens.borderColorForInputWhenError;
|
|
@@ -297,12 +297,12 @@ const getHoverInputBorderColor = props => {
|
|
|
297
297
|
const controlStyles = props => (base, state) => {
|
|
298
298
|
var _context;
|
|
299
299
|
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
|
|
300
|
-
fontSize: designTokens.
|
|
300
|
+
fontSize: designTokens.fontSize30,
|
|
301
301
|
backgroundColor: getInputBackgroundColor(props),
|
|
302
302
|
borderColor: getInputBorderColor(props, state),
|
|
303
303
|
borderWidth: (() => {
|
|
304
304
|
if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
|
|
305
|
-
return designTokens.
|
|
305
|
+
return designTokens.borderWidth2;
|
|
306
306
|
}
|
|
307
307
|
return designTokens.borderWidth1;
|
|
308
308
|
})(),
|
|
@@ -313,7 +313,7 @@ const controlStyles = props => (base, state) => {
|
|
|
313
313
|
if (props.isReadOnly) return 'default';
|
|
314
314
|
return 'pointer';
|
|
315
315
|
})(),
|
|
316
|
-
padding: props.appearance === 'quiet' ?
|
|
316
|
+
padding: props.appearance === 'quiet' ? designTokens.paddingForInputAsQuiet : designTokens.paddingForInput,
|
|
317
317
|
transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
|
|
318
318
|
outline: 0,
|
|
319
319
|
boxShadow: 'none'
|
|
@@ -345,16 +345,17 @@ const controlStyles = props => (base, state) => {
|
|
|
345
345
|
};
|
|
346
346
|
const menuStyles = props => base => {
|
|
347
347
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
348
|
-
border: "1px solid ".concat(designTokens.
|
|
348
|
+
border: "1px solid ".concat(designTokens.colorSurface),
|
|
349
349
|
borderRadius: designTokens.borderRadiusForInput,
|
|
350
350
|
backgroundColor: designTokens.backgroundColorForInput,
|
|
351
|
-
boxShadow:
|
|
352
|
-
fontSize: designTokens.
|
|
351
|
+
boxShadow: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
|
|
352
|
+
fontSize: designTokens.fontSize30,
|
|
353
353
|
fontFamily: 'inherit',
|
|
354
354
|
margin: "".concat(designTokens.spacing10, " 0 0 0"),
|
|
355
355
|
borderColor: (() => {
|
|
356
|
-
if (props.hasError
|
|
357
|
-
|
|
356
|
+
if (props.hasError || props.hasWarning) {
|
|
357
|
+
return designTokens.colorSurface;
|
|
358
|
+
}
|
|
358
359
|
return base.borderColorForInput;
|
|
359
360
|
})(),
|
|
360
361
|
width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
|
|
@@ -375,36 +376,33 @@ const dropdownIndicatorStyles = props => base => {
|
|
|
375
376
|
color: designTokens.fontColorForInput,
|
|
376
377
|
margin: '0',
|
|
377
378
|
padding: '0',
|
|
378
|
-
marginLeft: designTokens.
|
|
379
|
+
marginLeft: designTokens.spacing20,
|
|
379
380
|
fill: (() => {
|
|
380
381
|
if (props.isDisabled || props.isReadOnly) return designTokens.fontColorForInputWhenDisabled;
|
|
381
|
-
if (props.hasError) return designTokens.
|
|
382
|
-
if (props.hasWarning) return designTokens.
|
|
383
|
-
return designTokens.
|
|
382
|
+
if (props.hasError) return designTokens.colorError;
|
|
383
|
+
if (props.hasWarning) return designTokens.colorWarning;
|
|
384
|
+
return designTokens.colorNeutral60;
|
|
384
385
|
})()
|
|
385
386
|
});
|
|
386
387
|
};
|
|
387
388
|
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
388
389
|
display: 'flex',
|
|
389
390
|
padding: 0,
|
|
390
|
-
marginLeft: designTokens.
|
|
391
|
+
marginLeft: designTokens.spacing20
|
|
391
392
|
});
|
|
392
393
|
const menuListStyles = () => base => {
|
|
393
394
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
394
|
-
padding: designTokens.
|
|
395
|
+
padding: "".concat(designTokens.spacing10, " 0"),
|
|
395
396
|
borderRadius: designTokens.borderRadiusForInput,
|
|
396
397
|
backgroundColor: designTokens.backgroundColorForInput
|
|
397
398
|
});
|
|
398
399
|
};
|
|
399
400
|
const optionStyles = () => (base, state) => {
|
|
400
|
-
var _context2, _context3;
|
|
401
|
+
var _context2, _context3, _context4;
|
|
401
402
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
402
403
|
transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
paddingTop: designTokens.paddingTopForSelectInputOptions,
|
|
406
|
-
paddingBottom: designTokens.paddingBottomForSelectInputOptions,
|
|
407
|
-
lineHeight: designTokens.lineHeightForSelectInputOptions,
|
|
404
|
+
padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing30),
|
|
405
|
+
lineHeight: designTokens.lineHeight40,
|
|
408
406
|
color: (() => {
|
|
409
407
|
if (!state.isDisabled) return designTokens.fontColorForInput;
|
|
410
408
|
if (state.isSelected) return designTokens.fontColorForInput;
|
|
@@ -412,7 +410,7 @@ const optionStyles = () => (base, state) => {
|
|
|
412
410
|
})(),
|
|
413
411
|
backgroundColor: (() => {
|
|
414
412
|
if (state.isSelected) return designTokens.backgroundColorForInputWhenSelected;
|
|
415
|
-
if (state.isFocused) return designTokens.
|
|
413
|
+
if (state.isFocused) return designTokens.colorNeutral98;
|
|
416
414
|
return base.backgroundColor;
|
|
417
415
|
})(),
|
|
418
416
|
'&:active': {
|
|
@@ -429,13 +427,13 @@ const placeholderStyles = props => base => {
|
|
|
429
427
|
color: (() => {
|
|
430
428
|
if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
|
|
431
429
|
if (props.hasError) {
|
|
432
|
-
return designTokens.
|
|
430
|
+
return designTokens.colorError;
|
|
433
431
|
}
|
|
434
432
|
if (props.hasWarning) {
|
|
435
|
-
return designTokens.
|
|
433
|
+
return designTokens.colorWarning;
|
|
436
434
|
}
|
|
437
435
|
}
|
|
438
|
-
return designTokens.
|
|
436
|
+
return designTokens.colorNeutral60;
|
|
439
437
|
})(),
|
|
440
438
|
width: '100%',
|
|
441
439
|
overflow: 'hidden',
|
|
@@ -454,7 +452,7 @@ const valueContainerStyles = props => base => {
|
|
|
454
452
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
455
453
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
456
454
|
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
|
|
457
|
-
fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.
|
|
455
|
+
fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60
|
|
458
456
|
});
|
|
459
457
|
};
|
|
460
458
|
const singleValueStyles = props => base => {
|
|
@@ -466,8 +464,8 @@ const singleValueStyles = props => base => {
|
|
|
466
464
|
if (props.isReadOnly) {
|
|
467
465
|
return designTokens.fontColorForInputWhenReadonly;
|
|
468
466
|
}
|
|
469
|
-
if (props.hasError) return designTokens.
|
|
470
|
-
if (props.hasWarning) return designTokens.
|
|
467
|
+
if (props.hasError) return designTokens.colorError;
|
|
468
|
+
if (props.hasWarning) return designTokens.colorWarning;
|
|
471
469
|
return designTokens.fontColorForInput;
|
|
472
470
|
})()
|
|
473
471
|
});
|
|
@@ -476,19 +474,19 @@ const groupStyles = props => base => {
|
|
|
476
474
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
477
475
|
padding: 0,
|
|
478
476
|
'&:not(:first-of-type)': {
|
|
479
|
-
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.
|
|
477
|
+
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.colorNeutral90) : base.borderTop
|
|
480
478
|
}
|
|
481
479
|
});
|
|
482
480
|
};
|
|
483
481
|
const groupHeadingStyles = () => base => {
|
|
484
|
-
var
|
|
482
|
+
var _context5;
|
|
485
483
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
486
484
|
color: designTokens.fontColorForInputWhenReadonly,
|
|
487
|
-
fontSize: designTokens.
|
|
488
|
-
borderBottom: "1px solid ".concat(designTokens.
|
|
485
|
+
fontSize: designTokens.fontSize30,
|
|
486
|
+
borderBottom: "1px solid ".concat(designTokens.colorNeutral90),
|
|
489
487
|
textTransform: 'none',
|
|
490
488
|
fontWeight: designTokens.fontWeight500,
|
|
491
|
-
padding: _concatInstanceProperty(
|
|
489
|
+
padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.spacing30),
|
|
492
490
|
'&:empty': {
|
|
493
491
|
padding: 0
|
|
494
492
|
}
|
|
@@ -497,7 +495,7 @@ const groupHeadingStyles = () => base => {
|
|
|
497
495
|
const containerStyles = () => (base, state) => {
|
|
498
496
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
499
497
|
fontFamily: 'inherit',
|
|
500
|
-
minHeight: designTokens.
|
|
498
|
+
minHeight: designTokens.heightForInputAsSmall,
|
|
501
499
|
borderRadius: designTokens.borderRadiusForInput,
|
|
502
500
|
borderColor: state.isFocused ? designTokens.borderColorForInputWhenFocused : base.borderColor,
|
|
503
501
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
@@ -514,50 +512,50 @@ const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base),
|
|
|
514
512
|
const multiValueStyles = () => base => {
|
|
515
513
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
516
514
|
display: 'flex',
|
|
517
|
-
alignItems:
|
|
518
|
-
height:
|
|
519
|
-
backgroundColor: designTokens.
|
|
515
|
+
alignItems: 'center',
|
|
516
|
+
height: '32px',
|
|
517
|
+
backgroundColor: designTokens.colorNeutral95,
|
|
520
518
|
padding: '0',
|
|
521
|
-
border: designTokens.
|
|
519
|
+
border: "1px solid ".concat(designTokens.colorNeutral85)
|
|
522
520
|
});
|
|
523
521
|
};
|
|
524
522
|
const multiValueLabelStyles = props => base => {
|
|
525
|
-
var
|
|
523
|
+
var _context6, _context7;
|
|
526
524
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
527
|
-
fontSize: designTokens.
|
|
525
|
+
fontSize: designTokens.fontSize30,
|
|
528
526
|
color: (() => {
|
|
529
527
|
if (props.isDisabled) return designTokens.fontColorForInputWhenDisabled;
|
|
530
528
|
if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
|
|
531
529
|
return base.color;
|
|
532
530
|
})(),
|
|
533
|
-
padding: _concatInstanceProperty(
|
|
534
|
-
borderRadius: _concatInstanceProperty(
|
|
531
|
+
padding: _concatInstanceProperty(_context6 = "".concat(designTokens.spacing10, " ")).call(_context6, designTokens.spacing20),
|
|
532
|
+
borderRadius: _concatInstanceProperty(_context7 = "".concat(designTokens.borderRadius2, " 0 0 ")).call(_context7, designTokens.borderRadius2),
|
|
535
533
|
border: 'none',
|
|
536
534
|
borderWidth: '1px 0 1px 1px',
|
|
537
535
|
'&:last-child': {
|
|
538
|
-
borderRadius: designTokens.
|
|
536
|
+
borderRadius: designTokens.borderRadius2,
|
|
539
537
|
borderWidth: designTokens.borderWidth1
|
|
540
538
|
}
|
|
541
539
|
});
|
|
542
540
|
};
|
|
543
541
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
544
|
-
var
|
|
542
|
+
var _context8;
|
|
545
543
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
546
|
-
borderColor: designTokens.
|
|
544
|
+
borderColor: designTokens.colorNeutral,
|
|
547
545
|
padding: "0 ".concat(designTokens.spacing10),
|
|
548
|
-
borderRadius: _concatInstanceProperty(
|
|
546
|
+
borderRadius: _concatInstanceProperty(_context8 = "0 ".concat(designTokens.borderRadius2, " ")).call(_context8, designTokens.borderRadius2, " 0"),
|
|
549
547
|
borderStyle: 'none',
|
|
550
548
|
borderWidth: '0',
|
|
551
549
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
552
|
-
backgroundColor: designTokens.
|
|
550
|
+
backgroundColor: designTokens.colorNeutral95,
|
|
553
551
|
'svg *': {
|
|
554
552
|
fill: props.isReadOnly ? designTokens.fontColorForInputWhenReadonly : ''
|
|
555
553
|
},
|
|
556
554
|
'&:hover, &:focus': {
|
|
557
|
-
borderColor: designTokens.
|
|
558
|
-
backgroundColor: designTokens.
|
|
555
|
+
borderColor: designTokens.colorWarning,
|
|
556
|
+
backgroundColor: designTokens.colorNeutral95,
|
|
559
557
|
'svg *': {
|
|
560
|
-
fill: designTokens.
|
|
558
|
+
fill: designTokens.colorError
|
|
561
559
|
}
|
|
562
560
|
}
|
|
563
561
|
});
|
|
@@ -594,6 +592,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
594
592
|
};
|
|
595
593
|
|
|
596
594
|
// NOTE: This string will be replaced on build time with the package version.
|
|
597
|
-
var version = "
|
|
595
|
+
var version = "18.0.0";
|
|
598
596
|
|
|
599
597
|
export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };
|
|
@@ -36,20 +36,20 @@ export default function createSelectStyles(props: TProps): {
|
|
|
36
36
|
borderColor: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | null;
|
|
37
37
|
};
|
|
38
38
|
'&:hover': {
|
|
39
|
-
borderColor: "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-input-as-quiet, transparent)"
|
|
39
|
+
borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-input-as-quiet, transparent)";
|
|
40
40
|
backgroundColor: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))" | null;
|
|
41
41
|
};
|
|
42
42
|
pointerEvents: string;
|
|
43
43
|
color: string | undefined;
|
|
44
44
|
display?: string | undefined;
|
|
45
|
-
fontSize: "var(--font-size-
|
|
45
|
+
fontSize: "var(--font-size-30, 1rem)";
|
|
46
46
|
backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-as-quiet, transparent)";
|
|
47
|
-
borderColor: "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-as-quiet, transparent)"
|
|
48
|
-
borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-
|
|
47
|
+
borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-as-quiet, transparent)";
|
|
48
|
+
borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)";
|
|
49
49
|
borderRadius: "var(--border-radius-for-input, 4px)";
|
|
50
50
|
minHeight: "var(--height-for-input, 40px)";
|
|
51
51
|
cursor: string;
|
|
52
|
-
padding:
|
|
52
|
+
padding: "var(--padding-for-input, 0 var(--spacing-30))" | "var(--padding-for-input-as-quiet, 0 var(--spacing-20))";
|
|
53
53
|
transition: string;
|
|
54
54
|
outline: number;
|
|
55
55
|
boxShadow: string;
|
|
@@ -61,8 +61,8 @@ export default function createSelectStyles(props: TProps): {
|
|
|
61
61
|
border: string;
|
|
62
62
|
borderRadius: "var(--border-radius-for-input, 4px)";
|
|
63
63
|
backgroundColor: "var(--background-color-for-input, #fff)";
|
|
64
|
-
boxShadow:
|
|
65
|
-
fontSize: "var(--font-size-
|
|
64
|
+
boxShadow: string;
|
|
65
|
+
fontSize: "var(--font-size-30, 1rem)";
|
|
66
66
|
fontFamily: string;
|
|
67
67
|
margin: string;
|
|
68
68
|
borderColor: string | undefined;
|
|
@@ -93,8 +93,8 @@ export default function createSelectStyles(props: TProps): {
|
|
|
93
93
|
color: "var(--font-color-for-input, #1a1a1a)";
|
|
94
94
|
margin: string;
|
|
95
95
|
padding: string;
|
|
96
|
-
marginLeft: "var(--
|
|
97
|
-
fill: "var(--
|
|
96
|
+
marginLeft: "var(--spacing-20, 8px)";
|
|
97
|
+
fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
|
|
98
98
|
fontColorForInput?: string | undefined;
|
|
99
99
|
borderColorForInput?: string | undefined;
|
|
100
100
|
backgroundColor?: string | undefined;
|
|
@@ -106,7 +106,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
106
106
|
clearIndicator: (base: TBase) => {
|
|
107
107
|
display: string;
|
|
108
108
|
padding: number;
|
|
109
|
-
marginLeft: "var(--
|
|
109
|
+
marginLeft: "var(--spacing-20, 8px)";
|
|
110
110
|
fontColorForInput?: string | undefined;
|
|
111
111
|
borderColorForInput?: string | undefined;
|
|
112
112
|
color?: string | undefined;
|
|
@@ -117,7 +117,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
117
117
|
pointerEvents?: string | undefined;
|
|
118
118
|
};
|
|
119
119
|
menuList: (base: TBase) => {
|
|
120
|
-
padding:
|
|
120
|
+
padding: string;
|
|
121
121
|
borderRadius: "var(--border-radius-for-input, 4px)";
|
|
122
122
|
backgroundColor: "var(--background-color-for-input, #fff)";
|
|
123
123
|
fontColorForInput?: string | undefined;
|
|
@@ -141,11 +141,11 @@ export default function createSelectStyles(props: TProps): {
|
|
|
141
141
|
};
|
|
142
142
|
multiValue: (base: TBase) => {
|
|
143
143
|
display: string;
|
|
144
|
-
alignItems:
|
|
145
|
-
height:
|
|
146
|
-
backgroundColor: "var(--
|
|
144
|
+
alignItems: string;
|
|
145
|
+
height: string;
|
|
146
|
+
backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
|
|
147
147
|
padding: string;
|
|
148
|
-
border:
|
|
148
|
+
border: string;
|
|
149
149
|
fontColorForInput?: string | undefined;
|
|
150
150
|
borderColorForInput?: string | undefined;
|
|
151
151
|
color?: string | undefined;
|
|
@@ -155,14 +155,14 @@ export default function createSelectStyles(props: TProps): {
|
|
|
155
155
|
pointerEvents?: string | undefined;
|
|
156
156
|
};
|
|
157
157
|
multiValueLabel: (base: TBase) => {
|
|
158
|
-
fontSize: "var(--font-size-
|
|
158
|
+
fontSize: "var(--font-size-30, 1rem)";
|
|
159
159
|
color: string | undefined;
|
|
160
160
|
padding: string;
|
|
161
161
|
borderRadius: string;
|
|
162
162
|
border: string;
|
|
163
163
|
borderWidth: string;
|
|
164
164
|
'&:last-child': {
|
|
165
|
-
borderRadius: "var(--border-radius-
|
|
165
|
+
borderRadius: "var(--border-radius-2, 2px)";
|
|
166
166
|
borderWidth: "var(--border-width-1, 1px)";
|
|
167
167
|
};
|
|
168
168
|
fontColorForInput?: string | undefined;
|
|
@@ -174,21 +174,21 @@ export default function createSelectStyles(props: TProps): {
|
|
|
174
174
|
pointerEvents?: string | undefined;
|
|
175
175
|
};
|
|
176
176
|
multiValueRemove: (base: TBase, state: TState) => {
|
|
177
|
-
borderColor: "var(--
|
|
177
|
+
borderColor: "var(--color-neutral, hsl(232, 18%, 80%))";
|
|
178
178
|
padding: string;
|
|
179
179
|
borderRadius: string;
|
|
180
180
|
borderStyle: string;
|
|
181
181
|
borderWidth: string;
|
|
182
182
|
pointerEvents: string | undefined;
|
|
183
|
-
backgroundColor: "var(--
|
|
183
|
+
backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
|
|
184
184
|
'svg *': {
|
|
185
185
|
fill: string;
|
|
186
186
|
};
|
|
187
187
|
'&:hover, &:focus': {
|
|
188
|
-
borderColor: "var(--
|
|
189
|
-
backgroundColor: "var(--
|
|
188
|
+
borderColor: "var(--color-warning, #f16d0e)";
|
|
189
|
+
backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
|
|
190
190
|
'svg *': {
|
|
191
|
-
fill: "var(--
|
|
191
|
+
fill: "var(--color-error, #e60050)";
|
|
192
192
|
};
|
|
193
193
|
};
|
|
194
194
|
fontColorForInput?: string | undefined;
|
|
@@ -204,11 +204,8 @@ export default function createSelectStyles(props: TProps): {
|
|
|
204
204
|
};
|
|
205
205
|
option: (base: TBase, state: TState) => {
|
|
206
206
|
transition: string;
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
paddingTop: "var(--padding-top-for-select-input-options, 8px)";
|
|
210
|
-
paddingBottom: "var(--padding-bottom-for-select-input-options, 8px)";
|
|
211
|
-
lineHeight: "var(--line-height-for-select-input-options, 1.625rem)";
|
|
207
|
+
padding: string;
|
|
208
|
+
lineHeight: "var(--line-height-40, 1.625rem)";
|
|
212
209
|
color: string | undefined;
|
|
213
210
|
backgroundColor: string | undefined;
|
|
214
211
|
'&:active': {
|
|
@@ -223,7 +220,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
223
220
|
pointerEvents?: string | undefined;
|
|
224
221
|
};
|
|
225
222
|
placeholder: (base: TBase) => {
|
|
226
|
-
color: "var(--
|
|
223
|
+
color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)";
|
|
227
224
|
width: string;
|
|
228
225
|
overflow: string;
|
|
229
226
|
whiteSpace: string;
|
|
@@ -242,7 +239,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
242
239
|
backgroundColor: string;
|
|
243
240
|
overflow: string;
|
|
244
241
|
display: string;
|
|
245
|
-
fill: "var(--
|
|
242
|
+
fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
|
|
246
243
|
fontColorForInput?: string | undefined;
|
|
247
244
|
borderColorForInput?: string | undefined;
|
|
248
245
|
color?: string | undefined;
|
|
@@ -252,7 +249,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
252
249
|
pointerEvents?: string | undefined;
|
|
253
250
|
};
|
|
254
251
|
singleValue: (base: TBase) => {
|
|
255
|
-
color: "var(--
|
|
252
|
+
color: "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
|
|
256
253
|
fontColorForInput?: string | undefined;
|
|
257
254
|
borderColorForInput?: string | undefined;
|
|
258
255
|
backgroundColor?: string | undefined;
|
|
@@ -277,7 +274,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
277
274
|
};
|
|
278
275
|
groupHeading: (base: TBase) => {
|
|
279
276
|
color: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
|
|
280
|
-
fontSize: "var(--font-size-
|
|
277
|
+
fontSize: "var(--font-size-30, 1rem)";
|
|
281
278
|
borderBottom: string;
|
|
282
279
|
textTransform: string;
|
|
283
280
|
fontWeight: "var(--font-weight-500, 500)";
|
|
@@ -295,7 +292,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
295
292
|
};
|
|
296
293
|
container: (base: TBase, state: TState) => {
|
|
297
294
|
fontFamily: string;
|
|
298
|
-
minHeight: "var(--
|
|
295
|
+
minHeight: "var(--height-for-input-as-small, 32px)";
|
|
299
296
|
borderRadius: "var(--border-radius-for-input, 4px)";
|
|
300
297
|
borderColor: string | undefined;
|
|
301
298
|
boxShadow: string | undefined;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/select-utils",
|
|
3
3
|
"description": "Utilities for working with select components.",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "18.0.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/icons": "
|
|
27
|
-
"@commercetools-uikit/spacings": "
|
|
28
|
-
"@commercetools-uikit/text": "
|
|
29
|
-
"@commercetools-uikit/utils": "
|
|
24
|
+
"@commercetools-uikit/accessible-button": "18.0.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "18.0.0",
|
|
26
|
+
"@commercetools-uikit/icons": "18.0.0",
|
|
27
|
+
"@commercetools-uikit/spacings": "18.0.0",
|
|
28
|
+
"@commercetools-uikit/text": "18.0.0",
|
|
29
|
+
"@commercetools-uikit/utils": "18.0.0",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"@emotion/styled": "^11.10.5",
|
|
32
32
|
"lodash": "4.17.21",
|