@agregio-solutions/design-system 1.102.6 → 2.1.0

package/dist/packages/components/Slider/Slider.d.ts

@@ -62,11 +62,11 @@ export interface Props {
      */
     id?: string;
     /**
-     * The style of the wrapper element that contains the slider but also the label, description, helperText, etc.
+     * The style of the wrapper element that contains the slider but also the label, helperText, etc.
      */
     style?: React.CSSProperties;
     /**
-     * The className of the wrapper element that contains the slider but also the label, description, helperText, etc.
+     * The className of the wrapper element that contains the slider but also the label, helperText, etc.
      */
     className?: string;
     /**
@@ -78,18 +78,12 @@ export interface Props {
      * Requires `labelIconRight` to be set. When provided, the icon is wrapped in a Tooltip.
      */
     labelIconRightTooltip?: string;
-    /**
-     * Optional description to display under the label and above the field
-     */
-    description?: string | React.ReactNode;
     /**
      * Helper text displayed below the input field, like additional instructions.
-     * @deprecated use `description` instead
      */
     helperText?: string | React.ReactNode;
     /**
      * Optional icon to display on the left side of the helperText. Only visible if there is a helperText
-     * @deprecated will be removed in v2
      */
     helperTextIcon?: IconName;
     /**
@@ -113,4 +107,4 @@ export interface Props {
      */
     "aria-label"?: string;
 }
-export default function Slider({ id, label, minValue, maxValue, step, isDisabled, style, className, onChange, onChangeEnd, value: initialValue, thumbLabels, labelIconRight, labelIconRightTooltip, description, helperText, helperTextIcon, errorHelperText, errorHelperTextIcon, successHelperText, successHelperTextIcon, isInvalid, withTrackDots, ...otherProps }: Props): React.JSX.Element;
+export default function Slider({ id, label, minValue, maxValue, step, isDisabled, style, className, onChange, onChangeEnd, value: initialValue, thumbLabels, labelIconRight, labelIconRightTooltip, helperText, helperTextIcon, errorHelperText, errorHelperTextIcon, successHelperText, successHelperTextIcon, isInvalid, withTrackDots, ...otherProps }: Props): React.JSX.Element;

package/dist/packages/components/Slider/doc.md

