@aivenio/aquarium 0.0.1

package/dist/src/utils/form/Label/Label.js

@@ -0,0 +1,89 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { tw } from '../../../../src/utils/tailwind';
+import { Tooltip, InlineIcon } from '../../../../src/components';
+import questionMark from '../../../../src/icons/questionMark';
+import { Skeleton } from '../../../../src/components/Skeleton/Skeleton';
+import { FormControl } from '../../../../src/utils/form/FormControl/FormControl';
+import { HelperText } from '../../../../src/utils/form/HelperText/HelperText';
+const LabelText = ({ variant = 'default', labelText, required, helpTooltip, helpTooltipPlacement, }) => {
+    return (React.createElement("span", { className: tw('inline-block mb-2 font-medium typography-body-small', {
+            'text-grey-60': variant === 'default',
+            'text-error-50': variant === 'error',
+            'text-grey-40': variant === 'disabled',
+        }) },
+        labelText,
+        required && React.createElement("span", { className: tw('text-error-50') }, "*"),
+        helpTooltip && (React.createElement(Tooltip, { content: helpTooltip, placement: helpTooltipPlacement },
+            React.createElement("span", { className: tw('text-grey-30 flex items-center cursor-pointer ml-2') },
+                React.createElement(InlineIcon, { icon: questionMark, "data-testid": 'icon-info' }))))));
+};
+export const Label = (props) => {
+    const { id, htmlFor, labelText } = props, _a = props["labelProps"], _b = _a === void 0 ? {} : _a, labelProps = __rest(_b, []), { 'data-testid': dataTestid, children } = props;
+    return (React.createElement("label", Object.assign({ id: id, className: tw('w-full'), "data-testid": dataTestid, htmlFor: htmlFor }, labelProps),
+        labelText && React.createElement(LabelText, Object.assign({}, props)),
+        children));
+};
+const LabelSkeleton = () => {
+    return React.createElement(Skeleton, { height: 20, width: 100, className: tw('mb-[7px]') });
+};
+Label.Skeleton = LabelSkeleton;
+export const LabelControl = (_a) => {
+    var { 
+    // HelperTextProps
+    messageId, error, helperText = error, length, maxLength, reserveSpaceForError, 
+    // LabelControlProps
+    fieldset = false, children, 
+    // LabelProps
+    valid, disabled } = _a, rest = __rest(_a, ["messageId", "error", "helperText", "length", "maxLength", "reserveSpaceForError", "fieldset", "children", "valid", "disabled"]);
+    // For backwards compatibility we'll support two ways to provide error
+    // message; using either `helperText` or `error` props.
+    //
+    // We'll use the following logic for the variant:
+    // - helperText !== undefined AND valid = false => 'error'
+    // - helperText !== undefined AND valid = undefined => 'default'
+    // - error !== undefined AND valid = false => 'error'
+    // - error !== undefined AND valid != false => 'default'
+    const legacyError = error !== undefined && valid === false;
+    const variant = !valid || legacyError ? 'error' : disabled ? 'disabled' : 'default';
+    return (React.createElement(FormControl, null,
+        !fieldset && (React.createElement(Label, Object.assign({}, rest, { variant: variant }), children)),
+        fieldset && (React.createElement("fieldset", { id: rest.id },
+            React.createElement("legend", { className: tw('w-full mb-2') },
+                React.createElement(LabelText, Object.assign({}, rest, { variant: variant }))),
+            children)),
+        React.createElement(HelperText, { messageId: messageId, error: !valid, helperText: helperText, length: length, maxLength: maxLength, reserveSpaceForError: reserveSpaceForError })));
+};
+const LabelControlSkeleton = ({ children }) => (React.createElement("div", null,
+    React.createElement(Label.Skeleton, null),
+    children,
+    React.createElement(HelperText.Skeleton, null)));
+LabelControl.Skeleton = LabelControlSkeleton;
+export const getLabelControlProps = (_a) => {
+    var { labelText, required, valid = true, disabled = false } = _a, _b = _a["labelProps"], _c = _b === void 0 ? {} : _b, labelProps = __rest(_c, []), { helpTooltip, helpTooltipPlacement, maxLength, error, helperText, reserveSpaceForError, 'data-testid': dataTestId } = _a;
+    return ({
+        labelText,
+        required,
+        valid,
+        disabled,
+        labelProps,
+        helpTooltip,
+        helpTooltipPlacement,
+        error,
+        helperText,
+        maxLength,
+        reserveSpaceForError,
+        'data-testid': dataTestId,
+    });
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGFiZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvdXRpbHMvZm9ybS9MYWJlbC9MYWJlbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hDLE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDckQsT0FBTyxZQUFZLE1BQU0sd0JBQXdCLENBQUM7QUFFbEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzVELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsVUFBVSxFQUFtQixNQUFNLHNDQUFzQyxDQUFDO0FBdURuRixNQUFNLFNBQVMsR0FBeUIsQ0FBQyxFQUN2QyxPQUFPLEdBQUcsU0FBUyxFQUNuQixTQUFTLEVBQ1QsUUFBUSxFQUNSLFdBQVcsRUFDWCxvQkFBb0IsR0FDckIsRUFBRSxFQUFFO0lBQ0gsT0FBTyxDQUNMLDhCQUNFLFNBQVMsRUFBRSxFQUFFLENBQUMscURBQXFELEVBQUU7WUFDbkUsY0FBYyxFQUFFLE9BQU8sS0FBSyxTQUFTO1lBQ3JDLGVBQWUsRUFBRSxPQUFPLEtBQUssT0FBTztZQUNwQyxjQUFjLEVBQUUsT0FBTyxLQUFLLFVBQVU7U0FDdkMsQ0FBQztRQUVELFNBQVM7UUFDVCxRQUFRLElBQUksOEJBQU0sU0FBUyxFQUFFLEVBQUUsQ0FBQyxlQUFlLENBQUMsUUFBVTtRQUMxRCxXQUFXLElBQUksQ0FDZCxvQkFBQyxPQUFPLElBQUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsb0JBQW9CO1lBQzVELDhCQUFNLFNBQVMsRUFBRSxFQUFFLENBQUMsb0RBQW9ELENBQUM7Z0JBQ3ZFLG9CQUFDLFVBQVUsSUFB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

package/dist/src/utils/object.d.ts

@@ -0,0 +1,4 @@
+declare type Renamed<T, O extends keyof T, N extends string> = Record<N, T[O]> & Omit<T, O>;
+export declare const renameProperty: <T extends Record<string, unknown>, O extends keyof T, N extends string>(oldProp: O, newProp: N, { [oldProp]: oldValue, ...rest }: T) => Renamed<T, O, N>;
+export declare const isObjectWithUnknownProperties: (a: unknown) => a is Record<PropertyKey, unknown>;
+export {};

package/dist/src/utils/object.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+export const renameProperty = (oldProp, newProp, _a) => {
+    var _b = oldProp, oldValue = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+    return (Object.assign({ [newProp]: oldValue }, rest));
+};
+export const isObjectWithUnknownProperties = (a) => {
+    return typeof a === 'object' && a !== null;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2JqZWN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL29iamVjdC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUVBLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUM1QixPQUFVLEVBQ1YsT0FBVSxFQUNWLEVBQW1DLEVBQ2pCLEVBQUU7UUFEbEIsS0FBQyxPQUFRLEVBQUUsUUFBUSxTQUFBLEVBQUssSUFBSSxjQUE5Qix1Q0FBZ0MsQ0FBRjtJQUU5QixPQUFBLENBQUMsZ0JBQ0MsQ0FBQyxPQUFPLENBQUMsRUFBRSxRQUFRLElBQ2hCLElBQUksQ0FDYSxDQUFBLENBQUE7Q0FBQSxDQUFDO0FBRXpCLE1BQU0sQ0FBQyxNQUFNLDZCQUE2QixHQUFHLENBQUMsQ0FBVSxFQUFxQyxFQUFFO0lBQzdGLE9BQU8sT0FBTyxDQUFDLEtBQUssUUFBUSxJQUFJLENBQUMsS0FBSyxJQUFJLENBQUM7QUFDN0MsQ0FBQyxDQUFDIn0=

package/dist/src/utils/positioner.d.ts

@@ -0,0 +1,28 @@
+export declare type UnknownRect = DOMRect | ClientRect;
+export declare enum PositionerPlacement {
+    top = "top",
+    left = "left",
+    bottom = "bottom",
+    right = "right",
+    topLeft = "top-left",
+    topRight = "top-right",
+    bottomLeft = "bottom-left",
+    bottomRight = "bottom-right"
+}
+export declare const placementOrder: PositionerPlacement[];
+export declare function createMountPointElement(): HTMLDivElement;
+export declare type Position = {
+    x: number;
+    y: number;
+};
+export declare function calcBottomPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcTopPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcLeftPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcRightPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcBottomLeftPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcBottomRightPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcTopLeftPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function calcTopRightPosition(triggerRect: UnknownRect, contentRect: UnknownRect, padding: number): Position;
+export declare function isOutOfBounds(position: Position): boolean;
+export declare function calcPosition(triggerRect: UnknownRect, contentRect: UnknownRect, placement: PositionerPlacement, padding: number): Position;
+export declare function calcBestPosition(triggerRect: UnknownRect, contentRect: UnknownRect, placement: PositionerPlacement, padding: number): Position;

package/dist/src/utils/positioner.js

@@ -0,0 +1,111 @@
+import clamp from 'lodash/clamp';
+export var PositionerPlacement;
+(function (PositionerPlacement) {
+    PositionerPlacement["top"] = "top";
+    PositionerPlacement["left"] = "left";
+    PositionerPlacement["bottom"] = "bottom";
+    PositionerPlacement["right"] = "right";
+    PositionerPlacement["topLeft"] = "top-left";
+    PositionerPlacement["topRight"] = "top-right";
+    PositionerPlacement["bottomLeft"] = "bottom-left";
+    PositionerPlacement["bottomRight"] = "bottom-right";
+})(PositionerPlacement || (PositionerPlacement = {}));
+export const placementOrder = [
+    PositionerPlacement.top,
+    PositionerPlacement.topLeft,
+    PositionerPlacement.topRight,
+    PositionerPlacement.right,
+    PositionerPlacement.bottom,
+    PositionerPlacement.bottomLeft,
+    PositionerPlacement.bottomRight,
+    PositionerPlacement.left,
+];
+const POSITIONER_MOUNT_ELEMENT_ID = 'positioner-root';
+export function createMountPointElement() {
+    const mountElement = document.createElement('div');
+    mountElement.id = POSITIONER_MOUNT_ELEMENT_ID;
+    return mountElement;
+}
+export function calcBottomPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
+        y: triggerRect.top + triggerRect.height + padding,
+    };
+}
+export function calcTopPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left - (contentRect.width / 2 - triggerRect.width / 2),
+        y: triggerRect.top - contentRect.height - padding,
+    };
+}
+export function calcLeftPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left - contentRect.width - padding,
+        y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2),
+    };
+}
+export function calcRightPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left + triggerRect.width + padding,
+        y: triggerRect.top - (contentRect.height / 2 - triggerRect.height / 2),
+    };
+}
+export function calcBottomLeftPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left - contentRect.width - padding,
+        y: triggerRect.top + triggerRect.height + padding,
+    };
+}
+export function calcBottomRightPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left + triggerRect.width + padding,
+        y: triggerRect.top + triggerRect.height + padding,
+    };
+}
+export function calcTopLeftPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left - contentRect.width - padding,
+        y: triggerRect.top - contentRect.height - padding,
+    };
+}
+export function calcTopRightPosition(triggerRect, contentRect, padding) {
+    return {
+        x: triggerRect.left + triggerRect.width + padding,
+        y: triggerRect.top - contentRect.height - padding,
+    };
+}
+const positionCalcFuncs = {
+    [PositionerPlacement.top]: calcTopPosition,
+    [PositionerPlacement.topLeft]: calcTopLeftPosition,
+    [PositionerPlacement.topRight]: calcTopRightPosition,
+    [PositionerPlacement.bottom]: calcBottomPosition,
+    [PositionerPlacement.bottomLeft]: calcBottomLeftPosition,
+    [PositionerPlacement.bottomRight]: calcBottomRightPosition,
+    [PositionerPlacement.left]: calcLeftPosition,
+    [PositionerPlacement.right]: calcRightPosition,
+};
+export function isOutOfBounds(position) {
+    return position.x < 0 || position.x > window.innerWidth;
+}
+export function calcPosition(triggerRect, contentRect, placement, padding) {
+    return positionCalcFuncs[placement](triggerRect, contentRect, padding);
+}
+export function calcBestPosition(triggerRect, contentRect, placement, padding) {
+    let attempts = 0;
+    return (function _calcBestPosition(triggerRect, contentRect, placement, padding) {
+        attempts++;
+        const position = calcPosition(triggerRect, contentRect, placement, padding);
+        const hasAttemptsLeft = attempts < placementOrder.length;
+        if (isOutOfBounds(position) && hasAttemptsLeft) {
+            const nextPlacementAttempt = placementOrder[placementOrder.findIndex((p) => placement === p) + 1] || placementOrder[0];
+            return _calcBestPosition(triggerRect, contentRect, nextPlacementAttempt, padding);
+        }
+        else {
+            return {
+                x: clamp(position.x + window.scrollX, 0, window.innerWidth),
+                y: position.y + window.scrollY,
+            };
+        }
+    })(triggerRect, contentRect, placement, padding);
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9zaXRpb25lci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9wb3NpdGlvbmVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLGNBQWMsQ0FBQztBQUlqQyxNQUFNLENBQU4sSUFBWSxtQkFTWDtBQVRELFdBQVksbUJBQW1CO0lBQzdCLGtDQUFXLENBQUE7SUFDWCxvQ0FBYSxDQUFBO0lBQ2Isd0NBQWlCLENBQUE7SUFDakIsc0NBQWUsQ0FBQTtJQUNmLDJDQUFvQixDQUFBO0lBQ3BCLDZDQUFzQixDQUFBO0lBQ3RCLGlEQUEwQixDQUFBO0lBQzFCLG1EQUE0QixDQUFBO0FBQzlCLENBQUMsRUFUVyxtQkFBbUIsS0FBbkIsbUJBQW1CLFFBUzlCO0FBRUQsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUEwQjtJQUNuRCxtQkFBbUIsQ0FBQyxHQUFHO0lBQ3ZCLG1CQUFtQixDQUFDLE9BQU87SUFDM0IsbUJBQW1CLENBQUMsUUFBUTtJQUM1QixtQkFBbUIsQ0FBQyxLQUFLO0lBQ3pCLG1CQUFtQixDQUFDLE1BQU07SUFDMUIsbUJBQW1CLENBQUMsVUFBVTtJQUM5QixtQkFBbUIsQ0FBQyxXQUFXO0lBQy9CLG1CQUFtQixDQUFDLElBQUk7Q0FDekIsQ0FBQztBQUVGLE1BQU0sMkJBQTJCLEdBQUcsaUJBQWlCLENBQUM7QUFFdEQsTUFBTSxVQUFVLHVCQUF1QjtJQUNyQyxNQUFNLFlBQVksR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25ELFlBQVksQ0FBQyxFQUFFLEdBQUcsMkJBQTJCLENBQUM7SUFDOUMsT0FBTyxZQUFZLENBQUM7QUFDdEIsQ0FBQztBQU9ELE1BQU0sVUFBVSxrQkFBa0IsQ0FBQyxXQUF3QixFQUFFLFdBQXdCLEVBQUUsT0FBZTtJQUNwRyxPQUFPO1FBQ0wsQ0FBQyxFQUFFLFdBQVcsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxXQUFXLENBQUMs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

package/dist/src/utils/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/src/utils/setupTests.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dXBUZXN0cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9zZXR1cFRlc3RzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sMkJBQTJCLENBQUMifQ==

package/dist/src/utils/string.d.ts

@@ -0,0 +1 @@
+export declare const capitalize: <T extends string>(a: T) => Capitalize<T>;

package/dist/src/utils/string.js

@@ -0,0 +1,2 @@
+export const capitalize = (a) => (a.charAt(0).toUpperCase() + a.slice(1));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL3N0cmluZy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsQ0FBbUIsQ0FBSSxFQUFpQixFQUFFLENBQ2xFLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxXQUFXLEVBQUUsR0FBRyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFrQixDQUFDIn0=

package/dist/src/utils/tailwind.d.ts

@@ -0,0 +1,4 @@
+import { Argument } from 'classnames';
+import { TailwindClassParameterValue } from '../../types/tailwind';
+export declare function tw<S1, S2, S3, S4, S5, S6, S7, S8, S9, S10>(classesOrModifiers1?: TailwindClassParameterValue<S1>, classesOrModifiers2?: TailwindClassParameterValue<S2>, classesOrModifiers3?: TailwindClassParameterValue<S3>, classesOrModifiers4?: TailwindClassParameterValue<S4>, classesOrModifiers5?: TailwindClassParameterValue<S5>, classesOrModifiers6?: TailwindClassParameterValue<S6>, classesOrModifiers7?: TailwindClassParameterValue<S7>, classesOrModifiers8?: TailwindClassParameterValue<S8>, classesOrModifiers9?: TailwindClassParameterValue<S9>, classesOrModifiers10?: TailwindClassParameterValue<S10>): string;
+export declare const classNames: (...args: Argument[]) => string;

package/dist/src/utils/tailwind.js

@@ -0,0 +1,18 @@
+import originalClassNames from 'classnames';
+function cleanClassNames(classNames) {
+    const tokens = classNames.split(/\s+/);
+    return tokens.filter((item) => item).join(' ');
+}
+// Wrapper function for 'classnames' module that requires more strict typing
+// Note: Adding many parameters was the only way I was aware of to get inference
+//       working for each parameter separately
+export function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
+    const result = originalClassNames(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10);
+    return cleanClassNames(result);
+}
+// "Unsafe" version that doesn't check types
+export const classNames = (...args) => {
+    const result = originalClassNames(...args);
+    return cleanClassNames(result);
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFpbHdpbmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdGFpbHdpbmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxrQkFBZ0MsTUFBTSxZQUFZLENBQUM7QUFHMUQsU0FBUyxlQUFlLENBQUMsVUFBa0I7SUFDekMsTUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxPQUFPLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztBQUNqRCxDQUFDO0FBRUQsNEVBQTRFO0FBQzVFLGdGQUFnRjtBQUNoRiw4Q0FBOEM7QUFDOUMsTUFBTSxVQUFVLEVBQUUsQ0FDaEIsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsb0JBQXVEO0lBRXZELE1BQU0sTUFBTSxHQUFHLGtCQUFrQixDQUMvQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixvQkFBb0IsQ0FDckIsQ0FBQztJQUVGLE9BQU8sZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0FBQ2pDLENBQUM7QUFFRCw0Q0FBNEM7QUFDNUMsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQUMsR0FBRyxJQUFnQixFQUFVLEVBQUU7SUFDeEQsTUFBTSxNQUFNLEdBQUcsa0JBQWtCLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztJQUMzQyxPQUFPLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztBQUNqQyxDQUFDLENBQUMifQ==

package/dist/src/utils/useStyle.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Breakpointable } from '../../types/tailwind';
+declare type StylesObject = {
+    [key in keyof React.CSSProperties]: {
+        value: Breakpointable<any>;
+        transformer?: (val: any) => string | number;
+    } | Breakpointable<any>;
+};
+export declare function resolveTailwindThemeValue(key: string, val: any): any;
+export declare function useStyle(styles: StylesObject): React.CSSProperties;
+export {};

