fontdue-js 0.1.0-alpha23 → 0.1.0-alpha26

package/dist/components/AddToCartBanner/index.js

@@ -31,7 +31,7 @@ const getOrderItemName = item => {
   if (!product) return null;
 
   if (product.__typename === 'FontStyle') {
-    return "".concat(product.family.name, " ").concat(product.name);
+    return `${product.family.name} ${product.name}`;
   }
 
   return item.sku.product.name;
@@ -93,7 +93,7 @@ class AddToCartBannerBase extends _react.default.Component {
       orderItems
     } = this.state;
     if (!order) return null;
-    const itemText = orderItems.length === 1 ? getOrderItemName(orderItems[0]) : "".concat(orderItems.length, " items");
+    const itemText = orderItems.length === 1 ? getOrderItemName(orderItems[0]) : `${orderItems.length} items`;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "add-to-cart-banner",
       "data-active": active

package/dist/components/Cart/AddressFields.js

@@ -49,7 +49,7 @@ class AddressFields extends _react.default.Component {
     const label = (text, field) => {
       const requiredFields = requireAtLeast.concat(countryData && countryData.require || []);
       const suffix = requiredFields.indexOf(field) >= 0 ? ' *' : '';
-      return "".concat(text).concat(suffix);
+      return `${text}${suffix}`;
     };
 
     const countries = viewer.countries.map(({
@@ -192,7 +192,7 @@ class AddressFields extends _react.default.Component {
         vatNumber: v
       }),
       errors: getErrors('vatNumber'),
-      prefix: "".concat(countryData.vatCountryCode, "\u2009")
+      prefix: `${countryData.vatCountryCode} `
     }))) : Array(4).fill(null).map((_, i) => /*#__PURE__*/_react.default.createElement("div", {
       className: "checkout-modal__section",
       key: i

package/dist/components/Cart/CartItem/VariableTextInput.js

@@ -105,7 +105,7 @@ class VariableTextInput extends _react.default.Component {
         value: this.state.value,
         onChange: this.handleChange,
         onBlur: this.handleBlur,
-        placeholder: "Enter ".concat(placeholder)
+        placeholder: `Enter ${placeholder}`
       }, rest)));
     }
 

package/dist/components/Cart/CartItem/index.js

@@ -32,9 +32,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const plural = (count, singularString, pluralString) => {
-  if (count === 1) return "1 ".concat(singularString);
-  const str = pluralString || "".concat(singularString, "s");
-  return "".concat(count, " ").concat(str);
+  if (count === 1) return `1 ${singularString}`;
+  const str = pluralString || `${singularString}s`;
+  return `${count} ${str}`;
 };
 
 const groupSelectionsByLicense = node => {
@@ -57,7 +57,7 @@ const groupSelectionsByLicense = node => {
 
 const productName = product => {
   if (!product) return '??';
-  if (product.__typename === 'FontStyle' && product.family) return "".concat(product.family.name, " ").concat(product.name);
+  if (product.__typename === 'FontStyle' && product.family) return `${product.family.name} ${product.name}`;
   return product.name;
 };
 
@@ -98,7 +98,7 @@ const Variable = ({
     }, ((_selection$variable = selection.variable) === null || _selection$variable === void 0 ? void 0 : _selection$variable.variableType) === 'table' ? option.name : option.amount);
   }))) : /*#__PURE__*/_react.default.createElement(_VariableTextInput.default, {
     defaultValue: selection.variableText,
-    placeholder: "".concat(variable.name, " *"),
+    placeholder: `${variable.name} *`,
     onChange: onChange
   }));
 };

package/dist/components/Cart/CartTotals.js

@@ -79,7 +79,7 @@ const CartTotals = ({
   price: order.taxes,
   "data-line": "taxes"
 }), /*#__PURE__*/_react.default.createElement(PriceBlock, {
-  label: "Total".concat(order.gstIncluded ? ' including GST' : '', ":"),
+  label: `Total${order.gstIncluded ? ' including GST' : ''}:`,
   price: order.total,
   "data-line": "total"
 }));