@@ -24,7 +24,6 @@ const meta: Meta<typeof Slider> = {
   argTypes: {
     label: { control: "text" },
     value: { control: "text" },
-    description: { control: "text" },
     helperText: { control: "text" },
     errorHelperText: { control: "text" },
     successHelperText: { control: "text" },
@@ -67,8 +66,7 @@ export const Playground: Story = {
     isDisabled: false,
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
-    description: "Select the number of participants",
-    helperText: "This is a helper text",
+    helperText: "Select the number of participants",
     helperTextIcon: "help_outline",
     errorHelperTextIcon: "error_outline",
     style: {
@@ -79,7 +77,6 @@ export const Playground: Story = {
     const canvas = within(canvasElement);
     await canvas.findByText("Participants");
     await canvas.findByLabelText("Number of participants");
-    await canvas.findByText("This is a helper text");
     await canvas.findByText("Select the number of participants");
     await expect(
       canvas.getByLabelText("Value for Number of participants"),

package/dist/packages/components/Tabs/Tab/Tab.d.ts

@@ -27,11 +27,6 @@ export type Props = {
      * A URL to link to.
      */
     href?: string;
-    /**
-     * Show a little dot right of the Tab label.
-     * @deprecated Use `badgeProps` instead.
-     */
-    hasNotification?: boolean;
     /**
      * Props to pass to the Badge component.
      * If not provided, no badge will be displayed.

package/dist/packages/components/TextInput/TextInput.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { IconName } from '../Icon/Icon';
 import { Props as LabelProps } from '../Label/Label';
 import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
-export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
+export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Whether to render the component as a textarea or an input.
      * @default "input"
@@ -46,7 +46,7 @@ export type Props = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> &
      */
     rows?: number;
 };
-declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
+declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
      * Whether to render the component as a textarea or an input.
      * @default "input"

package/dist/packages/components/TextInput/doc.md

@@ -24,7 +24,6 @@ const meta: Meta<typeof TextInput> = {
   tags: ["autodocs"],
   argTypes: {
     label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
     helperText: { control: { type: "text" } },
     errorHelperText: { control: { type: "text" } },
     successHelperText: { control: { type: "text" } },
@@ -47,7 +46,6 @@ export const Playground: StoryObj<typeof TextInput> = {
     label: "[Insert label]",
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
-    description: "[Insert description]",
     characterCounter: true,
     maxLength: 60,
     helperText: "[Insert helper]",
@@ -137,7 +135,6 @@ export const Focus: StoryObj<typeof TextInput> = {
 export const Horizontal: StoryObj<typeof TextInput> = {
   args: {
     ...Playground.args,
-    description: undefined,
     orientation: "horizontal",
   },
 };
@@ -200,7 +197,6 @@ const meta: Meta<typeof TextInput> = {
   component: TextInput,
   argTypes: {
     label: { control: { type: "text" } },
-    description: { control: { type: "text" } },
     helperText: { control: { type: "text" } },
     inputIcon: {
       options: ["", ...ICON_NAMES_ARRAY],
@@ -442,20 +438,12 @@ export const OnlyCharacterCounter: StoryObj<typeof TextInput> = {
     ...Playground.args,
     characterCounter: true,
     value: "New value",
-    description: undefined,
     helperText: undefined,
     errorHelperText: undefined,
     successHelperText: undefined,
   },
 };
 
-export const CharacterCounterAndDescription: StoryObj<typeof TextInput> = {
-  args: {
-    ...OnlyCharacterCounter.args,
-    description: "Description",
-  },
-};
-
 export const CharacterCounterAndHelperText: StoryObj<typeof TextInput> = {
   args: {
     ...OnlyCharacterCounter.args,
@@ -477,14 +465,4 @@ export const CharacterCounterAndSuccessHelperText: StoryObj<typeof TextInput> =
       successHelperText: "Success helper text",
     },
   };
-
-export const CharacterCounterAndDescriptionAndHelperText: StoryObj<
-  typeof TextInput
-> = {
-  args: {
-    ...OnlyCharacterCounter.args,
-    description: "Description",
-    helperText: "Helper text",
-  },
-};
 ```

package/dist/packages/components/TimeField/TimeField.d.ts

@@ -1,7 +1,7 @@
 import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
 import { default as React } from 'react';
 import { Props as LabelProps } from '../Label/Label';
-export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
+export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Required id, used mainly to link the label to the field.
      */
@@ -76,7 +76,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     fullWidth?: boolean;
 };
-declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
+declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
      * Required id, used mainly to link the label to the field.
      */

package/dist/packages/components/TimeField/doc.md

@@ -23,7 +23,6 @@ const meta: Meta<typeof TimeField> = {
   argTypes: {
     label: { control: "text" },
     value: { control: false },
-    description: { control: "text" },
     helperText: { control: "text" },
     errorHelperText: { control: "text" },
     successHelperText: { control: "text" },

package/dist/packages/components/TimePicker/TimePicker.d.ts

@@ -6,7 +6,7 @@ export type TimePickerValue = {
     minutes?: string;
     seconds?: string;
 };
-export type Props = Omit<FormGroupWrapperProps, "children" | "description" | "className" | "style" | "characterCounter" | "htmlForId"> & {
+export type Props = Omit<FormGroupWrapperProps, "children" | "className" | "style" | "characterCounter" | "htmlForId"> & {
     /**
      * The controlled value: an object with optional `hours`, `minutes`, `seconds` keys, each as a 2-digit padded
      * string (e.g. `{ hours: "08", minutes: "34" }`). Use `null` for the initial empty state before any selection.
@@ -52,7 +52,7 @@ export type Props = Omit<FormGroupWrapperProps, "children" | "description" | "cl
      */
     "aria-label"?: string;
 };
-declare const TimePicker: React.ForwardRefExoticComponent<Omit<FormGroupWrapperProps, "className" | "style" | "children" | "description" | "htmlForId" | "characterCounter"> & {
+declare const TimePicker: React.ForwardRefExoticComponent<Omit<FormGroupWrapperProps, "className" | "style" | "children" | "htmlForId" | "characterCounter"> & {
     /**
      * The controlled value: an object with optional `hours`, `minutes`, `seconds` keys, each as a 2-digit padded
      * string (e.g. `{ hours: "08", minutes: "34" }`). Use `null` for the initial empty state before any selection.

package/dist/packages/components/Timeline/Timeline.d.ts

@@ -50,4 +50,4 @@ export type TimelineProps = {
      */
     style?: CSSProperties;
 };
-export default function Timeline({ emptyPlaceholder, lines, startDate, endDate, expandedGroups, onExpandedGroupsChange, shape, showGridLines, ...props }: TimelineProps): import("react").JSX.Element;
+export default function Timeline({ emptyPlaceholder, lines, startDate, endDate, expandedGroups, onExpandedGroupsChange, shape, showGridLines, ...props }: TimelineProps): import('react').JSX.Element;

package/dist/packages/components/Timeline/Timeline.styled.d.ts

@@ -1,24 +1,19 @@
-export declare const Root: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TimelineAndBlockContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LinesContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Root: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TimelineAndBlockContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const LinesContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
 /**
  * Overlays the plotting area only — the names column is excluded, so its width
  * matches the one every line positions its blocks against.
  */
-export declare const GridLines: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const GridLine: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GridLines: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const GridLine: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/packages/components/Timeline/components/BlockLineContainer/BlockLineContainer.d.ts

@@ -33,4 +33,4 @@ export interface Props {
      */
     indentLevel?: number;
 }
-export default function BlockLineContainer({ name, blocks, lineStartDate, lineEndDate, isGroupParent, isGroupExpanded, onNameClick, indentLevel, ...props }: Props): import("react").JSX.Element;
+export default function BlockLineContainer({ name, blocks, lineStartDate, lineEndDate, isGroupParent, isGroupExpanded, onNameClick, indentLevel, ...props }: Props): import('react').JSX.Element;

package/dist/packages/components/Timeline/components/BlockLineContainer/BlockLineContainer.styled.d.ts

@@ -1,31 +1,27 @@
-export declare const Root: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OneLineContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const GroupContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Root: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const OneLineContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const GroupContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
 /**
  * One visual row of an overlap group. Its blocks are absolutely positioned
  * inside it, so blocks that don't overlap can share a row.
  */
-export declare const LaneContainer: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Overlay: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const LineNow: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CustomHoverTooltip: import('@emotion/styled').StyledComponent<import('react-aria-components').TooltipProps & import('react').RefAttributes<HTMLDivElement> & {
-    theme?: import('@emotion/react').Theme;
-}, {}, {}>;
+export declare const LaneContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const Overlay: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const LineNow: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CustomHoverTooltip: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react-aria-components').TooltipProps & import('react').RefAttributes<HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | ((values: import('react-aria-components').TooltipRenderProps & {
+        defaultStyle: import('react').CSSProperties;
+    }) => import('react').CSSProperties | undefined) | undefined;
+}> & string & Omit<(props: import('react-aria-components').TooltipProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import('react').Component<any, {}, any>>;

package/dist/packages/components/Timeline/components/BlockLineContainer/components/ExpandButton/ExpandButton.d.ts

@@ -17,4 +17,4 @@ export interface Props {
      */
     lineEndDate: Block["endDate"];
 }
-export default function ExpandButton(props: Props): import("react").JSX.Element;
+export default function ExpandButton(props: Props): import('react').JSX.Element;

package/dist/packages/components/Timeline/components/BlockLineContainer/components/NameBlock/NameBlock.d.ts

@@ -9,4 +9,4 @@ export type Props = {
     /** Indentation level for sub-lines */
     indentLevel?: number;
 };
-export declare const NameBlock: ({ name, isGroupParent, isExpanded, onClick, indentLevel, }: Props) => import("react").JSX.Element;
+export declare const NameBlock: ({ name, isGroupParent, isExpanded, onClick, indentLevel, }: Props) => import('react').JSX.Element;

package/dist/packages/components/Timeline/components/GroupLineContainer/GroupLineContainer.d.ts

@@ -15,5 +15,5 @@ interface Props {
      */
     onExpandedChange?: (isExpanded: boolean) => void;
 }
-export default function GroupLineContainer({ name, subLines, lineStartDate, lineEndDate, groupHoverText, isExpanded: controlledIsExpanded, onExpandedChange, }: Props): import("react").JSX.Element;
+export default function GroupLineContainer({ name, subLines, lineStartDate, lineEndDate, groupHoverText, isExpanded: controlledIsExpanded, onExpandedChange, }: Props): import('react').JSX.Element;
 export {};

package/dist/packages/components/Timeline/components/GroupLineContainer/GroupLineContainer.styled.d.ts

@@ -1,4 +1,3 @@
-export declare const Root: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Root: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/packages/components/Timeline/components/TimelineRange/TimelineRange.d.ts

@@ -1,4 +1,4 @@
 import { TimelineProps } from '../../Timeline';
 export type Props = Pick<TimelineProps, "startDate" | "endDate">;
-declare const TimelineRange: ({ startDate, endDate }: Props) => import("react").JSX.Element;
+declare const TimelineRange: ({ startDate, endDate }: Props) => import('react').JSX.Element;
 export default TimelineRange;

package/dist/packages/components/Timeline/components/TimelineRange/TimelineRange.styled.d.ts

@@ -1,16 +1,12 @@
-export declare const TimelineContainerStyle: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Hour: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HourDot: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Day: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
-    as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TimelineContainerStyle: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const Hour: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const HourDot: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const Day: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/packages/components/Timeline/doc.md

@@ -312,9 +312,14 @@ export const HoursUnit: Story = {
       },
     ],
   },
-  play: async ({ mount }) => {
+  play: async ({ canvasElement, mount }) => {
     MockDate.set("2024-01-01T08:00:00.000Z");
     await mount();
+    const canvas = within(canvasElement);
+
+    // 08:00 falls inside the range: one past overlay and one "now" line per line.
+    expect(canvas.getAllByTestId("timeline-past-overlay")).toHaveLength(2);
+    expect(canvas.getAllByTestId("timeline-now-line")).toHaveLength(2);
   },
 };
 
@@ -1533,6 +1538,38 @@ export const GridLinesMonth: Story = {
     ).toBeLessThanOrEqual(1);
   },
 };
+
+/**
+ * On a past day the whole range is behind us: nothing marks a boundary, so
+ * neither the overlay nor the line is drawn.
+ */
+export const NowAfterRange: Story = {
+  args: HoursUnit.args,
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T13:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+
+    await expectNotPresent(() => canvas.queryByTestId("timeline-past-overlay"));
+    await expectNotPresent(() => canvas.queryByTestId("timeline-now-line"));
+  },
+};
+
+/**
+ * Same on a future day, where the clamped overlay used to collapse and the
+ * line used to stick to the left edge.
+ */
+export const NowBeforeRange: Story = {
+  args: HoursUnit.args,
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2023-12-28T13:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+
+    await expectNotPresent(() => canvas.queryByTestId("timeline-past-overlay"));
+    await expectNotPresent(() => canvas.queryByTestId("timeline-now-line"));
+  },
+};
 ```
 
 ## Developer notes

package/dist/packages/components/Toaster/Toaster.d.ts

@@ -21,4 +21,4 @@ export type Props = {
      */
     offset?: number;
 };
-export default function Toaster({ position, expand, visibleToasts, offset, }: Props): import("react").JSX.Element;
+export default function Toaster({ position, expand, visibleToasts, offset, }: Props): import('react').JSX.Element;

package/dist/packages/components/YearMonthPicker/YearMonthPicker.d.ts

@@ -13,7 +13,7 @@ export type YearMonthPickerValue = {
      */
     year?: string | null;
 };
-export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
+export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Should the picker show year, month or both.
      */
@@ -85,7 +85,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     tallDropdown?: boolean;
 };
-declare const YearMonthPicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
+declare const YearMonthPicker: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
      * Should the picker show year, month or both.
      */

package/dist/packages/components/YearMonthPicker/doc.md

@@ -30,7 +30,6 @@ const meta: Meta<typeof YearMonthPicker> = {
   argTypes: {
     label: { control: "text" },
     value: { control: false },
-    description: { control: "text" },
     helperText: { control: "text" },
     errorHelperText: { control: "text" },
     successHelperText: { control: "text" },

package/dist/packages/ds-design-tokens/index.d.ts

@@ -1,3 +1,2 @@
 import { tokens } from './src/tokens.style.js';
-import { fontSize, lineHeight } from './src/fontSize.style.js';
-export { tokens, fontSize, lineHeight };
+export { tokens };