@workday/canvas-kit-styling 10.0.0-alpha.538-next.0

package/LICENSE

@@ -0,0 +1,51 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
+"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
+"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
+"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
+"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
+"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
+"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
+"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
+"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License.
+Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution.
+You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
+You must give any other recipients of the Work or Derivative Works a copy of this License; and You must cause any modified files to carry prominent notices stating that You changed the files; and You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions.
+Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
+
+6. Trademarks.
+This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty.
+Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability.
+In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability.
+While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2020. Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of Workday, Inc. All other brand and product names are trademarks or registered trademarks of their respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

package/README.md

@@ -0,0 +1,5 @@
+# Canvas Kit Styling
+
+This package contains everything needed to create CSS styling. This styling package contains a
+runtime for development and a static parsing process for build time. For more information, visit
+https://workday.github.io/canvas-kit/?path=/docs/features-styling-welcome--page

package/dist/commonjs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/cs';
+export * from './lib/slugify';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC"}

package/dist/commonjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/cs"), exports);
+__exportStar(require("./lib/slugify"), exports);

package/dist/commonjs/lib/cs.d.ts

@@ -0,0 +1,216 @@
+import React from 'react';
+import { Keyframes, SerializedStyles, CSSObject } from '@emotion/serialize';
+/**
+ * Style properties in a JavaScript camelCase. Everything Emotion allows is also
+ * allowed here.
+ */
+export declare type StyleProps = undefined | boolean | number | string | Keyframes | SerializedStyles | CSSObject;
+export declare type CS = string | Record<string, string>;
+/**
+ * CSS variable map type. In developer/dynamic mode, we don't know what the hash is going to be. All
+ * variables will look like `--{hash}-{name}`. But the static optimizers generates the name based on
+ * the AST, so the `id` will be known. Instead of something like `--abc123-color`, the `ID` is set
+ * by the optimizer.
+ *
+ * For example:
+ * ```ts
+ * // dynamic
+ * const myVars = createVars('color') // type is `Record<'color', string>`
+ *
+ * // optimizer rewrites the code
+ * const myVars = createVars<'color', 'myVars'>('color')
+ * // type is now `{color: "--myVars-color"}`
+ *
+ * myVars.color // type is `--myVars-color`
+ * ```
+ *
+ * This is so optimized variables can be used directly by the static parser downstream. The variable
+ * names become statically analyzable.
+ */
+export declare type CsVarsMap<T extends string, ID extends string | never> = [ID] extends [never] ? Record<T, string> : {
+    [K in T]: `--${ID}-${K}`;
+};
+export declare type CsVars<T extends string, ID extends string | never> = CsVarsMap<T, ID> & {
+    (input: Partial<Record<T, string>>): Record<T, string>;
+};
+/**
+ * Take a CSS Variable name and return a variable property
+ *
+ * ```ts
+ * const myVars = createVars('color')
+ *
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color) // color: 'var(--{hash}-color)'
+ * })
+ * ```
+ *
+ * It can also support an optional fallback. Fallbacks should only be used if it is reasonable to
+ * expect a CSS variable isn't defined.
+ * ```ts
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'
+ * })
+ * ```
+ *
+ * If the project is set up for parsing with fallback files, a fallback will automatically be filled
+ * during the parsing phase. This is helpful for cases when CSS variables are expected, but not set
+ * in the environment.
+ */
+export declare function cssVar(input: string, fallback?: string): string;
+/**
+ * Create temporary CSS variables to use in components. The CSS variable names will
+ * be unique at runtime to avoid collisions. The return value is a function and a
+ * Map. The function can be used to pass in values from JavaScript. The function will
+ * return a map of variable keys to CSS Variable names.
+ *
+ * ```ts
+ * // creates a `color` and `background` CSS variable
+ * const myVars = createVars('color', 'background')
+ *
+ * // 'color' is a typed property. The type is `string`
+ * console.log(myVars.color) // `'var(--{hash}-color)'`
+ *
+ * // 'color' is a typed property. The type is `string?`
+ * // The returned object can be assigned to the `style` property of an element
+ * console.log(myVars({ color: 'red' })) //  `{'--{hash}-color': 'red'}`
+ *
+ * const div = document.createElement('div')
+ * div.style = myVars({ color: 'red' }) // <div style="--{hash}-color: red;" />
+ * ```
+ */
+export declare function createVars<T extends string, ID extends string>(input: {
+    id: ID;
+    args: T[];
+}): CsVars<T, ID>;
+export declare function createVars<T extends string>(...args: T[]): CsVars<T, never>;
+declare type ModifierConfig = Record<string, Record<string, CS>>;
+declare type ModifierValues<T extends ModifierConfig> = {
+    [P in keyof T]: keyof T[P];
+};
+declare type ModifierReturn<T extends ModifierConfig> = T & ((modifiers: Partial<ModifierValues<T>>) => string);
+/**
+ * Creates a modifier function that takes in a modifier config and will return a CSS class name that
+ * matches the result. Modifiers can be thought as `if` or `switch` statements when conditionally
+ * changing the styles of a component based on props. This function can be thought of as a helper
+ * function that makes it easier to work with modifiers. Without it, you would have to implement
+ * if/switch/ternary for each option.
+ *
+ * ```tsx
+ * const myModifiers = createModifiers({
+ *   // a modifier called 'size'
+ *   size: {
+ *     small: createStyles({ fontSize: 12 }),
+ *     medium: createStyles({ fontSize: 14 })
+ *   }
+ * })
+ *
+ * // with the modifier function
+ * myModifiers({ size: 'medium' }) // returns the medium class name
+ *
+ * // manually without the function
+ * size === 'small' ? myModifiers.size.small : size === 'medium' ? myModifiers.size.medium : ''
+ * ```
+ */
+export declare function createModifiers<T extends ModifierConfig>(input: T): ModifierReturn<T>;
+/**
+ * All acceptable values of the `cs` prop. It can be a CSS class name, any CSS properties, an object
+ * with a `className` and `styles`, or an array of these
+ */
+export declare type CSToPropsInput = undefined | CS | CsToPropsReturn | React.CSSProperties | CSToPropsInput[];
+export declare type CsToPropsReturn = {
+    className?: string;
+    style?: React.CSSProperties;
+};
+/**
+ * A function that takes in a single input, or an array. The type of the input is either:
+ *
+ * - `string` - it represents a CSS class name
+ * - `undefined` - there is no value. This is provided for convenience for developers to not have to
+ *   filter out undefined
+ * - `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values
+ * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
+ *   (for nesting)
+ * - An array containing any of the above. This will recurse over each entry to produce a single,
+ *   reduced `{style: ..., className: ...}` object
+ * @param input
+ * @returns
+ */
+export declare function csToProps(input: CSToPropsInput): CsToPropsReturn;
+export interface CSProps {
+    /** The `cs` prop takes in a single value or an array of values. You can pass the CSS class name
+     * returned by {@link createStyles}, or the result of {@link createVars} and
+     * {@link createModifiers}. If you're extending a component already using `cs`, you can merge that
+     * prop in as well.
+     *
+     * ```tsx
+     * cs={[
+     *   cs, // from the prop list
+     *   myStyles,
+     *   myModifiers({ size: 'medium' }),
+     *   myVars({ backgroundColor: 'red' })
+     * ]}
+     * ```
+     */
+    cs?: CSToPropsInput;
+}
+/**
+ * Creates CSS styles based on object-style input. It has a side-effect of adding CSS to the page
+ * and will return a space-delimitated string of CSS class names meant to be added to an element.
+ *
+ * It can take a number of inputs of various types. The simplest is object-styles.
+ *
+ * ```ts
+ * const myStyles = createStyles({
+ *   backgroundColor: 'red'
+ * })
+ * ```
+ *
+ * The `createStyles` function is curried into 2 parts. The first function could be done at build
+ * time. The returned function combines CSS class names and will remain as a small runtime.
+ *
+ * > **Note:** The order of calling `createStyles` is important. Each call will make a single CSS
+ * > class selector and will be injected into the document's
+ * > [StyleSheetList](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList). Style
+ * > properties will be merge by the rules of [CSS
+ * > specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). If two selectors
+ * > have the same specificity, the last defined wins. Always make sure that the properties you want
+ * > to win are last in your file.
+ */
+export declare function createStyles(...args: (StyleProps | string)[]): string;
+/**
+ * React utility function to apply CSS class names and dynamic CSS variables
+ *
+ * ```tsx
+ * const MyComponent = (props: any) => {
+ *   return <div {...handleCsProp(props)} />
+ * }
+ * ```
+ *
+ * It will return an object with `className` and `style` attributes. If a `className` is provided to
+ * the component, it will merge the class names. If a `style` is provided to the component, it will
+ * merge the styles.
+ *
+ * ```tsx
+ * const vars = createVars('background')
+ * const styles = createStyles({
+ *   color: vars.color
+ * })
+ * <MyComponent
+ *   className="foobar"
+ *   style={{ padding: 10 }}
+ *   cs={styles}
+ * />
+ *
+ * // Output
+ * <div
+ *   className="foobar {hashedClassName}"
+ *   style="padding: 10px; --{hash}-background: red;"
+ * />
+ * ```
+ */
+export declare function handleCsProp<T extends CSProps & {
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+}>({ cs, style, className, ...props }: T): Omit<T, "cs">;
+export {};
+//# sourceMappingURL=cs.d.ts.map

