@byline/ui 0.9.3 → 0.10.1

package/dist/widgets/modal/modal_module.css

@@ -0,0 +1,118 @@
+@layer byline-base, byline-utilities, byline-theme;
+
+@layer byline-components {
+  :is(.backdrop-BgKon2, .infonomic-modal-backdrop) {
+    background-color: #f5f5f559;
+    transition: opacity .2s;
+    position: fixed;
+    inset: 0;
+  }
+
+  .backdrop-BgKon2[data-starting-style], .backdrop-BgKon2[data-ending-style] {
+    opacity: 0;
+  }
+
+  .dark .backdrop-BgKon2 {
+    background-color: #00000080;
+  }
+
+  [data-theme="dark"] .backdrop-BgKon2 {
+    background-color: #00000080;
+  }
+
+  .dark .infonomic-modal-backdrop {
+    background-color: #00000080;
+  }
+
+  [data-theme="dark"] .infonomic-modal-backdrop {
+    background-color: #00000080;
+  }
+
+  :is(.modal-wrapper-wF5Mv1, .infonomic-modal-wrapper) {
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    transition: opacity .2s;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+
+  .modal-wrapper-wF5Mv1[data-starting-style], .modal-wrapper-wF5Mv1[data-ending-style] {
+    opacity: 0;
+  }
+
+  @media screen and (min-width: 40rem) {
+    :is(.modal-wrapper-wF5Mv1, .infonomic-modal-wrapper) {
+      justify-content: center;
+    }
+  }
+
+  :is(.modal-container-PPkPyj, .infonomic-modal-container) {
+    box-shadow: var(--shadow-md);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-panel);
+    border: 1px solid var(--border-color);
+    width: 100%;
+    min-height: 300px;
+    max-height: 88vh;
+    margin-left: var(--spacing-8);
+    margin-right: var(--spacing-8);
+    flex-direction: column;
+    display: flex;
+  }
+
+  @media screen and (min-width: 40rem) {
+    :is(.modal-container-PPkPyj, .infonomic-modal-container) {
+      width: auto;
+      min-height: auto;
+      max-height: calc(100vh - 24px);
+    }
+  }
+
+  :is(.modal-header-ewl_k2, .infonomic-modal-header) {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--gap-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-top: var(--spacing-16);
+    max-width: 100%;
+    display: flex;
+  }
+
+  .modal-header-ewl_k2 h2, .modal-header-ewl_k2 h3 {
+    margin: 0;
+  }
+
+  .infonomic-modal-header h2 {
+    margin: 0;
+  }
+
+  .infonomic-modal-header h3 {
+    margin: 0;
+  }
+
+  :is(.modal-content-eDnix2, .infonomic-modal-content) {
+    gap: var(--gap-3);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    padding-bottom: var(--spacing-12);
+    flex-direction: column;
+    flex: 1;
+    max-width: 100%;
+    display: flex;
+  }
+
+  :is(.modal-actions-FxnG8C, .infonomic-modal-actions) {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--gap-3);
+    padding-top: var(--spacing-8);
+    padding-bottom: var(--spacing-20);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-16);
+    display: flex;
+  }
+}
+

package/dist/widgets/modal/motionDomAnimation.js

@@ -0,0 +1,4 @@
+"use client";
+import { domAnimation } from "motion/react";
+const motionDomAnimation = domAnimation;
+export default motionDomAnimation;

package/dist/widgets/modal/motionDomMax.js

@@ -0,0 +1,4 @@
+"use client";
+import { domMax } from "motion/react";
+const motionDomMax = domMax;
+export default motionDomMax;

package/dist/widgets/search/index.js

@@ -0,0 +1 @@
+export * from "./search.js";

package/dist/widgets/search/search.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+import type { ClassName, Intent, Size, Variant } from '../../components/inputs/@types/input.js';
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    variant?: Variant;
+    inputSize?: Size;
+    inputClassName?: ClassName;
+    intent?: Intent;
+    className?: ClassName;
+    ariaLabelForSearch?: string;
+    ariaLabelForClear?: string;
+    onClear?: () => void;
+    onEnter?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    validatorFn?: (value: string) => {
+        valid: boolean;
+        value: any;
+    };
+    placeHolderText?: string;
+}
+export declare function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: SearchProps): React.JSX.Element;
+//# sourceMappingURL=search.d.ts.map

