@os-design/core 1.0.255 → 1.0.257

package/dist/@types/emotion.d.js

@@ -0,0 +1 @@
+import '@emotion/react';

package/dist/Alert/index.d.ts

@@ -0,0 +1,14 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface AlertProps extends JsxDivProps, WithSize {
+    /**
+     * Type of styles.
+     */
+    type: 'info' | 'success' | 'error';
+}
+/**
+ * The component for feedback.
+ */
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Alert;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAK9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;CACpC;AA4ED;;GAEG;AACH,QAAA,MAAM,KAAK,uGAcV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/Alert/index.js

@@ -0,0 +1,83 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
+import { sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const infoContainerStyles = p => p.type === 'info' && css`
+    background-color: ${clr(p.theme.alertInfoColorBg)};
+  `;
+const successContainerStyles = p => p.type === 'success' && css`
+    background-color: ${clr(p.theme.alertSuccessColorBg)};
+  `;
+const errorContainerStyles = p => p.type === 'error' && css`
+    background-color: ${clr(p.theme.alertErrorColorBg)};
+  `;
+const Container = styled('div', omitEmotionProps('type', 'size'))`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding: 1em;
+  border-radius: ${p => p.theme.borderRadius}em;
+  color: ${p => clr(p.theme.colorText)};
+
+  ${infoContainerStyles};
+  ${successContainerStyles};
+  ${errorContainerStyles};
+  ${sizeStyles};
+`;
+const infoIconContainerStyles = p => p.type === 'info' && css`
+    color: ${clr(p.theme.alertInfoColorIcon)};
+  `;
+const successIconContainerStyles = p => p.type === 'success' && css`
+    color: ${clr(p.theme.alertSuccessColorIcon)};
+  `;
+const errorIconContainerStyles = p => p.type === 'error' && css`
+    color: ${clr(p.theme.alertErrorColorIcon)};
+  `;
+const IconContainer = styled('i', omitEmotionProps('type'))`
+  display: flex;
+  align-items: center;
+
+  margin-right: 0.3em;
+  font-size: 1.4em;
+
+  ${infoIconContainerStyles};
+  ${successIconContainerStyles};
+  ${errorIconContainerStyles};
+`;
+const typeIconMap = {
+  info: InfoCircle,
+  success: CheckCircle,
+  error: CloseCircle
+};
+
+/**
+ * The component for feedback.
+ */
+const Alert = /*#__PURE__*/forwardRef(({
+  type,
+  size,
+  children,
+  ...rest
+}, ref) => {
+  const Icon = useMemo(() => typeIconMap[type], [type]);
+  return /*#__PURE__*/_jsxs(Container, {
+    size: size,
+    type: type,
+    role: "alert",
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(IconContainer, {
+      type: type,
+      children: /*#__PURE__*/_jsx(Icon, {})
+    }), typeof children === 'string' ? /*#__PURE__*/_jsx("span", {
+      children: children
+    }) : children]
+  });
+});
+Alert.displayName = 'Alert';
+export default Alert;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,36 @@
+import { type WithSize } from '@os-design/styles';
+import { type ImageProps } from '../Image';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface AvatarProps extends JsxDivProps, WithSize {
+    /**
+     * Used to render the first letter if the image URL is not specified.
+     * @default undefined
+     */
+    firstName?: string;
+    /**
+     * Used to render the second letter if the image URL is not specified.
+     * @default undefined
+     */
+    lastName?: string;
+    /**
+     * The URL of the image.
+     * @default undefined
+     */
+    image?: string;
+    /**
+     * The props of the image.
+     * @default undefined
+     */
+    imageProps?: Omit<ImageProps, 'url'>;
+    /**
+     * Whether the user is online.
+     * @default false
+     */
+    online?: boolean;
+}
+/**
+ * Avatar can be used to represent people.
+ */
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Avatar;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAI9D,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAIlD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAwED;;GAEG;AACH,QAAA,MAAM,MAAM,wGAgEX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/Avatar/index.js

