@royaloperahouse/chord 2.2.10-b-chord-development → 2.2.10-d-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,26 @@ 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
|
+
_ref2$isSearchable = _ref2.isSearchable,
|
|
8778
|
+
isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
|
|
8779
|
+
components = _ref2.components,
|
|
8780
|
+
selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
|
|
8778
8781
|
|
|
8779
8782
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8780
8783
|
label: label,
|
|
8781
8784
|
error: error,
|
|
8782
8785
|
width: width,
|
|
8783
8786
|
darkMode: darkMode
|
|
8784
|
-
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({
|
|
8785
|
-
components: {
|
|
8787
|
+
}, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
|
|
8788
|
+
components: _extends({
|
|
8786
8789
|
DropdownIndicator: DropdownIndicator,
|
|
8787
8790
|
LoadingIndicator: undefined,
|
|
8788
8791
|
IndicatorSeparator: undefined
|
|
8789
|
-
},
|
|
8792
|
+
}, components),
|
|
8790
8793
|
className: "chord-select-container",
|
|
8791
|
-
classNamePrefix: "chord-select"
|
|
8792
|
-
|
|
8794
|
+
classNamePrefix: "chord-select",
|
|
8795
|
+
isSearchable: isSearchable
|
|
8796
|
+
})));
|
|
8793
8797
|
};
|
|
8794
8798
|
|
|
8795
8799
|
/**
|
|
@@ -8813,22 +8817,23 @@ var SelectComponent$1 = function SelectComponent(_ref) {
|
|
|
8813
8817
|
width = _ref.width,
|
|
8814
8818
|
_ref$darkMode = _ref.darkMode,
|
|
8815
8819
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
8816
|
-
|
|
8820
|
+
components = _ref.components,
|
|
8821
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
|
|
8817
8822
|
|
|
8818
8823
|
return /*#__PURE__*/React__default.createElement(WrapperComponent, {
|
|
8819
8824
|
label: label,
|
|
8820
8825
|
error: error,
|
|
8821
8826
|
width: width,
|
|
8822
8827
|
darkMode: darkMode
|
|
8823
|
-
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({
|
|
8824
|
-
components: {
|
|
8828
|
+
}, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
|
|
8829
|
+
components: _extends({
|
|
8825
8830
|
DropdownIndicator: DropdownIndicator,
|
|
8826
8831
|
LoadingIndicator: undefined,
|
|
8827
8832
|
IndicatorSeparator: undefined
|
|
8828
|
-
},
|
|
8833
|
+
}, components),
|
|
8829
8834
|
className: "chord-select-container",
|
|
8830
8835
|
classNamePrefix: "chord-select"
|
|
8831
|
-
}
|
|
8836
|
+
})));
|
|
8832
8837
|
};
|
|
8833
8838
|
|
|
8834
8839
|
var _templateObject$1a;
|