package/dist/src/utils/useStyle.js

@@ -0,0 +1,70 @@
+import { useContext } from 'react';
+import get from 'lodash/get';
+import isUndefined from 'lodash/isUndefined';
+import isPlainObject from 'lodash/isPlainObject';
+import { DesignSystemContext } from '../../src/components/Context/Context';
+import { selectBreakpointValue } from '../../src/utils/breakpoints';
+import partialTheme from '../../tailwind.theme.json';
+const THEME_MAPPING = {
+    paddingTop: 'padding',
+    paddingBottom: 'padding',
+    paddingLeft: 'padding',
+    paddingRight: 'padding',
+    marginTop: 'margin',
+    marginBottom: 'margin',
+    marginLeft: 'margin',
+    marginRight: 'margin',
+    rowGap: 'gap',
+    columnGap: 'gap',
+};
+// Disabled because any felt better as a whole. The function usage becomes
+// more complicated with a type parameter
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function resolveTailwindThemeValue(key, val) {
+    // If tailwind theme has the mapping for value, use it to get value.
+    // For example the theme has:
+    //
+    // "gridRow": {
+    //   "auto": "auto",
+    //   "span-1": "span 1 / span 1",
+    //   "span-2": "span 2 / span 2",
+    //   "span-3": "span 3 / span 3",
+    //   "span-4": "span 4 / span 4",
+    //   "span-5": "span 5 / span 5",
+    //   "span-6": "span 6 / span 6",
+    //   "span-full": "1 / -1"
+    // },
+    //
+    // key would be "gridRow", and val could be e.g. "span-5"
+    const resolvedKey = key in THEME_MAPPING ? THEME_MAPPING[key] : key;
+    const found = get(partialTheme, [resolvedKey, val], undefined);
+    if (!isUndefined(found)) {
+        return found;
+    }
+    return val;
+}
+export function useStyle(styles) {
+    const context = useContext(DesignSystemContext);
+    return Object.keys(styles).reduce((acc, key) => {
+        // This was the only way I got tsc happy. We are iterating the object keys,
+        // so we know the property must exist.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const property = styles[key];
+        const isStylesObject = isPlainObject(property) && 'value' in property;
+        const value = isStylesObject ? property.value : property;
+        const resolvedValue = selectBreakpointValue(value, context.breakpointMatches);
+        const transformer = isUndefined(property === null || property === void 0 ? void 0 : property.transformer)
+            ? (val) => resolveTailwindThemeValue(key, val)
+            : // Even if transformer is set, we pass it through the default transformer
+                // which will resolve possible tailwind theme mapping values
+                (val) => resolveTailwindThemeValue(key, property.transformer(val));
+        const cssPropertyValue = transformer(resolvedValue);
+        if (isUndefined(cssPropertyValue)) {
+            // If style value is undefined, we omit the key from the object
+            // this should reduce unwanted {key: "undefined"} noise
+            return acc;
+        }
+        return Object.assign(Object.assign({}, acc), { [key]: cssPropertyValue });
+    }, {});
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU3R5bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdXNlU3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNuQyxPQUFPLEdBQUcsTUFBTSxZQUFZLENBQUM7QUFDN0IsT0FBTyxXQUFXLE1BQU0sb0JBQW9CLENBQUM7QUFDN0MsT0FBTyxhQUFhLE1BQU0sc0JBQXNCLENBQUM7QUFDakQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFDckUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFFOUQsT0FBTyxZQUFZLE1BQU0scUJBQXFCLENBQUM7QUFXL0MsTUFBTSxhQUFhLEdBQTJCO0lBQzVDLFVBQVUsRUFBRSxTQUFTO0lBQ3JCLGFBQWEsRUFBRSxTQUFTO0lBQ3hCLFdBQVcsRUFBRSxTQUFTO0lBQ3RCLFlBQVksRUFBRSxTQUFTO0lBQ3ZCLFNBQVMsRUFBRSxRQUFRO0lBQ25CLFlBQVksRUFBRSxRQUFRO0lBQ3RCLFVBQVUsRUFBRSxRQUFRO0lBQ3BCLFdBQVcsRUFBRSxRQUFRO0lBQ3JCLE1BQU0sRUFBRSxLQUFLO0lBQ2IsU0FBUyxFQUFFLEtBQUs7Q0FDakIsQ0FBQztBQUVGLDBFQUEwRTtBQUMxRSx5Q0FBeUM7QUFDekMsNkVBQTZFO0FBQzdFLE1BQU0sVUFBVSx5QkFBeUIsQ0FBQyxHQUFXLEVBQUUsR0FBUTtJQUM3RCxvRUFBb0U7SUFDcEUsNkJBQTZCO0lBQzdCLEVBQUU7SUFDRixlQUFlO0lBQ2Ysb0JBQW9CO0lBQ3BCLGlDQUFpQztJQUNqQyxpQ0FBaUM7SUFDakMsaUNBQWlDO0lBQ2pDLGlDQUFpQztJQUNqQyxpQ0FBaUM7SUFDakMsaUNBQWlDO0lBQ2pDLDBCQUEwQjtJQUMxQixLQUFLO0lBQ0wsRUFBRTtJQUNGLHlEQUF5RDtJQUN6RCxNQUFNLFdBQVcsR0FBRyxHQUFHLElBQUksYUFBYSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztJQUNwRSxNQUFNLEtBQUssR0FBRyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUMsV0FBVyxFQUFFLEdBQUcsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQy9ELElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLEVBQUU7UUFDdkIsT0FBTyxLQUFLLENBQUM7S0FDZDtJQUVELE9BQU8sR0FBRyxDQUFDO0FBQ2IsQ0FBQztBQUVELE1BQU0sVUFBVSxRQUFRLENBQUMsTUFBb0I7SUFDM0MsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFFaEQsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUM3QywyRUFBMkU7UUFDM0Usc0NBQXNDO1FBQ3RDLG9FQUFvRTtRQUNwRSxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsR0FBeUIsQ0FBRSxDQUFDO1FBRXBELE1BQU0sY0FBYyxHQUFHLGFBQWEsQ0FBQyxRQUFRLENBQUMsSUFBSSxPQUFPLElBQUksUUFBUSxDQUFDO1FBQ3RFLE1BQU0sS0FBSyxHQUFHLGNBQWMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO1FBQ3pELE1BQU0sYUFBYSxHQUFHLHFCQUFxQixDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUU5RSxNQUFNLFdBQVcsR0FBRyxXQUFXLENBQUMsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFFLFdBQVcsQ0FBQztZQUNwRCxDQUFDLENBQUMsQ0FBQyxHQUFRLEVBQUUsRUFBRSxDQUFDLHlCQUF5QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUM7WUFDbkQsQ0FBQyxDQUFDLHlFQUF5RTtnQkFDekUsNERBQTREO2dCQUM1RCxDQUFDLEdBQVEsRUFBRSxFQUFFLENBQUMseUJBQXlCLENBQUMsR0FBRyxFQUFFLFFBQVEsQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUU1RSxNQUFNLGdCQUFnQixHQUFHLFdBQVcsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNwRCxJQUFJLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFO1lBQ2pDLCtEQUErRDtZQUMvRCx1REFBdUQ7WUFDdkQsT0FBTyxHQUFHLENBQUM7U0FDWjtRQUVELHVDQUNLLEdBQUcsS0FDTixDQUFDLEdBQUcsQ0FBQyxFQUFFLGdCQUFnQixJQUN2QjtJQUNKLENBQUMsRUFBRSxFQUF5QixDQUFDLENBQUM7QUFDaEMsQ0FBQyJ9

package/dist/src/utils/useWindowSize.d.ts

@@ -0,0 +1,5 @@
+export declare type WindowSize = {
+    width: number;
+    height: number;
+} | undefined;
+export declare function useWindowSize(): WindowSize;

package/dist/src/utils/useWindowSize.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+import isUndefined from 'lodash/isUndefined';
+import debounce from 'lodash/debounce';
+export function useWindowSize() {
+    const getWindowSize = () => {
+        if (isUndefined(globalThis.window)) {
+            return undefined;
+        }
+        return {
+            width: globalThis.window.innerWidth,
+            height: globalThis.window.innerHeight,
+        };
+    };
+    const [size, setWindowSize] = useState(getWindowSize());
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize(getWindowSize());
+        }
+        const debouncedHandler = debounce(handleResize, 50);
+        window.addEventListener('resize', debouncedHandler);
+        return () => {
+            window.removeEventListener('resize', debouncedHandler);
+        };
+    }, []);
+    return size;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlV2luZG93U2l6ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy91c2VXaW5kb3dTaXplLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQzVDLE9BQU8sV0FBVyxNQUFNLG9CQUFvQixDQUFDO0FBQzdDLE9BQU8sUUFBUSxNQUFNLGlCQUFpQixDQUFDO0FBU3ZDLE1BQU0sVUFBVSxhQUFhO0lBQzNCLE1BQU0sYUFBYSxHQUFHLEdBQUcsRUFBRTtRQUN6QixJQUFJLFdBQVcsQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDbEMsT0FBTyxTQUFTLENBQUM7U0FDbEI7UUFFRCxPQUFPO1lBQ0wsS0FBSyxFQUFFLFVBQVUsQ0FBQyxNQUFNLENBQUMsVUFBVTtZQUNuQyxNQUFNLEVBQUUsVUFBVSxDQUFDLE1BQU0sQ0FBQyxXQUFXO1NBQ3RDLENBQUM7SUFDSixDQUFDLENBQUM7SUFFRixNQUFNLENBQUMsSUFBSSxFQUFFLGFBQWEsQ0FBQyxHQUFHLFFBQVEsQ0FBYSxhQUFhLEVBQUUsQ0FBQyxDQUFDO0lBRXBFLFNBQVMsQ0FBQyxHQUFHLEVBQUU7UUFDYixTQUFTLFlBQVk7WUFDbkIsYUFBYSxDQUFDLGFBQWEsRUFBRSxDQUFDLENBQUM7UUFDakMsQ0FBQztRQUVELE1BQU0sZ0JBQWdCLEdBQUcsUUFBUSxDQUFDLFlBQVksRUFBRSxFQUFFLENBQUMsQ0FBQztRQUVwRCxNQUFNLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLGdCQUFnQixDQUFDLENBQUM7UUFDcEQsT0FBTyxHQUFHLEVBQUU7WUFDVixNQUFNLENBQUMsbUJBQW1CLENBQUMsUUFBUSxFQUFFLGdCQUFnQixDQUFDLENBQUM7UUFDekQsQ0FBQyxDQUFDO0lBQ0osQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsT0FBTyxJQUFJLENBQUM7QUFDZCxDQUFDIn0=