@atom-learning/components 2.64.0 → 2.65.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,9 +1,9 @@
1
- # [2.64.0](https://github.com/Atom-Learning/components/compare/v2.63.1...v2.64.0) (2023-07-31)
1
+ # [2.65.0](https://github.com/Atom-Learning/components/compare/v2.64.0...v2.65.0) (2023-07-31)
2
2
 
3
3
 
4
4
  ### Features
5
5
 
6
- * add new colours from theme bump in ColorScheme ([334c22a](https://github.com/Atom-Learning/components/commit/334c22a0f963ed9673fa6759546f26f83bff8427))
6
+ * update Flex to do all that Stack does ([eb4a049](https://github.com/Atom-Learning/components/commit/eb4a0492df7e414f311de7f4d6c553837ad14453))
7
7
 
8
8
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
9
9
 
@@ -1,5 +1,11 @@
1
1
  import * as React from 'react';
2
- declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
2
+ declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
3
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
4
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
5
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
6
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
7
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
8
+ }, {
3
9
  sm: string;
4
10
  md: string;
5
11
  lg: string;
@@ -1,5 +1,11 @@
1
1
  /// <reference types="react" />
2
- export declare const BannerContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
2
+ export declare const BannerContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
3
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
4
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
5
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
6
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
7
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
8
+ }, {
3
9
  sm: string;
4
10
  md: string;
5
11
  lg: string;
@@ -970,7 +970,13 @@ declare const ChipContent: ({ children, ...rest }: {
970
970
  [x: string]: any;
971
971
  children: any;
972
972
  }) => JSX.Element;
973
- export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
973
+ export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
974
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
975
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
976
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
977
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
978
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
979
+ }, {
974
980
  sm: string;
975
981
  md: string;
976
982
  lg: string;
@@ -1613,7 +1619,13 @@ export declare type TChipRootContext = React.ComponentProps<typeof StyledRoot>;
1613
1619
  export declare type TChipRootProviderProps = TChipRootContext;
1614
1620
  export declare const ChipRootContext: React.Context<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
1615
1621
  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
1616
- }, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
1622
+ }, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
1623
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
1624
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
1625
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
1626
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
1627
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
1628
+ }, {
1617
1629
  sm: string;
1618
1630
  md: string;
1619
1631
  lg: string;
@@ -2,7 +2,13 @@ import * as React from 'react';
2
2
  import { DismissibleGroup } from '../../components/dismissible-group';
3
3
  declare const StyledChipDismissibleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
4
4
  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
5
- }, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
5
+ }, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
6
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
7
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
8
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
9
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
10
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
11
+ }, {
6
12
  sm: string;
7
13
  md: string;
8
14
  lg: string;
@@ -2,7 +2,13 @@ import * as ToggleGroup from '@radix-ui/react-toggle-group';
2
2
  import * as React from 'react';
3
3
  declare const StyledChipToggleGroupItem: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
4
4
  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
5
- }, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
5
+ }, "direction" | "gap" | "css" | "wrap" | "justify" | "align"> & import("@stitches/react/types/styled-component").TransformProps<{
6
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
7
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
8
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
9
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
10
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
11
+ }, {
6
12
  sm: string;
7
13
  md: string;
8
14
  lg: string;
@@ -2,7 +2,13 @@ import * as React from 'react';
2
2
  import { EmptyStateBody } from './EmptyStateBody';
3
3
  import { EmptyStateImage } from './EmptyStateImage';
4
4
  import { EmptyStateTitle } from './EmptyStateTitle';
5
- declare const EmptyStateContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
5
+ declare const EmptyStateContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
6
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
7
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
8
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
9
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
10
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
11
+ }, {
6
12
  sm: string;
7
13
  md: string;
8
14
  lg: string;
@@ -1,4 +1,10 @@
1
- export declare const Flex: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
1
+ export declare const Flex: import("@stitches/react/types/styled-component").StyledComponent<"div", {
2
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
3
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
4
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
5
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
6
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
7
+ }, {
2
8
  sm: string;
3
9
  md: string;
4
10
  lg: string;
@@ -1,2 +1,2 @@
1
- import{styled as l}from"../../stitches.js";const e=l("div",{display:"flex"});e.displayName="Flex";export{e as Flex};
1
+ import{styled as l}from"../../stitches.js";import{createThemeVariants as o}from"../../utilities/create-theme-variants/createThemeVariants.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const r=(e,n)=>e.reduce((i,a)=>({...i,[a]:n(a)}),{}),t=["inherit","initial","revert","revert-layer","unset"],s=l("div",{display:"flex",variants:{direction:r([...t,"row","row-reverse","column","column-reverse"],e=>({flexDirection:e})),wrap:r([...t,"nowrap","wrap","wrap-reverse"],e=>({flexWrap:e})),justify:r([...t,"normal","unsafe","safe","start","center","end","flex-start","flex-end","left","right","space-between","space-around","space-evenly","stretch"],e=>({justifyContent:e})),align:r([...t,"normal","unsafe","safe","center","start","end","self-start","self-end","flex-start","flex-end","baseline","first baseline","last baseline","stretch"],e=>({alignItems:e})),gap:o("space",{gap:"$key"})}});s.displayName="Flex";export{s as Flex};
2
2
  //# sourceMappingURL=Flex.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Flex = styled('div', { display: 'flex' })\n\nFlex.displayName = 'Flex'\n"],"names":["Flex","styled"],"mappings":"2CAEO,MAAMA,EAAOC,EAAO,MAAO,CAAE,QAAS,MAAO,CAAC,EAErDD,EAAK,YAAc"}
1
+ {"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\n\nconst createVariants = <T extends GlobalValue[]>(\n variants: T,\n fn: (string: T[number]) => CSS\n) => {\n return variants.reduce(\n (prev, variant) => ({ ...prev, [variant]: fn(variant) }),\n {} as Record<T[number], CSS>\n )\n}\n\nconst globalValues = [\n 'inherit',\n 'initial',\n 'revert',\n 'revert-layer',\n 'unset'\n] as const\n\n/*\n * The following type is partially a hack to get the rest of the createVariants array parameter to be recognised as const.\n * Thus giving is the correct types generated for these generated variant props.\n * No clue how we can do it cleaner.\n * Mad props to: Elliot for getting this to working as is.\n *\n */\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype GlobalValue = typeof globalValues[number] | (string & {})\n\nexport const Flex = styled('div', {\n display: 'flex',\n variants: {\n direction: createVariants(\n [...globalValues, 'row', 'row-reverse', 'column', 'column-reverse'],\n (v) => {\n return { flexDirection: v }\n }\n ),\n wrap: createVariants(\n [...globalValues, 'nowrap', 'wrap', 'wrap-reverse'],\n (v) => {\n return { flexWrap: v }\n }\n ),\n // Why is both `start` and `flex-start` valid values? Answer: https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/\n justify: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'start',\n 'center',\n 'end',\n 'flex-start',\n 'flex-end',\n 'left',\n 'right',\n 'space-between',\n 'space-around',\n 'space-evenly',\n 'stretch'\n ],\n (v) => {\n return { justifyContent: v }\n }\n ),\n align: createVariants(\n [\n ...globalValues,\n 'normal',\n 'unsafe',\n 'safe',\n 'center',\n 'start',\n 'end',\n 'self-start',\n 'self-end',\n 'flex-start',\n 'flex-end',\n 'baseline',\n 'first baseline',\n 'last baseline',\n 'stretch'\n ],\n (v) => {\n return { alignItems: v }\n }\n ),\n gap: createThemeVariants('space', { gap: '$key' })\n }\n})\n\nFlex.displayName = 'Flex'\n"],"names":["createVariants","variants","fn","prev","variant","globalValues","Flex","styled","v","createThemeVariants"],"mappings":"sUAGA,MAAMA,EAAiB,CACrBC,EACAC,IAEOD,EAAS,OACd,CAACE,EAAMC,KAAa,CAAE,GAAGD,EAAM,CAACC,GAAUF,EAAGE,CAAO,CAAE,GACtD,CAAA,CACF,EAGIC,EAAe,CACnB,UACA,UACA,SACA,eACA,OACF,EAYaC,EAAOC,EAAO,MAAO,CAChC,QAAS,OACT,SAAU,CACR,UAAWP,EACT,CAAC,GAAGK,EAAc,MAAO,cAAe,SAAU,gBAAgB,EACjEG,IACQ,CAAE,cAAeA,CAAE,EAE9B,EACA,KAAMR,EACJ,CAAC,GAAGK,EAAc,SAAU,OAAQ,cAAc,EACjDG,IACQ,CAAE,SAAUA,CAAE,EAEzB,EAEA,QAASR,EACP,CACE,GAAGK,EACH,SACA,SACA,OACA,QACA,SACA,MACA,aACA,WACA,OACA,QACA,gBACA,eACA,eACA,SACF,EACCG,IACQ,CAAE,eAAgBA,CAAE,EAE/B,EACA,MAAOR,EACL,CACE,GAAGK,EACH,SACA,SACA,OACA,SACA,QACA,MACA,aACA,WACA,aACA,WACA,WACA,iBACA,gBACA,SACF,EACCG,IACQ,CAAE,WAAYA,CAAE,EAE3B,EACA,IAAKC,EAAoB,QAAS,CAAE,IAAK,MAAO,CAAC,CACnD,CACF,CAAC,EAEDH,EAAK,YAAc"}
@@ -1,6 +1,12 @@
1
1
  import * as React from 'react';
2
2
  import { InlineMessageTheme } from './InlineMessage.types';
3
- declare const InlineMessageContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
3
+ declare const InlineMessageContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
4
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
5
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
6
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
7
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
8
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
9
+ }, {
4
10
  sm: string;
5
11
  md: string;
6
12
  lg: string;
@@ -1,5 +1,11 @@
1
1
  import React from 'react';
2
- declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
2
+ declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
3
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
4
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
5
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
6
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
7
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
8
+ }, {
3
9
  sm: string;
4
10
  md: string;
5
11
  lg: string;
@@ -329,5 +329,8 @@ declare type StackPropsType = React.ComponentProps<typeof StyledStack> & {
329
329
  css?: CSS;
330
330
  as?: any;
331
331
  };
332
+ /**
333
+ * @deprecated Stack is being deprecated. Use Flex instead!
334
+ */
332
335
  export declare const Stack: React.ForwardRefExoticComponent<StackPropsType>;
333
336
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n display: 'flex',\n '& > *': {\n m: 0\n },\n variants: {\n direction: {\n row: {\n flexDirection: 'row'\n },\n 'row-reverse': {\n flexDirection: 'row-reverse'\n },\n column: {\n flexDirection: 'column'\n }\n },\n wrap: {\n wrap: {\n flexWrap: 'wrap'\n },\n 'no-wrap': {\n flexWrap: 'no-wrap'\n },\n 'wrap-reverse': {\n flexWrap: 'wrap-reverse'\n }\n },\n justify: {\n start: { justifyContent: 'flex-start' },\n center: { justifyContent: 'center' },\n end: { justifyContent: 'flex-end' },\n false: {}\n },\n align: {\n start: { alignItems: 'flex-start' },\n center: { alignItems: 'center' },\n end: { alignItems: 'flex-end' },\n false: {}\n },\n gap: {\n ...createThemeVariants('space', {\n mt: '-$key',\n ml: '-$key',\n '& > *': {\n mt: '$key',\n ml: '$key'\n }\n }),\n false: {}\n }\n }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n React.forwardRef(\n (\n {\n css,\n gap = 2,\n direction = 'row',\n wrap = 'wrap',\n justify = 'start',\n align,\n ...remainingProps\n },\n ref\n ) => {\n return (\n <CSSWrapper css={css}>\n <StyledStack\n ref={ref}\n direction={direction}\n gap={gap}\n wrap={wrap}\n justify={justify}\n align={\n typeof align === 'undefined' && direction !== 'column'\n ? 'center'\n : align\n }\n {...remainingProps}\n />\n </CSSWrapper>\n )\n }\n )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"mXAMA,MAAMA,EAAcC,EAAO,MAAO,CAChC,QAAS,OACT,QAAS,CACP,EAAG,CACL,EACA,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,KACjB,EACA,cAAe,CACb,cAAe,aACjB,EACA,OAAQ,CACN,cAAe,QACjB,CACF,EACA,KAAM,CACJ,KAAM,CACJ,SAAU,MACZ,EACA,UAAW,CACT,SAAU,SACZ,EACA,eAAgB,CACd,SAAU,cACZ,CACF,EACA,QAAS,CACP,MAAO,CAAE,eAAgB,YAAa,EACtC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,UAAW,EAClC,MAAO,CACT,CAAA,EACA,MAAO,CACL,MAAO,CAAE,WAAY,YAAa,EAClC,OAAQ,CAAE,WAAY,QAAS,EAC/B,IAAK,CAAE,WAAY,UAAW,EAC9B,MAAO,CACT,CAAA,EACA,IAAK,CACH,GAAGC,EAAoB,QAAS,CAC9B,GAAI,QACJ,GAAI,QACJ,QAAS,CACP,GAAI,OACJ,GAAI,MACN,CACF,CAAC,EACD,MAAO,EACT,CACF,CACF,CAAC,EAOYC,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EAAY,MACZ,KAAAC,EAAO,OACP,QAAAC,EAAU,QACV,MAAAC,KACGC,CACL,EACAC,IAGER,EAAA,cAACS,EAAA,CAAW,IAAKR,GACfD,EAAA,cAACJ,EAAA,CACC,IAAKY,EACL,UAAWL,EACX,IAAKD,EACL,KAAME,EACN,QAASC,EACT,MACE,OAAOC,EAAU,KAAeH,IAAc,SAC1C,SACAG,EAEL,GAAGC,EACN,CACF,CAGN,EAEFR,EAAM,YAAc"}
1
+ {"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n display: 'flex',\n '& > *': {\n m: 0\n },\n variants: {\n direction: {\n row: {\n flexDirection: 'row'\n },\n 'row-reverse': {\n flexDirection: 'row-reverse'\n },\n column: {\n flexDirection: 'column'\n }\n },\n wrap: {\n wrap: {\n flexWrap: 'wrap'\n },\n 'no-wrap': {\n flexWrap: 'no-wrap'\n },\n 'wrap-reverse': {\n flexWrap: 'wrap-reverse'\n }\n },\n justify: {\n start: { justifyContent: 'flex-start' },\n center: { justifyContent: 'center' },\n end: { justifyContent: 'flex-end' },\n false: {}\n },\n align: {\n start: { alignItems: 'flex-start' },\n center: { alignItems: 'center' },\n end: { alignItems: 'flex-end' },\n false: {}\n },\n gap: {\n ...createThemeVariants('space', {\n mt: '-$key',\n ml: '-$key',\n '& > *': {\n mt: '$key',\n ml: '$key'\n }\n }),\n false: {}\n }\n }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\n/**\n * @deprecated Stack is being deprecated. Use Flex instead!\n */\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n React.forwardRef(\n (\n {\n css,\n gap = 2,\n direction = 'row',\n wrap = 'wrap',\n justify = 'start',\n align,\n ...remainingProps\n },\n ref\n ) => {\n return (\n <CSSWrapper css={css}>\n <StyledStack\n ref={ref}\n direction={direction}\n gap={gap}\n wrap={wrap}\n justify={justify}\n align={\n typeof align === 'undefined' && direction !== 'column'\n ? 'center'\n : align\n }\n {...remainingProps}\n />\n </CSSWrapper>\n )\n }\n )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"mXAMA,MAAMA,EAAcC,EAAO,MAAO,CAChC,QAAS,OACT,QAAS,CACP,EAAG,CACL,EACA,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,KACjB,EACA,cAAe,CACb,cAAe,aACjB,EACA,OAAQ,CACN,cAAe,QACjB,CACF,EACA,KAAM,CACJ,KAAM,CACJ,SAAU,MACZ,EACA,UAAW,CACT,SAAU,SACZ,EACA,eAAgB,CACd,SAAU,cACZ,CACF,EACA,QAAS,CACP,MAAO,CAAE,eAAgB,YAAa,EACtC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,UAAW,EAClC,MAAO,CACT,CAAA,EACA,MAAO,CACL,MAAO,CAAE,WAAY,YAAa,EAClC,OAAQ,CAAE,WAAY,QAAS,EAC/B,IAAK,CAAE,WAAY,UAAW,EAC9B,MAAO,CACT,CAAA,EACA,IAAK,CACH,GAAGC,EAAoB,QAAS,CAC9B,GAAI,QACJ,GAAI,QACJ,QAAS,CACP,GAAI,OACJ,GAAI,MACN,CACF,CAAC,EACD,MAAO,EACT,CACF,CACF,CAAC,EAUYC,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EAAY,MACZ,KAAAC,EAAO,OACP,QAAAC,EAAU,QACV,MAAAC,KACGC,CACL,EACAC,IAGER,EAAA,cAACS,EAAA,CAAW,IAAKR,GACfD,EAAA,cAACJ,EAAA,CACC,IAAKY,EACL,UAAWL,EACX,IAAKD,EACL,KAAME,EACN,QAASC,EACT,MACE,OAAOC,EAAU,KAAeH,IAAc,SAC1C,SACAG,EAEL,GAAGC,EACN,CACF,CAGN,EAEFR,EAAM,YAAc"}
@@ -1,4 +1,10 @@
1
- export declare const StepperStepBullet: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
1
+ export declare const StepperStepBullet: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
2
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
3
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
4
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
5
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
6
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
7
+ }, {
2
8
  sm: string;
3
9
  md: string;
4
10
  lg: string;
@@ -1,4 +1,10 @@
1
- export declare const StepperStepContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
1
+ export declare const StepperStepContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {
2
+ direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
3
+ wrap?: "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | "revert-layer" | undefined;
4
+ justify?: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
5
+ align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
6
+ gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
7
+ }, {
2
8
  sm: string;
3
9
  md: string;
4
10
  lg: string;