@pega/cosmos-react-demos 2.1.2 → 3.0.0-dev.2.0

package/lib/core/Flex/Flex.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACxC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;iBAC9D,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;0BAE3C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;eAC9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAE9B,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;;;qBAGc,QAAQ,CAAC,EAAE;uBACT,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;KAEhD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledContainer = styled.div<{ height?: number; width?: number }>(\n  ({ height, theme, width }) => {\n    return css`\n      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n      background-color: ${theme.base.colors.blue.light};\n\n      ${height &&\n      css`\n        height: ${height}rem;\n      `}\n\n      ${width &&\n      css`\n        width: ${width}rem;\n      `}\n    `;\n  }\n);\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledItem = styled.div<{ inActive?: boolean; noPadding?: boolean; width?: number }>(\n  ({ inActive, noPadding, theme, width }) => {\n    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n    return css`\n      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n      padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n      text-align: center;\n      background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n      color: ${theme.base.colors.black};\n\n      ${width &&\n      css`\n        width: ${width}rem;\n      `}\n\n      span {\n        font-size: ${fontSize.xl};\n        font-weight: ${theme.base['font-weight'].bold};\n      }\n    `;\n  }\n);\n\nStyledItem.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAIrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;eAC9D,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;wBAE3C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;aAC9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,KAAK;QACP,GAAG,CAAA;eACQ,KAAK;KACf;;;mBAGc,QAAQ,CAAC,EAAE;qBACT,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;GAEhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledFlexContainer = styled.div<{ height?: number; width?: number }>(\n  ({ height, theme, width }) => {\n    return css`\n      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n      background-color: ${theme.base.colors.blue.light};\n\n      ${height &&\n      css`\n        height: ${height}rem;\n      `}\n\n      ${width &&\n      css`\n        width: ${width}rem;\n      `}\n    `;\n  }\n);\n\nStyledFlexContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlexItem = styled.div<{\n  inActive?: boolean;\n  noPadding?: boolean;\n  width?: number;\n}>(({ inActive, noPadding, theme, width }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n    padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n    text-align: center;\n    background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n    color: ${theme.base.colors.black};\n\n    ${width &&\n    css`\n      width: ${width}rem;\n    `}\n\n    span {\n      font-size: ${fontSize.xl};\n      font-weight: ${theme.base['font-weight'].bold};\n    }\n  `;\n});\n\nStyledFlexItem.defaultProps = defaultThemeProp;\n"]}

package/lib/core/Flex/FlexContainer.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { FlexContainerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -17,4 +18,5 @@ export declare const Wrap: Story<FlexStoryProps>;
 export declare const Justify: Story<FlexStoryProps>;
 export declare const AlignItems: Story<FlexStoryProps>;
 export declare const AlignContent: Story<FlexStoryProps>;
+export declare const ResponsiveFlex: () => JSX.Element;
 //# sourceMappingURL=FlexContainer.stories.d.ts.map

package/lib/core/Flex/FlexContainer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC"}
+{"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC;AAaF,eAAO,MAAM,cAAc,mBAsB1B,CAAC"}

package/lib/core/Flex/FlexContainer.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Flex.styles';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
 export default {
     title: 'Core/Flex/Container',
     component: Flex,
@@ -9,7 +9,7 @@ export default {
     }
 };
 export const Direction = (args) => {
-    return (_jsxs(Flex, { container: { direction: args.direction, pad: 2 }, as: StyledContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: args.direction, pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
 };
 Direction.args = {
     direction: 'row'
@@ -21,7 +21,7 @@ Direction.argTypes = {
     }
 };
 export const GapAndPadding = (args) => {
-    return (_jsxs(Flex, { container: { pad: args.pad, gap: args.gap }, as: StyledContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: args.pad, gap: args.gap }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
 };
 GapAndPadding.args = {
     pad: 1,
@@ -32,7 +32,7 @@ GapAndPadding.argTypes = {
     gap: { control: { type: 'number' } }
 };
 export const Wrap = (args) => {
-    return (_jsxs(Flex, { container: { wrap: args.wrap, pad: 2 }, as: StyledContainer, width: 35, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { wrap: args.wrap, pad: 2 }, as: StyledFlexContainer, width: 35, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
 };
 Wrap.args = {
     wrap: 'nowrap'
@@ -41,7 +41,7 @@ Wrap.argTypes = {
     wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }
 };
 export const Justify = (args) => {
-    return (_jsxs(Flex, { container: { justify: args.justify, pad: 2 }, as: StyledContainer, children: [_jsx(StyledItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(StyledItem, { children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: args.justify, pad: 2 }, as: StyledFlexContainer, children: [_jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
 };
 Justify.args = {
     justify: 'start'
@@ -53,7 +53,7 @@ Justify.argTypes = {
     }
 };
 export const AlignItems = (args) => {
-    return (_jsxs(Flex, { container: { alignItems: args.alignItems, pad: 2 }, as: StyledContainer, height: 15, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledItem, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: args.alignItems, pad: 2 }, as: StyledFlexContainer, height: 15, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
 };
 AlignItems.args = {
     alignItems: 'stretch'
@@ -65,7 +65,7 @@ AlignItems.argTypes = {
     }
 };
 export const AlignContent = (args) => {
-    return (_jsxs(Flex, { container: { alignContent: args.alignContent, wrap: 'wrap', pad: 2 }, as: StyledContainer, height: 20, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignContent: args.alignContent, wrap: 'wrap', pad: 2 }, as: StyledFlexContainer, height: 20, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
 };
 AlignContent.args = {
     alignContent: 'stretch'
@@ -76,4 +76,7 @@ AlignContent.argTypes = {
         control: { type: 'select' }
     }
 };
+export const ResponsiveFlex = () => {
+    return (_jsxs(Flex, { container: { pad: 1, gap: 6 }, xl: { container: { gap: 12 } }, lg: { container: { gap: 9 } }, md: { container: { gap: 6 } }, sm: { container: { gap: 3 } }, xs: { container: { gap: 0 } }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+};
 //# sourceMappingURL=FlexContainer.stories.js.map

package/lib/core/Flex/FlexContainer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledContainer, StyledItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Container',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  direction?: FlexContainerProps['direction'];\n  gap?: FlexContainerProps['gap'];\n  pad?: FlexContainerProps['pad'];\n  wrap?: FlexContainerProps['wrap'];\n  justify?: FlexContainerProps['justify'];\n  alignItems?: FlexContainerProps['alignItems'];\n  alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ direction: args.direction, pad: 2 }} as={StyledContainer}>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nDirection.args = {\n  direction: 'row'\n};\n\nDirection.argTypes = {\n  direction: {\n    options: ['row', 'column', 'row-reverse', 'column-reverse'],\n    control: { type: 'select' }\n  }\n};\n\nexport const GapAndPadding: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledContainer}>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGapAndPadding.args = {\n  pad: 1,\n  gap: 1\n};\n\nGapAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledContainer} width={35}>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nWrap.args = {\n  wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n  wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ justify: args.justify, pad: 2 }} as={StyledContainer}>\n      <StyledItem>\n        <Text>Item 1</Text>\n      </StyledItem>\n      <StyledItem>\n        <Text>Item 2</Text>\n      </StyledItem>\n      <StyledItem>\n        <Text>Item 3</Text>\n      </StyledItem>\n    </Flex>\n  );\n};\n\nJustify.args = {\n  justify: 'start'\n};\n\nJustify.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignItems: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignItems: args.alignItems, pad: 2 }}\n      as={StyledContainer}\n      height={15}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n  alignItems: {\n    options: ['stretch', 'start', 'end', 'center', 'baseline'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignContent: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n      as={StyledContainer}\n      height={20}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignContent.args = {\n  alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n  alignContent: {\n    options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n    control: { type: 'select' }\n  }\n};\n"]}
+{"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Container',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  direction?: FlexContainerProps['direction'];\n  gap?: FlexContainerProps['gap'];\n  pad?: FlexContainerProps['pad'];\n  wrap?: FlexContainerProps['wrap'];\n  justify?: FlexContainerProps['justify'];\n  alignItems?: FlexContainerProps['alignItems'];\n  alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nDirection.args = {\n  direction: 'row'\n};\n\nDirection.argTypes = {\n  direction: {\n    options: ['row', 'column', 'row-reverse', 'column-reverse'],\n    control: { type: 'select' }\n  }\n};\n\nexport const GapAndPadding: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGapAndPadding.args = {\n  pad: 1,\n  gap: 1\n};\n\nGapAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nWrap.args = {\n  wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n  wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>\n      <StyledFlexItem>\n        <Text>Item 1</Text>\n      </StyledFlexItem>\n      <StyledFlexItem>\n        <Text>Item 2</Text>\n      </StyledFlexItem>\n      <StyledFlexItem>\n        <Text>Item 3</Text>\n      </StyledFlexItem>\n    </Flex>\n  );\n};\n\nJustify.args = {\n  justify: 'start'\n};\n\nJustify.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignItems: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignItems: args.alignItems, pad: 2 }}\n      as={StyledFlexContainer}\n      height={15}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n  alignItems: {\n    options: ['stretch', 'start', 'end', 'center', 'baseline'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignContent: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n      as={StyledFlexContainer}\n      height={20}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignContent.args = {\n  alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n  alignContent: {\n    options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n    control: { type: 'select' }\n  }\n};\n\nexport const ResponsiveFlex = () => {\n  return (\n    <Flex\n      container={{ pad: 1, gap: 6 }}\n      xl={{ container: { gap: 12 } }}\n      lg={{ container: { gap: 9 } }}\n      md={{ container: { gap: 6 } }}\n      sm={{ container: { gap: 3 } }}\n      xs={{ container: { gap: 0 } }}\n      as={StyledFlexContainer}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/lib/core/Flex/FlexItem.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledContainer, StyledItem } from './Flex.styles';
+import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
 export default {
     title: 'Core/Flex/Item',
     component: Flex,
@@ -9,7 +9,7 @@ export default {
     }
 };
 export const AlignSelf = (args) => {
-    return (_jsxs(Flex, { container: { alignItems: 'start', pad: 2 }, as: StyledContainer, height: 10, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, inActive: true, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1, alignSelf: args.alignSelf }, as: StyledItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledItem, inActive: true, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: 'start', pad: 2 }, as: StyledFlexContainer, height: 10, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1, alignSelf: args.alignSelf }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
 };
 AlignSelf.args = {
     alignSelf: 'auto'
@@ -21,7 +21,7 @@ AlignSelf.argTypes = {
     }
 };
 export const Grow = (args) => {
-    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledItem, inActive: true, children: _jsx(Text, { children: "Grow: 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: args.grow }, as: StyledItem, children: _jsxs(Text, { children: ["Grow: ", args.grow] }, void 0) }, void 0), _jsx(Flex, { item: { grow: 0 }, as: StyledItem, inActive: true, children: _jsx(Text, { children: "Grow: 0" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: args.grow }, as: StyledFlexItem, children: _jsxs(Text, { children: ["Grow: ", args.grow] }, void 0) }, void 0), _jsx(Flex, { item: { grow: 0 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 0" }, void 0) }, void 0)] }, void 0));
 };
 Grow.args = {
     grow: 0
@@ -30,7 +30,7 @@ Grow.argTypes = {
     grow: { control: { type: 'number' } }
 };
 export const Shrink = (args) => {
-    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledContainer, width: 42, children: [_jsx(Flex, { item: { shrink: 1 }, as: StyledItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 1" }, void 0) }, void 0), _jsx(Flex, { item: { shrink: args.shrink }, as: StyledItem, width: 15, children: _jsxs(Text, { children: ["Shrink: ", args.shrink] }, void 0) }, void 0), _jsx(Flex, { item: { shrink: 0 }, as: StyledItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 0" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, width: 42, children: [_jsx(Flex, { item: { shrink: 1 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 1" }, void 0) }, void 0), _jsx(Flex, { item: { shrink: args.shrink }, as: StyledFlexItem, width: 15, children: _jsxs(Text, { children: ["Shrink: ", args.shrink] }, void 0) }, void 0), _jsx(Flex, { item: { shrink: 0 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 0" }, void 0) }, void 0)] }, void 0));
 };
 Shrink.args = {
     shrink: 0

package/lib/core/Flex/FlexItem.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledContainer, StyledItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Item',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  alignSelf?: FlexItemProps['alignSelf'];\n  grow?: FlexItemProps['grow'];\n  shrink?: FlexItemProps['shrink'];\n}\n\nexport const AlignSelf: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ alignItems: 'start', pad: 2 }} as={StyledContainer} height={10}>\n      <Flex item={{ grow: 1 }} as={StyledItem} inActive>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledItem} inActive>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignSelf.args = {\n  alignSelf: 'auto'\n};\n\nAlignSelf.argTypes = {\n  alignSelf: {\n    options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],\n    control: { type: 'select' }\n  }\n};\n\nexport const Grow: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledContainer}>\n      <Flex item={{ grow: 1 }} as={StyledItem} inActive>\n        <Text>Grow: 1</Text>\n      </Flex>\n      <Flex item={{ grow: args.grow }} as={StyledItem}>\n        <Text>Grow: {args.grow}</Text>\n      </Flex>\n      <Flex item={{ grow: 0 }} as={StyledItem} inActive>\n        <Text>Grow: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGrow.args = {\n  grow: 0\n};\n\nGrow.argTypes = {\n  grow: { control: { type: 'number' } }\n};\n\nexport const Shrink: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledContainer} width={42}>\n      <Flex item={{ shrink: 1 }} as={StyledItem} width={15} inActive>\n        <Text>Shrink: 1</Text>\n      </Flex>\n      <Flex item={{ shrink: args.shrink }} as={StyledItem} width={15}>\n        <Text>Shrink: {args.shrink}</Text>\n      </Flex>\n      <Flex item={{ shrink: 0 }} as={StyledItem} width={15} inActive>\n        <Text>Shrink: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nShrink.args = {\n  shrink: 0\n};\n\nShrink.argTypes = {\n  shrink: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Item',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  alignSelf?: FlexItemProps['alignSelf'];\n  grow?: FlexItemProps['grow'];\n  shrink?: FlexItemProps['shrink'];\n}\n\nexport const AlignSelf: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignSelf.args = {\n  alignSelf: 'auto'\n};\n\nAlignSelf.argTypes = {\n  alignSelf: {\n    options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],\n    control: { type: 'select' }\n  }\n};\n\nexport const Grow: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Grow: 1</Text>\n      </Flex>\n      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>\n        <Text>Grow: {args.grow}</Text>\n      </Flex>\n      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>\n        <Text>Grow: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGrow.args = {\n  grow: 0\n};\n\nGrow.argTypes = {\n  grow: { control: { type: 'number' } }\n};\n\nexport const Shrink: Story<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>\n      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>\n        <Text>Shrink: 1</Text>\n      </Flex>\n      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>\n        <Text>Shrink: {args.shrink}</Text>\n      </Flex>\n      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>\n        <Text>Shrink: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nShrink.args = {\n  shrink: 0\n};\n\nShrink.argTypes = {\n  shrink: { control: { type: 'number' } }\n};\n"]}

package/lib/core/Form/Form.mocks.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const FormContent: ({ cols, heading, description, showActions }: {
+    cols: number;
+    showActions: boolean;
+    heading?: string | undefined;
+    description?: string | undefined;
+}) => JSX.Element | null;
+//# sourceMappingURL=Form.mocks.d.ts.map

package/lib/core/Form/Form.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AA+FA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC"}

package/lib/core/Form/Form.mocks.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducer, useRef, useContext } from 'react';
+import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, ToasterContext } from '@pega/cosmos-react-core';
+import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
+import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
+import { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';
+// Get initial field properties
+const initFields = () => {
+    const common = { value: undefined, status: undefined };
+    return [
+        {
+            ...common,
+            name: 'name',
+            required: true,
+            error: 'Please enter first and last name',
+            validator() {
+                if (!this.value)
+                    return false;
+                return /^[a-z]+\s[a-z]+$/i.test(this.value);
+            }
+        },
+        {
+            ...common,
+            name: 'email',
+            required: true,
+            error: 'Enter a @pega.com address',
+            validator() {
+                if (!this.value)
+                    return false;
+                return /^\S+@pega\.com$/.test(this.value);
+            }
+        },
+        {
+            ...common,
+            name: 'notes',
+            required: true,
+            help: 'See how fast you can type 20 characters…go',
+            error: 'You need to tell us more than 20 characters',
+            validator() {
+                if (!this.value)
+                    return false;
+                return this.value.length >= 20;
+            }
+        }
+    ];
+};
+// Handles setting of state for all fields
+const fieldReducer = (fields, { target, type }) => {
+    return fields.map(field => {
+        if (field.name === target.name) {
+            field.value = target.value;
+            if (type === 'blur' || field.status === 'error') {
+                if ((field.required || field.value) && !field.validator()) {
+                    field.status = 'error';
+                    field.info = field.error;
+                }
+                else {
+                    field.status = undefined;
+                    field.info = field.help;
+                }
+            }
+        }
+        return field;
+    });
+};
+export const FormContent = ({ cols, heading, description, showActions }) => {
+    const editorRef = useRef(null);
+    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
+    const { push } = useContext(ToasterContext);
+    const name = fields.find(field => field.name === 'name');
+    const email = fields.find(field => field.name === 'email');
+    const notes = fields.find(field => field.name === 'notes');
+    if (!name || !email || !notes)
+        return null;
+    const canSubmit = fields.every(field => field.value && field.validator());
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
+                    push({ content: 'Form cancelled!' });
+                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" }, void 0)] }, void 0));
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
+            e.preventDefault();
+            push({ content: 'Form submitted!' });
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }, void 0) }, void 0), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }, void 0), _jsx(Option, { children: "Pizza" }, void 0), _jsx(Option, { children: "Sandwich" }, void 0), _jsx(Option, { children: "Salad" }, void 0)] }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+                            'inline-styling',
+                            'headers',
+                            'tables',
+                            'links',
+                            'images',
+                            'lists',
+                            'cut-copy-paste',
+                            'indentation'
+                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}, void 0) }, void 0), _jsx(ComboboxFilterableStory, {}, void 0)] }, void 0) }, void 0));
+};
+//# sourceMappingURL=Form.mocks.js.map

package/lib/core/Form/Form.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.mocks.js","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, ChangeEvent, FocusEvent, FormEvent, useRef, useContext } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Form,\n  FormControlProps,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport {\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n        <ComboboxFilterableStory />\n      </Grid>\n    </Form>\n  );\n};\n"]}

package/lib/core/Form/Form.stories.d.ts

@@ -1,13 +1,6 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FormContent: ({ cols, heading, description, showActions }: {
-    cols: number;
-    showActions: boolean;
-    heading?: string | undefined;
-    description?: string | undefined;
-}) => JSX.Element | null;
 interface FormStoryProps {
     heading?: string;
     description?: string;
@@ -18,4 +11,14 @@ export declare const ThreeColumnForm: Story<FormStoryProps>;
 export declare const SimpleFormDemo: Story<FormStoryProps & {
     withBanners?: boolean;
 }>;
+interface ConfigurableFormProps extends FormStoryProps {
+    foregroundColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: number;
+    hoverBorderColor?: string;
+    focusBorderColor?: string;
+}
+export declare const ConfigurableForm: Story<ConfigurableFormProps>;
 //# sourceMappingURL=Form.stories.d.ts.map

package/lib/core/Form/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAoC/C,wBAeU;AAyEV,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC;AAEF,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAcU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}

package/lib/core/Form/Form.stories.js

@@ -1,16 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useRef, useContext, useState } from 'react';
-import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
-import { Banner, Button, Checkbox, CheckboxGroup, Flex, Form, FormField, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, ToasterContext } from '@pega/cosmos-react-core';
-import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
-import { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';
+import { useState } from 'react';
+import { Banner, Button, Configuration, Flex, Form, FormField, Input } from '@pega/cosmos-react-core';
+import { FormContent } from './Form.mocks';
 export default {
     title: 'Core/Form',
     component: Form,
     subcomponents: {
         FormField
     },
-    includeStories: ['OneColumnForm', 'TwoColumnForm', 'ThreeColumnForm', 'SimpleFormDemo'],
     args: {
         heading: 'Form demo',
         description: ''
@@ -20,96 +17,6 @@ export default {
         description: { control: { type: 'text' } }
     }
 };
-// Get initial field properties
-const initFields = () => {
-    const common = { value: undefined, status: undefined };
-    return [
-        {
-            ...common,
-            name: 'name',
-            required: true,
-            error: 'Please enter first and last name',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^[a-z]+\s[a-z]+$/i.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'email',
-            required: true,
-            error: 'Enter a @pega.com address',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^\S+@pega\.com$/.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'notes',
-            required: true,
-            help: 'See how fast you can type 20 characters…go',
-            error: 'You need to tell us more than 20 characters',
-            validator() {
-                if (!this.value)
-                    return false;
-                return this.value.length >= 20;
-            }
-        }
-    ];
-};
-// Handles setting of state for all fields
-const fieldReducer = (fields, { target, type }) => {
-    return fields.map(field => {
-        if (field.name === target.name) {
-            field.value = target.value;
-            if (type === 'blur' || field.status === 'error') {
-                if ((field.required || field.value) && !field.validator()) {
-                    field.status = 'error';
-                    field.info = field.error;
-                }
-                else {
-                    field.status = undefined;
-                    field.info = field.help;
-                }
-            }
-        }
-        return field;
-    });
-};
-export const FormContent = ({ cols, heading, description, showActions }) => {
-    const editorRef = useRef(null);
-    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-    const { push } = useContext(ToasterContext);
-    const name = fields.find(field => field.name === 'name');
-    const email = fields.find(field => field.name === 'email');
-    const notes = fields.find(field => field.name === 'notes');
-    if (!name || !email || !notes)
-        return null;
-    const canSubmit = fields.every(field => field.value && field.validator());
-    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
-                    push({ content: 'Form cancelled!' });
-                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" }, void 0)] }, void 0));
-    const onImageAdded = (image, id) => {
-        const src = URL.createObjectURL(image);
-        editorRef.current?.appendImage({ src, alt: image.name }, id);
-    };
-    return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
-            e.preventDefault();
-            push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Input, { name: 'email', value: email.value, type: 'email', label: 'Email', required: email.required, status: email.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }, void 0) }, void 0), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }, void 0), _jsx(Option, { children: "Pizza" }, void 0), _jsx(Option, { children: "Sandwich" }, void 0), _jsx(Option, { children: "Salad" }, void 0)] }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(TextArea, { name: 'notes', required: notes.required, label: 'Meeting Notes', status: notes.status, info: notes.info || notes.help, onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
-                            'inline-styling',
-                            'headers',
-                            'tables',
-                            'links',
-                            'images',
-                            'lists',
-                            'cut-copy-paste',
-                            'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}, void 0) }, void 0), _jsx(ComboboxFilterableStory, {}, void 0)] }, void 0) }, void 0));
-};
 export const OneColumnForm = (args) => {
     return _jsx(FormContent, { cols: 1, heading: args.heading, description: args.description, showActions: true }, void 0);
 };
@@ -141,4 +48,43 @@ SimpleFormDemo.args = {
 SimpleFormDemo.argTypes = {
     withBanners: { control: { type: 'boolean' } }
 };
+export const ConfigurableForm = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                'form-control': {
+                    'foreground-color': args.foregroundColor,
+                    'background-color': args.backgroundColor,
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius,
+                    ':hover': {
+                        'border-color': args.hoverBorderColor
+                    },
+                    ':focus': {
+                        'border-color': args.focusBorderColor
+                    }
+                }
+            }
+        }, children: _jsx(FormContent, { cols: 2, showActions: true }, void 0) }, void 0));
+};
+ConfigurableForm.args = {
+    foregroundColor: '#000000',
+    backgroundColor: '#ffffff',
+    borderColor: '#939393',
+    borderWidth: '0.0625rem',
+    borderRadius: 0.5,
+    hoverBorderColor: '#3f3f3f',
+    focusBorderColor: 'transparent'
+};
+ConfigurableForm.argTypes = {
+    foregroundColor: { control: { type: 'color' } },
+    backgroundColor: { control: { type: 'color' } },
+    borderColor: { control: { type: 'color' } },
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'number' } },
+    hoverBorderColor: { control: { type: 'color' } },
+    focusBorderColor: { control: { type: 'color' } },
+    heading: { table: { disable: true } },
+    description: { table: { disable: true } }
+};
 //# sourceMappingURL=Form.stories.js.map