@mirohq/design-system-scroll-area 0.1.21 → 0.2.1-colors.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/dist/main.js +2 -2
- package/dist/main.js.map +1 -1
- package/dist/module.js +2 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +317 -121
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -39,7 +39,7 @@ const Scrollbar = React__default["default"].forwardRef((props, forwardRef) => /*
|
|
|
39
39
|
|
|
40
40
|
const StyledThumb = designSystemStitches.styled(reactScrollArea.Thumb, {
|
|
41
41
|
flex: 1,
|
|
42
|
-
background: "$background-neutrals-
|
|
42
|
+
background: "$background-neutrals-scrollbar",
|
|
43
43
|
borderRadius: "$50",
|
|
44
44
|
position: "relative",
|
|
45
45
|
"&::before": {
|
|
@@ -54,7 +54,7 @@ const StyledThumb = designSystemStitches.styled(reactScrollArea.Thumb, {
|
|
|
54
54
|
minHeight: "$6"
|
|
55
55
|
},
|
|
56
56
|
"&:hover": {
|
|
57
|
-
backgroundColor: "$background-neutrals-
|
|
57
|
+
backgroundColor: "$background-neutrals-scrollbar-hover"
|
|
58
58
|
}
|
|
59
59
|
});
|
|
60
60
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n width: '100%',\n height: '100%',\n padding: '$50',\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {}\n\nexport const Viewport = React.forwardRef<\n ElementRef<typeof StyledViewport>,\n ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n display: 'flex',\n // ensures no selection\n userSelect: 'none',\n // disable browser handling of all panning and zooming gestures on touch devices\n touchAction: 'none',\n background: 'transparent',\n transition: 'background 160ms ease-out',\n '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n '&[data-orientation=\"horizontal\"]': {\n flexDirection: 'column',\n height: '$1',\n padding: '0 2px',\n },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries.\n */\n forceMount?: true\n\n /**\n * The orientation of the scrollbar.\n */\n orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n ElementRef<typeof StyledScrollbar>,\n ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n flex: 1,\n background: '$background-neutrals-
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n width: '100%',\n height: '100%',\n padding: '$50',\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {}\n\nexport const Viewport = React.forwardRef<\n ElementRef<typeof StyledViewport>,\n ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n display: 'flex',\n // ensures no selection\n userSelect: 'none',\n // disable browser handling of all panning and zooming gestures on touch devices\n touchAction: 'none',\n background: 'transparent',\n transition: 'background 160ms ease-out',\n '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n '&[data-orientation=\"horizontal\"]': {\n flexDirection: 'column',\n height: '$1',\n padding: '0 2px',\n },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries.\n */\n forceMount?: true\n\n /**\n * The orientation of the scrollbar.\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n ElementRef<typeof StyledScrollbar>,\n ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n flex: 1,\n background: '$background-neutrals-scrollbar',\n borderRadius: '$50',\n position: 'relative',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '100%',\n height: '100%',\n minWidth: '$6',\n minHeight: '$6',\n },\n '&:hover': {\n backgroundColor: '$background-neutrals-scrollbar-hover',\n },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport interface ThumbProps extends StyledThumbProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n ThumbProps\n>((props, forwardRef) => <StyledThumb {...props} ref={forwardRef} />)\n","import React from 'react'\nimport { Corner as RadixCorner } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\n\nconst StyledCorner = styled(RadixCorner)\ntype StyledCornerProps = StrictComponentProps<typeof StyledCorner>\n\nexport interface CornerProps extends StyledCornerProps {}\n\nexport const Corner = React.forwardRef<\n ElementRef<typeof StyledCorner>,\n CornerProps\n>((props, forwardRef) => <StyledCorner {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Root as RadixScrollArea } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollArea = styled(RadixScrollArea, {\n overflow: 'hidden',\n})\nexport type StyledScrollAreaProps = StrictComponentProps<\n typeof StyledScrollArea\n>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Viewport } from './partials/viewport'\nimport { Scrollbar } from './partials/scrollbar'\nimport { Thumb } from './partials/thumb'\nimport { Corner } from './partials/corner'\nimport { StyledScrollArea } from './scroll-area.styled'\nimport type { StyledScrollAreaProps } from './scroll-area.styled'\n\nexport interface ScrollAreaProps extends StyledScrollAreaProps {\n children: React.ReactNode\n\n /**\n * Describes the nature of scrollbar visibility, similar to how the scrollbar\n * preferences in MacOS control visibility of native scrollbars. \"auto\" means\n * that scrollbars are visible when content is overflowing on the corresponding\n * orientation. \"always\" means that scrollbars are always visible regardless of\n * whether the content is overflowing. \"scroll\" means that scrollbars are\n * visible when the user is scrolling along its corresponding orientation.\n * \"hover\" when the user is scrolling along its corresponding orientation and\n * when the user is hovering over the scroll area.\n * @default hover\n */\n type?: 'auto' | 'always' | 'scroll' | 'hover'\n\n /**\n * The reading direction of the scroll area. If omitted, inherits globally\n * from DirectionProvider or assumes LTR (left-to-right) reading mode.\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * If type is set to either \"scroll\" or \"hover\", this prop determines the\n * length of time, in milliseconds, before the scrollbars are hidden after the\n * user stops interacting with scrollbars.\n */\n scrollHideDelay?: number\n}\n\nexport const ScrollArea = React.forwardRef<\n ElementRef<typeof StyledScrollArea>,\n ScrollAreaProps\n>((props, forwardRef) => (\n <StyledScrollArea {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ScrollAreaProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Viewport: typeof Viewport\n Scrollbar: typeof Scrollbar\n Thumb: typeof Thumb\n Corner: typeof Corner\n}\n\nScrollArea.Viewport = Viewport\nScrollArea.Scrollbar = Scrollbar\nScrollArea.Thumb = Thumb\nScrollArea.Corner = Corner\n"],"names":["styled","RadixViewport","React","jsx","RadixScrollbar","RadixThumb","RadixCorner","RadixScrollArea"],"mappings":";;;;;;;;;;;;;AAIa,MAAA,cAAA,GAAiBA,4BAAOC,wBAAe,EAAA;AAAA,EAClD,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,OAAS,EAAA,KAAA;AACX,CAAC,CAAA;;ACAM,MAAM,QAAW,GAAAC,yBAAA,CAAM,UAG5B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBC,cAAA,CAAA,cAAA,EAAA,EAAgB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACP1D,MAAA,eAAA,GAAkBH,4BAAOI,yBAAgB,EAAA;AAAA,EACpD,OAAS,EAAA,MAAA;AAAA;AAAA,EAET,UAAY,EAAA,MAAA;AAAA;AAAA,EAEZ,WAAa,EAAA,MAAA;AAAA,EACb,UAAY,EAAA,aAAA;AAAA,EACZ,UAAY,EAAA,2BAAA;AAAA,EACZ,gCAAkC,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAAW,IAAK,EAAA;AAAA,EACjE,kCAAoC,EAAA;AAAA,IAClC,aAAe,EAAA,QAAA;AAAA,IACf,MAAQ,EAAA,IAAA;AAAA,IACR,OAAS,EAAA,OAAA;AAAA,GACX;AACF,CAAC,CAAA;;ACEM,MAAM,SAAY,GAAAF,yBAAA,CAAM,UAG7B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBC,cAAA,CAAA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACnB3D,MAAA,WAAA,GAAcH,4BAAOK,qBAAY,EAAA;AAAA,EAC5C,IAAM,EAAA,CAAA;AAAA,EACN,UAAY,EAAA,gCAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,WAAa,EAAA;AAAA,IACX,OAAS,EAAA,IAAA;AAAA,IACT,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,uBAAA;AAAA,IACX,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,SAAW,EAAA,IAAA;AAAA,GACb;AAAA,EACA,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,sCAAA;AAAA,GACnB;AACF,CAAC,CAAA;;ACTM,MAAM,KAAQ,GAAAH,yBAAA,CAAM,UAGzB,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBC,cAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACXpE,MAAM,YAAA,GAAeH,4BAAOM,sBAAW,CAAA,CAAA;AAKhC,MAAM,MAAS,GAAAJ,yBAAA,CAAM,UAG1B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgBC,cAAA,CAAA,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACVxD,MAAA,gBAAA,GAAmBH,4BAAOO,oBAAiB,EAAA;AAAA,EACtD,QAAU,EAAA,QAAA;AACZ,CAAC,CAAA;;ACmCM,MAAM,UAAa,GAAAL,yBAAA,CAAM,UAG9B,CAAA,CAAC,KAAO,EAAA,UAAA,qBACPC,cAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAC/C,EAAA;AAYD,UAAA,CAAW,QAAW,GAAA,QAAA,CAAA;AACtB,UAAA,CAAW,SAAY,GAAA,SAAA,CAAA;AACvB,UAAA,CAAW,KAAQ,GAAA,KAAA,CAAA;AACnB,UAAA,CAAW,MAAS,GAAA,MAAA;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -31,7 +31,7 @@ const Scrollbar = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(St
|
|
|
31
31
|
|
|
32
32
|
const StyledThumb = styled(Thumb$1, {
|
|
33
33
|
flex: 1,
|
|
34
|
-
background: "$background-neutrals-
|
|
34
|
+
background: "$background-neutrals-scrollbar",
|
|
35
35
|
borderRadius: "$50",
|
|
36
36
|
position: "relative",
|
|
37
37
|
"&::before": {
|
|
@@ -46,7 +46,7 @@ const StyledThumb = styled(Thumb$1, {
|
|
|
46
46
|
minHeight: "$6"
|
|
47
47
|
},
|
|
48
48
|
"&:hover": {
|
|
49
|
-
backgroundColor: "$background-neutrals-
|
|
49
|
+
backgroundColor: "$background-neutrals-scrollbar-hover"
|
|
50
50
|
}
|
|
51
51
|
});
|
|
52
52
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n width: '100%',\n height: '100%',\n padding: '$50',\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {}\n\nexport const Viewport = React.forwardRef<\n ElementRef<typeof StyledViewport>,\n ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n display: 'flex',\n // ensures no selection\n userSelect: 'none',\n // disable browser handling of all panning and zooming gestures on touch devices\n touchAction: 'none',\n background: 'transparent',\n transition: 'background 160ms ease-out',\n '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n '&[data-orientation=\"horizontal\"]': {\n flexDirection: 'column',\n height: '$1',\n padding: '0 2px',\n },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries.\n */\n forceMount?: true\n\n /**\n * The orientation of the scrollbar.\n */\n orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n ElementRef<typeof StyledScrollbar>,\n ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n flex: 1,\n background: '$background-neutrals-
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/scrollbar.styled.tsx","../src/partials/scrollbar.tsx","../src/partials/thumb.styled.tsx","../src/partials/thumb.tsx","../src/partials/corner.tsx","../src/scroll-area.styled.tsx","../src/scroll-area.tsx"],"sourcesContent":["import { Viewport as RadixViewport } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledViewport = styled(RadixViewport, {\n width: '100%',\n height: '100%',\n padding: '$50',\n})\n\nexport type StyledViewportProps = StrictComponentProps<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {}\n\nexport const Viewport = React.forwardRef<\n ElementRef<typeof StyledViewport>,\n ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Scrollbar as RadixScrollbar } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollbar = styled(RadixScrollbar, {\n display: 'flex',\n // ensures no selection\n userSelect: 'none',\n // disable browser handling of all panning and zooming gestures on touch devices\n touchAction: 'none',\n background: 'transparent',\n transition: 'background 160ms ease-out',\n '&[data-orientation=\"vertical\"]': { width: '$1', minHeight: '$2' },\n '&[data-orientation=\"horizontal\"]': {\n flexDirection: 'column',\n height: '$1',\n padding: '0 2px',\n },\n})\n\nexport type StyledScrollbarProps = StrictComponentProps<typeof StyledScrollbar>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport { StyledScrollbar } from './scrollbar.styled'\nimport type { StyledScrollbarProps } from './scrollbar.styled'\n\nexport interface ScrollbarProps extends StyledScrollbarProps {\n /**\n * Used to force mounting when more control is needed. Useful when controlling\n * animation with React animation libraries.\n */\n forceMount?: true\n\n /**\n * The orientation of the scrollbar.\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical'\n}\n\nexport const Scrollbar = React.forwardRef<\n ElementRef<typeof StyledScrollbar>,\n ScrollbarProps\n>((props, forwardRef) => <StyledScrollbar {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Thumb as RadixThumb } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledThumb = styled(RadixThumb, {\n flex: 1,\n background: '$background-neutrals-scrollbar',\n borderRadius: '$50',\n position: 'relative',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '100%',\n height: '100%',\n minWidth: '$6',\n minHeight: '$6',\n },\n '&:hover': {\n backgroundColor: '$background-neutrals-scrollbar-hover',\n },\n})\nexport type StyledThumbProps = StrictComponentProps<typeof StyledThumb>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport interface ThumbProps extends StyledThumbProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n}\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n ThumbProps\n>((props, forwardRef) => <StyledThumb {...props} ref={forwardRef} />)\n","import React from 'react'\nimport { Corner as RadixCorner } from '@radix-ui/react-scroll-area'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport type { ElementRef } from 'react'\n\nconst StyledCorner = styled(RadixCorner)\ntype StyledCornerProps = StrictComponentProps<typeof StyledCorner>\n\nexport interface CornerProps extends StyledCornerProps {}\n\nexport const Corner = React.forwardRef<\n ElementRef<typeof StyledCorner>,\n CornerProps\n>((props, forwardRef) => <StyledCorner {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\nimport { Root as RadixScrollArea } from '@radix-ui/react-scroll-area'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledScrollArea = styled(RadixScrollArea, {\n overflow: 'hidden',\n})\nexport type StyledScrollAreaProps = StrictComponentProps<\n typeof StyledScrollArea\n>\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport { Viewport } from './partials/viewport'\nimport { Scrollbar } from './partials/scrollbar'\nimport { Thumb } from './partials/thumb'\nimport { Corner } from './partials/corner'\nimport { StyledScrollArea } from './scroll-area.styled'\nimport type { StyledScrollAreaProps } from './scroll-area.styled'\n\nexport interface ScrollAreaProps extends StyledScrollAreaProps {\n children: React.ReactNode\n\n /**\n * Describes the nature of scrollbar visibility, similar to how the scrollbar\n * preferences in MacOS control visibility of native scrollbars. \"auto\" means\n * that scrollbars are visible when content is overflowing on the corresponding\n * orientation. \"always\" means that scrollbars are always visible regardless of\n * whether the content is overflowing. \"scroll\" means that scrollbars are\n * visible when the user is scrolling along its corresponding orientation.\n * \"hover\" when the user is scrolling along its corresponding orientation and\n * when the user is hovering over the scroll area.\n * @default hover\n */\n type?: 'auto' | 'always' | 'scroll' | 'hover'\n\n /**\n * The reading direction of the scroll area. If omitted, inherits globally\n * from DirectionProvider or assumes LTR (left-to-right) reading mode.\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * If type is set to either \"scroll\" or \"hover\", this prop determines the\n * length of time, in milliseconds, before the scrollbars are hidden after the\n * user stops interacting with scrollbars.\n */\n scrollHideDelay?: number\n}\n\nexport const ScrollArea = React.forwardRef<\n ElementRef<typeof StyledScrollArea>,\n ScrollAreaProps\n>((props, forwardRef) => (\n <StyledScrollArea {...props} ref={forwardRef} />\n)) as ForwardRefExoticComponent<ScrollAreaProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Viewport: typeof Viewport\n Scrollbar: typeof Scrollbar\n Thumb: typeof Thumb\n Corner: typeof Corner\n}\n\nScrollArea.Viewport = Viewport\nScrollArea.Scrollbar = Scrollbar\nScrollArea.Thumb = Thumb\nScrollArea.Corner = Corner\n"],"names":["RadixViewport","RadixScrollbar","RadixThumb","RadixCorner","RadixScrollArea"],"mappings":";;;;;AAIa,MAAA,cAAA,GAAiB,OAAOA,UAAe,EAAA;AAAA,EAClD,KAAO,EAAA,MAAA;AAAA,EACP,MAAQ,EAAA,MAAA;AAAA,EACR,OAAS,EAAA,KAAA;AACX,CAAC,CAAA;;ACAM,MAAM,QAAW,GAAA,KAAA,CAAM,UAG5B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,cAAA,EAAA,EAAgB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACP1D,MAAA,eAAA,GAAkB,OAAOC,WAAgB,EAAA;AAAA,EACpD,OAAS,EAAA,MAAA;AAAA;AAAA,EAET,UAAY,EAAA,MAAA;AAAA;AAAA,EAEZ,WAAa,EAAA,MAAA;AAAA,EACb,UAAY,EAAA,aAAA;AAAA,EACZ,UAAY,EAAA,2BAAA;AAAA,EACZ,gCAAkC,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,WAAW,IAAK,EAAA;AAAA,EACjE,kCAAoC,EAAA;AAAA,IAClC,aAAe,EAAA,QAAA;AAAA,IACf,MAAQ,EAAA,IAAA;AAAA,IACR,OAAS,EAAA,OAAA;AAAA,GACX;AACF,CAAC,CAAA;;ACEM,MAAM,SAAY,GAAA,KAAA,CAAM,UAG7B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,eAAA,EAAA,EAAiB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACnB3D,MAAA,WAAA,GAAc,OAAOC,OAAY,EAAA;AAAA,EAC5C,IAAM,EAAA,CAAA;AAAA,EACN,UAAY,EAAA,gCAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAAA,EACd,QAAU,EAAA,UAAA;AAAA,EACV,WAAa,EAAA;AAAA,IACX,OAAS,EAAA,IAAA;AAAA,IACT,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,KAAA;AAAA,IACN,SAAW,EAAA,uBAAA;AAAA,IACX,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,SAAW,EAAA,IAAA;AAAA,GACb;AAAA,EACA,SAAW,EAAA;AAAA,IACT,eAAiB,EAAA,sCAAA;AAAA,GACnB;AACF,CAAC,CAAA;;ACTM,MAAM,KAAQ,GAAA,KAAA,CAAM,UAGzB,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,WAAA,EAAA,EAAa,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACXpE,MAAM,YAAA,GAAe,OAAOC,QAAW,CAAA,CAAA;AAKhC,MAAM,MAAS,GAAA,KAAA,CAAM,UAG1B,CAAA,CAAC,KAAO,EAAA,UAAA,qBAAgB,GAAA,CAAA,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAAE,CAAA;;ACVxD,MAAA,gBAAA,GAAmB,OAAOC,IAAiB,EAAA;AAAA,EACtD,QAAU,EAAA,QAAA;AACZ,CAAC,CAAA;;ACmCM,MAAM,UAAa,GAAA,KAAA,CAAM,UAG9B,CAAA,CAAC,KAAO,EAAA,UAAA,qBACP,GAAA,CAAA,gBAAA,EAAA,EAAkB,GAAG,KAAA,EAAO,GAAK,EAAA,UAAA,EAAY,CAC/C,EAAA;AAYD,UAAA,CAAW,QAAW,GAAA,QAAA,CAAA;AACtB,UAAA,CAAW,SAAY,GAAA,SAAA,CAAA;AACvB,UAAA,CAAW,KAAQ,GAAA,KAAA,CAAA;AACnB,UAAA,CAAW,MAAS,GAAA,MAAA;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -15,63 +15,103 @@ declare const StyledViewport: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
|
|
|
15
15
|
};
|
|
16
16
|
colors: {
|
|
17
17
|
readonly black: any;
|
|
18
|
+
readonly 'blue-50': any;
|
|
18
19
|
readonly 'blue-100': any;
|
|
20
|
+
readonly 'blue-150': any;
|
|
19
21
|
readonly 'blue-200': any;
|
|
22
|
+
readonly 'blue-250': any;
|
|
20
23
|
readonly 'blue-300': any;
|
|
24
|
+
readonly 'blue-350': any;
|
|
21
25
|
readonly 'blue-400': any;
|
|
26
|
+
readonly 'blue-450': any;
|
|
22
27
|
readonly 'blue-500': any;
|
|
28
|
+
readonly 'blue-550': any;
|
|
23
29
|
readonly 'blue-600': any;
|
|
30
|
+
readonly 'blue-650': any;
|
|
24
31
|
readonly 'blue-700': any;
|
|
32
|
+
readonly 'blue-750': any;
|
|
25
33
|
readonly 'blue-800': any;
|
|
34
|
+
readonly 'blue-850': any;
|
|
26
35
|
readonly 'blue-900': any;
|
|
27
|
-
readonly 'blue-
|
|
36
|
+
readonly 'blue-950': any;
|
|
37
|
+
readonly 'gray-50': any;
|
|
28
38
|
readonly 'gray-100': any;
|
|
39
|
+
readonly 'gray-150': any;
|
|
29
40
|
readonly 'gray-200': any;
|
|
41
|
+
readonly 'gray-250': any;
|
|
30
42
|
readonly 'gray-300': any;
|
|
43
|
+
readonly 'gray-350': any;
|
|
31
44
|
readonly 'gray-400': any;
|
|
45
|
+
readonly 'gray-450': any;
|
|
32
46
|
readonly 'gray-500': any;
|
|
47
|
+
readonly 'gray-550': any;
|
|
33
48
|
readonly 'gray-600': any;
|
|
49
|
+
readonly 'gray-650': any;
|
|
34
50
|
readonly 'gray-700': any;
|
|
51
|
+
readonly 'gray-750': any;
|
|
35
52
|
readonly 'gray-800': any;
|
|
53
|
+
readonly 'gray-850': any;
|
|
36
54
|
readonly 'gray-900': any;
|
|
55
|
+
readonly 'gray-950': any;
|
|
56
|
+
readonly 'green-50': any;
|
|
37
57
|
readonly 'green-100': any;
|
|
58
|
+
readonly 'green-150': any;
|
|
38
59
|
readonly 'green-200': any;
|
|
60
|
+
readonly 'green-250': any;
|
|
39
61
|
readonly 'green-300': any;
|
|
62
|
+
readonly 'green-350': any;
|
|
40
63
|
readonly 'green-400': any;
|
|
64
|
+
readonly 'green-450': any;
|
|
41
65
|
readonly 'green-500': any;
|
|
66
|
+
readonly 'green-550': any;
|
|
42
67
|
readonly 'green-600': any;
|
|
68
|
+
readonly 'green-650': any;
|
|
43
69
|
readonly 'green-700': any;
|
|
70
|
+
readonly 'green-750': any;
|
|
44
71
|
readonly 'green-800': any;
|
|
72
|
+
readonly 'green-850': any;
|
|
45
73
|
readonly 'green-900': any;
|
|
46
|
-
readonly '
|
|
47
|
-
readonly '
|
|
48
|
-
readonly 'indigo-300': any;
|
|
49
|
-
readonly 'indigo-400': any;
|
|
50
|
-
readonly 'indigo-500': any;
|
|
51
|
-
readonly 'indigo-600': any;
|
|
52
|
-
readonly 'indigo-700': any;
|
|
53
|
-
readonly 'indigo-800': any;
|
|
54
|
-
readonly 'indigo-900': any;
|
|
74
|
+
readonly 'green-950': any;
|
|
75
|
+
readonly 'red-50': any;
|
|
55
76
|
readonly 'red-100': any;
|
|
77
|
+
readonly 'red-150': any;
|
|
56
78
|
readonly 'red-200': any;
|
|
79
|
+
readonly 'red-250': any;
|
|
57
80
|
readonly 'red-300': any;
|
|
81
|
+
readonly 'red-350': any;
|
|
58
82
|
readonly 'red-400': any;
|
|
83
|
+
readonly 'red-450': any;
|
|
59
84
|
readonly 'red-500': any;
|
|
85
|
+
readonly 'red-550': any;
|
|
60
86
|
readonly 'red-600': any;
|
|
87
|
+
readonly 'red-650': any;
|
|
61
88
|
readonly 'red-700': any;
|
|
89
|
+
readonly 'red-750': any;
|
|
62
90
|
readonly 'red-800': any;
|
|
91
|
+
readonly 'red-850': any;
|
|
63
92
|
readonly 'red-900': any;
|
|
93
|
+
readonly 'red-950': any;
|
|
64
94
|
readonly transparent: any;
|
|
65
95
|
readonly white: any;
|
|
96
|
+
readonly 'yellow-50': any;
|
|
66
97
|
readonly 'yellow-100': any;
|
|
98
|
+
readonly 'yellow-150': any;
|
|
67
99
|
readonly 'yellow-200': any;
|
|
100
|
+
readonly 'yellow-250': any;
|
|
68
101
|
readonly 'yellow-300': any;
|
|
102
|
+
readonly 'yellow-350': any;
|
|
69
103
|
readonly 'yellow-400': any;
|
|
104
|
+
readonly 'yellow-450': any;
|
|
70
105
|
readonly 'yellow-500': any;
|
|
106
|
+
readonly 'yellow-550': any;
|
|
71
107
|
readonly 'yellow-600': any;
|
|
108
|
+
readonly 'yellow-650': any;
|
|
72
109
|
readonly 'yellow-700': any;
|
|
110
|
+
readonly 'yellow-750': any;
|
|
73
111
|
readonly 'yellow-800': any;
|
|
112
|
+
readonly 'yellow-850': any;
|
|
74
113
|
readonly 'yellow-900': any;
|
|
114
|
+
readonly 'yellow-950': any;
|
|
75
115
|
"background-alpha-active"?: any;
|
|
76
116
|
"background-alpha-hover"?: any;
|
|
77
117
|
"background-danger-prominent"?: any;
|
|
@@ -92,27 +132,19 @@ declare const StyledViewport: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
|
|
|
92
132
|
"background-neutrals-inverted-subtle"?: any;
|
|
93
133
|
"background-neutrals-page"?: any;
|
|
94
134
|
"background-neutrals-page-subtle"?: any;
|
|
95
|
-
"background-neutrals-
|
|
96
|
-
"background-neutrals-
|
|
97
|
-
"background-neutrals-
|
|
98
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
99
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
135
|
+
"background-neutrals-scrollbar"?: any;
|
|
136
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
137
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
100
138
|
"background-neutrals-subtle"?: any;
|
|
101
139
|
"background-neutrals-subtle-active"?: any;
|
|
102
140
|
"background-neutrals-subtle-hover"?: any;
|
|
103
141
|
"background-primary-prominent"?: any;
|
|
104
142
|
"background-primary-prominent-active"?: any;
|
|
105
|
-
"background-primary-prominent-expanded"?: any;
|
|
106
143
|
"background-primary-prominent-hover"?: any;
|
|
107
|
-
"background-primary-prominent-pressed"?: any;
|
|
108
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
109
144
|
"background-primary-prominent-selected"?: any;
|
|
110
145
|
"background-primary-subtle"?: any;
|
|
111
146
|
"background-primary-subtle-active"?: any;
|
|
112
|
-
"background-primary-subtle-expanded"?: any;
|
|
113
147
|
"background-primary-subtle-hover"?: any;
|
|
114
|
-
"background-primary-subtle-pressed"?: any;
|
|
115
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
116
148
|
"background-primary-subtle-selected"?: any;
|
|
117
149
|
"background-success"?: any;
|
|
118
150
|
"background-success-prominent"?: any;
|
|
@@ -123,9 +155,15 @@ declare const StyledViewport: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
|
|
|
123
155
|
"border-danger"?: any;
|
|
124
156
|
"border-danger-active"?: any;
|
|
125
157
|
"border-danger-hover"?: any;
|
|
158
|
+
"border-focus-error-inner"?: any;
|
|
159
|
+
"border-focus-error-middle"?: any;
|
|
160
|
+
"border-focus-error-outer"?: any;
|
|
126
161
|
"border-focus-inner"?: any;
|
|
127
162
|
"border-focus-middle"?: any;
|
|
128
163
|
"border-focus-outer"?: any;
|
|
164
|
+
"border-focus-success-inner"?: any;
|
|
165
|
+
"border-focus-success-middle"?: any;
|
|
166
|
+
"border-focus-success-outer"?: any;
|
|
129
167
|
"border-neutrals"?: any;
|
|
130
168
|
"border-neutrals-active"?: any;
|
|
131
169
|
"border-neutrals-controls"?: any;
|
|
@@ -218,13 +256,13 @@ declare const StyledViewport: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_
|
|
|
218
256
|
readonly body: "Open Sans, sans-serif";
|
|
219
257
|
};
|
|
220
258
|
radii: {
|
|
221
|
-
readonly none: 0;
|
|
222
|
-
readonly half: "999em";
|
|
223
259
|
readonly 25: "2px";
|
|
224
260
|
readonly 50: "4px";
|
|
225
261
|
readonly 75: "6px";
|
|
226
262
|
readonly 100: "8px";
|
|
227
263
|
readonly 200: "16px";
|
|
264
|
+
readonly half: "999px";
|
|
265
|
+
readonly none: "0px";
|
|
228
266
|
};
|
|
229
267
|
shadows: {
|
|
230
268
|
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
|
|
@@ -510,63 +548,103 @@ declare const StyledScrollbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
|
|
|
510
548
|
};
|
|
511
549
|
colors: {
|
|
512
550
|
readonly black: any;
|
|
551
|
+
readonly 'blue-50': any;
|
|
513
552
|
readonly 'blue-100': any;
|
|
553
|
+
readonly 'blue-150': any;
|
|
514
554
|
readonly 'blue-200': any;
|
|
555
|
+
readonly 'blue-250': any;
|
|
515
556
|
readonly 'blue-300': any;
|
|
557
|
+
readonly 'blue-350': any;
|
|
516
558
|
readonly 'blue-400': any;
|
|
559
|
+
readonly 'blue-450': any;
|
|
517
560
|
readonly 'blue-500': any;
|
|
561
|
+
readonly 'blue-550': any;
|
|
518
562
|
readonly 'blue-600': any;
|
|
563
|
+
readonly 'blue-650': any;
|
|
519
564
|
readonly 'blue-700': any;
|
|
565
|
+
readonly 'blue-750': any;
|
|
520
566
|
readonly 'blue-800': any;
|
|
567
|
+
readonly 'blue-850': any;
|
|
521
568
|
readonly 'blue-900': any;
|
|
522
|
-
readonly 'blue-
|
|
569
|
+
readonly 'blue-950': any;
|
|
570
|
+
readonly 'gray-50': any;
|
|
523
571
|
readonly 'gray-100': any;
|
|
572
|
+
readonly 'gray-150': any;
|
|
524
573
|
readonly 'gray-200': any;
|
|
574
|
+
readonly 'gray-250': any;
|
|
525
575
|
readonly 'gray-300': any;
|
|
576
|
+
readonly 'gray-350': any;
|
|
526
577
|
readonly 'gray-400': any;
|
|
578
|
+
readonly 'gray-450': any;
|
|
527
579
|
readonly 'gray-500': any;
|
|
580
|
+
readonly 'gray-550': any;
|
|
528
581
|
readonly 'gray-600': any;
|
|
582
|
+
readonly 'gray-650': any;
|
|
529
583
|
readonly 'gray-700': any;
|
|
584
|
+
readonly 'gray-750': any;
|
|
530
585
|
readonly 'gray-800': any;
|
|
586
|
+
readonly 'gray-850': any;
|
|
531
587
|
readonly 'gray-900': any;
|
|
588
|
+
readonly 'gray-950': any;
|
|
589
|
+
readonly 'green-50': any;
|
|
532
590
|
readonly 'green-100': any;
|
|
591
|
+
readonly 'green-150': any;
|
|
533
592
|
readonly 'green-200': any;
|
|
593
|
+
readonly 'green-250': any;
|
|
534
594
|
readonly 'green-300': any;
|
|
595
|
+
readonly 'green-350': any;
|
|
535
596
|
readonly 'green-400': any;
|
|
597
|
+
readonly 'green-450': any;
|
|
536
598
|
readonly 'green-500': any;
|
|
599
|
+
readonly 'green-550': any;
|
|
537
600
|
readonly 'green-600': any;
|
|
601
|
+
readonly 'green-650': any;
|
|
538
602
|
readonly 'green-700': any;
|
|
603
|
+
readonly 'green-750': any;
|
|
539
604
|
readonly 'green-800': any;
|
|
605
|
+
readonly 'green-850': any;
|
|
540
606
|
readonly 'green-900': any;
|
|
541
|
-
readonly '
|
|
542
|
-
readonly '
|
|
543
|
-
readonly 'indigo-300': any;
|
|
544
|
-
readonly 'indigo-400': any;
|
|
545
|
-
readonly 'indigo-500': any;
|
|
546
|
-
readonly 'indigo-600': any;
|
|
547
|
-
readonly 'indigo-700': any;
|
|
548
|
-
readonly 'indigo-800': any;
|
|
549
|
-
readonly 'indigo-900': any;
|
|
607
|
+
readonly 'green-950': any;
|
|
608
|
+
readonly 'red-50': any;
|
|
550
609
|
readonly 'red-100': any;
|
|
610
|
+
readonly 'red-150': any;
|
|
551
611
|
readonly 'red-200': any;
|
|
612
|
+
readonly 'red-250': any;
|
|
552
613
|
readonly 'red-300': any;
|
|
614
|
+
readonly 'red-350': any;
|
|
553
615
|
readonly 'red-400': any;
|
|
616
|
+
readonly 'red-450': any;
|
|
554
617
|
readonly 'red-500': any;
|
|
618
|
+
readonly 'red-550': any;
|
|
555
619
|
readonly 'red-600': any;
|
|
620
|
+
readonly 'red-650': any;
|
|
556
621
|
readonly 'red-700': any;
|
|
622
|
+
readonly 'red-750': any;
|
|
557
623
|
readonly 'red-800': any;
|
|
624
|
+
readonly 'red-850': any;
|
|
558
625
|
readonly 'red-900': any;
|
|
626
|
+
readonly 'red-950': any;
|
|
559
627
|
readonly transparent: any;
|
|
560
628
|
readonly white: any;
|
|
629
|
+
readonly 'yellow-50': any;
|
|
561
630
|
readonly 'yellow-100': any;
|
|
631
|
+
readonly 'yellow-150': any;
|
|
562
632
|
readonly 'yellow-200': any;
|
|
633
|
+
readonly 'yellow-250': any;
|
|
563
634
|
readonly 'yellow-300': any;
|
|
635
|
+
readonly 'yellow-350': any;
|
|
564
636
|
readonly 'yellow-400': any;
|
|
637
|
+
readonly 'yellow-450': any;
|
|
565
638
|
readonly 'yellow-500': any;
|
|
639
|
+
readonly 'yellow-550': any;
|
|
566
640
|
readonly 'yellow-600': any;
|
|
641
|
+
readonly 'yellow-650': any;
|
|
567
642
|
readonly 'yellow-700': any;
|
|
643
|
+
readonly 'yellow-750': any;
|
|
568
644
|
readonly 'yellow-800': any;
|
|
645
|
+
readonly 'yellow-850': any;
|
|
569
646
|
readonly 'yellow-900': any;
|
|
647
|
+
readonly 'yellow-950': any;
|
|
570
648
|
"background-alpha-active"?: any;
|
|
571
649
|
"background-alpha-hover"?: any;
|
|
572
650
|
"background-danger-prominent"?: any;
|
|
@@ -587,27 +665,19 @@ declare const StyledScrollbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
|
|
|
587
665
|
"background-neutrals-inverted-subtle"?: any;
|
|
588
666
|
"background-neutrals-page"?: any;
|
|
589
667
|
"background-neutrals-page-subtle"?: any;
|
|
590
|
-
"background-neutrals-
|
|
591
|
-
"background-neutrals-
|
|
592
|
-
"background-neutrals-
|
|
593
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
594
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
668
|
+
"background-neutrals-scrollbar"?: any;
|
|
669
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
670
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
595
671
|
"background-neutrals-subtle"?: any;
|
|
596
672
|
"background-neutrals-subtle-active"?: any;
|
|
597
673
|
"background-neutrals-subtle-hover"?: any;
|
|
598
674
|
"background-primary-prominent"?: any;
|
|
599
675
|
"background-primary-prominent-active"?: any;
|
|
600
|
-
"background-primary-prominent-expanded"?: any;
|
|
601
676
|
"background-primary-prominent-hover"?: any;
|
|
602
|
-
"background-primary-prominent-pressed"?: any;
|
|
603
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
604
677
|
"background-primary-prominent-selected"?: any;
|
|
605
678
|
"background-primary-subtle"?: any;
|
|
606
679
|
"background-primary-subtle-active"?: any;
|
|
607
|
-
"background-primary-subtle-expanded"?: any;
|
|
608
680
|
"background-primary-subtle-hover"?: any;
|
|
609
|
-
"background-primary-subtle-pressed"?: any;
|
|
610
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
611
681
|
"background-primary-subtle-selected"?: any;
|
|
612
682
|
"background-success"?: any;
|
|
613
683
|
"background-success-prominent"?: any;
|
|
@@ -618,9 +688,15 @@ declare const StyledScrollbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
|
|
|
618
688
|
"border-danger"?: any;
|
|
619
689
|
"border-danger-active"?: any;
|
|
620
690
|
"border-danger-hover"?: any;
|
|
691
|
+
"border-focus-error-inner"?: any;
|
|
692
|
+
"border-focus-error-middle"?: any;
|
|
693
|
+
"border-focus-error-outer"?: any;
|
|
621
694
|
"border-focus-inner"?: any;
|
|
622
695
|
"border-focus-middle"?: any;
|
|
623
696
|
"border-focus-outer"?: any;
|
|
697
|
+
"border-focus-success-inner"?: any;
|
|
698
|
+
"border-focus-success-middle"?: any;
|
|
699
|
+
"border-focus-success-outer"?: any;
|
|
624
700
|
"border-neutrals"?: any;
|
|
625
701
|
"border-neutrals-active"?: any;
|
|
626
702
|
"border-neutrals-controls"?: any;
|
|
@@ -713,13 +789,13 @@ declare const StyledScrollbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
|
|
|
713
789
|
readonly body: "Open Sans, sans-serif";
|
|
714
790
|
};
|
|
715
791
|
radii: {
|
|
716
|
-
readonly none: 0;
|
|
717
|
-
readonly half: "999em";
|
|
718
792
|
readonly 25: "2px";
|
|
719
793
|
readonly 50: "4px";
|
|
720
794
|
readonly 75: "6px";
|
|
721
795
|
readonly 100: "8px";
|
|
722
796
|
readonly 200: "16px";
|
|
797
|
+
readonly half: "999px";
|
|
798
|
+
readonly none: "0px";
|
|
723
799
|
};
|
|
724
800
|
shadows: {
|
|
725
801
|
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
|
|
@@ -1000,6 +1076,7 @@ interface ScrollbarProps extends StyledScrollbarProps {
|
|
|
1000
1076
|
forceMount?: true;
|
|
1001
1077
|
/**
|
|
1002
1078
|
* The orientation of the scrollbar.
|
|
1079
|
+
* @default 'vertical'
|
|
1003
1080
|
*/
|
|
1004
1081
|
orientation?: 'horizontal' | 'vertical';
|
|
1005
1082
|
}
|
|
@@ -1014,63 +1091,103 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1014
1091
|
};
|
|
1015
1092
|
colors: {
|
|
1016
1093
|
readonly black: any;
|
|
1094
|
+
readonly 'blue-50': any;
|
|
1017
1095
|
readonly 'blue-100': any;
|
|
1096
|
+
readonly 'blue-150': any;
|
|
1018
1097
|
readonly 'blue-200': any;
|
|
1098
|
+
readonly 'blue-250': any;
|
|
1019
1099
|
readonly 'blue-300': any;
|
|
1100
|
+
readonly 'blue-350': any;
|
|
1020
1101
|
readonly 'blue-400': any;
|
|
1102
|
+
readonly 'blue-450': any;
|
|
1021
1103
|
readonly 'blue-500': any;
|
|
1104
|
+
readonly 'blue-550': any;
|
|
1022
1105
|
readonly 'blue-600': any;
|
|
1106
|
+
readonly 'blue-650': any;
|
|
1023
1107
|
readonly 'blue-700': any;
|
|
1108
|
+
readonly 'blue-750': any;
|
|
1024
1109
|
readonly 'blue-800': any;
|
|
1110
|
+
readonly 'blue-850': any;
|
|
1025
1111
|
readonly 'blue-900': any;
|
|
1026
|
-
readonly 'blue-
|
|
1112
|
+
readonly 'blue-950': any;
|
|
1113
|
+
readonly 'gray-50': any;
|
|
1027
1114
|
readonly 'gray-100': any;
|
|
1115
|
+
readonly 'gray-150': any;
|
|
1028
1116
|
readonly 'gray-200': any;
|
|
1117
|
+
readonly 'gray-250': any;
|
|
1029
1118
|
readonly 'gray-300': any;
|
|
1119
|
+
readonly 'gray-350': any;
|
|
1030
1120
|
readonly 'gray-400': any;
|
|
1121
|
+
readonly 'gray-450': any;
|
|
1031
1122
|
readonly 'gray-500': any;
|
|
1123
|
+
readonly 'gray-550': any;
|
|
1032
1124
|
readonly 'gray-600': any;
|
|
1125
|
+
readonly 'gray-650': any;
|
|
1033
1126
|
readonly 'gray-700': any;
|
|
1127
|
+
readonly 'gray-750': any;
|
|
1034
1128
|
readonly 'gray-800': any;
|
|
1129
|
+
readonly 'gray-850': any;
|
|
1035
1130
|
readonly 'gray-900': any;
|
|
1131
|
+
readonly 'gray-950': any;
|
|
1132
|
+
readonly 'green-50': any;
|
|
1036
1133
|
readonly 'green-100': any;
|
|
1134
|
+
readonly 'green-150': any;
|
|
1037
1135
|
readonly 'green-200': any;
|
|
1136
|
+
readonly 'green-250': any;
|
|
1038
1137
|
readonly 'green-300': any;
|
|
1138
|
+
readonly 'green-350': any;
|
|
1039
1139
|
readonly 'green-400': any;
|
|
1140
|
+
readonly 'green-450': any;
|
|
1040
1141
|
readonly 'green-500': any;
|
|
1142
|
+
readonly 'green-550': any;
|
|
1041
1143
|
readonly 'green-600': any;
|
|
1144
|
+
readonly 'green-650': any;
|
|
1042
1145
|
readonly 'green-700': any;
|
|
1146
|
+
readonly 'green-750': any;
|
|
1043
1147
|
readonly 'green-800': any;
|
|
1148
|
+
readonly 'green-850': any;
|
|
1044
1149
|
readonly 'green-900': any;
|
|
1045
|
-
readonly '
|
|
1046
|
-
readonly '
|
|
1047
|
-
readonly 'indigo-300': any;
|
|
1048
|
-
readonly 'indigo-400': any;
|
|
1049
|
-
readonly 'indigo-500': any;
|
|
1050
|
-
readonly 'indigo-600': any;
|
|
1051
|
-
readonly 'indigo-700': any;
|
|
1052
|
-
readonly 'indigo-800': any;
|
|
1053
|
-
readonly 'indigo-900': any;
|
|
1150
|
+
readonly 'green-950': any;
|
|
1151
|
+
readonly 'red-50': any;
|
|
1054
1152
|
readonly 'red-100': any;
|
|
1153
|
+
readonly 'red-150': any;
|
|
1055
1154
|
readonly 'red-200': any;
|
|
1155
|
+
readonly 'red-250': any;
|
|
1056
1156
|
readonly 'red-300': any;
|
|
1157
|
+
readonly 'red-350': any;
|
|
1057
1158
|
readonly 'red-400': any;
|
|
1159
|
+
readonly 'red-450': any;
|
|
1058
1160
|
readonly 'red-500': any;
|
|
1161
|
+
readonly 'red-550': any;
|
|
1059
1162
|
readonly 'red-600': any;
|
|
1163
|
+
readonly 'red-650': any;
|
|
1060
1164
|
readonly 'red-700': any;
|
|
1165
|
+
readonly 'red-750': any;
|
|
1061
1166
|
readonly 'red-800': any;
|
|
1167
|
+
readonly 'red-850': any;
|
|
1062
1168
|
readonly 'red-900': any;
|
|
1169
|
+
readonly 'red-950': any;
|
|
1063
1170
|
readonly transparent: any;
|
|
1064
1171
|
readonly white: any;
|
|
1172
|
+
readonly 'yellow-50': any;
|
|
1065
1173
|
readonly 'yellow-100': any;
|
|
1174
|
+
readonly 'yellow-150': any;
|
|
1066
1175
|
readonly 'yellow-200': any;
|
|
1176
|
+
readonly 'yellow-250': any;
|
|
1067
1177
|
readonly 'yellow-300': any;
|
|
1178
|
+
readonly 'yellow-350': any;
|
|
1068
1179
|
readonly 'yellow-400': any;
|
|
1180
|
+
readonly 'yellow-450': any;
|
|
1069
1181
|
readonly 'yellow-500': any;
|
|
1182
|
+
readonly 'yellow-550': any;
|
|
1070
1183
|
readonly 'yellow-600': any;
|
|
1184
|
+
readonly 'yellow-650': any;
|
|
1071
1185
|
readonly 'yellow-700': any;
|
|
1186
|
+
readonly 'yellow-750': any;
|
|
1072
1187
|
readonly 'yellow-800': any;
|
|
1188
|
+
readonly 'yellow-850': any;
|
|
1073
1189
|
readonly 'yellow-900': any;
|
|
1190
|
+
readonly 'yellow-950': any;
|
|
1074
1191
|
"background-alpha-active"?: any;
|
|
1075
1192
|
"background-alpha-hover"?: any;
|
|
1076
1193
|
"background-danger-prominent"?: any;
|
|
@@ -1091,27 +1208,19 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1091
1208
|
"background-neutrals-inverted-subtle"?: any;
|
|
1092
1209
|
"background-neutrals-page"?: any;
|
|
1093
1210
|
"background-neutrals-page-subtle"?: any;
|
|
1094
|
-
"background-neutrals-
|
|
1095
|
-
"background-neutrals-
|
|
1096
|
-
"background-neutrals-
|
|
1097
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
1098
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1211
|
+
"background-neutrals-scrollbar"?: any;
|
|
1212
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
1213
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
1099
1214
|
"background-neutrals-subtle"?: any;
|
|
1100
1215
|
"background-neutrals-subtle-active"?: any;
|
|
1101
1216
|
"background-neutrals-subtle-hover"?: any;
|
|
1102
1217
|
"background-primary-prominent"?: any;
|
|
1103
1218
|
"background-primary-prominent-active"?: any;
|
|
1104
|
-
"background-primary-prominent-expanded"?: any;
|
|
1105
1219
|
"background-primary-prominent-hover"?: any;
|
|
1106
|
-
"background-primary-prominent-pressed"?: any;
|
|
1107
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
1108
1220
|
"background-primary-prominent-selected"?: any;
|
|
1109
1221
|
"background-primary-subtle"?: any;
|
|
1110
1222
|
"background-primary-subtle-active"?: any;
|
|
1111
|
-
"background-primary-subtle-expanded"?: any;
|
|
1112
1223
|
"background-primary-subtle-hover"?: any;
|
|
1113
|
-
"background-primary-subtle-pressed"?: any;
|
|
1114
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
1115
1224
|
"background-primary-subtle-selected"?: any;
|
|
1116
1225
|
"background-success"?: any;
|
|
1117
1226
|
"background-success-prominent"?: any;
|
|
@@ -1122,9 +1231,15 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1122
1231
|
"border-danger"?: any;
|
|
1123
1232
|
"border-danger-active"?: any;
|
|
1124
1233
|
"border-danger-hover"?: any;
|
|
1234
|
+
"border-focus-error-inner"?: any;
|
|
1235
|
+
"border-focus-error-middle"?: any;
|
|
1236
|
+
"border-focus-error-outer"?: any;
|
|
1125
1237
|
"border-focus-inner"?: any;
|
|
1126
1238
|
"border-focus-middle"?: any;
|
|
1127
1239
|
"border-focus-outer"?: any;
|
|
1240
|
+
"border-focus-success-inner"?: any;
|
|
1241
|
+
"border-focus-success-middle"?: any;
|
|
1242
|
+
"border-focus-success-outer"?: any;
|
|
1128
1243
|
"border-neutrals"?: any;
|
|
1129
1244
|
"border-neutrals-active"?: any;
|
|
1130
1245
|
"border-neutrals-controls"?: any;
|
|
@@ -1217,13 +1332,13 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1217
1332
|
readonly body: "Open Sans, sans-serif";
|
|
1218
1333
|
};
|
|
1219
1334
|
radii: {
|
|
1220
|
-
readonly none: 0;
|
|
1221
|
-
readonly half: "999em";
|
|
1222
1335
|
readonly 25: "2px";
|
|
1223
1336
|
readonly 50: "4px";
|
|
1224
1337
|
readonly 75: "6px";
|
|
1225
1338
|
readonly 100: "8px";
|
|
1226
1339
|
readonly 200: "16px";
|
|
1340
|
+
readonly half: "999px";
|
|
1341
|
+
readonly none: "0px";
|
|
1227
1342
|
};
|
|
1228
1343
|
shadows: {
|
|
1229
1344
|
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
|
|
@@ -1514,63 +1629,103 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1514
1629
|
};
|
|
1515
1630
|
colors: {
|
|
1516
1631
|
readonly black: any;
|
|
1632
|
+
readonly 'blue-50': any;
|
|
1517
1633
|
readonly 'blue-100': any;
|
|
1634
|
+
readonly 'blue-150': any;
|
|
1518
1635
|
readonly 'blue-200': any;
|
|
1636
|
+
readonly 'blue-250': any;
|
|
1519
1637
|
readonly 'blue-300': any;
|
|
1638
|
+
readonly 'blue-350': any;
|
|
1520
1639
|
readonly 'blue-400': any;
|
|
1640
|
+
readonly 'blue-450': any;
|
|
1521
1641
|
readonly 'blue-500': any;
|
|
1642
|
+
readonly 'blue-550': any;
|
|
1522
1643
|
readonly 'blue-600': any;
|
|
1644
|
+
readonly 'blue-650': any;
|
|
1523
1645
|
readonly 'blue-700': any;
|
|
1646
|
+
readonly 'blue-750': any;
|
|
1524
1647
|
readonly 'blue-800': any;
|
|
1648
|
+
readonly 'blue-850': any;
|
|
1525
1649
|
readonly 'blue-900': any;
|
|
1526
|
-
readonly 'blue-
|
|
1650
|
+
readonly 'blue-950': any;
|
|
1651
|
+
readonly 'gray-50': any;
|
|
1527
1652
|
readonly 'gray-100': any;
|
|
1653
|
+
readonly 'gray-150': any;
|
|
1528
1654
|
readonly 'gray-200': any;
|
|
1655
|
+
readonly 'gray-250': any;
|
|
1529
1656
|
readonly 'gray-300': any;
|
|
1657
|
+
readonly 'gray-350': any;
|
|
1530
1658
|
readonly 'gray-400': any;
|
|
1659
|
+
readonly 'gray-450': any;
|
|
1531
1660
|
readonly 'gray-500': any;
|
|
1661
|
+
readonly 'gray-550': any;
|
|
1532
1662
|
readonly 'gray-600': any;
|
|
1663
|
+
readonly 'gray-650': any;
|
|
1533
1664
|
readonly 'gray-700': any;
|
|
1665
|
+
readonly 'gray-750': any;
|
|
1534
1666
|
readonly 'gray-800': any;
|
|
1667
|
+
readonly 'gray-850': any;
|
|
1535
1668
|
readonly 'gray-900': any;
|
|
1669
|
+
readonly 'gray-950': any;
|
|
1670
|
+
readonly 'green-50': any;
|
|
1536
1671
|
readonly 'green-100': any;
|
|
1672
|
+
readonly 'green-150': any;
|
|
1537
1673
|
readonly 'green-200': any;
|
|
1674
|
+
readonly 'green-250': any;
|
|
1538
1675
|
readonly 'green-300': any;
|
|
1676
|
+
readonly 'green-350': any;
|
|
1539
1677
|
readonly 'green-400': any;
|
|
1678
|
+
readonly 'green-450': any;
|
|
1540
1679
|
readonly 'green-500': any;
|
|
1680
|
+
readonly 'green-550': any;
|
|
1541
1681
|
readonly 'green-600': any;
|
|
1682
|
+
readonly 'green-650': any;
|
|
1542
1683
|
readonly 'green-700': any;
|
|
1684
|
+
readonly 'green-750': any;
|
|
1543
1685
|
readonly 'green-800': any;
|
|
1686
|
+
readonly 'green-850': any;
|
|
1544
1687
|
readonly 'green-900': any;
|
|
1545
|
-
readonly '
|
|
1546
|
-
readonly '
|
|
1547
|
-
readonly 'indigo-300': any;
|
|
1548
|
-
readonly 'indigo-400': any;
|
|
1549
|
-
readonly 'indigo-500': any;
|
|
1550
|
-
readonly 'indigo-600': any;
|
|
1551
|
-
readonly 'indigo-700': any;
|
|
1552
|
-
readonly 'indigo-800': any;
|
|
1553
|
-
readonly 'indigo-900': any;
|
|
1688
|
+
readonly 'green-950': any;
|
|
1689
|
+
readonly 'red-50': any;
|
|
1554
1690
|
readonly 'red-100': any;
|
|
1691
|
+
readonly 'red-150': any;
|
|
1555
1692
|
readonly 'red-200': any;
|
|
1693
|
+
readonly 'red-250': any;
|
|
1556
1694
|
readonly 'red-300': any;
|
|
1695
|
+
readonly 'red-350': any;
|
|
1557
1696
|
readonly 'red-400': any;
|
|
1697
|
+
readonly 'red-450': any;
|
|
1558
1698
|
readonly 'red-500': any;
|
|
1699
|
+
readonly 'red-550': any;
|
|
1559
1700
|
readonly 'red-600': any;
|
|
1701
|
+
readonly 'red-650': any;
|
|
1560
1702
|
readonly 'red-700': any;
|
|
1703
|
+
readonly 'red-750': any;
|
|
1561
1704
|
readonly 'red-800': any;
|
|
1705
|
+
readonly 'red-850': any;
|
|
1562
1706
|
readonly 'red-900': any;
|
|
1707
|
+
readonly 'red-950': any;
|
|
1563
1708
|
readonly transparent: any;
|
|
1564
1709
|
readonly white: any;
|
|
1710
|
+
readonly 'yellow-50': any;
|
|
1565
1711
|
readonly 'yellow-100': any;
|
|
1712
|
+
readonly 'yellow-150': any;
|
|
1566
1713
|
readonly 'yellow-200': any;
|
|
1714
|
+
readonly 'yellow-250': any;
|
|
1567
1715
|
readonly 'yellow-300': any;
|
|
1716
|
+
readonly 'yellow-350': any;
|
|
1568
1717
|
readonly 'yellow-400': any;
|
|
1718
|
+
readonly 'yellow-450': any;
|
|
1569
1719
|
readonly 'yellow-500': any;
|
|
1720
|
+
readonly 'yellow-550': any;
|
|
1570
1721
|
readonly 'yellow-600': any;
|
|
1722
|
+
readonly 'yellow-650': any;
|
|
1571
1723
|
readonly 'yellow-700': any;
|
|
1724
|
+
readonly 'yellow-750': any;
|
|
1572
1725
|
readonly 'yellow-800': any;
|
|
1726
|
+
readonly 'yellow-850': any;
|
|
1573
1727
|
readonly 'yellow-900': any;
|
|
1728
|
+
readonly 'yellow-950': any;
|
|
1574
1729
|
"background-alpha-active"?: any;
|
|
1575
1730
|
"background-alpha-hover"?: any;
|
|
1576
1731
|
"background-danger-prominent"?: any;
|
|
@@ -1591,27 +1746,19 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1591
1746
|
"background-neutrals-inverted-subtle"?: any;
|
|
1592
1747
|
"background-neutrals-page"?: any;
|
|
1593
1748
|
"background-neutrals-page-subtle"?: any;
|
|
1594
|
-
"background-neutrals-
|
|
1595
|
-
"background-neutrals-
|
|
1596
|
-
"background-neutrals-
|
|
1597
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
1598
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1749
|
+
"background-neutrals-scrollbar"?: any;
|
|
1750
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
1751
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
1599
1752
|
"background-neutrals-subtle"?: any;
|
|
1600
1753
|
"background-neutrals-subtle-active"?: any;
|
|
1601
1754
|
"background-neutrals-subtle-hover"?: any;
|
|
1602
1755
|
"background-primary-prominent"?: any;
|
|
1603
1756
|
"background-primary-prominent-active"?: any;
|
|
1604
|
-
"background-primary-prominent-expanded"?: any;
|
|
1605
1757
|
"background-primary-prominent-hover"?: any;
|
|
1606
|
-
"background-primary-prominent-pressed"?: any;
|
|
1607
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
1608
1758
|
"background-primary-prominent-selected"?: any;
|
|
1609
1759
|
"background-primary-subtle"?: any;
|
|
1610
1760
|
"background-primary-subtle-active"?: any;
|
|
1611
|
-
"background-primary-subtle-expanded"?: any;
|
|
1612
1761
|
"background-primary-subtle-hover"?: any;
|
|
1613
|
-
"background-primary-subtle-pressed"?: any;
|
|
1614
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
1615
1762
|
"background-primary-subtle-selected"?: any;
|
|
1616
1763
|
"background-success"?: any;
|
|
1617
1764
|
"background-success-prominent"?: any;
|
|
@@ -1622,9 +1769,15 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1622
1769
|
"border-danger"?: any;
|
|
1623
1770
|
"border-danger-active"?: any;
|
|
1624
1771
|
"border-danger-hover"?: any;
|
|
1772
|
+
"border-focus-error-inner"?: any;
|
|
1773
|
+
"border-focus-error-middle"?: any;
|
|
1774
|
+
"border-focus-error-outer"?: any;
|
|
1625
1775
|
"border-focus-inner"?: any;
|
|
1626
1776
|
"border-focus-middle"?: any;
|
|
1627
1777
|
"border-focus-outer"?: any;
|
|
1778
|
+
"border-focus-success-inner"?: any;
|
|
1779
|
+
"border-focus-success-middle"?: any;
|
|
1780
|
+
"border-focus-success-outer"?: any;
|
|
1628
1781
|
"border-neutrals"?: any;
|
|
1629
1782
|
"border-neutrals-active"?: any;
|
|
1630
1783
|
"border-neutrals-controls"?: any;
|
|
@@ -1717,13 +1870,13 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1717
1870
|
readonly body: "Open Sans, sans-serif";
|
|
1718
1871
|
};
|
|
1719
1872
|
radii: {
|
|
1720
|
-
readonly none: 0;
|
|
1721
|
-
readonly half: "999em";
|
|
1722
1873
|
readonly 25: "2px";
|
|
1723
1874
|
readonly 50: "4px";
|
|
1724
1875
|
readonly 75: "6px";
|
|
1725
1876
|
readonly 100: "8px";
|
|
1726
1877
|
readonly 200: "16px";
|
|
1878
|
+
readonly half: "999px";
|
|
1879
|
+
readonly none: "0px";
|
|
1727
1880
|
};
|
|
1728
1881
|
shadows: {
|
|
1729
1882
|
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
|
|
@@ -2008,63 +2161,103 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2008
2161
|
};
|
|
2009
2162
|
colors: {
|
|
2010
2163
|
readonly black: any;
|
|
2164
|
+
readonly 'blue-50': any;
|
|
2011
2165
|
readonly 'blue-100': any;
|
|
2166
|
+
readonly 'blue-150': any;
|
|
2012
2167
|
readonly 'blue-200': any;
|
|
2168
|
+
readonly 'blue-250': any;
|
|
2013
2169
|
readonly 'blue-300': any;
|
|
2170
|
+
readonly 'blue-350': any;
|
|
2014
2171
|
readonly 'blue-400': any;
|
|
2172
|
+
readonly 'blue-450': any;
|
|
2015
2173
|
readonly 'blue-500': any;
|
|
2174
|
+
readonly 'blue-550': any;
|
|
2016
2175
|
readonly 'blue-600': any;
|
|
2176
|
+
readonly 'blue-650': any;
|
|
2017
2177
|
readonly 'blue-700': any;
|
|
2178
|
+
readonly 'blue-750': any;
|
|
2018
2179
|
readonly 'blue-800': any;
|
|
2180
|
+
readonly 'blue-850': any;
|
|
2019
2181
|
readonly 'blue-900': any;
|
|
2020
|
-
readonly 'blue-
|
|
2182
|
+
readonly 'blue-950': any;
|
|
2183
|
+
readonly 'gray-50': any;
|
|
2021
2184
|
readonly 'gray-100': any;
|
|
2185
|
+
readonly 'gray-150': any;
|
|
2022
2186
|
readonly 'gray-200': any;
|
|
2187
|
+
readonly 'gray-250': any;
|
|
2023
2188
|
readonly 'gray-300': any;
|
|
2189
|
+
readonly 'gray-350': any;
|
|
2024
2190
|
readonly 'gray-400': any;
|
|
2191
|
+
readonly 'gray-450': any;
|
|
2025
2192
|
readonly 'gray-500': any;
|
|
2193
|
+
readonly 'gray-550': any;
|
|
2026
2194
|
readonly 'gray-600': any;
|
|
2195
|
+
readonly 'gray-650': any;
|
|
2027
2196
|
readonly 'gray-700': any;
|
|
2197
|
+
readonly 'gray-750': any;
|
|
2028
2198
|
readonly 'gray-800': any;
|
|
2199
|
+
readonly 'gray-850': any;
|
|
2029
2200
|
readonly 'gray-900': any;
|
|
2201
|
+
readonly 'gray-950': any;
|
|
2202
|
+
readonly 'green-50': any;
|
|
2030
2203
|
readonly 'green-100': any;
|
|
2204
|
+
readonly 'green-150': any;
|
|
2031
2205
|
readonly 'green-200': any;
|
|
2206
|
+
readonly 'green-250': any;
|
|
2032
2207
|
readonly 'green-300': any;
|
|
2208
|
+
readonly 'green-350': any;
|
|
2033
2209
|
readonly 'green-400': any;
|
|
2210
|
+
readonly 'green-450': any;
|
|
2034
2211
|
readonly 'green-500': any;
|
|
2212
|
+
readonly 'green-550': any;
|
|
2035
2213
|
readonly 'green-600': any;
|
|
2214
|
+
readonly 'green-650': any;
|
|
2036
2215
|
readonly 'green-700': any;
|
|
2216
|
+
readonly 'green-750': any;
|
|
2037
2217
|
readonly 'green-800': any;
|
|
2218
|
+
readonly 'green-850': any;
|
|
2038
2219
|
readonly 'green-900': any;
|
|
2039
|
-
readonly '
|
|
2040
|
-
readonly '
|
|
2041
|
-
readonly 'indigo-300': any;
|
|
2042
|
-
readonly 'indigo-400': any;
|
|
2043
|
-
readonly 'indigo-500': any;
|
|
2044
|
-
readonly 'indigo-600': any;
|
|
2045
|
-
readonly 'indigo-700': any;
|
|
2046
|
-
readonly 'indigo-800': any;
|
|
2047
|
-
readonly 'indigo-900': any;
|
|
2220
|
+
readonly 'green-950': any;
|
|
2221
|
+
readonly 'red-50': any;
|
|
2048
2222
|
readonly 'red-100': any;
|
|
2223
|
+
readonly 'red-150': any;
|
|
2049
2224
|
readonly 'red-200': any;
|
|
2225
|
+
readonly 'red-250': any;
|
|
2050
2226
|
readonly 'red-300': any;
|
|
2227
|
+
readonly 'red-350': any;
|
|
2051
2228
|
readonly 'red-400': any;
|
|
2229
|
+
readonly 'red-450': any;
|
|
2052
2230
|
readonly 'red-500': any;
|
|
2231
|
+
readonly 'red-550': any;
|
|
2053
2232
|
readonly 'red-600': any;
|
|
2233
|
+
readonly 'red-650': any;
|
|
2054
2234
|
readonly 'red-700': any;
|
|
2235
|
+
readonly 'red-750': any;
|
|
2055
2236
|
readonly 'red-800': any;
|
|
2237
|
+
readonly 'red-850': any;
|
|
2056
2238
|
readonly 'red-900': any;
|
|
2239
|
+
readonly 'red-950': any;
|
|
2057
2240
|
readonly transparent: any;
|
|
2058
2241
|
readonly white: any;
|
|
2242
|
+
readonly 'yellow-50': any;
|
|
2059
2243
|
readonly 'yellow-100': any;
|
|
2244
|
+
readonly 'yellow-150': any;
|
|
2060
2245
|
readonly 'yellow-200': any;
|
|
2246
|
+
readonly 'yellow-250': any;
|
|
2061
2247
|
readonly 'yellow-300': any;
|
|
2248
|
+
readonly 'yellow-350': any;
|
|
2062
2249
|
readonly 'yellow-400': any;
|
|
2250
|
+
readonly 'yellow-450': any;
|
|
2063
2251
|
readonly 'yellow-500': any;
|
|
2252
|
+
readonly 'yellow-550': any;
|
|
2064
2253
|
readonly 'yellow-600': any;
|
|
2254
|
+
readonly 'yellow-650': any;
|
|
2065
2255
|
readonly 'yellow-700': any;
|
|
2256
|
+
readonly 'yellow-750': any;
|
|
2066
2257
|
readonly 'yellow-800': any;
|
|
2258
|
+
readonly 'yellow-850': any;
|
|
2067
2259
|
readonly 'yellow-900': any;
|
|
2260
|
+
readonly 'yellow-950': any;
|
|
2068
2261
|
"background-alpha-active"?: any;
|
|
2069
2262
|
"background-alpha-hover"?: any;
|
|
2070
2263
|
"background-danger-prominent"?: any;
|
|
@@ -2085,27 +2278,19 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2085
2278
|
"background-neutrals-inverted-subtle"?: any;
|
|
2086
2279
|
"background-neutrals-page"?: any;
|
|
2087
2280
|
"background-neutrals-page-subtle"?: any;
|
|
2088
|
-
"background-neutrals-
|
|
2089
|
-
"background-neutrals-
|
|
2090
|
-
"background-neutrals-
|
|
2091
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
2092
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
2281
|
+
"background-neutrals-scrollbar"?: any;
|
|
2282
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
2283
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
2093
2284
|
"background-neutrals-subtle"?: any;
|
|
2094
2285
|
"background-neutrals-subtle-active"?: any;
|
|
2095
2286
|
"background-neutrals-subtle-hover"?: any;
|
|
2096
2287
|
"background-primary-prominent"?: any;
|
|
2097
2288
|
"background-primary-prominent-active"?: any;
|
|
2098
|
-
"background-primary-prominent-expanded"?: any;
|
|
2099
2289
|
"background-primary-prominent-hover"?: any;
|
|
2100
|
-
"background-primary-prominent-pressed"?: any;
|
|
2101
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
2102
2290
|
"background-primary-prominent-selected"?: any;
|
|
2103
2291
|
"background-primary-subtle"?: any;
|
|
2104
2292
|
"background-primary-subtle-active"?: any;
|
|
2105
|
-
"background-primary-subtle-expanded"?: any;
|
|
2106
2293
|
"background-primary-subtle-hover"?: any;
|
|
2107
|
-
"background-primary-subtle-pressed"?: any;
|
|
2108
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
2109
2294
|
"background-primary-subtle-selected"?: any;
|
|
2110
2295
|
"background-success"?: any;
|
|
2111
2296
|
"background-success-prominent"?: any;
|
|
@@ -2116,9 +2301,15 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2116
2301
|
"border-danger"?: any;
|
|
2117
2302
|
"border-danger-active"?: any;
|
|
2118
2303
|
"border-danger-hover"?: any;
|
|
2304
|
+
"border-focus-error-inner"?: any;
|
|
2305
|
+
"border-focus-error-middle"?: any;
|
|
2306
|
+
"border-focus-error-outer"?: any;
|
|
2119
2307
|
"border-focus-inner"?: any;
|
|
2120
2308
|
"border-focus-middle"?: any;
|
|
2121
2309
|
"border-focus-outer"?: any;
|
|
2310
|
+
"border-focus-success-inner"?: any;
|
|
2311
|
+
"border-focus-success-middle"?: any;
|
|
2312
|
+
"border-focus-success-outer"?: any;
|
|
2122
2313
|
"border-neutrals"?: any;
|
|
2123
2314
|
"border-neutrals-active"?: any;
|
|
2124
2315
|
"border-neutrals-controls"?: any;
|
|
@@ -2211,13 +2402,13 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2211
2402
|
readonly body: "Open Sans, sans-serif";
|
|
2212
2403
|
};
|
|
2213
2404
|
radii: {
|
|
2214
|
-
readonly none: 0;
|
|
2215
|
-
readonly half: "999em";
|
|
2216
2405
|
readonly 25: "2px";
|
|
2217
2406
|
readonly 50: "4px";
|
|
2218
2407
|
readonly 75: "6px";
|
|
2219
2408
|
readonly 100: "8px";
|
|
2220
2409
|
readonly 200: "16px";
|
|
2410
|
+
readonly half: "999px";
|
|
2411
|
+
readonly none: "0px";
|
|
2221
2412
|
};
|
|
2222
2413
|
shadows: {
|
|
2223
2414
|
readonly 'focus-small': "0 0 0 2px $colors$border-focus-outer, inset 0 0 0 2px $colors$border-focus-middle, inset 0 0 0 3px $colors$border-focus-inner";
|
|
@@ -2493,16 +2684,21 @@ declare type StyledScrollAreaProps = StrictComponentProps<typeof StyledScrollAre
|
|
|
2493
2684
|
interface ScrollAreaProps extends StyledScrollAreaProps {
|
|
2494
2685
|
children: react__default.ReactNode;
|
|
2495
2686
|
/**
|
|
2496
|
-
* Describes the nature of scrollbar visibility, similar to how the scrollbar
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2687
|
+
* Describes the nature of scrollbar visibility, similar to how the scrollbar
|
|
2688
|
+
* preferences in MacOS control visibility of native scrollbars. "auto" means
|
|
2689
|
+
* that scrollbars are visible when content is overflowing on the corresponding
|
|
2690
|
+
* orientation. "always" means that scrollbars are always visible regardless of
|
|
2691
|
+
* whether the content is overflowing. "scroll" means that scrollbars are
|
|
2692
|
+
* visible when the user is scrolling along its corresponding orientation.
|
|
2693
|
+
* "hover" when the user is scrolling along its corresponding orientation and
|
|
2694
|
+
* when the user is hovering over the scroll area.
|
|
2695
|
+
* @default hover
|
|
2501
2696
|
*/
|
|
2502
2697
|
type?: 'auto' | 'always' | 'scroll' | 'hover';
|
|
2503
2698
|
/**
|
|
2504
2699
|
* The reading direction of the scroll area. If omitted, inherits globally
|
|
2505
2700
|
* from DirectionProvider or assumes LTR (left-to-right) reading mode.
|
|
2701
|
+
* @default 'ltr'
|
|
2506
2702
|
*/
|
|
2507
2703
|
dir?: 'ltr' | 'rtl';
|
|
2508
2704
|
/**
|
|
@@ -2520,4 +2716,4 @@ interface Partials {
|
|
|
2520
2716
|
Corner: typeof Corner;
|
|
2521
2717
|
}
|
|
2522
2718
|
|
|
2523
|
-
export { ScrollArea, CornerProps as
|
|
2719
|
+
export { ScrollArea, CornerProps as ScrollAreaCornerProps, ScrollAreaProps, ScrollbarProps as ScrollAreaScrollbarProps, ThumbProps as ScrollAreaThumbProps, ViewportProps as ScrollAreaViewportProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-scroll-area",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.2.1-colors.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@radix-ui/react-scroll-area": "^1.0.4",
|
|
30
|
-
"@mirohq/design-system-stitches": "^2.6.0"
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.1-colors.0"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c ../../../rollup.config.js",
|