@aivenio/aquarium 6.2.0 → 6.4.0

package/dist/src/molecules/Stepper/Stepper.js

@@ -2,19 +2,19 @@ import React from 'react';
 import { Template } from '../../../src/molecules/Template/Template';
 import { Stepper as StepperBase } from '../../../src/atoms/Stepper/Stepper';
 import { isComponentType } from '../../../types/utils';
-export const Stepper = ({ children, activeIndex, dense }) => {
+export const Stepper = ({ children, activeIndex, dense, direction = 'horizontal', }) => {
     const steps = React.Children.count(children);
     return (React.createElement(StepperBase, { role: "list", className: "Aquarium-Stepper" },
-        React.createElement(Template, { columns: steps }, React.Children.map(children, (child, index) => {
+        React.createElement(Template, { columns: direction === 'horizontal' ? steps : 1 }, React.Children.map(children, (child, index) => {
             if (!isComponentType(child, Step)) {
                 throw new Error('<Stepper> can only have <Stepper.Step> components as children');
             }
             else {
                 const state = index > activeIndex ? 'inactive' : index === activeIndex ? 'active' : 'completed';
-                return (React.createElement(StepperBase.Step, { state: state, "aria-current": state === 'active' ? 'step' : false, role: "listitem" },
-                    index > 0 && index <= steps && (React.createElement(StepperBase.ConnectorContainer, { dense: dense },
-                        React.createElement(StepperBase.ConnectorContainer.Connector, { completed: state === 'completed' || state === 'active' }))),
-                    React.createElement(StepperBase.Step.Indicator, { state: state, dense: dense }, index + 1),
+                return (React.createElement(StepperBase.Step, { state: state, "aria-current": state === 'active' ? 'step' : false, direction: direction, role: "listitem" },
+                    index > 0 && index <= steps && (React.createElement(StepperBase.ConnectorContainer, { dense: dense, direction: direction },
+                        React.createElement(StepperBase.ConnectorContainer.Connector, { completed: state === 'completed' || state === 'active', dense: dense, direction: direction }))),
+                    React.createElement(StepperBase.Step.Indicator, { state: state, dense: dense, direction: direction }, index + 1),
                     child.props.children));
             }
         }))));
@@ -23,4 +23,4 @@ Stepper.displayName = 'Stepper';
 const Step = () => null;
 Step.displayName = 'Stepper.Step';
 Stepper.Step = Step;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRTNELE9BQU8sRUFBRSxPQUFPLElBQUksV0FBVyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFbkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQWtCOUMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFtRCxDQUFDLEVBQUUsUUFBUSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO0lBQzFHLE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzdDLE9BQU8sQ0FDTCxvQkFBQyxXQUFXLElBQUMsSUFBSSxFQUFDLE1BQU0sRUFBQyxTQUFTLEVBQUMsa0JBQWtCO1FBQ25ELG9CQUFDLFFBQVEsSUFBQyxPQUFPLEVBQUUsS0FBSyxJQUNyQixLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEVBQUU7WUFDN0MsSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEVBQUUsQ0FBQztnQkFDbEMsTUFBTSxJQUFJLEtBQUssQ0FBQywrREFBK0QsQ0FBQyxDQUFDO1lBQ25GLENBQUM7aUJBQU0sQ0FBQztnQkFDTixNQUFNLEtBQUssR0FBRyxLQUFLLEdBQUcsV0FBVyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEtBQUssS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDO2dCQUNoRyxPQUFPLENBQ0wsb0JBQUMsV0FBVyxDQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsS0FBSyxrQkFBZ0IsS0FBSyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLEVBQUUsSUFBSSxFQUFDLFVBQVU7b0JBQy9GLEtBQUssR0FBRyxDQUFDLElBQUksS0FBSyxJQUFJLEtBQUssSUFBSSxDQUM5QixvQkFBQyxXQUFXLENBQUMsa0JBQWtCLElBQUMsS0FBSyxFQUFFLEtBQUs7d0JBQzFDLG9CQUFDLFdBQVcsQ0FBQyxrQkFBa0IsQ0FBQyxTQUFTLElBQUMsU0FBUyxFQUFFLEtBQUssS0FBSyxXQUFXLElBQUksS0FBSyxLQUFLLFFBQVEsR0FBSSxDQUNyRSxDQUNsQztvQkFDRCxvQkFBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFNBQVMsSUFBQyxLQUFLLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLElBQ25ELEtBQUssR0FBRyxDQUFDLENBQ2lCO29CQUM1QixLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FDSixDQUNwQixDQUFDO1lBQ0osQ0FBQztRQUNILENBQUMsQ0FBQyxDQUNPLENBQ0MsQ0FDZixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsT0FBTyxDQUFDLFdBQVcsR0FBRyxTQUFTLENBQUM7QUFNaEMsTUFBTSxJQUFJLEdBQXdCLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztBQUM3QyxJQUFJLENBQUMsV0FBVyxHQUFHLGNBQWMsQ0FBQztBQUVsQyxPQUFPLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3RlcHBlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU3RlcHBlci9TdGVwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRTNELE9BQU8sRUFBRSxPQUFPLElBQUksV0FBVyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFbkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQXNCOUMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFtRCxDQUFDLEVBQ3RFLFFBQVEsRUFDUixXQUFXLEVBQ1gsS0FBSyxFQUNMLFNBQVMsR0FBRyxZQUFZLEdBQ3pCLEVBQUUsRUFBRTtJQUNILE1BQU0sS0FBSyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQzdDLE9BQU8sQ0FDTCxvQkFBQyxXQUFXLElBQUMsSUFBSSxFQUFDLE1BQU0sRUFBQyxTQUFTLEVBQUMsa0JBQWtCO1FBQ25ELG9CQUFDLFFBQVEsSUFBQyxPQUFPLEVBQUUsU0FBUyxLQUFLLFlBQVksQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQ3RELEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsRUFBRTtZQUM3QyxJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsRUFBRSxDQUFDO2dCQUNsQyxNQUFNLElBQUksS0FBSyxDQUFDLCtEQUErRCxDQUFDLENBQUM7WUFDbkYsQ0FBQztpQkFBTSxDQUFDO2dCQUNOLE1BQU0sS0FBSyxHQUFHLEtBQUssR0FBRyxXQUFXLENBQUMsQ0FBQyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsS0FBSyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxXQUFXLENBQUM7Z0JBQ2hHLE9BQU8sQ0FDTCxvQkFBQyxXQUFXLENBQUMsSUFBSSxJQUNmLEtBQUssRUFBRSxLQUFLLGtCQUNFLEtBQUssS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUNqRCxTQUFTLEVBQUUsU0FBUyxFQUNwQixJQUFJLEVBQUMsVUFBVTtvQkFFZCxLQUFLLEdBQUcsQ0FBQyxJQUFJLEtBQUssSUFBSSxLQUFLLElBQUksQ0FDOUIsb0JBQUMsV0FBVyxDQUFDLGtCQUFrQixJQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFNBQVM7d0JBQ2hFLG9CQUFDLFdBQVcsQ0FBQyxrQkFBa0IsQ0FBQyxTQUFTLElBQ3ZDLFNBQVMsRUFBRSxLQUFLLEtBQUssV0FBVyxJQUFJLEtBQUssS0FBSyxRQUFRLEVBQ3RELEtBQUssRUFBRSxLQUFLLEVBQ1osU0FBUyxFQUFFLFNBQVMsR0FDcEIsQ0FDNkIsQ0FDbEM7b0JBQ0Qsb0JBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxTQUFTLElBQUMsS0FBSyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxTQUFTLElBQ3pFLEtBQUssR0FBRyxDQUFDLENBQ2lCO29CQUM1QixLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FDSixDQUNwQixDQUFDO1lBQ0osQ0FBQztRQUNILENBQUMsQ0FBQyxDQUNPLENBQ0MsQ0FDZixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsT0FBTyxDQUFDLFdBQVcsR0FBRyxTQUFTLENBQUM7QUFNaEMsTUFBTSxJQUFJLEdBQXdCLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztBQUM3QyxJQUFJLENBQUMsV0FBVyxHQUFHLGNBQWMsQ0FBQztBQUVsQyxPQUFPLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyJ9

package/dist/src/molecules/Timeline/Timeline.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export type TimelineItemProps = {
     /**
      * Mandatory title prop for each section.
-     * Typically a formatted date is used.
+     * Typically, a formatted date is used.
      */
     title: string;
     /**
@@ -14,7 +14,8 @@ export type TimelineItemProps = {
 };
 declare const TimelineItem: React.FC<TimelineItemProps>;
 type TimelineProps = {
-    children: Array<React.ReactElement<TimelineItemProps>> | React.ReactElement<TimelineItemProps>;
+    'children': Array<React.ReactElement<TimelineItemProps>> | React.ReactElement<TimelineItemProps>;
+    'aria-label'?: string;
 };
 type ComposedTimelineProps = React.FC<TimelineProps> & {
     Item: typeof TimelineItem;

package/dist/src/molecules/Timeline/Timeline.js

@@ -4,6 +4,7 @@ import { Icon } from '../../../src/molecules/Icon/Icon';
 import { Typography } from '../../../src/molecules/Typography/Typography';
 import { Skeleton } from '../../../src/atoms/Skeleton/Skeleton';
 import { Timeline as BaseTimeline } from '../../../src/atoms/Timeline/Timeline';
+import { VisuallyHidden } from '../../../src/atoms/VisuallyHidden/VisuallyHidden';
 import { isComponentType } from '../../../types/utils';
 import danger from '../../../src/icons/error';
 import loading from '../../../src/icons/loading';
@@ -11,14 +12,24 @@ import tickCircle from '../../../src/icons/tickCircle';
 import time from '../../../src/icons/time';
 import warning from '../../../src/icons/warningSign';
 const TimelineItem = () => null;
-export const Timeline = ({ children }) => (React.createElement("div", { className: "Aquarium-Timeline" }, React.Children.map(children, (item) => {
+export const Timeline = ({ children, 'aria-label': ariaLabel }) => (React.createElement("ol", { className: "Aquarium-Timeline", "aria-label": ariaLabel }, React.Children.map(children, (item) => {
     if (!isComponentType(item, TimelineItem)) {
         throw new Error('<Timeline> can only have <Timeline.Item> components as children');
     }
     else {
         const { props, key } = item;
         return (React.createElement(BaseTimeline, { key: key !== null && key !== void 0 ? key : props.title },
-            React.createElement(BaseTimeline.Separator, null, props.variant === 'error' ? (React.createElement(Icon, { icon: danger, color: "danger-default" })) : props.variant === 'warning' ? (React.createElement(Icon, { icon: warning, color: "warning-default" })) : props.variant === 'info' ? (React.createElement(Icon, { icon: time, color: "info-default" })) : props.variant === 'success' ? (React.createElement(Icon, { icon: tickCircle, color: "success-default" })) : props.variant === 'loading' ? (React.createElement(Icon, { icon: loading, color: "default" })) : (React.createElement(BaseTimeline.Separator.Dot, null))),
+            React.createElement(BaseTimeline.Separator, null, props.variant === 'error' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Error: "),
+                React.createElement(Icon, { icon: danger, color: "danger-default" }))) : props.variant === 'warning' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Warning: "),
+                React.createElement(Icon, { icon: warning, color: "warning-default" }))) : props.variant === 'info' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Info: "),
+                React.createElement(Icon, { icon: time, color: "info-default" }))) : props.variant === 'success' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Success: "),
+                React.createElement(Icon, { icon: tickCircle, color: "success-default" }))) : props.variant === 'loading' ? (React.createElement(React.Fragment, null,
+                React.createElement(VisuallyHidden, null, "Loading: "),
+                React.createElement(Icon, { icon: loading, color: "default" }))) : (React.createElement(BaseTimeline.Separator.Dot, null))),
             React.createElement(Typography.Small, { color: "muted" }, props.title),
             React.createElement(BaseTimeline.LineContainer, null,
                 React.createElement(BaseTimeline.LineContainer.Line, null)),
@@ -37,8 +48,9 @@ const TimelineItemSkeleton = () => (React.createElement(BaseTimeline, null,
             React.createElement(Skeleton, { height: 32, width: "100%" }),
             React.createElement(Skeleton, { height: 32, width: "73%" }),
             React.createElement(Skeleton, { height: 32, width: "80%" })))));
-const TimelineSkeleton = ({ items = 3 }) => (React.createElement("div", null, Array.from({ length: items }).map((_, key) => (React.createElement(TimelineItemSkeleton, { key: key })))));
+const TimelineSkeleton = ({ items = 3 }) => (React.createElement("ol", { className: "Aquarium-Timeline", "aria-busy": "true", "aria-label": "Loading timeline" },
+    React.createElement("div", { "aria-hidden": true }, Array.from({ length: items }).map((_, key) => (React.createElement(TimelineItemSkeleton, { key: key }))))));
 Timeline.Item = TimelineItem;
 Timeline.Skeleton = TimelineSkeleton;
 Timeline.Skeleton.displayName = 'Timeline.Skeleton';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RpbWVsaW5lL1RpbWVsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFdkUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUU5QyxPQUFPLE1BQU0sTUFBTSxpQkFBaUIsQ0FBQztBQUNyQyxPQUFPLE9BQU8sTUFBTSxtQkFBbUIsQ0FBQztBQUN4QyxPQUFPLFVBQVUsTUFBTSxzQkFBc0IsQ0FBQztBQUM5QyxPQUFPLElBQUksTUFBTSxnQkFBZ0IsQ0FBQztBQUNsQyxPQUFPLE9BQU8sTUFBTSx1QkFBdUIsQ0FBQztBQWlCNUMsTUFBTSxZQUFZLEdBQWdDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQztBQVE3RCxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQTBCLENBQUMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDL0QsNkJBQUssU0FBUyxFQUFDLG1CQUFtQixJQUMvQixLQUFLLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxJQUFJLEVBQUUsRUFBRTtJQUNyQyxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksRUFBRSxZQUFZLENBQUMsRUFBRSxDQUFDO1FBQ3pDLE1BQU0sSUFBSSxLQUFLLENBQUMsaUVBQWlFLENBQUMsQ0FBQztJQUNyRixDQUFDO1NBQU0sQ0FBQztRQUNOLE1BQU0sRUFBRSxLQUFLLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO1FBQzVCLE9BQU8sQ0FDTCxvQkFBQyxZQUFZLElBQUMsR0FBRyxFQUFFLEdBQUcsYUFBSCxHQUFHLGNBQUgsR0FBRyxHQUFJLEtBQUssQ0FBQyxLQUFLO1lBQ25DLG9CQUFDLFlBQVksQ0FBQyxTQUFTLFFBQ3BCLEtBQUssQ0FBQyxPQUFPLEtBQUssT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUMzQixvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUMsZ0JBQWdCLEdBQUcsQ0FDOUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLE9BQU8sS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQ2hDLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBQyxpQkFBaUIsR0FBRyxDQUNoRCxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsT0FBTyxLQUFLLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FDN0Isb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFDLGNBQWMsR0FBRyxDQUMxQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsT0FBTyxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FDaEMsb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFDLGlCQUFpQixHQUFHLENBQ25ELENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxPQUFPLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUNoQyxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUMsU0FBUyxHQUFHLENBQ3hDLENBQUMsQ0FBQyxDQUFDLENBQ0Ysb0JBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxHQUFHLE9BQUcsQ0FDL0IsQ0FDc0I7WUFDekIsb0JBQUMsVUFBVSxDQUFDLEtBQUssSUFBQyxLQUFLLEVBQUMsT0FBTyxJQUFFLEtBQUssQ0FBQyxLQUFLLENBQW9CO1lBQ2hFLG9CQUFDLFlBQVksQ0FBQyxhQUFhO2dCQUN6QixvQkFBQyxZQUFZLENBQUMsYUFBYSxDQUFDLElBQUksT0FBRyxDQUNSO1lBQzdCLG9CQUFDLFlBQVksQ0FBQyxPQUFPO2dCQUNuQixvQkFBQyxVQUFVLENBQUMsT0FBTyxRQUFFLEtBQUssQ0FBQyxRQUFRLENBQXNCLENBQ3BDLENBQ1YsQ0FDaEIsQ0FBQztJQUNKLENBQUM7QUFDSCxDQUFDLENBQUMsQ0FDRSxDQUNQLENBQUM7QUFFRixNQUFNLG9CQUFvQixHQUFhLEdBQUcsRUFBRSxDQUFDLENBQzNDLG9CQUFDLFlBQVk7SUFDWCxvQkFBQyxZQUFZLENBQUMsU0FBUztRQUNyQixvQkFBQyxRQUFRLElBQUMsS0FBSyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLE9BQU8sU0FBRyxDQUNsQjtJQUN6QixvQkFBQyxRQUFRLElBQUMsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUUsR0FBRyxHQUFJO0lBQ3BDLG9CQUFDLFlBQVksQ0FBQyxhQUFhO1FBQ3pCLG9CQUFDLFFBQVEsSUFBQyxLQUFLLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBQyxNQUFNLEdBQUcsQ0FDVDtJQUM3QixvQkFBQyxZQUFZLENBQUMsT0FBTztRQUNuQixvQkFBQyxHQUFHLElBQUMsT0FBTyxFQUFDLE1BQU0sRUFBQyxhQUFhLEVBQUMsUUFBUSxFQUFDLEdBQUcsRUFBQyxHQUFHO1lBQ2hELG9CQUFDLFFBQVEsSUFBQyxNQUFNLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBQyxNQUFNLEdBQUc7WUFDckMsb0JBQUMsUUFBUSxJQUFDLE1BQU0sRUFBRSxFQUFFLEVBQUUsS0FBSyxFQUFDLEtBQUssR0FBRztZQUNwQyxvQkFBQyxRQUFRLElBQUMsTUFBTSxFQUFFLEVBQUUsRUFBRSxLQUFLLEVBQUMsS0FBSyxHQUFHLENBQ2hDLENBQ2UsQ0FDVixDQUNoQixDQUFDO0FBRUYsTUFBTSxnQkFBZ0IsR0FBaUMsQ0FBQyxFQUFFLEtBQUssR0FBRyxDQUFDLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDeEUsaUNBQ0csS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxHQUFHLEVBQUUsRUFBRSxDQUFDLENBQzdDLG9CQUFDLG9CQUFvQixJQUFDLEdBQUcsRUFBRSxHQUFHLEdBQUksQ0FDbkMsQ0FBQyxDQUNFLENBQ1AsQ0FBQztBQUVGLFFBQVEsQ0FBQyxJQUFJLEdBQUcsWUFBWSxDQUFDO0FBQzdCLFFBQVEsQ0FBQyxRQUFRLEdBQUcsZ0JBQWdCLENBQUM7QUFDckMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEdBQUcsbUJBQW1CLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGltZWxpbmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RpbWVsaW5lL1RpbWVsaW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQzVDLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFFakUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxRQUFRLElBQUksWUFBWSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdkUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBRXpFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFFOUMsT0FBTyxNQUFNLE1BQU0saUJBQWlCLENBQUM7QUFDckMsT0FBTyxPQUFPLE1BQU0sbUJBQW1CLENBQUM7QUFDeEMsT0FBTyxVQUFVLE1BQU0sc0JBQXNCLENBQUM7QUFDOUMsT0FBTyxJQUFJLE1BQU0sZ0JBQWdCLENBQUM7QUFDbEMsT0FBTyxPQUFPLE1BQU0sdUJBQXVCLENBQUM7QUFnQjVDLE1BQU0sWUFBWSxHQUFnQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUM7QUFTN0QsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUEwQixDQUFDLEVBQUUsUUFBUSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FDeEYsNEJBQUksU0FBUyxFQUFDLG1CQUFtQixnQkFBYSxTQUFTLElBQ3BELEtBQUssQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFO0lBQ3JDLElBQUksQ0FBQyxlQUFl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

package/dist/src/tokens/tokens.json

@@ -189,6 +189,7 @@
     "code": {
         "background": "rgba(250,250,250,1)",
         "text": "rgba(45,46,48,1)",
+        "variable": "rgba(91,30,103,1)",
         "keyword": "rgba(202, 33, 101, 1)",
         "string": "rgba(0, 127, 115, 1)",
         "function": "rgba(9, 128, 193, 1)",

package/dist/src/utils/useScrollFade.d.ts

@@ -0,0 +1,17 @@
+type ScrollFade = {
+    containerRef: React.RefCallback<HTMLElement>;
+    topSentinelRef: React.RefObject<HTMLDivElement | null>;
+    bottomSentinelRef: React.RefObject<HTMLDivElement | null>;
+    showTopFade: boolean;
+    showBottomFade: boolean;
+};
+/**
+ * Uses IntersectionObserver with sentinel elements to determine whether
+ * top/bottom scroll fade indicators should be visible.
+ *
+ * When the top sentinel scrolls out of view the top fade appears;
+ * when the bottom sentinel scrolls out of view the bottom fade appears.
+ * If content doesn't overflow, both sentinels stay visible and no fades show.
+ */
+export declare const useScrollFade: () => ScrollFade;
+export {};

package/dist/src/utils/useScrollFade.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * Uses IntersectionObserver with sentinel elements to determine whether
+ * top/bottom scroll fade indicators should be visible.
+ *
+ * When the top sentinel scrolls out of view the top fade appears;
+ * when the bottom sentinel scrolls out of view the bottom fade appears.
+ * If content doesn't overflow, both sentinels stay visible and no fades show.
+ */
+export const useScrollFade = () => {
+    const topSentinelRef = useRef(null);
+    const bottomSentinelRef = useRef(null);
+    const observerRef = useRef(null);
+    const [showTopFade, setShowTopFade] = useState(false);
+    const [showBottomFade, setShowBottomFade] = useState(false);
+    const containerRef = useCallback((container) => {
+        var _a;
+        (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (!container) {
+            return;
+        }
+        observerRef.current = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.target === topSentinelRef.current) {
+                    setShowTopFade(!entry.isIntersecting);
+                }
+                else if (entry.target === bottomSentinelRef.current) {
+                    setShowBottomFade(!entry.isIntersecting);
+                }
+            });
+        }, { root: container, threshold: 0 });
+        if (topSentinelRef.current) {
+            observerRef.current.observe(topSentinelRef.current);
+        }
+        if (bottomSentinelRef.current) {
+            observerRef.current.observe(bottomSentinelRef.current);
+        }
+    }, []);
+    useEffect(() => {
+        return () => { var _a; return (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); };
+    }, []);
+    return { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2Nyb2xsRmFkZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy91c2VTY3JvbGxGYWRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFVakU7Ozs7Ozs7R0FPRztBQUNILE1BQU0sQ0FBQyxNQUFNLGFBQWEsR0FBRyxHQUFlLEVBQUU7SUFDNUMsTUFBTSxjQUFjLEdBQUcsTUFBTSxDQUF3QixJQUFJLENBQUMsQ0FBQztJQUMzRCxNQUFNLGlCQUFpQixHQUFHLE1BQU0sQ0FBd0IsSUFBSSxDQUFDLENBQUM7SUFDOUQsTUFBTSxXQUFXLEdBQUcsTUFBTSxDQUE4QixJQUFJLENBQUMsQ0FBQztJQUU5RCxNQUFNLENBQUMsV0FBVyxFQUFFLGNBQWMsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN0RCxNQUFNLENBQUMsY0FBYyxFQUFFLGlCQUFpQixDQUFDLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBRTVELE1BQU0sWUFBWSxHQUFHLFdBQVcsQ0FBQyxDQUFDLFNBQTZCLEVBQUUsRUFBRTs7UUFDakUsTUFBQSxXQUFXLENBQUMsT0FBTywwQ0FBRSxVQUFVLEVBQUUsQ0FBQztRQUVsQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDZixPQUFPO1FBQ1QsQ0FBQztRQUVELFdBQVcsQ0FBQyxPQUFPLEdBQUcsSUFBSSxvQkFBb0IsQ0FDNUMsQ0FBQyxPQUFPLEVBQUUsRUFBRTtZQUNWLE9BQU8sQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDeEIsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLGNBQWMsQ0FBQyxPQUFPLEVBQUUsQ0FBQztvQkFDNUMsY0FBYyxDQUFDLENBQUMsS0FBSyxDQUFDLGNBQWMsQ0FBQyxDQUFDO2dCQUN4QyxDQUFDO3FCQUFNLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxpQkFBaUIsQ0FBQyxPQUFPLEVBQUUsQ0FBQztvQkFDdEQsaUJBQWlCLENBQUMsQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUM7Z0JBQzNDLENBQUM7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsRUFDRCxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLENBQUMsRUFBRSxDQUNsQyxDQUFDO1FBRUYsSUFBSSxjQUFjLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDM0IsV0FBVyxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3RELENBQUM7UUFDRCxJQUFJLGlCQUFpQixDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQzlCLFdBQVcsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3pELENBQUM7SUFDSCxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFUCxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsT0FBTyxHQUFHLEVBQUUsV0FBQyxPQUFBLE1BQUEsV0FBVyxDQUFDLE9BQU8sMENBQUUsVUFBVSxFQUFFLENBQUEsRUFBQSxDQUFDO0lBQ2pELENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sRUFBRSxZQUFZLEVBQUUsY0FBYyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxjQUFjLEVBQUUsQ0FBQztBQUMxRixDQUFDLENBQUMifQ==

package/dist/styles.css

@@ -507,6 +507,7 @@ video {
   --aquarium-chart-colors-sequential-300: rgba(0, 150, 147, 1);
   --aquarium-chart-colors-sequential-400: rgba(0, 98, 96, 1);
   --aquarium-chart-colors-sequential-500: rgba(0, 74, 72, 1);
+  --aquarium-code-variable: rgba(91,30,103,1); /** Code block variable and identifiers */
   --aquarium-code-keyword: rgba(202, 33, 101, 1); /** Syntax: keyword */
   --aquarium-code-string: rgba(0, 127, 115, 1); /** Syntax: string */
   --aquarium-code-function: rgba(9, 128, 193, 1); /** Syntax: function */
@@ -1049,6 +1050,9 @@ video {
 .-left-1\/2{
   left: -50%;
 }
+.-top-2\/3{
+  top: -66.666667%;
+}
 .bottom-0{
   bottom: 0px;
 }
@@ -1061,6 +1065,12 @@ video {
 .left-2{
   left: 4px;
 }
+.left-\[16px\]{
+  left: 16px;
+}
+.left-\[3px\]{
+  left: 3px;
+}
 .right-0{
   right: 0px;
 }
@@ -1088,8 +1098,8 @@ video {
 .top-\[3px\]{
   top: 3px;
 }
-.top-\[47px\]{
-  top: 47px;
+.top-\[43px\]{
+  top: 43px;
 }
 .-z-10{
   z-index: -10;
@@ -1175,6 +1185,9 @@ video {
   margin-top: 12px;
   margin-bottom: 12px;
 }
+.-mt-1px{
+  margin-top: -1px;
+}
 .mb-1{
   margin-bottom: 2px;
 }
@@ -1208,6 +1221,9 @@ video {
 .mr-4{
   margin-right: 12px;
 }
+.mr-l1{
+  margin-right: 16px;
+}
 .mt-1{
   margin-top: 2px;
 }
@@ -1440,6 +1456,9 @@ video {
 .w-\[280px\]{
   width: 280px;
 }
+.w-\[2px\]{
+  width: 2px;
+}
 .w-\[32px\]{
   width: 32px;
 }
@@ -1449,6 +1468,9 @@ video {
 .w-\[360px\]{
   width: 360px;
 }
+.w-\[3px\]{
+  width: 3px;
+}
 .w-\[560px\]{
   width: 560px;
 }
@@ -1590,6 +1612,11 @@ video {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.scale-125{
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .scale-\[0\.55\]{
   --tw-scale-x: 0.55;
   --tw-scale-y: 0.55;
@@ -3019,6 +3046,15 @@ video {
 .pb-6{
   padding-bottom: 24px;
 }
+.pb-8{
+  padding-bottom: 40px;
+}
+.pb-\[24px\]{
+  padding-bottom: 24px;
+}
+.pb-\[30px\]{
+  padding-bottom: 30px;
+}
 .pl-3{
   padding-left: 8px;
 }
@@ -3061,9 +3097,15 @@ video {
 .pt-6{
   padding-top: 24px;
 }
+.pt-\[12px\]{
+  padding-top: 12px;
+}
 .pt-\[1px\]{
   padding-top: 1px;
 }
+.pt-\[4px\]{
+  padding-top: 4px;
+}
 .text-left{
   text-align: left;
 }
@@ -3843,6 +3885,7 @@ code{
   --aquarium-code-background: var(--aquarium-background-color-body);
   --aquarium-code-text: var(--aquarium-text-color-default);
   --aquarium-code-keyword: rgba(223, 86, 242, 1);
+  --aquarium-code-variable: rgba(228,202,255, 1);
   --aquarium-code-string: rgba(95, 250, 116, 1);
   --aquarium-code-function: rgba(89, 210, 244, 1);
   --aquarium-code-number: rgba(255, 229, 94, 1);
@@ -4059,6 +4102,10 @@ code{
   content: var(--tw-content);
   z-index: 10;
 }
+.before\:-mb-5::before{
+  content: var(--tw-content);
+  margin-bottom: -16px;
+}
 .before\:h-5::before{
   content: var(--tw-content);
   height: 16px;
@@ -4112,9 +4159,9 @@ code{
   content: var(--tw-content);
   position: sticky;
 }
-.after\:bottom-3::after{
+.after\:bottom-0::after{
   content: var(--tw-content);
-  bottom: 8px;
+  bottom: 0px;
 }
 .after\:left-0::after{
   content: var(--tw-content);
@@ -4124,9 +4171,13 @@ code{
   content: var(--tw-content);
   z-index: 10;
 }
-.after\:h-5::after{
+.after\:-mt-\[60px\]::after{
   content: var(--tw-content);
-  height: 16px;
+  margin-top: -60px;
+}
+.after\:h-\[60px\]::after{
+  content: var(--tw-content);
+  height: 60px;
 }
 .after\:flex-shrink-0::after{
   content: var(--tw-content);