npm - @atom-learning/components - Versions diffs - 5.11.0 → 5.12.1 - Mend

@atom-learning/components 5.11.0 → 5.12.1

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.

Files changed (312) hide show

package/dist/components/section-message/SectionMessage.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ declare const StyledSectionMessage: import("@atom-learning/stitches-react/types/
 } & {
     Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => React.JSX.Element;
 }, {
-    theme?: "info" | "success" | "warning" | "neutral" | "error" | undefined;
+    theme?: "info" | "success" | "warning" | "error" | "neutral" | undefined;
     hasIcon?: boolean | "true" | undefined;
     hasDismiss?: boolean | "true" | undefined;
 }, {

package/dist/components/section-message/SectionMessage.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{TooltipProvider as c}from"@radix-ui/react-tooltip";import o from"react";import{styled as m}from"../../stitches.js";import{Dismissible as a}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as $}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as d}from"./SectionMessageLayout.js";import{SectionMessageTitle as D}from"./SectionMessageTitle.js";const b=m(a,{position:"relative",borderRadius:"$0",display:"flex",minHeight:"$5",p:"$4",border:"1px solid white",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$warningText"},error:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$grey100",color:"$grey1000"},info:{bg:"$infoLight",color:"$infoDark"}},hasIcon:{true:{pl:"$6"}},hasDismiss:{true:{pr:"$7"}}}}),M=({children:t,...s})=>{const{theme:i,hasIcon:r,hasDismiss:n}=p();return o.createElement(b,{...s,theme:i,hasIcon:r,hasDismiss:n},o.createElement(g,{gap:3,justify:"space-between",css:{flexGrow:1}},t))},e=({theme:t="info",...s})=>o.createElement(c,null,o.createElement(l,{theme:t},o.createElement(M,{...s})));e.Title=D,e.Description=f,e.Icon=$,e.Dismiss=h,e.Content=u,e.Actions=d;export{e as SectionMessage};
+import{TooltipProvider as c}from"@radix-ui/react-tooltip";import o from"react";import{styled as m}from"../../stitches.js";import{Dismissible as a}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as $}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as d}from"./SectionMessageLayout.js";import{SectionMessageTitle as D}from"./SectionMessageTitle.js";const b=m(a,{position:"relative",borderRadius:"$1",display:"flex",minHeight:"$5",p:"$4",border:"1px solid white",variants:{theme:{success:{bg:"$successLight",color:"$successDark"},warning:{bg:"$warningLight",color:"$warningText"},error:{bg:"$dangerLight",color:"$dangerDark"},neutral:{bg:"$grey100",color:"$grey1000"},info:{bg:"$infoLight",color:"$infoDark"}},hasIcon:{true:{pl:"$6"}},hasDismiss:{true:{pr:"$7"}}}}),M=({children:t,...s})=>{const{theme:i,hasIcon:r,hasDismiss:n}=p();return o.createElement(b,{...s,theme:i,hasIcon:r,hasDismiss:n},o.createElement(g,{gap:3,justify:"space-between",css:{flexGrow:1}},t))},e=({theme:t="info",...s})=>o.createElement(c,null,o.createElement(l,{theme:t},o.createElement(M,{...s})));e.Title=D,e.Description=f,e.Icon=$,e.Dismiss=h,e.Content=u,e.Actions=d;export{e as SectionMessage};
 //# sourceMappingURL=SectionMessage.js.map

