@workday/canvas-kit-labs-react 6.8.9 → 6.9.0-next.5

package/dist/commonjs/common/lib/Box.js

@@ -1,85 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
-var common_1 = require("@workday/canvas-kit-react/common");
-// style props
-var border_1 = require("./utils/border");
-var color_1 = require("./utils/color");
-var depth_1 = require("./utils/depth");
-var flexItem_1 = require("./utils/flexItem");
-var layout_1 = require("./utils/layout");
-var position_1 = require("./utils/position");
-var space_1 = require("./utils/space");
-var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
-var shouldForwardProp = function (prop) {
-    return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
-};
-// Meant to be used with elements. The `shouldForwardProps` will remove all style props
-var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
-    boxSizing: 'border-box',
-}, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
-// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-var StyledBoxComponent = styled_1.default('div')({
-    boxSizing: 'border-box',
-}, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
-/**
- * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
- * It is highly flexible, and its primary purpose is to build other components.
- *
- * @example
- * import { Box, BoxProps } from '@workday/canvas-kit-labs-react/common';
- *
- * interface CardProps extends BoxProps {
- *   // card-specific props
- * }
- *
- * // `Card`'s default values are set using `BoxProps`
- * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
- * );
- *
- */
-exports.Box = common_1.createComponent('div')({
-    displayName: 'Box',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        var BoxComponent = common_1.useConstant(function () {
-            return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
-        });
-        return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
-    },
-});

package/dist/commonjs/common/lib/utils/border.d.ts

@@ -1,103 +0,0 @@
-import { CanvasBorderRadiusKeys, CanvasColor } from '@workday/canvas-kit-react/tokens';
-import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { PropertyBorder } from './types';
-/** style props to set the border properties */
-export declare type BorderShorthandStyleProps = {
-    /** sets `border` property */
-    border?: string;
-    /** sets `border-top` property */
-    borderTop?: string;
-    /** sets `border-right` property (no bidirectional support) */
-    borderRight?: string;
-    /** sets `border-bottom` property */
-    borderBottom?: string;
-    /** sets `border-left` property (no bidirectional support) */
-    borderLeft?: string;
-};
-/** style props to set the border color properties */
-export declare type BorderColorStyleProps = {
-    /** sets `border-color` property */
-    borderColor?: CanvasColor | (string & {});
-    /** sets `border-top-color` property */
-    borderTopColor?: CanvasColor | (string & {});
-    /** sets `border-right-color` property (no bidirectional support) */
-    borderRightColor?: CanvasColor | (string & {});
-    /** sets `border-bottom-color` property */
-    borderBottomColor?: CanvasColor | (string & {});
-    /** sets `border-left-color` property (no bidirectional support) */
-    borderLeftColor?: CanvasColor | (string & {});
-};
-/** style props to set the border radius properties */
-export declare type BorderRadiusStyleProps = {
-    /** sets `border-radius` property */
-    borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
-    /** sets `border-top-left-radius` property */
-    borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-    /** sets `border-top-right-radius` property */
-    borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-    /** sets `border-bottom-left-radius` property */
-    borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-    /** sets `border-bottom-right-radius` property */
-    borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-};
-/** style props to set the border style properties */
-export declare type BorderLineStyleProps = {
-    /** sets `border-style` property */
-    borderStyle?: PropertyBorder;
-    /** sets `border-top-style` property */
-    borderTopStyle?: PropertyBorder;
-    /** sets `border-right-style` property (no bidirectional support) */
-    borderRightStyle?: PropertyBorder;
-    /** sets `border-bottom-style` property */
-    borderBottomStyle?: PropertyBorder;
-    /** sets `border-left-style` property (no bidirectional support) */
-    borderLeftStyle?: PropertyBorder;
-};
-/** style props to set the border width properties */
-export declare type BorderWidthStyleProps = {
-    /** sets `border-width` property */
-    borderWidth?: string | number;
-    /** sets `border-top-width` property */
-    borderTopWidth?: string | number;
-    /** sets `border-right-width` property (no bidirectional support) */
-    borderRightWidth?: string | number;
-    /** sets `border-bottom-width` property */
-    borderBottomWidth?: string | number;
-    /** sets `border-left-width` property (no bidirectional support) */
-    borderLeftWidth?: string | number;
-};
-export declare type BorderLogicalStyleProps = {
-    /** sets `border-left` property (bidirectional support) */
-    borderInlineStart?: string;
-    /** sets `border-left-color` property (bidirectional support) */
-    borderInlineStartColor?: CanvasColor | (string & {});
-    /** sets `border-left-style` property (bidirectional support) */
-    borderInlineStartStyle?: PropertyBorder;
-    /** sets `border-left-width` property (bidirectional support) */
-    borderInlineStartWidth?: string | number;
-    /** sets `border-right` property (bidirectional support) */
-    borderInlineEnd?: string;
-    /** sets `border-right-color` property (bidirectional support) */
-    borderInlineEndColor?: CanvasColor | (string & {});
-    /** sets `border-right-style` property (bidirectional support) */
-    borderInlineEndStyle?: PropertyBorder;
-    /** sets `border-right-width` property (bidirectional support) */
-    borderInlineEndWidth?: string | number;
-};
-/** a collection style props for border properties */
-export declare type BorderStyleProps = BorderShorthandStyleProps & BorderColorStyleProps & BorderRadiusStyleProps & BorderLineStyleProps & BorderWidthStyleProps & BorderLogicalStyleProps;
-/**
- * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
- * If no `BorderStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `border` with low-level, styled components
- * const BoxExample = () => (
- *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
- * );
- *
- */
-export declare function border<P extends BorderStyleProps & {
-    theme?: PartialEmotionCanvasTheme;
-}>(props: P): {};
-//# sourceMappingURL=border.d.ts.map

