@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.0

package/types/products.d.ts

@@ -0,0 +1,40 @@
+import { ValueOf } from './helpers.js';
+
+declare const Product: {
+    readonly asm: "asm";
+    readonly 'brand-trust': "brand-trust";
+    readonly certificates: "certificates";
+    readonly ondmarc: "ondmarc";
+    readonly pulse: "pulse";
+    readonly radar: "radar";
+    readonly 'rojo-ds': "rojo-ds";
+    readonly 'vendor-secure': "vendor-secure";
+    readonly website: "website";
+};
+type Product = ValueOf<typeof Product>;
+declare const ProductName: {
+    readonly asm: "ASM";
+    readonly 'brand-trust': "Brand Trust";
+    readonly certificates: "Certificates";
+    readonly ondmarc: "OnDMARC";
+    readonly pulse: "Pulse";
+    readonly radar: "RADAR";
+    readonly 'rojo-ds': "ROJO DS";
+    readonly 'vendor-secure': "Vendor Secure";
+    readonly website: "Website";
+};
+type ProductName = ValueOf<typeof ProductName>;
+declare const ProductLogo: {
+    readonly asm: JSX.Element;
+    readonly 'brand-trust': JSX.Element;
+    readonly certificates: JSX.Element;
+    readonly ondmarc: JSX.Element;
+    readonly pulse: JSX.Element;
+    readonly radar: JSX.Element;
+    readonly 'rojo-ds': JSX.Element;
+    readonly 'vendor-secure': JSX.Element;
+    readonly website: JSX.Element;
+};
+type ProductLogo = ValueOf<typeof ProductLogo>;
+
+export { Product, ProductLogo, ProductName };

package/types/products.js

@@ -0,0 +1,38 @@
+import { rsiAsmHorizontal, rsiBrandTrustHorizontal, rsiCertificatesHorizontal, rsiOndmarcHorizontal, rsiPulseHorizontal, rsiRadarHorizontal, rsiRojoDsHorizontal, rsiVendorSecureHorizontal, rsiRedSiftHorizontal } from '@redsift/icons';
+
+const Product = {
+  asm: 'asm',
+  'brand-trust': 'brand-trust',
+  certificates: 'certificates',
+  ondmarc: 'ondmarc',
+  pulse: 'pulse',
+  radar: 'radar',
+  'rojo-ds': 'rojo-ds',
+  'vendor-secure': 'vendor-secure',
+  website: 'website'
+};
+const ProductName = {
+  asm: 'ASM',
+  'brand-trust': 'Brand Trust',
+  certificates: 'Certificates',
+  ondmarc: 'OnDMARC',
+  pulse: 'Pulse',
+  radar: 'RADAR',
+  'rojo-ds': 'ROJO DS',
+  'vendor-secure': 'Vendor Secure',
+  website: 'Website'
+};
+const ProductLogo = {
+  asm: rsiAsmHorizontal,
+  'brand-trust': rsiBrandTrustHorizontal,
+  certificates: rsiCertificatesHorizontal,
+  ondmarc: rsiOndmarcHorizontal,
+  pulse: rsiPulseHorizontal,
+  radar: rsiRadarHorizontal,
+  'rojo-ds': rsiRojoDsHorizontal,
+  'vendor-secure': rsiVendorSecureHorizontal,
+  website: rsiRedSiftHorizontal
+};
+
+export { Product, ProductLogo, ProductName };
+//# sourceMappingURL=products.js.map

package/types/products.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"products.js","sources":["../../src/types/products.ts"],"sourcesContent":["import {\n  rsiAsmHorizontal,\n  rsiBrandTrustHorizontal,\n  rsiCertificatesHorizontal,\n  rsiOndmarcHorizontal,\n  rsiPulseHorizontal,\n  rsiRadarHorizontal,\n  rsiRedSiftHorizontal,\n  rsiRojoDsHorizontal,\n  rsiVendorSecureHorizontal,\n} from '@redsift/icons';\nimport { ValueOf } from './helpers';\n\nexport const Product = {\n  asm: 'asm',\n  'brand-trust': 'brand-trust',\n  certificates: 'certificates',\n  ondmarc: 'ondmarc',\n  pulse: 'pulse',\n  radar: 'radar',\n  'rojo-ds': 'rojo-ds',\n  'vendor-secure': 'vendor-secure',\n  website: 'website',\n} as const;\nexport type Product = ValueOf<typeof Product>;\n\nexport const ProductName = {\n  asm: 'ASM',\n  'brand-trust': 'Brand Trust',\n  certificates: 'Certificates',\n  ondmarc: 'OnDMARC',\n  pulse: 'Pulse',\n  radar: 'RADAR',\n  'rojo-ds': 'ROJO DS',\n  'vendor-secure': 'Vendor Secure',\n  website: 'Website',\n} as const;\nexport type ProductName = ValueOf<typeof ProductName>;\n\nexport const ProductLogo = {\n  asm: rsiAsmHorizontal,\n  'brand-trust': rsiBrandTrustHorizontal,\n  certificates: rsiCertificatesHorizontal,\n  ondmarc: rsiOndmarcHorizontal,\n  pulse: rsiPulseHorizontal,\n  radar: rsiRadarHorizontal,\n  'rojo-ds': rsiRojoDsHorizontal,\n  'vendor-secure': rsiVendorSecureHorizontal,\n  website: rsiRedSiftHorizontal,\n} as const;\nexport type ProductLogo = ValueOf<typeof ProductLogo>;\n"],"names":["Product","asm","certificates","ondmarc","pulse","radar","website","ProductName","ProductLogo","rsiAsmHorizontal","rsiBrandTrustHorizontal","rsiCertificatesHorizontal","rsiOndmarcHorizontal","rsiPulseHorizontal","rsiRadarHorizontal","rsiRojoDsHorizontal","rsiVendorSecureHorizontal","rsiRedSiftHorizontal"],"mappings":";;AAaO,MAAMA,OAAO,GAAG;AACrBC,EAAAA,GAAG,EAAE,KAAK;AACV,EAAA,aAAa,EAAE,aAAa;AAC5BC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,KAAK,EAAE,OAAO;AACd,EAAA,SAAS,EAAE,SAAS;AACpB,EAAA,eAAe,EAAE,eAAe;AAChCC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMC,WAAW,GAAG;AACzBN,EAAAA,GAAG,EAAE,KAAK;AACV,EAAA,aAAa,EAAE,aAAa;AAC5BC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,KAAK,EAAE,OAAO;AACd,EAAA,SAAS,EAAE,SAAS;AACpB,EAAA,eAAe,EAAE,eAAe;AAChCC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAME,WAAW,GAAG;AACzBP,EAAAA,GAAG,EAAEQ,gBAAgB;AACrB,EAAA,aAAa,EAAEC,uBAAuB;AACtCR,EAAAA,YAAY,EAAES,yBAAyB;AACvCR,EAAAA,OAAO,EAAES,oBAAoB;AAC7BR,EAAAA,KAAK,EAAES,kBAAkB;AACzBR,EAAAA,KAAK,EAAES,kBAAkB;AACzB,EAAA,SAAS,EAAEC,mBAAmB;AAC9B,EAAA,eAAe,EAAEC,yBAAyB;AAC1CV,EAAAA,OAAO,EAAEW,oBAAAA;AACX;;;;"}