package/dist/components/section-message/SectionMessage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n SectionMessageProvider,\n useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n SectionMessageActions,\n SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n position: 'relative',\n borderRadius: '$0',\n display: 'flex',\n minHeight: '$5',\n p: '$4',\n border: '1px solid white',\n variants: {\n theme: {\n success: {\n bg: '$successLight',\n color: '$successDark'\n },\n warning: {\n bg: '$warningLight',\n color: '$warningText'\n },\n error: {\n bg: '$dangerLight',\n color: '$dangerDark'\n },\n neutral: {\n bg: '$grey100',\n color: '$grey1000'\n },\n info: {\n bg: '$infoLight',\n color: '$infoDark'\n }\n },\n hasIcon: {\n true: {\n pl: '$6'\n }\n },\n hasDismiss: {\n true: {\n pr: '$7'\n }\n }\n }\n})\n\nconst SectionMessageRoot = ({\n children,\n ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n return (\n <StyledSectionMessage\n {...rest}\n theme={theme}\n hasIcon={hasIcon}\n hasDismiss={hasDismiss}\n >\n <Flex gap={3} justify=\"space-between\" css={{ flexGrow: 1 }}>\n {children}\n </Flex>\n </StyledSectionMessage>\n )\n}\n\nexport type SectionMessageTheme =\n \| 'success'\n \| 'warning'\n \| 'error'\n \| 'neutral'\n \| 'info'\n\nexport interface SectionMessageProps\n extends React.ComponentProps<typeof SectionMessageRoot> {\n theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n theme = 'info',\n ...rest\n}: SectionMessageProps): JSX.Element => {\n return (\n <TooltipProvider>\n <SectionMessageProvider theme={theme}>\n <SectionMessageRoot {...rest} />\n </SectionMessageProvider>\n </TooltipProvider>\n )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"gqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,aACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAEZE,EAAAA,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,IAAK,CAAE,SAAU,CAAE,CACtDP,EAAAA,CACH,CACF,CAEJ,EAcaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
1	+ {"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n SectionMessageProvider,\n useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n SectionMessageActions,\n SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n position: 'relative',\n borderRadius: '$1',\n display: 'flex',\n minHeight: '$5',\n p: '$4',\n border: '1px solid white',\n variants: {\n theme: {\n success: {\n bg: '$successLight',\n color: '$successDark'\n },\n warning: {\n bg: '$warningLight',\n color: '$warningText'\n },\n error: {\n bg: '$dangerLight',\n color: '$dangerDark'\n },\n neutral: {\n bg: '$grey100',\n color: '$grey1000'\n },\n info: {\n bg: '$infoLight',\n color: '$infoDark'\n }\n },\n hasIcon: {\n true: {\n pl: '$6'\n }\n },\n hasDismiss: {\n true: {\n pr: '$7'\n }\n }\n }\n})\n\nconst SectionMessageRoot = ({\n children,\n ...rest\n}: React.ComponentProps<typeof StyledSectionMessage>): JSX.Element => {\n const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n return (\n <StyledSectionMessage\n {...rest}\n theme={theme}\n hasIcon={hasIcon}\n hasDismiss={hasDismiss}\n >\n <Flex gap={3} justify=\"space-between\" css={{ flexGrow: 1 }}>\n {children}\n </Flex>\n </StyledSectionMessage>\n )\n}\n\nexport type SectionMessageTheme =\n \| 'success'\n \| 'warning'\n \| 'error'\n \| 'neutral'\n \| 'info'\n\nexport interface SectionMessageProps\n extends React.ComponentProps<typeof SectionMessageRoot> {\n theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n theme = 'info',\n ...rest\n}: SectionMessageProps): JSX.Element => {\n return (\n <TooltipProvider>\n <SectionMessageProvider theme={theme}>\n <SectionMessageRoot {...rest} />\n </SectionMessageProvider>\n </TooltipProvider>\n )\n}\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"gqBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,SAAU,WACV,aAAc,KACd,QAAS,OACT,UAAW,KACX,EAAG,KACH,OAAQ,kBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,QAAS,CACP,GAAI,gBACJ,MAAO,cACT,EACA,MAAO,CACL,GAAI,eACJ,MAAO,aACT,EACA,QAAS,CACP,GAAI,WACJ,MAAO,WACT,EACA,KAAM,CACJ,GAAI,aACJ,MAAO,WACT,CACF,EACA,QAAS,CACP,KAAM,CACJ,GAAI,IACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,GAAI,IACN,CACF,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,KACGC,CACL,IAAsE,CACpE,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAEZE,EAAAA,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,IAAK,CAAE,SAAU,CAAE,CACtDP,EAAAA,CACH,CACF,CAEJ,EAcaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,UACLD,CACL,IAEIK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,GAC7BI,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAAA,CAAM,CAChC,CACF,EAIJO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}

package/dist/components/section-message/SectionMessageLayout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import o from"react";import{Box as s}from"../box/Box.js";import{Flex as r}from"../flex/Flex.js";const a=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,paddingTop:"$0",["& > *:not(:last-child)"]:{mb:"$2"},...e},...t}),n=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,...e}},o.createElement(r,{wrap:"wrap",gap:3,...t}));export{n as SectionMessageActions,a as SectionMessageContent};
+import o from"react";import{Box as s}from"../box/Box.js";import{Flex as r}from"../flex/Flex.js";const a=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,paddingTop:"$0","& > *:not(:last-child)":{mb:"$2"},...e},...t}),n=({css:e,...t})=>o.createElement(s,{css:{maxWidth:"100%",flexShrink:0,...e}},o.createElement(r,{wrap:"wrap",gap:3,...t}));export{n as SectionMessageActions,a as SectionMessageContent};
 //# sourceMappingURL=SectionMessageLayout.js.map

