@apify/ui-library 1.168.3 → 1.170.0

package/dist/components/index.d.ts

@@ -30,6 +30,7 @@ export * from './tabs';
 export * from './shortcut';
 export * from './icon_button';
 export * from './brand_icon';
+export * from './skeleton';
 export * from './spinner';
 export * from './store';
 export * from './checkbox';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+export { Skeleton, type SkeletonProps } from './skeleton';
+export { SkeletonFadeIn, type SkeletonFadeInProps } from './skeleton_fade_in';
+export { SkeletonGroup, type SkeletonGroupProps } from './skeleton_group';
+export { skeletonClassNames } from './skeleton.styled';
+export { skeletonTestIds } from './skeleton.test_ids';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { MarginSpacingProps } from '../box';
+export interface SkeletonProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'>, MarginSpacingProps {
+    /**
+     * Any CSS length. Defaults to the full width of the container.
+     */
+    width?: string;
+    /**
+     * Any CSS length. Defaults to `1em`, the font size of the surrounding text.
+     */
+    height?: string;
+}
+/**
+ * Placeholder block shown only while data is loading. Compose blocks to mirror the layout of the content,
+ * inside a `SkeletonGroup`.
+ */
+export declare const Skeleton: ({ width, height, className, ...rest }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAKjD,MAAM,WAAW,aACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,EAAE,kBAAkB;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,uCAAwD,aAAa,4CAS7F,CAAC"}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,19 @@
+import { StyledSkeleton, skeletonClassNames } from "./skeleton.styled.js";
+import { skeletonTestIds } from "./skeleton.test_ids.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/skeleton/skeleton.tsx
+/**
+* Placeholder block shown only while data is loading. Compose blocks to mirror the layout of the content,
+* inside a `SkeletonGroup`.
+*/
+var Skeleton = ({ width = "100%", height = "1em", className, ...rest }) => /* @__PURE__ */ jsx(StyledSkeleton, {
+	"aria-hidden": true,
+	"data-test": skeletonTestIds.ROOT,
+	className: clsx$1(skeletonClassNames.ROOT, className),
+	$width: width,
+	$height: height,
+	...rest
+});
+//#endregion
+export { Skeleton };

package/dist/components/skeleton/skeleton.styled.d.ts

@@ -0,0 +1,13 @@
+export declare const skeletonClassNames: {
+    ROOT: string;
+    GROUP: string;
+    FADE_IN: string;
+};
+type StyledSkeletonProps = {
+    $width: string;
+    $height: string;
+};
+export declare const StyledSkeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(import('..').BoxProps & import('react').RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, StyledSkeletonProps>> & string & Omit<import('react').ForwardRefExoticComponent<import('..').BoxProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const StyledSkeletonFadeIn: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(import('..').BoxProps & import('react').RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, import('styled-components/dist/types').BaseObject>> & string & Omit<import('react').ForwardRefExoticComponent<import('..').BoxProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=skeleton.styled.d.ts.map

package/dist/components/skeleton/skeleton.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styled.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.styled.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC;AAiBF,KAAK,mBAAmB,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,obA0B1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kdAMhC,CAAC"}

package/dist/components/skeleton/skeleton.styled.js

@@ -0,0 +1,55 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import styled, { keyframes } from "styled-components";
+//#region src/components/skeleton/skeleton.styled.ts
+var skeletonClassNames = {
+	ROOT: "Skeleton",
+	GROUP: "Skeleton-Group",
+	FADE_IN: "Skeleton-FadeIn"
+};
+var WAVE_DURATION = "1600ms";
+var FADE_IN_DURATION = "80ms";
+var wave = keyframes`
+    from { transform: translateX(-100%); }
+    to { transform: translateX(100%); }
+`;
+var fadeIn = keyframes`
+    from { opacity: 0; }
+    to { opacity: 1; }
+`;
+var StyledSkeleton = styled(Box)`
+    position: relative;
+    overflow: hidden;
+    flex: 0 1 auto;
+    min-width: 0;
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${theme.radius.radius4};
+    /* Base and highlight are both on-surface: the highlight is a second translucent layer over the
+       base, so one token gives a visible sweep on every surface, in light and dark alike. */
+    background-color: ${theme.color.neutral.onSurface};
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, ${theme.color.neutral.onSurface}, transparent);
+        transform: translateX(-100%);
+        animation: ${wave} ${WAVE_DURATION} ease-in-out infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::after {
+            content: none;
+        }
+    }
+`;
+var StyledSkeletonFadeIn = styled(Box)`
+    animation: ${fadeIn} ${FADE_IN_DURATION} ease-out both;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+`;
+//#endregion
+export { StyledSkeleton, StyledSkeletonFadeIn, skeletonClassNames };

package/dist/components/skeleton/skeleton.test_ids.d.ts

@@ -0,0 +1,6 @@
+export declare const skeletonTestIds: {
+    ROOT: string;
+    GROUP: string;
+    FADE_IN: string;
+};
+//# sourceMappingURL=skeleton.test_ids.d.ts.map

package/dist/components/skeleton/skeleton.test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.test_ids.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;CAI3B,CAAC"}

package/dist/components/skeleton/skeleton.test_ids.js

@@ -0,0 +1,8 @@
+//#region src/components/skeleton/skeleton.test_ids.ts
+var skeletonTestIds = {
+	ROOT: "skeleton",
+	GROUP: "skeleton-group",
+	FADE_IN: "skeleton-fade-in"
+};
+//#endregion
+export { skeletonTestIds };

package/dist/components/skeleton/skeleton.type-test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skeleton.type-test.d.ts.map

package/dist/components/skeleton/skeleton.type-test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.type-test.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.type-test.ts"],"names":[],"mappings":""}

package/dist/components/skeleton/skeleton_fade_in.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { MarginSpacingProps, PaddingSpacingProps } from '../box';
+export interface SkeletonFadeInProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>, MarginSpacingProps, PaddingSpacingProps {
+}
+/**
+ * Wraps the content that replaces a skeleton, so it fades in once instead of popping in.
+ */
+export declare const SkeletonFadeIn: ({ className, ...rest }: SkeletonFadeInProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton_fade_in.d.ts.map

package/dist/components/skeleton/skeleton_fade_in.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton_fade_in.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton_fade_in.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKtE,MAAM,WAAW,mBACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,kBAAkB,EAAE,mBAAmB;CAAG;AAExG;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,wBAAwB,mBAAmB,4CAMzE,CAAC"}

package/dist/components/skeleton/skeleton_fade_in.js

@@ -0,0 +1,15 @@
+import { StyledSkeletonFadeIn, skeletonClassNames } from "./skeleton.styled.js";
+import { skeletonTestIds } from "./skeleton.test_ids.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/skeleton/skeleton_fade_in.tsx
+/**
+* Wraps the content that replaces a skeleton, so it fades in once instead of popping in.
+*/
+var SkeletonFadeIn = ({ className, ...rest }) => /* @__PURE__ */ jsx(StyledSkeletonFadeIn, {
+	"data-test": skeletonTestIds.FADE_IN,
+	className: clsx$1(skeletonClassNames.FADE_IN, className),
+	...rest
+});
+//#endregion
+export { SkeletonFadeIn };

package/dist/components/skeleton/skeleton_group.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { MarginSpacingProps, PaddingSpacingProps } from '../box';
+export interface SkeletonGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onClick' | 'role' | 'aria-busy' | 'aria-label'>, MarginSpacingProps, PaddingSpacingProps {
+    /**
+     * What is loading, used as the accessible name of the region, e.g. "Loading Actors".
+     */
+    label: string;
+}
+/**
+ * Wraps the skeleton blocks of one loading region, names it and marks it busy for assistive technology.
+ */
+export declare const SkeletonGroup: ({ label, className, ...rest }: SkeletonGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton_group.d.ts.map

package/dist/components/skeleton/skeleton_group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton_group.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton_group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAKhF,MAAM,WAAW,kBACb,SACI,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,CAAC,EACtF,kBAAkB,EAClB,mBAAmB;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,+BAA+B,kBAAkB,4CAS9E,CAAC"}

package/dist/components/skeleton/skeleton_group.js

@@ -0,0 +1,19 @@
+import { Box } from "../box/box.js";
+import { skeletonClassNames } from "./skeleton.styled.js";
+import { skeletonTestIds } from "./skeleton.test_ids.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/skeleton/skeleton_group.tsx
+/**
+* Wraps the skeleton blocks of one loading region, names it and marks it busy for assistive technology.
+*/
+var SkeletonGroup = ({ label, className, ...rest }) => /* @__PURE__ */ jsx(Box, {
+	role: "status",
+	"aria-busy": true,
+	"aria-label": label,
+	"data-test": skeletonTestIds.GROUP,
+	className: clsx$1(skeletonClassNames.GROUP, className),
+	...rest
+});
+//#endregion
+export { SkeletonGroup };

package/dist/design_system/colors/generated/colors_theme.dark.d.ts

@@ -2,6 +2,19 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const darkTheme: {
+    readonly thirdPartyAnthropic: "#d97757";
+    readonly thirdPartyChatGpt: "#ffffff";
+    readonly thirdPartyClaude: "#d97757";
+    readonly thirdPartyCursor: "#ffffff";
+    readonly thirdPartyDiscord: "#5865f2";
+    readonly thirdPartyGithub: "#ffffff";
+    readonly thirdPartyLinkedin: "#0a66c2";
+    readonly thirdPartyMake: "#6d00cc";
+    readonly thirdPartyN8n: "#ea4b71";
+    readonly thirdPartyPerplexity: "#20808d";
+    readonly thirdPartyTwitter: "#ffffff";
+    readonly thirdPartyYoutube: "#ff0000";
+    readonly thirdPartyZapier: "#ff4a00";
     readonly magentaDeep: "#694d6b";
     readonly magentaMain: "#9d829f";
     readonly magentaTint: "#fef3ff";

package/dist/design_system/colors/generated/colors_theme.dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors_theme.dark.d.ts","sourceRoot":"","sources":["../../../../src/design_system/colors/generated/colors_theme.dark.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIZ,CAAC"}
+{"version":3,"file":"colors_theme.dark.d.ts","sourceRoot":"","sources":["../../../../src/design_system/colors/generated/colors_theme.dark.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+IZ,CAAC"}

package/dist/design_system/colors/generated/colors_theme.dark.js

@@ -3,6 +3,19 @@
 * Do not edit directly, this file was auto-generated.
 */
 var darkTheme = {
+	thirdPartyAnthropic: "#d97757",
+	thirdPartyChatGpt: "#ffffff",
+	thirdPartyClaude: "#d97757",
+	thirdPartyCursor: "#ffffff",
+	thirdPartyDiscord: "#5865f2",
+	thirdPartyGithub: "#ffffff",
+	thirdPartyLinkedin: "#0a66c2",
+	thirdPartyMake: "#6d00cc",
+	thirdPartyN8n: "#ea4b71",
+	thirdPartyPerplexity: "#20808d",
+	thirdPartyTwitter: "#ffffff",
+	thirdPartyYoutube: "#ff0000",
+	thirdPartyZapier: "#ff4a00",
 	magentaDeep: "#694d6b",
 	magentaMain: "#9d829f",
 	magentaTint: "#fef3ff",

package/dist/design_system/colors/generated/colors_theme.light.d.ts

@@ -2,6 +2,19 @@
  * Do not edit directly, this file was auto-generated.
  */
 export declare const lightTheme: {
+    readonly thirdPartyAnthropic: "#d97757";
+    readonly thirdPartyChatGpt: "#000000";
+    readonly thirdPartyClaude: "#d97757";
+    readonly thirdPartyCursor: "#000000";
+    readonly thirdPartyDiscord: "#5865f2";
+    readonly thirdPartyGithub: "#181717";
+    readonly thirdPartyLinkedin: "#0a66c2";
+    readonly thirdPartyMake: "#6d00cc";
+    readonly thirdPartyN8n: "#ea4b71";
+    readonly thirdPartyPerplexity: "#20808d";
+    readonly thirdPartyTwitter: "#000000";
+    readonly thirdPartyYoutube: "#ff0000";
+    readonly thirdPartyZapier: "#ff4a00";
     readonly magentaDeep: "#694d6b";
     readonly magentaMain: "#9d829f";
     readonly magentaTint: "#fef3ff";

package/dist/design_system/colors/generated/colors_theme.light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors_theme.light.d.ts","sourceRoot":"","sources":["../../../../src/design_system/colors/generated/colors_theme.light.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIb,CAAC"}
+{"version":3,"file":"colors_theme.light.d.ts","sourceRoot":"","sources":["../../../../src/design_system/colors/generated/colors_theme.light.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Ib,CAAC"}

package/dist/design_system/colors/generated/colors_theme.light.js

@@ -3,6 +3,19 @@
 * Do not edit directly, this file was auto-generated.
 */
 var lightTheme = {
+	thirdPartyAnthropic: "#d97757",
+	thirdPartyChatGpt: "#000000",
+	thirdPartyClaude: "#d97757",
+	thirdPartyCursor: "#000000",
+	thirdPartyDiscord: "#5865f2",
+	thirdPartyGithub: "#181717",
+	thirdPartyLinkedin: "#0a66c2",
+	thirdPartyMake: "#6d00cc",
+	thirdPartyN8n: "#ea4b71",
+	thirdPartyPerplexity: "#20808d",
+	thirdPartyTwitter: "#000000",
+	thirdPartyYoutube: "#ff0000",
+	thirdPartyZapier: "#ff4a00",
 	magentaDeep: "#694d6b",
 	magentaMain: "#9d829f",
 	magentaTint: "#fef3ff",

package/dist/design_system/theme.d.ts

@@ -198,6 +198,19 @@ export declare const theme: {
     };
     colorPalette: {
         light: {
+            readonly thirdPartyAnthropic: "#d97757";
+            readonly thirdPartyChatGpt: "#000000";
+            readonly thirdPartyClaude: "#d97757";
+            readonly thirdPartyCursor: "#000000";
+            readonly thirdPartyDiscord: "#5865f2";
+            readonly thirdPartyGithub: "#181717";
+            readonly thirdPartyLinkedin: "#0a66c2";
+            readonly thirdPartyMake: "#6d00cc";
+            readonly thirdPartyN8n: "#ea4b71";
+            readonly thirdPartyPerplexity: "#20808d";
+            readonly thirdPartyTwitter: "#000000";
+            readonly thirdPartyYoutube: "#ff0000";
+            readonly thirdPartyZapier: "#ff4a00";
             readonly magentaDeep: "#694d6b";
             readonly magentaMain: "#9d829f";
             readonly magentaTint: "#fef3ff";
@@ -329,6 +342,19 @@ export declare const theme: {
             readonly bambooText: "#007455";
         };
         dark: {
+            readonly thirdPartyAnthropic: "#d97757";
+            readonly thirdPartyChatGpt: "#ffffff";
+            readonly thirdPartyClaude: "#d97757";
+            readonly thirdPartyCursor: "#ffffff";
+            readonly thirdPartyDiscord: "#5865f2";
+            readonly thirdPartyGithub: "#ffffff";
+            readonly thirdPartyLinkedin: "#0a66c2";
+            readonly thirdPartyMake: "#6d00cc";
+            readonly thirdPartyN8n: "#ea4b71";
+            readonly thirdPartyPerplexity: "#20808d";
+            readonly thirdPartyTwitter: "#ffffff";
+            readonly thirdPartyYoutube: "#ff0000";
+            readonly thirdPartyZapier: "#ff4a00";
             readonly magentaDeep: "#694d6b";
             readonly magentaMain: "#9d829f";
             readonly magentaTint: "#fef3ff";

package/dist/design_system/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/design_system/theme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMd,4FAA4F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAM/F,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/design_system/theme.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMd,4FAA4F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAM/F,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/dist/files_hash_at_build.txt

@@ -1 +1 @@
-7835890d711d7d59c8f24587dfdd978a7e98a49a
+3a46c7cd8aeb8bd81072666dd24ed3f0edfa1e19

package/dist/index.js

@@ -83,6 +83,11 @@ import { TAB_CLASSNAMES, Tab } from "./components/tabs/tab.js";
 import { Tabs } from "./components/tabs/tabs.js";
 import { ICON_BUTTON_VARIANTS, IconButton } from "./components/icon_button/icon_button.js";
 import { AnthropicBrandIcon, ChatGptBrandIcon, ClaudeBrandIcon, CursorBrandIcon, DiscordBrandIcon, DiscordSolidBrandIcon, GithubBrandIcon, LinkedinBrandIcon, LinkedinSolidBrandIcon, MakeBrandIcon, N8nBrandIcon, PerplexityBrandIcon, TwitterBrandIcon, YoutubeBrandIcon, ZapierBrandIcon } from "./components/brand_icon/brand_icon.js";
+import { skeletonClassNames } from "./components/skeleton/skeleton.styled.js";
+import { skeletonTestIds } from "./components/skeleton/skeleton.test_ids.js";
+import { Skeleton } from "./components/skeleton/skeleton.js";
+import { SkeletonFadeIn } from "./components/skeleton/skeleton_fade_in.js";
+import { SkeletonGroup } from "./components/skeleton/skeleton_group.js";
 import { StoreActorHeader } from "./components/store/store_actor_header.js";
 import { RadioButtonPrimitive } from "./components/radio_button/radio_button.js";
 import { BrowserWindow, classNames } from "./components/browser_window/browser_window.js";
@@ -105,4 +110,4 @@ import { TableEmptyRow } from "./components/table/table_empty_row.js";
 import { TableLoadingRow } from "./components/table/table_loading_row.js";
 import { TableErrorRow } from "./components/table/table_error_row.js";
 import { Breadcrumbs, breadcrumbClassNames } from "./components/breadcrumb/breadcrumb.js";
-export { APIFY_HOSTNAMES, ActionBox, ActionLink, ActorAvatar, ActorAvatarInner, ActorTemplateCard, AnthropicBrandIcon, BADGE_SIZES, BADGE_VARIANTS, BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, BackLink, Badge, Banner, BlockSpinner, BlogArticle, BorderedActorAvatar, Box, Breadcrumbs, BrowserWindow, Button, CHIP_SIZES, CHIP_TYPES, CODE_BLOCK_TAB_CATALOG, CODE_BLOCK_WITH_TABS_CLASSNAMES, Card, CardContainer, ChatGptBrandIcon, CheckboxPrimitive, Chip, ClaudeBrandIcon, CodeBlock, CodeBlockWithTabs, CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix, CollapsibleCard, ColorWheelGradient, CursorBrandIcon, DEVELOPER_BADGE, DROPDOWN_ELEMENT_CLASSES, DangerChip, DangerMessage, DeveloperBadge, DiscordBrandIcon, DiscordSolidBrandIcon, Dropdown, DropdownButton, DropdownMenuBaseComponent, DropdownMenuBaseComponentWithCount, DropdownShell, FLOATING_PLACEMENT, GithubBrandIcon, HeadingShared as Heading, HeadingContent, HeadingMarketing, HorizontalTile, HorizontallyScrollableTableWrapper, ICON_BUTTON_VARIANTS, IconButton, Image, IndeterminateCheckbox, InfoMessage, InlineCode, InlineSpinner, Link, LinkedinBrandIcon, LinkedinSolidBrandIcon, ListMenuComponent, ListMenuItemComponent, MakeBrandIcon, MemoizedMarkdown as Markdown, MarkdownBlockQuote, MarkdownCode, MarkdownHeadingWrapper, MarkdownLink, MarkdownParagraphContent, MarkdownPlainHeading, MarkdownTable, Menu, Message, N8nBrandIcon, NeutralChip, OneLineCode, PaginationButtons, PerplexityBrandIcon, PlainMenuBaseComponent, PrimaryChip, PrismSyntaxHighlighter, RadioButtonPrimitive, Rating, RatingStats, SHARED_TEXT_TYPES, SelectMultiValueRemove, SelectPrimitive, Shortcut, SimpleMarkdown, SingleStarRating, Spinner, SplitButton, StoreActorHeader, StyledAsLink, StyledCardWrapper, SuccessChip, SuccessMessage, SwitchPrimitive, TAB_CLASSNAMES, TAG_SIZES, TAG_VARIANTS, TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS, Tab, TabNumberChip, Table, TableBody, TableCell, TableCellLink, TableEmptyRow, TableErrorRow, TableExpansionRow, TableFoot, TableHead, TableHeadCell, TableHeadRow, TableLoadingRow, TableOfContents, TableRow, Tabs, Tag, TextShared as Text, TextShared, TextBaseComponent, TextContent, TextMarketing, Tooltip, TwitterBrandIcon, UiDependencyProvider, UserAvatar, VerticalTile, WarningChip, WarningMessage, YoutubeBrandIcon, ZapierBrandIcon, actorAvatarClassnames, breadcrumbClassNames, classNames as browserWindowClassNames, cardClassNames, cardContainerClassNames, clampLines, classNames$1 as classNames, cleanMarkdown, collapsibleCardClassNames, colorProperties, cssColorsVariablesBrandDark, tokens as cssColorsVariablesDark, tokens$1 as cssColorsVariablesLight, tokens$2 as cssColorsVariablesPaletteDark, tokens$3 as cssColorsVariablesPaletteLight, darkTheme, defaultAllowedElements, defaultRehypePlugins, defaultRemarkPlugins, developerBadgeTestIds, devices, getActorAvatarBorderRadius, getButtonColorStyles, getButtonDisabledStyles, getButtonSizeStyles, getResponsiveStyles, getResponsiveValueAtBreakpoint, gradients, hasUrlHttpProtocol, inlineCodeStyles, isResponsiveObject, isUrlEmail, isUrlExternal, layouts, lightTheme, menuClassNames, messageClassNames, omitDomainAndProtocol, oneLineCodeClassNames, pythonizeValue, radiuses, regularMarkdownSizeComponents, sanitizeUrl, selectDefaultGetIsSelected, shadows, slugifyHeadingChildren, smallMarkdownSizeComponents, spaces, spinnerClassNames, splitButtonClassNames, splitButtonMainActionTestId, splitButtonTriggerTestId, tableClassNames, tableTestIds, theme, transitions, useActorTitleHeadingFilter, useCopyToClipboard, useDefaultUrlTransform, useFloatingMenu, useImageColor, useResizeObserverSsr, useSharedUiDependencies, useShowTableOfContents, userAvatarBaseClassNames, withColor, withGradient, withReactSelectTheme, withSize, withTooltip };
+export { APIFY_HOSTNAMES, ActionBox, ActionLink, ActorAvatar, ActorAvatarInner, ActorTemplateCard, AnthropicBrandIcon, BADGE_SIZES, BADGE_VARIANTS, BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, BackLink, Badge, Banner, BlockSpinner, BlogArticle, BorderedActorAvatar, Box, Breadcrumbs, BrowserWindow, Button, CHIP_SIZES, CHIP_TYPES, CODE_BLOCK_TAB_CATALOG, CODE_BLOCK_WITH_TABS_CLASSNAMES, Card, CardContainer, ChatGptBrandIcon, CheckboxPrimitive, Chip, ClaudeBrandIcon, CodeBlock, CodeBlockWithTabs, CodeHighlighterLineBashPrefix, CodeHighlighterLinePrefix, CollapsibleCard, ColorWheelGradient, CursorBrandIcon, DEVELOPER_BADGE, DROPDOWN_ELEMENT_CLASSES, DangerChip, DangerMessage, DeveloperBadge, DiscordBrandIcon, DiscordSolidBrandIcon, Dropdown, DropdownButton, DropdownMenuBaseComponent, DropdownMenuBaseComponentWithCount, DropdownShell, FLOATING_PLACEMENT, GithubBrandIcon, HeadingShared as Heading, HeadingContent, HeadingMarketing, HorizontalTile, HorizontallyScrollableTableWrapper, ICON_BUTTON_VARIANTS, IconButton, Image, IndeterminateCheckbox, InfoMessage, InlineCode, InlineSpinner, Link, LinkedinBrandIcon, LinkedinSolidBrandIcon, ListMenuComponent, ListMenuItemComponent, MakeBrandIcon, MemoizedMarkdown as Markdown, MarkdownBlockQuote, MarkdownCode, MarkdownHeadingWrapper, MarkdownLink, MarkdownParagraphContent, MarkdownPlainHeading, MarkdownTable, Menu, Message, N8nBrandIcon, NeutralChip, OneLineCode, PaginationButtons, PerplexityBrandIcon, PlainMenuBaseComponent, PrimaryChip, PrismSyntaxHighlighter, RadioButtonPrimitive, Rating, RatingStats, SHARED_TEXT_TYPES, SelectMultiValueRemove, SelectPrimitive, Shortcut, SimpleMarkdown, SingleStarRating, Skeleton, SkeletonFadeIn, SkeletonGroup, Spinner, SplitButton, StoreActorHeader, StyledAsLink, StyledCardWrapper, SuccessChip, SuccessMessage, SwitchPrimitive, TAB_CLASSNAMES, TAG_SIZES, TAG_VARIANTS, TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS, Tab, TabNumberChip, Table, TableBody, TableCell, TableCellLink, TableEmptyRow, TableErrorRow, TableExpansionRow, TableFoot, TableHead, TableHeadCell, TableHeadRow, TableLoadingRow, TableOfContents, TableRow, Tabs, Tag, TextShared as Text, TextShared, TextBaseComponent, TextContent, TextMarketing, Tooltip, TwitterBrandIcon, UiDependencyProvider, UserAvatar, VerticalTile, WarningChip, WarningMessage, YoutubeBrandIcon, ZapierBrandIcon, actorAvatarClassnames, breadcrumbClassNames, classNames as browserWindowClassNames, cardClassNames, cardContainerClassNames, clampLines, classNames$1 as classNames, cleanMarkdown, collapsibleCardClassNames, colorProperties, cssColorsVariablesBrandDark, tokens as cssColorsVariablesDark, tokens$1 as cssColorsVariablesLight, tokens$2 as cssColorsVariablesPaletteDark, tokens$3 as cssColorsVariablesPaletteLight, darkTheme, defaultAllowedElements, defaultRehypePlugins, defaultRemarkPlugins, developerBadgeTestIds, devices, getActorAvatarBorderRadius, getButtonColorStyles, getButtonDisabledStyles, getButtonSizeStyles, getResponsiveStyles, getResponsiveValueAtBreakpoint, gradients, hasUrlHttpProtocol, inlineCodeStyles, isResponsiveObject, isUrlEmail, isUrlExternal, layouts, lightTheme, menuClassNames, messageClassNames, omitDomainAndProtocol, oneLineCodeClassNames, pythonizeValue, radiuses, regularMarkdownSizeComponents, sanitizeUrl, selectDefaultGetIsSelected, shadows, skeletonClassNames, skeletonTestIds, slugifyHeadingChildren, smallMarkdownSizeComponents, spaces, spinnerClassNames, splitButtonClassNames, splitButtonMainActionTestId, splitButtonTriggerTestId, tableClassNames, tableTestIds, theme, transitions, useActorTitleHeadingFilter, useCopyToClipboard, useDefaultUrlTransform, useFloatingMenu, useImageColor, useResizeObserverSsr, useSharedUiDependencies, useShowTableOfContents, userAvatarBaseClassNames, withColor, withGradient, withReactSelectTheme, withSize, withTooltip };

package/dist/src/components/index.d.ts

@@ -30,6 +30,7 @@ export * from './tabs';
 export * from './shortcut';
 export * from './icon_button';
 export * from './brand_icon';
+export * from './skeleton';
 export * from './spinner';
 export * from './store';
 export * from './checkbox';

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/dist/src/components/index.js

@@ -30,6 +30,7 @@ export * from './tabs';
 export * from './shortcut';
 export * from './icon_button';
 export * from './brand_icon';
+export * from './skeleton';
 export * from './spinner';
 export * from './store';
 export * from './checkbox';

package/dist/src/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/dist/src/components/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+export { Skeleton, type SkeletonProps } from './skeleton';
+export { SkeletonFadeIn, type SkeletonFadeInProps } from './skeleton_fade_in';
+export { SkeletonGroup, type SkeletonGroupProps } from './skeleton_group';
+export { skeletonClassNames } from './skeleton.styled';
+export { skeletonTestIds } from './skeleton.test_ids';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/components/skeleton/index.js

@@ -0,0 +1,6 @@
+export { Skeleton } from './skeleton';
+export { SkeletonFadeIn } from './skeleton_fade_in';
+export { SkeletonGroup } from './skeleton_group';
+export { skeletonClassNames } from './skeleton.styled';
+export { skeletonTestIds } from './skeleton.test_ids';
+//# sourceMappingURL=index.js.map

package/dist/src/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,cAAc,EAA4B,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/src/components/skeleton/skeleton.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import type { MarginSpacingProps } from '../box';
+export interface SkeletonProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onClick'>, MarginSpacingProps {
+    /**
+     * Any CSS length. Defaults to the full width of the container.
+     */
+    width?: string;
+    /**
+     * Any CSS length. Defaults to `1em`, the font size of the surrounding text.
+     */
+    height?: string;
+}
+/**
+ * Placeholder block shown only while data is loading. Compose blocks to mirror the layout of the content,
+ * inside a `SkeletonGroup`.
+ */
+export declare const Skeleton: ({ width, height, className, ...rest }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/src/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAKjD,MAAM,WAAW,aACb,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,EAAE,kBAAkB;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,uCAAwD,aAAa,4CAS7F,CAAC"}

package/dist/src/components/skeleton/skeleton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { StyledSkeleton, skeletonClassNames } from './skeleton.styled';
+import { skeletonTestIds } from './skeleton.test_ids';
+/**
+ * Placeholder block shown only while data is loading. Compose blocks to mirror the layout of the content,
+ * inside a `SkeletonGroup`.
+ */
+export const Skeleton = ({ width = '100%', height = '1em', className, ...rest }) => (_jsx(StyledSkeleton, { "aria-hidden": true, "data-test": skeletonTestIds.ROOT, className: clsx(skeletonClassNames.ROOT, className), "$width": width, "$height": height, ...rest }));
+//# sourceMappingURL=skeleton.js.map

package/dist/src/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAIxB,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAetD;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAiB,EAAE,EAAE,CAAC,CAC/F,KAAC,cAAc,sCAEA,eAAe,CAAC,IAAI,EAC/B,SAAS,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,YAC3C,KAAK,aACJ,MAAM,KACX,IAAI,GACV,CACL,CAAC"}

package/dist/src/components/skeleton/skeleton.styled.d.ts

@@ -0,0 +1,13 @@
+export declare const skeletonClassNames: {
+    ROOT: string;
+    GROUP: string;
+    FADE_IN: string;
+};
+type StyledSkeletonProps = {
+    $width: string;
+    $height: string;
+};
+export declare const StyledSkeleton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("..").BoxProps & import("react").RefAttributes<HTMLElement>) & import("styled-components/dist/types").BaseObject, StyledSkeletonProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").BoxProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledSkeletonFadeIn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(import("..").BoxProps & import("react").RefAttributes<HTMLElement>) & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("..").BoxProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=skeleton.styled.d.ts.map

package/dist/src/components/skeleton/skeleton.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.styled.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB;;;;CAI9B,CAAC;AAiBF,KAAK,mBAAmB,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,obA0B1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kdAMhC,CAAC"}

package/dist/src/components/skeleton/skeleton.styled.js

@@ -0,0 +1,55 @@
+import styled, { keyframes } from 'styled-components';
+import { theme } from '../../design_system/theme';
+import { Box } from '../box';
+export const skeletonClassNames = {
+    ROOT: 'Skeleton',
+    GROUP: 'Skeleton-Group',
+    FADE_IN: 'Skeleton-FadeIn',
+};
+// TODO: move both durations to design tokens (`theme.transition`) once the motion tokens are agreed.
+const WAVE_DURATION = '1600ms';
+const FADE_IN_DURATION = '80ms';
+/* The highlight sweeps each block's own width, so short and long blocks start and end together. */
+const wave = keyframes `
+    from { transform: translateX(-100%); }
+    to { transform: translateX(100%); }
+`;
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to { opacity: 1; }
+`;
+export const StyledSkeleton = styled(Box) `
+    position: relative;
+    overflow: hidden;
+    flex: 0 1 auto;
+    min-width: 0;
+    width: ${({ $width }) => $width};
+    height: ${({ $height }) => $height};
+    border-radius: ${theme.radius.radius4};
+    /* Base and highlight are both on-surface: the highlight is a second translucent layer over the
+       base, so one token gives a visible sweep on every surface, in light and dark alike. */
+    background-color: ${theme.color.neutral.onSurface};
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, ${theme.color.neutral.onSurface}, transparent);
+        transform: translateX(-100%);
+        animation: ${wave} ${WAVE_DURATION} ease-in-out infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::after {
+            content: none;
+        }
+    }
+`;
+export const StyledSkeletonFadeIn = styled(Box) `
+    animation: ${fadeIn} ${FADE_IN_DURATION} ease-out both;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+`;
+//# sourceMappingURL=skeleton.styled.js.map

package/dist/src/components/skeleton/skeleton.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styled.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAC9B,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,gBAAgB;IACvB,OAAO,EAAE,iBAAiB;CAC7B,CAAC;AAEF,qGAAqG;AACrG,MAAM,aAAa,GAAG,QAAQ,CAAC;AAC/B,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAEhC,mGAAmG;AACnG,MAAM,IAAI,GAAG,SAAS,CAAA;;;CAGrB,CAAC;AAEF,MAAM,MAAM,GAAG,SAAS,CAAA;;;CAGvB,CAAC;AAOF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,CAAqB;;;;;aAKjD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;cACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;qBACjB,KAAK,CAAC,MAAM,CAAC,OAAO;;;wBAGjB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;;;;0DAMK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;qBAElE,IAAI,IAAI,aAAa;;;;;;;;CAQzC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;iBAC9B,MAAM,IAAI,gBAAgB;;;;;CAK1C,CAAC"}