package/dist/commonjs/common/lib/utils/border.d.ts.map

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

package/dist/commonjs/common/lib/utils/border.js

@@ -1,152 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-// border logical prop handlers
-var borderInlineStart = function (isRTL) { return (isRTL ? 'borderRight' : 'borderLeft'); };
-var borderInlineEnd = function (isRTL) { return (isRTL ? 'borderLeft' : 'borderRight'); };
-var borderInlineStartColor = function (isRTL) { return (isRTL ? 'borderRightColor' : 'borderLeftColor'); };
-var borderInlineEndColor = function (isRTL) { return (isRTL ? 'borderLeftColor' : 'borderRightColor'); };
-var borderInlineStartStyle = function (isRTL) { return (isRTL ? 'borderRightStyle' : 'borderLeftStyle'); };
-var borderInlineEndStyle = function (isRTL) { return (isRTL ? 'borderLeftStyle' : 'borderRightStyle'); };
-var borderInlineStartWidth = function (isRTL) { return (isRTL ? 'borderRightWidth' : 'borderLeftWidth'); };
-var borderInlineEndWidth = function (isRTL) { return (isRTL ? 'borderLeftWidth' : 'borderRightWidth'); };
-var borderShorthandProps = {
-    border: 'border',
-    borderTop: 'borderTop',
-    borderRight: 'borderRight',
-    borderBottom: 'borderBottom',
-    borderLeft: 'borderLeft',
-    borderInlineStart: borderInlineStart,
-    borderInlineEnd: borderInlineEnd,
-};
-var borderColors = {
-    borderColor: 'borderColor',
-    borderTopColor: 'borderTopColor',
-    borderRightColor: 'borderRightColor',
-    borderBottomColor: 'borderBottomColor',
-    borderLeftColor: 'borderLeftColor',
-    borderInlineStartColor: borderInlineStartColor,
-    borderInlineEndColor: borderInlineEndColor,
-};
-var borderRadii = {
-    borderRadius: 'borderRadius',
-    borderTopLeftRadius: 'borderTopLeftRadius',
-    borderTopRightRadius: 'borderTopRightRadius',
-    borderBottomLeftRadius: 'borderBottomLeftRadius',
-    borderBottomRightRadius: 'borderBottomRightRadius',
-};
-var borderStyles = {
-    borderStyle: 'borderStyle',
-    borderTopStyle: 'borderTopStyle',
-    borderRightStyle: 'borderRightStyle',
-    borderBottomStyle: 'borderBottomStyle',
-    borderLeftStyle: 'borderLeftStyle',
-    borderInlineStartStyle: borderInlineStartStyle,
-    borderInlineEndStyle: borderInlineEndStyle,
-};
-var borderWidths = {
-    borderWidth: 'borderWidth',
-    borderTopWidth: 'borderTopWidth',
-    borderRightWidth: 'borderRightWidth',
-    borderBottomWidth: 'borderBottomWidth',
-    borderLeftWidth: 'borderLeftWidth',
-    borderInlineStartWidth: borderInlineStartWidth,
-    borderInlineEndWidth: borderInlineEndWidth,
-};
-/**
- * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
- * If no `BorderStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `border` with low-level, styled components
- * const BoxExample = () => (
- *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
- * );
- *
- */
-function border(props) {
-    // border will always be used within the context of a component, but eslint doesn't know that
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var canvas = common_1.useTheme(props.theme).canvas;
-    var isRTL = canvas.direction === common_1.ContentDirection.RTL;
-    var styles = {};
-    for (var key in props) {
-        if (props.hasOwnProperty(key)) {
-            if (key in borderShorthandProps) {
-                var value = props[key];
-                var attr = void 0;
-                if (key === 'borderInlineStart') {
-                    attr = borderInlineStart(isRTL);
-                }
-                else if (key === 'borderInlineEnd') {
-                    attr = borderInlineEnd(isRTL);
-                }
-                else {
-                    attr = borderShorthandProps[key];
-                }
-                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-                styles[attr] = value;
-                continue;
-            }
-            if (key in borderColors) {
-                var propValue = props[key];
-                var value = tokens_1.colors[propValue] || propValue;
-                var attr = void 0;
-                if (key === 'borderInlineStartColor') {
-                    attr = borderInlineStartColor(isRTL);
-                }
-                else if (key === 'borderInlineEndColor') {
-                    attr = borderInlineEndColor(isRTL);
-                }
-                else {
-                    attr = borderColors[key];
-                }
-                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-                styles[attr] = value;
-                continue;
-            }
-            if (key in borderRadii) {
-                var propValue = props[key];
-                var value = tokens_1.borderRadius[propValue] || propValue;
-                var attr = borderRadii[key];
-                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-                styles[attr] = value;
-                continue;
-            }
-            if (key in borderStyles) {
-                var value = props[key];
-                var attr = void 0;
-                if (key === 'borderInlineStartStyle') {
-                    attr = borderInlineStartStyle(isRTL);
-                }
-                else if (key === 'borderInlineEndStyle') {
-                    attr = borderInlineEndStyle(isRTL);
-                }
-                else {
-                    attr = borderStyles[key];
-                }
-                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-                styles[attr] = value;
-                continue;
-            }
-            if (key in borderWidths) {
-                var value = props[key];
-                var attr = void 0;
-                if (key === 'borderInlineStartWidth') {
-                    attr = borderInlineStartWidth(isRTL);
-                }
-                else if (key === 'borderInlineEndWidth') {
-                    attr = borderInlineEndWidth(isRTL);
-                }
-                else {
-                    attr = borderWidths[key];
-                }
-                // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-                styles[attr] = value;
-            }
-        }
-    }
-    return styles;
-}
-exports.border = border;