package/dist/components/section-message/SectionMessageLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Box } from '../box'\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n css,\n ...rest\n}: React.ComponentProps<typeof Box>): JSX.Element => (\n <Box\n css={{\n maxWidth: '100%',\n flexShrink: 0,\n paddingTop: '$0',\n ['& > *:not(:last-child)']: { mb: '$2' },\n ...css\n }}\n {...rest}\n />\n)\n\nexport const SectionMessageActions = ({\n css,\n ...rest\n}: React.ComponentProps<typeof Flex>): JSX.Element => (\n <Box css={{ maxWidth: '100%', flexShrink: 0, ...css }}>\n <Flex wrap=\"wrap\" gap={3} {...rest} />\n </Box>\n)\n"],"names":["SectionMessageContent","css","rest","React","Box","SectionMessageActions","Flex"],"mappings":"~~gGAKa~~,~~MAAAA~~,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,SAAU,OACV,WAAY,EACZ,WAAY,KACZ,~~CAAC~~,~~0BAA2B,~~CAAE,GAAI,IAAK,~~EACvC~~,GAAGH,CACL,EACC,GAAGC,CACN,CAAA,EAGWG,EAAwB,CAAC,CACpC,IAAAJ,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,OAAQ,WAAY,EAAG,GAAGH,CAAI,GAClDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,EAAM,CACtC"}
1	+ {"version":3,"file":"SectionMessageLayout.js","sources":["../../../src/components/section-message/SectionMessageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Box } from '../box'\nimport { Flex } from '../flex'\n\nexport const SectionMessageContent = ({\n css,\n ...rest\n}: React.ComponentProps<typeof Box>): JSX.Element => (\n <Box\n css={{\n maxWidth: '100%',\n flexShrink: 0,\n paddingTop: '$0',\n '& > *:not(:last-child)': { mb: '$2' },\n ...css\n }}\n {...rest}\n />\n)\n\nexport const SectionMessageActions = ({\n css,\n ...rest\n}: React.ComponentProps<typeof Flex>): JSX.Element => (\n <Box css={{ maxWidth: '100%', flexShrink: 0, ...css }}>\n <Flex wrap=\"wrap\" gap={3} {...rest} />\n </Box>\n)\n"],"names":["SectionMessageContent","css","rest","React","Box","SectionMessageActions","Flex"],"mappings":"gGAKO,MAAMA,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,SAAU,OACV,WAAY,EACZ,WAAY,KACZ,yBAA0B,CAAE,GAAI,IAAK,EACrC,GAAGH,CACL,EACC,GAAGC,CACN,CAAA,EAGWG,EAAwB,CAAC,CACpC,IAAAJ,KACGC,CACL,IACEC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,SAAU,OAAQ,WAAY,EAAG,GAAGH,CAAI,GAClDE,EAAA,cAACG,EAAA,CAAK,KAAK,OAAO,IAAK,EAAI,GAAGJ,EAAM,CACtC"}