package/types/styles.d.ts

@@ -0,0 +1,283 @@
+import { ValueOf } from './helpers.js';
+
+declare const AlignSelf: {
+    readonly auto: "auto";
+    readonly normal: "normal";
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly 'self-start': "self-start";
+    readonly 'self-end': "self-end";
+    readonly baseline: "baseline";
+    readonly stretch: "stretch";
+};
+type AlignSelf = ValueOf<typeof AlignSelf>;
+declare const JustifySelf: {
+    readonly auto: "auto";
+    readonly normal: "normal";
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly 'self-start': "self-start";
+    readonly 'self-end': "self-end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly stretch: "stretch";
+};
+type JustifySelf = ValueOf<typeof JustifySelf>;
+declare const AlignContent: {
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly center: "center";
+    readonly 'space-between': "space-between";
+    readonly 'space-around': "space-around";
+    readonly 'space-evenly': "space-evenly";
+    readonly stretch: "stretch";
+    readonly start: "start";
+    readonly end: "end";
+    readonly baseline: "baseline";
+    readonly 'first baseline': "first baseline";
+    readonly 'last baseline': "last baseline";
+};
+type AlignContent = ValueOf<typeof AlignContent>;
+declare const AlignItems: {
+    readonly stretch: "stretch";
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly center: "center";
+    readonly baseline: "baseline";
+    readonly 'first baseline': "first baseline";
+    readonly 'last baseline': "last baseline";
+    readonly start: "start";
+    readonly end: "end";
+    readonly 'self-start': "self-start";
+    readonly 'self-end': "self-end";
+};
+type AlignItems = ValueOf<typeof AlignItems>;
+declare const FlexDirection: {
+    readonly row: "row";
+    readonly 'row-reverse': "row-reverse";
+    readonly column: "column";
+    readonly 'column-reverse': "column-reverse";
+};
+type FlexDirection = ValueOf<typeof FlexDirection>;
+declare const FlexWrap: {
+    readonly nowrap: "nowrap";
+    readonly wrap: "wrap";
+    readonly 'wrap-reverse': "wrap-reverse";
+};
+type FlexWrap = ValueOf<typeof FlexWrap>;
+declare const JustifyContent: {
+    readonly 'flex-start': "flex-start";
+    readonly 'flex-end': "flex-end";
+    readonly center: "center";
+    readonly 'space-between': "space-between";
+    readonly 'space-around': "space-around";
+    readonly 'space-evenly': "space-evenly";
+    readonly start: "start";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly baseline: "baseline";
+    readonly 'first baseline': "first baseline";
+    readonly 'last baseline': "last baseline";
+    readonly stretch: "stretch";
+};
+type JustifyContent = ValueOf<typeof JustifyContent>;
+declare const JustifyItems: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly stretch: "stretch";
+};
+type JustifyItems = ValueOf<typeof JustifyItems>;
+interface LayoutProps {
+    /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex">MDN</a>. */
+    flex?: string;
+    /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow">MDN</a>. */
+    flexGrow?: number;
+    /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink">MDN</a>. */
+    flexShrink?: number;
+    /** When used in a flex layout, specifies the initial main size of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis">MDN</a>. */
+    flexBasis?: string;
+    /** Overrides the alignItems property of a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self">MDN</a>. */
+    alignSelf?: AlignSelf;
+    /** Specifies how the element is justified inside a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self">MDN</a>. */
+    justifySelf?: string;
+    /** The layout order for the element within a flex or grid container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order">MDN</a>. */
+    order?: number;
+    /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area">MDN</a>. */
+    gridArea?: string;
+    /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column">MDN</a>. */
+    gridColumn?: string;
+    /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row">MDN</a>. */
+    gridRow?: string;
+    /** When used in a grid layout, specifies the starting column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start">MDN</a>. */
+    gridColumnStart?: string;
+    /** When used in a grid layout, specifies the ending column to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end">MDN</a>. */
+    gridColumnEnd?: string;
+    /** When used in a grid layout, specifies the starting row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start">MDN</a>. */
+    gridRowStart?: string;
+    /** When used in a grid layout, specifies the ending row to span within the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end">MDN</a>. */
+    gridRowEnd?: string;
+}
+interface SpacingProps {
+    /** The margin for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin">MDN</a>. */
+    margin?: string;
+    /** The margin for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom">MDN</a>. */
+    marginBottom?: string;
+    /** The margin for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left">MDN</a>. */
+    marginLeft?: string;
+    /** The margin for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right">MDN</a>. */
+    marginRight?: string;
+    /** The margin for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top">MDN</a>. */
+    marginTop?: string;
+}
+interface SizingProps {
+    /** The height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height">MDN</a>. */
+    height?: string | number;
+    /** The maximum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height">MDN</a>. */
+    maxHeight?: string;
+    /** The maximum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">MDN</a>. */
+    maxWidth?: string;
+    /** The minimum height of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height">MDN</a>. */
+    minHeight?: string;
+    /** The minimum width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width">MDN</a>. */
+    minWidth?: string;
+    /** The width of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width">MDN</a>. */
+    width?: string | number;
+}
+interface PositioningProps {
+    /** Specifies how the element is positioned. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">MDN</a>. */
+    position?: string;
+    /** The top position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top">MDN</a>. */
+    top?: string;
+    /** The bottom position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom">MDN</a>. */
+    bottom?: string;
+    /** The left position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left">MDN</a>. Consider using start instead for RTL support. */
+    left?: string;
+    /** The right position for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right">MDN</a>. Consider using start instead for RTL support. */
+    right?: string;
+    /** The stacking order for the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index">MDN</a>. */
+    zIndex?: string;
+}
+interface BorderProps {
+    /** The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">MDN</a>. */
+    background?: string;
+    /** The background-color CSS property sets the background color of an element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color">MDN</a>. */
+    backgroundColor?: string;
+    /** The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border">MDN</a>. */
+    border?: string;
+    /** The border-top CSS property sets all the properties of an element's top border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top">MDN</a>. */
+    borderTop?: string;
+    /** The border-top CSS property sets all the properties of an element's bottom border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom">MDN</a>. */
+    borderBottom?: string;
+    /** The border-top CSS property sets all the properties of an element's left border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left">MDN</a>. Consider using start instead for RTL support. */
+    borderLeft?: string;
+    /** The border-top CSS property sets all the properties of an element's right border. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right">MDN</a>. Consider using start instead for RTL support. */
+    borderRight?: string;
+    /** The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">MDN</a>. */
+    borderRadius?: string;
+    /** The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow">MDN</a>. */
+    boxShadow?: string;
+}
+interface FlexLayoutProps {
+    /** The distribution of space around child items along the cross axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN</a>. */
+    alignContent?: AlignContent;
+    /** The alignment of children within their container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN</a>. */
+    alignItems?: AlignItems;
+    /** The direction in which to layout children. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction">MDN</a>. */
+    flexDirection?: FlexDirection;
+    /** Whether to wrap items onto multiple lines. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap">MDN</a>. */
+    flexWrap?: FlexWrap;
+    /** The space to display between both rows and columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">MDN</a>. */
+    gap?: string;
+    /** Whether the box is displayed inline or not. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. */
+    inline?: boolean;
+    /** The distribution of space around items along the main axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN</a>. */
+    justifyContent?: JustifyContent;
+}
+interface GridLayoutProps {
+    /** The distribution of space around child items along the cross axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content">MDN</a>. */
+    alignContent?: AlignContent;
+    /** The alignment of children within their container. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items">MDN</a>. */
+    alignItems?: AlignItems;
+    /** The space to display between both rows and columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap">MDN</a>. */
+    gap?: string;
+    /** Defines the size of implicitly generated columns. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns">MDN</a>. */
+    gridAutoColumns?: string;
+    /** Defines the size of implicitly generated rows. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows">MDN</a>. */
+    gridAutoRows?: string;
+    /** Defines named grid areas. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas">MDN</a>. */
+    gridTemplateAreas?: string;
+    /** Defines the sizes of each column in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns">MDN</a>. */
+    gridTemplateColumns?: string;
+    /** Defines the sizes of each row in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows">MDN</a>. */
+    gridTemplateRows?: string;
+    /** Whether the box is displayed inline or not. */
+    inline?: boolean;
+    /** The distribution of space around items along the main axis. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">MDN</a>. */
+    justifyContent?: JustifyContent;
+    /** Defines the default justifySelf for all items in the grid. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items">MDN</a>. */
+    justifyItems?: JustifyItems;
+}
+interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {
+}
+interface InternalSpacingProps {
+    /** The padding for all four sides of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">MDN</a>. */
+    padding?: string;
+    /** The padding for the bottom side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom">MDN</a>. */
+    paddingBottom?: string;
+    /** The padding for the left side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left">MDN</a>. */
+    paddingLeft?: string;
+    /** The padding for the right side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right">MDN</a>. */
+    paddingRight?: string;
+    /** The padding for the top side of the element. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top">MDN</a>. */
+    paddingTop?: string;
+}
+interface ContainerProps extends Omit<FlexLayoutProps, 'inline'>, Omit<GridLayoutProps, 'inline'>, SpacingProps, SizingProps, PositioningProps, BorderProps, InternalSpacingProps {
+    /** Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">MDN</a>. */
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'inherit';
+}
+declare const getContainerProps: (props: ContainerProps) => {
+    zIndex?: string | undefined;
+    width?: string | number | undefined;
+    top?: string | undefined;
+    right?: string | undefined;
+    position?: string | undefined;
+    paddingTop?: string | undefined;
+    paddingRight?: string | undefined;
+    paddingLeft?: string | undefined;
+    paddingBottom?: string | undefined;
+    padding?: string | undefined;
+    minWidth?: string | undefined;
+    minHeight?: string | undefined;
+    maxWidth?: string | undefined;
+    maxHeight?: string | undefined;
+    marginTop?: string | undefined;
+    marginRight?: string | undefined;
+    marginLeft?: string | undefined;
+    marginBottom?: string | undefined;
+    margin?: string | undefined;
+    left?: string | undefined;
+    justifyItems?: JustifyItems | undefined;
+    justifyContent?: JustifyContent | undefined;
+    height?: string | number | undefined;
+    gridTemplateRows?: string | undefined;
+    gridTemplateColumns?: string | undefined;
+    gridTemplateAreas?: string | undefined;
+    gridAutoRows?: string | undefined;
+    gridAutoColumns?: string | undefined;
+    gap?: string | undefined;
+    flexWrap?: FlexWrap | undefined;
+    flexDirection?: FlexDirection | undefined;
+    bottom?: string | undefined;
+    alignItems?: AlignItems | undefined;
+    alignContent?: AlignContent | undefined;
+};
+
+export { AlignContent, AlignItems, AlignSelf, BorderProps, ContainerProps, FlexDirection, FlexLayoutProps, FlexWrap, GridLayoutProps, InternalSpacingProps, JustifyContent, JustifyItems, JustifySelf, LayoutProps, PositioningProps, SizingProps, SpacingProps, StylingProps, getContainerProps };

