@os-design/core 1.0.254 → 1.0.256

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,130 @@
+export { default as Alert } from './Alert';
+export { default as Avatar } from './Avatar';
+export { default as AvatarSkeleton } from './AvatarSkeleton';
+export { default as Badge } from './Badge';
+export { default as Breadcrumb } from './Breadcrumb';
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export { default as Button } from './Button';
+export { default as ButtonLink } from './ButtonLink';
+export { default as Checkbox } from './Checkbox';
+export { default as CheckboxSkeleton } from './CheckboxSkeleton';
+export { default as DatePicker } from './DatePicker';
+export { default as Drawer } from './Drawer';
+export { default as Form } from './Form';
+export { default as FormDivider } from './FormDivider';
+export { default as FormItem } from './FormItem';
+export { default as Gallery } from './Gallery';
+export { default as GlobalStyles } from './GlobalStyles';
+export { default as HeaderSkeleton } from './HeaderSkeleton';
+export { default as Image } from './Image';
+export { default as ImageSkeleton } from './ImageSkeleton';
+export { default as Input } from './Input';
+export { default as InputNumber } from './InputNumber';
+export { default as InputPassword } from './InputPassword';
+export { default as InputSearch } from './InputSearch';
+export { default as InputSkeleton } from './InputSkeleton';
+export { default as Layout } from './Layout';
+export { default as Link } from './Link';
+export { default as LinkButton } from './LinkButton';
+export { default as List } from './List';
+export { default as ListItem } from './ListItem';
+export { default as ListItemActions } from './ListItemActions';
+export { default as ListItemLink } from './ListItemLink';
+export { default as ListSkeleton } from './ListSkeleton';
+export { default as ListItemSkeleton } from './ListItemSkeleton';
+export { default as LogoLink } from './LogoLink';
+export { default as message } from './message';
+export { default as Menu } from './Menu';
+export { default as MenuDivider } from './MenuDivider';
+export { default as MenuGroup } from './MenuGroup';
+export { default as MenuItem } from './MenuItem';
+export { default as Modal } from './Modal';
+export { default as Navigation } from './Navigation';
+export { default as NavigationItem } from './NavigationItem';
+export { default as PageContent } from './PageContent';
+export { default as PageHeader } from './PageHeader';
+export { default as PageHeaderInputSearch } from './PageHeaderInputSearch';
+export { default as PageHeaderSkeleton } from './PageHeaderSkeleton';
+export { default as ParagraphSkeleton } from './ParagraphSkeleton';
+export { default as Popover } from './Popover';
+export { default as Progress } from './Progress';
+export { default as RadioGroup } from './RadioGroup';
+export { default as Result } from './Result';
+export { default as ScrollButton } from './ScrollButton';
+export { default as Select } from './Select';
+export { default as Skeleton } from './Skeleton';
+export { default as Switch } from './Switch';
+export { default as SwitchSkeleton } from './SwitchSkeleton';
+export { default as Tag } from './Tag';
+export { default as TagLink } from './TagLink';
+export { default as TagList } from './TagList';
+export { default as TagListSkeleton } from './TagListSkeleton';
+export { default as TagSkeleton } from './TagSkeleton';
+export { default as TextArea } from './TextArea';
+export { default as TextAreaSkeleton } from './TextAreaSkeleton';
+export { default as ThemeSwitcher } from './ThemeSwitcher';
+export { default as Video } from './Video';
+export * from './Alert';
+export * from './Avatar';
+export * from './AvatarSkeleton';
+export * from './Badge';
+export * from './Breadcrumb';
+export * from './BreadcrumbItem';
+export * from './Button';
+export * from './ButtonLink';
+export * from './Checkbox';
+export * from './CheckboxSkeleton';
+export * from './DatePicker';
+export * from './Drawer';
+export * from './Form';
+export * from './FormDivider';
+export * from './FormItem';
+export * from './Gallery';
+export * from './HeaderSkeleton';
+export * from './Image';
+export * from './ImageSkeleton';
+export * from './Input';
+export * from './InputNumber';
+export * from './InputPassword';
+export * from './InputSearch';
+export * from './InputSkeleton';
+export * from './Layout';
+export * from './Link';
+export * from './LinkButton';
+export * from './List';
+export * from './ListItem';
+export * from './ListItemActions';
+export * from './ListItemLink';
+export * from './ListSkeleton';
+export * from './ListItemSkeleton';
+export * from './LogoLink';
+export * from './Menu';
+export * from './MenuDivider';
+export * from './MenuGroup';
+export * from './MenuItem';
+export * from './Modal';
+export * from './Navigation';
+export * from './NavigationItem';
+export * from './PageContent';
+export * from './PageHeader';
+export * from './PageHeaderInputSearch';
+export * from './PageHeaderSkeleton';
+export * from './ParagraphSkeleton';
+export * from './Popover';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Result';
+export * from './ScrollButton';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './SwitchSkeleton';
+export * from './Tag';
+export * from './TagLink';
+export * from './TagList';
+export * from './TagListSkeleton';
+export * from './TagSkeleton';
+export * from './TextArea';
+export * from './TextAreaSkeleton';
+export * from './ThemeSwitcher';
+export * from './Video';