package/dist/components/segmented-control/SegmentedControlItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),t=e.forwardRef(({children:r,...o},a)=>{const{size:i,theme:n}=e.useContext(l);return e.createElement(m,{...o,theme:n,size:i,ref:a},r)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
+import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]":{"&:hover":{bg:"$primary300"}},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]":{"&:hover":{bg:"$marsh300"}},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),t=e.forwardRef(({children:r,...o},a)=>{const{size:i,theme:n}=e.useContext(l);return e.createElement(m,{...o,theme:n,size:i,ref:a},r)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
 //# sourceMappingURL=SegmentedControlItem.js.map

package/dist/components/segmented-control/SegmentedControlItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n position: 'relative',\n bg: 'transparent',\n borderRadius: '$2',\n p: 0,\n zIndex: 2,\n minWidth: '140px',\n border: '2px solid transparent',\n variants: {\n theme: {\n primary: {\n '&[data-state=inactive]:hover': {\n bg: '$primary300'\n },\n '&:focus-visible': {\n borderColor: '$primary800'\n }\n },\n marsh: {\n '&[data-state=inactive]:hover': {\n bg: '$marsh300'\n },\n '&:focus-visible': {\n borderColor: '$marsh800'\n }\n }\n },\n size: {\n sm: {\n flex: 'unset',\n p: '$4 $24',\n gap: '$3'\n },\n md: {\n flex: 1,\n p: '$24 $4',\n gap: '$4'\n },\n lg: {\n flex: 1,\n p: '$24 $4',\n gap: '$4'\n }\n }\n },\n '& > div': { display: 'none' },\n '& > span': {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n },\n '&[data-state=active]': {\n boxShadow: 'none',\n border: '2px solid transparent',\n fontWeight: 600,\n color: '$textBold',\n '&:focus-visible': {\n boxShadow: 'none',\n borderColor: '$primary800'\n }\n },\n '&[data-state=inactive]': {\n fontWeight: 400,\n color: '$grey900'\n },\n '&[disabled]': {\n opacity: 0.3\n }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP~~,+BAAgC~~,~~CAC9B~~,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL~~,+BAAgC~~,~~CAC9B~~,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,~~CACnDF~~,~~EAAAA~~,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}
1	+ {"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n position: 'relative',\n bg: 'transparent',\n borderRadius: '$2',\n p: 0,\n zIndex: 2,\n minWidth: '140px',\n border: '2px solid transparent',\n variants: {\n theme: {\n primary: {\n '&[data-state=inactive]': {\n '&:hover': {\n bg: '$primary300'\n }\n },\n '&:focus-visible': {\n borderColor: '$primary800'\n }\n },\n marsh: {\n '&[data-state=inactive]': {\n '&:hover': {\n bg: '$marsh300'\n }\n },\n '&:focus-visible': {\n borderColor: '$marsh800'\n }\n }\n },\n size: {\n sm: {\n flex: 'unset',\n p: '$4 $24',\n gap: '$3'\n },\n md: {\n flex: 1,\n p: '$24 $4',\n gap: '$4'\n },\n lg: {\n flex: 1,\n p: '$24 $4',\n gap: '$4'\n }\n }\n },\n '& > div': { display: 'none' },\n '& > span': {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center'\n },\n '&[data-state=active]': {\n boxShadow: 'none',\n border: '2px solid transparent',\n fontWeight: 600,\n color: '$textBold',\n '&:focus-visible': {\n boxShadow: 'none',\n borderColor: '$primary800'\n }\n },\n '&[data-state=inactive]': {\n fontWeight: 400,\n color: '$grey900'\n },\n '&[disabled]': {\n opacity: 0.3\n }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n const { size, theme } = React.useContext(SegmentedControlContext)\n\n return (\n <StyledItem {...props} theme={theme} size={size} ref={ref}>\n {children}\n </StyledItem>\n )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,yBAA0B,CACxB,UAAW,CACT,GAAI,aACN,CACF,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,yBAA0B,CACxB,UAAW,CACT,GAAI,WACN,CACF,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CAAAA,EACnDF,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}

package/dist/components/segmented-control/SegmentedControlItemList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as b}from"./SegmentedControlContext.js";const C=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),E=l(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),w=s=>{const{theme:d,defaultValue:c,value:m}=t.useContext(b),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[u,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:d,defaultValue:c,...s},t.createElement(E,{css:{...u},interacted:h}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
+import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as b}from"./SegmentedControlContext.js";const C=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),E=l(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 300ms ease"},false:{transition:"none"}}}}),w=s=>{const{theme:d,defaultValue:c,value:m}=t.useContext(b),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[u,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:d,defaultValue:c,...s},t.createElement(E,{css:{...u},interacted:h}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import ~~invariant from 'invariant'\nimport~~ * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n position: 'relative',\n p: '$1',\n borderRadius: '$3',\n overflow: 'hidden',\n variants: {\n theme: {\n primary: { bg: '$primary200' },\n marsh: { bg: '$marsh200' }\n }\n },\n '& > div[role=\"tablist\"]': {\n position: 'relative'\n },\n '& > button': {\n zIndex: 2\n }\n})\n\nconst SelectionIndicator = styled(Box, {\n content: '',\n position: 'absolute',\n bg: 'white',\n borderRadius: '$2',\n variants: {\n interacted: {\n true: {\n transition: 'all ~~0.3s~~ ease'\n },\n false: {\n transition: 'none'\n }\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement \| null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator\n css={{\n ...indicatorStyles\n }}\n interacted={hasInteracted}\n />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"~~qNASA~~,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,~~eACd~~,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBACrCJ,EAAAA,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
1	+ {"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n position: 'relative',\n p: '$1',\n borderRadius: '$3',\n overflow: 'hidden',\n variants: {\n theme: {\n primary: { bg: '$primary200' },\n marsh: { bg: '$marsh200' }\n }\n },\n '& > div[role=\"tablist\"]': {\n position: 'relative'\n },\n '& > button': {\n zIndex: 2\n }\n})\n\nconst SelectionIndicator = styled(Box, {\n content: '',\n position: 'absolute',\n bg: 'white',\n borderRadius: '$2',\n variants: {\n interacted: {\n true: {\n transition: 'all 300ms ease'\n },\n false: {\n transition: 'none'\n }\n }\n }\n})\n\nexport const SegmentedControlItemList = (\n props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n const { theme, defaultValue, value } = React.useContext(\n SegmentedControlContext\n )\n\n const tabsRef = React.useRef<(HTMLElement \| null)[]>([])\n\n const selectedIndex = React.Children.toArray(props.children).findIndex(\n (child) => (child as React.ReactElement)?.props.value === value\n )\n\n const [indicatorStyles, setIndicatorStyles] = React.useState({\n left: 0,\n height: 0,\n width: 0\n })\n const [hasInteracted, setHasInteracted] = React.useState(false)\n\n const updateIndicatorPosition = React.useCallback(() => {\n const currentTab = tabsRef.current[selectedIndex]\n if (!currentTab) return\n\n const { width, height } = currentTab.getBoundingClientRect()\n setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n }, [selectedIndex])\n\n React.useEffect(() => {\n const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n const currentTabs = tabsRef.current\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.observe(tab)\n })\n\n return () => {\n currentTabs.forEach((tab) => {\n if (tab) resizeObserver.unobserve(tab)\n })\n resizeObserver.disconnect()\n }\n }, [selectedIndex, updateIndicatorPosition])\n\n React.useEffect(() => {\n window.addEventListener('resize', updateIndicatorPosition)\n return () => {\n window.removeEventListener('resize', updateIndicatorPosition)\n }\n }, [updateIndicatorPosition])\n\n React.useEffect(() => {\n updateIndicatorPosition()\n }, [selectedIndex, updateIndicatorPosition])\n\n return (\n <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n <SelectionIndicator\n css={{\n ...indicatorStyles\n }}\n interacted={hasInteracted}\n />\n {React.Children.map(props.children, (child, index) => {\n if (!React.isValidElement(child)) {\n throw new Error(\n `Child passed to SegmentedControlItemList is not a valid element`\n )\n }\n\n return React.cloneElement(\n child as React.ReactElement<\n React.ComponentProps<typeof SegmentedControlItem>\n >,\n {\n onClick: (e) => {\n setHasInteracted(true)\n if (child.props.onClick) child.props.onClick(e)\n },\n ref: (el) => (tabsRef.current[index] = el)\n }\n )\n })}\n </StyledTriggerList>\n )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,gBACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBACrCJ,EAAAA,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

package/dist/components/select/Select.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { Override } from '../../utilities/types';
 declare const StyledSelect: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"select", {
     size?: "sm" | "md" | "lg" | undefined;
     state?: "error" | undefined;
+    appearance?: "standard" | "modern" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/select/Select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as p,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as u}from"../../utilities/style/disabledStyle.js";const m=p("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $grey700",borderRadius:"$0",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary800",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":u,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),i=o.forwardRef(({placeholder:r,children:a,size:n="md",...e},d)=>{const t={size:n,ref:d,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(t.defaultValue=""),o.createElement(m,{...t},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),a)});i.displayName="Select";export{i as Select};
+import*as o from"react";import{styled as l,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{encodeBackgroundIcon as u}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const g=l("select",{appearance:"none",backgroundImage:u(s.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",borderRadius:"$1",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,width:"100%","&:hover":{cursor:"pointer"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{}},appearance:{standard:{backgroundColor:"white",border:"1px solid $grey700","&:focus":{borderColor:"$primary800",outline:"none"}},modern:{backgroundColor:"$grey100",border:"none","&:focus":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{backgroundColor:"$dangerLight","&:focus":{outlineColor:"$danger"}}}]}),t=o.forwardRef(({placeholder:r,children:n,size:d="md",appearance:i="standard",...e},p)=>{const a={size:d,appearance:i,ref:p,...e};return[e.value,e.defaultValue].every(c=>c===void 0)&&(a.defaultValue=""),o.createElement(g,{...a},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});t.displayName="Select";export{t as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { ~~disabledStyle,~~ encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n appearance: 'none',\n ~~backgroundColor: 'white',\n~~ backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n ~~border: '1px solid $grey700',\n~~ borderRadius: '$0',\n color: '$grey1000',\n display: 'block',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n ~~transition: 'all 75ms ease-out',\n~~ width: '100%',\n '&:hover': {\n cursor: 'pointer'\n },\n '~~&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '~~&::-ms-expand': {\n display: 'none'\n },\n '&[disabled], > option[disabled]': ~~disabledStyle~~,\n variants: {\n size: {\n sm: {\n backgroundPosition: 'right $space$2 top 50%, 0 0',\n backgroundSize: '18px auto, 100%',\n fontSize: '$sm',\n height: '$3',\n pl: '$2',\n pr: '$5'\n },\n md: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$4',\n pl: '$3',\n pr: '$6'\n },\n lg: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$5',\n pl: '$3',\n pr: '$6'\n }\n },\n state: {\n error: {\n border: '1px solid $~~danger~~'\n }\n }\n }\n})\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // \| { id: string; 'aria-label'?: string }\n // \| { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n React.forwardRef(\n ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n const props = { size, ref, ...remainingProps }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","~~disabledStyle","~~Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"~~oZAMA~~,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,~~gBAAiB,QACjB,~~gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,~~OAAQ,qBACR,~~aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,~~WAAY,oBACZ,~~MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,~~UAAW~~,~~CACT~~,~~YAAa,cACb,~~QAAS,MACX,EACA,~~gBAAiB~~,~~CACf~~,QAAS,~~MACX~~,~~EACA~~,~~kCAAmCC~~,~~EACnC~~,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,~~CACL~~,OAAQ,~~mBACV~~,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,~~CAAC~~,~~CAAE~~,YAAAC,~~EAAa~~,SAAAC,~~EAAU~~,KAAAC,EAAO,~~QAASC~~,~~CAAe~~,~~EAAGC~~,~~IAAQ~~,~~CAClE~~,MAAMC,EAAQ,CAAE,~~KAAAH~~,EAAM,IAAAE,EAAK,GAAGD,CAAe,~~EAE7C~~,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,~~IAIrBN~~,EAAA,~~cAACN~~,EAAA,CAAc,GAAGY,~~CAAAA~~,~~EACfL~~,GACCD,EAAA,cAAC,~~UAAO~~,SAAQ,GAAC,OAAM,GAAC,MAAM,~~IAC3BC~~,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
1	+ {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n appearance: 'none',\n backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n borderRadius: '$1',\n color: '$grey1000',\n display: 'block',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n width: '100%',\n '&:hover': {\n cursor: 'pointer'\n },\n '&::-ms-expand': {\n display: 'none'\n },\n '&[disabled], > option[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n variants: {\n size: {\n sm: {\n backgroundPosition: 'right $space$2 top 50%, 0 0',\n backgroundSize: '18px auto, 100%',\n fontSize: '$sm',\n height: '$3',\n pl: '$2',\n pr: '$5'\n },\n md: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$4',\n pl: '$3',\n pr: '$6'\n },\n lg: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$5',\n pl: '$3',\n pr: '$6'\n }\n },\n state: {\n error: {}\n },\n appearance: {\n standard: {\n backgroundColor: 'white',\n border: '1px solid $grey700',\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n }\n },\n modern: {\n backgroundColor: '$grey100',\n border: 'none',\n '&:focus': {\n outline: '2px solid $blue800',\n outlineOffset: 1,\n zIndex: 1\n }\n }\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n css: { borderColor: '$danger' }\n },\n {\n state: 'error',\n appearance: 'modern',\n css: {\n backgroundColor: '$dangerLight',\n '&:focus': {\n outlineColor: '$danger'\n }\n }\n }\n ]\n})\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // \| { id: string; 'aria-label'?: string }\n // \| { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n React.forwardRef(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n const props = { size, appearance, ref, ...remainingProps }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"6UAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmC,CACjC,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACT,CAAA,EACA,WAAY,CACV,SAAU,CACR,gBAAiB,QACjB,OAAQ,qBACR,UAAW,CACT,YAAa,cACb,QAAS,MACX,CACF,EACA,OAAQ,CACN,gBAAiB,WACjB,OAAQ,OACR,UAAW,CACT,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,gBAAiB,eACjB,UAAW,CACT,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,cACVC,CACL,EACAC,IACG,CACH,MAAMC,EAAQ,CAAE,KAAAJ,EAAM,WAAAC,EAAY,IAAAE,EAAK,GAAGD,CAAe,EAEzD,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACL,EAAA,CAAc,GAAGY,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAO,CAAA,SAAQ,GAAC,OAAM,GAAC,MAAM,EAC3BC,EAAAA,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}

package/dist/components/select-field/SelectField.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SelectProps } from '../../components/select';
 type SelectFieldProps = SelectProps & FieldElementWrapperProps;
 export declare const SelectField: {
-    ({ css, hideLabel, children, name, label, validation, prompt, description, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    ({ css, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/select-field/SelectField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as t from"react";import{useFormContext as u}from"react-hook-form";import{FieldWrapper as F}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{Select as h}from"../select/Select.js";const l=({css:m=void 0,hideLabel:d,children:p,name:e,label:a,validation:r,prompt:n,description:s,...c})=>{const{register:o}=u(),{error:i}=b(e),f=r?o(r):o;return t.createElement(F,{css:m,description:s,error:i,fieldId:e,hideLabel:d,label:a,prompt:n,required:Boolean(r==null?void 0:r.required)},t.createElement(h,{name:e,id:e,...c,ref:f,...i&&{state:"error"}},p))};l.displayName="SelectField";export{l as SelectField};
+import*as p from"react";import{useFormContext as v}from"react-hook-form";import{FieldWrapper as S}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as h}from"../form/useFieldError.js";import{useFormCustomContext as x}from"../form/useFormCustomContext.js";import{Select as C}from"../select/Select.js";const l=({css:m=void 0,hideLabel:n,children:d,name:e,label:s,validation:r,prompt:c,description:u,appearance:f,...F})=>{const{register:o}=v(),t=x(),{error:i}=h(e),b=r?o(r):o,a=(t==null?void 0:t.appearance)||f;return p.createElement(S,{css:m,description:u,error:i,fieldId:e,hideLabel:n,label:s,prompt:c,required:Boolean(r==null?void 0:r.required),appearance:a},p.createElement(C,{name:e,id:e,appearance:a,...F,ref:b,...i&&{state:"error"}},d))};l.displayName="SelectField";export{l as SelectField};
 //# sourceMappingURL=SelectField.js.map

package/dist/components/select-field/SelectField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectField.js","sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n css = undefined,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n >\n <Select\n name={name}\n id={name}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","css","hideLabel","children","name","label","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Select"],"mappings":"~~sTAYO~~,~~MAAMA~~,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,~~EAC9B~~,CAAE,MAAAC,CAAM,EAAIC,~~EAAcT~~,CAAI,~~EAC9BU~~,~~EAAMR~~,~~EAAaI~~,~~EAASJ~~,CAAU,~~EAAII~~,~~EAEhD~~,~~OACEK~~,EAAA,cAACC,EAAA,CACC,~~IAAKf~~,EACL,YAAaO,EACb,~~MAAOI~~,EACP,~~QAASR~~,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,~~YAAAA~~,EAAY,QAAQ,~~CAEtCS~~,~~EAAAA~~,EAAA,cAACE,EAAA,CACC,~~KAAMb~~,EACN,GAAIA,~~EACH~~,~~GAAGK~~,EACJ,~~IAAKK~~,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,~~CAE9BT~~,~~EAAAA~~,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}
1	+ {"version":3,"file":"SelectField.js","sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n css = undefined,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <Select\n name={name}\n id={name}\n appearance={formAppearance}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","css","hideLabel","children","name","label","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Select"],"mappings":"6XAYa,MAAAA,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EAAAA,EACV,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAC9Ba,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaO,EACb,MAAOO,EACP,QAASX,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,KAAMjB,EACN,GAAIA,EACJ,WAAYc,EACX,GAAGR,EACJ,IAAKO,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAAA,EAE9BZ,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}

package/dist/components/side-bar/SideBar.d.ts CHANGED Viewed

@@ -374,7 +374,7 @@ type SideBarProps = React.ComponentProps<typeof Root> & {
     offset?: number | string;
 };
 export declare const SideBar: {
-    ({ className, children, type, offset, css, ...rest }: SideBarProps): React.JSX.Element;
+    ({ className, children, type, offset, css, style, ...rest }: SideBarProps): React.JSX.Element;
     Brand: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"a", {}, {
         sm: string;
         md: string;

package/dist/components/side-bar/SideBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import t from"react";import{useInteractOutside as f,useFocusWithin as v,useHover as y}from"react-aria";import{createTheme as B,styled as r}from"../../stitches.js";import{SideBarBrand as g,SideBarBrandLogo as S,SideBarBrandName as w,SideBarHeader as E,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as $}from"./SideBarContext.js";const n="5.5rem",D="16rem",F=B({colors:{background:"white",text:"$grey800",border:"$grey200"}}),I=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),W=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:D},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),k=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0s"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:l=F,children:p,type:a="expandable",offset:s="0px",css:c,...h})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);f({ref:d,onInteractOutside:()=>i(!1)});const{focusWithinProps:m}=v({onFocusWithin:()=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:x,isHovered:u}=y({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...m,...x,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement($.Provider,{value:{isExpanded:o}},t.createElement(I,{...h,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(W,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(k,{isVisible:!u&&!o}))))};e.Brand=g,e.BrandLogo=S,e.BrandName=w,e.Header=E,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
+import i from"react";import{useInteractOutside as v,useFocusWithin as y,useHover as B}from"react-aria";import{createTheme as g,styled as r}from"../../stitches.js";import{SideBarBrand as S,SideBarBrandLogo as w,SideBarBrandName as E,SideBarHeader as H,SideBarBody as N,SideBarFooter as k}from"./SideBarComponents.js";import{SideBarContext as F}from"./SideBarContext.js";const d="5.5rem",I="16rem",W=g({colors:{background:"white",text:"$grey800",border:"$grey200"}}),$=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:d}}}}),D=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:I},false:{width:d}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),L=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0ms"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:n=W,children:l,type:a="expandable",offset:p="0px",css:c,style:m,...h})=>{const[o,t]=i.useState(a==="static"),s=i.useRef(null);v({ref:s,onInteractOutside:()=>t(!1)});const{focusWithinProps:x}=y({onFocusWithin:()=>t(!0),onBlurWithin:()=>t(!1)}),{hoverProps:b,isHovered:u}=B({onHoverStart:()=>t(!0),onHoverEnd:()=>t(!1)}),f=a==="expandable"?{...x,...b,onTouchEnd:()=>t(!0),ref:s}:{};return i.createElement(F.Provider,{value:{isExpanded:o}},i.createElement($,{...h,style:{...m,"--offset":p},className:n,css:{height:"calc(100svh - var(--offset))",top:"var(--offset)",...c},type:a},i.createElement(D,{...f,isExpanded:o,type:a},l,a==="expandable"&&i.createElement(L,{isVisible:!u&&!o}))))};e.Brand=S,e.BrandLogo=w,e.BrandName=E,e.Header=H,e.Body=N,e.Footer=k,e.displayName="SideBar";export{e as SideBar};
 //# sourceMappingURL=SideBar.js.map

