@atom-learning/components 2.66.3 → 2.66.5
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 +2 -3
- package/dist/components/badge/stitches.badge.colorscheme.config.js +1 -1
- package/dist/components/badge/stitches.badge.colorscheme.config.js.map +1 -1
- package/dist/components/dialog/Dialog.d.ts +4 -0
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/dialog/Dialog.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/dialog/DialogFooter.d.ts +3 -0
- package/dist/components/dialog/DialogFooter.js +2 -0
- package/dist/components/dialog/DialogFooter.js.map +1 -0
- package/dist/components/dialog/DialogHeading.d.ts +3 -0
- package/dist/components/dialog/DialogHeading.js +2 -0
- package/dist/components/dialog/DialogHeading.js.map +1 -0
- package/dist/docgen.json +1 -1
- package/dist/experiments/color-scheme/stitches.colorscheme.config.js +1 -1
- package/dist/experiments/color-scheme/stitches.colorscheme.config.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
## [2.66.
|
|
1
|
+
## [2.66.5](https://github.com/Atom-Learning/components/compare/v2.66.4...v2.66.5) (2023-08-25)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* wrong badge typescript output, simplify, mod colours to design as we now have more flexibility ([16b2e4a](https://github.com/Atom-Learning/components/commit/16b2e4a23d9ba5c7329ba394e99df73da244fea3))
|
|
6
|
+
* use hashes for classes created via createTheme ([a9031c2](https://github.com/Atom-Learning/components/commit/a9031c2a6b73a60a4b0dbfd13f49fa774ed4668a))
|
|
8
7
|
|
|
9
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
10
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createTheme as e}from"../../stitches.js";const t=e(
|
|
1
|
+
import{createTheme as e}from"../../stitches.js";const t=e({colors:{textSubtle:"$blue900",backgroundSubtle:"$blue100",textBold:"#FFF",backgroundBold:"$blue800"}}),o=e({colors:{textSubtle:"$grey900",backgroundSubtle:"$grey100",textBold:"#FFF",backgroundBold:"$grey800"}}),l=e({colors:{textSubtle:"$successMid",backgroundSubtle:"$successLight",textBold:"#FFF",backgroundBold:"$success"}}),r=e({colors:{textSubtle:"$dangerMid",backgroundSubtle:"$dangerLight",textBold:"#FFF",backgroundBold:"$danger"}}),u=e({colors:{textSubtle:"$warningText",backgroundSubtle:"$warningLight",textBold:"$grey1000",backgroundBold:"$warning"}}),d=e({colors:{textSubtle:"$grey1000",backgroundSubtle:"$grey200",textBold:"#FFF",backgroundBold:"$grey800"}}),b=e({colors:{textSubtle:"$blue1000",backgroundSubtle:"$blue200",textBold:"#FFF",backgroundBold:"$blue800"}}),g=e({colors:{textSubtle:"$purple1000",backgroundSubtle:"$purple200",textBold:"#FFF",backgroundBold:"$purple800"}}),c=e({colors:{textSubtle:"$cyan1000",backgroundSubtle:"$cyan200",textBold:"#FFF",backgroundBold:"$cyan800"}}),n=e({colors:{textSubtle:"$green1000",backgroundSubtle:"$green200",textBold:"#FFF",backgroundBold:"$green800"}}),a=e({colors:{textSubtle:"$magenta1000",backgroundSubtle:"$magenta200",textBold:"#FFF",backgroundBold:"$magenta800"}}),$=e({colors:{textSubtle:"$red1000",backgroundSubtle:"$red200",textBold:"#FFF",backgroundBold:"$red800"}}),F=e({colors:{textSubtle:"$teal1000",backgroundSubtle:"$teal200",textBold:"#FFF",backgroundBold:"$teal800"}}),x=e({colors:{textSubtle:"$orange1000",backgroundSubtle:"$orange200",textBold:"$grey1200",backgroundBold:"$orange600"}}),S=e({colors:{textSubtle:"$yellow1000",backgroundSubtle:"$yellow200",textBold:"$grey1200",backgroundBold:"$yellow500"}}),k=e({colors:{textSubtle:"$lime1000",backgroundSubtle:"$lime200",textBold:"$grey1200",backgroundBold:"$lime600"}}),s={info:t,neutral:o,success:l,danger:r,warning:u,grey:d,blue:b,purple:g,cyan:c,green:n,magenta:a,red:$,teal:F,orange:x,yellow:S,lime:k};export{s as colorSchemes};
|
|
2
2
|
//# sourceMappingURL=stitches.badge.colorscheme.config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stitches.badge.colorscheme.config.js","sources":["../../../src/components/badge/stitches.badge.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\n/*\n * Semantic themes\n */\n\nconst info = createTheme(
|
|
1
|
+
{"version":3,"file":"stitches.badge.colorscheme.config.js","sources":["../../../src/components/badge/stitches.badge.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\n/*\n * Semantic themes\n */\n\nconst info = createTheme({\n colors: {\n textSubtle: '$blue900',\n backgroundSubtle: '$blue100',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst neutral = createTheme({\n colors: {\n textSubtle: '$grey900',\n backgroundSubtle: '$grey100',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst success = createTheme({\n colors: {\n textSubtle: '$successMid',\n backgroundSubtle: '$successLight',\n textBold: '#FFF',\n backgroundBold: '$success'\n }\n})\n\nconst danger = createTheme({\n colors: {\n textSubtle: '$dangerMid',\n backgroundSubtle: '$dangerLight',\n textBold: '#FFF',\n backgroundBold: '$danger'\n }\n})\n\nconst warning = createTheme({\n colors: {\n textSubtle: '$warningText',\n backgroundSubtle: '$warningLight',\n textBold: '$grey1000',\n backgroundBold: '$warning'\n }\n})\n\n/*\n * Non-semantic themes\n */\n\nconst grey = createTheme({\n colors: {\n textSubtle: '$grey1000',\n backgroundSubtle: '$grey200',\n textBold: '#FFF',\n backgroundBold: '$grey800'\n }\n})\n\nconst blue = createTheme({\n colors: {\n textSubtle: '$blue1000',\n backgroundSubtle: '$blue200',\n textBold: '#FFF',\n backgroundBold: '$blue800'\n }\n})\n\nconst purple = createTheme({\n colors: {\n textSubtle: '$purple1000',\n backgroundSubtle: '$purple200',\n textBold: '#FFF',\n backgroundBold: '$purple800'\n }\n})\n\nconst cyan = createTheme({\n colors: {\n textSubtle: '$cyan1000',\n backgroundSubtle: '$cyan200',\n textBold: '#FFF',\n backgroundBold: '$cyan800'\n }\n})\n\nconst green = createTheme({\n colors: {\n textSubtle: '$green1000',\n backgroundSubtle: '$green200',\n textBold: '#FFF',\n backgroundBold: '$green800'\n }\n})\n\nconst magenta = createTheme({\n colors: {\n textSubtle: '$magenta1000',\n backgroundSubtle: '$magenta200',\n textBold: '#FFF',\n backgroundBold: '$magenta800'\n }\n})\n\nconst red = createTheme({\n colors: {\n textSubtle: '$red1000',\n backgroundSubtle: '$red200',\n textBold: '#FFF',\n backgroundBold: '$red800'\n }\n})\n\nconst teal = createTheme({\n colors: {\n textSubtle: '$teal1000',\n backgroundSubtle: '$teal200',\n textBold: '#FFF',\n backgroundBold: '$teal800'\n }\n})\n\nconst orange = createTheme({\n colors: {\n textSubtle: '$orange1000',\n backgroundSubtle: '$orange200',\n textBold: '$grey1200',\n backgroundBold: '$orange600'\n }\n})\n\nconst yellow = createTheme({\n colors: {\n textSubtle: '$yellow1000',\n backgroundSubtle: '$yellow200',\n textBold: '$grey1200',\n backgroundBold: '$yellow500'\n }\n})\n\nconst lime = createTheme({\n colors: {\n textSubtle: '$lime1000',\n backgroundSubtle: '$lime200',\n textBold: '$grey1200',\n backgroundBold: '$lime600'\n }\n})\n\nexport const colorSchemes = {\n info,\n neutral,\n success,\n danger,\n warning,\n grey,\n blue,\n purple,\n cyan,\n green,\n magenta,\n red,\n teal,\n orange,\n yellow,\n lime\n}\n"],"names":["info","createTheme","neutral","success","danger","warning","grey","blue","purple","cyan","green","magenta","red","teal","orange","yellow","lime","colorSchemes"],"mappings":"gDAMA,MAAMA,EAAOC,EAAY,CACvB,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKC,EAAUD,EAAY,CAC1B,OAAQ,CACN,WAAY,WACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKE,EAAUF,EAAY,CAC1B,OAAQ,CACN,WAAY,cACZ,iBAAkB,gBAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKG,EAASH,EAAY,CACzB,OAAQ,CACN,WAAY,aACZ,iBAAkB,eAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKI,EAAUJ,EAAY,CAC1B,OAAQ,CACN,WAAY,eACZ,iBAAkB,gBAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAMKK,EAAOL,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKM,EAAON,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKO,EAASP,EAAY,CACzB,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,OACV,eAAgB,YAClB,CACF,CAAC,EAEKQ,EAAOR,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKS,EAAQT,EAAY,CACxB,OAAQ,CACN,WAAY,aACZ,iBAAkB,YAClB,SAAU,OACV,eAAgB,WAClB,CACF,CAAC,EAEKU,EAAUV,EAAY,CAC1B,OAAQ,CACN,WAAY,eACZ,iBAAkB,cAClB,SAAU,OACV,eAAgB,aAClB,CACF,CAAC,EAEKW,EAAMX,EAAY,CACtB,OAAQ,CACN,WAAY,WACZ,iBAAkB,UAClB,SAAU,OACV,eAAgB,SAClB,CACF,CAAC,EAEKY,EAAOZ,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,OACV,eAAgB,UAClB,CACF,CAAC,EAEKa,EAASb,EAAY,CACzB,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKc,EAASd,EAAY,CACzB,OAAQ,CACN,WAAY,cACZ,iBAAkB,aAClB,SAAU,YACV,eAAgB,YAClB,CACF,CAAC,EAEKe,EAAOf,EAAY,CACvB,OAAQ,CACN,WAAY,YACZ,iBAAkB,WAClB,SAAU,YACV,eAAgB,UAClB,CACF,CAAC,EAEYgB,EAAe,CAC1B,KAAAjB,EACA,QAAAE,EACA,QAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAC,CACF"}
|
|
@@ -3,6 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
import { DialogBackground } from './DialogBackground';
|
|
4
4
|
import { DialogClose } from './DialogClose';
|
|
5
5
|
import { DialogContent } from './DialogContent';
|
|
6
|
+
import { DialogFooter } from './DialogFooter';
|
|
7
|
+
import { DialogHeading } from './DialogHeading';
|
|
6
8
|
declare const StyledDialog: import("@stitches/react/types/styled-component").StyledComponent<React.FC<import("@radix-ui/react-dialog").DialogProps>, {}, {
|
|
7
9
|
sm: string;
|
|
8
10
|
md: string;
|
|
@@ -327,6 +329,8 @@ export declare const Dialog: React.FC<DialogProps> & {
|
|
|
327
329
|
Background: typeof DialogBackground;
|
|
328
330
|
Close: typeof DialogClose;
|
|
329
331
|
Content: typeof DialogContent;
|
|
332
|
+
Heading: typeof DialogHeading;
|
|
333
|
+
Footer: typeof DialogFooter;
|
|
330
334
|
Description: typeof Description;
|
|
331
335
|
Title: typeof Title;
|
|
332
336
|
Trigger: typeof Trigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Root as
|
|
1
|
+
import{Root as i,Description as t,Title as e,Trigger as m}from"@radix-ui/react-dialog";import*as a from"react";import{styled as g}from"../../stitches.js";import{DialogBackground as l}from"./DialogBackground.js";import{DialogClose as n}from"./DialogClose.js";import{DialogContent as p}from"./DialogContent.js";import{DialogFooter as f}from"./DialogFooter.js";import{DialogHeading as s}from"./DialogHeading.js";const D=g(i,{}),o=r=>a.createElement(D,{...r});o.Background=l,o.Close=n,o.Content=p,o.Heading=s,o.Footer=f,o.Description=t,o.Title=e,o.Trigger=m,o.displayName="Dialog";export{o as Dialog};
|
|
2
2
|
//# sourceMappingURL=Dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\n\nconst StyledDialog = styled(Root, {})\n\ntype DialogProps = React.ComponentProps<typeof StyledDialog>\n\nexport const Dialog: React.FC<DialogProps> & {\n Background: typeof DialogBackground\n Close: typeof DialogClose\n Content: typeof DialogContent\n Description: typeof Description\n Title: typeof Title\n Trigger: typeof Trigger\n} = (props) => <StyledDialog {...props} />\n\nDialog.Background = DialogBackground\nDialog.Close = DialogClose\nDialog.Content = DialogContent\nDialog.Description = Description\nDialog.Title = Title\nDialog.Trigger = Trigger\n\nDialog.displayName = 'Dialog'\n"],"names":["StyledDialog","styled","Root","Dialog","props","React","DialogBackground","DialogClose","DialogContent","Description","Title","Trigger"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.js","sources":["../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import { Description, Root, Title, Trigger } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { DialogBackground } from './DialogBackground'\nimport { DialogClose } from './DialogClose'\nimport { DialogContent } from './DialogContent'\nimport { DialogFooter } from './DialogFooter'\nimport { DialogHeading } from './DialogHeading'\n\nconst StyledDialog = styled(Root, {})\n\ntype DialogProps = React.ComponentProps<typeof StyledDialog>\n\nexport const Dialog: React.FC<DialogProps> & {\n Background: typeof DialogBackground\n Close: typeof DialogClose\n Content: typeof DialogContent\n Heading: typeof DialogHeading\n Footer: typeof DialogFooter\n Description: typeof Description\n Title: typeof Title\n Trigger: typeof Trigger\n} = (props) => <StyledDialog {...props} />\n\nDialog.Background = DialogBackground\nDialog.Close = DialogClose\nDialog.Content = DialogContent\nDialog.Heading = DialogHeading\nDialog.Footer = DialogFooter\n\nDialog.Description = Description\nDialog.Title = Title\nDialog.Trigger = Trigger\n\nDialog.displayName = 'Dialog'\n"],"names":["StyledDialog","styled","Root","Dialog","props","React","DialogBackground","DialogClose","DialogContent","DialogHeading","DialogFooter","Description","Title","Trigger"],"mappings":"yZAWA,MAAMA,EAAeC,EAAOC,EAAM,CAAE,CAAA,EAIvBC,EASRC,GAAUC,EAAA,cAACL,EAAA,CAAc,GAAGI,EAAO,EAExCD,EAAO,WAAaG,EACpBH,EAAO,MAAQI,EACfJ,EAAO,QAAUK,EACjBL,EAAO,QAAUM,EACjBN,EAAO,OAASO,EAEhBP,EAAO,YAAcQ,EACrBR,EAAO,MAAQS,EACfT,EAAO,QAAUU,EAEjBV,EAAO,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Close as
|
|
1
|
+
import{Close as h}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as g,Close as w}from"@radix-ui/react-dialog";import*as o from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{fadeIn as $,fadeOut as v}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as C}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",top:0,right:0,bottom:0,left:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${v} 550ms ease-out`}}}),E=l(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...u})=>o.createElement(g,null,o.createElement(y,{id:d},o.Children.map(a,t=>(t==null?void 0:t.type)===s&&t),o.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:t=>{const i=t.target;(i==null?void 0:i.id)!==d&&t.preventDefault()},...u},c&&o.createElement(z,{as:w,css:{position:"absolute",right:"$4",top:"$4",size:"$5"},label:f,hasTooltip:!1,size:"md",theme:"neutral"},o.createElement(C,{is:h})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));export{O as DialogContent};
|
|
2
2
|
//# sourceMappingURL=DialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n overflowY: 'auto',\n zIndex: DIALOG_Z_INDEX,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n maxHeight: '90vh',\n overflowY: 'auto',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n zIndex: DIALOG_Z_INDEX,\n '&:focus': {\n outline: 'none'\n },\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n xs: { width: '380px' },\n sm: { width: '480px' },\n md: { width: '600px' },\n lg: { width: '800px' },\n xl: { width: '1100px' }\n }\n }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$4', top: '$4' }}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ioBAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,
|
|
1
|
+
{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst contentOnScreen = 'translate3d(-50%, -50%, 0)'\nconst contentOffScreen = 'translate3d(-50%, 50vh, 0)'\nconst modalOverlayId = 'modal_overlay'\n\nconst slideIn = keyframes({\n '0%': { transform: contentOffScreen },\n '100%': { transform: contentOnScreen }\n})\nconst slideOut = keyframes({\n '0%': { transform: contentOnScreen },\n '100%': { transform: contentOffScreen }\n})\n\nconst StyledDialogOverlay = styled(Overlay, {\n backgroundColor: '$alpha600',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'fixed',\n overflowY: 'auto',\n zIndex: DIALOG_Z_INDEX,\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${fadeIn} 250ms ease-out`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} 550ms ease-out`\n }\n }\n})\n\nconst StyledDialogContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$3',\n boxSizing: 'border-box',\n left: '50%',\n maxWidth: '90vw',\n maxHeight: '90vh',\n overflowY: 'auto',\n p: '$5',\n position: 'fixed',\n top: '50%',\n transform: contentOnScreen,\n zIndex: DIALOG_Z_INDEX,\n '&:focus': {\n outline: 'none'\n },\n '@allowMotion': {\n '&[data-state=\"open\"]': {\n animation: `${slideIn} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n },\n '&[data-state=\"closed\"]': {\n animation: `${slideOut} 550ms cubic-bezier(0.22, 1, 0.36, 1)`\n }\n },\n variants: {\n size: {\n xs: { width: '380px' },\n sm: { width: '480px' },\n md: { width: '600px' },\n lg: { width: '800px' },\n xl: { width: '1100px' }\n }\n }\n})\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n closeDialogText?: string\n showCloseButton?: boolean\n}\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n size = 'sm',\n children,\n closeDialogText = 'Close dialog',\n showCloseButton = true,\n ...remainingProps\n}) => (\n <Portal>\n <StyledDialogOverlay id={modalOverlayId}>\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type === DialogBackground && child\n )}\n <StyledDialogContent\n size={size}\n aria-label=\"Dialog\"\n onPointerDownOutside={(event) => {\n const element = event.target as HTMLElement\n if (element?.id !== modalOverlayId) {\n event.preventDefault()\n }\n }}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$4', top: '$4', size: '$5' }}\n label={closeDialogText}\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {React.Children.map(\n children,\n (child?: React.ReactElement) =>\n child?.type !== DialogBackground && child\n )}\n </StyledDialogContent>\n </StyledDialogOverlay>\n </Portal>\n)\n"],"names":["contentOnScreen","contentOffScreen","modalOverlayId","slideIn","keyframes","slideOut","StyledDialogOverlay","styled","Overlay","DIALOG_Z_INDEX","fadeIn","fadeOut","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"ioBAYA,MAAMA,EAAkB,6BAClBC,EAAmB,6BACnBC,EAAiB,gBAEjBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAWH,CAAiB,EACpC,OAAQ,CAAE,UAAWD,CAAgB,CACvC,CAAC,EACKK,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAWJ,CAAgB,EACnC,OAAQ,CAAE,UAAWC,CAAiB,CACxC,CAAC,EAEKK,EAAsBC,EAAOC,EAAS,CAC1C,gBAAiB,YACjB,IAAK,EACL,MAAO,EACP,OAAQ,EACR,KAAM,EACN,SAAU,QACV,UAAW,OACX,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEKC,EAAsBL,EAAOM,EAAS,CAC1C,GAAI,QACJ,aAAc,KACd,UAAW,KACX,UAAW,aACX,KAAM,MACN,SAAU,OACV,UAAW,OACX,UAAW,OACX,EAAG,KACH,SAAU,QACV,IAAK,MACL,UAAWb,EACX,OAAQS,EACR,UAAW,CACT,QAAS,MACX,EACA,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGN,wCAChB,EACA,yBAA0B,CACxB,UAAW,GAAGE,wCAChB,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,OAAQ,EACrB,GAAI,CAAE,MAAO,QAAS,CACxB,CACF,CACF,CAAC,EAOYS,EAA8C,CAAC,CAC1D,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,MACfC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACd,EAAA,CAAoB,GAAIJ,GACtBkB,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAA,OAAAA,EAAS,MAAOvB,GAClBsB,EAAM,eAEV,CAAA,EACC,GAAGL,CAEHD,EAAAA,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,KAAM,KAAM,IAAK,EAChE,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,SAAA,EAENG,EAAA,cAACQ,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogFooter.js","sources":["../../../src/components/dialog/DialogFooter.tsx"],"sourcesContent":["import { Close } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\n\nexport const DialogFooter = ({\n css,\n ...props\n}: React.ComponentProps<typeof Flex>) => (\n <Flex justify=\"end\" css={{ pt: '$4', ...css }} {...props} />\n)\n"],"names":["DialogFooter","css","props","React","Flex"],"mappings":"+DAKa,MAAAA,EAAe,CAAC,CAC3B,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAK,QAAQ,MAAM,IAAK,CAAE,GAAI,KAAM,GAAGH,CAAI,EAAI,GAAGC,CAAO,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as e from"react";import{Heading as i}from"../heading/Heading.js";const m=({css:o,...t})=>e.createElement(i,{size:"sm",css:{borderBottom:"1px solid $tonal100",fontFamily:"$body",p:"0 $5 $5 $5",mb:"$5",mx:"-$5",boxSizing:"content-box",...o},...t});export{m as DialogHeading};
|
|
2
|
+
//# sourceMappingURL=DialogHeading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DialogHeading.js","sources":["../../../src/components/dialog/DialogHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Heading } from '../heading'\n\nexport const DialogHeading = ({\n css,\n ...props\n}: React.ComponentProps<typeof Heading>) => (\n <Heading\n size=\"sm\"\n css={{\n borderBottom: '1px solid $tonal100',\n fontFamily: '$body',\n p: `0 $5 $5 $5`,\n mb: '$5',\n mx: '-$5',\n boxSizing: 'content-box',\n ...css\n }}\n {...props}\n />\n)\n"],"names":["DialogHeading","css","props","React","Heading"],"mappings":"wEAIa,MAAAA,EAAgB,CAAC,CAC5B,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,KAAK,KACL,IAAK,CACH,aAAc,sBACd,WAAY,QACZ,EAAG,aACH,GAAI,KACJ,GAAI,MACJ,UAAW,cACX,GAAGH,CACL,EACC,GAAGC,CACN,CAAA"}
|