feat: Fluent UI Outlook Lite + connections mockup

node_modules/rtl-css-js/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2017 Kent C. Dodds
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/rtl-css-js/README.md

@@ -0,0 +1,214 @@
+# rtl-css-js
+
+RTL conversion for CSS in JS objects
+
+<!-- prettier-ignore-start -->
+[![Build Status][build-badge]][build]
+[![Code Coverage][coverage-badge]][coverage]
+[![version][version-badge]][package]
+[![downloads][downloads-badge]][npmtrends]
+[![MIT License][license-badge]][license]
+[![All Contributors][all-contributors-badge]](#contributors-)
+[![PRs Welcome][prs-badge]][prs]
+[![Code of Conduct][coc-badge]][coc]
+<!-- prettier-ignore-end -->
+
+## The problem
+
+For some locales, it's necessary to change `padding-left` to `padding-right`
+when your text direction is right to left. There are tools like this for CSS
+([`cssjanus`](https://github.com/cssjanus/cssjanus) for example) which
+manipulate strings of CSS to do this, but none for CSS in JS where your CSS is
+represented by an object.
+
+## This solution
+
+This is a function which accepts a CSS in JS object and can convert
+`padding-left` to `padding-right` as well as all other properties where it makes
+sense to do that (at least, that's what it's going to be when it's done... This
+is a work in progress).
+
+## Table of Contentss
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Installation](#installation)
+- [Usage](#usage)
+  - [kebab-case](#kebab-case)
+  - [core](#core)
+- [Caveats](#caveats)
+  - [`background`](#background)
+  - [CSS variables - `var()`](#css-variables---var)
+- [Inspiration](#inspiration)
+- [Ecosystem](#ecosystem)
+- [Other Solutions](#other-solutions)
+- [Contributors](#contributors)
+- [LICENSE](#license)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Installation
+
+This module is distributed via [npm][npm] which is bundled with [node][node] and
+should be installed as one of your project's `dependencies`:
+
+```
+npm install --save rtl-css-js
+```
+
+## Usage
+
+This module is exposed via [CommonJS](http://wiki.commonjs.org/wiki/CommonJS) as
+well as [UMD](https://github.com/umdjs/umd) with the global as `rtlCSSJS`
+
+CommonJS:
+
+```javascript
+const rtlCSSJS = require('rtl-css-js')
+const styles = rtlCSSJS({paddingLeft: 23})
+console.log(styles) // logs {paddingRight: 23}
+```
+
+You can also just include a script tag in your browser and use the `rtlCSSJS`
+variable:
+
+```html
+<script src="https://unpkg.com/rtl-css-js"></script>
+<script>
+  const styles = rtlCSSJS({paddingRight: 23})
+  console.log(styles) // logs {paddingLeft: 23}
+</script>
+```
+
+You can also control which rules you don't want to flip by adding a
+`/* @noflip */` CSS comment to your rule
+
+```javascript
+const rtlCSSJS = require('rtl-css-js')
+const styles = rtlCSSJS({paddingLeft: '20px /* @noflip */'})
+console.log(styles) // logs {paddingLeft: '20px /* @noflip */' }
+```
+
+### kebab-case
+
+This library support kebab-case properties too.
+
+```javascript
+const rtlCSSJS = require('rtl-css-js')
+const styles = rtlCSSJS({'padding-right': 23})
+console.log(styles) // logs {'padding-left': 23}
+```
+
+### core
+
+`rtl-css-js` also exposes its internal helpers and utilities so you can deal
+with [certain scenarios](https://github.com/kentcdodds/rtl-css-js/pull/22)
+yourself. To use these you can use the `rtlCSSJSCore` global with the UMD build,
+`require('rtl-css-js/core')`, or use
+`import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core'`.
+
+You can import anything that's exported from `src/core`. Please see the code
+comments for documentation on how to use these.
+
+## Caveats
+
+### `background`
+
+Right now `background` and `backgroundImage` just replace all instances of `ltr`
+with `rtl` and `right` with `left`. This is so you can have a different image
+for your LTR and RTL, and in order to flip linear gradients. Note that this is
+case sensitive! Must be lower case. Note also that it _will not_ change `bright`
+to `bleft`. It's a _little_ smarter than that. But this is definitely something
+to consider with your URLs.
+
+### CSS variables - `var()`
+
+Since it's impossible to know what the contents of a css variable are until the
+styles are actually calculated by the browser, any CSS variable contents will
+not be converted.
+
+## Inspiration
+
+[CSSJanus](https://github.com/cssjanus/cssjanus) was a major inspiration.
+
+## Ecosystem
+
+- **[react-with-styles-interface-aphrodite](https://github.com/airbnb/react-with-styles-interface-aphrodite):**
+  An interface to use
+  [`react-with-styles`](https://github.com/airbnb/react-with-styles) with
+  [Aphrodite](https://github.com/khan/aphrodite)
+- **[fela-plugin-rtl](https://www.npmjs.com/package/fela-plugin-rtl):** A plugin
+  for [fela](http://fela.js.org/) that uses rtl-css-js to convert a style object
+  to its right-to-left counterpart
+- **[bidi-css-js](https://github.com/TxHawks/bidi-css-js):** A library for
+  authoring flow-relative css, which uses `rtl-css-js`'s core.
+- **[jss-rtl](https://github.com/alitaheri/jss-rtl):** A plugin for
+  [`jss`](https://github.com/cssinjs/jss) to support flipping styles
+  dynamically.
+
+## Other Solutions
+
+I'm not aware of any, if you are please
+[make a pull request](http://makeapullrequest.com) and add it here!
+
+## Contributors
+
+Thanks goes to these people ([emoji key][emojis]):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3?s=100" width="100px;" alt=""/><br /><sub><b>Kent C. Dodds</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=kentcdodds" title="Tests">⚠️</a> <a href="#infra-kentcdodds" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://gabri.me"><img src="https://avatars.githubusercontent.com/u/63876?v=3?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed El Gabri</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri" title="Documentation">📖</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=ahmedelgabri" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/majapw"><img src="https://avatars1.githubusercontent.com/u/1383861?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Maja Wichrowska</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=majapw" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=majapw" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/yzimet"><img src="https://avatars2.githubusercontent.com/u/6600720?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yaniv</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=yzimet" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/TxHawks"><img src="https://avatars2.githubusercontent.com/u/5658514?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan Pollak</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=TxHawks" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/alitaheri"><img src="https://avatars1.githubusercontent.com/u/8528759?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ali Taheri Moghaddar</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri" title="Documentation">📖</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=alitaheri" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/garrettberg"><img src="https://avatars0.githubusercontent.com/u/844459?v=4?s=100" width="100px;" alt=""/><br /><sub><b>garrettberg</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=garrettberg" title="Tests">⚠️</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="http://milesj.me"><img src="https://avatars2.githubusercontent.com/u/143744?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miles Johnson</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=milesj" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=milesj" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://www.kweber.com"><img src="https://avatars1.githubusercontent.com/u/2785791?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin Weber</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=kevinweber" title="Code">💻</a></td>
+    <td align="center"><a href="https://stackshare.io/jdorfman/decisions"><img src="https://avatars1.githubusercontent.com/u/398230?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Justin Dorfman</b></sub></a><br /><a href="#fundingFinding-jdorfman" title="Funding Finding">🔍</a></td>
+    <td align="center"><a href="https://github.com/RoystonS"><img src="https://avatars0.githubusercontent.com/u/19773?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Royston Shufflebotham</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/issues?q=author%3ARoystonS" title="Bug reports">🐛</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=RoystonS" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=RoystonS" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://twitter.com/layershifter"><img src="https://avatars.githubusercontent.com/u/14183168?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Oleksandr Fediashov</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=layershifter" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/ling1726"><img src="https://avatars.githubusercontent.com/u/20744592?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lingfan Gao</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=ling1726" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=ling1726" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/miroslavstastny"><img src="https://avatars.githubusercontent.com/u/9615899?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Miroslav Stastny</b></sub></a><br /><a href="https://github.com/kentcdodds/rtl-css-js/commits?author=miroslavstastny" title="Code">💻</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=miroslavstastny" title="Documentation">📖</a> <a href="https://github.com/kentcdodds/rtl-css-js/commits?author=miroslavstastny" title="Tests">⚠️</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors][all-contributors] specification.
+Contributions of any kind welcome!
+
+## LICENSE
+
+MIT
+
+<!-- prettier-ignore-start -->
+[npm]: https://www.npmjs.com/
+[node]: https://nodejs.org
+[build-badge]: https://img.shields.io/github/workflow/status/kentcdodds/rtl-css-js/validate?logo=github&style=flat-square
+[build]: https://github.com/kentcdodds/rtl-css-js/actions?query=workflow%3Avalidate
+[coverage-badge]: https://img.shields.io/codecov/c/github/kentcdodds/rtl-css-js.svg?style=flat-square
+[coverage]: https://codecov.io/github/kentcdodds/rtl-css-js
+[version-badge]: https://img.shields.io/npm/v/rtl-css-js.svg?style=flat-square
+[package]: https://www.npmjs.com/package/rtl-css-js
+[downloads-badge]: https://img.shields.io/npm/dm/mdx-bundler.svg?style=flat-square
+[npmtrends]: https://www.npmtrends.com/mdx-bundler
+[license-badge]: https://img.shields.io/npm/l/rtl-css-js.svg?style=flat-square
+[license]: https://github.com/kentcdodds/rtl-css-js/blob/main/other/LICENSE
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/kentcdodds/rtl-css-js/blob/main/other/CODE_OF_CONDUCT.md
+[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
+[all-contributors]: https://github.com/kentcdodds/all-contributors
+<!-- prettier-ignore-end -->

node_modules/rtl-css-js/core.d.ts

@@ -0,0 +1,163 @@
+export declare type PropertyValue = string | number | object
+
+export declare interface CommonConverterOptions {
+  value: string
+}
+
+export declare interface BackgroundConverterOptions {
+  value: string
+  valuesToConvert: {[source: string]: string}
+  isRtl: boolean
+  bgImgDirectionRegex: RegExp
+  bgPosDirectionRegex: RegExp
+}
+
+export declare interface BackgroundImageConverterOptions {
+  value: string
+  valuesToConvert: {[source: string]: string}
+  bgImgDirectionRegex: RegExp
+}
+
+export declare interface BackgroundPositionConverterOptions {
+  value: string
+  valuesToConvert: {[source: string]: string}
+  isRtl: boolean
+  bgPosDirectionRegex: RegExp
+}
+
+export declare interface PropertyValueConverter<
+  O extends CommonConverterOptions = CommonConverterOptions
+> {
+  (options: O): string
+}
+
+export declare interface PropertyValueConverters {
+  padding: PropertyValueConverter
+  textShadow: PropertyValueConverter
+  borderColor: PropertyValueConverter
+  borderRadius: PropertyValueConverter
+  background: PropertyValueConverter<BackgroundConverterOptions>
+  backgroundImage: PropertyValueConverter<BackgroundImageConverterOptions>
+  backgroundPosition: PropertyValueConverter<BackgroundPositionConverterOptions>
+  backgroundPositionX: PropertyValueConverter<
+    BackgroundPositionConverterOptions
+  >
+  objectPosition: PropertyValueConverter<BackgroundPositionConverterOptions>
+  transform: PropertyValueConverter
+  margin: PropertyValueConverter
+  borderWidth: PropertyValueConverter
+  boxShadow: PropertyValueConverter
+  webkitBoxShadow: PropertyValueConverter
+  mozBoxShadow: PropertyValueConverter
+  borderStyle: PropertyValueConverter
+  webkitTransform: PropertyValueConverter
+  mozTransform: PropertyValueConverter
+  'text-shadow': PropertyValueConverter
+  'border-color': PropertyValueConverter
+  'border-radius': PropertyValueConverter
+  'background-image': PropertyValueConverter<BackgroundImageConverterOptions>
+  'background-position': PropertyValueConverter<
+    BackgroundPositionConverterOptions
+  >
+  'background-position-x': PropertyValueConverter<
+    BackgroundPositionConverterOptions
+  >
+  'object-position': PropertyValueConverter<
+    BackgroundPositionConverterOptions
+  >
+  'border-width': PropertyValueConverter
+  'box-shadow': PropertyValueConverter
+  '-webkit-box-shadow': PropertyValueConverter
+  '-moz-box-shadow': PropertyValueConverter
+  'border-style': PropertyValueConverter
+  '-webkit-transform': PropertyValueConverter
+  '-moz-transform': PropertyValueConverter
+}
+
+export declare const propertyValueConverters: PropertyValueConverters
+
+/**
+ * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+ * @param {Array} array the array of pairs
+ * @return {Object} the {key, value} pair object
+ */
+export declare function arrayToObject(
+  array: string[][],
+): {[source: string]: string}
+
+/**
+ * Flip the sign of a CSS value, possibly with a unit.
+ *
+ * We can't just negate the value with unary minus due to the units.
+ *
+ * @private
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example -77%)
+ */
+export declare function flipSign(value: string): string
+
+/**
+ * Takes a percentage for background position and inverts it.
+ * This was copied and modified from CSSJanus:
+ * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example 23%)
+ */
+export declare function calculateNewBackgroundPosition(value: string): string
+
+/**
+ * This takes a list of CSS values and converts it to an array
+ * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+ * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+ */
+export declare function getValuesAsList(value: string): string[]
+
+/**
+ * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+ * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+ * simply returns the value in those cases (which is the correct behavior)
+ * @return {String} the result - `1px 4px 3px 2px` for example.
+ */
+export declare function handleQuartetValues(value: string): string
+
+export declare const propertiesToConvert: {[key: string]: string}
+
+export declare const valuesToConvert: {[key: string]: string}
+
+export declare const propsToIgnore: string[]
+
+/**
+ * converts properties and values in the CSS in JS object to their corresponding RTL values
+ * @param {Object} object the CSS in JS object
+ * @return {Object} the RTL converted object
+ */
+export declare function convert<T extends object = object>(o: T): T
+
+/**
+ * Converts a property and its value to the corresponding RTL key and value
+ * @param {String} originalKey the original property key
+ * @param {Number|String|Object} originalValue the original css property value
+ * @return {Object} the new {key, value} pair
+ */
+export declare function convertProperty<V extends PropertyValue>(
+  originalKey: string,
+  originalValue: V,
+): {key: string; value: V}
+
+/**
+ * This gets the RTL version of the given property if it has a corresponding RTL property
+ * @param {String} property the name of the property
+ * @return {String} the name of the RTL property
+ */
+export declare function getPropertyDoppelganger(property: string): string
+
+/**
+ * This converts the given value to the RTL version of that value based on the key
+ * @param {String} key this is the key (note: this should be the RTL version of the originalKey)
+ * @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well
+ * @return {String|Number|Object} the converted value
+ */
+export declare function getValueDoppelganger<V extends PropertyValue>(
+  key: string,
+  originalValue: V,
+): V

node_modules/rtl-css-js/core.esm.d.ts

@@ -0,0 +1 @@
+export * from './core'

node_modules/rtl-css-js/core.esm.js

@@ -0,0 +1,9 @@
+/* eslint import/no-unresolved:0 */
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line no-console
+  console.warn(
+    'Importing `rtl-css-js/core.esm` is deprecated, please use `rtl-css-js/core`.',
+  )
+}
+// eslint-disable-next-line import/extensions
+export * from './dist/esm/core.js'

node_modules/rtl-css-js/core/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/core.js",
+  "jsnext:main": "../dist/esm/core.js",
+  "module": "../dist/esm/core.js",
+  "types": "../core.d.ts"
+}

node_modules/rtl-css-js/dist/cjs/convert-51dab0c6.js

@@ -0,0 +1,523 @@
+'use strict';
+
+/**
+ * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+ * @param {Array} array the array of pairs
+ * @return {Object} the {key, value} pair object
+ */
+function arrayToObject(array) {
+  return array.reduce(function (obj, _ref) {
+    var prop1 = _ref[0],
+      prop2 = _ref[1];
+    obj[prop1] = prop2;
+    obj[prop2] = prop1;
+    return obj;
+  }, {});
+}
+function isBoolean(val) {
+  return typeof val === 'boolean';
+}
+function isFunction(val) {
+  return typeof val === 'function';
+}
+function isNumber(val) {
+  return typeof val === 'number';
+}
+function isNullOrUndefined(val) {
+  return val === null || typeof val === 'undefined';
+}
+function isObject(val) {
+  return val && typeof val === 'object';
+}
+function isString(val) {
+  return typeof val === 'string';
+}
+function includes(inclusive, inclusee) {
+  return inclusive.indexOf(inclusee) !== -1;
+}
+
+/**
+ * Flip the sign of a CSS value, possibly with a unit.
+ *
+ * We can't just negate the value with unary minus due to the units.
+ *
+ * @private
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example -77%)
+ */
+function flipSign(value) {
+  if (parseFloat(value) === 0) {
+    // Don't mangle zeroes
+    return value;
+  }
+  if (value[0] === '-') {
+    return value.slice(1);
+  }
+  return "-" + value;
+}
+function flipTransformSign(match, prefix, offset, suffix) {
+  return prefix + flipSign(offset) + suffix;
+}
+
+/**
+ * Takes a percentage for background position and inverts it.
+ * This was copied and modified from CSSJanus:
+ * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example 23%)
+ */
+function calculateNewBackgroundPosition(value) {
+  var idx = value.indexOf('.');
+  if (idx === -1) {
+    value = 100 - parseFloat(value) + "%";
+  } else {
+    // Two off, one for the "%" at the end, one for the dot itself
+    var len = value.length - idx - 2;
+    value = 100 - parseFloat(value);
+    value = value.toFixed(len) + "%";
+  }
+  return value;
+}
+
+/**
+ * This takes a list of CSS values and converts it to an array
+ * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+ * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+ */
+function getValuesAsList(value) {
+  return value.replace(/ +/g, ' ') // remove all extraneous spaces
+  .split(' ').map(function (i) {
+    return i.trim();
+  }) // get rid of extra space before/after each item
+  .filter(Boolean) // get rid of empty strings
+  // join items which are within parenthese
+  // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
+  .reduce(function (_ref2, item) {
+    var list = _ref2.list,
+      state = _ref2.state;
+    var openParansCount = (item.match(/\(/g) || []).length;
+    var closedParansCount = (item.match(/\)/g) || []).length;
+    if (state.parensDepth > 0) {
+      list[list.length - 1] = list[list.length - 1] + " " + item;
+    } else {
+      list.push(item);
+    }
+    state.parensDepth += openParansCount - closedParansCount;
+    return {
+      list: list,
+      state: state
+    };
+  }, {
+    list: [],
+    state: {
+      parensDepth: 0
+    }
+  }).list;
+}
+
+/**
+ * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+ * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+ * simply returns the value in those cases (which is the correct behavior)
+ * @return {String} the result - `1px 4px 3px 2px` for example.
+ */
+function handleQuartetValues(value) {
+  var splitValues = getValuesAsList(value);
+  if (splitValues.length <= 3 || splitValues.length > 4) {
+    return value;
+  }
+  var top = splitValues[0],
+    right = splitValues[1],
+    bottom = splitValues[2],
+    left = splitValues[3];
+  return [top, left, bottom, right].join(' ');
+}
+
+/**
+ *
+ * @param {String|Number|Object} value css property value to test
+ * @returns If the css property value can(should?) have an RTL equivalent
+ */
+function canConvertValue(value) {
+  return !isBoolean(value) && !isNullOrUndefined(value);
+}
+
+/**
+ * Splits a shadow style into its separate shadows using the comma delimiter, but creating an exception
+ * for comma separated values in parentheses often used for rgba colours.
+ * @param {String} value
+ * @returns {Array} array of all box shadow values in the string
+ */
+function splitShadow(value) {
+  var shadows = [];
+  var start = 0;
+  var end = 0;
+  var rgba = false;
+  while (end < value.length) {
+    if (!rgba && value[end] === ',') {
+      shadows.push(value.substring(start, end).trim());
+      end++;
+      start = end;
+    } else if (value[end] === "(") {
+      rgba = true;
+      end++;
+    } else if (value[end] === ')') {
+      rgba = false;
+      end++;
+    } else {
+      end++;
+    }
+  }
+
+  // push the last shadow value if there is one
+  // istanbul ignore next
+  if (start != end) {
+    shadows.push(value.substring(start, end + 1));
+  }
+  return shadows;
+}
+
+// some values require a little fudging, that fudging goes here.
+var propertyValueConverters = {
+  padding: function padding(_ref) {
+    var value = _ref.value;
+    if (isNumber(value)) {
+      return value;
+    }
+    return handleQuartetValues(value);
+  },
+  textShadow: function textShadow(_ref2) {
+    var value = _ref2.value;
+    var flippedShadows = splitShadow(value).map(function (shadow) {
+      // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
+      return shadow.replace(/(^|\s)(-*)([.|\d]+)/, function (match, whiteSpace, negative, number) {
+        if (number === '0') {
+          return match;
+        }
+        var doubleNegative = negative === '' ? '-' : '';
+        return "" + whiteSpace + doubleNegative + number;
+      });
+    });
+    return flippedShadows.join(',');
+  },
+  borderColor: function borderColor(_ref3) {
+    var value = _ref3.value;
+    return handleQuartetValues(value);
+  },
+  borderRadius: function borderRadius(_ref4) {
+    var value = _ref4.value;
+    if (isNumber(value)) {
+      return value;
+    }
+    if (includes(value, '/')) {
+      var _value$split = value.split('/'),
+        radius1 = _value$split[0],
+        radius2 = _value$split[1];
+      var convertedRadius1 = propertyValueConverters.borderRadius({
+        value: radius1.trim()
+      });
+      var convertedRadius2 = propertyValueConverters.borderRadius({
+        value: radius2.trim()
+      });
+      return convertedRadius1 + " / " + convertedRadius2;
+    }
+    var splitValues = getValuesAsList(value);
+    switch (splitValues.length) {
+      case 2:
+        {
+          return splitValues.reverse().join(' ');
+        }
+      case 4:
+        {
+          var topLeft = splitValues[0],
+            topRight = splitValues[1],
+            bottomRight = splitValues[2],
+            bottomLeft = splitValues[3];
+          return [topRight, topLeft, bottomLeft, bottomRight].join(' ');
+        }
+      default:
+        {
+          return value;
+        }
+    }
+  },
+  background: function background(_ref5) {
+    var value = _ref5.value,
+      valuesToConvert = _ref5.valuesToConvert,
+      isRtl = _ref5.isRtl,
+      bgImgDirectionRegex = _ref5.bgImgDirectionRegex,
+      bgPosDirectionRegex = _ref5.bgPosDirectionRegex;
+    if (isNumber(value)) {
+      return value;
+    }
+
+    // Yeah, this is in need of a refactor 🙃...
+    // but this property is a tough cookie 🍪
+    // get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value
+    var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim();
+    // replace that backgroundPosition value with the converted version
+    value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition({
+      value: backgroundPositionValue,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    }));
+    // do the backgroundImage value replacing on the whole value (because why not?)
+    return propertyValueConverters.backgroundImage({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      bgImgDirectionRegex: bgImgDirectionRegex
+    });
+  },
+  backgroundImage: function backgroundImage(_ref6) {
+    var value = _ref6.value,
+      valuesToConvert = _ref6.valuesToConvert,
+      bgImgDirectionRegex = _ref6.bgImgDirectionRegex;
+    if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) {
+      return value;
+    }
+    return value.replace(bgImgDirectionRegex, function (match, g1, group2) {
+      return match.replace(group2, valuesToConvert[group2]);
+    });
+  },
+  backgroundPosition: function backgroundPosition(_ref7) {
+    var value = _ref7.value,
+      valuesToConvert = _ref7.valuesToConvert,
+      isRtl = _ref7.isRtl,
+      bgPosDirectionRegex = _ref7.bgPosDirectionRegex;
+    return value
+    // intentionally only grabbing the first instance of this because that represents `left`
+    .replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) {
+      return calculateNewBackgroundPosition(group);
+    }).replace(bgPosDirectionRegex, function (match) {
+      return valuesToConvert[match];
+    });
+  },
+  backgroundPositionX: function backgroundPositionX(_ref8) {
+    var value = _ref8.value,
+      valuesToConvert = _ref8.valuesToConvert,
+      isRtl = _ref8.isRtl,
+      bgPosDirectionRegex = _ref8.bgPosDirectionRegex;
+    if (isNumber(value)) {
+      return value;
+    }
+    return propertyValueConverters.backgroundPosition({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
+  },
+  transition: function transition(_ref9) {
+    var value = _ref9.value,
+      propertiesToConvert = _ref9.propertiesToConvert;
+    return value.split(/,\s*/g).map(function (transition) {
+      var values = transition.split(' ');
+
+      // Property is always defined first
+      values[0] = propertiesToConvert[values[0]] || values[0];
+      return values.join(' ');
+    }).join(', ');
+  },
+  transitionProperty: function transitionProperty(_ref10) {
+    var value = _ref10.value,
+      propertiesToConvert = _ref10.propertiesToConvert;
+    return value.split(/,\s*/g).map(function (prop) {
+      return propertiesToConvert[prop] || prop;
+    }).join(', ');
+  },
+  transform: function transform(_ref11) {
+    var value = _ref11.value;
+    // This was copied and modified from CSSJanus:
+    // https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153
+    var nonAsciiPattern = "[^\\u0020-\\u007e]";
+    var escapePattern = "(?:" + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + "|\\\\[^\\r\\n\\f0-9a-f])";
+    var signedQuantPattern = "((?:-?" + ('(?:[0-9]*\\.[0-9]+|[0-9]+)' + "(?:\\s*" + '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)' + "|" + ("-?" + ("(?:[_a-z]|" + nonAsciiPattern + "|" + escapePattern + ")") + ("(?:[_a-z0-9-]|" + nonAsciiPattern + "|" + escapePattern + ")") + "*") + ")?") + ")|(?:inherit|auto))";
+    var translateXRegExp = new RegExp("(translateX\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+    var translateRegExp = new RegExp("(translate\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,1}\\s*\\))", 'gi');
+    var translate3dRegExp = new RegExp("(translate3d\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,2}\\s*\\))", 'gi');
+    var rotateRegExp = new RegExp("(rotate[ZY]?\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+    return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign);
+  }
+};
+propertyValueConverters.objectPosition = propertyValueConverters.backgroundPosition;
+propertyValueConverters.margin = propertyValueConverters.padding;
+propertyValueConverters.borderWidth = propertyValueConverters.padding;
+propertyValueConverters.boxShadow = propertyValueConverters.textShadow;
+propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.borderStyle = propertyValueConverters.borderColor;
+propertyValueConverters.webkitTransform = propertyValueConverters.transform;
+propertyValueConverters.mozTransform = propertyValueConverters.transform;
+propertyValueConverters.WebkitTransform = propertyValueConverters.transform;
+propertyValueConverters.MozTransform = propertyValueConverters.transform;
+propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition;
+propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.webkitTransition = propertyValueConverters.transition;
+propertyValueConverters.mozTransition = propertyValueConverters.transition;
+propertyValueConverters.WebkitTransition = propertyValueConverters.transition;
+propertyValueConverters.MozTransition = propertyValueConverters.transition;
+propertyValueConverters.webkitTransitionProperty = propertyValueConverters.transitionProperty;
+propertyValueConverters.mozTransitionProperty = propertyValueConverters.transitionProperty;
+propertyValueConverters.WebkitTransitionProperty = propertyValueConverters.transitionProperty;
+propertyValueConverters.MozTransitionProperty = propertyValueConverters.transitionProperty;
+
+// kebab-case versions
+
+propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['border-color'] = propertyValueConverters.borderColor;
+propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius;
+propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage;
+propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition;
+propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX;
+propertyValueConverters['object-position'] = propertyValueConverters.objectPosition;
+propertyValueConverters['border-width'] = propertyValueConverters.padding;
+propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['border-style'] = propertyValueConverters.borderColor;
+propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform;
+propertyValueConverters['-moz-transform'] = propertyValueConverters.transform;
+propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin;
+propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin;
+propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin;
+propertyValueConverters['-webkit-transition'] = propertyValueConverters.transition;
+propertyValueConverters['-moz-transition'] = propertyValueConverters.transition;
+propertyValueConverters['transition-property'] = propertyValueConverters.transitionProperty;
+propertyValueConverters['-webkit-transition-property'] = propertyValueConverters.transitionProperty;
+propertyValueConverters['-moz-transition-property'] = propertyValueConverters.transitionProperty;
+
+// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
+var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+// kebab-case versions
+['padding-left', 'padding-right'], ['margin-left', 'margin-right'], ['border-left', 'border-right'], ['border-left-color', 'border-right-color'], ['border-left-style', 'border-right-style'], ['border-left-width', 'border-right-width'], ['border-top-left-radius', 'border-top-right-radius'], ['border-bottom-left-radius', 'border-bottom-right-radius']]);
+var propsToIgnore = ['content'];
+
+// this is the same as the propertiesToConvert except for values
+var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+
+// Sorry for the regex 😞, but basically thisis used to replace _every_ instance of
+// `ltr`, `rtl`, `right`, and `left` in `backgroundimage` with the corresponding opposite.
+// A situation we're accepting here:
+// url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
+// Definite trade-offs here, but I think it's a good call.
+var bgImgDirectionRegex = new RegExp('(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)', 'g');
+var bgPosDirectionRegex = new RegExp('(left)|(right)');
+
+/**
+ * converts properties and values in the CSS in JS object to their corresponding RTL values
+ * @param {Object} object the CSS in JS object
+ * @return {Object} the RTL converted object
+ */
+function convert(object) {
+  return Object.keys(object).reduce(function (newObj, originalKey) {
+    var originalValue = object[originalKey];
+    if (isString(originalValue)) {
+      // you're welcome to later code 😺
+      originalValue = originalValue.trim();
+    }
+
+    // Some properties should never be transformed
+    if (includes(propsToIgnore, originalKey)) {
+      newObj[originalKey] = originalValue;
+      return newObj;
+    }
+    var _convertProperty = convertProperty(originalKey, originalValue),
+      key = _convertProperty.key,
+      value = _convertProperty.value;
+    newObj[key] = value;
+    return newObj;
+  }, Array.isArray(object) ? [] : {});
+}
+
+/**
+ * Converts a property and its value to the corresponding RTL key and value
+ * @param {String} originalKey the original property key
+ * @param {Number|String|Object} originalValue the original css property value
+ * @return {Object} the new {key, value} pair
+ */
+function convertProperty(originalKey, originalValue) {
+  var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue);
+  var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey);
+  var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue);
+  return {
+    key: key,
+    value: value
+  };
+}
+
+/**
+ * This gets the RTL version of the given property if it has a corresponding RTL property
+ * @param {String} property the name of the property
+ * @return {String} the name of the RTL property
+ */
+function getPropertyDoppelganger(property) {
+  return propertiesToConvert[property] || property;
+}
+
+/**
+ * This converts the given value to the RTL version of that value based on the key
+ * @param {String} key this is the key (note: this should be the RTL version of the originalKey)
+ * @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well
+ * @return {String|Number|Object} the converted value
+ */
+function getValueDoppelganger(key, originalValue) {
+  if (!canConvertValue(originalValue)) {
+    return originalValue;
+  }
+  if (isObject(originalValue)) {
+    return convert(originalValue); // recursion 🌀
+  }
+
+  var isNum = isNumber(originalValue);
+  var isFunc = isFunction(originalValue);
+  var importantlessValue = isNum || isFunc ? originalValue : originalValue.replace(/ !important.*?$/, '');
+  var isImportant = !isNum && importantlessValue.length !== originalValue.length;
+  var valueConverter = propertyValueConverters[key];
+  var newValue;
+  if (valueConverter) {
+    newValue = valueConverter({
+      value: importantlessValue,
+      valuesToConvert: valuesToConvert,
+      propertiesToConvert: propertiesToConvert,
+      isRtl: true,
+      bgImgDirectionRegex: bgImgDirectionRegex,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
+  } else {
+    newValue = valuesToConvert[importantlessValue] || importantlessValue;
+  }
+  if (isImportant) {
+    return newValue + " !important";
+  }
+  return newValue;
+}
+
+exports.arrayToObject = arrayToObject;
+exports.calculateNewBackgroundPosition = calculateNewBackgroundPosition;
+exports.canConvertValue = canConvertValue;
+exports.convert = convert;
+exports.convertProperty = convertProperty;
+exports.flipSign = flipSign;
+exports.flipTransformSign = flipTransformSign;
+exports.getPropertyDoppelganger = getPropertyDoppelganger;
+exports.getValueDoppelganger = getValueDoppelganger;
+exports.getValuesAsList = getValuesAsList;
+exports.handleQuartetValues = handleQuartetValues;
+exports.includes = includes;
+exports.isBoolean = isBoolean;
+exports.isFunction = isFunction;
+exports.isNullOrUndefined = isNullOrUndefined;
+exports.isNumber = isNumber;
+exports.isObject = isObject;
+exports.isString = isString;
+exports.propertiesToConvert = propertiesToConvert;
+exports.propertyValueConverters = propertyValueConverters;
+exports.propsToIgnore = propsToIgnore;
+exports.splitShadow = splitShadow;
+exports.valuesToConvert = valuesToConvert;

node_modules/rtl-css-js/dist/cjs/core.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var convert = require('./convert-51dab0c6.js');
+
+
+
+exports.arrayToObject = convert.arrayToObject;
+exports.calculateNewBackgroundPosition = convert.calculateNewBackgroundPosition;
+exports.calculateNewTranslate = convert.flipTransformSign;
+exports.canConvertValue = convert.canConvertValue;
+exports.convert = convert.convert;
+exports.convertProperty = convert.convertProperty;
+exports.flipSign = convert.flipSign;
+exports.flipTransformSign = convert.flipTransformSign;
+exports.getPropertyDoppelganger = convert.getPropertyDoppelganger;
+exports.getValueDoppelganger = convert.getValueDoppelganger;
+exports.getValuesAsList = convert.getValuesAsList;
+exports.handleQuartetValues = convert.handleQuartetValues;
+exports.includes = convert.includes;
+exports.isBoolean = convert.isBoolean;
+exports.isFunction = convert.isFunction;
+exports.isNullOrUndefined = convert.isNullOrUndefined;
+exports.isNumber = convert.isNumber;
+exports.isObject = convert.isObject;
+exports.isString = convert.isString;
+exports.propertiesToConvert = convert.propertiesToConvert;
+exports.propertyValueConverters = convert.propertyValueConverters;
+exports.propsToIgnore = convert.propsToIgnore;
+exports.splitShadow = convert.splitShadow;
+exports.valuesToConvert = convert.valuesToConvert;

node_modules/rtl-css-js/dist/cjs/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var convert = require('./convert-51dab0c6.js');
+
+
+
+module.exports = convert.convert;

node_modules/rtl-css-js/dist/esm/convert-9768a965.js

@@ -0,0 +1,499 @@
+/**
+ * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+ * @param {Array} array the array of pairs
+ * @return {Object} the {key, value} pair object
+ */
+function arrayToObject(array) {
+  return array.reduce(function (obj, _ref) {
+    var prop1 = _ref[0],
+      prop2 = _ref[1];
+    obj[prop1] = prop2;
+    obj[prop2] = prop1;
+    return obj;
+  }, {});
+}
+function isBoolean(val) {
+  return typeof val === 'boolean';
+}
+function isFunction(val) {
+  return typeof val === 'function';
+}
+function isNumber(val) {
+  return typeof val === 'number';
+}
+function isNullOrUndefined(val) {
+  return val === null || typeof val === 'undefined';
+}
+function isObject(val) {
+  return val && typeof val === 'object';
+}
+function isString(val) {
+  return typeof val === 'string';
+}
+function includes(inclusive, inclusee) {
+  return inclusive.indexOf(inclusee) !== -1;
+}
+
+/**
+ * Flip the sign of a CSS value, possibly with a unit.
+ *
+ * We can't just negate the value with unary minus due to the units.
+ *
+ * @private
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example -77%)
+ */
+function flipSign(value) {
+  if (parseFloat(value) === 0) {
+    // Don't mangle zeroes
+    return value;
+  }
+  if (value[0] === '-') {
+    return value.slice(1);
+  }
+  return "-" + value;
+}
+function flipTransformSign(match, prefix, offset, suffix) {
+  return prefix + flipSign(offset) + suffix;
+}
+
+/**
+ * Takes a percentage for background position and inverts it.
+ * This was copied and modified from CSSJanus:
+ * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+ * @param {String} value - the original value (for example 77%)
+ * @return {String} the result (for example 23%)
+ */
+function calculateNewBackgroundPosition(value) {
+  var idx = value.indexOf('.');
+  if (idx === -1) {
+    value = 100 - parseFloat(value) + "%";
+  } else {
+    // Two off, one for the "%" at the end, one for the dot itself
+    var len = value.length - idx - 2;
+    value = 100 - parseFloat(value);
+    value = value.toFixed(len) + "%";
+  }
+  return value;
+}
+
+/**
+ * This takes a list of CSS values and converts it to an array
+ * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+ * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+ */
+function getValuesAsList(value) {
+  return value.replace(/ +/g, ' ') // remove all extraneous spaces
+  .split(' ').map(function (i) {
+    return i.trim();
+  }) // get rid of extra space before/after each item
+  .filter(Boolean) // get rid of empty strings
+  // join items which are within parenthese
+  // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
+  .reduce(function (_ref2, item) {
+    var list = _ref2.list,
+      state = _ref2.state;
+    var openParansCount = (item.match(/\(/g) || []).length;
+    var closedParansCount = (item.match(/\)/g) || []).length;
+    if (state.parensDepth > 0) {
+      list[list.length - 1] = list[list.length - 1] + " " + item;
+    } else {
+      list.push(item);
+    }
+    state.parensDepth += openParansCount - closedParansCount;
+    return {
+      list: list,
+      state: state
+    };
+  }, {
+    list: [],
+    state: {
+      parensDepth: 0
+    }
+  }).list;
+}
+
+/**
+ * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+ * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+ * simply returns the value in those cases (which is the correct behavior)
+ * @return {String} the result - `1px 4px 3px 2px` for example.
+ */
+function handleQuartetValues(value) {
+  var splitValues = getValuesAsList(value);
+  if (splitValues.length <= 3 || splitValues.length > 4) {
+    return value;
+  }
+  var top = splitValues[0],
+    right = splitValues[1],
+    bottom = splitValues[2],
+    left = splitValues[3];
+  return [top, left, bottom, right].join(' ');
+}
+
+/**
+ *
+ * @param {String|Number|Object} value css property value to test
+ * @returns If the css property value can(should?) have an RTL equivalent
+ */
+function canConvertValue(value) {
+  return !isBoolean(value) && !isNullOrUndefined(value);
+}
+
+/**
+ * Splits a shadow style into its separate shadows using the comma delimiter, but creating an exception
+ * for comma separated values in parentheses often used for rgba colours.
+ * @param {String} value
+ * @returns {Array} array of all box shadow values in the string
+ */
+function splitShadow(value) {
+  var shadows = [];
+  var start = 0;
+  var end = 0;
+  var rgba = false;
+  while (end < value.length) {
+    if (!rgba && value[end] === ',') {
+      shadows.push(value.substring(start, end).trim());
+      end++;
+      start = end;
+    } else if (value[end] === "(") {
+      rgba = true;
+      end++;
+    } else if (value[end] === ')') {
+      rgba = false;
+      end++;
+    } else {
+      end++;
+    }
+  }
+
+  // push the last shadow value if there is one
+  // istanbul ignore next
+  if (start != end) {
+    shadows.push(value.substring(start, end + 1));
+  }
+  return shadows;
+}
+
+// some values require a little fudging, that fudging goes here.
+var propertyValueConverters = {
+  padding: function padding(_ref) {
+    var value = _ref.value;
+    if (isNumber(value)) {
+      return value;
+    }
+    return handleQuartetValues(value);
+  },
+  textShadow: function textShadow(_ref2) {
+    var value = _ref2.value;
+    var flippedShadows = splitShadow(value).map(function (shadow) {
+      // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
+      return shadow.replace(/(^|\s)(-*)([.|\d]+)/, function (match, whiteSpace, negative, number) {
+        if (number === '0') {
+          return match;
+        }
+        var doubleNegative = negative === '' ? '-' : '';
+        return "" + whiteSpace + doubleNegative + number;
+      });
+    });
+    return flippedShadows.join(',');
+  },
+  borderColor: function borderColor(_ref3) {
+    var value = _ref3.value;
+    return handleQuartetValues(value);
+  },
+  borderRadius: function borderRadius(_ref4) {
+    var value = _ref4.value;
+    if (isNumber(value)) {
+      return value;
+    }
+    if (includes(value, '/')) {
+      var _value$split = value.split('/'),
+        radius1 = _value$split[0],
+        radius2 = _value$split[1];
+      var convertedRadius1 = propertyValueConverters.borderRadius({
+        value: radius1.trim()
+      });
+      var convertedRadius2 = propertyValueConverters.borderRadius({
+        value: radius2.trim()
+      });
+      return convertedRadius1 + " / " + convertedRadius2;
+    }
+    var splitValues = getValuesAsList(value);
+    switch (splitValues.length) {
+      case 2:
+        {
+          return splitValues.reverse().join(' ');
+        }
+      case 4:
+        {
+          var topLeft = splitValues[0],
+            topRight = splitValues[1],
+            bottomRight = splitValues[2],
+            bottomLeft = splitValues[3];
+          return [topRight, topLeft, bottomLeft, bottomRight].join(' ');
+        }
+      default:
+        {
+          return value;
+        }
+    }
+  },
+  background: function background(_ref5) {
+    var value = _ref5.value,
+      valuesToConvert = _ref5.valuesToConvert,
+      isRtl = _ref5.isRtl,
+      bgImgDirectionRegex = _ref5.bgImgDirectionRegex,
+      bgPosDirectionRegex = _ref5.bgPosDirectionRegex;
+    if (isNumber(value)) {
+      return value;
+    }
+
+    // Yeah, this is in need of a refactor 🙃...
+    // but this property is a tough cookie 🍪
+    // get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value
+    var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim();
+    // replace that backgroundPosition value with the converted version
+    value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition({
+      value: backgroundPositionValue,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    }));
+    // do the backgroundImage value replacing on the whole value (because why not?)
+    return propertyValueConverters.backgroundImage({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      bgImgDirectionRegex: bgImgDirectionRegex
+    });
+  },
+  backgroundImage: function backgroundImage(_ref6) {
+    var value = _ref6.value,
+      valuesToConvert = _ref6.valuesToConvert,
+      bgImgDirectionRegex = _ref6.bgImgDirectionRegex;
+    if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) {
+      return value;
+    }
+    return value.replace(bgImgDirectionRegex, function (match, g1, group2) {
+      return match.replace(group2, valuesToConvert[group2]);
+    });
+  },
+  backgroundPosition: function backgroundPosition(_ref7) {
+    var value = _ref7.value,
+      valuesToConvert = _ref7.valuesToConvert,
+      isRtl = _ref7.isRtl,
+      bgPosDirectionRegex = _ref7.bgPosDirectionRegex;
+    return value
+    // intentionally only grabbing the first instance of this because that represents `left`
+    .replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) {
+      return calculateNewBackgroundPosition(group);
+    }).replace(bgPosDirectionRegex, function (match) {
+      return valuesToConvert[match];
+    });
+  },
+  backgroundPositionX: function backgroundPositionX(_ref8) {
+    var value = _ref8.value,
+      valuesToConvert = _ref8.valuesToConvert,
+      isRtl = _ref8.isRtl,
+      bgPosDirectionRegex = _ref8.bgPosDirectionRegex;
+    if (isNumber(value)) {
+      return value;
+    }
+    return propertyValueConverters.backgroundPosition({
+      value: value,
+      valuesToConvert: valuesToConvert,
+      isRtl: isRtl,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
+  },
+  transition: function transition(_ref9) {
+    var value = _ref9.value,
+      propertiesToConvert = _ref9.propertiesToConvert;
+    return value.split(/,\s*/g).map(function (transition) {
+      var values = transition.split(' ');
+
+      // Property is always defined first
+      values[0] = propertiesToConvert[values[0]] || values[0];
+      return values.join(' ');
+    }).join(', ');
+  },
+  transitionProperty: function transitionProperty(_ref10) {
+    var value = _ref10.value,
+      propertiesToConvert = _ref10.propertiesToConvert;
+    return value.split(/,\s*/g).map(function (prop) {
+      return propertiesToConvert[prop] || prop;
+    }).join(', ');
+  },
+  transform: function transform(_ref11) {
+    var value = _ref11.value;
+    // This was copied and modified from CSSJanus:
+    // https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153
+    var nonAsciiPattern = "[^\\u0020-\\u007e]";
+    var escapePattern = "(?:" + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + "|\\\\[^\\r\\n\\f0-9a-f])";
+    var signedQuantPattern = "((?:-?" + ('(?:[0-9]*\\.[0-9]+|[0-9]+)' + "(?:\\s*" + '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)' + "|" + ("-?" + ("(?:[_a-z]|" + nonAsciiPattern + "|" + escapePattern + ")") + ("(?:[_a-z0-9-]|" + nonAsciiPattern + "|" + escapePattern + ")") + "*") + ")?") + ")|(?:inherit|auto))";
+    var translateXRegExp = new RegExp("(translateX\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+    var translateRegExp = new RegExp("(translate\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,1}\\s*\\))", 'gi');
+    var translate3dRegExp = new RegExp("(translate3d\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,2}\\s*\\))", 'gi');
+    var rotateRegExp = new RegExp("(rotate[ZY]?\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+    return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign);
+  }
+};
+propertyValueConverters.objectPosition = propertyValueConverters.backgroundPosition;
+propertyValueConverters.margin = propertyValueConverters.padding;
+propertyValueConverters.borderWidth = propertyValueConverters.padding;
+propertyValueConverters.boxShadow = propertyValueConverters.textShadow;
+propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow;
+propertyValueConverters.borderStyle = propertyValueConverters.borderColor;
+propertyValueConverters.webkitTransform = propertyValueConverters.transform;
+propertyValueConverters.mozTransform = propertyValueConverters.transform;
+propertyValueConverters.WebkitTransform = propertyValueConverters.transform;
+propertyValueConverters.MozTransform = propertyValueConverters.transform;
+propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition;
+propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin;
+propertyValueConverters.webkitTransition = propertyValueConverters.transition;
+propertyValueConverters.mozTransition = propertyValueConverters.transition;
+propertyValueConverters.WebkitTransition = propertyValueConverters.transition;
+propertyValueConverters.MozTransition = propertyValueConverters.transition;
+propertyValueConverters.webkitTransitionProperty = propertyValueConverters.transitionProperty;
+propertyValueConverters.mozTransitionProperty = propertyValueConverters.transitionProperty;
+propertyValueConverters.WebkitTransitionProperty = propertyValueConverters.transitionProperty;
+propertyValueConverters.MozTransitionProperty = propertyValueConverters.transitionProperty;
+
+// kebab-case versions
+
+propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['border-color'] = propertyValueConverters.borderColor;
+propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius;
+propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage;
+propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition;
+propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX;
+propertyValueConverters['object-position'] = propertyValueConverters.objectPosition;
+propertyValueConverters['border-width'] = propertyValueConverters.padding;
+propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow;
+propertyValueConverters['border-style'] = propertyValueConverters.borderColor;
+propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform;
+propertyValueConverters['-moz-transform'] = propertyValueConverters.transform;
+propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin;
+propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin;
+propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin;
+propertyValueConverters['-webkit-transition'] = propertyValueConverters.transition;
+propertyValueConverters['-moz-transition'] = propertyValueConverters.transition;
+propertyValueConverters['transition-property'] = propertyValueConverters.transitionProperty;
+propertyValueConverters['-webkit-transition-property'] = propertyValueConverters.transitionProperty;
+propertyValueConverters['-moz-transition-property'] = propertyValueConverters.transitionProperty;
+
+// this will be an object of properties that map to their corresponding rtl property (their doppelganger)
+var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+// kebab-case versions
+['padding-left', 'padding-right'], ['margin-left', 'margin-right'], ['border-left', 'border-right'], ['border-left-color', 'border-right-color'], ['border-left-style', 'border-right-style'], ['border-left-width', 'border-right-width'], ['border-top-left-radius', 'border-top-right-radius'], ['border-bottom-left-radius', 'border-bottom-right-radius']]);
+var propsToIgnore = ['content'];
+
+// this is the same as the propertiesToConvert except for values
+var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+
+// Sorry for the regex 😞, but basically thisis used to replace _every_ instance of
+// `ltr`, `rtl`, `right`, and `left` in `backgroundimage` with the corresponding opposite.
+// A situation we're accepting here:
+// url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
+// Definite trade-offs here, but I think it's a good call.
+var bgImgDirectionRegex = new RegExp('(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)', 'g');
+var bgPosDirectionRegex = new RegExp('(left)|(right)');
+
+/**
+ * converts properties and values in the CSS in JS object to their corresponding RTL values
+ * @param {Object} object the CSS in JS object
+ * @return {Object} the RTL converted object
+ */
+function convert(object) {
+  return Object.keys(object).reduce(function (newObj, originalKey) {
+    var originalValue = object[originalKey];
+    if (isString(originalValue)) {
+      // you're welcome to later code 😺
+      originalValue = originalValue.trim();
+    }
+
+    // Some properties should never be transformed
+    if (includes(propsToIgnore, originalKey)) {
+      newObj[originalKey] = originalValue;
+      return newObj;
+    }
+    var _convertProperty = convertProperty(originalKey, originalValue),
+      key = _convertProperty.key,
+      value = _convertProperty.value;
+    newObj[key] = value;
+    return newObj;
+  }, Array.isArray(object) ? [] : {});
+}
+
+/**
+ * Converts a property and its value to the corresponding RTL key and value
+ * @param {String} originalKey the original property key
+ * @param {Number|String|Object} originalValue the original css property value
+ * @return {Object} the new {key, value} pair
+ */
+function convertProperty(originalKey, originalValue) {
+  var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue);
+  var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey);
+  var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue);
+  return {
+    key: key,
+    value: value
+  };
+}
+
+/**
+ * This gets the RTL version of the given property if it has a corresponding RTL property
+ * @param {String} property the name of the property
+ * @return {String} the name of the RTL property
+ */
+function getPropertyDoppelganger(property) {
+  return propertiesToConvert[property] || property;
+}
+
+/**
+ * This converts the given value to the RTL version of that value based on the key
+ * @param {String} key this is the key (note: this should be the RTL version of the originalKey)
+ * @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well
+ * @return {String|Number|Object} the converted value
+ */
+function getValueDoppelganger(key, originalValue) {
+  if (!canConvertValue(originalValue)) {
+    return originalValue;
+  }
+  if (isObject(originalValue)) {
+    return convert(originalValue); // recursion 🌀
+  }
+
+  var isNum = isNumber(originalValue);
+  var isFunc = isFunction(originalValue);
+  var importantlessValue = isNum || isFunc ? originalValue : originalValue.replace(/ !important.*?$/, '');
+  var isImportant = !isNum && importantlessValue.length !== originalValue.length;
+  var valueConverter = propertyValueConverters[key];
+  var newValue;
+  if (valueConverter) {
+    newValue = valueConverter({
+      value: importantlessValue,
+      valuesToConvert: valuesToConvert,
+      propertiesToConvert: propertiesToConvert,
+      isRtl: true,
+      bgImgDirectionRegex: bgImgDirectionRegex,
+      bgPosDirectionRegex: bgPosDirectionRegex
+    });
+  } else {
+    newValue = valuesToConvert[importantlessValue] || importantlessValue;
+  }
+  if (isImportant) {
+    return newValue + " !important";
+  }
+  return newValue;
+}
+
+export { propertiesToConvert as a, propsToIgnore as b, convert as c, convertProperty as d, getValueDoppelganger as e, arrayToObject as f, getPropertyDoppelganger as g, calculateNewBackgroundPosition as h, canConvertValue as i, flipTransformSign as j, flipSign as k, handleQuartetValues as l, includes as m, isBoolean as n, isFunction as o, propertyValueConverters as p, isNumber as q, isNullOrUndefined as r, isObject as s, isString as t, getValuesAsList as u, valuesToConvert as v, splitShadow as w };

node_modules/rtl-css-js/dist/esm/core.js

@@ -0,0 +1 @@
+export { f as arrayToObject, h as calculateNewBackgroundPosition, j as calculateNewTranslate, i as canConvertValue, c as convert, d as convertProperty, k as flipSign, j as flipTransformSign, g as getPropertyDoppelganger, e as getValueDoppelganger, u as getValuesAsList, l as handleQuartetValues, m as includes, n as isBoolean, o as isFunction, r as isNullOrUndefined, q as isNumber, s as isObject, t as isString, a as propertiesToConvert, p as propertyValueConverters, b as propsToIgnore, w as splitShadow, v as valuesToConvert } from './convert-9768a965.js';

node_modules/rtl-css-js/dist/esm/index.js

@@ -0,0 +1,5 @@
+import { c as convert } from './convert-9768a965.js';
+
+
+
+export default convert;

node_modules/rtl-css-js/dist/rtl-css-js.core.umd.js

@@ -0,0 +1,533 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = global || self, factory(global.rtlCSSJSCore = {}));
+}(this, (function (exports) { 'use strict';
+
+  /**
+   * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+   * @param {Array} array the array of pairs
+   * @return {Object} the {key, value} pair object
+   */
+  function arrayToObject(array) {
+    return array.reduce(function (obj, _ref) {
+      var prop1 = _ref[0],
+        prop2 = _ref[1];
+      obj[prop1] = prop2;
+      obj[prop2] = prop1;
+      return obj;
+    }, {});
+  }
+  function isBoolean(val) {
+    return typeof val === 'boolean';
+  }
+  function isFunction(val) {
+    return typeof val === 'function';
+  }
+  function isNumber(val) {
+    return typeof val === 'number';
+  }
+  function isNullOrUndefined(val) {
+    return val === null || typeof val === 'undefined';
+  }
+  function isObject(val) {
+    return val && typeof val === 'object';
+  }
+  function isString(val) {
+    return typeof val === 'string';
+  }
+  function includes(inclusive, inclusee) {
+    return inclusive.indexOf(inclusee) !== -1;
+  }
+
+  /**
+   * Flip the sign of a CSS value, possibly with a unit.
+   *
+   * We can't just negate the value with unary minus due to the units.
+   *
+   * @private
+   * @param {String} value - the original value (for example 77%)
+   * @return {String} the result (for example -77%)
+   */
+  function flipSign(value) {
+    if (parseFloat(value) === 0) {
+      // Don't mangle zeroes
+      return value;
+    }
+    if (value[0] === '-') {
+      return value.slice(1);
+    }
+    return "-" + value;
+  }
+  function flipTransformSign(match, prefix, offset, suffix) {
+    return prefix + flipSign(offset) + suffix;
+  }
+
+  /**
+   * Takes a percentage for background position and inverts it.
+   * This was copied and modified from CSSJanus:
+   * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+   * @param {String} value - the original value (for example 77%)
+   * @return {String} the result (for example 23%)
+   */
+  function calculateNewBackgroundPosition(value) {
+    var idx = value.indexOf('.');
+    if (idx === -1) {
+      value = 100 - parseFloat(value) + "%";
+    } else {
+      // Two off, one for the "%" at the end, one for the dot itself
+      var len = value.length - idx - 2;
+      value = 100 - parseFloat(value);
+      value = value.toFixed(len) + "%";
+    }
+    return value;
+  }
+
+  /**
+   * This takes a list of CSS values and converts it to an array
+   * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+   * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+   */
+  function getValuesAsList(value) {
+    return value.replace(/ +/g, ' ') // remove all extraneous spaces
+    .split(' ').map(function (i) {
+      return i.trim();
+    }) // get rid of extra space before/after each item
+    .filter(Boolean) // get rid of empty strings
+    // join items which are within parenthese
+    // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
+    .reduce(function (_ref2, item) {
+      var list = _ref2.list,
+        state = _ref2.state;
+      var openParansCount = (item.match(/\(/g) || []).length;
+      var closedParansCount = (item.match(/\)/g) || []).length;
+      if (state.parensDepth > 0) {
+        list[list.length - 1] = list[list.length - 1] + " " + item;
+      } else {
+        list.push(item);
+      }
+      state.parensDepth += openParansCount - closedParansCount;
+      return {
+        list: list,
+        state: state
+      };
+    }, {
+      list: [],
+      state: {
+        parensDepth: 0
+      }
+    }).list;
+  }
+
+  /**
+   * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+   * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+   * simply returns the value in those cases (which is the correct behavior)
+   * @return {String} the result - `1px 4px 3px 2px` for example.
+   */
+  function handleQuartetValues(value) {
+    var splitValues = getValuesAsList(value);
+    if (splitValues.length <= 3 || splitValues.length > 4) {
+      return value;
+    }
+    var top = splitValues[0],
+      right = splitValues[1],
+      bottom = splitValues[2],
+      left = splitValues[3];
+    return [top, left, bottom, right].join(' ');
+  }
+
+  /**
+   *
+   * @param {String|Number|Object} value css property value to test
+   * @returns If the css property value can(should?) have an RTL equivalent
+   */
+  function canConvertValue(value) {
+    return !isBoolean(value) && !isNullOrUndefined(value);
+  }
+
+  /**
+   * Splits a shadow style into its separate shadows using the comma delimiter, but creating an exception
+   * for comma separated values in parentheses often used for rgba colours.
+   * @param {String} value
+   * @returns {Array} array of all box shadow values in the string
+   */
+  function splitShadow(value) {
+    var shadows = [];
+    var start = 0;
+    var end = 0;
+    var rgba = false;
+    while (end < value.length) {
+      if (!rgba && value[end] === ',') {
+        shadows.push(value.substring(start, end).trim());
+        end++;
+        start = end;
+      } else if (value[end] === "(") {
+        rgba = true;
+        end++;
+      } else if (value[end] === ')') {
+        rgba = false;
+        end++;
+      } else {
+        end++;
+      }
+    }
+
+    // push the last shadow value if there is one
+    // istanbul ignore next
+    if (start != end) {
+      shadows.push(value.substring(start, end + 1));
+    }
+    return shadows;
+  }
+
+  // some values require a little fudging, that fudging goes here.
+  var propertyValueConverters = {
+    padding: function padding(_ref) {
+      var value = _ref.value;
+      if (isNumber(value)) {
+        return value;
+      }
+      return handleQuartetValues(value);
+    },
+    textShadow: function textShadow(_ref2) {
+      var value = _ref2.value;
+      var flippedShadows = splitShadow(value).map(function (shadow) {
+        // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
+        return shadow.replace(/(^|\s)(-*)([.|\d]+)/, function (match, whiteSpace, negative, number) {
+          if (number === '0') {
+            return match;
+          }
+          var doubleNegative = negative === '' ? '-' : '';
+          return "" + whiteSpace + doubleNegative + number;
+        });
+      });
+      return flippedShadows.join(',');
+    },
+    borderColor: function borderColor(_ref3) {
+      var value = _ref3.value;
+      return handleQuartetValues(value);
+    },
+    borderRadius: function borderRadius(_ref4) {
+      var value = _ref4.value;
+      if (isNumber(value)) {
+        return value;
+      }
+      if (includes(value, '/')) {
+        var _value$split = value.split('/'),
+          radius1 = _value$split[0],
+          radius2 = _value$split[1];
+        var convertedRadius1 = propertyValueConverters.borderRadius({
+          value: radius1.trim()
+        });
+        var convertedRadius2 = propertyValueConverters.borderRadius({
+          value: radius2.trim()
+        });
+        return convertedRadius1 + " / " + convertedRadius2;
+      }
+      var splitValues = getValuesAsList(value);
+      switch (splitValues.length) {
+        case 2:
+          {
+            return splitValues.reverse().join(' ');
+          }
+        case 4:
+          {
+            var topLeft = splitValues[0],
+              topRight = splitValues[1],
+              bottomRight = splitValues[2],
+              bottomLeft = splitValues[3];
+            return [topRight, topLeft, bottomLeft, bottomRight].join(' ');
+          }
+        default:
+          {
+            return value;
+          }
+      }
+    },
+    background: function background(_ref5) {
+      var value = _ref5.value,
+        valuesToConvert = _ref5.valuesToConvert,
+        isRtl = _ref5.isRtl,
+        bgImgDirectionRegex = _ref5.bgImgDirectionRegex,
+        bgPosDirectionRegex = _ref5.bgPosDirectionRegex;
+      if (isNumber(value)) {
+        return value;
+      }
+
+      // Yeah, this is in need of a refactor 🙃...
+      // but this property is a tough cookie 🍪
+      // get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value
+      var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim();
+      // replace that backgroundPosition value with the converted version
+      value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition({
+        value: backgroundPositionValue,
+        valuesToConvert: valuesToConvert,
+        isRtl: isRtl,
+        bgPosDirectionRegex: bgPosDirectionRegex
+      }));
+      // do the backgroundImage value replacing on the whole value (because why not?)
+      return propertyValueConverters.backgroundImage({
+        value: value,
+        valuesToConvert: valuesToConvert,
+        bgImgDirectionRegex: bgImgDirectionRegex
+      });
+    },
+    backgroundImage: function backgroundImage(_ref6) {
+      var value = _ref6.value,
+        valuesToConvert = _ref6.valuesToConvert,
+        bgImgDirectionRegex = _ref6.bgImgDirectionRegex;
+      if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) {
+        return value;
+      }
+      return value.replace(bgImgDirectionRegex, function (match, g1, group2) {
+        return match.replace(group2, valuesToConvert[group2]);
+      });
+    },
+    backgroundPosition: function backgroundPosition(_ref7) {
+      var value = _ref7.value,
+        valuesToConvert = _ref7.valuesToConvert,
+        isRtl = _ref7.isRtl,
+        bgPosDirectionRegex = _ref7.bgPosDirectionRegex;
+      return value
+      // intentionally only grabbing the first instance of this because that represents `left`
+      .replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) {
+        return calculateNewBackgroundPosition(group);
+      }).replace(bgPosDirectionRegex, function (match) {
+        return valuesToConvert[match];
+      });
+    },
+    backgroundPositionX: function backgroundPositionX(_ref8) {
+      var value = _ref8.value,
+        valuesToConvert = _ref8.valuesToConvert,
+        isRtl = _ref8.isRtl,
+        bgPosDirectionRegex = _ref8.bgPosDirectionRegex;
+      if (isNumber(value)) {
+        return value;
+      }
+      return propertyValueConverters.backgroundPosition({
+        value: value,
+        valuesToConvert: valuesToConvert,
+        isRtl: isRtl,
+        bgPosDirectionRegex: bgPosDirectionRegex
+      });
+    },
+    transition: function transition(_ref9) {
+      var value = _ref9.value,
+        propertiesToConvert = _ref9.propertiesToConvert;
+      return value.split(/,\s*/g).map(function (transition) {
+        var values = transition.split(' ');
+
+        // Property is always defined first
+        values[0] = propertiesToConvert[values[0]] || values[0];
+        return values.join(' ');
+      }).join(', ');
+    },
+    transitionProperty: function transitionProperty(_ref10) {
+      var value = _ref10.value,
+        propertiesToConvert = _ref10.propertiesToConvert;
+      return value.split(/,\s*/g).map(function (prop) {
+        return propertiesToConvert[prop] || prop;
+      }).join(', ');
+    },
+    transform: function transform(_ref11) {
+      var value = _ref11.value;
+      // This was copied and modified from CSSJanus:
+      // https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153
+      var nonAsciiPattern = "[^\\u0020-\\u007e]";
+      var escapePattern = "(?:" + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + "|\\\\[^\\r\\n\\f0-9a-f])";
+      var signedQuantPattern = "((?:-?" + ('(?:[0-9]*\\.[0-9]+|[0-9]+)' + "(?:\\s*" + '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)' + "|" + ("-?" + ("(?:[_a-z]|" + nonAsciiPattern + "|" + escapePattern + ")") + ("(?:[_a-z0-9-]|" + nonAsciiPattern + "|" + escapePattern + ")") + "*") + ")?") + ")|(?:inherit|auto))";
+      var translateXRegExp = new RegExp("(translateX\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+      var translateRegExp = new RegExp("(translate\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,1}\\s*\\))", 'gi');
+      var translate3dRegExp = new RegExp("(translate3d\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,2}\\s*\\))", 'gi');
+      var rotateRegExp = new RegExp("(rotate[ZY]?\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+      return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign);
+    }
+  };
+  propertyValueConverters.objectPosition = propertyValueConverters.backgroundPosition;
+  propertyValueConverters.margin = propertyValueConverters.padding;
+  propertyValueConverters.borderWidth = propertyValueConverters.padding;
+  propertyValueConverters.boxShadow = propertyValueConverters.textShadow;
+  propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.borderStyle = propertyValueConverters.borderColor;
+  propertyValueConverters.webkitTransform = propertyValueConverters.transform;
+  propertyValueConverters.mozTransform = propertyValueConverters.transform;
+  propertyValueConverters.WebkitTransform = propertyValueConverters.transform;
+  propertyValueConverters.MozTransform = propertyValueConverters.transform;
+  propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition;
+  propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.webkitTransition = propertyValueConverters.transition;
+  propertyValueConverters.mozTransition = propertyValueConverters.transition;
+  propertyValueConverters.WebkitTransition = propertyValueConverters.transition;
+  propertyValueConverters.MozTransition = propertyValueConverters.transition;
+  propertyValueConverters.webkitTransitionProperty = propertyValueConverters.transitionProperty;
+  propertyValueConverters.mozTransitionProperty = propertyValueConverters.transitionProperty;
+  propertyValueConverters.WebkitTransitionProperty = propertyValueConverters.transitionProperty;
+  propertyValueConverters.MozTransitionProperty = propertyValueConverters.transitionProperty;
+
+  // kebab-case versions
+
+  propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['border-color'] = propertyValueConverters.borderColor;
+  propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius;
+  propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage;
+  propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition;
+  propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX;
+  propertyValueConverters['object-position'] = propertyValueConverters.objectPosition;
+  propertyValueConverters['border-width'] = propertyValueConverters.padding;
+  propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['border-style'] = propertyValueConverters.borderColor;
+  propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform;
+  propertyValueConverters['-moz-transform'] = propertyValueConverters.transform;
+  propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin;
+  propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin;
+  propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin;
+  propertyValueConverters['-webkit-transition'] = propertyValueConverters.transition;
+  propertyValueConverters['-moz-transition'] = propertyValueConverters.transition;
+  propertyValueConverters['transition-property'] = propertyValueConverters.transitionProperty;
+  propertyValueConverters['-webkit-transition-property'] = propertyValueConverters.transitionProperty;
+  propertyValueConverters['-moz-transition-property'] = propertyValueConverters.transitionProperty;
+
+  // this will be an object of properties that map to their corresponding rtl property (their doppelganger)
+  var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+  // kebab-case versions
+  ['padding-left', 'padding-right'], ['margin-left', 'margin-right'], ['border-left', 'border-right'], ['border-left-color', 'border-right-color'], ['border-left-style', 'border-right-style'], ['border-left-width', 'border-right-width'], ['border-top-left-radius', 'border-top-right-radius'], ['border-bottom-left-radius', 'border-bottom-right-radius']]);
+  var propsToIgnore = ['content'];
+
+  // this is the same as the propertiesToConvert except for values
+  var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+
+  // Sorry for the regex 😞, but basically thisis used to replace _every_ instance of
+  // `ltr`, `rtl`, `right`, and `left` in `backgroundimage` with the corresponding opposite.
+  // A situation we're accepting here:
+  // url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
+  // Definite trade-offs here, but I think it's a good call.
+  var bgImgDirectionRegex = new RegExp('(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)', 'g');
+  var bgPosDirectionRegex = new RegExp('(left)|(right)');
+
+  /**
+   * converts properties and values in the CSS in JS object to their corresponding RTL values
+   * @param {Object} object the CSS in JS object
+   * @return {Object} the RTL converted object
+   */
+  function convert(object) {
+    return Object.keys(object).reduce(function (newObj, originalKey) {
+      var originalValue = object[originalKey];
+      if (isString(originalValue)) {
+        // you're welcome to later code 😺
+        originalValue = originalValue.trim();
+      }
+
+      // Some properties should never be transformed
+      if (includes(propsToIgnore, originalKey)) {
+        newObj[originalKey] = originalValue;
+        return newObj;
+      }
+      var _convertProperty = convertProperty(originalKey, originalValue),
+        key = _convertProperty.key,
+        value = _convertProperty.value;
+      newObj[key] = value;
+      return newObj;
+    }, Array.isArray(object) ? [] : {});
+  }
+
+  /**
+   * Converts a property and its value to the corresponding RTL key and value
+   * @param {String} originalKey the original property key
+   * @param {Number|String|Object} originalValue the original css property value
+   * @return {Object} the new {key, value} pair
+   */
+  function convertProperty(originalKey, originalValue) {
+    var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue);
+    var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey);
+    var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue);
+    return {
+      key: key,
+      value: value
+    };
+  }
+
+  /**
+   * This gets the RTL version of the given property if it has a corresponding RTL property
+   * @param {String} property the name of the property
+   * @return {String} the name of the RTL property
+   */
+  function getPropertyDoppelganger(property) {
+    return propertiesToConvert[property] || property;
+  }
+
+  /**
+   * This converts the given value to the RTL version of that value based on the key
+   * @param {String} key this is the key (note: this should be the RTL version of the originalKey)
+   * @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well
+   * @return {String|Number|Object} the converted value
+   */
+  function getValueDoppelganger(key, originalValue) {
+    if (!canConvertValue(originalValue)) {
+      return originalValue;
+    }
+    if (isObject(originalValue)) {
+      return convert(originalValue); // recursion 🌀
+    }
+
+    var isNum = isNumber(originalValue);
+    var isFunc = isFunction(originalValue);
+    var importantlessValue = isNum || isFunc ? originalValue : originalValue.replace(/ !important.*?$/, '');
+    var isImportant = !isNum && importantlessValue.length !== originalValue.length;
+    var valueConverter = propertyValueConverters[key];
+    var newValue;
+    if (valueConverter) {
+      newValue = valueConverter({
+        value: importantlessValue,
+        valuesToConvert: valuesToConvert,
+        propertiesToConvert: propertiesToConvert,
+        isRtl: true,
+        bgImgDirectionRegex: bgImgDirectionRegex,
+        bgPosDirectionRegex: bgPosDirectionRegex
+      });
+    } else {
+      newValue = valuesToConvert[importantlessValue] || importantlessValue;
+    }
+    if (isImportant) {
+      return newValue + " !important";
+    }
+    return newValue;
+  }
+
+  exports.arrayToObject = arrayToObject;
+  exports.calculateNewBackgroundPosition = calculateNewBackgroundPosition;
+  exports.calculateNewTranslate = flipTransformSign;
+  exports.canConvertValue = canConvertValue;
+  exports.convert = convert;
+  exports.convertProperty = convertProperty;
+  exports.flipSign = flipSign;
+  exports.flipTransformSign = flipTransformSign;
+  exports.getPropertyDoppelganger = getPropertyDoppelganger;
+  exports.getValueDoppelganger = getValueDoppelganger;
+  exports.getValuesAsList = getValuesAsList;
+  exports.handleQuartetValues = handleQuartetValues;
+  exports.includes = includes;
+  exports.isBoolean = isBoolean;
+  exports.isFunction = isFunction;
+  exports.isNullOrUndefined = isNullOrUndefined;
+  exports.isNumber = isNumber;
+  exports.isObject = isObject;
+  exports.isString = isString;
+  exports.propertiesToConvert = propertiesToConvert;
+  exports.propertyValueConverters = propertyValueConverters;
+  exports.propsToIgnore = propsToIgnore;
+  exports.splitShadow = splitShadow;
+  exports.valuesToConvert = valuesToConvert;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=rtl-css-js.core.umd.js.map

node_modules/rtl-css-js/dist/rtl-css-js.umd.js

@@ -0,0 +1,508 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.RtlCssJs = factory());
+}(this, (function () { 'use strict';
+
+  /**
+   * Takes an array of [keyValue1, keyValue2] pairs and creates an object of {keyValue1: keyValue2, keyValue2: keyValue1}
+   * @param {Array} array the array of pairs
+   * @return {Object} the {key, value} pair object
+   */
+  function arrayToObject(array) {
+    return array.reduce(function (obj, _ref) {
+      var prop1 = _ref[0],
+        prop2 = _ref[1];
+      obj[prop1] = prop2;
+      obj[prop2] = prop1;
+      return obj;
+    }, {});
+  }
+  function isBoolean(val) {
+    return typeof val === 'boolean';
+  }
+  function isFunction(val) {
+    return typeof val === 'function';
+  }
+  function isNumber(val) {
+    return typeof val === 'number';
+  }
+  function isNullOrUndefined(val) {
+    return val === null || typeof val === 'undefined';
+  }
+  function isObject(val) {
+    return val && typeof val === 'object';
+  }
+  function isString(val) {
+    return typeof val === 'string';
+  }
+  function includes(inclusive, inclusee) {
+    return inclusive.indexOf(inclusee) !== -1;
+  }
+
+  /**
+   * Flip the sign of a CSS value, possibly with a unit.
+   *
+   * We can't just negate the value with unary minus due to the units.
+   *
+   * @private
+   * @param {String} value - the original value (for example 77%)
+   * @return {String} the result (for example -77%)
+   */
+  function flipSign(value) {
+    if (parseFloat(value) === 0) {
+      // Don't mangle zeroes
+      return value;
+    }
+    if (value[0] === '-') {
+      return value.slice(1);
+    }
+    return "-" + value;
+  }
+  function flipTransformSign(match, prefix, offset, suffix) {
+    return prefix + flipSign(offset) + suffix;
+  }
+
+  /**
+   * Takes a percentage for background position and inverts it.
+   * This was copied and modified from CSSJanus:
+   * https://github.com/cssjanus/cssjanus/blob/4245f834365f6cfb0239191a151432fb85abab23/src/cssjanus.js#L152-L175
+   * @param {String} value - the original value (for example 77%)
+   * @return {String} the result (for example 23%)
+   */
+  function calculateNewBackgroundPosition(value) {
+    var idx = value.indexOf('.');
+    if (idx === -1) {
+      value = 100 - parseFloat(value) + "%";
+    } else {
+      // Two off, one for the "%" at the end, one for the dot itself
+      var len = value.length - idx - 2;
+      value = 100 - parseFloat(value);
+      value = value.toFixed(len) + "%";
+    }
+    return value;
+  }
+
+  /**
+   * This takes a list of CSS values and converts it to an array
+   * @param {String} value - something like `1px`, `1px 2em`, or `3pt rgb(150, 230, 550) 40px calc(100% - 5px)`
+   * @return {Array} the split values (for example: `['3pt', 'rgb(150, 230, 550)', '40px', 'calc(100% - 5px)']`)
+   */
+  function getValuesAsList(value) {
+    return value.replace(/ +/g, ' ') // remove all extraneous spaces
+    .split(' ').map(function (i) {
+      return i.trim();
+    }) // get rid of extra space before/after each item
+    .filter(Boolean) // get rid of empty strings
+    // join items which are within parenthese
+    // luckily `calc (100% - 5px)` is invalid syntax and it must be `calc(100% - 5px)`, otherwise this would be even more complex
+    .reduce(function (_ref2, item) {
+      var list = _ref2.list,
+        state = _ref2.state;
+      var openParansCount = (item.match(/\(/g) || []).length;
+      var closedParansCount = (item.match(/\)/g) || []).length;
+      if (state.parensDepth > 0) {
+        list[list.length - 1] = list[list.length - 1] + " " + item;
+      } else {
+        list.push(item);
+      }
+      state.parensDepth += openParansCount - closedParansCount;
+      return {
+        list: list,
+        state: state
+      };
+    }, {
+      list: [],
+      state: {
+        parensDepth: 0
+      }
+    }).list;
+  }
+
+  /**
+   * This is intended for properties that are `top right bottom left` and will switch them to `top left bottom right`
+   * @param {String} value - `1px 2px 3px 4px` for example, but also handles cases where there are too few/too many and
+   * simply returns the value in those cases (which is the correct behavior)
+   * @return {String} the result - `1px 4px 3px 2px` for example.
+   */
+  function handleQuartetValues(value) {
+    var splitValues = getValuesAsList(value);
+    if (splitValues.length <= 3 || splitValues.length > 4) {
+      return value;
+    }
+    var top = splitValues[0],
+      right = splitValues[1],
+      bottom = splitValues[2],
+      left = splitValues[3];
+    return [top, left, bottom, right].join(' ');
+  }
+
+  /**
+   *
+   * @param {String|Number|Object} value css property value to test
+   * @returns If the css property value can(should?) have an RTL equivalent
+   */
+  function canConvertValue(value) {
+    return !isBoolean(value) && !isNullOrUndefined(value);
+  }
+
+  /**
+   * Splits a shadow style into its separate shadows using the comma delimiter, but creating an exception
+   * for comma separated values in parentheses often used for rgba colours.
+   * @param {String} value
+   * @returns {Array} array of all box shadow values in the string
+   */
+  function splitShadow(value) {
+    var shadows = [];
+    var start = 0;
+    var end = 0;
+    var rgba = false;
+    while (end < value.length) {
+      if (!rgba && value[end] === ',') {
+        shadows.push(value.substring(start, end).trim());
+        end++;
+        start = end;
+      } else if (value[end] === "(") {
+        rgba = true;
+        end++;
+      } else if (value[end] === ')') {
+        rgba = false;
+        end++;
+      } else {
+        end++;
+      }
+    }
+
+    // push the last shadow value if there is one
+    // istanbul ignore next
+    if (start != end) {
+      shadows.push(value.substring(start, end + 1));
+    }
+    return shadows;
+  }
+
+  // some values require a little fudging, that fudging goes here.
+  var propertyValueConverters = {
+    padding: function padding(_ref) {
+      var value = _ref.value;
+      if (isNumber(value)) {
+        return value;
+      }
+      return handleQuartetValues(value);
+    },
+    textShadow: function textShadow(_ref2) {
+      var value = _ref2.value;
+      var flippedShadows = splitShadow(value).map(function (shadow) {
+        // intentionally leaving off the `g` flag here because we only want to change the first number (which is the offset-x)
+        return shadow.replace(/(^|\s)(-*)([.|\d]+)/, function (match, whiteSpace, negative, number) {
+          if (number === '0') {
+            return match;
+          }
+          var doubleNegative = negative === '' ? '-' : '';
+          return "" + whiteSpace + doubleNegative + number;
+        });
+      });
+      return flippedShadows.join(',');
+    },
+    borderColor: function borderColor(_ref3) {
+      var value = _ref3.value;
+      return handleQuartetValues(value);
+    },
+    borderRadius: function borderRadius(_ref4) {
+      var value = _ref4.value;
+      if (isNumber(value)) {
+        return value;
+      }
+      if (includes(value, '/')) {
+        var _value$split = value.split('/'),
+          radius1 = _value$split[0],
+          radius2 = _value$split[1];
+        var convertedRadius1 = propertyValueConverters.borderRadius({
+          value: radius1.trim()
+        });
+        var convertedRadius2 = propertyValueConverters.borderRadius({
+          value: radius2.trim()
+        });
+        return convertedRadius1 + " / " + convertedRadius2;
+      }
+      var splitValues = getValuesAsList(value);
+      switch (splitValues.length) {
+        case 2:
+          {
+            return splitValues.reverse().join(' ');
+          }
+        case 4:
+          {
+            var topLeft = splitValues[0],
+              topRight = splitValues[1],
+              bottomRight = splitValues[2],
+              bottomLeft = splitValues[3];
+            return [topRight, topLeft, bottomLeft, bottomRight].join(' ');
+          }
+        default:
+          {
+            return value;
+          }
+      }
+    },
+    background: function background(_ref5) {
+      var value = _ref5.value,
+        valuesToConvert = _ref5.valuesToConvert,
+        isRtl = _ref5.isRtl,
+        bgImgDirectionRegex = _ref5.bgImgDirectionRegex,
+        bgPosDirectionRegex = _ref5.bgPosDirectionRegex;
+      if (isNumber(value)) {
+        return value;
+      }
+
+      // Yeah, this is in need of a refactor 🙃...
+      // but this property is a tough cookie 🍪
+      // get the backgroundPosition out of the string by removing everything that couldn't be the backgroundPosition value
+      var backgroundPositionValue = value.replace(/(url\(.*?\))|(rgba?\(.*?\))|(hsl\(.*?\))|(#[a-fA-F0-9]+)|((^| )(\D)+( |$))/g, '').trim();
+      // replace that backgroundPosition value with the converted version
+      value = value.replace(backgroundPositionValue, propertyValueConverters.backgroundPosition({
+        value: backgroundPositionValue,
+        valuesToConvert: valuesToConvert,
+        isRtl: isRtl,
+        bgPosDirectionRegex: bgPosDirectionRegex
+      }));
+      // do the backgroundImage value replacing on the whole value (because why not?)
+      return propertyValueConverters.backgroundImage({
+        value: value,
+        valuesToConvert: valuesToConvert,
+        bgImgDirectionRegex: bgImgDirectionRegex
+      });
+    },
+    backgroundImage: function backgroundImage(_ref6) {
+      var value = _ref6.value,
+        valuesToConvert = _ref6.valuesToConvert,
+        bgImgDirectionRegex = _ref6.bgImgDirectionRegex;
+      if (!includes(value, 'url(') && !includes(value, 'linear-gradient(')) {
+        return value;
+      }
+      return value.replace(bgImgDirectionRegex, function (match, g1, group2) {
+        return match.replace(group2, valuesToConvert[group2]);
+      });
+    },
+    backgroundPosition: function backgroundPosition(_ref7) {
+      var value = _ref7.value,
+        valuesToConvert = _ref7.valuesToConvert,
+        isRtl = _ref7.isRtl,
+        bgPosDirectionRegex = _ref7.bgPosDirectionRegex;
+      return value
+      // intentionally only grabbing the first instance of this because that represents `left`
+      .replace(isRtl ? /^((-|\d|\.)+%)/ : null, function (match, group) {
+        return calculateNewBackgroundPosition(group);
+      }).replace(bgPosDirectionRegex, function (match) {
+        return valuesToConvert[match];
+      });
+    },
+    backgroundPositionX: function backgroundPositionX(_ref8) {
+      var value = _ref8.value,
+        valuesToConvert = _ref8.valuesToConvert,
+        isRtl = _ref8.isRtl,
+        bgPosDirectionRegex = _ref8.bgPosDirectionRegex;
+      if (isNumber(value)) {
+        return value;
+      }
+      return propertyValueConverters.backgroundPosition({
+        value: value,
+        valuesToConvert: valuesToConvert,
+        isRtl: isRtl,
+        bgPosDirectionRegex: bgPosDirectionRegex
+      });
+    },
+    transition: function transition(_ref9) {
+      var value = _ref9.value,
+        propertiesToConvert = _ref9.propertiesToConvert;
+      return value.split(/,\s*/g).map(function (transition) {
+        var values = transition.split(' ');
+
+        // Property is always defined first
+        values[0] = propertiesToConvert[values[0]] || values[0];
+        return values.join(' ');
+      }).join(', ');
+    },
+    transitionProperty: function transitionProperty(_ref10) {
+      var value = _ref10.value,
+        propertiesToConvert = _ref10.propertiesToConvert;
+      return value.split(/,\s*/g).map(function (prop) {
+        return propertiesToConvert[prop] || prop;
+      }).join(', ');
+    },
+    transform: function transform(_ref11) {
+      var value = _ref11.value;
+      // This was copied and modified from CSSJanus:
+      // https://github.com/cssjanus/cssjanus/blob/4a40f001b1ba35567112d8b8e1d9d95eda4234c3/src/cssjanus.js#L152-L153
+      var nonAsciiPattern = "[^\\u0020-\\u007e]";
+      var escapePattern = "(?:" + '(?:(?:\\[0-9a-f]{1,6})(?:\\r\\n|\\s)?)' + "|\\\\[^\\r\\n\\f0-9a-f])";
+      var signedQuantPattern = "((?:-?" + ('(?:[0-9]*\\.[0-9]+|[0-9]+)' + "(?:\\s*" + '(?:em|ex|px|cm|mm|in|pt|pc|deg|rad|grad|ms|s|hz|khz|%)' + "|" + ("-?" + ("(?:[_a-z]|" + nonAsciiPattern + "|" + escapePattern + ")") + ("(?:[_a-z0-9-]|" + nonAsciiPattern + "|" + escapePattern + ")") + "*") + ")?") + ")|(?:inherit|auto))";
+      var translateXRegExp = new RegExp("(translateX\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+      var translateRegExp = new RegExp("(translate\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,1}\\s*\\))", 'gi');
+      var translate3dRegExp = new RegExp("(translate3d\\s*\\(\\s*)" + signedQuantPattern + "((?:\\s*,\\s*" + signedQuantPattern + "){0,2}\\s*\\))", 'gi');
+      var rotateRegExp = new RegExp("(rotate[ZY]?\\s*\\(\\s*)" + signedQuantPattern + "(\\s*\\))", 'gi');
+      return value.replace(translateXRegExp, flipTransformSign).replace(translateRegExp, flipTransformSign).replace(translate3dRegExp, flipTransformSign).replace(rotateRegExp, flipTransformSign);
+    }
+  };
+  propertyValueConverters.objectPosition = propertyValueConverters.backgroundPosition;
+  propertyValueConverters.margin = propertyValueConverters.padding;
+  propertyValueConverters.borderWidth = propertyValueConverters.padding;
+  propertyValueConverters.boxShadow = propertyValueConverters.textShadow;
+  propertyValueConverters.webkitBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.mozBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.WebkitBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.MozBoxShadow = propertyValueConverters.boxShadow;
+  propertyValueConverters.borderStyle = propertyValueConverters.borderColor;
+  propertyValueConverters.webkitTransform = propertyValueConverters.transform;
+  propertyValueConverters.mozTransform = propertyValueConverters.transform;
+  propertyValueConverters.WebkitTransform = propertyValueConverters.transform;
+  propertyValueConverters.MozTransform = propertyValueConverters.transform;
+  propertyValueConverters.transformOrigin = propertyValueConverters.backgroundPosition;
+  propertyValueConverters.webkitTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.mozTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.WebkitTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.MozTransformOrigin = propertyValueConverters.transformOrigin;
+  propertyValueConverters.webkitTransition = propertyValueConverters.transition;
+  propertyValueConverters.mozTransition = propertyValueConverters.transition;
+  propertyValueConverters.WebkitTransition = propertyValueConverters.transition;
+  propertyValueConverters.MozTransition = propertyValueConverters.transition;
+  propertyValueConverters.webkitTransitionProperty = propertyValueConverters.transitionProperty;
+  propertyValueConverters.mozTransitionProperty = propertyValueConverters.transitionProperty;
+  propertyValueConverters.WebkitTransitionProperty = propertyValueConverters.transitionProperty;
+  propertyValueConverters.MozTransitionProperty = propertyValueConverters.transitionProperty;
+
+  // kebab-case versions
+
+  propertyValueConverters['text-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['border-color'] = propertyValueConverters.borderColor;
+  propertyValueConverters['border-radius'] = propertyValueConverters.borderRadius;
+  propertyValueConverters['background-image'] = propertyValueConverters.backgroundImage;
+  propertyValueConverters['background-position'] = propertyValueConverters.backgroundPosition;
+  propertyValueConverters['background-position-x'] = propertyValueConverters.backgroundPositionX;
+  propertyValueConverters['object-position'] = propertyValueConverters.objectPosition;
+  propertyValueConverters['border-width'] = propertyValueConverters.padding;
+  propertyValueConverters['box-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['-webkit-box-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['-moz-box-shadow'] = propertyValueConverters.textShadow;
+  propertyValueConverters['border-style'] = propertyValueConverters.borderColor;
+  propertyValueConverters['-webkit-transform'] = propertyValueConverters.transform;
+  propertyValueConverters['-moz-transform'] = propertyValueConverters.transform;
+  propertyValueConverters['transform-origin'] = propertyValueConverters.transformOrigin;
+  propertyValueConverters['-webkit-transform-origin'] = propertyValueConverters.transformOrigin;
+  propertyValueConverters['-moz-transform-origin'] = propertyValueConverters.transformOrigin;
+  propertyValueConverters['-webkit-transition'] = propertyValueConverters.transition;
+  propertyValueConverters['-moz-transition'] = propertyValueConverters.transition;
+  propertyValueConverters['transition-property'] = propertyValueConverters.transitionProperty;
+  propertyValueConverters['-webkit-transition-property'] = propertyValueConverters.transitionProperty;
+  propertyValueConverters['-moz-transition-property'] = propertyValueConverters.transitionProperty;
+
+  // this will be an object of properties that map to their corresponding rtl property (their doppelganger)
+  var propertiesToConvert = arrayToObject([['paddingLeft', 'paddingRight'], ['marginLeft', 'marginRight'], ['left', 'right'], ['borderLeft', 'borderRight'], ['borderLeftColor', 'borderRightColor'], ['borderLeftStyle', 'borderRightStyle'], ['borderLeftWidth', 'borderRightWidth'], ['borderTopLeftRadius', 'borderTopRightRadius'], ['borderBottomLeftRadius', 'borderBottomRightRadius'],
+  // kebab-case versions
+  ['padding-left', 'padding-right'], ['margin-left', 'margin-right'], ['border-left', 'border-right'], ['border-left-color', 'border-right-color'], ['border-left-style', 'border-right-style'], ['border-left-width', 'border-right-width'], ['border-top-left-radius', 'border-top-right-radius'], ['border-bottom-left-radius', 'border-bottom-right-radius']]);
+  var propsToIgnore = ['content'];
+
+  // this is the same as the propertiesToConvert except for values
+  var valuesToConvert = arrayToObject([['ltr', 'rtl'], ['left', 'right'], ['w-resize', 'e-resize'], ['sw-resize', 'se-resize'], ['nw-resize', 'ne-resize']]);
+
+  // Sorry for the regex 😞, but basically thisis used to replace _every_ instance of
+  // `ltr`, `rtl`, `right`, and `left` in `backgroundimage` with the corresponding opposite.
+  // A situation we're accepting here:
+  // url('/left/right/rtl/ltr.png') will be changed to url('/right/left/ltr/rtl.png')
+  // Definite trade-offs here, but I think it's a good call.
+  var bgImgDirectionRegex = new RegExp('(^|\\W|_)((ltr)|(rtl)|(left)|(right))(\\W|_|$)', 'g');
+  var bgPosDirectionRegex = new RegExp('(left)|(right)');
+
+  /**
+   * converts properties and values in the CSS in JS object to their corresponding RTL values
+   * @param {Object} object the CSS in JS object
+   * @return {Object} the RTL converted object
+   */
+  function convert(object) {
+    return Object.keys(object).reduce(function (newObj, originalKey) {
+      var originalValue = object[originalKey];
+      if (isString(originalValue)) {
+        // you're welcome to later code 😺
+        originalValue = originalValue.trim();
+      }
+
+      // Some properties should never be transformed
+      if (includes(propsToIgnore, originalKey)) {
+        newObj[originalKey] = originalValue;
+        return newObj;
+      }
+      var _convertProperty = convertProperty(originalKey, originalValue),
+        key = _convertProperty.key,
+        value = _convertProperty.value;
+      newObj[key] = value;
+      return newObj;
+    }, Array.isArray(object) ? [] : {});
+  }
+
+  /**
+   * Converts a property and its value to the corresponding RTL key and value
+   * @param {String} originalKey the original property key
+   * @param {Number|String|Object} originalValue the original css property value
+   * @return {Object} the new {key, value} pair
+   */
+  function convertProperty(originalKey, originalValue) {
+    var isNoFlip = /\/\*\s?@noflip\s?\*\//.test(originalValue);
+    var key = isNoFlip ? originalKey : getPropertyDoppelganger(originalKey);
+    var value = isNoFlip ? originalValue : getValueDoppelganger(key, originalValue);
+    return {
+      key: key,
+      value: value
+    };
+  }
+
+  /**
+   * This gets the RTL version of the given property if it has a corresponding RTL property
+   * @param {String} property the name of the property
+   * @return {String} the name of the RTL property
+   */
+  function getPropertyDoppelganger(property) {
+    return propertiesToConvert[property] || property;
+  }
+
+  /**
+   * This converts the given value to the RTL version of that value based on the key
+   * @param {String} key this is the key (note: this should be the RTL version of the originalKey)
+   * @param {String|Number|Object} originalValue the original css property value. If it's an object, then we'll convert that as well
+   * @return {String|Number|Object} the converted value
+   */
+  function getValueDoppelganger(key, originalValue) {
+    if (!canConvertValue(originalValue)) {
+      return originalValue;
+    }
+    if (isObject(originalValue)) {
+      return convert(originalValue); // recursion 🌀
+    }
+
+    var isNum = isNumber(originalValue);
+    var isFunc = isFunction(originalValue);
+    var importantlessValue = isNum || isFunc ? originalValue : originalValue.replace(/ !important.*?$/, '');
+    var isImportant = !isNum && importantlessValue.length !== originalValue.length;
+    var valueConverter = propertyValueConverters[key];
+    var newValue;
+    if (valueConverter) {
+      newValue = valueConverter({
+        value: importantlessValue,
+        valuesToConvert: valuesToConvert,
+        propertiesToConvert: propertiesToConvert,
+        isRtl: true,
+        bgImgDirectionRegex: bgImgDirectionRegex,
+        bgPosDirectionRegex: bgPosDirectionRegex
+      });
+    } else {
+      newValue = valuesToConvert[importantlessValue] || importantlessValue;
+    }
+    if (isImportant) {
+      return newValue + " !important";
+    }
+    return newValue;
+  }
+
+  return convert;
+
+})));
+//# sourceMappingURL=rtl-css-js.umd.js.map

node_modules/rtl-css-js/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "rtl-css-js",
+  "version": "1.16.1",
+  "description": "Right To Left conversion for CSS in JS objects",
+  "main": "dist/cjs/index.js",
+  "jsnext:main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types.d.ts",
+      "node": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./core": {
+      "types": "./core.d.ts",
+      "node": "./dist/cjs/core.js",
+      "import": "./dist/esm/core.js",
+      "default": "./dist/cjs/core.js"
+    },
+    "./core.esm": {
+      "default": "./dist/esm/core.js"
+    },
+    "./core.esm.js": {
+      "default": "./dist/esm/core.js"
+    },
+    "./core.js": {
+      "default": "./dist/cjs/core.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "rimraf dist && npm-run-all build:**",
+    "build:bundlers": "kcd-scripts build --bundle cjs,esm --environment BUILD_INPUT:src/*.js --no-clean",
+    "build:umd:main": "kcd-scripts build --bundle umd,umd.min BUILD_NAME:rtlCSSJS --no-clean",
+    "build:umd:core": "kcd-scripts build --bundle umd,umd.min --environment BUILD_NAME:rtlCSSJSCore,BUILD_FILENAME_SUFFIX:\".core\",BUILD_INPUT:src/core.js --no-clean",
+    "postbuild:bundlers": "node scripts/add-proxies-typings.js",
+    "lint": "kcd-scripts lint",
+    "test": "kcd-scripts test",
+    "test:update": "npm run test -s -- --coverage --updateSnapshot",
+    "validate": "kcd-scripts validate"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "kcd-scripts pre-commit"
+    }
+  },
+  "files": [
+    "dist",
+    "core",
+    "types.d.ts",
+    "core.d.ts",
+    "core.esm.js",
+    "core.esm.d.ts"
+  ],
+  "keywords": [
+    "css-in-js",
+    "ltr",
+    "rtl",
+    "cssjanus"
+  ],
+  "author": "Kent C. Dodds <kent@doddsfamily.us> (http://kentcdodds.com/)",
+  "license": "MIT",
+  "devDependencies": {
+    "kcd-scripts": "^1.11.0",
+    "npm-run-all": "^4.1.1",
+    "rimraf": "^3.0.0",
+    "tiny-glob": "^0.2.0"
+  },
+  "eslintConfig": {
+    "extends": "./node_modules/kcd-scripts/eslint.js"
+  },
+  "eslintIgnore": [
+    "node_modules",
+    "coverage",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kentcdodds/rtl-css-js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kentcdodds/rtl-css-js/issues"
+  },
+  "homepage": "https://github.com/kentcdodds/rtl-css-js#readme",
+  "dependencies": {
+    "@babel/runtime": "^7.1.2"
+  }
+}

node_modules/rtl-css-js/types.d.ts

@@ -0,0 +1,8 @@
+declare interface RtlCSSJS {
+  default: RtlCSSJS
+  <T extends object = object>(o: T): T
+}
+
+declare const rtlCSSJS: RtlCSSJS
+
+export = rtlCSSJS