package/dist/commonjs/lib/cs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs.d.ts","sourceRoot":"","sources":["../../../lib/cs.ts"],"names":[],"mappings":"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"}

package/dist/commonjs/lib/cs.js

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCsProp = exports.createStyles = exports.csToProps = exports.createModifiers = exports.createVars = exports.cssVar = void 0;
+const uniqueId_1 = require("./uniqueId");
+// eslint-disable-next-line @emotion/no-vanilla
+const css_1 = require("@emotion/css");
+const serialize_1 = require("@emotion/serialize");
+const slugify_1 = require("./slugify");
+function convertProperty(value) {
+    // Handle the case where the value is a variable without the `var()` wrapping function. It happens
+    // enough that it makes sense to automatically wrap.
+    if (typeof value === 'string' && value.startsWith('--')) {
+        return `var(${value})`;
+    }
+    return value;
+}
+/**
+ * Walks through all the properties and values of a style and converts properties and/or values that
+ * need special processing. An example might be using a CSS variable without a `var()` wrapping.
+ */
+function convertAllProperties(obj) {
+    if (typeof obj === 'object') {
+        const converted = {};
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                converted[key] = convertAllProperties(obj[key]);
+            }
+        }
+        return converted;
+    }
+    return convertProperty(obj);
+}
+/**
+ * Take a CSS Variable name and return a variable property
+ *
+ * ```ts
+ * const myVars = createVars('color')
+ *
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color) // color: 'var(--{hash}-color)'
+ * })
+ * ```
+ *
+ * It can also support an optional fallback. Fallbacks should only be used if it is reasonable to
+ * expect a CSS variable isn't defined.
+ * ```ts
+ * const myStyles = createStyles({
+ *   color: cssVar(myVars.color, 'red') // color: 'var(--{hash}-color, red)'
+ * })
+ * ```
+ *
+ * If the project is set up for parsing with fallback files, a fallback will automatically be filled
+ * during the parsing phase. This is helpful for cases when CSS variables are expected, but not set
+ * in the environment.
+ */
+function cssVar(input, fallback) {
+    return fallback
+        ? `var(${input}, ${fallback.startsWith('--') ? `var(${fallback})` : fallback})`
+        : `var(${input})`;
+}
+exports.cssVar = cssVar;
+function createVars(...args) {
+    const id = args[0].id || uniqueId_1.generateUniqueId(); //?
+    // eslint-disable-next-line no-param-reassign
+    args = args[0].args || args;
+    const result = (input) => {
+        const vars = {};
+        args.forEach(key => {
+            if (input[key]) {
+                // @ts-ignore TS complains about `key` not in object `{}`
+                vars[result[key]] = input[key];
+            }
+        });
+        return vars;
+    };
+    args.forEach(key => {
+        // @ts-ignore
+        result[key] = `--${id}-${slugify_1.slugify(key)}`;
+    }, {});
+    return result;
+}
+exports.createVars = createVars;
+/**
+ * Creates a modifier function that takes in a modifier config and will return a CSS class name that
+ * matches the result. Modifiers can be thought as `if` or `switch` statements when conditionally
+ * changing the styles of a component based on props. This function can be thought of as a helper
+ * function that makes it easier to work with modifiers. Without it, you would have to implement
+ * if/switch/ternary for each option.
+ *
+ * ```tsx
+ * const myModifiers = createModifiers({
+ *   // a modifier called 'size'
+ *   size: {
+ *     small: createStyles({ fontSize: 12 }),
+ *     medium: createStyles({ fontSize: 14 })
+ *   }
+ * })
+ *
+ * // with the modifier function
+ * myModifiers({ size: 'medium' }) // returns the medium class name
+ *
+ * // manually without the function
+ * size === 'small' ? myModifiers.size.small : size === 'medium' ? myModifiers.size.medium : ''
+ * ```
+ */
+function createModifiers(input) {
+    const modifierFn = (modifiers) => {
+        return Object.keys(modifiers)
+            .filter(key => input[key] && input[key][modifiers[key]])
+            .map(key => input[key][modifiers[key]])
+            .join(' ');
+    };
+    Object.keys(input).forEach(key => {
+        // @ts-ignore TypeScript makes it a pain to deal with index types
+        modifierFn[key] = input[key];
+    });
+    return modifierFn;
+}
+exports.createModifiers = createModifiers;
+function isCsPropsReturn(input) {
+    return input.hasOwnProperty('style') || input.hasOwnProperty('className');
+}
+/**
+ * A function that takes in a single input, or an array. The type of the input is either:
+ *
+ * - `string` - it represents a CSS class name
+ * - `undefined` - there is no value. This is provided for convenience for developers to not have to
+ *   filter out undefined
+ * - `{--{hash}-{varName}: {value}}` - a `Map` of CSS variable to values
+ * - `{style: ..., className: ...}` an object already returned by another `csToProps` function call
+ *   (for nesting)
+ * - An array containing any of the above. This will recurse over each entry to produce a single,
+ *   reduced `{style: ..., className: ...}` object
+ * @param input
+ * @returns
+ */
+function csToProps(input) {
+    // input is a string, so it must only be a class name
+    if (typeof input === 'string') {
+        return { className: input };
+    }
+    // input isn't defined, so we'll return an empty object
+    if (!input) {
+        return {};
+    }
+    // A nested `csToProps`, we'll simply return with no modification
+    if (isCsPropsReturn(input)) {
+        return input;
+    }
+    // At this point, `input` is either an array or a `Record<T, string>`. If it isn't an array, it
+    // must be a style object for setting CSS variables. So set the `style` attribute
+    if (!Array.isArray(input)) {
+        return { style: input };
+    }
+    // An array. it is the only thing left. We iterate and recurse over the array to produce a single
+    // object with `style` and `className` attributes to spread on an element
+    return input.map(csToProps).reduce((result, val) => {
+        return {
+            className: [result.className, val.className].filter(v => v).join(' '),
+            style: { ...result.style, ...val.style },
+        };
+    }, {});
+}
+exports.csToProps = csToProps;
+/**
+ * Creates CSS styles based on object-style input. It has a side-effect of adding CSS to the page
+ * and will return a space-delimitated string of CSS class names meant to be added to an element.
+ *
+ * It can take a number of inputs of various types. The simplest is object-styles.
+ *
+ * ```ts
+ * const myStyles = createStyles({
+ *   backgroundColor: 'red'
+ * })
+ * ```
+ *
+ * The `createStyles` function is curried into 2 parts. The first function could be done at build
+ * time. The returned function combines CSS class names and will remain as a small runtime.
+ *
+ * > **Note:** The order of calling `createStyles` is important. Each call will make a single CSS
+ * > class selector and will be injected into the document's
+ * > [StyleSheetList](https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList). Style
+ * > properties will be merge by the rules of [CSS
+ * > specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). If two selectors
+ * > have the same specificity, the last defined wins. Always make sure that the properties you want
+ * > to win are last in your file.
+ */
+function createStyles(...args) {
+    return args
+        .map(input => {
+        if (typeof input === 'string') {
+            return input;
+        }
+        const convertedStyles = convertAllProperties(input);
+        // We want to call `serializeStyles` directly and ignore the hash generated so we can have
+        // more predictable style merging. If 2 different files define the same style properties, the
+        // hash will be the same and using the default hash functionality of Emotion will mean the
+        // merge order will be unpredictable. For example, `BaseButton` and `TertiaryButton` define
+        // different modifiers for padding. The BaseButton's `extraSmall` modifier contains the same
+        // styling as TertiaryButton's `large` modifier. Emotion would hash these two declarations as
+        // the same hash and only inject the one from `BaseButton`. If `TertiaryButton` defines
+        // `padding` in its base styles, and uses the large size modifier, the base padding will
+        // override the `TertiaryButton` `large` size modifier because `BaseButton.small` modifier was
+        // injected into the document's style sheets before `TertiaryButton.base` styles. This is due
+        // to CSS specificity. If everything has the same specificity, last defined wins. More info:
+        // https://codesandbox.io/s/stupefied-bartik-9c2jtd?file=/src/App.tsx
+        const { styles } = serialize_1.serializeStyles([convertedStyles]);
+        // use `css.call()` instead of `css()` to trick Emotion's babel plugin to not rewrite our code
+        // to remove our generated Id for the name:
+        // https://github.com/emotion-js/emotion/blob/f3b268f7c52103979402da919c9c0dd3f9e0e189/packages/babel-plugin/src/utils/transform-expression-with-styles.js#L81-L82
+        // Without this "fix", anyone using the Emotion babel plugin would get different results than
+        // intended when styles are merged.
+        return css_1.css.call(null, { name: uniqueId_1.generateUniqueId(), styles }); //?
+    })
+        .join(' ');
+}
+exports.createStyles = createStyles;
+/**
+ * React utility function to apply CSS class names and dynamic CSS variables
+ *
+ * ```tsx
+ * const MyComponent = (props: any) => {
+ *   return <div {...handleCsProp(props)} />
+ * }
+ * ```
+ *
+ * It will return an object with `className` and `style` attributes. If a `className` is provided to
+ * the component, it will merge the class names. If a `style` is provided to the component, it will
+ * merge the styles.
+ *
+ * ```tsx
+ * const vars = createVars('background')
+ * const styles = createStyles({
+ *   color: vars.color
+ * })
+ * <MyComponent
+ *   className="foobar"
+ *   style={{ padding: 10 }}
+ *   cs={styles}
+ * />
+ *
+ * // Output
+ * <div
+ *   className="foobar {hashedClassName}"
+ *   style="padding: 10px; --{hash}-background: red;"
+ * />
+ * ```
+ */
+function handleCsProp({ cs, style, className, ...props }) {
+    return {
+        ...csToProps([cs, className, style]),
+        ...props,
+    };
+}
+exports.handleCsProp = handleCsProp;