package/dist/widgets/search/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/widgets/search/search.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAA;AAE/F,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QAC/B,KAAK,EAAE,OAAO,CAAA;QACd,KAAK,EAAE,GAAG,CAAA;KACX,CAAA;IACD,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAgBD,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,SAAS,EACT,cAAc,EACd,MAAM,EACN,SAAS,EACT,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,eAA0B,EAC1B,kBAA6B,EAC7B,iBAA2B,EAC3B,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiIjC"}

package/dist/widgets/search/search.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconButton } from "../../components/button/index.js";
+import { Input } from "../../components/inputs/input.js";
+import { InputAdornment } from "../../components/inputs/input-adornment.js";
+import { CloseIcon, SearchIcon } from "../../icons/index.js";
+function fallbackSearchHandler(value) {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    if (value.length > 0) params.set('query', value);
+    else params.delete('query');
+    window.location.search = params.toString();
+}
+function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText = 'Search', ariaLabelForSearch = 'search', ariaLabelForClear = 'clear', ...rest }) {
+    const [search, setSearch] = useState(null);
+    const inputRef = useRef(null);
+    const handleClear = ()=>{
+        setSearch(null);
+        if (null != onClear) onClear();
+        else fallbackSearchHandler('');
+        if (inputRef?.current != null) inputRef.current.value = '';
+    };
+    const handleKeyDown = (event)=>{
+        if ('Enter' === event.key) {
+            if (null != search && search.length > 0) if (null != validatorFn) {
+                const result = validatorFn(search);
+                if (result.valid) if (null != onSearch) onSearch(search);
+                else fallbackSearchHandler(search);
+            } else if (null != onSearch) onSearch(search);
+            else fallbackSearchHandler(search);
+        }
+    };
+    const handleSearch = ()=>{
+        if (null != search && search.length > 0) if (null != validatorFn) {
+            const result = validatorFn(search);
+            if (result.valid) if (null != onSearch) onSearch(search);
+            else fallbackSearchHandler(search);
+        } else if (null != onSearch) onSearch(search);
+        else fallbackSearchHandler(search);
+    };
+    const handleChange = (event)=>{
+        setSearch(event.target.value);
+    };
+    useEffect(()=>{
+        const searchParams = new URLSearchParams(window.location.search);
+        const currentSearch = searchParams.get('query');
+        if (null != currentSearch && null == search) setSearch(currentSearch);
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: /*#__PURE__*/ jsx(Input, {
+            variant: variant,
+            intent: intent,
+            inputSize: inputSize,
+            ref: inputRef,
+            className: inputClassName,
+            onKeyDown: handleKeyDown,
+            onChange: handleChange,
+            onClick: (e)=>{
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            id: "search",
+            defaultValue: search ?? '',
+            name: "search",
+            placeHolder: placeHolderText,
+            disabled: false,
+            error: false,
+            startAdornment: /*#__PURE__*/ jsx(InputAdornment, {
+                position: "start",
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    role: "button",
+                    intent: "noeffect",
+                    variant: "text",
+                    ripple: false,
+                    "arial-label": ariaLabelForSearch,
+                    size: "xs",
+                    onClick: ()=>{
+                        handleSearch();
+                    },
+                    children: /*#__PURE__*/ jsx(SearchIcon, {
+                        width: "20px",
+                        height: "20px"
+                    })
+                })
+            }),
+            endAdornment: /*#__PURE__*/ jsx(InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/ jsx(IconButton, {
+                    role: "button",
+                    intent: "noeffect",
+                    variant: "text",
+                    "arial-label": ariaLabelForClear,
+                    size: "xs",
+                    onClick: ()=>{
+                        handleClear();
+                    },
+                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                        width: "16px",
+                        height: "16px"
+                    })
+                })
+            }),
+            ...rest
+        })
+    });
+}
+export { Search };

package/dist/widgets/timeline/timeline.d.ts