package/dist/commonjs/common/lib/utils/color.d.ts

@@ -1,26 +0,0 @@
-import { colors as colorTokens, CanvasColor } from '@workday/canvas-kit-react/tokens';
-export declare type ColorTokens = typeof colorTokens;
-/** style props to for color properties */
-export declare type ColorStyleProps = {
-    /** sets `background` property */
-    background?: CanvasColor | (string & {});
-    /** sets `background-color` property */
-    backgroundColor?: CanvasColor | (string & {});
-    /** sets `background-image` property */
-    backgroundImage?: string;
-    /** sets `color` property */
-    color?: CanvasColor | (string & {});
-};
-/**
- * A style prop function that takes components props and returns color styles from canvas token values.
- * If no `ColorStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `color` with low-level, styled components
- * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
- * );
- *
- */
-export declare function color<P extends ColorStyleProps>(props: P): {};
-//# sourceMappingURL=color.d.ts.map

package/dist/commonjs/common/lib/utils/color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,WAAW,EAAE,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEpF,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAE7C,0CAA0C;AAC1C,oBAAY,eAAe,GAAG;IAC5B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,uCAAuC;IACvC,eAAe,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACrC,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAWxD"}

package/dist/commonjs/common/lib/utils/color.js

@@ -1,56 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var getBackground = function (value) { return ({
-    background: tokens_1.colors[value] || value,
-}); };
-var getBackgroundColor = function (value) { return ({
-    backgroundColor: tokens_1.colors[value] || value,
-}); };
-var getBackgroundImage = function (value) { return ({
-    backgroundImage: value,
-}); };
-var getColor = function (value) { return ({
-    color: tokens_1.colors[value] || value,
-}); };
-var colorProps = {
-    background: getBackground,
-    backgroundColor: getBackgroundColor,
-    backgroundImage: getBackgroundImage,
-    color: getColor,
-};
-/**
- * A style prop function that takes components props and returns color styles from canvas token values.
- * If no `ColorStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `color` with low-level, styled components
- * const BoxExample = () => (
- *   <Box backgroundColor="blueberry500" color="frenchVanilla100">Hello, colors!</Box>
- * );
- *
- */
-function color(props) {
-    var styles = {};
-    for (var key in props) {
-        if (key in colorProps) {
-            var value = props[key];
-            var colorFn = colorProps[key];
-            var style = colorFn(value);
-            styles = __assign(__assign({}, styles), style);
-        }
-    }
-    return styles;
-}
-exports.color = color;