package/types/styles.js

@@ -0,0 +1,161 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+
+const AlignSelf = {
+  auto: 'auto',
+  normal: 'normal',
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  'self-start': 'self-start',
+  'self-end': 'self-end',
+  baseline: 'baseline',
+  stretch: 'stretch'
+};
+const JustifySelf = {
+  auto: 'auto',
+  normal: 'normal',
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  'self-start': 'self-start',
+  'self-end': 'self-end',
+  left: 'left',
+  right: 'right',
+  stretch: 'stretch'
+};
+const AlignContent = {
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  stretch: 'stretch',
+  start: 'start',
+  end: 'end',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline'
+};
+const AlignItems = {
+  stretch: 'stretch',
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline',
+  start: 'start',
+  end: 'end',
+  'self-start': 'self-start',
+  'self-end': 'self-end'
+};
+const FlexDirection = {
+  row: 'row',
+  'row-reverse': 'row-reverse',
+  column: 'column',
+  'column-reverse': 'column-reverse'
+};
+const FlexWrap = {
+  nowrap: 'nowrap',
+  wrap: 'wrap',
+  'wrap-reverse': 'wrap-reverse'
+};
+const JustifyContent = {
+  'flex-start': 'flex-start',
+  'flex-end': 'flex-end',
+  center: 'center',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly',
+  start: 'start',
+  end: 'end',
+  left: 'left',
+  right: 'right',
+  baseline: 'baseline',
+  'first baseline': 'first baseline',
+  'last baseline': 'last baseline',
+  stretch: 'stretch'
+};
+const JustifyItems = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch'
+};
+const getContainerProps = props => _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, props.alignContent && {
+  alignContent: props.alignContent
+}), props.alignItems && {
+  alignItems: props.alignItems
+}), props.bottom && {
+  bottom: props.bottom
+}), props.flexDirection && {
+  flexDirection: props.flexDirection
+}), props.flexWrap && {
+  flexWrap: props.flexWrap
+}), props.gap && {
+  gap: props.gap
+}), props.gridAutoColumns && {
+  gridAutoColumns: props.gridAutoColumns
+}), props.gridAutoRows && {
+  gridAutoRows: props.gridAutoRows
+}), props.gridTemplateAreas && {
+  gridTemplateAreas: props.gridTemplateAreas
+}), props.gridTemplateColumns && {
+  gridTemplateColumns: props.gridTemplateColumns
+}), props.gridTemplateRows && {
+  gridTemplateRows: props.gridTemplateRows
+}), props.height && {
+  height: props.height
+}), props.justifyContent && {
+  justifyContent: props.justifyContent
+}), props.justifyItems && {
+  justifyItems: props.justifyItems
+}), props.left && {
+  left: props.left
+}), props.margin && {
+  margin: props.margin
+}), props.marginBottom && {
+  marginBottom: props.marginBottom
+}), props.marginLeft && {
+  marginLeft: props.marginLeft
+}), props.marginRight && {
+  marginRight: props.marginRight
+}), props.marginTop && {
+  marginTop: props.marginTop
+}), props.maxHeight && {
+  maxHeight: props.maxHeight
+}), props.maxWidth && {
+  maxWidth: props.maxWidth
+}), props.minHeight && {
+  minHeight: props.minHeight
+}), props.minWidth && {
+  minWidth: props.minWidth
+}), props.padding && {
+  padding: props.padding
+}), props.paddingBottom && {
+  paddingBottom: props.paddingBottom
+}), props.paddingLeft && {
+  paddingLeft: props.paddingLeft
+}), props.paddingRight && {
+  paddingRight: props.paddingRight
+}), props.paddingTop && {
+  paddingTop: props.paddingTop
+}), props.position && {
+  position: props.position
+}), props.right && {
+  right: props.right
+}), props.top && {
+  top: props.top
+}), props.width && {
+  width: props.width
+}), props.zIndex && {
+  zIndex: props.zIndex
+});
+
+export { AlignContent, AlignItems, AlignSelf, FlexDirection, FlexWrap, JustifyContent, JustifyItems, JustifySelf, getContainerProps };
+//# sourceMappingURL=styles.js.map