@@ -0,0 +1,60 @@
+import type React from 'react';
+export interface TimelineProps {
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+    children?: React.ReactNode;
+}
+export declare const Timeline: {
+    ({ id, className, children, ...rest }: TimelineProps): React.JSX.Element;
+    Root: ({ ref, children, className, ...props }: RootProps & {
+        ref?: React.RefObject<RootElement>;
+    }) => React.JSX.Element;
+    Item: ({ ref, children, className, ...props }: ItemProps & {
+        ref?: React.RefObject<ItemElement>;
+    }) => React.JSX.Element;
+    Icon: ({ ref, children, className, ...props }: IconProps & {
+        ref?: React.RefObject<IconElement>;
+    }) => React.JSX.Element;
+    Heading: ({ ref, children, className, ...props }: HeadingProps & {
+        ref?: React.RefObject<HeadingElement>;
+    }) => React.JSX.Element;
+    Date: ({ ref, children, className, ...props }: DateProps & {
+        ref?: React.RefObject<DateElement>;
+    }) => React.JSX.Element;
+    Content: ({ ref, children, className, ...props }: ContentProps & {
+        ref?: React.RefObject<ContentElement>;
+    }) => React.JSX.Element;
+};
+type RootElement = React.ComponentRef<'ol'>;
+type PrimitiveRootProps = React.ComponentPropsWithoutRef<'ol'>;
+interface RootProps extends PrimitiveRootProps {
+    className?: string;
+}
+type ItemElement = React.ComponentRef<'li'>;
+type PrimitiveItemProps = React.ComponentPropsWithoutRef<'li'>;
+interface ItemProps extends PrimitiveItemProps {
+    className?: string;
+}
+type IconElement = React.ComponentRef<'span'>;
+type PrimitiveIconProps = React.ComponentPropsWithoutRef<'span'>;
+interface IconProps extends PrimitiveIconProps {
+    className?: string;
+}
+type HeadingElement = React.ComponentRef<'h3'>;
+type PrimitiveHeadingProps = React.ComponentPropsWithoutRef<'h3'>;
+interface HeadingProps extends PrimitiveHeadingProps {
+    className?: string;
+}
+type DateElement = React.ComponentRef<'time'>;
+type PrimitiveDateProps = React.ComponentPropsWithoutRef<'time'>;
+interface DateProps extends PrimitiveDateProps {
+    className?: string;
+}
+type ContentElement = React.ComponentRef<'p'>;
+type PrimitiveContentProps = React.ComponentPropsWithoutRef<'div'>;
+interface ContentProps extends PrimitiveContentProps {
+    className?: string;
+}
+export {};
+//# sourceMappingURL=timeline.d.ts.map

package/dist/widgets/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/widgets/timeline/timeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,eAAO,MAAM,QAAQ;2CAKlB,aAAa,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;mDAmBjC,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;mDAoBE,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;mDAmBE,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;sDA0BE,YAAY,GAAG;QAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;mDAuBE,SAAS,GAAG;QACb,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;KACnC;sDAmBE,YAAY,GAAG;QAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;CApIA,CAAA;AAGD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAC3C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAC9D,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAC3C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAC9D,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;AAC7C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAChE,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwBD,KAAK,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;AAC9C,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAA;AACjE,UAAU,YAAa,SAAQ,qBAAqB;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqBD,KAAK,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;AAC7C,KAAK,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAA;AAChE,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiBD,KAAK,cAAc,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;AAC7C,KAAK,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAClE,UAAU,YAAa,SAAQ,qBAAqB;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/widgets/timeline/timeline.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import timeline_module from "./timeline.module.js";
+const Timeline = ({ id, className, children, ...rest })=>/*#__PURE__*/ jsx("div", {
+        id: id,
+        className: classnames(timeline_module.timeline, 'timeline', className),
+        ...rest,
+        children: children
+    });
+const Root = function({ ref, children, className, ...props }) {
+    const classes = classnames(timeline_module["timeline-root"], 'timeline-root', className);
+    return /*#__PURE__*/ jsx("ol", {
+        ref: ref,
+        ...props,
+        className: classes,
+        children: children
+    });
+};
+const Item = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx("li", {
+        ref: ref,
+        ...props,
+        className: classnames(timeline_module["timeline-item"], 'timeline-item', className),
+        children: children
+    });
+};
+const Icon = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        ...props,
+        className: classnames(timeline_module["timeline-icon"], 'time-line-icon', className),
+        children: /*#__PURE__*/ jsx("svg", {
+            "aria-hidden": "true",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "currentColor",
+            viewBox: "0 0 20 20",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+            })
+        })
+    });
+};
+const Heading = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx("h3", {
+        ref: ref,
+        ...props,
+        className: classnames(timeline_module["timeline-heading"], 'timeline-heading', className),
+        children: children
+    });
+};
+const DateItem = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx("time", {
+        ref: ref,
+        ...props,
+        className: classnames(timeline_module["timeline-date"], 'timeline-date', className),
+        children: children
+    });
+};
+const Content = function({ ref, children, className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        ...props,
+        className: classnames(timeline_module["timeline-content"], 'timeline-content', className),
+        children: children
+    });
+};
+Timeline.Root = Root;
+Timeline.Item = Item;
+Timeline.Icon = Icon;
+Timeline.Heading = Heading;
+Timeline.Date = DateItem;
+Timeline.Content = Content;
+export { Timeline };