package/dist/commonjs/common/lib/utils/depth.d.ts

@@ -1,22 +0,0 @@
-import { depth as depthTokens } from '@workday/canvas-kit-react/tokens';
-export declare type DepthTokens = typeof depthTokens;
-export declare type DepthTokenKeys = keyof DepthTokens;
-export declare type DepthTokenValues = DepthTokens[keyof DepthTokens];
-/** style props to for depth styles */
-export declare type DepthStyleProps = {
-    /** sets depth styles (box-shadow & border) */
-    depth?: DepthTokenKeys;
-};
-/**
- * A style prop function that takes components props and returns depth styles from canvas token values.
- * If no `DepthStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll mostly likely use `depth` with low-level, styled components
- * const BoxExample = () => (
- *   <Box depth={3}>Hello, box shadows!</Box>
- * );
- *
- */
-export declare function depth<P extends DepthStyleProps>(props: P): DepthTokenValues;
-//# sourceMappingURL=depth.d.ts.map

package/dist/commonjs/common/lib/utils/depth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/depth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,IAAI,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEtE,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAC7C,oBAAY,cAAc,GAAG,MAAM,WAAW,CAAC;AAC/C,oBAAY,gBAAgB,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,CAAC;AAE9D,sCAAsC;AACtC,oBAAY,eAAe,GAAG;IAC5B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAAC;AAMF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,GAAG,gBAAgB,CAS3E"}

package/dist/commonjs/common/lib/utils/depth.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var depthProps = {
-    depth: function (token) { return tokens_1.depth[token]; },
-};
-/**
- * A style prop function that takes components props and returns depth styles from canvas token values.
- * If no `DepthStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll mostly likely use `depth` with low-level, styled components
- * const BoxExample = () => (
- *   <Box depth={3}>Hello, box shadows!</Box>
- * );
- *
- */
-function depth(props) {
-    for (var key in props) {
-        if (key in depthProps) {
-            var token = props[key];
-            var depthFn = depthProps[key];
-            return depthFn(token);
-        }
-    }
-    return {};
-}
-exports.depth = depth;

package/dist/commonjs/common/lib/utils/flexItem.d.ts

@@ -1,33 +0,0 @@
-import { PropertyJustifySelf, PropertyAlignSelf, PropertyOrder } from './types';
-/** style props to for flexbox item properties */
-export declare type FlexItemStyleProps = {
-    /** sets `flex` property */
-    flex?: number | string;
-    /** sets `flex-grow` property */
-    flexGrow?: number | string;
-    /** sets `flex-shrink` property */
-    flexShrink?: number | string;
-    /** sets `flex-basis` property */
-    flexBasis?: number | string;
-    /** sets `justify-self` property */
-    justifySelf?: PropertyJustifySelf;
-    /** sets `align-self` property */
-    alignSelf?: PropertyAlignSelf;
-    /** sets `order` property */
-    order?: PropertyOrder;
-};
-/**
- * A style prop function that takes component props and returns flexbox item styles.
- * If no `FlexItemStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `flexItem` with low-level, styled components
- * const FlexItemExample = () => (
- *   <Box flex={1} flexBasis="auto" alignSelf={center}>
- *     Hello, flex item!
- *   </Box>
- * );
- *
- */
-export declare function flexItem<P extends FlexItemStyleProps>(props: P): {};
-//# sourceMappingURL=flexItem.d.ts.map

