@magiclabs/ui-components 1.13.4 → 1.13.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/feedback/callout.js +1 -1
- package/dist/cjs/components/feedback/callout.js.map +1 -1
- package/dist/cjs/recipes/callout.js +1 -1
- package/dist/cjs/recipes/callout.js.map +1 -1
- package/dist/es/components/feedback/callout.js +1 -1
- package/dist/es/components/feedback/callout.js.map +1 -1
- package/dist/es/recipes/callout.js +1 -1
- package/dist/es/recipes/callout.js.map +1 -1
- package/dist/types/components/feedback/callout.d.ts +1 -0
- package/dist/types/components/feedback/callout.d.ts.map +1 -1
- package/dist/types/recipes/callout.d.ts +17 -0
- package/dist/types/recipes/callout.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var w=require("../icons/ico-alert-circle-fill.js"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var w=require("../icons/ico-alert-circle-fill.js"),S=require("../icons/ico-caret-right.js"),F=require("../icons/ico-checkmark-circle-fill.js"),I=require("../icons/ico-dismiss.js"),R=require("../icons/ico-info-circle-fill.js"),A=require("../icons/ico-lightbulb-fill.js"),H=require("../icons/ico-warning-fill.js"),P=require("../../recipes/callout.js"),s=require("@styled/jsx"),t=require("react"),y=require("react-aria");const z={branded:A.default,success:F.default,error:w.default,warning:H.default,neutral:R.default},m=t.forwardRef((h,b)=>{const{label:j,description:a,size:x="md",variant:l="branded",icon:n=!1,dismissible:c=!1,onPress:r}=h,[f,v]=t.useState(!0),[q,g]=t.useState(!1),u=a?16:20,i=P.callout({size:x,variant:l,icon:n,description:!!a,isDismissed:q,dismissible:c,interactive:!!r}),C=z[l],p=()=>{g(!0)},N=t.useRef(null),o=b||N,{buttonProps:k}=y.useButton({onPress:r},o),d=()=>e.jsxs(s.HStack,{className:r?"":i.container,onAnimationEnd:()=>v(!1),ref:o,children:[e.jsxs(s.VStack,{alignItems:"flex-start",gap:1.5,children:[e.jsxs(s.HStack,{w:"full",justifyContent:"space-between",children:[e.jsxs(s.HStack,{alignItems:"center",children:[n&&e.jsx(C,{className:i.icon,width:u,height:u}),e.jsx("p",{className:i.label,children:j})]}),c&&e.jsx("button",{className:i.button,onClick:p,"aria-label":"dismiss callout",children:e.jsx(I.default,{className:i.button,width:16,height:16})})]}),!!a&&e.jsx("p",{className:i.description,children:a})]}),!!r&&e.jsx(S.default,{className:i.button,width:16,height:16})]});return f?r?e.jsx("button",{...k,className:i.container,children:e.jsx(d,{})}):e.jsx(d,{}):null});m.displayName="Callout",exports.Callout=m;
|
|
2
2
|
//# sourceMappingURL=callout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n IcoAlertCircleFill,\n IcoCaretRight,\n IcoCheckmarkCircleFill,\n IcoDismiss,\n IcoInfoCircleFill,\n IcoLightbulbFill,\n IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n label: string;\n description?: string;\n variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n dismissible: true;\n onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;\n\nconst svgIcon = {\n branded: IcoLightbulbFill,\n success: IcoCheckmarkCircleFill,\n error: IcoAlertCircleFill,\n warning: IcoWarningFill,\n neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n const { label, description, variant = 'branded', icon = false, dismissible = false, onPress } = props;\n const [isVisible, setIsVisible] = useState(true);\n const [isDismissed, setIsDismissed] = useState(false);\n\n const iconSize = description ? 16 : 20;\n\n const classes = callout({\n variant,\n icon,\n description: !!description,\n isDismissed,\n dismissible,\n interactive: !!onPress,\n });\n\n const IconComponent = svgIcon[variant];\n\n const dismissCallout = () => {\n setIsDismissed(true);\n };\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n const CalloutBase = () => {\n return (\n <HStack className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n <VStack alignItems={'flex-start'} gap={1.5}>\n <HStack w={'full'} justifyContent={'space-between'}>\n <HStack alignItems={'center'}>\n {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n <p className={classes.label}>{label}</p>\n </HStack>\n\n {dismissible && (\n <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n <IcoDismiss className={classes.button} width={16} height={16} />\n </button>\n )}\n </HStack>\n {!!description && <p className={classes.description}>{description}</p>}\n </VStack>\n {!!onPress && <IcoCaretRight className={classes.button} width={16} height={16} />}\n </HStack>\n );\n };\n\n if (!isVisible) {\n return null;\n }\n\n if (onPress) {\n return (\n <button {...buttonProps} className={classes.container}>\n <CalloutBase />\n </button>\n );\n }\n\n return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"
|
|
1
|
+
{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n IcoAlertCircleFill,\n IcoCaretRight,\n IcoCheckmarkCircleFill,\n IcoDismiss,\n IcoInfoCircleFill,\n IcoLightbulbFill,\n IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n label: string;\n description?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n dismissible: true;\n onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;\n\nconst svgIcon = {\n branded: IcoLightbulbFill,\n success: IcoCheckmarkCircleFill,\n error: IcoAlertCircleFill,\n warning: IcoWarningFill,\n neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n const { label, description, size = 'md', variant = 'branded', icon = false, dismissible = false, onPress } = props;\n const [isVisible, setIsVisible] = useState(true);\n const [isDismissed, setIsDismissed] = useState(false);\n\n const iconSize = description ? 16 : 20;\n\n const classes = callout({\n size,\n variant,\n icon,\n description: !!description,\n isDismissed,\n dismissible,\n interactive: !!onPress,\n });\n\n const IconComponent = svgIcon[variant];\n\n const dismissCallout = () => {\n setIsDismissed(true);\n };\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n const CalloutBase = () => {\n return (\n <HStack className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n <VStack alignItems={'flex-start'} gap={1.5}>\n <HStack w={'full'} justifyContent={'space-between'}>\n <HStack alignItems={'center'}>\n {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n <p className={classes.label}>{label}</p>\n </HStack>\n\n {dismissible && (\n <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n <IcoDismiss className={classes.button} width={16} height={16} />\n </button>\n )}\n </HStack>\n {!!description && <p className={classes.description}>{description}</p>}\n </VStack>\n {!!onPress && <IcoCaretRight className={classes.button} width={16} height={16} />}\n </HStack>\n );\n };\n\n if (!isVisible) {\n return null;\n }\n\n if (onPress) {\n return (\n <button {...buttonProps} className={classes.container}>\n <CalloutBase />\n </button>\n );\n }\n\n return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","size","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"4eAwCA,MAAMA,EAAU,CACd,QAASC,UACT,QAASC,EAAAA,QACT,MAAOC,EACP,QAAA,QAASC,EACT,QAAA,QAASC,WAGEC,EAAUC,aAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,KAAAC,EAAO,KAAM,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKR,EACvG,CAACS,EAAWC,CAAY,EAAIC,EAAAA,SAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAE9CG,EAAWX,EAAc,GAAK,GAE9BY,EAAUC,UAAQ,CACtB,KAAAZ,EACA,QAAAC,EACA,KAAAC,EACA,YAAa,CAAC,CAACH,EACf,YAAAS,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKS,EAAgBzB,EAAQa,CAAO,EAE/Ba,EAAiB,IAAK,CAC1BL,EAAe,EAAI,CACrB,EAEMM,EAAcC,EAAAA,OAAO,IAAI,EACzBC,EAAMpB,GAAgBkB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,YAAU,CAAE,QAAAf,CAAS,EAAEa,CAAyC,EAElFG,EAAc,IAEhBC,EAAAA,KAACC,EAAAA,OAAO,CAAA,UAAYlB,EAA8B,GAApBO,EAAQ,UAAgB,eAAgB,IAAML,EAAa,EAAK,EAAG,IAAKW,YACpGI,OAACE,EAAAA,QAAO,WAAY,aAAc,IAAK,cACrCF,EAAAA,KAACC,EAAAA,OAAO,CAAA,EAAG,OAAQ,eAAgB,gBACjC,SAAA,CAAAD,EAACC,KAAAA,EAAAA,OAAO,CAAA,WAAY,SAAQ,SAAA,CACzBpB,GAAQsB,EAACX,IAAAA,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAQ,CAAA,EAClFc,EAAAA,IAAG,IAAA,CAAA,UAAWb,EAAQ,MAAK,SAAGb,CAAK,CAAA,CAAK,IAGzCK,GACCqB,EAAAA,cAAQ,UAAWb,EAAQ,OAAQ,QAASG,EAAc,aAAa,kBACrE,SAAAU,EAAAA,IAACC,EAAAA,QAAW,CAAA,UAAWd,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAEnE,CAAA,CAAA,EAEF,CAAC,CAACZ,GAAeyB,WAAG,UAAWb,EAAQ,YAAc,SAAAZ,GAAgB,CAC/D,CAAA,EACR,CAAC,CAACK,GAAWoB,EAAAA,IAACE,EAAAA,QAAc,CAAA,UAAWf,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAAA,EAKvF,OAAKN,EAIDD,EAEAoB,EAAAA,IAAA,SAAA,CAAA,GAAYN,EAAa,UAAWP,EAAQ,mBAC1Ca,EAACJ,IAAAA,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdI,EAAAA,IAACJ,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAED1B,EAAQ,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("@styled/css");const o=e.sva({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},
|
|
1
|
+
"use strict";var e=require("@styled/css");const o=e.sva({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},button:{cursor:"pointer",outline:"none",_focusVisible:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}}},variants:{size:{sm:{label:{fontSize:"sm"}},md:{label:{fontSize:"md"}},lg:{label:{fontSize:"lg"}}},variant:{branded:{container:{bg:"brand.lightest",_focusVisible:{outlineColor:"brand.lightest"}},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest",_focusVisible:{outlineColor:"positive.lightest"}},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest",_focusVisible:{outlineColor:"negative.lightest"}},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest",_focusVisible:{outlineColor:"warning.lightest"}},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary",_focusVisible:{outlineColor:"surface.secondary"}},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},interactive:{true:{container:{cursor:"pointer",transition:"transform 0.2s ease, opacity 0.2s ease",_active:{transform:"scale(0.95)"},_hover:{opacity:.8},_focusVisible:{outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});exports.callout=o;
|
|
2
2
|
//# sourceMappingURL=callout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n base: {\n container: {\n px: 4,\n py: 3,\n rounded: 10,\n w: 'full',\n },\n
|
|
1
|
+
{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n base: {\n container: {\n px: 4,\n py: 3,\n rounded: 10,\n w: 'full',\n },\n button: {\n cursor: 'pointer',\n outline: 'none',\n _focusVisible: {\n outlineColor: 'brand.base',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n rounded: 2,\n },\n },\n },\n variants: {\n size: {\n sm: {\n label: { fontSize: 'sm' },\n },\n md: {\n label: { fontSize: 'md' },\n },\n lg: {\n label: { fontSize: 'lg' },\n },\n },\n variant: {\n branded: {\n container: {\n bg: 'brand.lightest',\n _focusVisible: {\n outlineColor: 'brand.lightest',\n },\n },\n label: {\n color: 'brand.darkest',\n },\n description: {\n color: 'brand.darkest',\n },\n icon: {\n color: 'brand.darkest',\n },\n button: {\n color: 'brand.darkest',\n },\n },\n success: {\n container: {\n bg: 'positive.lightest',\n _focusVisible: {\n outlineColor: 'positive.lightest',\n },\n },\n label: {\n color: 'positive.darkest',\n },\n description: {\n color: 'positive.darkest',\n },\n icon: {\n color: 'positive.darkest',\n },\n button: {\n color: 'positive.darkest',\n },\n },\n error: {\n container: {\n bg: 'negative.lightest',\n _focusVisible: {\n outlineColor: 'negative.lightest',\n },\n },\n label: {\n color: 'negative.darkest',\n },\n description: {\n color: 'negative.darkest',\n },\n icon: {\n color: 'negative.darkest',\n },\n button: {\n color: 'negative.darkest',\n },\n },\n warning: {\n container: {\n bg: 'warning.lightest',\n _focusVisible: {\n outlineColor: 'warning.lightest',\n },\n },\n label: {\n color: 'warning.darkest',\n },\n description: {\n color: 'warning.darkest',\n },\n icon: {\n color: 'warning.darkest',\n },\n button: {\n color: 'warning.darkest',\n },\n },\n neutral: {\n container: {\n bg: 'surface.secondary',\n _focusVisible: {\n outlineColor: 'surface.secondary',\n },\n },\n label: {\n color: 'text.secondary',\n },\n description: {\n color: 'text.secondary',\n },\n icon: {\n color: 'text.secondary',\n },\n button: {\n color: 'text.secondary',\n },\n },\n },\n icon: {\n true: {\n description: {\n ml: 7,\n },\n },\n },\n dismissible: {\n true: {\n description: {\n mr: 7,\n },\n },\n },\n interactive: {\n true: {\n container: {\n cursor: 'pointer',\n transition: 'transform 0.2s ease, opacity 0.2s ease',\n _active: { transform: 'scale(0.95)' },\n _hover: {\n opacity: 0.8,\n },\n _focusVisible: {\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n },\n },\n },\n },\n description: {\n true: {\n label: {\n textTransform: 'uppercase',\n fontSize: 'xs',\n fontWeight: 'semibold',\n letterSpacing: '0.06rem',\n },\n },\n },\n isDismissed: {\n true: {\n container: {\n animationFillMode: 'forwards',\n animationName: 'scaleOut',\n animationDuration: '150ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n },\n});\n"],"names":["callout","sva"],"mappings":"0CAEa,MAAAA,EAAUC,MAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,OACT,cAAe,CACb,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,CACF,EACD,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,iBACJ,cAAe,CACb,aAAc,gBACf,CACF,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACJ,cAAe,CACb,aAAc,kBACf,CACF,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,OAAQ,UACR,WAAY,yCACZ,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CACN,QAAS,EACV,EACD,cAAe,CACb,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as o}from"react/jsx-runtime";import"@styled/tokens";import
|
|
1
|
+
import{jsx as t,jsxs as o}from"react/jsx-runtime";import"@styled/tokens";import I from"../icons/ico-alert-circle-fill.js";import P from"../icons/ico-caret-right.js";import S from"../icons/ico-checkmark-circle-fill.js";import y from"../icons/ico-dismiss.js";import z from"../icons/ico-info-circle-fill.js";import E from"../icons/ico-lightbulb-fill.js";import R from"../icons/ico-warning-fill.js";import{callout as A}from"../../recipes/callout.js";import{HStack as s,VStack as B}from"@styled/jsx";import{forwardRef as D,useState as p,useRef as H}from"react";import{useButton as V}from"react-aria";const q={branded:E,success:S,error:I,warning:R,neutral:z},u=D((f,h)=>{const{label:b,description:r,size:N="md",variant:n="branded",icon:a=!1,dismissible:l=!1,onPress:e}=f,[g,w]=p(!0),[C,x]=p(!1),m=r?16:20,i=A({size:N,variant:n,icon:a,description:!!r,isDismissed:C,dismissible:l,interactive:!!e}),$=q[n],j=()=>{x(!0)},k=H(null),c=h||k,{buttonProps:v}=V({onPress:e},c),d=()=>o(s,{className:e?"":i.container,onAnimationEnd:()=>w(!1),ref:c,children:[o(B,{alignItems:"flex-start",gap:1.5,children:[o(s,{w:"full",justifyContent:"space-between",children:[o(s,{alignItems:"center",children:[a&&t($,{className:i.icon,width:m,height:m}),t("p",{className:i.label,children:b})]}),l&&t("button",{className:i.button,onClick:j,"aria-label":"dismiss callout",children:t(y,{className:i.button,width:16,height:16})})]}),!!r&&t("p",{className:i.description,children:r})]}),!!e&&t(P,{className:i.button,width:16,height:16})]});return g?e?t("button",{...v,className:i.container,children:t(d,{})}):t(d,{}):null});u.displayName="Callout";export{u as Callout};
|
|
2
2
|
//# sourceMappingURL=callout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n IcoAlertCircleFill,\n IcoCaretRight,\n IcoCheckmarkCircleFill,\n IcoDismiss,\n IcoInfoCircleFill,\n IcoLightbulbFill,\n IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n label: string;\n description?: string;\n variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n dismissible: true;\n onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;\n\nconst svgIcon = {\n branded: IcoLightbulbFill,\n success: IcoCheckmarkCircleFill,\n error: IcoAlertCircleFill,\n warning: IcoWarningFill,\n neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n const { label, description, variant = 'branded', icon = false, dismissible = false, onPress } = props;\n const [isVisible, setIsVisible] = useState(true);\n const [isDismissed, setIsDismissed] = useState(false);\n\n const iconSize = description ? 16 : 20;\n\n const classes = callout({\n variant,\n icon,\n description: !!description,\n isDismissed,\n dismissible,\n interactive: !!onPress,\n });\n\n const IconComponent = svgIcon[variant];\n\n const dismissCallout = () => {\n setIsDismissed(true);\n };\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n const CalloutBase = () => {\n return (\n <HStack className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n <VStack alignItems={'flex-start'} gap={1.5}>\n <HStack w={'full'} justifyContent={'space-between'}>\n <HStack alignItems={'center'}>\n {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n <p className={classes.label}>{label}</p>\n </HStack>\n\n {dismissible && (\n <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n <IcoDismiss className={classes.button} width={16} height={16} />\n </button>\n )}\n </HStack>\n {!!description && <p className={classes.description}>{description}</p>}\n </VStack>\n {!!onPress && <IcoCaretRight className={classes.button} width={16} height={16} />}\n </HStack>\n );\n };\n\n if (!isVisible) {\n return null;\n }\n\n if (onPress) {\n return (\n <button {...buttonProps} className={classes.container}>\n <CalloutBase />\n </button>\n );\n }\n\n return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"
|
|
1
|
+
{"version":3,"file":"callout.js","sources":["../../../../src/components/feedback/callout.tsx"],"sourcesContent":["import {\n IcoAlertCircleFill,\n IcoCaretRight,\n IcoCheckmarkCircleFill,\n IcoDismiss,\n IcoInfoCircleFill,\n IcoLightbulbFill,\n IcoWarningFill,\n} from '@components/icons';\nimport { callout } from '@recipes/callout';\nimport { HStack, VStack } from '@styled/jsx';\nimport { forwardRef, useRef, useState } from 'react';\nimport { useButton } from 'react-aria';\n\ninterface BaseCalloutProps {\n label: string;\n description?: string;\n size?: 'sm' | 'md' | 'lg';\n variant?: 'branded' | 'success' | 'error' | 'warning' | 'neutral';\n icon?: boolean;\n}\n\ninterface DefaultCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress?: never;\n}\n\ninterface DismissibleCalloutProps extends BaseCalloutProps {\n dismissible: true;\n onPress?: never;\n}\n\ninterface InteractiveCalloutProps extends BaseCalloutProps {\n dismissible?: false;\n onPress: () => void;\n}\n\n// Disallows `onPress` and `dismissible` to be set at the same time\nexport type CalloutProps = DefaultCalloutProps | DismissibleCalloutProps | InteractiveCalloutProps;\n\nconst svgIcon = {\n branded: IcoLightbulbFill,\n success: IcoCheckmarkCircleFill,\n error: IcoAlertCircleFill,\n warning: IcoWarningFill,\n neutral: IcoInfoCircleFill,\n};\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>((props, forwardedRef) => {\n const { label, description, size = 'md', variant = 'branded', icon = false, dismissible = false, onPress } = props;\n const [isVisible, setIsVisible] = useState(true);\n const [isDismissed, setIsDismissed] = useState(false);\n\n const iconSize = description ? 16 : 20;\n\n const classes = callout({\n size,\n variant,\n icon,\n description: !!description,\n isDismissed,\n dismissible,\n interactive: !!onPress,\n });\n\n const IconComponent = svgIcon[variant];\n\n const dismissCallout = () => {\n setIsDismissed(true);\n };\n\n const internalRef = useRef(null);\n const ref = forwardedRef || internalRef;\n\n const { buttonProps } = useButton({ onPress }, ref as React.RefObject<HTMLButtonElement>);\n\n const CalloutBase = () => {\n return (\n <HStack className={!onPress ? classes.container : ''} onAnimationEnd={() => setIsVisible(false)} ref={ref}>\n <VStack alignItems={'flex-start'} gap={1.5}>\n <HStack w={'full'} justifyContent={'space-between'}>\n <HStack alignItems={'center'}>\n {icon && <IconComponent className={classes.icon} width={iconSize} height={iconSize} />}\n <p className={classes.label}>{label}</p>\n </HStack>\n\n {dismissible && (\n <button className={classes.button} onClick={dismissCallout} aria-label=\"dismiss callout\">\n <IcoDismiss className={classes.button} width={16} height={16} />\n </button>\n )}\n </HStack>\n {!!description && <p className={classes.description}>{description}</p>}\n </VStack>\n {!!onPress && <IcoCaretRight className={classes.button} width={16} height={16} />}\n </HStack>\n );\n };\n\n if (!isVisible) {\n return null;\n }\n\n if (onPress) {\n return (\n <button {...buttonProps} className={classes.container}>\n <CalloutBase />\n </button>\n );\n }\n\n return <CalloutBase />;\n});\n\nCallout.displayName = 'Callout';\n"],"names":["svgIcon","IcoLightbulbFill","IcoCheckmarkCircleFill","IcoAlertCircleFill","IcoWarningFill","IcoInfoCircleFill","Callout","forwardRef","props","forwardedRef","label","description","size","variant","icon","dismissible","onPress","isVisible","setIsVisible","useState","isDismissed","setIsDismissed","iconSize","classes","callout","IconComponent","dismissCallout","internalRef","useRef","ref","buttonProps","useButton","CalloutBase","_jsxs","HStack","VStack","_jsx","IcoDismiss","IcoCaretRight"],"mappings":"mlBAwCA,MAAMA,EAAU,CACd,QAASC,EACT,QAASC,EACT,MAAOC,EACP,QAASC,EACT,QAASC,GAGEC,EAAUC,EAAyC,CAACC,EAAOC,IAAgB,CACtF,KAAM,CAAE,MAAAC,EAAO,YAAAC,EAAa,KAAAC,EAAO,KAAM,QAAAC,EAAU,UAAW,KAAAC,EAAO,GAAO,YAAAC,EAAc,GAAO,QAAAC,CAAO,EAAKR,EACvG,CAACS,EAAWC,CAAY,EAAIC,EAAS,EAAI,EACzC,CAACC,EAAaC,CAAc,EAAIF,EAAS,EAAK,EAE9CG,EAAWX,EAAc,GAAK,GAE9BY,EAAUC,EAAQ,CACtB,KAAAZ,EACA,QAAAC,EACA,KAAAC,EACA,YAAa,CAAC,CAACH,EACf,YAAAS,EACA,YAAAL,EACA,YAAa,CAAC,CAACC,CAChB,CAAA,EAEKS,EAAgBzB,EAAQa,CAAO,EAE/Ba,EAAiB,IAAK,CAC1BL,EAAe,EAAI,CACrB,EAEMM,EAAcC,EAAO,IAAI,EACzBC,EAAMpB,GAAgBkB,EAEtB,CAAE,YAAAG,CAAa,EAAGC,EAAU,CAAE,QAAAf,CAAS,EAAEa,CAAyC,EAElFG,EAAc,IAEhBC,EAACC,EAAO,CAAA,UAAYlB,EAA8B,GAApBO,EAAQ,UAAgB,eAAgB,IAAML,EAAa,EAAK,EAAG,IAAKW,YACpGI,EAACE,GAAO,WAAY,aAAc,IAAK,cACrCF,EAACC,EAAO,CAAA,EAAG,OAAQ,eAAgB,gBACjC,SAAA,CAAAD,EAACC,EAAO,CAAA,WAAY,SAAQ,SAAA,CACzBpB,GAAQsB,EAACX,EAAa,CAAC,UAAWF,EAAQ,KAAM,MAAOD,EAAU,OAAQA,CAAQ,CAAA,EAClFc,EAAG,IAAA,CAAA,UAAWb,EAAQ,MAAK,SAAGb,CAAK,CAAA,CAAK,IAGzCK,GACCqB,YAAQ,UAAWb,EAAQ,OAAQ,QAASG,EAAc,aAAa,kBACrE,SAAAU,EAACC,EAAW,CAAA,UAAWd,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAEnE,CAAA,CAAA,EAEF,CAAC,CAACZ,GAAeyB,OAAG,UAAWb,EAAQ,YAAc,SAAAZ,GAAgB,CAC/D,CAAA,EACR,CAAC,CAACK,GAAWoB,EAACE,EAAc,CAAA,UAAWf,EAAQ,OAAQ,MAAO,GAAI,OAAQ,EAAM,CAAA,CAAA,CAAA,CAAA,EAKvF,OAAKN,EAIDD,EAEAoB,EAAA,SAAA,CAAA,GAAYN,EAAa,UAAWP,EAAQ,mBAC1Ca,EAACJ,EAAc,CAAA,CAAA,CAAA,CAAA,EAKdI,EAACJ,EAAW,CAAA,CAAA,EAXV,IAYX,CAAC,EAED1B,EAAQ,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{sva as o}from"@styled/css";const e=o({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},
|
|
1
|
+
import{sva as o}from"@styled/css";const e=o({slots:["container","label","description","icon","button","focus"],base:{container:{px:4,py:3,rounded:10,w:"full"},button:{cursor:"pointer",outline:"none",_focusVisible:{outlineColor:"brand.base",outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5,rounded:2}}},variants:{size:{sm:{label:{fontSize:"sm"}},md:{label:{fontSize:"md"}},lg:{label:{fontSize:"lg"}}},variant:{branded:{container:{bg:"brand.lightest",_focusVisible:{outlineColor:"brand.lightest"}},label:{color:"brand.darkest"},description:{color:"brand.darkest"},icon:{color:"brand.darkest"},button:{color:"brand.darkest"}},success:{container:{bg:"positive.lightest",_focusVisible:{outlineColor:"positive.lightest"}},label:{color:"positive.darkest"},description:{color:"positive.darkest"},icon:{color:"positive.darkest"},button:{color:"positive.darkest"}},error:{container:{bg:"negative.lightest",_focusVisible:{outlineColor:"negative.lightest"}},label:{color:"negative.darkest"},description:{color:"negative.darkest"},icon:{color:"negative.darkest"},button:{color:"negative.darkest"}},warning:{container:{bg:"warning.lightest",_focusVisible:{outlineColor:"warning.lightest"}},label:{color:"warning.darkest"},description:{color:"warning.darkest"},icon:{color:"warning.darkest"},button:{color:"warning.darkest"}},neutral:{container:{bg:"surface.secondary",_focusVisible:{outlineColor:"surface.secondary"}},label:{color:"text.secondary"},description:{color:"text.secondary"},icon:{color:"text.secondary"},button:{color:"text.secondary"}}},icon:{true:{description:{ml:7}}},dismissible:{true:{description:{mr:7}}},interactive:{true:{container:{cursor:"pointer",transition:"transform 0.2s ease, opacity 0.2s ease",_active:{transform:"scale(0.95)"},_hover:{opacity:.8},_focusVisible:{outlineStyle:"solid",outlineWidth:"thick",outlineOffset:.5}}}},description:{true:{label:{textTransform:"uppercase",fontSize:"xs",fontWeight:"semibold",letterSpacing:"0.06rem"}}},isDismissed:{true:{container:{animationFillMode:"forwards",animationName:"scaleOut",animationDuration:"150ms",_motionReduce:{scale:1}}}}}});export{e as callout};
|
|
2
2
|
//# sourceMappingURL=callout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n base: {\n container: {\n px: 4,\n py: 3,\n rounded: 10,\n w: 'full',\n },\n
|
|
1
|
+
{"version":3,"file":"callout.js","sources":["../../../src/recipes/callout.ts"],"sourcesContent":["import { sva } from '@styled/css';\n\nexport const callout = sva({\n slots: ['container', 'label', 'description', 'icon', 'button', 'focus'],\n base: {\n container: {\n px: 4,\n py: 3,\n rounded: 10,\n w: 'full',\n },\n button: {\n cursor: 'pointer',\n outline: 'none',\n _focusVisible: {\n outlineColor: 'brand.base',\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n rounded: 2,\n },\n },\n },\n variants: {\n size: {\n sm: {\n label: { fontSize: 'sm' },\n },\n md: {\n label: { fontSize: 'md' },\n },\n lg: {\n label: { fontSize: 'lg' },\n },\n },\n variant: {\n branded: {\n container: {\n bg: 'brand.lightest',\n _focusVisible: {\n outlineColor: 'brand.lightest',\n },\n },\n label: {\n color: 'brand.darkest',\n },\n description: {\n color: 'brand.darkest',\n },\n icon: {\n color: 'brand.darkest',\n },\n button: {\n color: 'brand.darkest',\n },\n },\n success: {\n container: {\n bg: 'positive.lightest',\n _focusVisible: {\n outlineColor: 'positive.lightest',\n },\n },\n label: {\n color: 'positive.darkest',\n },\n description: {\n color: 'positive.darkest',\n },\n icon: {\n color: 'positive.darkest',\n },\n button: {\n color: 'positive.darkest',\n },\n },\n error: {\n container: {\n bg: 'negative.lightest',\n _focusVisible: {\n outlineColor: 'negative.lightest',\n },\n },\n label: {\n color: 'negative.darkest',\n },\n description: {\n color: 'negative.darkest',\n },\n icon: {\n color: 'negative.darkest',\n },\n button: {\n color: 'negative.darkest',\n },\n },\n warning: {\n container: {\n bg: 'warning.lightest',\n _focusVisible: {\n outlineColor: 'warning.lightest',\n },\n },\n label: {\n color: 'warning.darkest',\n },\n description: {\n color: 'warning.darkest',\n },\n icon: {\n color: 'warning.darkest',\n },\n button: {\n color: 'warning.darkest',\n },\n },\n neutral: {\n container: {\n bg: 'surface.secondary',\n _focusVisible: {\n outlineColor: 'surface.secondary',\n },\n },\n label: {\n color: 'text.secondary',\n },\n description: {\n color: 'text.secondary',\n },\n icon: {\n color: 'text.secondary',\n },\n button: {\n color: 'text.secondary',\n },\n },\n },\n icon: {\n true: {\n description: {\n ml: 7,\n },\n },\n },\n dismissible: {\n true: {\n description: {\n mr: 7,\n },\n },\n },\n interactive: {\n true: {\n container: {\n cursor: 'pointer',\n transition: 'transform 0.2s ease, opacity 0.2s ease',\n _active: { transform: 'scale(0.95)' },\n _hover: {\n opacity: 0.8,\n },\n _focusVisible: {\n outlineStyle: 'solid',\n outlineWidth: 'thick',\n outlineOffset: 0.5,\n },\n },\n },\n },\n description: {\n true: {\n label: {\n textTransform: 'uppercase',\n fontSize: 'xs',\n fontWeight: 'semibold',\n letterSpacing: '0.06rem',\n },\n },\n },\n isDismissed: {\n true: {\n container: {\n animationFillMode: 'forwards',\n animationName: 'scaleOut',\n animationDuration: '150ms',\n _motionReduce: { scale: 1 },\n },\n },\n },\n },\n});\n"],"names":["callout","sva"],"mappings":"kCAEa,MAAAA,EAAUC,EAAI,CACzB,MAAO,CAAC,YAAa,QAAS,cAAe,OAAQ,SAAU,OAAO,EACtE,KAAM,CACJ,UAAW,CACT,GAAI,EACJ,GAAI,EACJ,QAAS,GACT,EAAG,MACJ,EACD,OAAQ,CACN,OAAQ,UACR,QAAS,OACT,cAAe,CACb,aAAc,aACd,aAAc,QACd,aAAc,QACd,cAAe,GACf,QAAS,CACV,CACF,CACF,EACD,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,EACD,GAAI,CACF,MAAO,CAAE,SAAU,IAAM,CAC1B,CACF,EACD,QAAS,CACP,QAAS,CACP,UAAW,CACT,GAAI,iBACJ,cAAe,CACb,aAAc,gBACf,CACF,EACD,MAAO,CACL,MAAO,eACR,EACD,YAAa,CACX,MAAO,eACR,EACD,KAAM,CACJ,MAAO,eACR,EACD,OAAQ,CACN,MAAO,eACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,MAAO,CACL,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,kBACR,EACD,YAAa,CACX,MAAO,kBACR,EACD,KAAM,CACJ,MAAO,kBACR,EACD,OAAQ,CACN,MAAO,kBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,mBACJ,cAAe,CACb,aAAc,kBACf,CACF,EACD,MAAO,CACL,MAAO,iBACR,EACD,YAAa,CACX,MAAO,iBACR,EACD,KAAM,CACJ,MAAO,iBACR,EACD,OAAQ,CACN,MAAO,iBACR,CACF,EACD,QAAS,CACP,UAAW,CACT,GAAI,oBACJ,cAAe,CACb,aAAc,mBACf,CACF,EACD,MAAO,CACL,MAAO,gBACR,EACD,YAAa,CACX,MAAO,gBACR,EACD,KAAM,CACJ,MAAO,gBACR,EACD,OAAQ,CACN,MAAO,gBACR,CACF,CACF,EACD,KAAM,CACJ,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,YAAa,CACX,GAAI,CACL,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,OAAQ,UACR,WAAY,yCACZ,QAAS,CAAE,UAAW,aAAe,EACrC,OAAQ,CACN,QAAS,EACV,EACD,cAAe,CACb,aAAc,QACd,aAAc,QACd,cAAe,EAChB,CACF,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,MAAO,CACL,cAAe,YACf,SAAU,KACV,WAAY,WACZ,cAAe,SAChB,CACF,CACF,EACD,YAAa,CACX,KAAM,CACJ,UAAW,CACT,kBAAmB,WACnB,cAAe,WACf,kBAAmB,QACnB,cAAe,CAAE,MAAO,CAAG,CAC5B,CACF,CACF,CACF,CACF,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/callout.tsx"],"names":[],"mappings":";AAcA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,mBAAoB,SAAQ,gBAAgB;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,WAAW,EAAE,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAUnG,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/callout.tsx"],"names":[],"mappings":";AAcA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IAClE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,mBAAoB,SAAQ,gBAAgB;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,WAAW,EAAE,IAAI,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,uBAAwB,SAAQ,gBAAgB;IACxD,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAGD,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAUnG,eAAO,MAAM,OAAO,yGAgElB,CAAC"}
|
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
export declare const callout: import("../../styled-system/types").SlotRecipeRuntimeFn<"container" | "label" | "description" | "icon" | "button" | "focus", {
|
|
2
|
+
size: {
|
|
3
|
+
sm: {
|
|
4
|
+
label: {
|
|
5
|
+
fontSize: "sm";
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
md: {
|
|
9
|
+
label: {
|
|
10
|
+
fontSize: "md";
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
lg: {
|
|
14
|
+
label: {
|
|
15
|
+
fontSize: "lg";
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
2
19
|
variant: {
|
|
3
20
|
branded: {
|
|
4
21
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../src/recipes/callout.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../../src/recipes/callout.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2LlB,CAAC"}
|