@atom-learning/components 2.51.0 → 2.52.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -6
- package/dist/components/accordion/AccordionContent.js +1 -1
- package/dist/components/accordion/AccordionContent.js.map +1 -1
- package/dist/components/accordion/AccordionTrigger.js +1 -1
- package/dist/components/accordion/AccordionTrigger.js.map +1 -1
- package/dist/components/alert-dialog/AlertDialogContent.js +1 -1
- package/dist/components/alert-dialog/AlertDialogContent.js.map +1 -1
- package/dist/components/avatar/Avatar.js +1 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/carousel/Carousel.js +1 -1
- package/dist/components/carousel/Carousel.js.map +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js +1 -1
- package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map +1 -1
- package/dist/components/combobox/ComboboxInput.js +1 -1
- package/dist/components/combobox/ComboboxInput.js.map +1 -1
- package/dist/components/dialog/DialogContent.js +1 -1
- package/dist/components/dialog/DialogContent.js.map +1 -1
- package/dist/components/dropdown-menu/DropdownMenuContent.js +1 -1
- package/dist/components/dropdown-menu/DropdownMenuContent.js.map +1 -1
- package/dist/components/grid/Grid.js +1 -1
- package/dist/components/grid/Grid.js.map +1 -1
- package/dist/components/heading/Heading.js +1 -1
- package/dist/components/heading/Heading.js.map +1 -1
- package/dist/components/popover/PopoverContent.js +1 -1
- package/dist/components/popover/PopoverContent.js.map +1 -1
- package/dist/components/select/Select.js +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/sidedrawer/SidedrawerContent.js +1 -1
- package/dist/components/sidedrawer/SidedrawerContent.js.map +1 -1
- package/dist/components/sidedrawer/SidedrawerOverlay.js +1 -1
- package/dist/components/sidedrawer/SidedrawerOverlay.js.map +1 -1
- package/dist/components/slider/Slider.js +1 -1
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/stack/Stack.js +1 -1
- package/dist/components/stack/Stack.js.map +1 -1
- package/dist/components/tabs/TabsTrigger.js +1 -1
- package/dist/components/tabs/TabsTrigger.js.map +1 -1
- package/dist/components/text/Text.js +1 -1
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/tile/index.d.ts +1 -6
- package/dist/components/tile-interactive/TileInteractive.d.ts +1 -427
- package/dist/components/tile-interactive/TileInteractive.js +1 -1
- package/dist/components/tile-interactive/TileInteractive.js.map +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +1 -1
- package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- package/dist/components/tooltip/TooltipContent.js +1 -1
- package/dist/components/tooltip/TooltipContent.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/utilities/index.d.ts +1 -0
- package/dist/{components/tile/TileNoOverflowContainer.d.ts → utilities/no-overflow-wrapper/NoOverflowWrapper.d.ts} +6 -1
- package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js +2 -0
- package/dist/utilities/no-overflow-wrapper/NoOverflowWrapper.js.map +1 -0
- package/dist/utilities/no-overflow-wrapper/index.d.ts +1 -0
- package/package.json +1 -1
- package/dist/components/tile/TileNoOverflowContainer.js +0 -2
- package/dist/components/tile/TileNoOverflowContainer.js.map +0 -1
- package/dist/components/tile/index.js +0 -2
- package/dist/components/tile/index.js.map +0 -1
- package/dist/utilities/no-overflow-container/NoOverflowContainer.d.ts +0 -425
- package/dist/utilities/no-overflow-container/NoOverflowContainer.js +0 -2
- package/dist/utilities/no-overflow-container/NoOverflowContainer.js.map +0 -1
- package/dist/utilities/no-overflow-container/index.d.ts +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n display: 'flex',\n '& > *': {\n m: 0\n },\n variants: {\n direction: {\n row: {\n flexDirection: 'row'\n },\n 'row-reverse': {\n flexDirection: 'row-reverse'\n },\n column: {\n flexDirection: 'column'\n }\n },\n wrap: {\n wrap: {\n flexWrap: 'wrap'\n },\n 'no-wrap': {\n flexWrap: 'no-wrap'\n },\n 'wrap-reverse': {\n flexWrap: 'wrap-reverse'\n }\n },\n justify: {\n start: { justifyContent: 'flex-start' },\n center: { justifyContent: 'center' },\n end: { justifyContent: 'flex-end' },\n false: {}\n },\n align: {\n start: { alignItems: 'flex-start' },\n center: { alignItems: 'center' },\n end: { alignItems: 'flex-end' },\n false: {}\n },\n gap: {\n ...createThemeVariants('space', {\n mt: '-$key',\n ml: '-$key',\n '& > *': {\n mt: '$key',\n ml: '$key'\n }\n }),\n false: {}\n }\n }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n React.forwardRef(\n (\n {\n css,\n gap = 2,\n direction = 'row',\n wrap = 'wrap',\n justify = 'start',\n align,\n ...remainingProps\n },\n ref\n ) => {\n return (\n <CSSWrapper css={css}>\n <StyledStack\n ref={ref}\n direction={direction}\n gap={gap}\n wrap={wrap}\n justify={justify}\n align={\n typeof align === 'undefined' && direction !== 'column'\n ? 'center'\n : align\n }\n {...remainingProps}\n />\n </CSSWrapper>\n )\n }\n )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n display: 'flex',\n '& > *': {\n m: 0\n },\n variants: {\n direction: {\n row: {\n flexDirection: 'row'\n },\n 'row-reverse': {\n flexDirection: 'row-reverse'\n },\n column: {\n flexDirection: 'column'\n }\n },\n wrap: {\n wrap: {\n flexWrap: 'wrap'\n },\n 'no-wrap': {\n flexWrap: 'no-wrap'\n },\n 'wrap-reverse': {\n flexWrap: 'wrap-reverse'\n }\n },\n justify: {\n start: { justifyContent: 'flex-start' },\n center: { justifyContent: 'center' },\n end: { justifyContent: 'flex-end' },\n false: {}\n },\n align: {\n start: { alignItems: 'flex-start' },\n center: { alignItems: 'center' },\n end: { alignItems: 'flex-end' },\n false: {}\n },\n gap: {\n ...createThemeVariants('space', {\n mt: '-$key',\n ml: '-$key',\n '& > *': {\n mt: '$key',\n ml: '$key'\n }\n }),\n false: {}\n }\n }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n css?: CSS\n as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n React.forwardRef(\n (\n {\n css,\n gap = 2,\n direction = 'row',\n wrap = 'wrap',\n justify = 'start',\n align,\n ...remainingProps\n },\n ref\n ) => {\n return (\n <CSSWrapper css={css}>\n <StyledStack\n ref={ref}\n direction={direction}\n gap={gap}\n wrap={wrap}\n justify={justify}\n align={\n typeof align === 'undefined' && direction !== 'column'\n ? 'center'\n : align\n }\n {...remainingProps}\n />\n </CSSWrapper>\n )\n }\n )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"mXAMA,MAAMA,EAAcC,EAAO,MAAO,CAChC,QAAS,OACT,QAAS,CACP,EAAG,CACL,EACA,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,KACjB,EACA,cAAe,CACb,cAAe,aACjB,EACA,OAAQ,CACN,cAAe,QACjB,CACF,EACA,KAAM,CACJ,KAAM,CACJ,SAAU,MACZ,EACA,UAAW,CACT,SAAU,SACZ,EACA,eAAgB,CACd,SAAU,cACZ,CACF,EACA,QAAS,CACP,MAAO,CAAE,eAAgB,YAAa,EACtC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,UAAW,EAClC,MAAO,CACT,CAAA,EACA,MAAO,CACL,MAAO,CAAE,WAAY,YAAa,EAClC,OAAQ,CAAE,WAAY,QAAS,EAC/B,IAAK,CAAE,WAAY,UAAW,EAC9B,MAAO,CACT,CAAA,EACA,IAAK,CACH,GAAGC,EAAoB,QAAS,CAC9B,GAAI,QACJ,GAAI,QACJ,QAAS,CACP,GAAI,OACJ,GAAI,MACN,CACF,CAAC,EACD,MAAO,EACT,CACF,CACF,CAAC,EAOYC,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EAAY,MACZ,KAAAC,EAAO,OACP,QAAAC,EAAU,QACV,MAAAC,KACGC,CACL,EACAC,IAGER,EAAA,cAACS,EAAA,CAAW,IAAKR,GACfD,EAAA,cAACJ,EAAA,CACC,IAAKY,EACL,UAAWL,EACX,IAAKD,EACL,KAAME,EACN,QAASC,EACT,MACE,OAAOC,EAAU,KAAeH,IAAc,SAC1C,SACAG,EAEL,GAAGC,EACN,CACF,CAGN,EAEFR,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Trigger as c}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Text as l}from"../text/Text.js";const o=t("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),s=t(c,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...n()}}}),r=({children:i,...a})=>e.createElement(s,{...a},e.createElement(l,{size:"sm",as:"span"},i),e.createElement(o,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
|
|
1
|
+
import{Trigger as c}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Text as l}from"../text/Text.js";const o=t("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),s=t(c,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...n()}}}),r=({children:i,...a})=>e.createElement(s,{...a},e.createElement(l,{size:"sm",as:"span"},i),e.createElement(o,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
|
|
2
2
|
//# sourceMappingURL=TabsTrigger.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n position: 'absolute',\n inset: 0,\n height: 'calc(100% + 2px)',\n opacity: 0,\n bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n flexShrink: 0,\n p: '$4',\n userSelect: 'none',\n borderBottom: '2px solid transparent',\n position: 'relative',\n '&[data-state=\"active\"]': {\n color: '$interactive1',\n fontWeight: 600,\n letterSpacing: '-0.005em',\n borderColor: 'currentColor'\n },\n '&[data-disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([data-disabled])': {\n '&:hover, &:focus-visible': {\n color: '$interactive2',\n [`& ${StyledTabsTriggerHoverBackground}`]: {\n opacity: 0.07\n }\n },\n '&:active': {\n color: '$interactive3'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ninterface TabsTriggerProps\n extends React.ComponentProps<typeof StyledTabsTrigger> {\n value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n children,\n ...rest\n}) => (\n <StyledTabsTrigger {...rest}>\n <Text size=\"sm\" as=\"span\">\n {children}\n </Text>\n <StyledTabsTriggerHoverBackground />\n </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n position: 'absolute',\n inset: 0,\n height: 'calc(100% + 2px)',\n opacity: 0,\n bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n background: 'none',\n border: 'none',\n cursor: 'pointer',\n flexShrink: 0,\n p: '$4',\n userSelect: 'none',\n borderBottom: '2px solid transparent',\n position: 'relative',\n '&[data-state=\"active\"]': {\n color: '$interactive1',\n fontWeight: 600,\n letterSpacing: '-0.005em',\n borderColor: 'currentColor'\n },\n '&[data-disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([data-disabled])': {\n '&:hover, &:focus-visible': {\n color: '$interactive2',\n [`& ${StyledTabsTriggerHoverBackground}`]: {\n opacity: 0.07\n }\n },\n '&:active': {\n color: '$interactive3'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ninterface TabsTriggerProps\n extends React.ComponentProps<typeof StyledTabsTrigger> {\n value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n children,\n ...rest\n}) => (\n <StyledTabsTrigger {...rest}>\n <Text size=\"sm\" as=\"span\">\n {children}\n </Text>\n <StyledTabsTriggerHoverBackground />\n </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"6aAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKH,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGI,GACL,CACF,CACF,CAAC,EAOYC,EAA0C,CAAC,CACtD,SAAAC,KACGC,CACL,IACEC,EAAA,cAACN,EAAA,CAAmB,GAAGK,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACR,EAAA,IAAiC,CACpC,EAGFK,EAAY,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as n from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},f=({size:i,noCapsize:o})=>({...t.size[i],...t.noCapsize[`${o}`]}),r=m("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),a=n.forwardRef(({size:i="md",...o},s)=>n.createElement(r,{size:i,...o,ref:s}));a.displayName="Text";export{r as StyledText,a as Text,f as getTextVariant,t as textVariants};
|
|
1
|
+
import*as n from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},f=({size:i,noCapsize:o})=>({...t.size[i],...t.noCapsize[`${o}`]}),r=m("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),a=n.forwardRef(({size:i="md",...o},s)=>n.createElement(r,{size:i,...o,ref:s}));a.displayName="Text";export{r as StyledText,a as Text,f as getTextVariant,t as textVariants};
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n size: {\n xs: { fontSize: '$xs', lineHeight: 1.6, ...capsize(0.4364) },\n sm: { fontSize: '$sm', lineHeight: 1.53, ...capsize(0.4056) },\n md: { fontSize: '$md', lineHeight: 1.5, ...capsize(0.3864) },\n lg: { fontSize: '$lg', lineHeight: 1.52, ...capsize(0.3983) },\n xl: { fontSize: '$xl', lineHeight: 1.42, ...capsize(0.3506) }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n }\n}\n\nexport const getTextVariant: (options: {\n size: keyof typeof textVariants.size\n noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n ...textVariants.size[size],\n ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n fontFamily: '$body',\n fontWeight: 400,\n margin: 0,\n /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n '& > &': {\n '&:before, &:after': { display: 'none' }\n },\n variants: textVariants\n})\n\ntype TextProps = Override<\n React.ComponentProps<typeof StyledText>,\n {\n as?:\n | 'blockquote'\n | 'caption'\n | 'dd'\n | 'dt'\n | 'figcaption'\n | 'li'\n | 'p'\n | 'span'\n | 'legend'\n | React.ComponentType\n | React.ElementType\n }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n <StyledText size={size} {...remainingProps} ref={ref} />\n ))\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","remainingProps","ref"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n size: {\n xs: { fontSize: '$xs', lineHeight: 1.6, ...capsize(0.4364) },\n sm: { fontSize: '$sm', lineHeight: 1.53, ...capsize(0.4056) },\n md: { fontSize: '$md', lineHeight: 1.5, ...capsize(0.3864) },\n lg: { fontSize: '$lg', lineHeight: 1.52, ...capsize(0.3983) },\n xl: { fontSize: '$xl', lineHeight: 1.42, ...capsize(0.3506) }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n }\n}\n\nexport const getTextVariant: (options: {\n size: keyof typeof textVariants.size\n noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n ...textVariants.size[size],\n ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n fontFamily: '$body',\n fontWeight: 400,\n margin: 0,\n /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n '& > &': {\n '&:before, &:after': { display: 'none' }\n },\n variants: textVariants\n})\n\ntype TextProps = Override<\n React.ComponentProps<typeof StyledText>,\n {\n as?:\n | 'blockquote'\n | 'caption'\n | 'dd'\n | 'dt'\n | 'figcaption'\n | 'li'\n | 'p'\n | 'span'\n | 'legend'\n | React.ComponentType\n | React.ElementType\n }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n <StyledText size={size} {...remainingProps} ref={ref} />\n ))\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","remainingProps","ref"],"mappings":"sTAMO,MAAMA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGC,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGA,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,CAC9D,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,EAEaC,EAGD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,KAAO,CACpC,GAAGJ,EAAa,KAAKG,GACrB,GAAGH,EAAa,UAAU,GAAGI,IAC/B,GAEaC,EAAaC,EAAO,IAAK,CACpC,WAAY,QACZ,WAAY,IACZ,OAAQ,EAER,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAUN,CACZ,CAAC,EAoBYO,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAL,EAAO,QAASM,CAAe,EAAGC,IACpDF,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAO,GAAGM,EAAgB,IAAKC,CAAAA,CAAK,CACvD,EAEHH,EAAK,YAAc"}
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { TileNoOverflowContainer } from './TileNoOverflowContainer';
|
|
3
|
-
declare type TTile = typeof TileRoot & {
|
|
4
|
-
NoOverflowContainer: typeof TileNoOverflowContainer;
|
|
5
|
-
};
|
|
6
|
-
export declare const Tile: TTile;
|
|
1
|
+
export { Tile } from './Tile';
|
|
7
2
|
export { TileGroup } from './TileGroup';
|
|
@@ -222,433 +222,7 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
|
|
|
222
222
|
} & {
|
|
223
223
|
asWorkaround?: React.ElementType<any> | undefined;
|
|
224
224
|
colorScheme?: import("../..").TcolorScheme | undefined;
|
|
225
|
-
}, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asWorkaround"> & React.RefAttributes<HTMLButtonElement
|
|
226
|
-
NoOverflowContainer: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
|
|
227
|
-
sm: string;
|
|
228
|
-
md: string;
|
|
229
|
-
lg: string;
|
|
230
|
-
xl: string;
|
|
231
|
-
reducedMotion: string;
|
|
232
|
-
allowMotion: string;
|
|
233
|
-
hover: string;
|
|
234
|
-
}, import("@stitches/react/types/css-util").CSS<{
|
|
235
|
-
sm: string;
|
|
236
|
-
md: string;
|
|
237
|
-
lg: string;
|
|
238
|
-
xl: string;
|
|
239
|
-
reducedMotion: string;
|
|
240
|
-
allowMotion: string;
|
|
241
|
-
hover: string;
|
|
242
|
-
}, {
|
|
243
|
-
colors: {
|
|
244
|
-
textForeground: any;
|
|
245
|
-
textSubtle: any;
|
|
246
|
-
textPlaceholder: any;
|
|
247
|
-
background: any;
|
|
248
|
-
backgroundAccent: any;
|
|
249
|
-
grey100: any;
|
|
250
|
-
grey200: any;
|
|
251
|
-
grey300: any;
|
|
252
|
-
grey400: any;
|
|
253
|
-
grey500: any;
|
|
254
|
-
grey600: any;
|
|
255
|
-
grey700: any;
|
|
256
|
-
grey800: any;
|
|
257
|
-
grey900: any;
|
|
258
|
-
grey1000: any;
|
|
259
|
-
grey1100: any;
|
|
260
|
-
grey1200: any;
|
|
261
|
-
blue100: any;
|
|
262
|
-
blue200: any;
|
|
263
|
-
blue300: any;
|
|
264
|
-
blue400: any;
|
|
265
|
-
blue500: any;
|
|
266
|
-
blue600: any;
|
|
267
|
-
blue700: any;
|
|
268
|
-
blue800: any;
|
|
269
|
-
blue900: any;
|
|
270
|
-
blue1000: any;
|
|
271
|
-
blue1100: any;
|
|
272
|
-
blue1200: any;
|
|
273
|
-
purple100: any;
|
|
274
|
-
purple200: any;
|
|
275
|
-
purple300: any;
|
|
276
|
-
purple400: any;
|
|
277
|
-
purple500: any;
|
|
278
|
-
purple600: any;
|
|
279
|
-
purple700: any;
|
|
280
|
-
purple800: any;
|
|
281
|
-
purple900: any;
|
|
282
|
-
purple1000: any;
|
|
283
|
-
purple1100: any;
|
|
284
|
-
purple1200: any;
|
|
285
|
-
tonal50: any;
|
|
286
|
-
tonal100: any;
|
|
287
|
-
tonal200: any;
|
|
288
|
-
tonal300: any;
|
|
289
|
-
tonal400: any;
|
|
290
|
-
tonal500: any;
|
|
291
|
-
tonal600: any;
|
|
292
|
-
alpha100: any;
|
|
293
|
-
alpha150: any;
|
|
294
|
-
alpha200: any;
|
|
295
|
-
alpha250: any;
|
|
296
|
-
alpha600: any;
|
|
297
|
-
primaryLight: any;
|
|
298
|
-
primary: any;
|
|
299
|
-
primaryMid: any;
|
|
300
|
-
primaryDark: any;
|
|
301
|
-
secondary: any;
|
|
302
|
-
brandRed: any;
|
|
303
|
-
brandRedAccent: any;
|
|
304
|
-
brandGreen: any;
|
|
305
|
-
brandGreenAccent: any;
|
|
306
|
-
brandPurple: any;
|
|
307
|
-
brandPurpleAccent: any;
|
|
308
|
-
brandYellow: any;
|
|
309
|
-
brandYellowAccent: any;
|
|
310
|
-
successLight: any;
|
|
311
|
-
success: any;
|
|
312
|
-
successMid: any;
|
|
313
|
-
successDark: any;
|
|
314
|
-
dangerLight: any;
|
|
315
|
-
danger: any;
|
|
316
|
-
dangerMid: any;
|
|
317
|
-
dangerDark: any;
|
|
318
|
-
warningLight: any;
|
|
319
|
-
warning: any;
|
|
320
|
-
warningMid: any;
|
|
321
|
-
warningDark: any;
|
|
322
|
-
warningText: any;
|
|
323
|
-
subjectEnglish: any;
|
|
324
|
-
subjectMaths: any;
|
|
325
|
-
subjectScience: any;
|
|
326
|
-
subjectVerbalReasoning: any;
|
|
327
|
-
subjectNonVerbalReasoning: any;
|
|
328
|
-
subjectCreativeWriting: any;
|
|
329
|
-
subjectExamSkills: any;
|
|
330
|
-
};
|
|
331
|
-
space: {
|
|
332
|
-
"0": any;
|
|
333
|
-
"1": any;
|
|
334
|
-
"2": any;
|
|
335
|
-
"3": any;
|
|
336
|
-
"4": any;
|
|
337
|
-
"5": any;
|
|
338
|
-
"6": any;
|
|
339
|
-
"7": any;
|
|
340
|
-
"8": any;
|
|
341
|
-
"9": any;
|
|
342
|
-
"24": any;
|
|
343
|
-
};
|
|
344
|
-
fontSizes: {
|
|
345
|
-
xs: any;
|
|
346
|
-
sm: any;
|
|
347
|
-
md: any;
|
|
348
|
-
lg: any;
|
|
349
|
-
xl: any;
|
|
350
|
-
"2xl": any;
|
|
351
|
-
"3xl": any;
|
|
352
|
-
"4xl": any;
|
|
353
|
-
};
|
|
354
|
-
fonts: {
|
|
355
|
-
sans: any;
|
|
356
|
-
mono: any;
|
|
357
|
-
display: any;
|
|
358
|
-
body: any;
|
|
359
|
-
};
|
|
360
|
-
sizes: {
|
|
361
|
-
"0": any;
|
|
362
|
-
"1": any;
|
|
363
|
-
"2": any;
|
|
364
|
-
"3": any;
|
|
365
|
-
"4": any;
|
|
366
|
-
"5": any;
|
|
367
|
-
"6": any;
|
|
368
|
-
"7": any;
|
|
369
|
-
"8": any;
|
|
370
|
-
};
|
|
371
|
-
radii: {
|
|
372
|
-
"0": any;
|
|
373
|
-
"1": any;
|
|
374
|
-
"2": any;
|
|
375
|
-
"3": any;
|
|
376
|
-
round: any;
|
|
377
|
-
};
|
|
378
|
-
shadows: {
|
|
379
|
-
"0": any;
|
|
380
|
-
"1": any;
|
|
381
|
-
"2": any;
|
|
382
|
-
"3": any;
|
|
383
|
-
};
|
|
384
|
-
}, import("@stitches/react/types/config").DefaultThemeMap, {
|
|
385
|
-
bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
|
|
386
|
-
background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
|
|
387
|
-
};
|
|
388
|
-
size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
|
|
389
|
-
height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
|
|
390
|
-
width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
|
|
391
|
-
};
|
|
392
|
-
p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
393
|
-
padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
394
|
-
};
|
|
395
|
-
pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
396
|
-
paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
397
|
-
};
|
|
398
|
-
pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
399
|
-
paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
400
|
-
};
|
|
401
|
-
pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
402
|
-
paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
403
|
-
};
|
|
404
|
-
pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
405
|
-
paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
406
|
-
};
|
|
407
|
-
px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
408
|
-
paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
409
|
-
paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
410
|
-
};
|
|
411
|
-
py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
412
|
-
paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
413
|
-
paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
414
|
-
};
|
|
415
|
-
m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
416
|
-
margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
417
|
-
};
|
|
418
|
-
mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
419
|
-
marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
420
|
-
};
|
|
421
|
-
mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
422
|
-
marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
423
|
-
};
|
|
424
|
-
mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
425
|
-
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
426
|
-
};
|
|
427
|
-
ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
428
|
-
marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
429
|
-
};
|
|
430
|
-
mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
431
|
-
marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
432
|
-
marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
433
|
-
};
|
|
434
|
-
my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
435
|
-
marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
436
|
-
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
437
|
-
};
|
|
438
|
-
}>>, {}, {
|
|
439
|
-
sm: string;
|
|
440
|
-
md: string;
|
|
441
|
-
lg: string;
|
|
442
|
-
xl: string;
|
|
443
|
-
reducedMotion: string;
|
|
444
|
-
allowMotion: string;
|
|
445
|
-
hover: string;
|
|
446
|
-
}, import("@stitches/react/types/css-util").CSS<{
|
|
447
|
-
sm: string;
|
|
448
|
-
md: string;
|
|
449
|
-
lg: string;
|
|
450
|
-
xl: string;
|
|
451
|
-
reducedMotion: string;
|
|
452
|
-
allowMotion: string;
|
|
453
|
-
hover: string;
|
|
454
|
-
}, {
|
|
455
|
-
colors: {
|
|
456
|
-
textForeground: any;
|
|
457
|
-
textSubtle: any;
|
|
458
|
-
textPlaceholder: any;
|
|
459
|
-
background: any;
|
|
460
|
-
backgroundAccent: any;
|
|
461
|
-
grey100: any;
|
|
462
|
-
grey200: any;
|
|
463
|
-
grey300: any;
|
|
464
|
-
grey400: any;
|
|
465
|
-
grey500: any;
|
|
466
|
-
grey600: any;
|
|
467
|
-
grey700: any;
|
|
468
|
-
grey800: any;
|
|
469
|
-
grey900: any;
|
|
470
|
-
grey1000: any;
|
|
471
|
-
grey1100: any;
|
|
472
|
-
grey1200: any;
|
|
473
|
-
blue100: any;
|
|
474
|
-
blue200: any;
|
|
475
|
-
blue300: any;
|
|
476
|
-
blue400: any;
|
|
477
|
-
blue500: any;
|
|
478
|
-
blue600: any;
|
|
479
|
-
blue700: any;
|
|
480
|
-
blue800: any;
|
|
481
|
-
blue900: any;
|
|
482
|
-
blue1000: any;
|
|
483
|
-
blue1100: any;
|
|
484
|
-
blue1200: any;
|
|
485
|
-
purple100: any;
|
|
486
|
-
purple200: any;
|
|
487
|
-
purple300: any;
|
|
488
|
-
purple400: any;
|
|
489
|
-
purple500: any;
|
|
490
|
-
purple600: any;
|
|
491
|
-
purple700: any;
|
|
492
|
-
purple800: any;
|
|
493
|
-
purple900: any;
|
|
494
|
-
purple1000: any;
|
|
495
|
-
purple1100: any;
|
|
496
|
-
purple1200: any;
|
|
497
|
-
tonal50: any;
|
|
498
|
-
tonal100: any;
|
|
499
|
-
tonal200: any;
|
|
500
|
-
tonal300: any;
|
|
501
|
-
tonal400: any;
|
|
502
|
-
tonal500: any;
|
|
503
|
-
tonal600: any;
|
|
504
|
-
alpha100: any;
|
|
505
|
-
alpha150: any;
|
|
506
|
-
alpha200: any;
|
|
507
|
-
alpha250: any;
|
|
508
|
-
alpha600: any;
|
|
509
|
-
primaryLight: any;
|
|
510
|
-
primary: any;
|
|
511
|
-
primaryMid: any;
|
|
512
|
-
primaryDark: any;
|
|
513
|
-
secondary: any;
|
|
514
|
-
brandRed: any;
|
|
515
|
-
brandRedAccent: any;
|
|
516
|
-
brandGreen: any;
|
|
517
|
-
brandGreenAccent: any;
|
|
518
|
-
brandPurple: any;
|
|
519
|
-
brandPurpleAccent: any;
|
|
520
|
-
brandYellow: any;
|
|
521
|
-
brandYellowAccent: any;
|
|
522
|
-
successLight: any;
|
|
523
|
-
success: any;
|
|
524
|
-
successMid: any;
|
|
525
|
-
successDark: any;
|
|
526
|
-
dangerLight: any;
|
|
527
|
-
danger: any;
|
|
528
|
-
dangerMid: any;
|
|
529
|
-
dangerDark: any;
|
|
530
|
-
warningLight: any;
|
|
531
|
-
warning: any;
|
|
532
|
-
warningMid: any;
|
|
533
|
-
warningDark: any;
|
|
534
|
-
warningText: any;
|
|
535
|
-
subjectEnglish: any;
|
|
536
|
-
subjectMaths: any;
|
|
537
|
-
subjectScience: any;
|
|
538
|
-
subjectVerbalReasoning: any;
|
|
539
|
-
subjectNonVerbalReasoning: any;
|
|
540
|
-
subjectCreativeWriting: any;
|
|
541
|
-
subjectExamSkills: any;
|
|
542
|
-
};
|
|
543
|
-
space: {
|
|
544
|
-
"0": any;
|
|
545
|
-
"1": any;
|
|
546
|
-
"2": any;
|
|
547
|
-
"3": any;
|
|
548
|
-
"4": any;
|
|
549
|
-
"5": any;
|
|
550
|
-
"6": any;
|
|
551
|
-
"7": any;
|
|
552
|
-
"8": any;
|
|
553
|
-
"9": any;
|
|
554
|
-
"24": any;
|
|
555
|
-
};
|
|
556
|
-
fontSizes: {
|
|
557
|
-
xs: any;
|
|
558
|
-
sm: any;
|
|
559
|
-
md: any;
|
|
560
|
-
lg: any;
|
|
561
|
-
xl: any;
|
|
562
|
-
"2xl": any;
|
|
563
|
-
"3xl": any;
|
|
564
|
-
"4xl": any;
|
|
565
|
-
};
|
|
566
|
-
fonts: {
|
|
567
|
-
sans: any;
|
|
568
|
-
mono: any;
|
|
569
|
-
display: any;
|
|
570
|
-
body: any;
|
|
571
|
-
};
|
|
572
|
-
sizes: {
|
|
573
|
-
"0": any;
|
|
574
|
-
"1": any;
|
|
575
|
-
"2": any;
|
|
576
|
-
"3": any;
|
|
577
|
-
"4": any;
|
|
578
|
-
"5": any;
|
|
579
|
-
"6": any;
|
|
580
|
-
"7": any;
|
|
581
|
-
"8": any;
|
|
582
|
-
};
|
|
583
|
-
radii: {
|
|
584
|
-
"0": any;
|
|
585
|
-
"1": any;
|
|
586
|
-
"2": any;
|
|
587
|
-
"3": any;
|
|
588
|
-
round: any;
|
|
589
|
-
};
|
|
590
|
-
shadows: {
|
|
591
|
-
"0": any;
|
|
592
|
-
"1": any;
|
|
593
|
-
"2": any;
|
|
594
|
-
"3": any;
|
|
595
|
-
};
|
|
596
|
-
}, import("@stitches/react/types/config").DefaultThemeMap, {
|
|
597
|
-
bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
|
|
598
|
-
background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
|
|
599
|
-
};
|
|
600
|
-
size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
|
|
601
|
-
height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
|
|
602
|
-
width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
|
|
603
|
-
};
|
|
604
|
-
p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
605
|
-
padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
606
|
-
};
|
|
607
|
-
pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
608
|
-
paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
609
|
-
};
|
|
610
|
-
pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
611
|
-
paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
612
|
-
};
|
|
613
|
-
pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
614
|
-
paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
615
|
-
};
|
|
616
|
-
pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
617
|
-
paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
618
|
-
};
|
|
619
|
-
px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
620
|
-
paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
621
|
-
paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
622
|
-
};
|
|
623
|
-
py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
624
|
-
paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
625
|
-
paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
626
|
-
};
|
|
627
|
-
m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
628
|
-
margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
629
|
-
};
|
|
630
|
-
mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
631
|
-
marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
632
|
-
};
|
|
633
|
-
mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
634
|
-
marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
635
|
-
};
|
|
636
|
-
mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
637
|
-
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
638
|
-
};
|
|
639
|
-
ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
640
|
-
marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
641
|
-
};
|
|
642
|
-
mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
643
|
-
marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
644
|
-
marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
645
|
-
};
|
|
646
|
-
my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
|
|
647
|
-
marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
648
|
-
marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
|
|
649
|
-
};
|
|
650
|
-
}>>;
|
|
651
|
-
}, {}, {
|
|
225
|
+
}, "colorScheme" | "border" | "borderRadius" | "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asWorkaround"> & React.RefAttributes<HTMLButtonElement>>, {}, {
|
|
652
226
|
sm: string;
|
|
653
227
|
md: string;
|
|
654
228
|
lg: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from"react";import{Tile as n}from"../tile/
|
|
1
|
+
import o from"react";import{Tile as n}from"../tile/Tile.js";import"../stack/Stack.js";import{styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const m=l(n,{"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...c()}}}),r=o.forwardRef(({onClick:e,href:t,type:a="button",...i},s)=>o.createElement(m,{...i,...t?{asWorkaround:"a",href:t,onClick:void 0}:{asWorkaround:"button",type:a,onClick:e},ref:s}));r.displayName="TileInteractive";export{r as TileInteractive};
|
|
2
2
|
//# sourceMappingURL=TileInteractive.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled(Tile, {\n '&[data-disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([data-disabled])': {\n cursor: 'pointer',\n transform: 'translateY(0)',\n transition: 'transform 250ms ease',\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n boxShadow: '$2',\n opacity: 0,\n transition: 'opacity 250ms ease-out',\n borderRadius: 'inherit'\n },\n '&:hover': {\n transform: 'translateY(-$space$0)',\n '&::after': {\n opacity: 1\n }\n },\n '&:active': {\n bg: '$base2'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n typeof StyledTileInteractive\n> & { type?: string } & NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n HTMLButtonElement,\n TTileInteractiveProps\n>(({ onClick, href, type = 'button', ...rest }, ref) => {\n const isLink = !!href\n const elementSpecificProps = isLink\n ? {\n asWorkaround: 'a' as React.ElementType,\n href,\n onClick: undefined\n }\n : { asWorkaround: 'button' as React.ElementType, type, onClick }\n\n return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled(Tile, {\n '&[data-disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([data-disabled])': {\n cursor: 'pointer',\n transform: 'translateY(0)',\n transition: 'transform 250ms ease',\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n boxShadow: '$2',\n opacity: 0,\n transition: 'opacity 250ms ease-out',\n borderRadius: 'inherit'\n },\n '&:hover': {\n transform: 'translateY(-$space$0)',\n '&::after': {\n opacity: 1\n }\n },\n '&:active': {\n bg: '$base2'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n typeof StyledTileInteractive\n> & { type?: string } & NavigatorActions\n\nexport const TileInteractive = React.forwardRef<\n HTMLButtonElement,\n TTileInteractiveProps\n>(({ onClick, href, type = 'button', ...rest }, ref) => {\n const isLink = !!href\n const elementSpecificProps = isLink\n ? {\n asWorkaround: 'a' as React.ElementType,\n href,\n onClick: undefined\n }\n : { asWorkaround: 'button' as React.ElementType, type, onClick }\n\n return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n})\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","rest","ref"],"mappings":"qZAOA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,SAChB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EACL,CAAA,CACF,CACF,CAAC,EAMYC,EAAkBC,EAAM,WAGnC,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,YAAaC,CAAK,EAAGC,IAUvCL,EAAA,cAACL,EAAA,CAAuB,GAAGS,EAAO,GATxBF,EAEb,CACE,aAAc,IACd,KAAAA,EACA,QAAS,MACX,EACA,CAAE,aAAc,SAA+B,KAAAC,EAAM,QAAAF,CAAQ,EAEC,IAAKI,CAAK,CAAA,CAC7E,EAEDN,EAAgB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as i from"@radix-ui/react-toggle-group";import*as r from"react";import"../tile/
|
|
1
|
+
import*as i from"@radix-ui/react-toggle-group";import*as r from"react";import"../tile/Tile.js";import{TileGroup as n}from"../tile/TileGroup.js";const a=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,m=r.forwardRef((o,t)=>{const e=a(o.orientation);return r.createElement(n,{ref:t,as:i.Root,direction:e,align:!1,...o})});export{m as TileToggleGroupRoot};
|
|
2
2
|
//# sourceMappingURL=TileToggleGroupRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal'\n ? 'row'\n : orientation === 'vertical'\n ? 'column'\n : undefined\n\nexport const TileToggleGroupRoot = React.forwardRef<\n HTMLDivElement,\n TTileToggleGroupRootProps\n>((props, ref) => {\n const direction = orientationToDirection(props.orientation)\n return (\n <TileGroup\n ref={ref}\n as={ToggleGroup.Root}\n direction={direction}\n align={false}\n {...props}\n />\n )\n})\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal'\n ? 'row'\n : orientation === 'vertical'\n ? 'column'\n : undefined\n\nexport const TileToggleGroupRoot = React.forwardRef<\n HTMLDivElement,\n TTileToggleGroupRootProps\n>((props, ref) => {\n const direction = orientationToDirection(props.orientation)\n return (\n <TileGroup\n ref={ref}\n as={ToggleGroup.Root}\n direction={direction}\n align={false}\n {...props}\n />\n )\n})\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"gJAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WAChB,SACA,OAEOC,EAAsBC,EAAM,WAGvC,CAACC,EAAOC,IAAQ,CAChB,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,MAAO,GACN,GAAGF,CACN,CAAA,CAEJ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as o}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const r=e(t.Item,{bg:"white",color:"$tonal400",border:"1px solid $tonal200",cursor:"pointer","&::before":{background:"$tonal200"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primaryMid"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$tonal200 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},'&[data-state="on"]':{color:"$primary",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
|
|
1
|
+
import*as t from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as o}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const r=e(t.Item,{bg:"white",color:"$tonal400",border:"1px solid $tonal200",cursor:"pointer","&::before":{background:"$tonal200"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primaryMid"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$tonal200 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},'&[data-state="on"]':{color:"$primary",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
|
|
2
2
|
//# sourceMappingURL=ToggleGroupItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n bg: 'white',\n color: '$tonal400',\n border: '1px solid $tonal200',\n cursor: 'pointer',\n '&::before': {\n background: '$tonal200'\n },\n '&:not([disabled])': {\n '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n '&::before': {\n background: 'none'\n }\n },\n '&:hover': {\n borderColor: 'currentColor !important',\n color: '$primaryMid'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock(),\n '&[data-state=\"off\"]': {\n borderColor: '$tonal200 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n focusVisibleStyleBlock().boxShadow\n }`\n }\n }\n },\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&[data-state=\"on\"]': {\n color: '$primary',\n borderColor: 'currentColor !important',\n boxShadow: 'inset currentColor 0px 0px 0px 1px'\n }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n bg: 'white',\n color: '$tonal400',\n border: '1px solid $tonal200',\n cursor: 'pointer',\n '&::before': {\n background: '$tonal200'\n },\n '&:not([disabled])': {\n '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n '&::before': {\n background: 'none'\n }\n },\n '&:hover': {\n borderColor: 'currentColor !important',\n color: '$primaryMid'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock(),\n '&[data-state=\"off\"]': {\n borderColor: '$tonal200 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n focusVisibleStyleBlock().boxShadow\n }`\n }\n }\n },\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&[data-state=\"on\"]': {\n color: '$primary',\n borderColor: 'currentColor !important',\n boxShadow: 'inset currentColor 0px 0px 0px 1px'\n }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"8WAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,GAAI,QACJ,MAAO,YACP,OAAQ,sBACR,OAAQ,UACR,YAAa,CACX,WAAY,WACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGC,EAAAA,EACH,sBAAuB,CACrB,YAAa,sBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,IAAyB,WAE7B,CACF,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,qBAAsB,CACpB,MAAO,WACP,YAAa,0BACb,UAAW,oCACb,CACF,CAAC,EAEYC,EAAkBJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Content as m,Arrow as r}from"@radix-ui/react-tooltip";import*as t from"react";import{TOOLTIP_Z_INDEX as l}from"../../constants/zIndices.js";import{styled as
|
|
1
|
+
import{Content as m,Arrow as r}from"@radix-ui/react-tooltip";import*as t from"react";import{TOOLTIP_Z_INDEX as l}from"../../constants/zIndices.js";import{styled as i}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideDownAndFade as s,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const h=i(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,whiteSpace:"normal",px:"$3",py:"$2",zIndex:l,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),x=i(r,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:a,side:e="top",sideOffset:o=4,size:n="md",...d})=>t.createElement(h,{side:e,sideOffset:o,size:n,...d},a,t.createElement(x,null));export{$ as TooltipContent};
|
|
2
2
|
//# sourceMappingURL=TooltipContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipContent.js","sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { TOOLTIP_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nconst StyledContent = styled(Content, {\n backgroundColor: '$tonal500',\n borderRadius: '$0',\n boxShadow: '$0',\n color: 'white',\n fontFamily: '$body',\n fontSize: '$sm',\n lineHeight: 1.5,\n whiteSpace: 'normal',\n px: '$3',\n py: '$2',\n zIndex: TOOLTIP_Z_INDEX,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"delayed-open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '100px' },\n md: { maxWidth: '250px' },\n lg: { maxWidth: '400px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: '$tonal500',\n '[data-align=\"end\"] &': { mr: '$2' },\n '[data-align=\"start\"] &': { ml: '$2' }\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content>\n\nexport const TooltipContent: React.FC<TooltipContentProps> = ({\n children,\n side = 'top',\n sideOffset = 4,\n size = 'md',\n ...remainingProps\n}) => (\n <StyledContent\n side={side}\n sideOffset={sideOffset}\n size={size}\n {...remainingProps}\n >\n {children}\n <StyledArrow />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","TOOLTIP_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","TooltipContent","children","side","sideOffset","size","remainingProps","React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TooltipContent.js","sources":["../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import { Arrow, Content } from '@radix-ui/react-tooltip'\nimport * as React from 'react'\n\nimport { TOOLTIP_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nconst StyledContent = styled(Content, {\n backgroundColor: '$tonal500',\n borderRadius: '$0',\n boxShadow: '$0',\n color: 'white',\n fontFamily: '$body',\n fontSize: '$sm',\n lineHeight: 1.5,\n whiteSpace: 'normal',\n px: '$3',\n py: '$2',\n zIndex: TOOLTIP_Z_INDEX,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"delayed-open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '100px' },\n md: { maxWidth: '250px' },\n lg: { maxWidth: '400px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: '$tonal500',\n '[data-align=\"end\"] &': { mr: '$2' },\n '[data-align=\"start\"] &': { ml: '$2' }\n})\n\ntype TooltipContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content>\n\nexport const TooltipContent: React.FC<TooltipContentProps> = ({\n children,\n side = 'top',\n sideOffset = 4,\n size = 'md',\n ...remainingProps\n}) => (\n <StyledContent\n side={side}\n sideOffset={sideOffset}\n size={size}\n {...remainingProps}\n >\n {children}\n <StyledArrow />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","TOOLTIP_Z_INDEX","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","TooltipContent","children","side","sideOffset","size","remainingProps","React"],"mappings":"kdAYA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,gBAAiB,YACjB,aAAc,KACd,UAAW,KACX,MAAO,QACP,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,WAAY,SACZ,GAAI,KACJ,GAAI,KACJ,OAAQC,EACR,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,+BAAgC,CAC9B,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcP,EAAOQ,EAAO,CAChC,KAAM,YACN,uBAAwB,CAAE,GAAI,IAAK,EACnC,yBAA0B,CAAE,GAAI,IAAK,CACvC,CAAC,EAKYC,EAAgD,CAAC,CAC5D,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAAChB,EAAA,CACC,KAAMY,EACN,WAAYC,EACZ,KAAMC,EACL,GAAGC,CAEHJ,EAAAA,EACDK,EAAA,cAACR,EAAA,IAAY,CACf"}
|