package/dist/commonjs/common/lib/utils/flexItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"flexItem.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/flexItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,mBAAmB,EAAE,iBAAiB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAE9E,iDAAiD;AACjD,oBAAY,kBAAkB,GAAG;IAC/B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAaF;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}

package/dist/commonjs/common/lib/utils/flexItem.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/** style props to for flexbox item properties */
-var flexItemProps = {
-    flex: 'flex',
-    flexGrow: 'flexGrow',
-    flexShrink: 'flexShrink',
-    flexBasis: 'flexBasis',
-    justifySelf: 'justifySelf',
-    alignSelf: 'alignSelf',
-    order: 'order',
-};
-/**
- * A style prop function that takes component props and returns flexbox item styles.
- * If no `FlexItemStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `flexItem` with low-level, styled components
- * const FlexItemExample = () => (
- *   <Box flex={1} flexBasis="auto" alignSelf={center}>
- *     Hello, flex item!
- *   </Box>
- * );
- *
- */
-function flexItem(props) {
-    var styles = {};
-    for (var key in props) {
-        if (key in flexItemProps) {
-            var attr = flexItemProps[key];
-            var value = props[key];
-            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-            styles[attr] = value;
-        }
-    }
-    return styles;
-}
-exports.flexItem = flexItem;

package/dist/commonjs/common/lib/utils/layout.d.ts

@@ -1,43 +0,0 @@
-import { PropertyDisplay, PropertyListStyle, PropertyOverflow, PropertyOverflowX, PropertyOverflowY, PropertyVerticalAlign } from './types';
-/** style props to for layout properties */
-export declare type LayoutStyleProps = {
-    /** sets `display` property */
-    display?: PropertyDisplay;
-    /** sets `height` property */
-    height?: number | string;
-    /** sets `list-style property */
-    listStyle?: PropertyListStyle;
-    /** sets `max-height` property */
-    maxHeight?: number | string;
-    /** sets `max-width` property */
-    maxWidth?: number | string;
-    /** sets `min-height` property */
-    minHeight?: number | string;
-    /** sets `min-width` property */
-    minWidth?: number | string;
-    /** sets `overflow` property */
-    overflow?: PropertyOverflow;
-    /** sets `overflow-x` property */
-    overflowX?: PropertyOverflowX;
-    /** sets `overflow-y` property */
-    overflowY?: PropertyOverflowY;
-    /** sets `vertical-align` property */
-    verticalAlign?: PropertyVerticalAlign;
-    /** sets `width` property */
-    width?: number | string;
-};
-/**
- * A style prop function that takes components props and returns layout styles.
- * If no `LayoutStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `layout` with low-level, styled components
- * const BoxExample = () => (
- *   <Box display="inline-block" height="50%">
- *     Hello, positions!
- *   </Box>
- * );
- *
- */
-export declare function layout<P extends LayoutStyleProps>(props: P): {};
-//# sourceMappingURL=layout.d.ts.map

package/dist/commonjs/common/lib/utils/layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/layout.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAEjB,2CAA2C;AAC3C,oBAAY,gBAAgB,GAAG;IAC7B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,gCAAgC;IAChC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,qCAAqC;IACrC,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAiBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,gBAAgB,EAAE,KAAK,EAAE,CAAC,MAW1D"}

package/dist/commonjs/common/lib/utils/layout.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var layoutProps = {
-    display: 'display',
-    height: 'height',
-    listStyle: 'listStyle',
-    maxHeight: 'maxHeight',
-    maxWidth: 'maxWidth',
-    minHeight: 'minHeight',
-    minWidth: 'minWidth',
-    overflow: 'overflow',
-    overflowX: 'overflowX',
-    overflowY: 'overflowY',
-    verticalAlign: 'verticalAlign',
-    width: 'width',
-};
-/**
- * A style prop function that takes components props and returns layout styles.
- * If no `LayoutStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `layout` with low-level, styled components
- * const BoxExample = () => (
- *   <Box display="inline-block" height="50%">
- *     Hello, positions!
- *   </Box>
- * );
- *
- */
-function layout(props) {
-    var styles = {};
-    for (var key in props) {
-        if (key in layoutProps) {
-            var attr = layoutProps[key];
-            var value = props[key];
-            // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-            styles[attr] = value;
-        }
-    }
-    return styles;
-}
-exports.layout = layout;