@twilio-paste/flex - npm Package Compare versions

Comparing version 5.0.1 to 5.0.2

dist/helpers.d.ts

@@ -7,5 +7,5 @@ import type { ValueOf } from '@twilio-paste/types';
 export declare const getBasis: ({ basis }: FlexProps) => string | string[];
-declare type GetVerticalReturn = 'column' | 'row';
+type GetVerticalReturn = 'column' | 'row';
 export declare const getVertical: ({ vertical }: FlexProps) => GetVerticalReturn | GetVerticalReturn[];
-declare type GetWrapReturn = 'wrap' | 'nowrap';
+type GetWrapReturn = 'wrap' | 'nowrap';
 export declare const getWrap: ({ wrap }: FlexProps) => GetWrapReturn | GetWrapReturn[];
@@ -12,0 +12,0 @@ declare const RemapedVerticalAlignments: {

dist/index.debug.es.js

@@ -35,3 +35,3 @@ var __defProp = Object.defineProperty;
 import * as React from "react";
-import * as PropTypes from "prop-types";
+import PropTypes from "prop-types";
 import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
@@ -178,95 +178,108 @@ import {
 };
-var Flex = React.forwardRef((_a, ref) => {
-  var _b = _a, {
-    as,
-    basis,
-    children,
-    display,
-    element = "FLEX",
-    hAlignContent,
-    grow,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    margin,
-    marginX,
-    marginY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    padding,
-    paddingX,
-    paddingY,
-    maxWidth,
-    minWidth = "size0",
-    width,
-    height,
-    minHeight,
-    maxHeight,
-    size,
-    shrink,
-    vertical,
-    vAlignContent,
-    wrap
-  } = _b, props = __objRest(_b, [
-    "as",
-    "basis",
-    "children",
-    "display",
-    "element",
-    "hAlignContent",
-    "grow",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "margin",
-    "marginX",
-    "marginY",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "maxWidth",
-    "minWidth",
-    "width",
-    "height",
-    "minHeight",
-    "maxHeight",
-    "size",
-    "shrink",
-    "vertical",
-    "vAlignContent",
-    "wrap"
-  ]);
-  const FlexStyles = React.useMemo(() => getFlexStyles({ basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap }), [basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap]);
-  if (size && (width || height)) {
-    console.error("[Paste Flex]: you cannot set a height or width when using the size attribute");
+var Flex = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      as,
+      basis,
+      children,
+      display,
+      element = "FLEX",
+      hAlignContent,
+      grow,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      margin,
+      marginX,
+      marginY,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      padding,
+      paddingX,
+      paddingY,
+      maxWidth,
+      minWidth = "size0",
+      width,
+      height,
+      minHeight,
+      maxHeight,
+      size,
+      shrink,
+      vertical,
+      vAlignContent,
+      wrap
+    } = _b, props = __objRest(_b, [
+      "as",
+      "basis",
+      "children",
+      "display",
+      "element",
+      "hAlignContent",
+      "grow",
+      "marginTop",
+      "marginRight",
+      "marginBottom",
+      "marginLeft",
+      "margin",
+      "marginX",
+      "marginY",
+      "paddingTop",
+      "paddingRight",
+      "paddingBottom",
+      "paddingLeft",
+      "padding",
+      "paddingX",
+      "paddingY",
+      "maxWidth",
+      "minWidth",
+      "width",
+      "height",
+      "minHeight",
+      "maxHeight",
+      "size",
+      "shrink",
+      "vertical",
+      "vAlignContent",
+      "wrap"
+    ]);
+    const FlexStyles = React.useMemo(
+      () => getFlexStyles({ basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap }),
+      [basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap]
+    );
+    if (size && (width || height)) {
+      console.error("[Paste Flex]: you cannot set a height or width when using the size attribute");
+    }
+    if (marginX && (margin || marginBottom || marginLeft || marginRight || marginTop) || marginY && (margin || marginBottom || marginLeft || marginRight || marginTop)) {
+      console.error(
+        "[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."
+      );
+    }
+    if (paddingX && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop) || paddingY && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop)) {
+      console.error(
+        "[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes."
+      );
+    }
+    const margins = marginX || marginY ? { marginX, marginY } : { margin, marginBottom, marginLeft, marginRight, marginTop };
+    const paddings = paddingX || paddingY ? { paddingX, paddingY } : { padding, paddingBottom, paddingLeft, paddingRight, paddingTop };
+    const widths = size ? { size } : { height, width };
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, FlexStyles), safelySpreadBoxProps(props)), {
+        ref,
+        as,
+        display,
+        element
+      }), margins), paddings), {
+        minHeight,
+        maxHeight,
+        maxWidth,
+        minWidth
+      }), widths),
+      children
+    );
   }
-  if (marginX && (margin || marginBottom || marginLeft || marginRight || marginTop) || marginY && (margin || marginBottom || marginLeft || marginRight || marginTop)) {
-    console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes.");
-  }
-  if (paddingX && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop) || paddingY && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop)) {
-    console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");
-  }
-  const margins = marginX || marginY ? { marginX, marginY } : { margin, marginBottom, marginLeft, marginRight, marginTop };
-  const paddings = paddingX || paddingY ? { paddingX, paddingY } : { padding, paddingBottom, paddingLeft, paddingRight, paddingTop };
-  const widths = size ? { size } : { height, width };
-  return /* @__PURE__ */ React.createElement(Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, FlexStyles), safelySpreadBoxProps(props)), {
-    ref,
-    as,
-    display,
-    element
-  }), margins), paddings), {
-    minHeight,
-    maxHeight,
-    maxWidth,
-    minWidth
-  }), widths), children);
-});
+);
 Flex.displayName = "Flex";