package/dist/widgets/timeline/timeline.module.js

@@ -0,0 +1,17 @@
+import "./timeline_module.css";
+const timeline_module = {
+    timeline: "timeline-qJOU85",
+    "timeline-root": "timeline-root-kIek3q",
+    timelineRoot: "timeline-root-kIek3q",
+    "timeline-item": "timeline-item-VoOzOk",
+    timelineItem: "timeline-item-VoOzOk",
+    "timeline-icon": "timeline-icon-xO1p1F",
+    timelineIcon: "timeline-icon-xO1p1F",
+    "timeline-heading": "timeline-heading-bPWlJ4",
+    timelineHeading: "timeline-heading-bPWlJ4",
+    "timeline-date": "timeline-date-U7Pr_G",
+    timelineDate: "timeline-date-U7Pr_G",
+    "timeline-content": "timeline-content-rwFfPc",
+    timelineContent: "timeline-content-rwFfPc"
+};
+export default timeline_module;

package/dist/widgets/timeline/timeline_module.css

@@ -0,0 +1,83 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.timeline-qJOU85, .infonomic-timeline) {
+    margin-left: var(--spacing-8);
+  }
+
+  :is(.timeline-root-kIek3q, .infonomic-timeline-root) {
+    margin-left: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    border-left-width: var(--border-width-thin);
+    border-left-color: var(--border-color);
+    border-left-style: var(--border-style-solid);
+    list-style: none;
+    position: relative;
+  }
+
+  :is(.timeline-item-VoOzOk, .infonomic-timeline-item) {
+    margin: 0 0 var(--spacing-16) var(--spacing-20);
+  }
+
+  :is(.timeline-icon-xO1p1F, .infonomic-timeline-icon) {
+    color: #fff;
+    background-color: var(--primary-600);
+    border-width: 6px;
+    border-color: var(--gray-50);
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+    margin-top: -3px;
+    display: flex;
+    position: absolute;
+    left: -18px;
+  }
+
+  .timeline-icon-xO1p1F svg {
+    color: #fff;
+    width: 60%;
+    display: block;
+  }
+
+  .infonomic-timeline-icon svg {
+    color: #fff;
+    width: 60%;
+    display: block;
+  }
+
+  :is(.timeline-heading-bPWlJ4, .infonomic-timeline-heading) {
+    font-size: 1.5rem;
+    line-height: 1.2;
+    font-weight: var(--font-weight-semibold);
+    margin: 0;
+  }
+
+  :is(.timeline-date-U7Pr_G, .infonomic-timeline-date) {
+    margin-top: var(--spacing-8);
+    margin-bottom: var(--spacing-8);
+    font-size: .9em;
+    font-weight: var(--font-weight-medium);
+    color: var(--gray-600);
+    line-height: 0;
+    display: block;
+  }
+
+  :is(.timeline-content-rwFfPc, .infonomic-timeline-content) {
+    margin: 0;
+    margin-bottom: var(--spacing-16);
+    font-size: 1.125rem;
+    font-weight: var(--font-weight-normal);
+  }
+
+  :is(.timeline-content-rwFfPc, .infonomic-timeline-content) p {
+    margin: 0;
+    margin-bottom: var(--spacing-16);
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .infonomic-timeline-icon, :is(.dark, [data-theme="dark"]) .timeline-icon-xO1p1F) {
+    border-color: var(--canvas-600);
+  }
+}
+

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "0.9.3",
+  "version": "0.10.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -45,47 +45,58 @@
       "main": "./dist/react.js",
       "default": "./dist/react.js"
     },