package/dist/components/Cart/Checkout.js

@@ -373,7 +373,7 @@ class CheckoutFormBase extends _react.default.Component {
     const customProperties = parseCustomProperties(viewer === null || viewer === void 0 ? void 0 : (_viewer$themeConfig = viewer.themeConfig) === null || _viewer$themeConfig === void 0 ? void 0 : _viewer$themeConfig.customProperties);
     const inputStyles = {
       base: {
-        fontFamily: "\"".concat(viewer === null || viewer === void 0 ? void 0 : (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.uiFontName, "\", sans-serif"),
+        fontFamily: `"${viewer === null || viewer === void 0 ? void 0 : (_viewer$settings = viewer.settings) === null || _viewer$settings === void 0 ? void 0 : _viewer$settings.uiFontName}", sans-serif`,
         fontSize: mediaQuery === MOBILE ? '14px' : '36px',
         fontWeight: '500',
         color: customProperties['--primary_text_color'],

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type InputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+declare const Checkbox: React.FC<InputProps>;
+export default Checkbox;

package/dist/components/Checkbox/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+
+var _Icons = require("../Icons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Checkbox = props => {
+  var _config$form$checkbox, _config$form;
+
+  const config = (0, _react.useContext)(_ConfigContext.default);
+  const checkboxStyle = (_config$form$checkbox = (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.checkboxStyle) !== null && _config$form$checkbox !== void 0 ? _config$form$checkbox : 'check';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox"
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    type: "checkbox"
+  }, props)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "checkbox__icon"
+  }, checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null)));
+};
+
+var _default = Checkbox;
+exports.default = _default;

package/dist/components/CouponText/index.js

@@ -32,7 +32,7 @@ const CouponText = ({
   }
 
   if (coupon.type === 'percent') {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, "".concat(coupon.percentAmount, "% off"));
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, `${coupon.percentAmount}% off`);
   }
 
   return null;

package/dist/components/Family/index.js

@@ -87,7 +87,7 @@ class FamilyBase extends _react.default.Component {
       className: "font-family-block__label"
     }, /*#__PURE__*/_react.default.createElement("h3", {
       className: "font-family-block__name"
-    }, isSuperFamily ? "".concat(node.name, " Super family") : node.name), /*#__PURE__*/_react.default.createElement("span", {
+    }, isSuperFamily ? `${node.name} Super family` : node.name), /*#__PURE__*/_react.default.createElement("span", {
       className: "font-family-block__separator"
     }), /*#__PURE__*/_react.default.createElement("p", {
       className: "font-family-block__count"

package/dist/components/FontStyle/index.js

@@ -32,7 +32,7 @@ const FontStyle = ({
     style: fontStyleStyle,
     loaded
   } = (0, _useFontStyle.default)({
-    fontFamily: "".concat(cssFamily, " ").concat(name),
+    fontFamily: `${cssFamily} ${name}`,
     fontWeight: '400',
     fontStyle: 'normal'
   });

package/dist/components/Icons/Align.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function AlignCenter(): JSX.Element;
+export declare function AlignLeft(): JSX.Element;
+export declare function AlignRight(): JSX.Element;

package/dist/components/Icons/Align.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignCenter = AlignCenter;
+exports.AlignLeft = AlignLeft;
+exports.AlignRight = AlignRight;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function AlignCenter() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon",
+    "data-label": "AlignCenter"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "13",
+    fill: "none",
+    viewBox: "0 0 18 13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M0 4h18v1H0V4zM2 0h14.078v1H2V0zM2.067 8H16v1H2.067V8zM3 12h12.079v1H3v-1z",
+    clipRule: "evenodd"
+  })));
+}
+
+function AlignLeft() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon",
+    "data-label": "AlignLeft"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "19",
+    height: "13",
+    fill: "none",
+    viewBox: "0 0 19 13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M0 0h14.079v1H0V0zM0 4h18.078v1H0V4zM0 8h16.078v1H0V8zM0 12h14.079v1H0v-1z",
+    clipRule: "evenodd"
+  })));
+}
+
+function AlignRight() {
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "icon",
+    "data-label": "AlignRight"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "19",
+    height: "13",
+    fill: "none",
+    viewBox: "0 0 19 13"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    d: "M3 0h15v1H3V0zM3.47 12H18v1H3.47v-1zM.067 4H18v1H.067V4zM2.067 8H18v1H2.067V8z",
+    clipRule: "evenodd"
+  })));
+}