package/types/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../src/types/styles.ts"],"sourcesContent":["import { ValueOf } from './helpers';\n\nexport const AlignSelf = {\n  auto: 'auto',\n  normal: 'normal',\n  start: 'start',\n  end: 'end',\n  center: 'center',\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  'self-start': 'self-start',\n  'self-end': 'self-end',\n  baseline: 'baseline',\n  stretch: 'stretch',\n} as const;\nexport type AlignSelf = ValueOf<typeof AlignSelf>;\n\nexport const JustifySelf = {\n  auto: 'auto',\n  normal: 'normal',\n  start: 'start',\n  end: 'end',\n  center: 'center',\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  'self-start': 'self-start',\n  'self-end': 'self-end',\n  left: 'left',\n  right: 'right',\n  stretch: 'stretch',\n} as const;\nexport type JustifySelf = ValueOf<typeof JustifySelf>;\n\nexport const AlignContent = {\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  center: 'center',\n  'space-between': 'space-between',\n  'space-around': 'space-around',\n  'space-evenly': 'space-evenly',\n  stretch: 'stretch',\n  start: 'start',\n  end: 'end',\n  baseline: 'baseline',\n  'first baseline': 'first baseline',\n  'last baseline': 'last baseline',\n} as const;\nexport type AlignContent = ValueOf<typeof AlignContent>;\n\nexport const AlignItems = {\n  stretch: 'stretch',\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  center: 'center',\n  baseline: 'baseline',\n  'first baseline': 'first baseline',\n  'last baseline': 'last baseline',\n  start: 'start',\n  end: 'end',\n  'self-start': 'self-start',\n  'self-end': 'self-end',\n} as const;\nexport type AlignItems = ValueOf<typeof AlignItems>;\n\nexport const FlexDirection = {\n  row: 'row',\n  'row-reverse': 'row-reverse',\n  column: 'column',\n  'column-reverse': 'column-reverse',\n} as const;\nexport type FlexDirection = ValueOf<typeof FlexDirection>;\n\nexport const FlexWrap = {\n  nowrap: 'nowrap',\n  wrap: 'wrap',\n  'wrap-reverse': 'wrap-reverse',\n} as const;\nexport type FlexWrap = ValueOf<typeof FlexWrap>;\n\nexport const JustifyContent = {\n  'flex-start': 'flex-start',\n  'flex-end': 'flex-end',\n  center: 'center',\n  'space-between': 'space-between',\n  'space-around': 'space-around',\n  'space-evenly': 'space-evenly',\n  start: 'start',\n  end: 'end',\n  left: 'left',\n  right: 'right',\n  baseline: 'baseline',\n  'first baseline': 'first baseline',\n  'last baseline': 'last baseline',\n  stretch: 'stretch',\n} as const;\nexport type JustifyContent = ValueOf<typeof JustifyContent>;\n\nexport const JustifyItems = {\n  start: 'start',\n  end: 'end',\n  center: 'center',\n  stretch: 'stretch',\n} as const;\nexport type JustifyItems = ValueOf<typeof JustifyItems>;\n\nexport interface LayoutProps {\n  /** When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex\">MDN</a>. */\n  flex?: string;\n  /** When used in a flex layout, specifies how the element will grow to fit the space available. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow\">MDN</a>. */\n  flexGrow?: number;\n  /** When used in a flex layout, specifies how the element will shrink to fit the space available. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink\">MDN</a>. */\n  flexShrink?: number;\n  /** When used in a flex layout, specifies the initial main size of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex_basis\">MDN</a>. */\n  flexBasis?: string;\n  /** Overrides the alignItems property of a flex or grid container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-self\">MDN</a>. */\n  alignSelf?: AlignSelf;\n  /** Specifies how the element is justified inside a flex or grid container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self\">MDN</a>. */\n  justifySelf?: string;\n  /** The layout order for the element within a flex or grid container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/order\">MDN</a>. */\n  order?: number;\n  /** When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area\">MDN</a>. */\n  gridArea?: string;\n  /** When used in a grid layout, specifies the column the element should be placed in within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column\">MDN</a>. */\n  gridColumn?: string;\n  /** When used in a grid layout, specifies the row the element should be placed in within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row\">MDN</a>. */\n  gridRow?: string;\n  /** When used in a grid layout, specifies the starting column to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start\">MDN</a>. */\n  gridColumnStart?: string;\n  /** When used in a grid layout, specifies the ending column to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end\">MDN</a>. */\n  gridColumnEnd?: string;\n  /** When used in a grid layout, specifies the starting row to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start\">MDN</a>. */\n  gridRowStart?: string;\n  /** When used in a grid layout, specifies the ending row to span within the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end\">MDN</a>. */\n  gridRowEnd?: string;\n}\n\nexport interface SpacingProps {\n  /** The margin for all four sides of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin\">MDN</a>. */\n  margin?: string;\n  /** The margin for the bottom side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom\">MDN</a>. */\n  marginBottom?: string;\n  /** The margin for the left side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left\">MDN</a>. */\n  marginLeft?: string;\n  /** The margin for the right side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right\">MDN</a>. */\n  marginRight?: string;\n  /** The margin for the top side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top\">MDN</a>. */\n  marginTop?: string;\n}\n\nexport interface SizingProps {\n  /** The height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/height\">MDN</a>. */\n  height?: string | number;\n  /** The maximum height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-height\">MDN</a>. */\n  maxHeight?: string;\n  /** The maximum width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/max-width\">MDN</a>. */\n  maxWidth?: string;\n  /** The minimum height of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-height\">MDN</a>. */\n  minHeight?: string;\n  /** The minimum width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/min-width\">MDN</a>. */\n  minWidth?: string;\n  /** The width of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\">MDN</a>. */\n  width?: string | number;\n}\n\nexport interface PositioningProps {\n  /** Specifies how the element is positioned. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/position\">MDN</a>. */\n  position?: string;\n  /** The top position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/top\">MDN</a>. */\n  top?: string;\n  /** The bottom position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/bottom\">MDN</a>. */\n  bottom?: string;\n  /** The left position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/left\">MDN</a>. Consider using start instead for RTL support. */\n  left?: string;\n  /** The right position for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/right\">MDN</a>. Consider using start instead for RTL support. */\n  right?: string;\n  /** The stacking order for the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/z-index\">MDN</a>. */\n  zIndex?: string;\n}\n\nexport interface BorderProps {\n  /** The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background\">MDN</a>. */\n  background?: string;\n  /** The background-color CSS property sets the background color of an element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-color\">MDN</a>. */\n  backgroundColor?: string;\n  /** The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border\">MDN</a>. */\n  border?: string;\n  /** The border-top CSS property sets all the properties of an element's top border. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-top\">MDN</a>. */\n  borderTop?: string;\n  /** The border-top CSS property sets all the properties of an element's bottom border. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom\">MDN</a>. */\n  borderBottom?: string;\n  /** The border-top CSS property sets all the properties of an element's left border. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-left\">MDN</a>. Consider using start instead for RTL support. */\n  borderLeft?: string;\n  /** The border-top CSS property sets all the properties of an element's right border. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-right\">MDN</a>. Consider using start instead for RTL support. */\n  borderRight?: string;\n  /** The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius\">MDN</a>. */\n  borderRadius?: string;\n  /** The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow\">MDN</a>. */\n  boxShadow?: string;\n}\n\nexport interface FlexLayoutProps {\n  /** The distribution of space around child items along the cross axis. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-content\">MDN</a>. */\n  alignContent?: AlignContent;\n  /** The alignment of children within their container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\">MDN</a>. */\n  alignItems?: AlignItems;\n  /** The direction in which to layout children. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction\">MDN</a>. */\n  flexDirection?: FlexDirection;\n  /** Whether to wrap items onto multiple lines. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap\">MDN</a>. */\n  flexWrap?: FlexWrap;\n  /** The space to display between both rows and columns. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/gap\">MDN</a>. */\n  gap?: string;\n  /** Whether the box is displayed inline or not. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\">MDN</a>. */\n  inline?: boolean;\n  /** The distribution of space around items along the main axis. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content\">MDN</a>. */\n  justifyContent?: JustifyContent;\n}\n\nexport interface GridLayoutProps {\n  /** The distribution of space around child items along the cross axis. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-content\">MDN</a>. */\n  alignContent?: AlignContent;\n  /** The alignment of children within their container. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/align-items\">MDN</a>. */\n  alignItems?: AlignItems;\n  /** The space to display between both rows and columns. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/gap\">MDN</a>. */\n  gap?: string;\n  /** Defines the size of implicitly generated columns. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns\">MDN</a>. */\n  gridAutoColumns?: string;\n  /** Defines the size of implicitly generated rows. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows\">MDN</a>. */\n  gridAutoRows?: string;\n  /** Defines named grid areas. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas\">MDN</a>. */\n  gridTemplateAreas?: string;\n  /** Defines the sizes of each column in the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns\">MDN</a>. */\n  gridTemplateColumns?: string;\n  /** Defines the sizes of each row in the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows\">MDN</a>. */\n  gridTemplateRows?: string;\n  /** Whether the box is displayed inline or not. */\n  inline?: boolean;\n  /** The distribution of space around items along the main axis. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content\">MDN</a>. */\n  justifyContent?: JustifyContent;\n  /** Defines the default justifySelf for all items in the grid. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items\">MDN</a>. */\n  justifyItems?: JustifyItems;\n}\n\nexport interface StylingProps extends LayoutProps, SpacingProps, SizingProps, PositioningProps {}\n\nexport interface InternalSpacingProps {\n  /** The padding for all four sides of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding\">MDN</a>. */\n  padding?: string;\n  /** The padding for the bottom side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom\">MDN</a>. */\n  paddingBottom?: string;\n  /** The padding for the left side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left\">MDN</a>. */\n  paddingLeft?: string;\n  /** The padding for the right side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right\">MDN</a>. */\n  paddingRight?: string;\n  /** The padding for the top side of the element. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top\">MDN</a>. */\n  paddingTop?: string;\n}\nexport interface ContainerProps\n  extends Omit<FlexLayoutProps, 'inline'>,\n    Omit<GridLayoutProps, 'inline'>,\n    SpacingProps,\n    SizingProps,\n    PositioningProps,\n    BorderProps,\n    InternalSpacingProps {\n  /** Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/display\">MDN</a>. */\n  display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'inherit';\n}\n\nexport const getContainerProps = (props: ContainerProps) => ({\n  ...(props.alignContent && { alignContent: props.alignContent }),\n  ...(props.alignItems && { alignItems: props.alignItems }),\n  ...(props.bottom && { bottom: props.bottom }),\n  ...(props.flexDirection && { flexDirection: props.flexDirection }),\n  ...(props.flexWrap && { flexWrap: props.flexWrap }),\n  ...(props.gap && { gap: props.gap }),\n  ...(props.gridAutoColumns && { gridAutoColumns: props.gridAutoColumns }),\n  ...(props.gridAutoRows && { gridAutoRows: props.gridAutoRows }),\n  ...(props.gridTemplateAreas && { gridTemplateAreas: props.gridTemplateAreas }),\n  ...(props.gridTemplateColumns && { gridTemplateColumns: props.gridTemplateColumns }),\n  ...(props.gridTemplateRows && { gridTemplateRows: props.gridTemplateRows }),\n  ...(props.height && { height: props.height }),\n  ...(props.justifyContent && { justifyContent: props.justifyContent }),\n  ...(props.justifyItems && { justifyItems: props.justifyItems }),\n  ...(props.left && { left: props.left }),\n  ...(props.margin && { margin: props.margin }),\n  ...(props.marginBottom && { marginBottom: props.marginBottom }),\n  ...(props.marginLeft && { marginLeft: props.marginLeft }),\n  ...(props.marginRight && { marginRight: props.marginRight }),\n  ...(props.marginTop && { marginTop: props.marginTop }),\n  ...(props.maxHeight && { maxHeight: props.maxHeight }),\n  ...(props.maxWidth && { maxWidth: props.maxWidth }),\n  ...(props.minHeight && { minHeight: props.minHeight }),\n  ...(props.minWidth && { minWidth: props.minWidth }),\n  ...(props.padding && { padding: props.padding }),\n  ...(props.paddingBottom && { paddingBottom: props.paddingBottom }),\n  ...(props.paddingLeft && { paddingLeft: props.paddingLeft }),\n  ...(props.paddingRight && { paddingRight: props.paddingRight }),\n  ...(props.paddingTop && { paddingTop: props.paddingTop }),\n  ...(props.position && { position: props.position }),\n  ...(props.right && { right: props.right }),\n  ...(props.top && { top: props.top }),\n  ...(props.width && { width: props.width }),\n  ...(props.zIndex && { zIndex: props.zIndex }),\n});\n"],"names":["AlignSelf","auto","normal","start","end","center","baseline","stretch","JustifySelf","left","right","AlignContent","AlignItems","FlexDirection","row","column","FlexWrap","nowrap","wrap","JustifyContent","JustifyItems","getContainerProps","props","_objectSpread","alignContent","alignItems","bottom","flexDirection","flexWrap","gap","gridAutoColumns","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","justifyContent","justifyItems","margin","marginBottom","marginLeft","marginRight","marginTop","maxHeight","maxWidth","minHeight","minWidth","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","position","top","width","zIndex"],"mappings":";;AAEO,MAAMA,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE,QAAQ;AAChB,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtB,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMC,WAAW,GAAG;AACzBP,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE,QAAQ;AAChB,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtB,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtBI,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,KAAK,EAAE,OAAO;AACdH,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMI,YAAY,GAAG;AAC1B,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtBN,EAAAA,MAAM,EAAE,QAAQ;AAChB,EAAA,eAAe,EAAE,eAAe;AAChC,EAAA,cAAc,EAAE,cAAc;AAC9B,EAAA,cAAc,EAAE,cAAc;AAC9BE,EAAAA,OAAO,EAAE,SAAS;AAClBJ,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVE,EAAAA,QAAQ,EAAE,UAAU;AACpB,EAAA,gBAAgB,EAAE,gBAAgB;AAClC,EAAA,eAAe,EAAE,eAAA;AACnB,EAAU;AAGH,MAAMM,UAAU,GAAG;AACxBL,EAAAA,OAAO,EAAE,SAAS;AAClB,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtBF,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,QAAQ,EAAE,UAAU;AACpB,EAAA,gBAAgB,EAAE,gBAAgB;AAClC,EAAA,eAAe,EAAE,eAAe;AAChCH,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACV,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAA;AACd,EAAU;AAGH,MAAMS,aAAa,GAAG;AAC3BC,EAAAA,GAAG,EAAE,KAAK;AACV,EAAA,aAAa,EAAE,aAAa;AAC5BC,EAAAA,MAAM,EAAE,QAAQ;AAChB,EAAA,gBAAgB,EAAE,gBAAA;AACpB,EAAU;AAGH,MAAMC,QAAQ,GAAG;AACtBC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,IAAI,EAAE,MAAM;AACZ,EAAA,cAAc,EAAE,cAAA;AAClB,EAAU;AAGH,MAAMC,cAAc,GAAG;AAC5B,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtBd,EAAAA,MAAM,EAAE,QAAQ;AAChB,EAAA,eAAe,EAAE,eAAe;AAChC,EAAA,cAAc,EAAE,cAAc;AAC9B,EAAA,cAAc,EAAE,cAAc;AAC9BF,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVK,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,KAAK,EAAE,OAAO;AACdJ,EAAAA,QAAQ,EAAE,UAAU;AACpB,EAAA,gBAAgB,EAAE,gBAAgB;AAClC,EAAA,eAAe,EAAE,eAAe;AAChCC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMa,YAAY,GAAG;AAC1BjB,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE,QAAQ;AAChBE,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;MAsKGc,iBAAiB,GAAIC,KAAqB,IAAAC,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA,EAAA,EACjDD,KAAK,CAACE,YAAY,IAAI;EAAEA,YAAY,EAAEF,KAAK,CAACE,YAAAA;AAAa,CAAC,CAC1DF,EAAAA,KAAK,CAACG,UAAU,IAAI;EAAEA,UAAU,EAAEH,KAAK,CAACG,UAAAA;AAAW,CAAC,CACpDH,EAAAA,KAAK,CAACI,MAAM,IAAI;EAAEA,MAAM,EAAEJ,KAAK,CAACI,MAAAA;AAAO,CAAC,CACxCJ,EAAAA,KAAK,CAACK,aAAa,IAAI;EAAEA,aAAa,EAAEL,KAAK,CAACK,aAAAA;AAAc,CAAC,CAC7DL,EAAAA,KAAK,CAACM,QAAQ,IAAI;EAAEA,QAAQ,EAAEN,KAAK,CAACM,QAAAA;AAAS,CAAC,CAC9CN,EAAAA,KAAK,CAACO,GAAG,IAAI;EAAEA,GAAG,EAAEP,KAAK,CAACO,GAAAA;AAAI,CAAC,CAC/BP,EAAAA,KAAK,CAACQ,eAAe,IAAI;EAAEA,eAAe,EAAER,KAAK,CAACQ,eAAAA;AAAgB,CAAC,CACnER,EAAAA,KAAK,CAACS,YAAY,IAAI;EAAEA,YAAY,EAAET,KAAK,CAACS,YAAAA;AAAa,CAAC,CAC1DT,EAAAA,KAAK,CAACU,iBAAiB,IAAI;EAAEA,iBAAiB,EAAEV,KAAK,CAACU,iBAAAA;AAAkB,CAAC,CACzEV,EAAAA,KAAK,CAACW,mBAAmB,IAAI;EAAEA,mBAAmB,EAAEX,KAAK,CAACW,mBAAAA;AAAoB,CAAC,CAC/EX,EAAAA,KAAK,CAACY,gBAAgB,IAAI;EAAEA,gBAAgB,EAAEZ,KAAK,CAACY,gBAAAA;AAAiB,CAAC,CACtEZ,EAAAA,KAAK,CAACa,MAAM,IAAI;EAAEA,MAAM,EAAEb,KAAK,CAACa,MAAAA;AAAO,CAAC,CACxCb,EAAAA,KAAK,CAACc,cAAc,IAAI;EAAEA,cAAc,EAAEd,KAAK,CAACc,cAAAA;AAAe,CAAC,CAChEd,EAAAA,KAAK,CAACe,YAAY,IAAI;EAAEA,YAAY,EAAEf,KAAK,CAACe,YAAAA;AAAa,CAAC,CAC1Df,EAAAA,KAAK,CAACb,IAAI,IAAI;EAAEA,IAAI,EAAEa,KAAK,CAACb,IAAAA;AAAK,CAAC,CAClCa,EAAAA,KAAK,CAACgB,MAAM,IAAI;EAAEA,MAAM,EAAEhB,KAAK,CAACgB,MAAAA;AAAO,CAAC,CACxChB,EAAAA,KAAK,CAACiB,YAAY,IAAI;EAAEA,YAAY,EAAEjB,KAAK,CAACiB,YAAAA;AAAa,CAAC,CAC1DjB,EAAAA,KAAK,CAACkB,UAAU,IAAI;EAAEA,UAAU,EAAElB,KAAK,CAACkB,UAAAA;AAAW,CAAC,CACpDlB,EAAAA,KAAK,CAACmB,WAAW,IAAI;EAAEA,WAAW,EAAEnB,KAAK,CAACmB,WAAAA;AAAY,CAAC,CACvDnB,EAAAA,KAAK,CAACoB,SAAS,IAAI;EAAEA,SAAS,EAAEpB,KAAK,CAACoB,SAAAA;AAAU,CAAC,CACjDpB,EAAAA,KAAK,CAACqB,SAAS,IAAI;EAAEA,SAAS,EAAErB,KAAK,CAACqB,SAAAA;AAAU,CAAC,CACjDrB,EAAAA,KAAK,CAACsB,QAAQ,IAAI;EAAEA,QAAQ,EAAEtB,KAAK,CAACsB,QAAAA;AAAS,CAAC,CAC9CtB,EAAAA,KAAK,CAACuB,SAAS,IAAI;EAAEA,SAAS,EAAEvB,KAAK,CAACuB,SAAAA;AAAU,CAAC,CACjDvB,EAAAA,KAAK,CAACwB,QAAQ,IAAI;EAAEA,QAAQ,EAAExB,KAAK,CAACwB,QAAAA;AAAS,CAAC,CAC9CxB,EAAAA,KAAK,CAACyB,OAAO,IAAI;EAAEA,OAAO,EAAEzB,KAAK,CAACyB,OAAAA;AAAQ,CAAC,CAC3CzB,EAAAA,KAAK,CAAC0B,aAAa,IAAI;EAAEA,aAAa,EAAE1B,KAAK,CAAC0B,aAAAA;AAAc,CAAC,CAC7D1B,EAAAA,KAAK,CAAC2B,WAAW,IAAI;EAAEA,WAAW,EAAE3B,KAAK,CAAC2B,WAAAA;AAAY,CAAC,CACvD3B,EAAAA,KAAK,CAAC4B,YAAY,IAAI;EAAEA,YAAY,EAAE5B,KAAK,CAAC4B,YAAAA;AAAa,CAAC,CAC1D5B,EAAAA,KAAK,CAAC6B,UAAU,IAAI;EAAEA,UAAU,EAAE7B,KAAK,CAAC6B,UAAAA;AAAW,CAAC,CACpD7B,EAAAA,KAAK,CAAC8B,QAAQ,IAAI;EAAEA,QAAQ,EAAE9B,KAAK,CAAC8B,QAAAA;AAAS,CAAC,CAC9C9B,EAAAA,KAAK,CAACZ,KAAK,IAAI;EAAEA,KAAK,EAAEY,KAAK,CAACZ,KAAAA;AAAM,CAAC,CACrCY,EAAAA,KAAK,CAAC+B,GAAG,IAAI;EAAEA,GAAG,EAAE/B,KAAK,CAAC+B,GAAAA;AAAI,CAAC,CAC/B/B,EAAAA,KAAK,CAACgC,KAAK,IAAI;EAAEA,KAAK,EAAEhC,KAAK,CAACgC,KAAAA;AAAM,CAAC,CACrChC,EAAAA,KAAK,CAACiC,MAAM,IAAI;EAAEA,MAAM,EAAEjC,KAAK,CAACiC,MAAAA;AAAO,CAAC;;;;"}

package/utils/filterComponents.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, ReactElement } from 'react';
+import { Comp } from '../types/helpers.js';
+
+/**
+ * Create an array containing only valid and specific components.
+ *
+ * @param  component React function component or the component name
+ * @return an array of components
+ */
+declare const filterComponents: (component: Comp<any, any> | string | Comp<any, any>[] | string[]) => (children: ReactNode) => ReactElement[];
+
+export { filterComponents };

package/utils/filterComponents.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { isComponent } from './isComponent.js';
+
+/**
+ * Create an array containing only valid and specific components.
+ *
+ * @param  component React function component or the component name
+ * @return an array of components
+ */
+const filterComponents = component => children => {
+  const components = Array.isArray(component) ? component : [component];
+  const childArray = [];
+  React__default.Children.forEach(children, child => {
+    components.forEach(comp => {
+      if (isComponent(comp)(child)) {
+        childArray.push(child);
+      }
+    });
+  });
+  return childArray;
+};
+
+export { filterComponents };
+//# sourceMappingURL=filterComponents.js.map