-    "./admin/*": {
-      "types": "./dist/admin/*.d.ts",
-      "import": "./dist/admin/*.js"
+    "./react/admin": {
+      "types": "./dist/admin.d.ts",
+      "import": "./dist/admin.js",
+      "default": "./dist/admin.js"
     },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
+    "./react/fields": {
+      "types": "./dist/fields.d.ts",
+      "import": "./dist/fields.js",
+      "default": "./dist/fields.js"
     },
-    "./dnd/*": {
-      "types": "./dist/dnd/*.d.ts",
-      "import": "./dist/dnd/*.js"
+    "./react/forms": {
+      "types": "./dist/forms.d.ts",
+      "import": "./dist/forms.js",
+      "default": "./dist/forms.js"
     },
-    "./fields/*": {
-      "types": "./dist/fields/*.d.ts",
-      "import": "./dist/fields/*.js"
+    "./react/services": {
+      "types": "./dist/services.d.ts",
+      "import": "./dist/services.js",
+      "default": "./dist/services.js"
     },
-    "./forms/*": {
-      "types": "./dist/forms/*.d.ts",
-      "import": "./dist/forms/*.js"
+    "./reset.css": {
+      "import": "./dist/styles/reset.css",
+      "default": "./dist/styles/reset.css"
     },
-    "./services/*": {
-      "types": "./dist/services/*.d.ts",
-      "import": "./dist/services/*.js"
+    "./styles.css": {
+      "import": "./dist/styles/styles.css",
+      "default": "./dist/styles/styles.css"
+    },
+    "./typography.css": {
+      "import": "./dist/styles/typography.css",
+      "default": "./dist/styles/typography.css"
     }
   },
   "dependencies": {
+    "@base-ui/react": "^1.4.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@infonomic/uikit": "^6.7.1",
     "@tanstack/react-form-start": "^1.29.1",
     "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
     "lodash-es": "^4.18.1",
+    "motion": "^12.38.0",
     "npm-run-all": "^4.1.5",
+    "react-day-picker": "^9.14.0",
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.2",
     "zod-form-data": "^3.0.1",
-    "@byline/core": "0.9.3",
-    "@byline/client": "0.9.3",
-    "@byline/admin": "0.9.3"
+    "@byline/admin": "0.10.1",
+    "@byline/client": "0.10.1",
+    "@byline/core": "0.10.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -125,9 +136,11 @@
     "build": "run-s build:*",
     "build:clean": "rimraf dist build",
     "build:code": "rslib build",
+    "build:css": "lightningcss --bundle ./src/styles/reset.css ./src/styles/styles.css ./src/styles/typography.css --output-dir ./dist/styles",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf node_modules dist build types .turbo",
     "lint": "biome check --write --unsafe --diagnostic-level=error",
-    "skip:test": "vitest"
+    "skip:test": "vitest",
+    "sync:uikit": "./scripts/sync-from-uikit.sh"
   }
 }

package/src/.uikit-sync.json

@@ -0,0 +1,9 @@
+{
+  "upstream": "@infonomic/uikit",
+  "upstreamPath": "/Users/tony/Clients/Infonomic/Projects/uikit/packages/uikit",
+  "upstreamSha": "70d936a49b9b233dc718ccf1f29acb3daf3009f1",
+  "upstreamDirty": true,
+  "syncedAt": "2026-05-03T20:12:55Z",
+  "syncedDirs": ["components", "icons", "hooks", "lib", "loaders", "styles", "utils", "widgets"],
+  "syncedFiles": ["uikit.ts"]
+}

package/src/admin/components/admin-account/change-password.tsx

@@ -30,11 +30,11 @@ import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AccountResponse } from '@byline/admin/admin-account'
 import { passwordSchema } from '@byline/core/validation'
-import { Alert, Button, InputPassword, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, InputPassword, LoaderEllipsis } from '../../../uikit.js'
 import styles from './change-password.module.css'
 
 const changePasswordFormSchema = z

package/src/admin/components/admin-account/container.tsx

@@ -28,10 +28,10 @@ import type React from 'react'
 import { useState } from 'react'
 
 import type { AccountResponse } from '@byline/admin/admin-account'
-import { Button, CloseIcon, Drawer, EditIcon, IconButton } from '@infonomic/uikit/react'
 import cx from 'classnames'
 
 import { LocalDateTime } from '../../../fields/local-date-time.js'
+import { Button, CloseIcon, Drawer, EditIcon, IconButton } from '../../../uikit.js'
 import { ChangeAccountPassword } from './change-password.js'
 import styles from './container.module.css'
 import { UpdateAccount } from './update.js'

package/src/admin/components/admin-account/update.tsx

@@ -26,11 +26,11 @@ import { useState } from 'react'
 import { revalidateLogic, useForm } from '@tanstack/react-form-start'
 
 import type { AccountResponse } from '@byline/admin/admin-account'
-import { Alert, Button, Input, LoaderEllipsis } from '@infonomic/uikit/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import { Alert, Button, Input, LoaderEllipsis } from '../../../uikit.js'
 import styles from './update.module.css'
 
 const updateAccountSchema = z.object({