package/dist/components/Price/index.js

@@ -42,7 +42,7 @@ const formatMoney = (priceInCents, format, currency) => {
     // fallback for browsers without support for Intl.NumberFormat
     const symbol = (_currencySymbols$curr = currencySymbols[currency]) !== null && _currencySymbols$curr !== void 0 ? _currencySymbols$curr : '';
     const precision = format === PriceFormat.Truncated ? 0 : 2;
-    return "".concat(symbol).concat((priceInCents / 100).toFixed(precision));
+    return `${symbol}${(priceInCents / 100).toFixed(precision)}`;
   }
 };
 

package/dist/components/Root/productState.js

@@ -130,7 +130,7 @@ const populateProductStateReducer = (state, action) => {
     //   [collectionId]: [skuId]
     // }
     collectionSkus: { ...state.collectionSkus,
-      ["".concat(data.node.id)]: (_data$node$sku$id = (_data$node$sku = data.node.sku) === null || _data$node$sku === void 0 ? void 0 : _data$node$sku.id) !== null && _data$node$sku$id !== void 0 ? _data$node$sku$id : null
+      [`${data.node.id}`]: (_data$node$sku$id = (_data$node$sku = data.node.sku) === null || _data$node$sku === void 0 ? void 0 : _data$node$sku.id) !== null && _data$node$sku$id !== void 0 ? _data$node$sku$id : null
     },
     fetchedCollectionIds: state.fetchedCollectionIds.concat(data.node.id)
   };

package/dist/components/StoreModal/StoreModalFamilyButton.js

@@ -28,9 +28,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const plural = (count, singularString, pluralString) => {
-  if (count === 1) return "1 ".concat(singularString);
-  const str = pluralString || "".concat(singularString, "s");
-  return "".concat(count, " ").concat(str);
+  if (count === 1) return `1 ${singularString}`;
+  const str = pluralString || `${singularString}s`;
+  return `${count} ${str}`;
 };
 
 const getFamilyType = collection => {
@@ -59,7 +59,7 @@ const FamilyButton = ({
     name: collection.featureStyle && /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
       Component: "span",
       fontStyle: collection.featureStyle
-    }, "".concat(collection.name, " ").concat(getFamilyType(collection))),
+    }, `${collection.name} ${getFamilyType(collection)}`),
     label: collection.totalStyles && plural(collection.totalStyles, 'style', 'styles'),
     price: collection.sku && /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
       sku: collection.sku,

package/dist/components/StoreModal/StoreModalIndex.js

@@ -30,9 +30,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const plural = (count, singularString, pluralString) => {
-  if (count === 1) return "1 ".concat(singularString);
-  const str = pluralString || "".concat(singularString, "s");
-  return "".concat(count, " ").concat(str);
+  if (count === 1) return `1 ${singularString}`;
+  const str = pluralString || `${singularString}s`;
+  return `${count} ${str}`;
 };
 
 const StoreModalIndex = ({

package/dist/components/StoreModalProductLicenseSelection/StoreModalProductLicense.js

@@ -140,7 +140,7 @@ const StoreModalProduceLicense = ({
             text: option.amount
           }))
         }, {
-          selectionText: selectedOption ? selectedOption.amount : "Select ".concat(variable.name)
+          selectionText: selectedOption ? selectedOption.amount : `Select ${variable.name}`
         });
       }
 

package/dist/components/TestFontsForm/index.js