package/dist/components/side-bar/SideBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n colors: {\n background: 'white',\n text: '$grey800',\n border: '$grey200'\n }\n})\n\nconst Root = styled('div', {\n position: 'sticky',\n zIndex: 1,\n variants: {\n type: {\n static: {},\n expandable: { width: SIZE_COLLAPSED }\n }\n }\n})\n\nconst Content = styled('div', {\n bg: '$background',\n borderRight: '1px solid $border',\n boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n overflow: 'hidden',\n willChange: 'width',\n '@allowMotion': {\n transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n },\n variants: {\n type: {\n static: {},\n expandable: {}\n },\n isExpanded: {\n true: { width: SIZE_EXPANDED },\n false: { width: SIZE_COLLAPSED }\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n transition: 'all',\n variants: {\n isVisible: {\n true: { visibility: 'visible', transitionDelay: '0s' },\n false: { visibility: 'hidden', transitionDelay: '50ms' }\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n offset?: number \| string\n}\n\nexport const SideBar = ({\n className = light,\n children,\n type = 'expandable',\n offset = '0px',\n css,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: () => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Root\n {...rest}\n className={className}\n css={{ height: `calc(100svh - ${offset})`, top: offset, ...css }}\n type={type}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/*\n When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,SACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,~~CACR~~,~~EAAA~~,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,~~CAAA~~,~~EACR~~,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAiBF,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,~~IAAK~~,~~EACrD~~,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,~~SAASN~~,IAAS,QAAQ,~~EAC9DO~~,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,~~EACJd~~,IAAS,aACL,CACE,~~GAAGS~~,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,~~CAEN~~,~~EAAA~~,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,~~CAC3CE~~,~~EAAAA~~,EAAA,~~cAACb~~,EAAA,CACE,~~GAAGU~~,EACJ,~~UAAWL~~,EACX,IAAK,~~CAAE~~,OAAQ,~~iBAAiBG~~,~~KAAW~~,~~IAAKA~~,~~EAAQ~~,~~GAAGC~~,~~CAAI~~,~~EAC/D~~,~~KAAMF~~,~~GAENM,~~EAAA,~~cAACX~~,EAAA,CAAS,~~GAAGmB~~,EAAiB,WAAYV,EAAY,~~KAAMJ~~,~~CAAAA~~,~~EACzDD,~~EAKAC,IAAS,~~cACRM~~,EAAA,~~cAACV~~,EAAA,CAAe,UAAW,~~CAACgB~~,GAAa,CAACR,~~CAAAA~~,~~CAAY,~~CAE1D,CACF,CACF,CAEJ,~~EAEAP~~,EAAQ,~~MAAQmB~~,~~EAChBnB~~,EAAQ,~~UAAYoB~~,~~EACpBpB~~,EAAQ,~~UAAYqB~~,~~EACpBrB~~,EAAQ,~~OAASsB~~,~~EACjBtB~~,EAAQ,~~KAAOuB~~,~~EACfvB~~,EAAQ,~~OAASwB~~,~~EAEjBxB~~,EAAQ,YAAc"}
1	+ {"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n colors: {\n background: 'white',\n text: '$grey800',\n border: '$grey200'\n }\n})\n\nconst Root = styled('div', {\n position: 'sticky',\n zIndex: 1,\n variants: {\n type: {\n static: {},\n expandable: { width: SIZE_COLLAPSED }\n }\n }\n})\n\nconst Content = styled('div', {\n bg: '$background',\n borderRight: '1px solid $border',\n boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n overflow: 'hidden',\n willChange: 'width',\n '@allowMotion': {\n transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n },\n variants: {\n type: {\n static: {},\n expandable: {}\n },\n isExpanded: {\n true: { width: SIZE_EXPANDED },\n false: { width: SIZE_COLLAPSED }\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n bottom: 0,\n left: 0,\n position: 'absolute',\n right: 0,\n top: 0,\n transition: 'all',\n variants: {\n isVisible: {\n true: { visibility: 'visible', transitionDelay: '0ms' },\n false: { visibility: 'hidden', transitionDelay: '50ms' }\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n offset?: number \| string\n}\n\nexport const SideBar = ({\n className = light,\n children,\n type = 'expandable',\n offset = '0px',\n css,\n style,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: () => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Root\n {...rest}\n style={{ ...style, '--offset': offset }}\n className={className}\n css={{\n height: `calc(100svh - var(--offset))`,\n top: 'var(--offset)',\n ...css\n }}\n type={type}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/*\n When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","style","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,SACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CAAC,EACT,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAiBF,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,KAAM,EACtD,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,EACA,MAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASP,IAAS,QAAQ,EAC9DQ,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJf,IAAS,aACL,CACE,GAAGU,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAAA,EAC3CE,EAAA,cAACd,EAAA,CACE,GAAGW,EACJ,MAAO,CAAE,GAAGD,EAAO,WAAYF,CAAO,EACtC,UAAWH,EACX,IAAK,CACH,OAAQ,+BACR,IAAK,gBACL,GAAGI,CACL,EACA,KAAMF,CAENO,EAAAA,EAAA,cAACZ,EAAA,CAAS,GAAGoB,EAAiB,WAAYV,EAAY,KAAML,GACzDD,EAKAC,IAAS,cACRO,EAAA,cAACX,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACR,EAAY,CAE1D,CACF,CACF,CAEJ,EAEAR,EAAQ,MAAQoB,EAChBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,UAAYsB,EACpBtB,EAAQ,OAASuB,EACjBvB,EAAQ,KAAOwB,EACfxB,EAAQ,OAASyB,EAEjBzB,EAAQ,YAAc"}