@mirohq/design-system-scroll-area 0.2.0 → 0.2.1-colors.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 +305 -115
- 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 * @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-
|
|
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 * @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-
|
|
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";
|
|
@@ -1015,63 +1091,103 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1015
1091
|
};
|
|
1016
1092
|
colors: {
|
|
1017
1093
|
readonly black: any;
|
|
1094
|
+
readonly 'blue-50': any;
|
|
1018
1095
|
readonly 'blue-100': any;
|
|
1096
|
+
readonly 'blue-150': any;
|
|
1019
1097
|
readonly 'blue-200': any;
|
|
1098
|
+
readonly 'blue-250': any;
|
|
1020
1099
|
readonly 'blue-300': any;
|
|
1100
|
+
readonly 'blue-350': any;
|
|
1021
1101
|
readonly 'blue-400': any;
|
|
1102
|
+
readonly 'blue-450': any;
|
|
1022
1103
|
readonly 'blue-500': any;
|
|
1104
|
+
readonly 'blue-550': any;
|
|
1023
1105
|
readonly 'blue-600': any;
|
|
1106
|
+
readonly 'blue-650': any;
|
|
1024
1107
|
readonly 'blue-700': any;
|
|
1108
|
+
readonly 'blue-750': any;
|
|
1025
1109
|
readonly 'blue-800': any;
|
|
1110
|
+
readonly 'blue-850': any;
|
|
1026
1111
|
readonly 'blue-900': any;
|
|
1027
|
-
readonly 'blue-
|
|
1112
|
+
readonly 'blue-950': any;
|
|
1113
|
+
readonly 'gray-50': any;
|
|
1028
1114
|
readonly 'gray-100': any;
|
|
1115
|
+
readonly 'gray-150': any;
|
|
1029
1116
|
readonly 'gray-200': any;
|
|
1117
|
+
readonly 'gray-250': any;
|
|
1030
1118
|
readonly 'gray-300': any;
|
|
1119
|
+
readonly 'gray-350': any;
|
|
1031
1120
|
readonly 'gray-400': any;
|
|
1121
|
+
readonly 'gray-450': any;
|
|
1032
1122
|
readonly 'gray-500': any;
|
|
1123
|
+
readonly 'gray-550': any;
|
|
1033
1124
|
readonly 'gray-600': any;
|
|
1125
|
+
readonly 'gray-650': any;
|
|
1034
1126
|
readonly 'gray-700': any;
|
|
1127
|
+
readonly 'gray-750': any;
|
|
1035
1128
|
readonly 'gray-800': any;
|
|
1129
|
+
readonly 'gray-850': any;
|
|
1036
1130
|
readonly 'gray-900': any;
|
|
1131
|
+
readonly 'gray-950': any;
|
|
1132
|
+
readonly 'green-50': any;
|
|
1037
1133
|
readonly 'green-100': any;
|
|
1134
|
+
readonly 'green-150': any;
|
|
1038
1135
|
readonly 'green-200': any;
|
|
1136
|
+
readonly 'green-250': any;
|
|
1039
1137
|
readonly 'green-300': any;
|
|
1138
|
+
readonly 'green-350': any;
|
|
1040
1139
|
readonly 'green-400': any;
|
|
1140
|
+
readonly 'green-450': any;
|
|
1041
1141
|
readonly 'green-500': any;
|
|
1142
|
+
readonly 'green-550': any;
|
|
1042
1143
|
readonly 'green-600': any;
|
|
1144
|
+
readonly 'green-650': any;
|
|
1043
1145
|
readonly 'green-700': any;
|
|
1146
|
+
readonly 'green-750': any;
|
|
1044
1147
|
readonly 'green-800': any;
|
|
1148
|
+
readonly 'green-850': any;
|
|
1045
1149
|
readonly 'green-900': any;
|
|
1046
|
-
readonly '
|
|
1047
|
-
readonly '
|
|
1048
|
-
readonly 'indigo-300': any;
|
|
1049
|
-
readonly 'indigo-400': any;
|
|
1050
|
-
readonly 'indigo-500': any;
|
|
1051
|
-
readonly 'indigo-600': any;
|
|
1052
|
-
readonly 'indigo-700': any;
|
|
1053
|
-
readonly 'indigo-800': any;
|
|
1054
|
-
readonly 'indigo-900': any;
|
|
1150
|
+
readonly 'green-950': any;
|
|
1151
|
+
readonly 'red-50': any;
|
|
1055
1152
|
readonly 'red-100': any;
|
|
1153
|
+
readonly 'red-150': any;
|
|
1056
1154
|
readonly 'red-200': any;
|
|
1155
|
+
readonly 'red-250': any;
|
|
1057
1156
|
readonly 'red-300': any;
|
|
1157
|
+
readonly 'red-350': any;
|
|
1058
1158
|
readonly 'red-400': any;
|
|
1159
|
+
readonly 'red-450': any;
|
|
1059
1160
|
readonly 'red-500': any;
|
|
1161
|
+
readonly 'red-550': any;
|
|
1060
1162
|
readonly 'red-600': any;
|
|
1163
|
+
readonly 'red-650': any;
|
|
1061
1164
|
readonly 'red-700': any;
|
|
1165
|
+
readonly 'red-750': any;
|
|
1062
1166
|
readonly 'red-800': any;
|
|
1167
|
+
readonly 'red-850': any;
|
|
1063
1168
|
readonly 'red-900': any;
|
|
1169
|
+
readonly 'red-950': any;
|
|
1064
1170
|
readonly transparent: any;
|
|
1065
1171
|
readonly white: any;
|
|
1172
|
+
readonly 'yellow-50': any;
|
|
1066
1173
|
readonly 'yellow-100': any;
|
|
1174
|
+
readonly 'yellow-150': any;
|
|
1067
1175
|
readonly 'yellow-200': any;
|
|
1176
|
+
readonly 'yellow-250': any;
|
|
1068
1177
|
readonly 'yellow-300': any;
|
|
1178
|
+
readonly 'yellow-350': any;
|
|
1069
1179
|
readonly 'yellow-400': any;
|
|
1180
|
+
readonly 'yellow-450': any;
|
|
1070
1181
|
readonly 'yellow-500': any;
|
|
1182
|
+
readonly 'yellow-550': any;
|
|
1071
1183
|
readonly 'yellow-600': any;
|
|
1184
|
+
readonly 'yellow-650': any;
|
|
1072
1185
|
readonly 'yellow-700': any;
|
|
1186
|
+
readonly 'yellow-750': any;
|
|
1073
1187
|
readonly 'yellow-800': any;
|
|
1188
|
+
readonly 'yellow-850': any;
|
|
1074
1189
|
readonly 'yellow-900': any;
|
|
1190
|
+
readonly 'yellow-950': any;
|
|
1075
1191
|
"background-alpha-active"?: any;
|
|
1076
1192
|
"background-alpha-hover"?: any;
|
|
1077
1193
|
"background-danger-prominent"?: any;
|
|
@@ -1092,27 +1208,19 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1092
1208
|
"background-neutrals-inverted-subtle"?: any;
|
|
1093
1209
|
"background-neutrals-page"?: any;
|
|
1094
1210
|
"background-neutrals-page-subtle"?: any;
|
|
1095
|
-
"background-neutrals-
|
|
1096
|
-
"background-neutrals-
|
|
1097
|
-
"background-neutrals-
|
|
1098
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
1099
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1211
|
+
"background-neutrals-scrollbar"?: any;
|
|
1212
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
1213
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
1100
1214
|
"background-neutrals-subtle"?: any;
|
|
1101
1215
|
"background-neutrals-subtle-active"?: any;
|
|
1102
1216
|
"background-neutrals-subtle-hover"?: any;
|
|
1103
1217
|
"background-primary-prominent"?: any;
|
|
1104
1218
|
"background-primary-prominent-active"?: any;
|
|
1105
|
-
"background-primary-prominent-expanded"?: any;
|
|
1106
1219
|
"background-primary-prominent-hover"?: any;
|
|
1107
|
-
"background-primary-prominent-pressed"?: any;
|
|
1108
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
1109
1220
|
"background-primary-prominent-selected"?: any;
|
|
1110
1221
|
"background-primary-subtle"?: any;
|
|
1111
1222
|
"background-primary-subtle-active"?: any;
|
|
1112
|
-
"background-primary-subtle-expanded"?: any;
|
|
1113
1223
|
"background-primary-subtle-hover"?: any;
|
|
1114
|
-
"background-primary-subtle-pressed"?: any;
|
|
1115
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
1116
1224
|
"background-primary-subtle-selected"?: any;
|
|
1117
1225
|
"background-success"?: any;
|
|
1118
1226
|
"background-success-prominent"?: any;
|
|
@@ -1123,9 +1231,15 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1123
1231
|
"border-danger"?: any;
|
|
1124
1232
|
"border-danger-active"?: any;
|
|
1125
1233
|
"border-danger-hover"?: any;
|
|
1234
|
+
"border-focus-error-inner"?: any;
|
|
1235
|
+
"border-focus-error-middle"?: any;
|
|
1236
|
+
"border-focus-error-outer"?: any;
|
|
1126
1237
|
"border-focus-inner"?: any;
|
|
1127
1238
|
"border-focus-middle"?: any;
|
|
1128
1239
|
"border-focus-outer"?: any;
|
|
1240
|
+
"border-focus-success-inner"?: any;
|
|
1241
|
+
"border-focus-success-middle"?: any;
|
|
1242
|
+
"border-focus-success-outer"?: any;
|
|
1129
1243
|
"border-neutrals"?: any;
|
|
1130
1244
|
"border-neutrals-active"?: any;
|
|
1131
1245
|
"border-neutrals-controls"?: any;
|
|
@@ -1218,13 +1332,13 @@ declare const StyledThumb: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_des
|
|
|
1218
1332
|
readonly body: "Open Sans, sans-serif";
|
|
1219
1333
|
};
|
|
1220
1334
|
radii: {
|
|
1221
|
-
readonly none: 0;
|
|
1222
|
-
readonly half: "999em";
|
|
1223
1335
|
readonly 25: "2px";
|
|
1224
1336
|
readonly 50: "4px";
|
|
1225
1337
|
readonly 75: "6px";
|
|
1226
1338
|
readonly 100: "8px";
|
|
1227
1339
|
readonly 200: "16px";
|
|
1340
|
+
readonly half: "999px";
|
|
1341
|
+
readonly none: "0px";
|
|
1228
1342
|
};
|
|
1229
1343
|
shadows: {
|
|
1230
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";
|
|
@@ -1515,63 +1629,103 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1515
1629
|
};
|
|
1516
1630
|
colors: {
|
|
1517
1631
|
readonly black: any;
|
|
1632
|
+
readonly 'blue-50': any;
|
|
1518
1633
|
readonly 'blue-100': any;
|
|
1634
|
+
readonly 'blue-150': any;
|
|
1519
1635
|
readonly 'blue-200': any;
|
|
1636
|
+
readonly 'blue-250': any;
|
|
1520
1637
|
readonly 'blue-300': any;
|
|
1638
|
+
readonly 'blue-350': any;
|
|
1521
1639
|
readonly 'blue-400': any;
|
|
1640
|
+
readonly 'blue-450': any;
|
|
1522
1641
|
readonly 'blue-500': any;
|
|
1642
|
+
readonly 'blue-550': any;
|
|
1523
1643
|
readonly 'blue-600': any;
|
|
1644
|
+
readonly 'blue-650': any;
|
|
1524
1645
|
readonly 'blue-700': any;
|
|
1646
|
+
readonly 'blue-750': any;
|
|
1525
1647
|
readonly 'blue-800': any;
|
|
1648
|
+
readonly 'blue-850': any;
|
|
1526
1649
|
readonly 'blue-900': any;
|
|
1527
|
-
readonly 'blue-
|
|
1650
|
+
readonly 'blue-950': any;
|
|
1651
|
+
readonly 'gray-50': any;
|
|
1528
1652
|
readonly 'gray-100': any;
|
|
1653
|
+
readonly 'gray-150': any;
|
|
1529
1654
|
readonly 'gray-200': any;
|
|
1655
|
+
readonly 'gray-250': any;
|
|
1530
1656
|
readonly 'gray-300': any;
|
|
1657
|
+
readonly 'gray-350': any;
|
|
1531
1658
|
readonly 'gray-400': any;
|
|
1659
|
+
readonly 'gray-450': any;
|
|
1532
1660
|
readonly 'gray-500': any;
|
|
1661
|
+
readonly 'gray-550': any;
|
|
1533
1662
|
readonly 'gray-600': any;
|
|
1663
|
+
readonly 'gray-650': any;
|
|
1534
1664
|
readonly 'gray-700': any;
|
|
1665
|
+
readonly 'gray-750': any;
|
|
1535
1666
|
readonly 'gray-800': any;
|
|
1667
|
+
readonly 'gray-850': any;
|
|
1536
1668
|
readonly 'gray-900': any;
|
|
1669
|
+
readonly 'gray-950': any;
|
|
1670
|
+
readonly 'green-50': any;
|
|
1537
1671
|
readonly 'green-100': any;
|
|
1672
|
+
readonly 'green-150': any;
|
|
1538
1673
|
readonly 'green-200': any;
|
|
1674
|
+
readonly 'green-250': any;
|
|
1539
1675
|
readonly 'green-300': any;
|
|
1676
|
+
readonly 'green-350': any;
|
|
1540
1677
|
readonly 'green-400': any;
|
|
1678
|
+
readonly 'green-450': any;
|
|
1541
1679
|
readonly 'green-500': any;
|
|
1680
|
+
readonly 'green-550': any;
|
|
1542
1681
|
readonly 'green-600': any;
|
|
1682
|
+
readonly 'green-650': any;
|
|
1543
1683
|
readonly 'green-700': any;
|
|
1684
|
+
readonly 'green-750': any;
|
|
1544
1685
|
readonly 'green-800': any;
|
|
1686
|
+
readonly 'green-850': any;
|
|
1545
1687
|
readonly 'green-900': any;
|
|
1546
|
-
readonly '
|
|
1547
|
-
readonly '
|
|
1548
|
-
readonly 'indigo-300': any;
|
|
1549
|
-
readonly 'indigo-400': any;
|
|
1550
|
-
readonly 'indigo-500': any;
|
|
1551
|
-
readonly 'indigo-600': any;
|
|
1552
|
-
readonly 'indigo-700': any;
|
|
1553
|
-
readonly 'indigo-800': any;
|
|
1554
|
-
readonly 'indigo-900': any;
|
|
1688
|
+
readonly 'green-950': any;
|
|
1689
|
+
readonly 'red-50': any;
|
|
1555
1690
|
readonly 'red-100': any;
|
|
1691
|
+
readonly 'red-150': any;
|
|
1556
1692
|
readonly 'red-200': any;
|
|
1693
|
+
readonly 'red-250': any;
|
|
1557
1694
|
readonly 'red-300': any;
|
|
1695
|
+
readonly 'red-350': any;
|
|
1558
1696
|
readonly 'red-400': any;
|
|
1697
|
+
readonly 'red-450': any;
|
|
1559
1698
|
readonly 'red-500': any;
|
|
1699
|
+
readonly 'red-550': any;
|
|
1560
1700
|
readonly 'red-600': any;
|
|
1701
|
+
readonly 'red-650': any;
|
|
1561
1702
|
readonly 'red-700': any;
|
|
1703
|
+
readonly 'red-750': any;
|
|
1562
1704
|
readonly 'red-800': any;
|
|
1705
|
+
readonly 'red-850': any;
|
|
1563
1706
|
readonly 'red-900': any;
|
|
1707
|
+
readonly 'red-950': any;
|
|
1564
1708
|
readonly transparent: any;
|
|
1565
1709
|
readonly white: any;
|
|
1710
|
+
readonly 'yellow-50': any;
|
|
1566
1711
|
readonly 'yellow-100': any;
|
|
1712
|
+
readonly 'yellow-150': any;
|
|
1567
1713
|
readonly 'yellow-200': any;
|
|
1714
|
+
readonly 'yellow-250': any;
|
|
1568
1715
|
readonly 'yellow-300': any;
|
|
1716
|
+
readonly 'yellow-350': any;
|
|
1569
1717
|
readonly 'yellow-400': any;
|
|
1718
|
+
readonly 'yellow-450': any;
|
|
1570
1719
|
readonly 'yellow-500': any;
|
|
1720
|
+
readonly 'yellow-550': any;
|
|
1571
1721
|
readonly 'yellow-600': any;
|
|
1722
|
+
readonly 'yellow-650': any;
|
|
1572
1723
|
readonly 'yellow-700': any;
|
|
1724
|
+
readonly 'yellow-750': any;
|
|
1573
1725
|
readonly 'yellow-800': any;
|
|
1726
|
+
readonly 'yellow-850': any;
|
|
1574
1727
|
readonly 'yellow-900': any;
|
|
1728
|
+
readonly 'yellow-950': any;
|
|
1575
1729
|
"background-alpha-active"?: any;
|
|
1576
1730
|
"background-alpha-hover"?: any;
|
|
1577
1731
|
"background-danger-prominent"?: any;
|
|
@@ -1592,27 +1746,19 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1592
1746
|
"background-neutrals-inverted-subtle"?: any;
|
|
1593
1747
|
"background-neutrals-page"?: any;
|
|
1594
1748
|
"background-neutrals-page-subtle"?: any;
|
|
1595
|
-
"background-neutrals-
|
|
1596
|
-
"background-neutrals-
|
|
1597
|
-
"background-neutrals-
|
|
1598
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
1599
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
1749
|
+
"background-neutrals-scrollbar"?: any;
|
|
1750
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
1751
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
1600
1752
|
"background-neutrals-subtle"?: any;
|
|
1601
1753
|
"background-neutrals-subtle-active"?: any;
|
|
1602
1754
|
"background-neutrals-subtle-hover"?: any;
|
|
1603
1755
|
"background-primary-prominent"?: any;
|
|
1604
1756
|
"background-primary-prominent-active"?: any;
|
|
1605
|
-
"background-primary-prominent-expanded"?: any;
|
|
1606
1757
|
"background-primary-prominent-hover"?: any;
|
|
1607
|
-
"background-primary-prominent-pressed"?: any;
|
|
1608
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
1609
1758
|
"background-primary-prominent-selected"?: any;
|
|
1610
1759
|
"background-primary-subtle"?: any;
|
|
1611
1760
|
"background-primary-subtle-active"?: any;
|
|
1612
|
-
"background-primary-subtle-expanded"?: any;
|
|
1613
1761
|
"background-primary-subtle-hover"?: any;
|
|
1614
|
-
"background-primary-subtle-pressed"?: any;
|
|
1615
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
1616
1762
|
"background-primary-subtle-selected"?: any;
|
|
1617
1763
|
"background-success"?: any;
|
|
1618
1764
|
"background-success-prominent"?: any;
|
|
@@ -1623,9 +1769,15 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1623
1769
|
"border-danger"?: any;
|
|
1624
1770
|
"border-danger-active"?: any;
|
|
1625
1771
|
"border-danger-hover"?: any;
|
|
1772
|
+
"border-focus-error-inner"?: any;
|
|
1773
|
+
"border-focus-error-middle"?: any;
|
|
1774
|
+
"border-focus-error-outer"?: any;
|
|
1626
1775
|
"border-focus-inner"?: any;
|
|
1627
1776
|
"border-focus-middle"?: any;
|
|
1628
1777
|
"border-focus-outer"?: any;
|
|
1778
|
+
"border-focus-success-inner"?: any;
|
|
1779
|
+
"border-focus-success-middle"?: any;
|
|
1780
|
+
"border-focus-success-outer"?: any;
|
|
1629
1781
|
"border-neutrals"?: any;
|
|
1630
1782
|
"border-neutrals-active"?: any;
|
|
1631
1783
|
"border-neutrals-controls"?: any;
|
|
@@ -1718,13 +1870,13 @@ declare const StyledCorner: react__default.ForwardRefExoticComponent<Omit<Omit<_
|
|
|
1718
1870
|
readonly body: "Open Sans, sans-serif";
|
|
1719
1871
|
};
|
|
1720
1872
|
radii: {
|
|
1721
|
-
readonly none: 0;
|
|
1722
|
-
readonly half: "999em";
|
|
1723
1873
|
readonly 25: "2px";
|
|
1724
1874
|
readonly 50: "4px";
|
|
1725
1875
|
readonly 75: "6px";
|
|
1726
1876
|
readonly 100: "8px";
|
|
1727
1877
|
readonly 200: "16px";
|
|
1878
|
+
readonly half: "999px";
|
|
1879
|
+
readonly none: "0px";
|
|
1728
1880
|
};
|
|
1729
1881
|
shadows: {
|
|
1730
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";
|
|
@@ -2009,63 +2161,103 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2009
2161
|
};
|
|
2010
2162
|
colors: {
|
|
2011
2163
|
readonly black: any;
|
|
2164
|
+
readonly 'blue-50': any;
|
|
2012
2165
|
readonly 'blue-100': any;
|
|
2166
|
+
readonly 'blue-150': any;
|
|
2013
2167
|
readonly 'blue-200': any;
|
|
2168
|
+
readonly 'blue-250': any;
|
|
2014
2169
|
readonly 'blue-300': any;
|
|
2170
|
+
readonly 'blue-350': any;
|
|
2015
2171
|
readonly 'blue-400': any;
|
|
2172
|
+
readonly 'blue-450': any;
|
|
2016
2173
|
readonly 'blue-500': any;
|
|
2174
|
+
readonly 'blue-550': any;
|
|
2017
2175
|
readonly 'blue-600': any;
|
|
2176
|
+
readonly 'blue-650': any;
|
|
2018
2177
|
readonly 'blue-700': any;
|
|
2178
|
+
readonly 'blue-750': any;
|
|
2019
2179
|
readonly 'blue-800': any;
|
|
2180
|
+
readonly 'blue-850': any;
|
|
2020
2181
|
readonly 'blue-900': any;
|
|
2021
|
-
readonly 'blue-
|
|
2182
|
+
readonly 'blue-950': any;
|
|
2183
|
+
readonly 'gray-50': any;
|
|
2022
2184
|
readonly 'gray-100': any;
|
|
2185
|
+
readonly 'gray-150': any;
|
|
2023
2186
|
readonly 'gray-200': any;
|
|
2187
|
+
readonly 'gray-250': any;
|
|
2024
2188
|
readonly 'gray-300': any;
|
|
2189
|
+
readonly 'gray-350': any;
|
|
2025
2190
|
readonly 'gray-400': any;
|
|
2191
|
+
readonly 'gray-450': any;
|
|
2026
2192
|
readonly 'gray-500': any;
|
|
2193
|
+
readonly 'gray-550': any;
|
|
2027
2194
|
readonly 'gray-600': any;
|
|
2195
|
+
readonly 'gray-650': any;
|
|
2028
2196
|
readonly 'gray-700': any;
|
|
2197
|
+
readonly 'gray-750': any;
|
|
2029
2198
|
readonly 'gray-800': any;
|
|
2199
|
+
readonly 'gray-850': any;
|
|
2030
2200
|
readonly 'gray-900': any;
|
|
2201
|
+
readonly 'gray-950': any;
|
|
2202
|
+
readonly 'green-50': any;
|
|
2031
2203
|
readonly 'green-100': any;
|
|
2204
|
+
readonly 'green-150': any;
|
|
2032
2205
|
readonly 'green-200': any;
|
|
2206
|
+
readonly 'green-250': any;
|
|
2033
2207
|
readonly 'green-300': any;
|
|
2208
|
+
readonly 'green-350': any;
|
|
2034
2209
|
readonly 'green-400': any;
|
|
2210
|
+
readonly 'green-450': any;
|
|
2035
2211
|
readonly 'green-500': any;
|
|
2212
|
+
readonly 'green-550': any;
|
|
2036
2213
|
readonly 'green-600': any;
|
|
2214
|
+
readonly 'green-650': any;
|
|
2037
2215
|
readonly 'green-700': any;
|
|
2216
|
+
readonly 'green-750': any;
|
|
2038
2217
|
readonly 'green-800': any;
|
|
2218
|
+
readonly 'green-850': any;
|
|
2039
2219
|
readonly 'green-900': any;
|
|
2040
|
-
readonly '
|
|
2041
|
-
readonly '
|
|
2042
|
-
readonly 'indigo-300': any;
|
|
2043
|
-
readonly 'indigo-400': any;
|
|
2044
|
-
readonly 'indigo-500': any;
|
|
2045
|
-
readonly 'indigo-600': any;
|
|
2046
|
-
readonly 'indigo-700': any;
|
|
2047
|
-
readonly 'indigo-800': any;
|
|
2048
|
-
readonly 'indigo-900': any;
|
|
2220
|
+
readonly 'green-950': any;
|
|
2221
|
+
readonly 'red-50': any;
|
|
2049
2222
|
readonly 'red-100': any;
|
|
2223
|
+
readonly 'red-150': any;
|
|
2050
2224
|
readonly 'red-200': any;
|
|
2225
|
+
readonly 'red-250': any;
|
|
2051
2226
|
readonly 'red-300': any;
|
|
2227
|
+
readonly 'red-350': any;
|
|
2052
2228
|
readonly 'red-400': any;
|
|
2229
|
+
readonly 'red-450': any;
|
|
2053
2230
|
readonly 'red-500': any;
|
|
2231
|
+
readonly 'red-550': any;
|
|
2054
2232
|
readonly 'red-600': any;
|
|
2233
|
+
readonly 'red-650': any;
|
|
2055
2234
|
readonly 'red-700': any;
|
|
2235
|
+
readonly 'red-750': any;
|
|
2056
2236
|
readonly 'red-800': any;
|
|
2237
|
+
readonly 'red-850': any;
|
|
2057
2238
|
readonly 'red-900': any;
|
|
2239
|
+
readonly 'red-950': any;
|
|
2058
2240
|
readonly transparent: any;
|
|
2059
2241
|
readonly white: any;
|
|
2242
|
+
readonly 'yellow-50': any;
|
|
2060
2243
|
readonly 'yellow-100': any;
|
|
2244
|
+
readonly 'yellow-150': any;
|
|
2061
2245
|
readonly 'yellow-200': any;
|
|
2246
|
+
readonly 'yellow-250': any;
|
|
2062
2247
|
readonly 'yellow-300': any;
|
|
2248
|
+
readonly 'yellow-350': any;
|
|
2063
2249
|
readonly 'yellow-400': any;
|
|
2250
|
+
readonly 'yellow-450': any;
|
|
2064
2251
|
readonly 'yellow-500': any;
|
|
2252
|
+
readonly 'yellow-550': any;
|
|
2065
2253
|
readonly 'yellow-600': any;
|
|
2254
|
+
readonly 'yellow-650': any;
|
|
2066
2255
|
readonly 'yellow-700': any;
|
|
2256
|
+
readonly 'yellow-750': any;
|
|
2067
2257
|
readonly 'yellow-800': any;
|
|
2258
|
+
readonly 'yellow-850': any;
|
|
2068
2259
|
readonly 'yellow-900': any;
|
|
2260
|
+
readonly 'yellow-950': any;
|
|
2069
2261
|
"background-alpha-active"?: any;
|
|
2070
2262
|
"background-alpha-hover"?: any;
|
|
2071
2263
|
"background-danger-prominent"?: any;
|
|
@@ -2086,27 +2278,19 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2086
2278
|
"background-neutrals-inverted-subtle"?: any;
|
|
2087
2279
|
"background-neutrals-page"?: any;
|
|
2088
2280
|
"background-neutrals-page-subtle"?: any;
|
|
2089
|
-
"background-neutrals-
|
|
2090
|
-
"background-neutrals-
|
|
2091
|
-
"background-neutrals-
|
|
2092
|
-
"background-neutrals-scrolls-pressed"?: any;
|
|
2093
|
-
"background-neutrals-scrolls-pressed-hover"?: any;
|
|
2281
|
+
"background-neutrals-scrollbar"?: any;
|
|
2282
|
+
"background-neutrals-scrollbar-active"?: any;
|
|
2283
|
+
"background-neutrals-scrollbar-hover"?: any;
|
|
2094
2284
|
"background-neutrals-subtle"?: any;
|
|
2095
2285
|
"background-neutrals-subtle-active"?: any;
|
|
2096
2286
|
"background-neutrals-subtle-hover"?: any;
|
|
2097
2287
|
"background-primary-prominent"?: any;
|
|
2098
2288
|
"background-primary-prominent-active"?: any;
|
|
2099
|
-
"background-primary-prominent-expanded"?: any;
|
|
2100
2289
|
"background-primary-prominent-hover"?: any;
|
|
2101
|
-
"background-primary-prominent-pressed"?: any;
|
|
2102
|
-
"background-primary-prominent-pressed-hover"?: any;
|
|
2103
2290
|
"background-primary-prominent-selected"?: any;
|
|
2104
2291
|
"background-primary-subtle"?: any;
|
|
2105
2292
|
"background-primary-subtle-active"?: any;
|
|
2106
|
-
"background-primary-subtle-expanded"?: any;
|
|
2107
2293
|
"background-primary-subtle-hover"?: any;
|
|
2108
|
-
"background-primary-subtle-pressed"?: any;
|
|
2109
|
-
"background-primary-subtle-pressed-hover"?: any;
|
|
2110
2294
|
"background-primary-subtle-selected"?: any;
|
|
2111
2295
|
"background-success"?: any;
|
|
2112
2296
|
"background-success-prominent"?: any;
|
|
@@ -2117,9 +2301,15 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2117
2301
|
"border-danger"?: any;
|
|
2118
2302
|
"border-danger-active"?: any;
|
|
2119
2303
|
"border-danger-hover"?: any;
|
|
2304
|
+
"border-focus-error-inner"?: any;
|
|
2305
|
+
"border-focus-error-middle"?: any;
|
|
2306
|
+
"border-focus-error-outer"?: any;
|
|
2120
2307
|
"border-focus-inner"?: any;
|
|
2121
2308
|
"border-focus-middle"?: any;
|
|
2122
2309
|
"border-focus-outer"?: any;
|
|
2310
|
+
"border-focus-success-inner"?: any;
|
|
2311
|
+
"border-focus-success-middle"?: any;
|
|
2312
|
+
"border-focus-success-outer"?: any;
|
|
2123
2313
|
"border-neutrals"?: any;
|
|
2124
2314
|
"border-neutrals-active"?: any;
|
|
2125
2315
|
"border-neutrals-controls"?: any;
|
|
@@ -2212,13 +2402,13 @@ declare const StyledScrollArea: react.ForwardRefExoticComponent<Omit<Omit<_miroh
|
|
|
2212
2402
|
readonly body: "Open Sans, sans-serif";
|
|
2213
2403
|
};
|
|
2214
2404
|
radii: {
|
|
2215
|
-
readonly none: 0;
|
|
2216
|
-
readonly half: "999em";
|
|
2217
2405
|
readonly 25: "2px";
|
|
2218
2406
|
readonly 50: "4px";
|
|
2219
2407
|
readonly 75: "6px";
|
|
2220
2408
|
readonly 100: "8px";
|
|
2221
2409
|
readonly 200: "16px";
|
|
2410
|
+
readonly half: "999px";
|
|
2411
|
+
readonly none: "0px";
|
|
2222
2412
|
};
|
|
2223
2413
|
shadows: {
|
|
2224
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";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-scroll-area",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1-colors.1",
|
|
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.
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.1-colors.1"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c ../../../rollup.config.js",
|