package/dist/message/AlertIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertIcon.d.ts","sourceRoot":"","sources":["../../src/message/AlertIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CACpC;AAeD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqBvC,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/message/AlertIcon.js

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
+import { clr, light } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Container = styled('i', omitEmotionProps('iconColor'))`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  margin-right: 0.3em;
+  font-size: 1.4em;
+  color: ${p => clr(p.iconColor)};
+`;
+const AlertIcon = ({
+  type
+}) => {
+  const {
+    Icon,
+    iconColor
+  } = {
+    info: {
+      Icon: InfoCircle,
+      iconColor: light.alertInfoColorIcon
+    },
+    success: {
+      Icon: CheckCircle,
+      iconColor: light.alertSuccessColorIcon
+    },
+    error: {
+      Icon: CloseCircle,
+      iconColor: light.alertErrorColorIcon
+    }
+  }[type];
+  return /*#__PURE__*/_jsx(Container, {
+    iconColor: iconColor,
+    children: /*#__PURE__*/_jsx(Icon, {})
+  });
+};
+AlertIcon.displayName = 'AlertIcon';
+export default AlertIcon;

package/dist/message/Message.d.ts

@@ -0,0 +1,8 @@
+export interface MessageProps {
+    type: 'info' | 'success' | 'error';
+    text: string;
+}
+export declare const MESSAGE_DURATION_MS = 3000;
+declare const Message: import("react").ForwardRefExoticComponent<MessageProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Message;
+//# sourceMappingURL=Message.d.ts.map

package/dist/message/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../src/message/Message.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;CACd;AAeD,eAAO,MAAM,mBAAmB,OAAO,CAAC;AAwDxC,QAAA,MAAM,OAAO,yGAsBZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/message/Message.js