package/dist/commonjs/lib/slugify.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export declare function slugify(input: string): string;
+//# sourceMappingURL=slugify.d.ts.map

package/dist/commonjs/lib/slugify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slugify.d.ts","sourceRoot":"","sources":["../../../lib/slugify.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAU7C"}

package/dist/commonjs/lib/slugify.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slugify = void 0;
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+function slugify(input) {
+    return input
+        .trim()
+        .replace(/[\.\s_-]+/g, '-')
+        .replace(/[^\w\s-]/g, '')
+        .replace(/([A-Z])/g, m => {
+        return '-' + m.toLowerCase();
+    })
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+}
+exports.slugify = slugify;

package/dist/commonjs/lib/uniqueId.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Generates a unique and HTML5 compliant identifier every time it is called. Internally it uses a 4
+ * character random seed starting with a letter. This seed is unique to each instance of this
+ * package meaning different versions of Canvas Kit on the page will have a different seed. Each
+ * call will use a Base 36 string (10 numbers + 26 letters) based on an incremented number. The
+ * incremented number always starts at 0 and can be reset for testing purposes using
+ * [resetUniqueIdCount](#resetuniqueidcount). [setUniqueSeed](#setuniqueseed) can also be used for
+ * testing or server side rendering to get the same results during hydration.
+ */
+export declare const generateUniqueId: () => string;
+/**
+ * Update the seed used by the id generator. This is useful for snapshot tests to help stabilize ids
+ * generated each run. This could also be used for server-side hydration - if you choose the same
+ * seed for server and set that on the client before components are rendered, the ids generated will
+ * be the same.
+ * @example
+ * // set in a script tag from the server
+ * setSeed(window.__ID_SEED); // set in a script tag from the server
+ *
+ * // jest setup
+ * before(() => {
+ *   setSeed('a')
+ * })
+ */
+export declare const setUniqueSeed: (s: string) => void;
+/**
+ * This should only be called for tests in an `beforeEach`
+ */
+export declare const resetUniqueIdCount: () => void;
+//# sourceMappingURL=uniqueId.d.ts.map

package/dist/commonjs/lib/uniqueId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uniqueId.d.ts","sourceRoot":"","sources":["../../../lib/uniqueId.ts"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,MAAO,MAAM,SAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}