@royaloperahouse/chord 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.1.2]
+- TextField: include optional width param
+
 ## [2.1.1]
 - AnchorTabBar: change grid, to move tabs to the center
 

package/dist/chord.cjs.development.js

@@ -3395,35 +3395,38 @@ var textStyles = /*#__PURE__*/styled.css(_templateObject2$b || (_templateObject2
   var theme = _ref3.theme;
   return theme.spacing[7];
 });
-var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  width: 196px;\n  height: 48px;\n  padding: 0px 20px;\n\n  border: 1px solid ", ";\n  outline: none;\n\n  ", "\n\n  :disabled {\n    background-color: ", ";\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  :focus {\n    outline: ", "};\n  }\n"])), textStyles, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.darkgrey;
+var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  width: ", ";\n  height: 48px;\n  padding: 0px 20px;\n\n  border: 1px solid ", ";\n  outline: none;\n\n  ", "\n\n  :disabled {\n    background-color: ", ";\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  :focus {\n    outline: ", "};\n  }\n"])), textStyles, function (_ref4) {
+  var width = _ref4.width;
+  return width ? width + 'px' : '196px';
 }, function (_ref5) {
-  var error = _ref5.error,
-      theme = _ref5.theme;
+  var theme = _ref5.theme;
+  return theme.colors.darkgrey;
+}, function (_ref6) {
+  var error = _ref6.error,
+      theme = _ref6.theme;
   if (!error) return;
   return "\n      border: 1px solid " + theme.colors.error + ";\n    ";
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.lightgrey;
 }, function (_ref7) {
-  var darkMode = _ref7.darkMode,
-      theme = _ref7.theme;
-  if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
-  return "3px solid " + theme.colors.lapisLazuli;
-});
-var TextLabel = /*#__PURE__*/styled__default.p(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref8) {
+  var theme = _ref7.theme;
+  return theme.colors.lightgrey;
+}, function (_ref8) {
   var darkMode = _ref8.darkMode,
       theme = _ref8.theme;
-  return darkMode ? theme.colors.white : theme.colors.black;
+  if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
+  return "3px solid " + theme.colors.lapisLazuli;
 });
-var ErrorLabel = /*#__PURE__*/styled__default.p(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref9) {
+var TextLabel = /*#__PURE__*/styled__default.p(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref9) {
   var darkMode = _ref9.darkMode,
       theme = _ref9.theme;
+  return darkMode ? theme.colors.white : theme.colors.black;
+});
+var ErrorLabel = /*#__PURE__*/styled__default.p(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref10) {
+  var darkMode = _ref10.darkMode,
+      theme = _ref10.theme;
   return darkMode ? theme.colors.white : theme.colors.error;
 });
 
-var _excluded$6 = ["label", "error", "darkMode"];
+var _excluded$6 = ["label", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra information around it (i.e. a text label and an error label).
@@ -3468,6 +3471,7 @@ var TextField = function TextField(_ref) {
       error = _ref.error,
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
+      width = _ref.width,
       inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel, {
@@ -3477,7 +3481,8 @@ var TextField = function TextField(_ref) {
     type: "text",
     error: error,
     darkMode: darkMode,
-    "data-testid": "text-field-input"
+    "data-testid": "text-field-input",
+    width: width
   }, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel, {
     darkMode: darkMode,
     "data-testid": "text-field-error-label"