@mirohq/design-system-toolbar 2.5.1 → 2.5.2-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.
Files changed (6) hide show
  1. package/dist/main.js +1 -1
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +1 -1
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +244 -92
  6. package/package.json +3 -3
package/dist/main.js CHANGED
@@ -83,7 +83,7 @@ const StyledItem = designSystemStitches.styled(RadixToolbar__namespace.Button, {
83
83
  height: "$10",
84
84
  ...designSystemStyles.focus.css({
85
85
  boxShadow: "$focus-small-outline",
86
- borderColor: "$blue-500 !important"
86
+ borderColor: "$blue-400 !important"
87
87
  }),
88
88
  [disabledSelector]: {
89
89
  pointerEvents: "none",
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","usePress","booleanify","useHover","mergeProps","jsx","Separator"],"mappings":"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"}
1
+ {"version":3,"file":"main.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-400 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["styled","Root","RadixToolbar","focus","React","usePress","booleanify","useHover","mergeProps","jsx","Separator"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -57,7 +57,7 @@ const StyledItem = styled(RadixToolbar.Button, {
57
57
  height: "$10",
58
58
  ...focus.css({
59
59
  boxShadow: "$focus-small-outline",
60
- borderColor: "$blue-500 !important"
60
+ borderColor: "$blue-400 !important"
61
61
  }),
62
62
  [disabledSelector]: {
63
63
  pointerEvents: "none",
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
1
+ {"version":3,"file":"module.js","sources":["../src/toolbar.styled.ts","../src/partials/item.styled.ts","../src/partials/item.tsx","../src/partials/icon.styled.tsx","../src/partials/icon.tsx","../src/partials/separator.styled.ts","../src/partials/separator.tsx","../src/partials/link.styled.tsx","../src/partials/link.tsx","../src/toolbar.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-toolbar'\n\nexport const StyledToolbar = styled(Root, {\n all: 'unset',\n display: 'flex',\n boxSizing: 'border-box',\n alignItems: 'center',\n maxWidth: '100%',\n gap: '$50',\n\n '&[data-orientation=\"vertical\"]': {\n flexDirection: 'column',\n width: '$12',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '$12',\n },\n\n variants: {\n unstyled: {\n false: {\n backgroundColor: '$background-neutrals-container',\n boxShadow: '$50',\n borderRadius: '$50',\n padding: '2px',\n },\n },\n },\n})\n\nexport type StyledToolbarProps = StrictComponentProps<typeof StyledToolbar>\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport * as RadixToolbar from '@radix-ui/react-toolbar'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst defaultStyles = {\n boxSizing: 'border-box',\n cursor: 'pointer',\n userSelect: 'none',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n}\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\nexport const StyledItem = styled(RadixToolbar.Button, {\n variants: {\n unstyled: {\n true: {\n ...defaultStyles,\n },\n false: {\n ...defaultStyles,\n borderRadius: 4,\n height: '$10',\n\n ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-400 !important',\n }),\n\n [disabledSelector]: {\n pointerEvents: 'none',\n color: '$text-neutrals-disabled',\n },\n\n '&[data-hovered]': {\n backgroundColor: '$background-primary-subtle-hover',\n color: '$icon-primary-hover',\n },\n\n '&:active, &[data-pressed]': {\n backgroundColor: '$background-primary-subtle-active',\n color: '$icon-primary-active',\n },\n },\n },\n wrapper: {\n true: {\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n },\n },\n active: {\n true: {},\n false: {},\n },\n },\n\n '&[tabindex=\"0\"]': {\n zIndex: '1',\n },\n\n compoundVariants: [\n {\n unstyled: false,\n active: true,\n css: {\n '&&': {\n backgroundColor: '$background-primary-subtle-selected',\n color: '$icon-primary-selected',\n },\n },\n },\n ],\n})\n\nexport type StyledItemProps = StrictComponentProps<typeof StyledItem>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { mergeProps } from '@react-aria/utils'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport type { PressEvents } from '@mirohq/design-system-use-press'\n\nimport { StyledItem } from './item.styled'\nimport type { StyledItemProps } from './item.styled'\n\nexport interface ItemProps extends StyledItemProps, HoverEvents, PressEvents {\n /**\n * Renders item in enabled/toggled state.\n * @default false\n */\n active?: boolean\n\n /**\n * It's applied by default when using with asChild attribute.\n * You can still combine default Item styles with your own component by\n * setting this prop to false.\n * Note: Must be used together with asChild\n * @default true\n */\n unstyled?: boolean\n\n disabled?: boolean\n}\n\nexport const Item = React.forwardRef<ElementRef<typeof StyledItem>, ItemProps>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n asChild,\n unstyled = true,\n active = false,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n let elementProps = restProps\n\n const { pressProps } = usePress({\n preventFocusOnPress: 'auto',\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledItem\n {...elementProps}\n data-hovered={isHovered ? '' : undefined}\n asChild={asChild}\n active={active}\n unstyled={asChild === true ? unstyled : false}\n wrapper={asChild !== true}\n disabled={disabled}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\n ref={forwardRef}\n />\n )\n }\n)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledIcon = styled(Item, {\n padding: 0,\n border: 'none',\n font: 'unset',\n width: '$10',\n color: '$icon-neutrals',\n})\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledIcon } from './icon.styled'\n\nexport type IconProps = Omit<ItemProps, 'unstyled'>\n\nexport const Icon = React.forwardRef<ElementRef<typeof StyledIcon>, IconProps>(\n (props, forwardRef) => (\n <StyledIcon unstyled={false} {...props} ref={forwardRef} />\n )\n)\n","import { styled } from '@mirohq/design-system-stitches'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\nimport { Separator } from '@radix-ui/react-toolbar'\n\nexport const StyledSeparator = styled(Separator, {\n all: 'unset',\n display: 'block',\n boxSizing: 'border-box',\n backgroundColor: 'rgba(205, 204, 215, 1)',\n\n '&[data-orientation=\"vertical\"]': {\n width: '1px',\n height: '$6',\n margin: '0 $50',\n },\n\n '&[data-orientation=\"horizontal\"]': {\n height: '1px',\n width: '$6',\n margin: '$50 0',\n },\n})\n\nexport type StyledSeparatorProps = StrictComponentProps<typeof StyledSeparator>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport type { StyledSeparatorProps } from './separator.styled'\nimport { StyledSeparator } from './separator.styled'\n\nexport interface SeparatorProps extends StyledSeparatorProps {}\n\nexport const Separator = React.forwardRef<\n ElementRef<typeof StyledSeparator>,\n SeparatorProps\n>((props, forwardRef) => <StyledSeparator {...props} ref={forwardRef} />)\n","import { styled } from '@mirohq/design-system-stitches'\n\nimport { Item } from './item'\n\nexport const StyledLink = styled(Item, {\n paddingX: '$150',\n textDecoration: 'none',\n})\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\n\nimport type { ItemProps } from './item'\nimport { StyledLink } from './link.styled'\n\ntype ItemPropsWithAnchor = Omit<ItemProps, 'unstyled'> &\n AnchorHTMLAttributes<typeof StyledLink>\nexport interface LinkProps extends ItemPropsWithAnchor {}\n\nexport const Link = React.forwardRef<ElementRef<typeof StyledLink>, LinkProps>(\n ({ children, href, ...restProps }, forwardRef) => (\n <StyledLink asChild unstyled={false} {...restProps} ref={forwardRef}>\n <a href={href}>{children}</a>\n </StyledLink>\n )\n)\n","import React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledToolbarProps } from './toolbar.styled'\nimport { StyledToolbar } from './toolbar.styled'\nimport { Icon } from './partials/icon'\nimport { Separator } from './partials/separator'\nimport { Link } from './partials/link'\nimport { Item } from './partials/item'\n\nexport interface ToolbarProps extends StyledToolbarProps {\n /**\n * Defines whether the toolbar has default styles (e.g. background, shadow, etc.)\n * @default false\n */\n unstyled?: boolean\n\n /**\n * The orientation of the toolbar\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical'\n\n /**\n * The reading direction of the toolbar\n * @default 'ltr'\n */\n dir?: 'ltr' | 'rtl'\n\n /**\n * The reading direction of the toolbar\n * @deprecated use dir instead\n */\n direction?: 'ltr' | 'rtl'\n\n /**\n * When true, keyboard navigation will loop from last tab to first, and vice versa\n * @default true\n */\n loop?: boolean\n}\n\nexport const Toolbar = React.forwardRef<\n ElementRef<typeof StyledToolbar>,\n ToolbarProps\n>(\n (\n {\n unstyled = false,\n orientation = 'horizontal',\n dir = 'ltr',\n loop = true,\n direction,\n ...restProps\n },\n forwardRef\n ) => (\n <StyledToolbar\n unstyled={unstyled}\n orientation={orientation}\n dir={direction ?? dir}\n loop={loop}\n ref={forwardRef}\n {...restProps}\n />\n )\n) as ForwardRefExoticComponent<ToolbarProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n Icon: typeof Icon\n Item: typeof Item\n Link: typeof Link\n Separator: typeof Separator\n}\n\nToolbar.Icon = Icon\nToolbar.Item = Item\nToolbar.Link = Link\nToolbar.Separator = Separator\n"],"names":["Separator"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -17,63 +17,103 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
17
17
  };
18
18
  colors: {
19
19
  readonly black: any;
20
+ readonly 'blue-50': any;
20
21
  readonly 'blue-100': any;
22
+ readonly 'blue-150': any;
21
23
  readonly 'blue-200': any;
24
+ readonly 'blue-250': any;
22
25
  readonly 'blue-300': any;
26
+ readonly 'blue-350': any;
23
27
  readonly 'blue-400': any;
28
+ readonly 'blue-450': any;
24
29
  readonly 'blue-500': any;
30
+ readonly 'blue-550': any;
25
31
  readonly 'blue-600': any;
32
+ readonly 'blue-650': any;
26
33
  readonly 'blue-700': any;
34
+ readonly 'blue-750': any;
27
35
  readonly 'blue-800': any;
36
+ readonly 'blue-850': any;
28
37
  readonly 'blue-900': any;
29
- readonly 'blue-1000': any;
38
+ readonly 'blue-950': any;
39
+ readonly 'gray-50': any;
30
40
  readonly 'gray-100': any;
41
+ readonly 'gray-150': any;
31
42
  readonly 'gray-200': any;
43
+ readonly 'gray-250': any;
32
44
  readonly 'gray-300': any;
45
+ readonly 'gray-350': any;
33
46
  readonly 'gray-400': any;
47
+ readonly 'gray-450': any;
34
48
  readonly 'gray-500': any;
49
+ readonly 'gray-550': any;
35
50
  readonly 'gray-600': any;
51
+ readonly 'gray-650': any;
36
52
  readonly 'gray-700': any;
53
+ readonly 'gray-750': any;
37
54
  readonly 'gray-800': any;
55
+ readonly 'gray-850': any;
38
56
  readonly 'gray-900': any;
57
+ readonly 'gray-950': any;
58
+ readonly 'green-50': any;
39
59
  readonly 'green-100': any;
60
+ readonly 'green-150': any;
40
61
  readonly 'green-200': any;
62
+ readonly 'green-250': any;
41
63
  readonly 'green-300': any;
64
+ readonly 'green-350': any;
42
65
  readonly 'green-400': any;
66
+ readonly 'green-450': any;
43
67
  readonly 'green-500': any;
68
+ readonly 'green-550': any;
44
69
  readonly 'green-600': any;
70
+ readonly 'green-650': any;
45
71
  readonly 'green-700': any;
72
+ readonly 'green-750': any;
46
73
  readonly 'green-800': any;
74
+ readonly 'green-850': any;
47
75
  readonly 'green-900': any;
48
- readonly 'indigo-100': any;
49
- readonly 'indigo-200': any;
50
- readonly 'indigo-300': any;
51
- readonly 'indigo-400': any;
52
- readonly 'indigo-500': any;
53
- readonly 'indigo-600': any;
54
- readonly 'indigo-700': any;
55
- readonly 'indigo-800': any;
56
- readonly 'indigo-900': any;
76
+ readonly 'green-950': any;
77
+ readonly 'red-50': any;
57
78
  readonly 'red-100': any;
79
+ readonly 'red-150': any;
58
80
  readonly 'red-200': any;
81
+ readonly 'red-250': any;
59
82
  readonly 'red-300': any;
83
+ readonly 'red-350': any;
60
84
  readonly 'red-400': any;
85
+ readonly 'red-450': any;
61
86
  readonly 'red-500': any;
87
+ readonly 'red-550': any;
62
88
  readonly 'red-600': any;
89
+ readonly 'red-650': any;
63
90
  readonly 'red-700': any;
91
+ readonly 'red-750': any;
64
92
  readonly 'red-800': any;
93
+ readonly 'red-850': any;
65
94
  readonly 'red-900': any;
95
+ readonly 'red-950': any;
66
96
  readonly transparent: any;
67
97
  readonly white: any;
98
+ readonly 'yellow-50': any;
68
99
  readonly 'yellow-100': any;
100
+ readonly 'yellow-150': any;
69
101
  readonly 'yellow-200': any;
102
+ readonly 'yellow-250': any;
70
103
  readonly 'yellow-300': any;
104
+ readonly 'yellow-350': any;
71
105
  readonly 'yellow-400': any;
106
+ readonly 'yellow-450': any;
72
107
  readonly 'yellow-500': any;
108
+ readonly 'yellow-550': any;
73
109
  readonly 'yellow-600': any;
110
+ readonly 'yellow-650': any;
74
111
  readonly 'yellow-700': any;
112
+ readonly 'yellow-750': any;
75
113
  readonly 'yellow-800': any;
114
+ readonly 'yellow-850': any;
76
115
  readonly 'yellow-900': any;
116
+ readonly 'yellow-950': any;
77
117
  "background-alpha-active"?: any;
78
118
  "background-alpha-hover"?: any;
79
119
  "background-danger-prominent"?: any;
@@ -94,27 +134,19 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
94
134
  "background-neutrals-inverted-subtle"?: any;
95
135
  "background-neutrals-page"?: any;
96
136
  "background-neutrals-page-subtle"?: any;
97
- "background-neutrals-scrolls"?: any;
98
- "background-neutrals-scrolls-expanded"?: any;
99
- "background-neutrals-scrolls-hover"?: any;
100
- "background-neutrals-scrolls-pressed"?: any;
101
- "background-neutrals-scrolls-pressed-hover"?: any;
137
+ "background-neutrals-scrollbar"?: any;
138
+ "background-neutrals-scrollbar-active"?: any;
139
+ "background-neutrals-scrollbar-hover"?: any;
102
140
  "background-neutrals-subtle"?: any;
103
141
  "background-neutrals-subtle-active"?: any;
104
142
  "background-neutrals-subtle-hover"?: any;
105
143
  "background-primary-prominent"?: any;
106
144
  "background-primary-prominent-active"?: any;
107
- "background-primary-prominent-expanded"?: any;
108
145
  "background-primary-prominent-hover"?: any;
109
- "background-primary-prominent-pressed"?: any;
110
- "background-primary-prominent-pressed-hover"?: any;
111
146
  "background-primary-prominent-selected"?: any;
112
147
  "background-primary-subtle"?: any;
113
148
  "background-primary-subtle-active"?: any;
114
- "background-primary-subtle-expanded"?: any;
115
149
  "background-primary-subtle-hover"?: any;
116
- "background-primary-subtle-pressed"?: any;
117
- "background-primary-subtle-pressed-hover"?: any;
118
150
  "background-primary-subtle-selected"?: any;
119
151
  "background-success"?: any;
120
152
  "background-success-prominent"?: any;
@@ -125,9 +157,15 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
125
157
  "border-danger"?: any;
126
158
  "border-danger-active"?: any;
127
159
  "border-danger-hover"?: any;
160
+ "border-focus-error-inner"?: any;
161
+ "border-focus-error-middle"?: any;
162
+ "border-focus-error-outer"?: any;
128
163
  "border-focus-inner"?: any;
129
164
  "border-focus-middle"?: any;
130
165
  "border-focus-outer"?: any;
166
+ "border-focus-success-inner"?: any;
167
+ "border-focus-success-middle"?: any;
168
+ "border-focus-success-outer"?: any;
131
169
  "border-neutrals"?: any;
132
170
  "border-neutrals-active"?: any;
133
171
  "border-neutrals-controls"?: any;
@@ -220,13 +258,13 @@ declare const StyledToolbar: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_d
220
258
  readonly body: "Open Sans, sans-serif";
221
259
  };
222
260
  radii: {
223
- readonly none: 0;
224
- readonly half: "999em";
225
261
  readonly 25: "2px";
226
262
  readonly 50: "4px";
227
263
  readonly 75: "6px";
228
264
  readonly 100: "8px";
229
265
  readonly 200: "16px";
266
+ readonly half: "999px";
267
+ readonly none: "0px";
230
268
  };
231
269
  shadows: {
232
270
  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";
@@ -512,63 +550,103 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
512
550
  };
513
551
  colors: {
514
552
  readonly black: any;
553
+ readonly 'blue-50': any;
515
554
  readonly 'blue-100': any;
555
+ readonly 'blue-150': any;
516
556
  readonly 'blue-200': any;
557
+ readonly 'blue-250': any;
517
558
  readonly 'blue-300': any;
559
+ readonly 'blue-350': any;
518
560
  readonly 'blue-400': any;
561
+ readonly 'blue-450': any;
519
562
  readonly 'blue-500': any;
563
+ readonly 'blue-550': any;
520
564
  readonly 'blue-600': any;
565
+ readonly 'blue-650': any;
521
566
  readonly 'blue-700': any;
567
+ readonly 'blue-750': any;
522
568
  readonly 'blue-800': any;
569
+ readonly 'blue-850': any;
523
570
  readonly 'blue-900': any;
524
- readonly 'blue-1000': any;
571
+ readonly 'blue-950': any;
572
+ readonly 'gray-50': any;
525
573
  readonly 'gray-100': any;
574
+ readonly 'gray-150': any;
526
575
  readonly 'gray-200': any;
576
+ readonly 'gray-250': any;
527
577
  readonly 'gray-300': any;
578
+ readonly 'gray-350': any;
528
579
  readonly 'gray-400': any;
580
+ readonly 'gray-450': any;
529
581
  readonly 'gray-500': any;
582
+ readonly 'gray-550': any;
530
583
  readonly 'gray-600': any;
584
+ readonly 'gray-650': any;
531
585
  readonly 'gray-700': any;
586
+ readonly 'gray-750': any;
532
587
  readonly 'gray-800': any;
588
+ readonly 'gray-850': any;
533
589
  readonly 'gray-900': any;
590
+ readonly 'gray-950': any;
591
+ readonly 'green-50': any;
534
592
  readonly 'green-100': any;
593
+ readonly 'green-150': any;
535
594
  readonly 'green-200': any;
595
+ readonly 'green-250': any;
536
596
  readonly 'green-300': any;
597
+ readonly 'green-350': any;
537
598
  readonly 'green-400': any;
599
+ readonly 'green-450': any;
538
600
  readonly 'green-500': any;
601
+ readonly 'green-550': any;
539
602
  readonly 'green-600': any;
603
+ readonly 'green-650': any;
540
604
  readonly 'green-700': any;
605
+ readonly 'green-750': any;
541
606
  readonly 'green-800': any;
607
+ readonly 'green-850': any;
542
608
  readonly 'green-900': any;
543
- readonly 'indigo-100': any;
544
- readonly 'indigo-200': any;
545
- readonly 'indigo-300': any;
546
- readonly 'indigo-400': any;
547
- readonly 'indigo-500': any;
548
- readonly 'indigo-600': any;
549
- readonly 'indigo-700': any;
550
- readonly 'indigo-800': any;
551
- readonly 'indigo-900': any;
609
+ readonly 'green-950': any;
610
+ readonly 'red-50': any;
552
611
  readonly 'red-100': any;
612
+ readonly 'red-150': any;
553
613
  readonly 'red-200': any;
614
+ readonly 'red-250': any;
554
615
  readonly 'red-300': any;
616
+ readonly 'red-350': any;
555
617
  readonly 'red-400': any;
618
+ readonly 'red-450': any;
556
619
  readonly 'red-500': any;
620
+ readonly 'red-550': any;
557
621
  readonly 'red-600': any;
622
+ readonly 'red-650': any;
558
623
  readonly 'red-700': any;
624
+ readonly 'red-750': any;
559
625
  readonly 'red-800': any;
626
+ readonly 'red-850': any;
560
627
  readonly 'red-900': any;
628
+ readonly 'red-950': any;
561
629
  readonly transparent: any;
562
630
  readonly white: any;
631
+ readonly 'yellow-50': any;
563
632
  readonly 'yellow-100': any;
633
+ readonly 'yellow-150': any;
564
634
  readonly 'yellow-200': any;
635
+ readonly 'yellow-250': any;
565
636
  readonly 'yellow-300': any;
637
+ readonly 'yellow-350': any;
566
638
  readonly 'yellow-400': any;
639
+ readonly 'yellow-450': any;
567
640
  readonly 'yellow-500': any;
641
+ readonly 'yellow-550': any;
568
642
  readonly 'yellow-600': any;
643
+ readonly 'yellow-650': any;
569
644
  readonly 'yellow-700': any;
645
+ readonly 'yellow-750': any;
570
646
  readonly 'yellow-800': any;
647
+ readonly 'yellow-850': any;
571
648
  readonly 'yellow-900': any;
649
+ readonly 'yellow-950': any;
572
650
  "background-alpha-active"?: any;
573
651
  "background-alpha-hover"?: any;
574
652
  "background-danger-prominent"?: any;
@@ -589,27 +667,19 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
589
667
  "background-neutrals-inverted-subtle"?: any;
590
668
  "background-neutrals-page"?: any;
591
669
  "background-neutrals-page-subtle"?: any;
592
- "background-neutrals-scrolls"?: any;
593
- "background-neutrals-scrolls-expanded"?: any;
594
- "background-neutrals-scrolls-hover"?: any;
595
- "background-neutrals-scrolls-pressed"?: any;
596
- "background-neutrals-scrolls-pressed-hover"?: any;
670
+ "background-neutrals-scrollbar"?: any;
671
+ "background-neutrals-scrollbar-active"?: any;
672
+ "background-neutrals-scrollbar-hover"?: any;
597
673
  "background-neutrals-subtle"?: any;
598
674
  "background-neutrals-subtle-active"?: any;
599
675
  "background-neutrals-subtle-hover"?: any;
600
676
  "background-primary-prominent"?: any;
601
677
  "background-primary-prominent-active"?: any;
602
- "background-primary-prominent-expanded"?: any;
603
678
  "background-primary-prominent-hover"?: any;
604
- "background-primary-prominent-pressed"?: any;
605
- "background-primary-prominent-pressed-hover"?: any;
606
679
  "background-primary-prominent-selected"?: any;
607
680
  "background-primary-subtle"?: any;
608
681
  "background-primary-subtle-active"?: any;
609
- "background-primary-subtle-expanded"?: any;
610
682
  "background-primary-subtle-hover"?: any;
611
- "background-primary-subtle-pressed"?: any;
612
- "background-primary-subtle-pressed-hover"?: any;
613
683
  "background-primary-subtle-selected"?: any;
614
684
  "background-success"?: any;
615
685
  "background-success-prominent"?: any;
@@ -620,9 +690,15 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
620
690
  "border-danger"?: any;
621
691
  "border-danger-active"?: any;
622
692
  "border-danger-hover"?: any;
693
+ "border-focus-error-inner"?: any;
694
+ "border-focus-error-middle"?: any;
695
+ "border-focus-error-outer"?: any;
623
696
  "border-focus-inner"?: any;
624
697
  "border-focus-middle"?: any;
625
698
  "border-focus-outer"?: any;
699
+ "border-focus-success-inner"?: any;
700
+ "border-focus-success-middle"?: any;
701
+ "border-focus-success-outer"?: any;
626
702
  "border-neutrals"?: any;
627
703
  "border-neutrals-active"?: any;
628
704
  "border-neutrals-controls"?: any;
@@ -715,13 +791,13 @@ declare const StyledItem: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
715
791
  readonly body: "Open Sans, sans-serif";
716
792
  };
717
793
  radii: {
718
- readonly none: 0;
719
- readonly half: "999em";
720
794
  readonly 25: "2px";
721
795
  readonly 50: "4px";
722
796
  readonly 75: "6px";
723
797
  readonly 100: "8px";
724
798
  readonly 200: "16px";
799
+ readonly half: "999px";
800
+ readonly none: "0px";
725
801
  };
726
802
  shadows: {
727
803
  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";
@@ -1032,63 +1108,103 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1032
1108
  };
1033
1109
  colors: {
1034
1110
  readonly black: any;
1111
+ readonly 'blue-50': any;
1035
1112
  readonly 'blue-100': any;
1113
+ readonly 'blue-150': any;
1036
1114
  readonly 'blue-200': any;
1115
+ readonly 'blue-250': any;
1037
1116
  readonly 'blue-300': any;
1117
+ readonly 'blue-350': any;
1038
1118
  readonly 'blue-400': any;
1119
+ readonly 'blue-450': any;
1039
1120
  readonly 'blue-500': any;
1121
+ readonly 'blue-550': any;
1040
1122
  readonly 'blue-600': any;
1123
+ readonly 'blue-650': any;
1041
1124
  readonly 'blue-700': any;
1125
+ readonly 'blue-750': any;
1042
1126
  readonly 'blue-800': any;
1127
+ readonly 'blue-850': any;
1043
1128
  readonly 'blue-900': any;
1044
- readonly 'blue-1000': any;
1129
+ readonly 'blue-950': any;
1130
+ readonly 'gray-50': any;
1045
1131
  readonly 'gray-100': any;
1132
+ readonly 'gray-150': any;
1046
1133
  readonly 'gray-200': any;
1134
+ readonly 'gray-250': any;
1047
1135
  readonly 'gray-300': any;
1136
+ readonly 'gray-350': any;
1048
1137
  readonly 'gray-400': any;
1138
+ readonly 'gray-450': any;
1049
1139
  readonly 'gray-500': any;
1140
+ readonly 'gray-550': any;
1050
1141
  readonly 'gray-600': any;
1142
+ readonly 'gray-650': any;
1051
1143
  readonly 'gray-700': any;
1144
+ readonly 'gray-750': any;
1052
1145
  readonly 'gray-800': any;
1146
+ readonly 'gray-850': any;
1053
1147
  readonly 'gray-900': any;
1148
+ readonly 'gray-950': any;
1149
+ readonly 'green-50': any;
1054
1150
  readonly 'green-100': any;
1151
+ readonly 'green-150': any;
1055
1152
  readonly 'green-200': any;
1153
+ readonly 'green-250': any;
1056
1154
  readonly 'green-300': any;
1155
+ readonly 'green-350': any;
1057
1156
  readonly 'green-400': any;
1157
+ readonly 'green-450': any;
1058
1158
  readonly 'green-500': any;
1159
+ readonly 'green-550': any;
1059
1160
  readonly 'green-600': any;
1161
+ readonly 'green-650': any;
1060
1162
  readonly 'green-700': any;
1163
+ readonly 'green-750': any;
1061
1164
  readonly 'green-800': any;
1165
+ readonly 'green-850': any;
1062
1166
  readonly 'green-900': any;
1063
- readonly 'indigo-100': any;
1064
- readonly 'indigo-200': any;
1065
- readonly 'indigo-300': any;
1066
- readonly 'indigo-400': any;
1067
- readonly 'indigo-500': any;
1068
- readonly 'indigo-600': any;
1069
- readonly 'indigo-700': any;
1070
- readonly 'indigo-800': any;
1071
- readonly 'indigo-900': any;
1167
+ readonly 'green-950': any;
1168
+ readonly 'red-50': any;
1072
1169
  readonly 'red-100': any;
1170
+ readonly 'red-150': any;
1073
1171
  readonly 'red-200': any;
1172
+ readonly 'red-250': any;
1074
1173
  readonly 'red-300': any;
1174
+ readonly 'red-350': any;
1075
1175
  readonly 'red-400': any;
1176
+ readonly 'red-450': any;
1076
1177
  readonly 'red-500': any;
1178
+ readonly 'red-550': any;
1077
1179
  readonly 'red-600': any;
1180
+ readonly 'red-650': any;
1078
1181
  readonly 'red-700': any;
1182
+ readonly 'red-750': any;
1079
1183
  readonly 'red-800': any;
1184
+ readonly 'red-850': any;
1080
1185
  readonly 'red-900': any;
1186
+ readonly 'red-950': any;
1081
1187
  readonly transparent: any;
1082
1188
  readonly white: any;
1189
+ readonly 'yellow-50': any;
1083
1190
  readonly 'yellow-100': any;
1191
+ readonly 'yellow-150': any;
1084
1192
  readonly 'yellow-200': any;
1193
+ readonly 'yellow-250': any;
1085
1194
  readonly 'yellow-300': any;
1195
+ readonly 'yellow-350': any;
1086
1196
  readonly 'yellow-400': any;
1197
+ readonly 'yellow-450': any;
1087
1198
  readonly 'yellow-500': any;
1199
+ readonly 'yellow-550': any;
1088
1200
  readonly 'yellow-600': any;
1201
+ readonly 'yellow-650': any;
1089
1202
  readonly 'yellow-700': any;
1203
+ readonly 'yellow-750': any;
1090
1204
  readonly 'yellow-800': any;
1205
+ readonly 'yellow-850': any;
1091
1206
  readonly 'yellow-900': any;
1207
+ readonly 'yellow-950': any;
1092
1208
  "background-alpha-active"?: any;
1093
1209
  "background-alpha-hover"?: any;
1094
1210
  "background-danger-prominent"?: any;
@@ -1109,27 +1225,19 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1109
1225
  "background-neutrals-inverted-subtle"?: any;
1110
1226
  "background-neutrals-page"?: any;
1111
1227
  "background-neutrals-page-subtle"?: any;
1112
- "background-neutrals-scrolls"?: any;
1113
- "background-neutrals-scrolls-expanded"?: any;
1114
- "background-neutrals-scrolls-hover"?: any;
1115
- "background-neutrals-scrolls-pressed"?: any;
1116
- "background-neutrals-scrolls-pressed-hover"?: any;
1228
+ "background-neutrals-scrollbar"?: any;
1229
+ "background-neutrals-scrollbar-active"?: any;
1230
+ "background-neutrals-scrollbar-hover"?: any;
1117
1231
  "background-neutrals-subtle"?: any;
1118
1232
  "background-neutrals-subtle-active"?: any;
1119
1233
  "background-neutrals-subtle-hover"?: any;
1120
1234
  "background-primary-prominent"?: any;
1121
1235
  "background-primary-prominent-active"?: any;
1122
- "background-primary-prominent-expanded"?: any;
1123
1236
  "background-primary-prominent-hover"?: any;
1124
- "background-primary-prominent-pressed"?: any;
1125
- "background-primary-prominent-pressed-hover"?: any;
1126
1237
  "background-primary-prominent-selected"?: any;
1127
1238
  "background-primary-subtle"?: any;
1128
1239
  "background-primary-subtle-active"?: any;
1129
- "background-primary-subtle-expanded"?: any;
1130
1240
  "background-primary-subtle-hover"?: any;
1131
- "background-primary-subtle-pressed"?: any;
1132
- "background-primary-subtle-pressed-hover"?: any;
1133
1241
  "background-primary-subtle-selected"?: any;
1134
1242
  "background-success"?: any;
1135
1243
  "background-success-prominent"?: any;
@@ -1140,9 +1248,15 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1140
1248
  "border-danger"?: any;
1141
1249
  "border-danger-active"?: any;
1142
1250
  "border-danger-hover"?: any;
1251
+ "border-focus-error-inner"?: any;
1252
+ "border-focus-error-middle"?: any;
1253
+ "border-focus-error-outer"?: any;
1143
1254
  "border-focus-inner"?: any;
1144
1255
  "border-focus-middle"?: any;
1145
1256
  "border-focus-outer"?: any;
1257
+ "border-focus-success-inner"?: any;
1258
+ "border-focus-success-middle"?: any;
1259
+ "border-focus-success-outer"?: any;
1146
1260
  "border-neutrals"?: any;
1147
1261
  "border-neutrals-active"?: any;
1148
1262
  "border-neutrals-controls"?: any;
@@ -1235,13 +1349,13 @@ declare const StyledSeparator: react.ForwardRefExoticComponent<Omit<Omit<_mirohq
1235
1349
  readonly body: "Open Sans, sans-serif";
1236
1350
  };
1237
1351
  radii: {
1238
- readonly none: 0;
1239
- readonly half: "999em";
1240
1352
  readonly 25: "2px";
1241
1353
  readonly 50: "4px";
1242
1354
  readonly 75: "6px";
1243
1355
  readonly 100: "8px";
1244
1356
  readonly 200: "16px";
1357
+ readonly half: "999px";
1358
+ readonly none: "0px";
1245
1359
  };
1246
1360
  shadows: {
1247
1361
  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";
@@ -1527,63 +1641,103 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1527
1641
  };
1528
1642
  colors: {
1529
1643
  readonly black: any;
1644
+ readonly 'blue-50': any;
1530
1645
  readonly 'blue-100': any;
1646
+ readonly 'blue-150': any;
1531
1647
  readonly 'blue-200': any;
1648
+ readonly 'blue-250': any;
1532
1649
  readonly 'blue-300': any;
1650
+ readonly 'blue-350': any;
1533
1651
  readonly 'blue-400': any;
1652
+ readonly 'blue-450': any;
1534
1653
  readonly 'blue-500': any;
1654
+ readonly 'blue-550': any;
1535
1655
  readonly 'blue-600': any;
1656
+ readonly 'blue-650': any;
1536
1657
  readonly 'blue-700': any;
1658
+ readonly 'blue-750': any;
1537
1659
  readonly 'blue-800': any;
1660
+ readonly 'blue-850': any;
1538
1661
  readonly 'blue-900': any;
1539
- readonly 'blue-1000': any;
1662
+ readonly 'blue-950': any;
1663
+ readonly 'gray-50': any;
1540
1664
  readonly 'gray-100': any;
1665
+ readonly 'gray-150': any;
1541
1666
  readonly 'gray-200': any;
1667
+ readonly 'gray-250': any;
1542
1668
  readonly 'gray-300': any;
1669
+ readonly 'gray-350': any;
1543
1670
  readonly 'gray-400': any;
1671
+ readonly 'gray-450': any;
1544
1672
  readonly 'gray-500': any;
1673
+ readonly 'gray-550': any;
1545
1674
  readonly 'gray-600': any;
1675
+ readonly 'gray-650': any;
1546
1676
  readonly 'gray-700': any;
1677
+ readonly 'gray-750': any;
1547
1678
  readonly 'gray-800': any;
1679
+ readonly 'gray-850': any;
1548
1680
  readonly 'gray-900': any;
1681
+ readonly 'gray-950': any;
1682
+ readonly 'green-50': any;
1549
1683
  readonly 'green-100': any;
1684
+ readonly 'green-150': any;
1550
1685
  readonly 'green-200': any;
1686
+ readonly 'green-250': any;
1551
1687
  readonly 'green-300': any;
1688
+ readonly 'green-350': any;
1552
1689
  readonly 'green-400': any;
1690
+ readonly 'green-450': any;
1553
1691
  readonly 'green-500': any;
1692
+ readonly 'green-550': any;
1554
1693
  readonly 'green-600': any;
1694
+ readonly 'green-650': any;
1555
1695
  readonly 'green-700': any;
1696
+ readonly 'green-750': any;
1556
1697
  readonly 'green-800': any;
1698
+ readonly 'green-850': any;
1557
1699
  readonly 'green-900': any;
1558
- readonly 'indigo-100': any;
1559
- readonly 'indigo-200': any;
1560
- readonly 'indigo-300': any;
1561
- readonly 'indigo-400': any;
1562
- readonly 'indigo-500': any;
1563
- readonly 'indigo-600': any;
1564
- readonly 'indigo-700': any;
1565
- readonly 'indigo-800': any;
1566
- readonly 'indigo-900': any;
1700
+ readonly 'green-950': any;
1701
+ readonly 'red-50': any;
1567
1702
  readonly 'red-100': any;
1703
+ readonly 'red-150': any;
1568
1704
  readonly 'red-200': any;
1705
+ readonly 'red-250': any;
1569
1706
  readonly 'red-300': any;
1707
+ readonly 'red-350': any;
1570
1708
  readonly 'red-400': any;
1709
+ readonly 'red-450': any;
1571
1710
  readonly 'red-500': any;
1711
+ readonly 'red-550': any;
1572
1712
  readonly 'red-600': any;
1713
+ readonly 'red-650': any;
1573
1714
  readonly 'red-700': any;
1715
+ readonly 'red-750': any;
1574
1716
  readonly 'red-800': any;
1717
+ readonly 'red-850': any;
1575
1718
  readonly 'red-900': any;
1719
+ readonly 'red-950': any;
1576
1720
  readonly transparent: any;
1577
1721
  readonly white: any;
1722
+ readonly 'yellow-50': any;
1578
1723
  readonly 'yellow-100': any;
1724
+ readonly 'yellow-150': any;
1579
1725
  readonly 'yellow-200': any;
1726
+ readonly 'yellow-250': any;
1580
1727
  readonly 'yellow-300': any;
1728
+ readonly 'yellow-350': any;
1581
1729
  readonly 'yellow-400': any;
1730
+ readonly 'yellow-450': any;
1582
1731
  readonly 'yellow-500': any;
1732
+ readonly 'yellow-550': any;
1583
1733
  readonly 'yellow-600': any;
1734
+ readonly 'yellow-650': any;
1584
1735
  readonly 'yellow-700': any;
1736
+ readonly 'yellow-750': any;
1585
1737
  readonly 'yellow-800': any;
1738
+ readonly 'yellow-850': any;
1586
1739
  readonly 'yellow-900': any;
1740
+ readonly 'yellow-950': any;
1587
1741
  "background-alpha-active"?: any;
1588
1742
  "background-alpha-hover"?: any;
1589
1743
  "background-danger-prominent"?: any;
@@ -1604,27 +1758,19 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1604
1758
  "background-neutrals-inverted-subtle"?: any;
1605
1759
  "background-neutrals-page"?: any;
1606
1760
  "background-neutrals-page-subtle"?: any;
1607
- "background-neutrals-scrolls"?: any;
1608
- "background-neutrals-scrolls-expanded"?: any;
1609
- "background-neutrals-scrolls-hover"?: any;
1610
- "background-neutrals-scrolls-pressed"?: any;
1611
- "background-neutrals-scrolls-pressed-hover"?: any;
1761
+ "background-neutrals-scrollbar"?: any;
1762
+ "background-neutrals-scrollbar-active"?: any;
1763
+ "background-neutrals-scrollbar-hover"?: any;
1612
1764
  "background-neutrals-subtle"?: any;
1613
1765
  "background-neutrals-subtle-active"?: any;
1614
1766
  "background-neutrals-subtle-hover"?: any;
1615
1767
  "background-primary-prominent"?: any;
1616
1768
  "background-primary-prominent-active"?: any;
1617
- "background-primary-prominent-expanded"?: any;
1618
1769
  "background-primary-prominent-hover"?: any;
1619
- "background-primary-prominent-pressed"?: any;
1620
- "background-primary-prominent-pressed-hover"?: any;
1621
1770
  "background-primary-prominent-selected"?: any;
1622
1771
  "background-primary-subtle"?: any;
1623
1772
  "background-primary-subtle-active"?: any;
1624
- "background-primary-subtle-expanded"?: any;
1625
1773
  "background-primary-subtle-hover"?: any;
1626
- "background-primary-subtle-pressed"?: any;
1627
- "background-primary-subtle-pressed-hover"?: any;
1628
1774
  "background-primary-subtle-selected"?: any;
1629
1775
  "background-success"?: any;
1630
1776
  "background-success-prominent"?: any;
@@ -1635,9 +1781,15 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1635
1781
  "border-danger"?: any;
1636
1782
  "border-danger-active"?: any;
1637
1783
  "border-danger-hover"?: any;
1784
+ "border-focus-error-inner"?: any;
1785
+ "border-focus-error-middle"?: any;
1786
+ "border-focus-error-outer"?: any;
1638
1787
  "border-focus-inner"?: any;
1639
1788
  "border-focus-middle"?: any;
1640
1789
  "border-focus-outer"?: any;
1790
+ "border-focus-success-inner"?: any;
1791
+ "border-focus-success-middle"?: any;
1792
+ "border-focus-success-outer"?: any;
1641
1793
  "border-neutrals"?: any;
1642
1794
  "border-neutrals-active"?: any;
1643
1795
  "border-neutrals-controls"?: any;
@@ -1730,13 +1882,13 @@ declare const StyledLink: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_desi
1730
1882
  readonly body: "Open Sans, sans-serif";
1731
1883
  };
1732
1884
  radii: {
1733
- readonly none: 0;
1734
- readonly half: "999em";
1735
1885
  readonly 25: "2px";
1736
1886
  readonly 50: "4px";
1737
1887
  readonly 75: "6px";
1738
1888
  readonly 100: "8px";
1739
1889
  readonly 200: "16px";
1890
+ readonly half: "999px";
1891
+ readonly none: "0px";
1740
1892
  };
1741
1893
  shadows: {
1742
1894
  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-toolbar",
3
- "version": "2.5.1",
3
+ "version": "2.5.2-colors.0",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -31,8 +31,8 @@
31
31
  "@react-aria/interactions": "^3.13.0",
32
32
  "@react-aria/utils": "^3.13.0",
33
33
  "@react-types/shared": "^3.16.0",
34
- "@mirohq/design-system-stitches": "^2.6.0",
35
- "@mirohq/design-system-styles": "^1.1.19",
34
+ "@mirohq/design-system-stitches": "^2.6.1-colors.0",
35
+ "@mirohq/design-system-styles": "^1.1.20-colors.0",
36
36
  "@mirohq/design-system-use-press": "^0.3.1",
37
37
  "@mirohq/design-system-utils": "^0.15.0"
38
38
  },