@@ -13,7 +13,7 @@ var _TextField = _interopRequireDefault(require("../TextField"));
 
 var _Icons = require("../Icons");
 
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
 
 var _TestFontsFormUpdateCustomerMutation, _TestFontsForm_viewer, _TestFontsForm_Query;
 
@@ -43,7 +43,7 @@ const TestFontsFormBase = ({
   downloadLabel = 'Download test fonts',
   newsletterCheckboxChecked = false
 }) => {
-  var _config$form$checkbox, _config$form, _viewer$testFonts, _ref;
+  var _viewer$testFonts, _ref;
 
   const [email, setEmail] = (0, _react.useState)('');
   const [name, setName] = (0, _react.useState)('');
@@ -55,8 +55,6 @@ const TestFontsFormBase = ({
   const [submitted, setSubmitted] = (0, _react.useState)(false);
   const downloadForm = (0, _react.useRef)(null);
   const environment = (0, _reactRelay.useRelayEnvironment)();
-  const config = (0, _react.useContext)(_ConfigContext.default);
-  const checkboxStyle = (_config$form$checkbox = (_config$form = config.form) === null || _config$form === void 0 ? void 0 : _config$form.checkboxStyle) !== null && _config$form$checkbox !== void 0 ? _config$form$checkbox : 'check';
   if (!viewer) return null;
 
   const handleSubmit = e => {
@@ -131,32 +129,22 @@ const TestFontsFormBase = ({
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__agreement test-fonts__checkbox-field",
     "data-highlighted": eulaFail && !eulaAgreed
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "checkbox"
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "checkbox",
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
     id: "test-fonts-eula-agreement",
     checked: eulaAgreed,
     onChange: event => setEulaAgreed(event.target.checked)
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "checkbox__icon"
-  }, checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
+  }), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "test-fonts-eula-agreement",
     dangerouslySetInnerHTML: {
       __html: (_ref = agreementLabel || eulaAgreementLabel) !== null && _ref !== void 0 ? _ref : ''
     }
   })), newsletterOptInLabel && /*#__PURE__*/_react.default.createElement("div", {
     className: "test-fonts__newsletter-opt-in test-fonts__checkbox-field"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "checkbox"
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "checkbox",
-    id: "newsletter-opt-in",
+  }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    id: "newletter-opt-in",
     checked: newsletterOptIn,
     onChange: event => setNewsletterOptIn(event.target.checked)
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "checkbox__icon"
-  }, checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null))), /*#__PURE__*/_react.default.createElement("label", {
+  }), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "newsletter-opt-in",
     dangerouslySetInnerHTML: {
       __html: newsletterOptInLabel

package/dist/components/ThemeConfig/index.js

@@ -25,7 +25,7 @@ const ThemeConfigBase = ({
   const props = (_viewer$themeConfig$c = viewer === null || viewer === void 0 ? void 0 : (_viewer$themeConfig = viewer.themeConfig) === null || _viewer$themeConfig === void 0 ? void 0 : _viewer$themeConfig.customProperties) !== null && _viewer$themeConfig$c !== void 0 ? _viewer$themeConfig$c : [];
   return /*#__PURE__*/_react.default.createElement("style", {
     type: "text/css"
-  }, ":root { ".concat(props.join(';'), " }"));
+  }, `:root { ${props.join(';')} }`);
 };
 
 const ThemeConfig = (0, _reactRelay.createFragmentContainer)(ThemeConfigBase, {

package/dist/components/TypeTester/TypeTesterAlignButtons.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Alignment } from './types';
+interface TypeTesterAlignButtons_props {
+    alignment: Alignment;
+    setAlignment: (value: Alignment) => void;
+}
+declare const TypeTesterAlignButtons: React.FC<TypeTesterAlignButtons_props>;
+export default TypeTesterAlignButtons;

package/dist/components/TypeTester/TypeTesterAlignButtons.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Align = require("../Icons/Align");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TypeTesterAlignButtons = ({
+  alignment,
+  setAlignment
+}) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__align-buttons"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'left',
+    onClick: () => setAlignment('left')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignLeft, null)), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'center',
+    onClick: () => setAlignment('center')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignCenter, null)), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "type-tester__align-buttons__button",
+    "data-active": alignment === 'right',
+    onClick: () => setAlignment('right')
+  }, /*#__PURE__*/_react.default.createElement(_Align.AlignRight, null)));
+};
+
+var _default = TypeTesterAlignButtons;
+exports.default = _default;