@@ -0,0 +1,130 @@
+import styled from '@emotion/styled';
+import { User } from '@os-design/icons';
+import { sizeStyles } from '@os-design/styles';
+import { clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useCallback, useMemo } from 'react';
+import Image from "../Image/index.js";
+import nameToInitials from "./utils/nameToInitials.js";
+import strToHue from "./utils/strToHue.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('size'))`
+  position: relative;
+  width: 1em;
+  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
+  ${sizeStyles};
+`;
+const AvatarContainer = styled('div', omitEmotionProps('bgColor'))`
+  width: 100%;
+  height: 100%;
+  border-radius: ${p => p.theme.borderRadius}em;
+
+  font-weight: 500;
+  line-height: 1;
+
+  color: hsl(0, 0%, 100%);
+  background-color: ${p => clr(p.bgColor)};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  white-space: nowrap; // To disable multiline text
+  overflow: hidden; // To trim the image corners
+
+  ${sizeStyles};
+`;
+const IconContainer = styled.div`
+  font-size: 0.6em;
+  line-height: 0.6;
+`;
+const Initials = styled.div`
+  font-size: 0.35em;
+`;
+const INNER_SIZE = 0.25;
+const OUTER_SIZE = INNER_SIZE * 1.2;
+const Online = styled.span`
+  position: absolute;
+  right: -0.05em;
+  bottom: -0.05em;
+  width: ${OUTER_SIZE}em;
+  height: ${OUTER_SIZE}em;
+  border-radius: 50%;
+  background-color: ${p => clr(p.theme.avatarOnlineColorScoop)};
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;
+    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;
+    width: ${INNER_SIZE}em;
+    height: ${INNER_SIZE}em;
+    border-radius: 50%;
+    background-color: ${p => clr(p.theme.avatarOnlineColorBg)};
+  }
+`;
+
+/**
+ * Avatar can be used to represent people.
+ */
+const Avatar = /*#__PURE__*/forwardRef(({
+  firstName,
+  lastName,
+  image,
+  imageProps = {},
+  online = false,
+  size = '2em',
+  children,
+  ...rest
+}, ref) => {
+  const {
+    theme
+  } = useTheme();
+  const bgColor = useMemo(() => {
+    const parts = [];
+    if (firstName) parts.push(firstName);
+    if (lastName) parts.push(lastName);
+    if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];
+    return theme.avatarDefaultColorBg;
+  }, [firstName, lastName, theme.avatarDefaultColorBg]);
+  const fullName = useMemo(() => [firstName, lastName].filter(i => i).join(' ') || undefined, [firstName, lastName]);
+  const renderChildren = useCallback(() => {
+    // Render the image if the image property was specified
+    if (image) return /*#__PURE__*/_jsx(Image, {
+      url: image,
+      cropped: true,
+      ...imageProps
+    });
+
+    // Render the initials of the name if either firstName or lastName was specified
+    const initials = nameToInitials({
+      firstName,
+      lastName
+    });
+    if (initials) return /*#__PURE__*/_jsx(Initials, {
+      children: initials
+    });
+
+    // Otherwise render the user icon
+    return /*#__PURE__*/_jsx(IconContainer, {
+      children: /*#__PURE__*/_jsx(User, {})
+    });
+  }, [image, imageProps, firstName, lastName]);
+  return /*#__PURE__*/_jsxs(Container, {
+    size: size,
+    children: [/*#__PURE__*/_jsx(AvatarContainer, {
+      bgColor: bgColor,
+      role: "img",
+      "aria-label": fullName || 'User',
+      ...rest,
+      ref: ref,
+      children: children ? /*#__PURE__*/_jsx(IconContainer, {
+        children: children
+      }) : renderChildren()
+    }), online && /*#__PURE__*/_jsx(Online, {})]
+  });
+});
+Avatar.displayName = 'Avatar';
+export default Avatar;

package/dist/Avatar/utils/nameToInitials.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nameToInitials.d.ts","sourceRoot":"","sources":["../../../src/Avatar/utils/nameToInitials.ts"],"names":[],"mappings":"AAAA,UAAU,IAAI;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,4BAA6B,IAAI,KAAG,MAIvD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Avatar/utils/nameToInitials.js

@@ -0,0 +1,9 @@
+const nameToInitials = ({
+  firstName,
+  lastName
+}) => {
+  const first = firstName ? firstName.charAt(0) : '';
+  const second = lastName ? lastName.charAt(0) : '';
+  return `${first}${second}`.toUpperCase();
+};
+export default nameToInitials;

package/dist/Avatar/utils/strToHue.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Return the hue of the color by string.
+ */
+declare const strToHue: (str: string) => number;
+export default strToHue;
+//# sourceMappingURL=strToHue.d.ts.map

package/dist/Avatar/utils/strToHue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strToHue.d.ts","sourceRoot":"","sources":["../../../src/Avatar/utils/strToHue.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,QAAA,MAAM,QAAQ,QAAS,MAAM,KAAG,MAM/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Avatar/utils/strToHue.js

@@ -0,0 +1,11 @@
+/**
+ * Return the hue of the color by string.
+ */
+const strToHue = str => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i += 1) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return hash % 360;
+};
+export default strToHue;

package/dist/AvatarSkeleton/index.d.ts

@@ -0,0 +1,9 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export type AvatarSkeletonProps = JsxDivProps & WithSize;
+/**
+ * Provides an avatar placeholder while a user waits for the content to load.
+ */
+declare const AvatarSkeleton: import("react").ForwardRefExoticComponent<JsxDivProps & WithSize & import("react").RefAttributes<HTMLDivElement>>;
+export default AvatarSkeleton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AvatarSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAMzD;;GAEG;AACH,QAAA,MAAM,cAAc,mHAMnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/AvatarSkeleton/index.js

@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Skeleton from "../Skeleton/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('size'))`
+  ${sizeStyles};
+`;
+
+/**
+ * Provides an avatar placeholder while a user waits for the content to load.
+ */
+const AvatarSkeleton = /*#__PURE__*/forwardRef(({
+  size = '2em',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Container, {
+  size: size,
+  ...rest,
+  ref: ref,
+  children: /*#__PURE__*/_jsx(Skeleton, {
+    width: "1em"
+  })
+}));
+AvatarSkeleton.displayName = 'AvatarSkeleton';
+export default AvatarSkeleton;

package/dist/Badge/index.d.ts

@@ -0,0 +1,31 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface BadgeProps extends JsxDivProps, WithSize {
+    /**
+     * Number shown in the corner.
+     * @default undefined
+     */
+    count?: number;
+    /**
+     * The max number.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Whether the zero is shown.
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Offset of the badge.
+     * top/right | [top, right]
+     * @default undefined
+     */
+    offset?: string | [string, string];
+}
+/**
+ * The number shown in the corner. Used to show the number of notifications.
+ */
+declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Badge;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAK9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IACvD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AA+CD;;GAEG;AACH,QAAA,MAAM,KAAK,uGAuCV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/dist/Badge/index.js

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useMemo } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled.div`
+  position: relative;
+  display: flex;
+`;
+const HEIGHT_EM = 1.5;
+const Sized = styled('div', omitEmotionProps('size'))`
+  ${sizeStyles};
+`;
+const Value = styled('div', omitEmotionProps('top', 'right'))`
+  position: absolute;
+  top: ${p => p.top};
+  right: ${p => p.right};
+  transform: translate(50%, -50%);
+
+  height: ${HEIGHT_EM}em;
+  min-width: ${HEIGHT_EM}em;
+  padding: 0 0.3em;
+  border-radius: ${HEIGHT_EM / 2}em;
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${p => clr(p.theme.badgeColorBg)};
+  color: ${p => clr(p.theme.badgeColorText)};
+  border: 1px solid ${p => clr(p.theme.colorBg)};
+
+  font-size: ${p => p.theme.sizes.small}em;
+  font-weight: 500;
+  line-height: 1;
+`;
+const Plus = styled.div`
+  font-size: ${p => p.theme.sizes.small}em;
+  padding-bottom: 2px;
+`;
+
+/**
+ * The number shown in the corner. Used to show the number of notifications.
+ */
+const Badge = /*#__PURE__*/forwardRef(({
+  count,
+  max = 99,
+  showZero = false,
+  offset = '0',
+  size = '1em',
+  children,
+  ...rest
+}, ref) => {
+  const [top, right] = useMemo(() => Array.isArray(offset) ? offset : [offset, offset], [offset]);
+  return count === undefined || count < 0 || count === 0 && !showZero ? children : /*#__PURE__*/_jsxs(Container, {
+    ...rest,
+    ref: ref,
+    children: [children, /*#__PURE__*/_jsx(Sized, {
+      size: size,
+      children: /*#__PURE__*/_jsx(Value, {
+        top: top,
+        right: right,
+        children: count > max ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [max, /*#__PURE__*/_jsx(Plus, {
+            children: "+"
+          })]
+        }) : count
+      })
+    })]
+  });
+});
+Badge.displayName = 'Badge';
+export default Badge;

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,14 @@
+import { type WithSize } from '@os-design/styles';
+import React from 'react';
+type JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;
+export interface BreadcrumbProps extends JsxOlProps, WithSize {
+    'aria-label'?: string;
+}
+/**
+ * Displays the current location within the hierarchical structure.
+ * Implements the Schema.org markup for breadcrumbs.
+ * See https://schema.org/BreadcrumbList
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLOListElement>>;
+export default Breadcrumb;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Breadcrumb/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAiD,MAAM,OAAO,CAAC;AAGtE,KAAK,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;AAC3D,MAAM,WAAW,eAAgB,SAAQ,UAAU,EAAE,QAAQ;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgBD;;;;GAIG;AACH,QAAA,MAAM,UAAU,0FAyDf,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/Breadcrumb/index.js

@@ -0,0 +1,70 @@
+import styled from '@emotion/styled';
+import { enableScrollingStyles, sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+import BreadcrumbItem from "../BreadcrumbItem/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Container = styled('ol', omitEmotionProps('size'))`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  color: ${p => clr(p.theme.colorText)};
+
+  ${enableScrollingStyles('x', false)};
+  ${sizeStyles};
+`;
+let childIndex = 0;
+
+/**
+ * Displays the current location within the hierarchical structure.
+ * Implements the Schema.org markup for breadcrumbs.
+ * See https://schema.org/BreadcrumbList
+ */
+const Breadcrumb = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel = 'Breadcrumb',
+  children,
+  ...rest
+}, ref) => {
+  const breadcrumbItems = useMemo(() => {
+    const items = [];
+    const childrenArray = React.Children.toArray(children);
+    childrenArray.forEach((child, index) => {
+      if (! /*#__PURE__*/React.isValidElement(child)) return;
+      let element;
+      const breadcrumbItemProps = {
+        key: childIndex,
+        position: index + 1,
+        hasRightArrow: index < childrenArray.length - 1
+      };
+      if (child.type === BreadcrumbItem) {
+        element = /*#__PURE__*/React.cloneElement(child, breadcrumbItemProps);
+      } else if (/*#__PURE__*/React.isValidElement(child.props.children) && child.props.children.type === BreadcrumbItem) {
+        const breadcrumbItem = /*#__PURE__*/React.cloneElement(child.props.children, breadcrumbItemProps);
+        element = /*#__PURE__*/React.cloneElement(child, {
+          ...(child.props || {}),
+          key: childIndex
+        }, breadcrumbItem);
+      }
+      if (!element) return;
+      items.push(element);
+      childIndex += 1;
+    });
+    return items;
+  }, [children]);
+  if (breadcrumbItems.length === 0) return null;
+  return /*#__PURE__*/_jsx("nav", {
+    "aria-label": ariaLabel,
+    children: /*#__PURE__*/_jsx(Container, {
+      itemScope: true,
+      itemType: "https://schema.org/BreadcrumbList",
+      ...rest,
+      ref: ref,
+      children: breadcrumbItems
+    })
+  });
+});
+Breadcrumb.displayName = 'Breadcrumb';
+export default Breadcrumb;

package/dist/BreadcrumbItem/index.d.ts

@@ -0,0 +1,24 @@
+import { type LinkProps } from '../Link';
+export interface BreadcrumbItemProps extends LinkProps {
+    /**
+     * Whether the item is the current page.
+     * @default false
+     */
+    currentPage?: boolean;
+    /**
+     * Whether the right arrow located to the right of the text is visible.
+     * @default false
+     */
+    hasRightArrow?: boolean;
+    /**
+     * The position of the breadcrumb item.
+     * @default undefined
+     */
+    position?: number;
+}
+/**
+ * The item of the breadcrumb.
+ */
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<BreadcrumbItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default BreadcrumbItem;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/BreadcrumbItem/index.tsx"],"names":[],"mappings":"AAKA,OAAa,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAkBD;;GAEG;AACH,QAAA,MAAM,cAAc,mHAkCnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/BreadcrumbItem/index.js

@@ -0,0 +1,59 @@
+import styled from '@emotion/styled';
+import { Right } from '@os-design/icons';
+import { ellipsisStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { forwardRef } from 'react';
+import Link from "../Link/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled.li`
+  list-style: none;
+`;
+const Name = styled.span`
+  max-width: 20em;
+  ${ellipsisStyles};
+`;
+const RightIcon = styled(Right)`
+  color: ${p => clr(p.theme.colorText)};
+  margin: 0 0.6em;
+  font-size: 0.6em;
+  opacity: 0.8;
+`;
+
+/**
+ * The item of the breadcrumb.
+ */
+const BreadcrumbItem = /*#__PURE__*/forwardRef(({
+  currentPage = false,
+  hasRightArrow = false,
+  position,
+  href,
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsxs(Container, {
+  children: [/*#__PURE__*/_jsxs(Link, {
+    itemProp: "itemListElement",
+    itemScope: true,
+    itemType: "https://schema.org/ListItem",
+    href: href,
+    ...(currentPage ? {
+      underline: 'always',
+      'aria-current': 'page'
+    } : {}),
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx("link", {
+      itemProp: "item",
+      href: href
+    }), position && /*#__PURE__*/_jsx("meta", {
+      itemProp: "position",
+      content: position.toString()
+    }), /*#__PURE__*/_jsx(Name, {
+      itemProp: "name",
+      children: children
+    })]
+  }), hasRightArrow && /*#__PURE__*/_jsx(RightIcon, {
+    role: "presentation"
+  })]
+}));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+export default BreadcrumbItem;

package/dist/Button/ButtonContent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { LoadingColors } from './utils/useButtonColors';
+interface ButtonContentProps {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    loading?: boolean;
+    loadingColors: LoadingColors;
+    children?: React.ReactNode;
+}
+declare const ButtonContent: React.FC<ButtonContentProps>;
+export default ButtonContent;
+//# sourceMappingURL=ButtonContent.d.ts.map

package/dist/Button/ButtonContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonContent.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAsDD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}