@@ -273,0 +286,0 @@ Flex.defaultProps = {

dist/index.debug.js

@@ -0,1 +1,2 @@
+"use strict";
 var __create = Object.create;
@@ -48,3 +49,6 @@ var __defProp = Object.defineProperty;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -59,3 +63,3 @@
 var React = __toESM(require("react"));
-var PropTypes = __toESM(require("prop-types"));
+var import_prop_types = __toESM(require("prop-types"));
 var import_box = require("@twilio-paste/box");
@@ -192,95 +196,108 @@ var import_style_props = require("@twilio-paste/style-props");
 };
-var Flex = React.forwardRef((_a, ref) => {
-  var _b = _a, {
-    as,
-    basis,
-    children,
-    display,
-    element = "FLEX",
-    hAlignContent,
-    grow,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    margin,
-    marginX,
-    marginY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    padding,
-    paddingX,
-    paddingY,
-    maxWidth,
-    minWidth = "size0",
-    width,
-    height,
-    minHeight,
-    maxHeight,
-    size,
-    shrink,
-    vertical,
-    vAlignContent,
-    wrap
-  } = _b, props = __objRest(_b, [
-    "as",
-    "basis",
-    "children",
-    "display",
-    "element",
-    "hAlignContent",
-    "grow",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "margin",
-    "marginX",
-    "marginY",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "maxWidth",
-    "minWidth",
-    "width",
-    "height",
-    "minHeight",
-    "maxHeight",
-    "size",
-    "shrink",
-    "vertical",
-    "vAlignContent",
-    "wrap"
-  ]);
-  const FlexStyles = React.useMemo(() => getFlexStyles({ basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap }), [basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap]);
-  if (size && (width || height)) {
-    console.error("[Paste Flex]: you cannot set a height or width when using the size attribute");
+var Flex = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      as,
+      basis,
+      children,
+      display,
+      element = "FLEX",
+      hAlignContent,
+      grow,
+      marginTop,
+      marginRight,
+      marginBottom,
+      marginLeft,
+      margin,
+      marginX,
+      marginY,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      padding,
+      paddingX,
+      paddingY,
+      maxWidth,
+      minWidth = "size0",
+      width,
+      height,
+      minHeight,
+      maxHeight,
+      size,
+      shrink,
+      vertical,
+      vAlignContent,
+      wrap
+    } = _b, props = __objRest(_b, [
+      "as",
+      "basis",
+      "children",
+      "display",
+      "element",
+      "hAlignContent",
+      "grow",
+      "marginTop",
+      "marginRight",
+      "marginBottom",
+      "marginLeft",
+      "margin",
+      "marginX",
+      "marginY",
+      "paddingTop",
+      "paddingRight",
+      "paddingBottom",
+      "paddingLeft",
+      "padding",
+      "paddingX",
+      "paddingY",
+      "maxWidth",
+      "minWidth",
+      "width",
+      "height",
+      "minHeight",
+      "maxHeight",
+      "size",
+      "shrink",
+      "vertical",
+      "vAlignContent",
+      "wrap"
+    ]);
+    const FlexStyles = React.useMemo(
+      () => getFlexStyles({ basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap }),
+      [basis, hAlignContent, grow, shrink, vertical, vAlignContent, wrap]
+    );
+    if (size && (width || height)) {
+      console.error("[Paste Flex]: you cannot set a height or width when using the size attribute");
+    }
+    if (marginX && (margin || marginBottom || marginLeft || marginRight || marginTop) || marginY && (margin || marginBottom || marginLeft || marginRight || marginTop)) {
+      console.error(
+        "[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."
+      );
+    }
+    if (paddingX && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop) || paddingY && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop)) {
+      console.error(
+        "[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes."
+      );
+    }
+    const margins = marginX || marginY ? { marginX, marginY } : { margin, marginBottom, marginLeft, marginRight, marginTop };
+    const paddings = paddingX || paddingY ? { paddingX, paddingY } : { padding, paddingBottom, paddingLeft, paddingRight, paddingTop };
+    const widths = size ? { size } : { height, width };
+    return /* @__PURE__ */ React.createElement(
+      import_box.Box,
+      __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, FlexStyles), (0, import_box.safelySpreadBoxProps)(props)), {
+        ref,
+        as,
+        display,
+        element
+      }), margins), paddings), {
+        minHeight,
+        maxHeight,
+        maxWidth,
+        minWidth
+      }), widths),
+      children
+    );
   }