package/dist/components/TypeTester/TypeTesterContent.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UseTypeTesterStylerProps } from './useTypeTesterStyler';
-import { Content } from './types';
+import { Alignment, Content } from './types';
 export interface TypeTesterContentRef {
     focus: () => void;
 }
@@ -11,6 +11,7 @@ interface TypeTesterContentProps extends UseTypeTesterStylerProps {
     setFocused: (value: boolean) => void;
     direction: string | null;
     autofitOnChange: boolean;
+    alignment: Alignment;
 }
 declare const TypeTesterContent: React.ForwardRefExoticComponent<TypeTesterContentProps & React.RefAttributes<TypeTesterContentRef>>;
 export default TypeTesterContent;

package/dist/components/TypeTester/TypeTesterContent.js

@@ -24,6 +24,7 @@ const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef(({
   setContent,
   setFocused,
   direction,
+  alignment,
   ...props
 }, ref) => {
   const editorRef = (0, _react.useRef)(null);
@@ -35,7 +36,8 @@ const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef(({
     }
   }));
   const style = (0, _useTypeTesterStyler.default)({ ...props,
-    content
+    content,
+    alignment
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, style, {
     className: "type-tester__text__container"
@@ -47,7 +49,8 @@ const TypeTesterContent = /*#__PURE__*/_react.default.forwardRef(({
     onFocus: () => setFocused(true),
     spellCheck: false,
     stripPastedStyles: true,
-    textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR'
+    textDirectionality: direction === 'rtl' ? 'RTL' : 'LTR',
+    textAlignment: alignment
   }));
 });
 

package/dist/components/TypeTester/TypeTesterContext.d.ts

@@ -1,5 +1,5 @@
 import React, { Dispatch } from 'react';
-import { Content, Features, Size, TypeTesterMode } from './types';
+import { Content, Features, Size, Alignment, TypeTesterMode } from './types';
 interface TypeTesterState {
     content: Content;
     contentEdited: boolean;
@@ -9,6 +9,7 @@ interface TypeTesterState {
     focused: boolean;
     featuresOpen: boolean;
     autofit: boolean;
+    alignment: Alignment;
 }
 export interface TypeTestersState {
     [id: string]: TypeTesterState;
@@ -19,6 +20,7 @@ export interface TypeTestersInitialState {
         size: number | null;
         lineHeight: number | null;
         autofit: boolean;
+        alignment: Alignment;
     };
 }
 interface TypeTesterContextState {
@@ -54,6 +56,10 @@ declare type TypeTesterContextAction = {
     type: 'SET_LINE_HEIGHT';
     id: string;
     value: number;
+} | {
+    type: 'SET_ALIGNMENT';
+    id: string;
+    value: Alignment;
 };
 export declare const TypeTesterContext: React.Context<TypeTesterContextState & {
     dispatch: Dispatch<TypeTesterContextAction>;

package/dist/components/TypeTester/TypeTesterContext.js

@@ -103,6 +103,11 @@ const groupReducer = (state, action) => {
         lineHeight: action.value
       });
 
+    case 'SET_ALIGNMENT':
+      return updateTester(state, action.id, {
+        alignment: action.value
+      });
+
     case 'SET_FOCUSED':
       return { ...state,
         testers: { ...testers,
@@ -143,7 +148,8 @@ const TypeTesterContextComponent = ({
       autofit: initialState.autofit,
       features: [],
       featuresOpen: false,
-      focused: false
+      focused: false,
+      alignment: initialState.alignment
     };
     return acc;
   }, {});