@royaloperahouse/chord 2.2.10-b-chord-development → 2.2.10-c-chord-development
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.
|
@@ -8698,7 +8698,7 @@ function Select(_ref3) {
|
|
|
8698
8698
|
|
|
8699
8699
|
var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
|
|
8700
8700
|
var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
8701
|
-
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right:
|
|
8701
|
+
var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 20px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 10px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
|
|
8702
8702
|
var width = _ref.width;
|
|
8703
8703
|
if (!width) return 'none';
|
|
8704
8704
|
return width + 'px';
|
|
@@ -8774,22 +8774,24 @@ var SelectComponent = function SelectComponent(_ref2) {
|
|
|
8774
8774
|
width = _ref2.width,
|
|
8775
8775
|
_ref2$darkMode = _ref2.darkMode,
|
|
8776
8776
|
darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
|
|
8777
|
-
|
|
8777
|
+
components = _ref2.components,
|
|
8778
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
|
|
8778
8779
|
|
|
8779
8780
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8780
8781
|
label: label,
|
|
8781
8782
|
error: error,
|
|
8782
8783
|
width: width,
|
|
8783
8784
|
darkMode: darkMode
|
|
8784
|
-
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({
|
|
8785
|
-
components: {
|
|
8785
|
+
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
8786
|
+
components: _extends({
|
|
8786
8787
|
DropdownIndicator: DropdownIndicator,
|
|
8787
8788
|
LoadingIndicator: undefined,
|
|
8788
8789
|
IndicatorSeparator: undefined
|
|
8789
|
-
},
|
|
8790
|
+
}, components),
|
|
8790
8791
|
className: "chord-select-container",
|
|
8791
|
-
classNamePrefix: "chord-select"
|
|
8792
|
-
|
|
8792
|
+
classNamePrefix: "chord-select",
|
|
8793
|
+
isSearchable: true
|
|
8794
|
+
})));
|
|
8793
8795
|
};
|
|
8794
8796
|
|
|
8795
8797
|
/**
|
|
@@ -8813,22 +8815,23 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
8813
8815
|
width = _ref.width,
|
|
8814
8816
|
_ref$darkMode = _ref.darkMode,
|
|
8815
8817
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
8816
|
-
|
|
8818
|
+
components = _ref.components,
|
|
8819
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
|
|
8817
8820
|
|
|
8818
8821
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8819
8822
|
label: label,
|
|
8820
8823
|
error: error,
|
|
8821
8824
|
width: width,
|
|
8822
8825
|
darkMode: darkMode
|
|
8823
|
-
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({
|
|
8824
|
-
components: {
|
|
8826
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
|
|
8827
|
+
components: _extends({
|
|
8825
8828
|
DropdownIndicator: DropdownIndicator,
|
|
8826
8829
|
LoadingIndicator: undefined,
|
|
8827
8830
|
IndicatorSeparator: undefined
|
|
8828
|
-
},
|
|
8831
|
+
}, components),
|
|
8829
8832
|
className: "chord-select-container",
|
|
8830
8833
|
classNamePrefix: "chord-select"
|
|
8831
|
-
}
|
|
8834
|
+
})));
|
|
8832
8835
|
};
|
|
8833
8836
|
|
|
8834
8837
|
var _templateObject$1a;
|