@@ -0,0 +1,89 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ellipsisStyles } from '@os-design/styles';
+import { clr, light } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import AlertIcon from './AlertIcon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const MESSAGE_HEIGHT_EM = 2.5;
+const MESSAGE_MARGIN_TOP_EM = 0.7;
+export const MESSAGE_DURATION_MS = 3000;
+const fadeOut = keyframes`
+  from {
+    opacity: 1;
+    height: ${MESSAGE_HEIGHT_EM}em;
+    margin-top: ${MESSAGE_MARGIN_TOP_EM}em;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    height: 0;
+    margin-top: 0;
+    transform: translateY(-100%);
+  }
+`;
+const Container = styled('div', omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay'))`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  height: ${MESSAGE_HEIGHT_EM}em;
+  margin-top: ${MESSAGE_MARGIN_TOP_EM}em;
+
+  box-sizing: border-box;
+  padding: 0 1em;
+  max-width: 90%;
+
+  border-radius: 0.25em;
+  box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);
+  background-color: ${p => clr(p.backgroundColor)};
+  color: ${p => clr(p.textColor)};
+
+  pointer-events: auto;
+  overflow: hidden;
+
+  animation:
+    ${fadeIn} ${p => p.transitionDelay}ms,
+    ${fadeOut} ${p => p.transitionDelay}ms
+      ${p => MESSAGE_DURATION_MS - p.transitionDelay}ms;
+  animation-fill-mode: forwards;
+`;
+const Text = styled.span`
+  ${ellipsisStyles};
+`;
+const Message = /*#__PURE__*/forwardRef(({
+  type,
+  text
+}, ref) => {
+  const backgroundColor = {
+    info: light.messageInfoColorBg,
+    success: light.messageSuccessColorBg,
+    error: light.messageErrorColorBg
+  }[type];
+  return /*#__PURE__*/_jsxs(Container, {
+    ref: ref,
+    type: type,
+    textColor: light.colorText,
+    backgroundColor: backgroundColor,
+    transitionDelay: light.transitionDelay,
+    role: "alert",
+    children: [/*#__PURE__*/_jsx(AlertIcon, {
+      type: type
+    }), /*#__PURE__*/_jsx(Text, {
+      children: text
+    })]
+  });
+});
+Message.displayName = 'Message';
+export default Message;

package/dist/message/index.d.ts

@@ -0,0 +1,4 @@
+import type { AlertProps } from '../Alert';
+declare const message: Record<AlertProps['type'], (text: string) => void>;
+export default message;
+//# sourceMappingURL=index.d.ts.map

package/dist/message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/message/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAsD3C,QAAA,MAAM,OAAO,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAI/D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/message/index.js

@@ -0,0 +1,58 @@
+import ReactDOM from 'react-dom/client';
+import Message, { MESSAGE_DURATION_MS } from './Message';
+import { containerStyles, messageContainerStyles, setStylesToHtmlElement } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+let containerElement;
+
+/**
+ * Creates the container for storing messages.
+ */
+const getContainer = () => {
+  if (!containerElement) {
+    containerElement = document.createElement('div');
+    setStylesToHtmlElement(containerElement, containerStyles);
+    document.body.appendChild(containerElement);
+  }
+  return containerElement;
+};
+
+/**
+ * Delete the container if there are no more messages in it.
+ */
+const deleteContainerIfNoChildNodes = () => {
+  if (!containerElement || containerElement.hasChildNodes()) return;
+  document.body.removeChild(containerElement);
+  containerElement = null;
+};
+
+/**
+ * Renders a new message.
+ */
+const send = (type, text) => {
+  // Create a new container for the message
+  const container = getContainer();
+  const messageContainer = document.createElement('div');
+  setStylesToHtmlElement(messageContainer, messageContainerStyles);
+  container.appendChild(messageContainer);
+
+  // Render the message element
+  const messageElement = /*#__PURE__*/_jsx(Message, {
+    type: type,
+    text: text
+  });
+  const root = ReactDOM.createRoot(messageContainer);
+  root.render(messageElement);
+
+  // Delete the message container after N ms
+  setTimeout(() => {
+    root.unmount();
+    container.removeChild(messageContainer);
+    deleteContainerIfNoChildNodes();
+  }, MESSAGE_DURATION_MS);
+};
+const message = {
+  info: text => send('info', text),
+  success: text => send('success', text),
+  error: text => send('error', text)
+};
+export default message;

package/dist/message/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/message/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,mBAAmB,CASxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,mBAAmB,CAG/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,YACxB,WAAW,UACZ,OAAO,CAAC,mBAAmB,CAAC,KACnC,IAIF,CAAC"}

package/dist/message/styles.js

@@ -0,0 +1,19 @@
+export const containerStyles = {
+  position: 'fixed',
+  top: '0',
+  left: '0',
+  right: '0',
+  zIndex: '1001',
+  pointerEvents: 'none',
+  display: 'flex',
+  flexDirection: 'column'
+};
+export const messageContainerStyles = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+export const setStylesToHtmlElement = (element, styles) => {
+  Object.entries(styles).forEach(([key, value]) => {
+    element.style[key] = value;
+  });
+};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.254",
+  "version": "1.0.256",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "src",
@@ -20,9 +20,8 @@
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf dist",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
     "ncu": "ncu -u"
   },
@@ -30,19 +29,19 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/date-picker-utils": "^1.0.23",
-    "@os-design/icons": "^1.0.59",
-    "@os-design/input-number-utils": "^1.0.29",
-    "@os-design/media": "^1.0.25",
-    "@os-design/menu-utils": "^1.0.20",
-    "@os-design/portal": "^1.0.17",
-    "@os-design/styles": "^1.0.56",
-    "@os-design/theming": "^1.0.52",
-    "@os-design/time-picker-utils": "^1.0.14",
-    "@os-design/utils": "^1.0.76",
+    "@os-design/date-picker-utils": "^1.0.24",
+    "@os-design/icons": "^1.0.60",
+    "@os-design/input-number-utils": "^1.0.30",
+    "@os-design/media": "^1.0.26",
+    "@os-design/menu-utils": "^1.0.21",
+    "@os-design/portal": "^1.0.18",
+    "@os-design/styles": "^1.0.57",
+    "@os-design/theming": "^1.0.53",
+    "@os-design/time-picker-utils": "^1.0.15",
+    "@os-design/utils": "^1.0.77",
     "@os-team/password-score": "^1.0.5",
     "facepaint": "^1.2.1",
-    "react-focus-lock": "^2.12.1",
+    "react-focus-lock": "^2.13.2",
     "react-window": "^1.8.10"
   },
   "devDependencies": {
@@ -59,5 +58,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "c46cd6dbc0187d669d54d03e88aabf3b970d0335"
+  "gitHead": "86a83e87297a07afe132782ca2c95023b7139276"
 }

package/src/@types/emotion.d.ts

@@ -2,6 +2,6 @@ import '@emotion/react';
 import { Theme as BaseTheme } from '@os-design/theming';
 
 declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   export interface Theme extends BaseTheme {}
 }

package/src/Alert/index.tsx

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
-import { WithSize, sizeStyles } from '@os-design/styles';
+import { type WithSize, sizeStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface AlertProps extends JsxDivProps, WithSize {

package/src/Avatar/index.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 import { User } from '@os-design/icons';
-import { WithSize, sizeStyles } from '@os-design/styles';
-import { Color, clr, useTheme } from '@os-design/theming';
+import { type WithSize, sizeStyles } from '@os-design/styles';
+import { type Color, clr, useTheme } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useCallback, useMemo } from 'react';
-import Image, { ImageProps } from '../Image';
+import { forwardRef, useCallback, useMemo } from 'react';
+import Image, { type ImageProps } from '../Image';
 import nameToInitials from './utils/nameToInitials';
 import strToHue from './utils/strToHue';
 

package/src/Avatar/utils/strToHue.ts

@@ -4,7 +4,6 @@
 const strToHue = (str: string): number => {
   let hash = 0;
   for (let i = 0; i < str.length; i += 1) {
-    // eslint-disable-next-line no-bitwise
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
   }
   return hash % 360;

package/src/AvatarSkeleton/index.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { sizeStyles, WithSize } from '@os-design/styles';
+import { sizeStyles, type WithSize } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import Skeleton from '../Skeleton';
 
 type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;

package/src/Badge/index.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { WithSize, sizeStyles } from '@os-design/styles';
+import { type WithSize, sizeStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface BadgeProps extends JsxDivProps, WithSize {

package/src/Breadcrumb/index.tsx

@@ -1,8 +1,12 @@
 import styled from '@emotion/styled';
-import { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';
+import {
+  enableScrollingStyles,
+  sizeStyles,
+  type WithSize,
+} from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef, ReactElement, useMemo } from 'react';
+import React, { forwardRef, type ReactElement, useMemo } from 'react';
 import BreadcrumbItem from '../BreadcrumbItem';
 
 type JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;

package/src/BreadcrumbItem/index.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 import { Right } from '@os-design/icons';
 import { ellipsisStyles } from '@os-design/styles';
 import { clr } from '@os-design/theming';
-import React, { forwardRef } from 'react';
-import Link, { LinkProps } from '../Link';
+import { forwardRef } from 'react';
+import Link, { type LinkProps } from '../Link';
 
 export interface BreadcrumbItemProps extends LinkProps {
   /**

package/src/Button/ButtonContent.tsx

@@ -4,7 +4,7 @@ import { Loading } from '@os-design/icons';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React from 'react';
-import { LoadingColors } from './utils/useButtonColors';
+import type { LoadingColors } from './utils/useButtonColors';
 
 interface ButtonContentProps {
   left?: React.ReactNode;

package/src/Button/index.tsx

@@ -5,13 +5,13 @@ import {
   resetButtonStyles,
   sizeStyles,
   transitionStyles,
-  WithSize,
+  type WithSize,
 } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
 import React, { forwardRef } from 'react';
 import ButtonContent from './ButtonContent';
-import useButtonColors, { ButtonColors } from './utils/useButtonColors';
+import useButtonColors, { type ButtonColors } from './utils/useButtonColors';
 
 type JsxButtonProps = Omit<
   JSX.IntrinsicElements['button'],

package/src/Button/utils/useButtonColors.ts

@@ -1,4 +1,4 @@
-import { Color, useTheme } from '@os-design/theming';
+import { type Color, useTheme } from '@os-design/theming';
 import { useMemo } from 'react';
 
 interface Props {

package/src/ButtonLink/index.tsx

@@ -1,11 +1,15 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
-import { ButtonProps, StyledButton } from '../Button';
+import { forwardRef } from 'react';
+import { type ButtonProps, StyledButton } from '../Button';
 import ButtonContent from '../Button/ButtonContent';
 import useButtonColors from '../Button/utils/useButtonColors';
-import { DisabledWrapper, LinkProps, ReactRouterLinkProps } from '../Link';
+import {
+  DisabledWrapper,
+  type LinkProps,
+  type ReactRouterLinkProps,
+} from '../Link';
 
 type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'type' | 'ref'>;
 export type ButtonLinkProps = JsxAProps &

package/src/Checkbox/index.tsx

@@ -5,11 +5,11 @@ import {
   resetFocusStyles,
   sizeStyles,
   transitionStyles,
-  WithSize,
+  type WithSize,
 } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps, useForwardedState } from '@os-design/utils';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 
 type JsxLabelProps = Omit<
   JSX.IntrinsicElements['label'],

package/src/CheckboxSkeleton/index.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { sizeStyles, WithSize } from '@os-design/styles';
+import { sizeStyles, type WithSize } from '@os-design/styles';
 import { clr } from '@os-design/theming';
 import { omitEmotionProps } from '@os-design/utils';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import Skeleton from '../Skeleton';
 
 type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;