-  if (marginX && (margin || marginBottom || marginLeft || marginRight || marginTop) || marginY && (margin || marginBottom || marginLeft || marginRight || marginTop)) {
-    console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes.");
-  }
-  if (paddingX && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop) || paddingY && (padding || paddingBottom || paddingLeft || paddingRight || paddingTop)) {
-    console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");
-  }
-  const margins = marginX || marginY ? { marginX, marginY } : { margin, marginBottom, marginLeft, marginRight, marginTop };
-  const paddings = paddingX || paddingY ? { paddingX, paddingY } : { padding, paddingBottom, paddingLeft, paddingRight, paddingTop };
-  const widths = size ? { size } : { height, width };
-  return /* @__PURE__ */ React.createElement(import_box.Box, __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, FlexStyles), (0, import_box.safelySpreadBoxProps)(props)), {
-    ref,
-    as,
-    display,
-    element
-  }), margins), paddings), {
-    minHeight,
-    maxHeight,
-    maxWidth,
-    minWidth
-  }), widths), children);
-});
+);
 Flex.displayName = "Flex";
@@ -291,12 +308,12 @@ Flex.defaultProps = {
 Flex.propTypes = {
-  as: PropTypes.string,
-  display: (0, import_style_props.ResponsiveProp)(PropTypes.oneOf(["flex", "inline-flex"])),
-  element: PropTypes.string,
-  vertical: (0, import_style_props.ResponsiveProp)(PropTypes.bool),
-  vAlignContent: (0, import_style_props.ResponsiveProp)(PropTypes.oneOf(["top", "center", "bottom", "stretch"])),
-  hAlignContent: (0, import_style_props.ResponsiveProp)(PropTypes.oneOf(["left", "center", "right", "around", "between"])),
-  grow: (0, import_style_props.ResponsiveProp)(PropTypes.oneOfType([PropTypes.bool, PropTypes.number])),
-  shrink: (0, import_style_props.ResponsiveProp)(PropTypes.oneOfType([PropTypes.bool, PropTypes.number])),
-  basis: (0, import_style_props.ResponsiveProp)(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-  wrap: (0, import_style_props.ResponsiveProp)(PropTypes.bool),
+  as: import_prop_types.default.string,
+  display: (0, import_style_props.ResponsiveProp)(import_prop_types.default.oneOf(["flex", "inline-flex"])),
+  element: import_prop_types.default.string,
+  vertical: (0, import_style_props.ResponsiveProp)(import_prop_types.default.bool),
+  vAlignContent: (0, import_style_props.ResponsiveProp)(import_prop_types.default.oneOf(["top", "center", "bottom", "stretch"])),
+  hAlignContent: (0, import_style_props.ResponsiveProp)(import_prop_types.default.oneOf(["left", "center", "right", "around", "between"])),
+  grow: (0, import_style_props.ResponsiveProp)(import_prop_types.default.oneOfType([import_prop_types.default.bool, import_prop_types.default.number])),
+  shrink: (0, import_style_props.ResponsiveProp)(import_prop_types.default.oneOfType([import_prop_types.default.bool, import_prop_types.default.number])),
+  basis: (0, import_style_props.ResponsiveProp)(import_prop_types.default.oneOfType([import_prop_types.default.string, import_prop_types.default.number])),
+  wrap: (0, import_style_props.ResponsiveProp)(import_prop_types.default.bool),
   width: import_style_props.isWidthTokenProp,
@@ -303,0 +320,0 @@ minWidth: import_style_props.isMinWidthTokenProp,

dist/index.es.js

@@ -1,1 +0,1 @@
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React from"react";import*as PropTypes from"prop-types";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{ResponsiveProp,isWidthTokenProp,isMinWidthTokenProp,isMaxWidthTokenProp,isHeightTokenProp,isMinHeightTokenProp,isMaxHeightTokenProp,isPaddingTokenProp,isMarginTokenProp}from"@twilio-paste/style-props";var getGrow=({grow})=>Array.isArray(grow)?grow.map(value=>Number(value)):typeof grow=="number"?grow:grow?1:0,getShrink=({shrink,basis})=>Array.isArray(shrink)?shrink.map(value=>Number(value)):typeof shrink=="number"?shrink:typeof shrink=="boolean"?shrink?1:0:basis&&basis!=="auto"?0:1,getSuffix=item=>{let suffix=typeof item=="number"||String(Number.parseInt(item,10))===item?"px":"";return item+suffix},getBasis=({basis})=>Array.isArray(basis)?basis.map(value=>getSuffix(value)):basis?getSuffix(basis):"auto",getVertical=({vertical})=>Array.isArray(vertical)?vertical.map(value=>typeof value=="boolean"?value===!0?"column":"row":value):vertical?"column":"row",getWrap=({wrap})=>Array.isArray(wrap)?wrap.map(value=>typeof value=="boolean"?value===!0?"wrap":"nowrap":value):wrap?"wrap":"nowrap",RemapedVerticalAlignments={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},vAlignToProps=({vAlignContent})=>Array.isArray(vAlignContent)?vAlignContent.map(value=>RemapedVerticalAlignments[value]):vAlignContent?RemapedVerticalAlignments[vAlignContent]:"flex-start",RemapedHorizontalAlignments={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},hAlignToProps=({hAlignContent})=>Array.isArray(hAlignContent)?hAlignContent.map(value=>RemapedHorizontalAlignments[value]):hAlignContent?RemapedHorizontalAlignments[hAlignContent]:"flex-start";var getFlexStyles=props=>{let styles={justifyContent:props.vertical?vAlignToProps(props):hAlignToProps(props),alignItems:props.vertical?hAlignToProps(props):vAlignToProps(props)};return(props.grow||props.shrink||props.basis)&&(styles.flexGrow=getGrow(props),styles.flexShrink=getShrink(props),styles.flexBasis=getBasis(props)),props.vertical&&(styles.flexDirection=getVertical(props)),props.wrap&&(styles.flexWrap=getWrap(props)),styles},Flex=React.forwardRef((_a,ref)=>{var _b=_a,{as,basis,children,display,element="FLEX",hAlignContent,grow,marginTop,marginRight,marginBottom,marginLeft,margin,marginX,marginY,paddingTop,paddingRight,paddingBottom,paddingLeft,padding,paddingX,paddingY,maxWidth,minWidth="size0",width,height,minHeight,maxHeight,size,shrink,vertical,vAlignContent,wrap}=_b,props=__objRest(_b,["as","basis","children","display","element","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let FlexStyles=React.useMemo(()=>getFlexStyles({basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap}),[basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap]);size&&(width||height)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(marginX&&(margin||marginBottom||marginLeft||marginRight||marginTop)||marginY&&(margin||marginBottom||marginLeft||marginRight||marginTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(paddingX&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop)||paddingY&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let margins=marginX||marginY?{marginX,marginY}:{margin,marginBottom,marginLeft,marginRight,marginTop},paddings=paddingX||paddingY?{paddingX,paddingY}:{padding,paddingBottom,paddingLeft,paddingRight,paddingTop},widths=size?{size}:{height,width};return React.createElement(Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({},FlexStyles),safelySpreadBoxProps(props)),{ref,as,display,element}),margins),paddings),{minHeight,maxHeight,maxWidth,minWidth}),widths),children)});Flex.displayName="Flex";Flex.defaultProps={display:"flex"};Flex.propTypes={as:PropTypes.string,display:ResponsiveProp(PropTypes.oneOf(["flex","inline-flex"])),element:PropTypes.string,vertical:ResponsiveProp(PropTypes.bool),vAlignContent:ResponsiveProp(PropTypes.oneOf(["top","center","bottom","stretch"])),hAlignContent:ResponsiveProp(PropTypes.oneOf(["left","center","right","around","between"])),grow:ResponsiveProp(PropTypes.oneOfType([PropTypes.bool,PropTypes.number])),shrink:ResponsiveProp(PropTypes.oneOfType([PropTypes.bool,PropTypes.number])),basis:ResponsiveProp(PropTypes.oneOfType([PropTypes.string,PropTypes.number])),wrap:ResponsiveProp(PropTypes.bool),width:isWidthTokenProp,minWidth:isMinWidthTokenProp,maxWidth:isMaxWidthTokenProp,height:isHeightTokenProp,minHeight:isMinHeightTokenProp,maxHeight:isMaxHeightTokenProp,size:isWidthTokenProp,margin:isMarginTokenProp,marginTop:isMarginTokenProp,marginRight:isMarginTokenProp,marginBottom:isMarginTokenProp,marginLeft:isMarginTokenProp,marginX:isMarginTokenProp,marginY:isMarginTokenProp,padding:isPaddingTokenProp,paddingTop:isPaddingTokenProp,paddingRight:isPaddingTokenProp,paddingBottom:isPaddingTokenProp,paddingLeft:isPaddingTokenProp,paddingX:isPaddingTokenProp,paddingY:isPaddingTokenProp};export{Flex};
+var __defProp=Object.defineProperty,__defProps=Object.defineProperties;var __getOwnPropDescs=Object.getOwnPropertyDescriptors;var __getOwnPropSymbols=Object.getOwnPropertySymbols;var __hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};import*as React from"react";import PropTypes from"prop-types";import{Box,safelySpreadBoxProps}from"@twilio-paste/box";import{ResponsiveProp,isWidthTokenProp,isMinWidthTokenProp,isMaxWidthTokenProp,isHeightTokenProp,isMinHeightTokenProp,isMaxHeightTokenProp,isPaddingTokenProp,isMarginTokenProp}from"@twilio-paste/style-props";var getGrow=({grow})=>Array.isArray(grow)?grow.map(value=>Number(value)):typeof grow=="number"?grow:grow?1:0,getShrink=({shrink,basis})=>Array.isArray(shrink)?shrink.map(value=>Number(value)):typeof shrink=="number"?shrink:typeof shrink=="boolean"?shrink?1:0:basis&&basis!=="auto"?0:1,getSuffix=item=>{let suffix=typeof item=="number"||String(Number.parseInt(item,10))===item?"px":"";return item+suffix},getBasis=({basis})=>Array.isArray(basis)?basis.map(value=>getSuffix(value)):basis?getSuffix(basis):"auto",getVertical=({vertical})=>Array.isArray(vertical)?vertical.map(value=>typeof value=="boolean"?value===!0?"column":"row":value):vertical?"column":"row",getWrap=({wrap})=>Array.isArray(wrap)?wrap.map(value=>typeof value=="boolean"?value===!0?"wrap":"nowrap":value):wrap?"wrap":"nowrap",RemapedVerticalAlignments={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},vAlignToProps=({vAlignContent})=>Array.isArray(vAlignContent)?vAlignContent.map(value=>RemapedVerticalAlignments[value]):vAlignContent?RemapedVerticalAlignments[vAlignContent]:"flex-start",RemapedHorizontalAlignments={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},hAlignToProps=({hAlignContent})=>Array.isArray(hAlignContent)?hAlignContent.map(value=>RemapedHorizontalAlignments[value]):hAlignContent?RemapedHorizontalAlignments[hAlignContent]:"flex-start";var getFlexStyles=props=>{let styles={justifyContent:props.vertical?vAlignToProps(props):hAlignToProps(props),alignItems:props.vertical?hAlignToProps(props):vAlignToProps(props)};return(props.grow||props.shrink||props.basis)&&(styles.flexGrow=getGrow(props),styles.flexShrink=getShrink(props),styles.flexBasis=getBasis(props)),props.vertical&&(styles.flexDirection=getVertical(props)),props.wrap&&(styles.flexWrap=getWrap(props)),styles},Flex=React.forwardRef((_a,ref)=>{var _b=_a,{as,basis,children,display,element="FLEX",hAlignContent,grow,marginTop,marginRight,marginBottom,marginLeft,margin,marginX,marginY,paddingTop,paddingRight,paddingBottom,paddingLeft,padding,paddingX,paddingY,maxWidth,minWidth="size0",width,height,minHeight,maxHeight,size,shrink,vertical,vAlignContent,wrap}=_b,props=__objRest(_b,["as","basis","children","display","element","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let FlexStyles=React.useMemo(()=>getFlexStyles({basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap}),[basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap]);size&&(width||height)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(marginX&&(margin||marginBottom||marginLeft||marginRight||marginTop)||marginY&&(margin||marginBottom||marginLeft||marginRight||marginTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(paddingX&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop)||paddingY&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let margins=marginX||marginY?{marginX,marginY}:{margin,marginBottom,marginLeft,marginRight,marginTop},paddings=paddingX||paddingY?{paddingX,paddingY}:{padding,paddingBottom,paddingLeft,paddingRight,paddingTop},widths=size?{size}:{height,width};return React.createElement(Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({},FlexStyles),safelySpreadBoxProps(props)),{ref,as,display,element}),margins),paddings),{minHeight,maxHeight,maxWidth,minWidth}),widths),children)});Flex.displayName="Flex";Flex.defaultProps={display:"flex"};Flex.propTypes={as:PropTypes.string,display:ResponsiveProp(PropTypes.oneOf(["flex","inline-flex"])),element:PropTypes.string,vertical:ResponsiveProp(PropTypes.bool),vAlignContent:ResponsiveProp(PropTypes.oneOf(["top","center","bottom","stretch"])),hAlignContent:ResponsiveProp(PropTypes.oneOf(["left","center","right","around","between"])),grow:ResponsiveProp(PropTypes.oneOfType([PropTypes.bool,PropTypes.number])),shrink:ResponsiveProp(PropTypes.oneOfType([PropTypes.bool,PropTypes.number])),basis:ResponsiveProp(PropTypes.oneOfType([PropTypes.string,PropTypes.number])),wrap:ResponsiveProp(PropTypes.bool),width:isWidthTokenProp,minWidth:isMinWidthTokenProp,maxWidth:isMaxWidthTokenProp,height:isHeightTokenProp,minHeight:isMinHeightTokenProp,maxHeight:isMaxHeightTokenProp,size:isWidthTokenProp,margin:isMarginTokenProp,marginTop:isMarginTokenProp,marginRight:isMarginTokenProp,marginBottom:isMarginTokenProp,marginLeft:isMarginTokenProp,marginX:isMarginTokenProp,marginY:isMarginTokenProp,padding:isPaddingTokenProp,paddingTop:isPaddingTokenProp,paddingRight:isPaddingTokenProp,paddingBottom:isPaddingTokenProp,paddingLeft:isPaddingTokenProp,paddingX:isPaddingTokenProp,paddingY:isPaddingTokenProp};export{Flex};

dist/index.js

@@ -1,1 +0,1 @@
-var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Flex:()=>Flex});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),PropTypes=__toESM(require("prop-types")),import_box=require("@twilio-paste/box"),import_style_props=require("@twilio-paste/style-props");var getGrow=({grow})=>Array.isArray(grow)?grow.map(value=>Number(value)):typeof grow=="number"?grow:grow?1:0,getShrink=({shrink,basis})=>Array.isArray(shrink)?shrink.map(value=>Number(value)):typeof shrink=="number"?shrink:typeof shrink=="boolean"?shrink?1:0:basis&&basis!=="auto"?0:1,getSuffix=item=>{let suffix=typeof item=="number"||String(Number.parseInt(item,10))===item?"px":"";return item+suffix},getBasis=({basis})=>Array.isArray(basis)?basis.map(value=>getSuffix(value)):basis?getSuffix(basis):"auto",getVertical=({vertical})=>Array.isArray(vertical)?vertical.map(value=>typeof value=="boolean"?value===!0?"column":"row":value):vertical?"column":"row",getWrap=({wrap})=>Array.isArray(wrap)?wrap.map(value=>typeof value=="boolean"?value===!0?"wrap":"nowrap":value):wrap?"wrap":"nowrap",RemapedVerticalAlignments={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},vAlignToProps=({vAlignContent})=>Array.isArray(vAlignContent)?vAlignContent.map(value=>RemapedVerticalAlignments[value]):vAlignContent?RemapedVerticalAlignments[vAlignContent]:"flex-start",RemapedHorizontalAlignments={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},hAlignToProps=({hAlignContent})=>Array.isArray(hAlignContent)?hAlignContent.map(value=>RemapedHorizontalAlignments[value]):hAlignContent?RemapedHorizontalAlignments[hAlignContent]:"flex-start";var getFlexStyles=props=>{let styles={justifyContent:props.vertical?vAlignToProps(props):hAlignToProps(props),alignItems:props.vertical?hAlignToProps(props):vAlignToProps(props)};return(props.grow||props.shrink||props.basis)&&(styles.flexGrow=getGrow(props),styles.flexShrink=getShrink(props),styles.flexBasis=getBasis(props)),props.vertical&&(styles.flexDirection=getVertical(props)),props.wrap&&(styles.flexWrap=getWrap(props)),styles},Flex=React.forwardRef((_a,ref)=>{var _b=_a,{as,basis,children,display,element="FLEX",hAlignContent,grow,marginTop,marginRight,marginBottom,marginLeft,margin,marginX,marginY,paddingTop,paddingRight,paddingBottom,paddingLeft,padding,paddingX,paddingY,maxWidth,minWidth="size0",width,height,minHeight,maxHeight,size,shrink,vertical,vAlignContent,wrap}=_b,props=__objRest(_b,["as","basis","children","display","element","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let FlexStyles=React.useMemo(()=>getFlexStyles({basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap}),[basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap]);size&&(width||height)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(marginX&&(margin||marginBottom||marginLeft||marginRight||marginTop)||marginY&&(margin||marginBottom||marginLeft||marginRight||marginTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(paddingX&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop)||paddingY&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let margins=marginX||marginY?{marginX,marginY}:{margin,marginBottom,marginLeft,marginRight,marginTop},paddings=paddingX||paddingY?{paddingX,paddingY}:{padding,paddingBottom,paddingLeft,paddingRight,paddingTop},widths=size?{size}:{height,width};return React.createElement(import_box.Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({},FlexStyles),(0,import_box.safelySpreadBoxProps)(props)),{ref,as,display,element}),margins),paddings),{minHeight,maxHeight,maxWidth,minWidth}),widths),children)});Flex.displayName="Flex";Flex.defaultProps={display:"flex"};Flex.propTypes={as:PropTypes.string,display:(0,import_style_props.ResponsiveProp)(PropTypes.oneOf(["flex","inline-flex"])),element:PropTypes.string,vertical:(0,import_style_props.ResponsiveProp)(PropTypes.bool),vAlignContent:(0,import_style_props.ResponsiveProp)(PropTypes.oneOf(["top","center","bottom","stretch"])),hAlignContent:(0,import_style_props.ResponsiveProp)(PropTypes.oneOf(["left","center","right","around","between"])),grow:(0,import_style_props.ResponsiveProp)(PropTypes.oneOfType([PropTypes.bool,PropTypes.number])),shrink:(0,import_style_props.ResponsiveProp)(PropTypes.oneOfType([PropTypes.bool,PropTypes.number])),basis:(0,import_style_props.ResponsiveProp)(PropTypes.oneOfType([PropTypes.string,PropTypes.number])),wrap:(0,import_style_props.ResponsiveProp)(PropTypes.bool),width:import_style_props.isWidthTokenProp,minWidth:import_style_props.isMinWidthTokenProp,maxWidth:import_style_props.isMaxWidthTokenProp,height:import_style_props.isHeightTokenProp,minHeight:import_style_props.isMinHeightTokenProp,maxHeight:import_style_props.isMaxHeightTokenProp,size:import_style_props.isWidthTokenProp,margin:import_style_props.isMarginTokenProp,marginTop:import_style_props.isMarginTokenProp,marginRight:import_style_props.isMarginTokenProp,marginBottom:import_style_props.isMarginTokenProp,marginLeft:import_style_props.isMarginTokenProp,marginX:import_style_props.isMarginTokenProp,marginY:import_style_props.isMarginTokenProp,padding:import_style_props.isPaddingTokenProp,paddingTop:import_style_props.isPaddingTokenProp,paddingRight:import_style_props.isPaddingTokenProp,paddingBottom:import_style_props.isPaddingTokenProp,paddingLeft:import_style_props.isPaddingTokenProp,paddingX:import_style_props.isPaddingTokenProp,paddingY:import_style_props.isPaddingTokenProp};0&&(module.exports={Flex});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDesc=Object.getOwnPropertyDescriptor,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropNames=Object.getOwnPropertyNames,__getOwnPropSymbols=Object.getOwnPropertySymbols,__getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable;var __defNormalProp=(obj,key,value)=>key in obj?__defProp(obj,key,{enumerable:!0,configurable:!0,writable:!0,value}):obj[key]=value,__spreadValues=(a,b)=>{for(var prop in b||(b={}))__hasOwnProp.call(b,prop)&&__defNormalProp(a,prop,b[prop]);if(__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(b))__propIsEnum.call(b,prop)&&__defNormalProp(a,prop,b[prop]);return a},__spreadProps=(a,b)=>__defProps(a,__getOwnPropDescs(b));var __objRest=(source,exclude)=>{var target={};for(var prop in source)__hasOwnProp.call(source,prop)&&exclude.indexOf(prop)<0&&(target[prop]=source[prop]);if(source!=null&&__getOwnPropSymbols)for(var prop of __getOwnPropSymbols(source))exclude.indexOf(prop)<0&&__propIsEnum.call(source,prop)&&(target[prop]=source[prop]);return target};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{Flex:()=>Flex});module.exports=__toCommonJS(src_exports);var React=__toESM(require("react")),import_prop_types=__toESM(require("prop-types")),import_box=require("@twilio-paste/box"),import_style_props=require("@twilio-paste/style-props");var getGrow=({grow})=>Array.isArray(grow)?grow.map(value=>Number(value)):typeof grow=="number"?grow:grow?1:0,getShrink=({shrink,basis})=>Array.isArray(shrink)?shrink.map(value=>Number(value)):typeof shrink=="number"?shrink:typeof shrink=="boolean"?shrink?1:0:basis&&basis!=="auto"?0:1,getSuffix=item=>{let suffix=typeof item=="number"||String(Number.parseInt(item,10))===item?"px":"";return item+suffix},getBasis=({basis})=>Array.isArray(basis)?basis.map(value=>getSuffix(value)):basis?getSuffix(basis):"auto",getVertical=({vertical})=>Array.isArray(vertical)?vertical.map(value=>typeof value=="boolean"?value===!0?"column":"row":value):vertical?"column":"row",getWrap=({wrap})=>Array.isArray(wrap)?wrap.map(value=>typeof value=="boolean"?value===!0?"wrap":"nowrap":value):wrap?"wrap":"nowrap",RemapedVerticalAlignments={top:"flex-start",center:"center",bottom:"flex-end",stretch:"stretch"},vAlignToProps=({vAlignContent})=>Array.isArray(vAlignContent)?vAlignContent.map(value=>RemapedVerticalAlignments[value]):vAlignContent?RemapedVerticalAlignments[vAlignContent]:"flex-start",RemapedHorizontalAlignments={left:"flex-start",center:"center",right:"flex-end",around:"space-around",between:"space-between"},hAlignToProps=({hAlignContent})=>Array.isArray(hAlignContent)?hAlignContent.map(value=>RemapedHorizontalAlignments[value]):hAlignContent?RemapedHorizontalAlignments[hAlignContent]:"flex-start";var getFlexStyles=props=>{let styles={justifyContent:props.vertical?vAlignToProps(props):hAlignToProps(props),alignItems:props.vertical?hAlignToProps(props):vAlignToProps(props)};return(props.grow||props.shrink||props.basis)&&(styles.flexGrow=getGrow(props),styles.flexShrink=getShrink(props),styles.flexBasis=getBasis(props)),props.vertical&&(styles.flexDirection=getVertical(props)),props.wrap&&(styles.flexWrap=getWrap(props)),styles},Flex=React.forwardRef((_a,ref)=>{var _b=_a,{as,basis,children,display,element="FLEX",hAlignContent,grow,marginTop,marginRight,marginBottom,marginLeft,margin,marginX,marginY,paddingTop,paddingRight,paddingBottom,paddingLeft,padding,paddingX,paddingY,maxWidth,minWidth="size0",width,height,minHeight,maxHeight,size,shrink,vertical,vAlignContent,wrap}=_b,props=__objRest(_b,["as","basis","children","display","element","hAlignContent","grow","marginTop","marginRight","marginBottom","marginLeft","margin","marginX","marginY","paddingTop","paddingRight","paddingBottom","paddingLeft","padding","paddingX","paddingY","maxWidth","minWidth","width","height","minHeight","maxHeight","size","shrink","vertical","vAlignContent","wrap"]);let FlexStyles=React.useMemo(()=>getFlexStyles({basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap}),[basis,hAlignContent,grow,shrink,vertical,vAlignContent,wrap]);size&&(width||height)&&console.error("[Paste Flex]: you cannot set a height or width when using the size attribute"),(marginX&&(margin||marginBottom||marginLeft||marginRight||marginTop)||marginY&&(margin||marginBottom||marginLeft||marginRight||marginTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left margin when using the marginX or marginY attributes."),(paddingX&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop)||paddingY&&(padding||paddingBottom||paddingLeft||paddingRight||paddingTop))&&console.error("[Paste Flex]: you cannot set a top, right, bottom or left padding when using the paddingX or paddingY attributes.");let margins=marginX||marginY?{marginX,marginY}:{margin,marginBottom,marginLeft,marginRight,marginTop},paddings=paddingX||paddingY?{paddingX,paddingY}:{padding,paddingBottom,paddingLeft,paddingRight,paddingTop},widths=size?{size}:{height,width};return React.createElement(import_box.Box,__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues(__spreadValues({},FlexStyles),(0,import_box.safelySpreadBoxProps)(props)),{ref,as,display,element}),margins),paddings),{minHeight,maxHeight,maxWidth,minWidth}),widths),children)});Flex.displayName="Flex";Flex.defaultProps={display:"flex"};Flex.propTypes={as:import_prop_types.default.string,display:(0,import_style_props.ResponsiveProp)(import_prop_types.default.oneOf(["flex","inline-flex"])),element:import_prop_types.default.string,vertical:(0,import_style_props.ResponsiveProp)(import_prop_types.default.bool),vAlignContent:(0,import_style_props.ResponsiveProp)(import_prop_types.default.oneOf(["top","center","bottom","stretch"])),hAlignContent:(0,import_style_props.ResponsiveProp)(import_prop_types.default.oneOf(["left","center","right","around","between"])),grow:(0,import_style_props.ResponsiveProp)(import_prop_types.default.oneOfType([import_prop_types.default.bool,import_prop_types.default.number])),shrink:(0,import_style_props.ResponsiveProp)(import_prop_types.default.oneOfType([import_prop_types.default.bool,import_prop_types.default.number])),basis:(0,import_style_props.ResponsiveProp)(import_prop_types.default.oneOfType([import_prop_types.default.string,import_prop_types.default.number])),wrap:(0,import_style_props.ResponsiveProp)(import_prop_types.default.bool),width:import_style_props.isWidthTokenProp,minWidth:import_style_props.isMinWidthTokenProp,maxWidth:import_style_props.isMaxWidthTokenProp,height:import_style_props.isHeightTokenProp,minHeight:import_style_props.isMinHeightTokenProp,maxHeight:import_style_props.isMaxHeightTokenProp,size:import_style_props.isWidthTokenProp,margin:import_style_props.isMarginTokenProp,marginTop:import_style_props.isMarginTokenProp,marginRight:import_style_props.isMarginTokenProp,marginBottom:import_style_props.isMarginTokenProp,marginLeft:import_style_props.isMarginTokenProp,marginX:import_style_props.isMarginTokenProp,marginY:import_style_props.isMarginTokenProp,padding:import_style_props.isPaddingTokenProp,paddingTop:import_style_props.isPaddingTokenProp,paddingRight:import_style_props.isPaddingTokenProp,paddingBottom:import_style_props.isPaddingTokenProp,paddingLeft:import_style_props.isPaddingTokenProp,paddingX:import_style_props.isPaddingTokenProp,paddingY:import_style_props.isPaddingTokenProp};0&&(module.exports={Flex});

dist/types.d.ts

@@ -5,18 +5,18 @@ /// <reference types="react" />
 import type { BoxProps } from '@twilio-paste/box';
-export declare type DisplayOptions = 'flex' | 'inline-flex';
-export declare type Display = ResponsiveValue<DisplayOptions>;
-export declare type VerticalAlignOptions = 'top' | 'center' | 'bottom' | 'stretch';
-export declare type VerticalAlign = ResponsiveValue<VerticalAlignOptions>;
-export declare type HorizontalAlignOptions = 'left' | 'center' | 'right' | 'around' | 'between';
-export declare type HorizontalAlign = ResponsiveValue<HorizontalAlignOptions>;
-export declare type VerticalOptions = boolean;
-export declare type Vertical = ResponsiveValue<VerticalOptions>;
-export declare type GrowOptions = boolean | number;
-export declare type Grow = ResponsiveValue<GrowOptions>;
-export declare type ShrinkOptions = boolean | number;
-export declare type Shrink = ResponsiveValue<ShrinkOptions>;
-export declare type BasisOptions = string | number;
-export declare type Basis = ResponsiveValue<BasisOptions>;
-export declare type WrapOptions = boolean;
-export declare type Wrap = ResponsiveValue<WrapOptions>;
+export type DisplayOptions = 'flex' | 'inline-flex';
+export type Display = ResponsiveValue<DisplayOptions>;
+export type VerticalAlignOptions = 'top' | 'center' | 'bottom' | 'stretch';
+export type VerticalAlign = ResponsiveValue<VerticalAlignOptions>;
+export type HorizontalAlignOptions = 'left' | 'center' | 'right' | 'around' | 'between';
+export type HorizontalAlign = ResponsiveValue<HorizontalAlignOptions>;
+export type VerticalOptions = boolean;
+export type Vertical = ResponsiveValue<VerticalOptions>;
+export type GrowOptions = boolean | number;
+export type Grow = ResponsiveValue<GrowOptions>;
+export type ShrinkOptions = boolean | number;
+export type Shrink = ResponsiveValue<ShrinkOptions>;
+export type BasisOptions = string | number;
+export type Basis = ResponsiveValue<BasisOptions>;
+export type WrapOptions = boolean;
+export type Wrap = ResponsiveValue<WrapOptions>;
 export interface FlexProps extends Omit<LayoutProps, 'verticalAlign'>, MarginProps, PaddingProps, Pick<BoxProps, 'element'> {
@@ -23,0 +23,0 @@ as?: keyof JSX.IntrinsicElements;

package.json

 {
   "name": "@twilio-paste/flex",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "category": "layout",
@@ -39,5 +39,5 @@ "status": "production",
   "devDependencies": {
-    "@twilio-paste/box": "^7.1.1",
-    "@twilio-paste/design-tokens": "^8.1.2",
-    "@twilio-paste/style-props": "^6.1.1",
+    "@twilio-paste/box": "^7.1.2",
+    "@twilio-paste/design-tokens": "^8.3.0",
+    "@twilio-paste/style-props": "^6.1.2",
     "@twilio-paste/styling-library": "^1.0.3",
@@ -44,0 +44,0 @@ "@twilio-paste/theme": "^8.0.3",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120768

increased by3.03%

Lines of code

770

increased by4.19%

No dependency changes