@navikt/ds-react 5.6.0-beta.0 → 5.6.0

package/esm/date/datepicker/parts/DropdownCaption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownCaption.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/DropdownCaption.tsx"],"names":[],"mappings":"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"}

package/esm/date/datepicker/parts/HeadRow.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Locale } from "date-fns";
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/HeadRow
+ */
+export declare function HeadRow(): JSX.Element;
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export declare function getWeekdays(locale?: Locale): Date[];

package/esm/date/datepicker/parts/HeadRow.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { addDays, startOfWeek } from "date-fns";
+import { useDayPicker } from "react-day-picker";
+import { Hide } from "../../../layout/responsive";
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/HeadRow
+ */
+export function HeadRow() {
+    const { classNames, styles, showWeekNumber, locale, formatters: { formatWeekdayName }, labels: { labelWeekday }, } = useDayPicker();
+    const weekdays = getWeekdays(locale);
+    return (React.createElement("tr", { style: styles.head_row, className: classNames.head_row },
+        showWeekNumber && (React.createElement(Hide, { below: "sm", asChild: true },
+            React.createElement("td", { style: styles.head_cell, className: classNames.head_cell }))),
+        weekdays.map((weekday, i) => (React.createElement("th", { key: i, scope: "col", className: classNames.head_cell, style: styles.head_cell, "aria-label": labelWeekday(weekday, { locale }) }, formatWeekdayName(weekday, { locale }))))));
+}
+/**
+ * Generate a series of 7 days, starting from the week, to use for formatting
+ * the weekday names (Monday, Tuesday, etc.).
+ */
+export function getWeekdays(locale) {
+    const start = startOfWeek(new Date(), { locale, weekStartsOn: 1 });
+    const days = [];
+    for (let i = 0; i < 7; i++) {
+        const day = addDays(start, i);
+        days.push(day);
+    }
+    return days;
+}
+//# sourceMappingURL=HeadRow.js.map

package/esm/date/datepicker/parts/HeadRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadRow.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/HeadRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAElD;;GAEG;AACH,MAAM,UAAU,OAAO;IACrB,MAAM,EACJ,UAAU,EACV,MAAM,EACN,cAAc,EACd,MAAM,EACN,UAAU,EAAE,EAAE,iBAAiB,EAAE,EACjC,MAAM,EAAE,EAAE,YAAY,EAAE,GACzB,GAAG,YAAY,EAAE,CAAC;IAEnB,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,OAAO,CACL,4BAAI,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ;QACvD,cAAc,IAAI,CACjB,oBAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,OAAO;YACtB,4BAAI,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,GAAO,CAC9D,CACR;QACA,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,4BACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,KAAK,EAAE,MAAM,CAAC,SAAS,gBACX,YAAY,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,IAE5C,iBAAiB,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,CACpC,CACN,CAAC,CACC,CACN,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,MAAe;IACzC,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;IAEnE,MAAM,IAAI,GAAW,EAAE,CAAC;IACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;QAC1B,MAAM,GAAG,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAChB;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/esm/date/datepicker/parts/Row.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * The props for the {@link Row} component.
+ */
+export interface RowProps {
+    /** The month where the row is displayed. */
+    displayMonth: Date;
+    /** The number of the week to render. */
+    weekNumber: number;
+    /** The days contained in the week. */
+    dates: Date[];
+}
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Row
+ */
+declare function Row(props: RowProps): JSX.Element;
+export default Row;

package/esm/date/datepicker/parts/Row.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { getUnixTime } from "date-fns";
+import { useDayPicker, Day } from "react-day-picker";
+import WeekNumber from "./WeekNumber";
+import { Hide } from "../../../layout/responsive";
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Row
+ */
+function Row(props) {
+    const { styles, classNames, showWeekNumber } = useDayPicker();
+    return (React.createElement("tr", { className: classNames.row, style: styles.row },
+        showWeekNumber && (React.createElement(Hide, { below: "sm", asChild: true },
+            React.createElement("td", { className: classNames.cell, style: styles.cell },
+                React.createElement(WeekNumber, { number: props.weekNumber, dates: props.dates })))),
+        props.dates.map((date) => (React.createElement("td", { className: classNames.cell, style: styles.cell, key: getUnixTime(date) },
+            React.createElement(Day, { displayMonth: props.displayMonth, date: date }))))));
+}
+export default Row;
+//# sourceMappingURL=Row.js.map

package/esm/date/datepicker/parts/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAclD;;GAEG;AACH,SAAS,GAAG,CAAC,KAAe;IAC1B,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,YAAY,EAAE,CAAC;IAE9D,OAAO,CACL,4BAAI,SAAS,EAAE,UAAU,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG;QAC7C,cAAc,IAAI,CACjB,oBAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,OAAO;YACtB,4BAAI,SAAS,EAAE,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI;gBAChD,oBAAC,UAAU,IAAC,MAAM,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CACzD,CACA,CACR;QACA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,4BACE,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,GAAG,EAAE,WAAW,CAAC,IAAI,CAAC;YAEtB,oBAAC,GAAG,IAAC,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,GAAI,CAClD,CACN,CAAC,CACC,CACN,CAAC;AACJ,CAAC;AAED,eAAe,GAAG,CAAC"}

package/esm/date/datepicker/parts/TableHead.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Head
+ */
+declare function TableHead(): JSX.Element;
+export default TableHead;

package/esm/date/datepicker/{TableHead.js → parts/TableHead.js}

@@ -1,11 +1,14 @@
 import React from "react";
 import { HeadRow, useDayPicker } from "react-day-picker";
-/** Render the table head. */
-export function TableHead() {
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/Head
+ */
+function TableHead() {
     var _a;
     const { classNames, styles, components } = useDayPicker();
     const HeadRowComponent = (_a = components === null || components === void 0 ? void 0 : components.HeadRow) !== null && _a !== void 0 ? _a : HeadRow;
     return (React.createElement("thead", { style: styles.head, className: classNames.head, "aria-hidden": true },
         React.createElement(HeadRowComponent, null)));
 }
+export default TableHead;
 //# sourceMappingURL=TableHead.js.map

package/esm/date/datepicker/parts/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,SAAS,SAAS;;IAChB,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;IAC1D,MAAM,gBAAgB,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,mCAAI,OAAO,CAAC;IACxD,OAAO,CACL,+BAAO,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI;QACnD,oBAAC,gBAAgB,OAAG,CACd,CACT,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}

package/esm/date/datepicker/parts/WeekNumber.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface WeekNumberProps {
+    /** The number of the week. */
+    number: number;
+    /** The dates in the week. */
+    dates: Date[];
+    headerVersion?: boolean;
+}
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
+ */
+declare function WeekNumber(props: WeekNumberProps): JSX.Element;
+export default WeekNumber;

package/esm/date/datepicker/parts/WeekNumber.js

@@ -0,0 +1,31 @@
+/* https://github.com/gpbl/react-day-picker/blob/7f78cd5/src/components/WeekNumber/WeekNumber.tsx#L21 */
+import React from "react";
+import { Button, useDayPicker } from "react-day-picker";
+import { labelWeekNumber, labelWeekNumberButton } from "../../utils/labels";
+/**
+ * https://github.com/gpbl/react-day-picker/tree/main/src/components/WeekNumber
+ */
+function WeekNumber(props) {
+    const { number: weekNumber, dates } = props;
+    const { onWeekNumberClick, styles, classNames, locale: { code }, } = useDayPicker();
+    const weekLabel = labelWeekNumber({
+        week: Number(weekNumber),
+        localeCode: code,
+    });
+    if (!onWeekNumberClick) {
+        return (React.createElement("span", { className: classNames.weeknumber, style: styles.weeknumber, "aria-label": weekLabel }, weekNumber));
+    }
+    const label = labelWeekNumberButton({
+        week: Number(weekNumber),
+        localeCode: code,
+    });
+    const handleClick = function (e) {
+        onWeekNumberClick(weekNumber, dates, e);
+    };
+    if (props === null || props === void 0 ? void 0 : props.headerVersion) {
+        return (React.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, weekNumber));
+    }
+    return (React.createElement(Button, { name: "week-number", "aria-label": label, className: classNames.weeknumber, style: styles.weeknumber, onClick: handleClick }, weekNumber));
+}
+export default WeekNumber;
+//# sourceMappingURL=WeekNumber.js.map

package/esm/date/datepicker/parts/WeekNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekNumber.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/WeekNumber.tsx"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAU5E;;GAEG;AACH,SAAS,UAAU,CAAC,KAAsB;IACxC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC5C,MAAM,EACJ,iBAAiB,EACjB,MAAM,EACN,UAAU,EACV,MAAM,EAAE,EAAE,IAAI,EAAE,GACjB,GAAG,YAAY,EAAE,CAAC;IAEnB,MAAM,SAAS,GAAG,eAAe,CAAC;QAChC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC;QACxB,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CACL,8BACE,SAAS,EAAE,UAAU,CAAC,UAAU,EAChC,KAAK,EAAE,MAAM,CAAC,UAAU,gBACZ,SAAS,IAEpB,UAAU,CACN,CACR,CAAC;KACH;IAED,MAAM,KAAK,GAAG,qBAAqB,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC;QACxB,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,MAAM,WAAW,GAA4B,UAAU,CAAC;QACtD,iBAAiB,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAC1C,CAAC,CAAC;IAEF,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,EAAE;QACxB,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,EAAC,aAAa,gBACN,KAAK,EACjB,SAAS,EAAE,UAAU,CAAC,UAAU,EAChC,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,OAAO,EAAE,WAAW,IAEnB,UAAU,CACJ,CACV,CAAC;KACH;IAED,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,EAAC,aAAa,gBACN,KAAK,EACjB,SAAS,EAAE,UAAU,CAAC,UAAU,EAChC,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,OAAO,EAAE,WAAW,IAEnB,UAAU,CACJ,CACV,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC"}

package/esm/date/datepicker/parts/WeekRow.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const WeekRow: ({ displayMonth }: {
+    displayMonth: Date;
+}) => React.JSX.Element | null;
+export default WeekRow;

package/esm/date/datepicker/parts/WeekRow.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useDayPicker } from "react-day-picker";
+import { Show } from "../../../layout/responsive";
+import { Detail } from "../../../typography";
+import { getMonthWeeks } from "../../utils/get-month-weeks";
+import { labelWeek } from "../../utils/labels";
+import WeekNumber from "./WeekNumber";
+import { useId } from "../../../util";
+const WeekRow = ({ displayMonth }) => {
+    const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();
+    const labelId = useId();
+    if (!onWeekNumberClick) {
+        return null;
+    }
+    const weeks = getMonthWeeks(displayMonth, {
+        useFixedWeeks: Boolean(fixedWeeks),
+        locale,
+    });
+    return (React.createElement(Show, { below: "sm", asChild: true },
+        React.createElement("table", { className: "rdp-table", role: "grid" },
+            React.createElement("tbody", { className: "rdp-tbody" },
+                React.createElement("tr", { className: "rdp-row navds-date__week-row" },
+                    React.createElement(Detail, { as: "th", weight: "semibold", className: "rdp-cell navds-date__week-cell" },
+                        React.createElement("span", { className: "navds-date__week-wrapper", id: labelId }, labelWeek(locale === null || locale === void 0 ? void 0 : locale.code))),
+                    weeks.map((week) => (React.createElement("td", { key: week.weekNumber, className: "rdp-cell navds-date__week-cell" },
+                        React.createElement("span", { className: "navds-date__week-wrapper" },
+                            React.createElement(WeekNumber, { number: week.weekNumber, dates: week.dates, headerVersion: true }))))))))));
+};
+export default WeekRow;
+//# sourceMappingURL=WeekRow.js.map

package/esm/date/datepicker/parts/WeekRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekRow.js","sourceRoot":"","sources":["../../../../src/date/datepicker/parts/WeekRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,MAAM,OAAO,GAAG,CAAC,EAAE,YAAY,EAA0B,EAAE,EAAE;IAC3D,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,YAAY,EAAE,CAAC;IAEjE,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,IAAI,CAAC;KACb;IAED,MAAM,KAAK,GAAG,aAAa,CAAC,YAAY,EAAE;QACxC,aAAa,EAAE,OAAO,CAAC,UAAU,CAAC;QAClC,MAAM;KACP,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,OAAO;QACtB,+BAAO,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;YACtC,+BAAO,SAAS,EAAC,WAAW;gBAC1B,4BAAI,SAAS,EAAC,8BAA8B;oBAC1C,oBAAC,MAAM,IACL,EAAE,EAAC,IAAI,EACP,MAAM,EAAC,UAAU,EACjB,SAAS,EAAC,gCAAgC;wBAE1C,8BAAM,SAAS,EAAC,0BAA0B,EAAC,EAAE,EAAE,OAAO,IACnD,SAAS,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CACnB,CACA;oBAER,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,4BACE,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,SAAS,EAAC,gCAAgC;wBAE1C,8BAAM,SAAS,EAAC,0BAA0B;4BACxC,oBAAC,UAAU,IACT,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,SACb,CACG,CACJ,CACN,CAAC,CACC,CACC,CACF,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/esm/date/utils/get-month-weeks.d.ts

@@ -0,0 +1,16 @@
+import { Locale } from "date-fns";
+export type MonthWeek = {
+    /** The week number from the start of the year. */
+    weekNumber: number;
+    /** The dates in the week. */
+    dates: Date[];
+};
+export declare function getMonthWeeks(month: Date, options: {
+    locale: Locale;
+    useFixedWeeks?: boolean;
+}): MonthWeek[];
+/** Return the weeks between two dates.  */
+export declare function daysToMonthWeeks(fromDate: Date, toDate: Date, options?: {
+    locale?: Locale;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}): MonthWeek[];

package/esm/date/utils/get-month-weeks.js

@@ -0,0 +1,42 @@
+import { addDays, addWeeks, differenceInCalendarDays, endOfMonth, endOfWeek, getWeek, getWeeksInMonth, startOfMonth, startOfWeek, } from "date-fns";
+export function getMonthWeeks(month, options) {
+    const _options = Object.assign(Object.assign({}, options), { weekStartsOn: 1 });
+    const weeksInMonth = daysToMonthWeeks(startOfMonth(month), endOfMonth(month), _options);
+    if (_options === null || _options === void 0 ? void 0 : _options.useFixedWeeks) {
+        // Add extra weeks to the month, up to 6 weeks
+        const nrOfMonthWeeks = getWeeksInMonth(month, _options);
+        if (nrOfMonthWeeks < 6) {
+            const lastWeek = weeksInMonth[weeksInMonth.length - 1];
+            const lastDate = lastWeek.dates[lastWeek.dates.length - 1];
+            const toDate = addWeeks(lastDate, 6 - nrOfMonthWeeks);
+            const extraWeeks = daysToMonthWeeks(addWeeks(lastDate, 1), toDate, _options);
+            weeksInMonth.push(...extraWeeks);
+        }
+    }
+    return weeksInMonth;
+}
+/** Return the weeks between two dates.  */
+export function daysToMonthWeeks(fromDate, toDate, options) {
+    const toWeek = endOfWeek(toDate, options);
+    const fromWeek = startOfWeek(fromDate, options);
+    const nOfDays = differenceInCalendarDays(toWeek, fromWeek);
+    const days = [];
+    for (let i = 0; i <= nOfDays; i++) {
+        days.push(addDays(fromWeek, i));
+    }
+    const weeksInMonth = days.reduce((result, date) => {
+        const weekNumber = getWeek(date, options);
+        const existingWeek = result.find((value) => value.weekNumber === weekNumber);
+        if (existingWeek) {
+            existingWeek.dates.push(date);
+            return result;
+        }
+        result.push({
+            weekNumber,
+            dates: [date],
+        });
+        return result;
+    }, []);
+    return weeksInMonth;
+}
+//# sourceMappingURL=get-month-weeks.js.map

package/esm/date/utils/get-month-weeks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-month-weeks.js","sourceRoot":"","sources":["../../../src/date/utils/get-month-weeks.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,QAAQ,EACR,wBAAwB,EACxB,UAAU,EACV,SAAS,EACT,OAAO,EACP,eAAe,EAEf,YAAY,EACZ,WAAW,GACZ,MAAM,UAAU,CAAC;AASlB,MAAM,UAAU,aAAa,CAC3B,KAAW,EACX,OAGC;IAED,MAAM,QAAQ,mCACT,OAAO,KACV,YAAY,EAAE,CAAU,GACzB,CAAC;IACF,MAAM,YAAY,GAAgB,gBAAgB,CAChD,YAAY,CAAC,KAAK,CAAC,EACnB,UAAU,CAAC,KAAK,CAAC,EACjB,QAAQ,CACT,CAAC;IAEF,IAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,EAAE;QAC3B,8CAA8C;QAC9C,MAAM,cAAc,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACxD,IAAI,cAAc,GAAG,CAAC,EAAE;YACtB,MAAM,QAAQ,GAAG,YAAY,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YACvD,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC3D,MAAM,MAAM,GAAG,QAAQ,CAAC,QAAQ,EAAE,CAAC,GAAG,cAAc,CAAC,CAAC;YACtD,MAAM,UAAU,GAAG,gBAAgB,CACjC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EACrB,MAAM,EACN,QAAQ,CACT,CAAC;YACF,YAAY,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC;SAClC;KACF;IACD,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,2CAA2C;AAC3C,MAAM,UAAU,gBAAgB,CAC9B,QAAc,EACd,MAAY,EACZ,OAGC;IAED,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,wBAAwB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAW,EAAE,CAAC;IAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;KACjC;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAmB,EAAE,IAAI,EAAE,EAAE;QAC7D,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1C,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAC9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,UAAU,CAC3C,CAAC;QACF,IAAI,YAAY,EAAE;YAChB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC9B,OAAO,MAAM,CAAC;SACf;QACD,MAAM,CAAC,IAAI,CAAC;YACV,UAAU;YACV,KAAK,EAAE,CAAC,IAAI,CAAC;SACd,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,YAAY,CAAC;AACtB,CAAC"}

package/esm/date/utils/labels.d.ts

@@ -4,3 +4,12 @@ export declare const labelMonthDropdown: (locale: Locale) => "Måned" | "Månad"
 export declare const labelNextYear: (localeCode: string | undefined) => "Gå til neste måned" | "Gå til neste år" | "Go to next year";
 export declare const labelPrevYear: (localeCode: string | undefined) => string;
 export declare const labels: Partial<Labels>;
+export declare const labelWeekNumber: ({ localeCode, week, }: {
+    localeCode?: string | undefined;
+    week: number;
+}) => string;
+export declare const labelWeekNumberButton: ({ localeCode, week, }: {
+    localeCode?: string | undefined;
+    week: number;
+}) => string;
+export declare const labelWeek: (localeCode?: string) => string;

package/esm/date/utils/labels.js

@@ -76,4 +76,40 @@ export const labels = {
     labelNext,
     labelPrevious,
 };
+export const labelWeekNumber = ({ localeCode, week, }) => {
+    switch (localeCode) {
+        case "nb":
+            return `Uke ${week}`;
+        case "nn":
+            return `Veke ${week}`;
+        case "en-GB":
+            return `Week ${week}`;
+        default:
+            return `Uke ${week}`;
+    }
+};
+export const labelWeekNumberButton = ({ localeCode, week, }) => {
+    switch (localeCode) {
+        case "nb":
+            return `Velg uke ${week}`;
+        case "nn":
+            return `Vel veke ${week}`;
+        case "en-GB":
+            return `Pick week ${week}`;
+        default:
+            return `Velg uke ${week}`;
+    }
+};
+export const labelWeek = (localeCode) => {
+    switch (localeCode) {
+        case "nb":
+            return `Uke:`;
+        case "nn":
+            return `Veke:`;
+        case "en-GB":
+            return `Week:`;
+        default:
+            return `Uke:`;
+    }
+};
 //# sourceMappingURL=labels.js.map

package/esm/date/utils/labels.js.map

@@ -1 +1 @@
-{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/date/utils/labels.ts"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;;IAClD,QAAQ,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,0CAAE,IAAI,EAAE;QAC7B,KAAK,IAAI;YACP,OAAO,oBAAoB,CAAC;QAC9B,KAAK,IAAI;YACP,OAAO,oBAAoB,CAAC;QAC9B,KAAK,IAAI;YACP,OAAO,kBAAkB,CAAC;QAC5B;YACE,OAAO,oBAAoB,CAAC;KAC/B;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAmB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;;IACtD,QAAQ,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,0CAAE,IAAI,EAAE;QAC7B,KAAK,IAAI;YACP,OAAO,sBAAsB,CAAC;QAChC,KAAK,IAAI;YACP,OAAO,oBAAoB,CAAC;QAC9B,KAAK,IAAI;YACP,OAAO,sBAAsB,CAAC;QAChC;YACE,OAAO,sBAAsB,CAAC;KACjC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;IAClD,QAAQ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE;QACpB,KAAK,IAAI;YACP,OAAO,IAAI,CAAC;QACd,KAAK,IAAI;YACP,OAAO,IAAI,CAAC;QACd,KAAK,IAAI;YACP,OAAO,MAAM,CAAC;QAChB;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;IACnD,QAAQ,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE;QACpB,KAAK,IAAI;YACP,OAAO,OAAO,CAAC;QACjB,KAAK,IAAI;YACP,OAAO,OAAO,CAAC;QACjB,KAAK,IAAI;YACP,OAAO,OAAO,CAAC;QACjB;YACE,OAAO,OAAO,CAAC;KAClB;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAA8B,EAAE,EAAE;IAC9D,QAAQ,UAAU,EAAE;QAClB,KAAK,IAAI;YACP,OAAO,iBAAiB,CAAC;QAC3B,KAAK,IAAI;YACP,OAAO,iBAAiB,CAAC;QAC3B,KAAK,OAAO;YACV,OAAO,iBAAiB,CAAC;QAC3B;YACE,OAAO,oBAAoB,CAAC;KAC/B;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAA8B,EAAU,EAAE;IACtE,QAAQ,UAAU,EAAE;QAClB,KAAK,IAAI;YACP,OAAO,mBAAmB,CAAC;QAC7B,KAAK,IAAI;YACP,OAAO,iBAAiB,CAAC;QAC3B,KAAK,OAAO;YACV,OAAO,iBAAiB,CAAC;QAC3B;YACE,OAAO,iBAAiB,CAAC;KAC5B;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAoB;IACrC,SAAS;IACT,aAAa;CACd,CAAC"}
+{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../src/date/utils/labels.ts"],"names":[],"mappings":"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"}

package/esm/form/Fieldset/useFieldset.d.ts

@@ -10,6 +10,6 @@ export declare const useFieldset: (props: any) => {
     hasError: boolean;
     errorId: string;
     inputDescriptionId: string;
-    size: "small" | "medium";
+    size: "medium" | "small";
     readOnly?: boolean | undefined;
 };

package/esm/form/checkbox/useCheckbox.d.ts

@@ -19,6 +19,6 @@ declare const useCheckbox: (props: CheckboxProps) => {
     hasError: boolean;
     errorId: string;
     inputDescriptionId: string;
-    size: "small" | "medium";
+    size: "medium" | "small";
 };
 export default useCheckbox;

package/esm/form/combobox/Combobox.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { ComboboxProps } from "./types";
-export declare const Combobox: React.ForwardRefExoticComponent<Omit<ComboboxProps, "onChange" | "options" | "value" | "size" | "onClear"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Combobox: React.ForwardRefExoticComponent<Omit<ComboboxProps, "size" | "value" | "onChange" | "onClear" | "options"> & React.RefAttributes<HTMLInputElement>>;
 export default Combobox;

package/esm/form/radio/useRadio.d.ts

@@ -21,5 +21,5 @@ export declare const useRadio: (props: RadioProps) => {
     hasError: boolean;
     errorId: string;
     inputDescriptionId: string;
-    size: "small" | "medium";
+    size: "medium" | "small";
 };

package/esm/index.d.ts

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/bleed";
 export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";

package/esm/index.js

@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/bleed";
 export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC"}

package/esm/layout/bleed/Bleed.d.ts

@@ -1,8 +1,47 @@
-import React, { HTMLAttributes } from "react";
-import { OverridableComponent } from "../../util";
-export interface BleedProps extends HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    preservePadding?: boolean;
+import React from "react";
+import { ResponsiveProp, SpacingScale } from "../utilities/css";
+export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;
+export type BleedSpacingBlock = "0" | "px" | SpacingScale;
+export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** **Negative** horizontal margin around children.
+     *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+     * @example
+     * marginInline='4'
+     * marginInline='4 5'
+     * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+     */
+    marginInline?: ResponsiveProp<BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`>;
+    /** **Negative** vertical margin around children.
+     *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+     * @example
+     * marginBlock='4'
+     * marginBlock='4 5'
+     * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+     */
+    marginBlock?: ResponsiveProp<BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`>;
+    /**
+     * When true, set the padding to mirror the margin.
+     * This maintains the apparent width of the element prior to adding Bleed.
+     * When this is used with `asChild`, it will overwrite the padding of the child.
+     */
+    reflectivePadding?: boolean;
+    /**
+     * When true, the Bleed will render as its child. This merges classes, styles and event handlers.
+     */
+    asChild?: boolean;
 }
-export declare const Bleed: OverridableComponent<BleedProps, HTMLDivElement>;
-export default Bleed;
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/Bleed)
+ * @see 🏷️ {@link BleedProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <Bleed marginInline="4" marginBlock="4">
+ *     <BodyLong>Some content</BodyLong>
+ *   </Bleed>
+ * </Box>
+ */
+export declare const Bleed: React.ForwardRefExoticComponent<BleedProps & React.RefAttributes<HTMLDivElement>>;

package/esm/layout/bleed/Bleed.js

@@ -11,11 +11,31 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { getResponsiveProps, } from "../utilities/css";
+import { Slot } from "../../util/Slot";
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/Bleed)
+ * @see 🏷️ {@link BleedProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <Bleed marginInline="4" marginBlock="4">
+ *     <BodyLong>Some content</BodyLong>
+ *   </Bleed>
+ * </Box>
+ */
 export const Bleed = forwardRef((_a, ref) => {
-    var { as: Component = "div", preservePadding = false, className } = _a, rest = __rest(_a, ["as", "preservePadding", "className"]);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-bleed", className, {
-            "navds-bleed--preserve": preservePadding,
-        }) })));
+    var { className, marginInline, marginBlock, reflectivePadding, style: _style, asChild } = _a, rest = __rest(_a, ["className", "marginInline", "marginBlock", "reflectivePadding", "style", "asChild"]);
+    let style = Object.assign(Object.assign(Object.assign({}, _style), getResponsiveProps("bleed", "margin-inline", "spacing", marginInline, true, ["0", "full", "px"])), getResponsiveProps("bleed", "margin-block", "spacing", marginBlock, true, ["0", "px"]));
+    if (reflectivePadding) {
+        style = Object.assign(Object.assign(Object.assign({}, style), getResponsiveProps("bleed", "padding-inline", "spacing", marginInline, false, ["0", "full", "px"])), getResponsiveProps("bleed", "padding-block", "spacing", marginBlock, false, ["0", "px"]));
+    }
+    const Comp = asChild ? Slot : "div";
+    return (React.createElement(Comp, Object.assign({}, rest, { className: cl("navds-bleed", className, {
+            "navds-bleed--padding": reflectivePadding,
+        }), ref: ref, style: style })));
 });
-export default Bleed;
 //# sourceMappingURL=Bleed.js.map

package/esm/layout/bleed/Bleed.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAQ1D,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAAsE,EACtE,GAAG,EACH,EAAE;QAFF,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,SAAS,OAAW,EAAN,IAAI,cAApE,sCAAsE,CAAF;IAGpE,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,uBAAuB,EAAE,eAAe;SACzC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Bleed.js","sourceRoot":"","sources":["../../../src/layout/bleed/Bleed.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAuCvC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,IAAI,KAAK,iDACJ,MAAM,GACN,kBAAkB,CACnB,OAAO,EACP,eAAe,EACf,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GAEE,kBAAkB,CACnB,OAAO,EACP,cAAc,EACd,SAAS,EACT,WAAW,EACX,IAAI,EACJ,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;IAEF,IAAI,iBAAiB,EAAE;QACrB,KAAK,iDACA,KAAK,GACL,kBAAkB,CACnB,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,CACpB,GACE,kBAAkB,CACnB,OAAO,EACP,eAAe,EACf,SAAS,EACT,WAAW,EACX,KAAK,EACL,CAAC,GAAG,EAAE,IAAI,CAAC,CACZ,CACF,CAAC;KACH;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,sBAAsB,EAAE,iBAAiB;SAC1C,CAAC,EACF,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/esm/layout/bleed/index.d.ts

@@ -1 +1 @@
-export { default as Bleed, type BleedProps } from "./Bleed";
+export { Bleed, type BleedProps } from "./Bleed";

package/esm/layout/bleed/index.js

@@ -1,2 +1,2 @@
-export { default as Bleed } from "./Bleed";
+export { Bleed } from "./Bleed";
 //# sourceMappingURL=index.js.map

package/esm/layout/bleed/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/bleed/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/bleed/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC"}

package/esm/layout/box/Box.js

@@ -50,7 +50,7 @@ export const Box = forwardRef((_a, ref) => {
                 .split(" ")
                 .map((x) => `${x}px`)
                 .join(" ")
-            : undefined }), getResponsiveProps("box", "border-radius", "border-radius", borderRadius, ["0"])), getResponsiveProps("box", "padding", "spacing", padding)), getResponsiveProps("box", "padding-inline", "spacing", paddingInline)), getResponsiveProps("box", "padding-block", "spacing", paddingBlock));
+            : undefined }), getResponsiveProps("box", "border-radius", "border-radius", borderRadius, false, ["0"])), getResponsiveProps("box", "padding", "spacing", padding)), getResponsiveProps("box", "padding-inline", "spacing", paddingInline)), getResponsiveProps("box", "padding-block", "spacing", paddingBlock));
     return (React.createElement(Component, Object.assign({}, rest, { className: cl("navds-box", className), ref: ref, style: style })));
 });
 //# sourceMappingURL=Box.js.map

package/esm/layout/box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAIL,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AA0D1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,GAAG,GAAmD,UAAU,CAC3E,CACE,EAaC,EACD,GAAG,EACH,EAAE;QAfF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,OAEd,EADI,IAAI,cAZT,8IAaC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,kBAAkB,CACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,CAAC,GAAG,CAAC,CACN,GACE,kBAAkB,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,GACxD,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,CAAC,GACrE,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,CAAC,CACvE,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAIL,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AA0D1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,GAAG,GAAmD,UAAU,CAC3E,CACE,EAaC,EACD,GAAG,EACH,EAAE;QAfF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,OAEd,EADI,IAAI,cAZT,8IAaC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,kBAAkB,CACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,GACE,kBAAkB,CAAC,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,GACxD,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,CAAC,GACrE,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,CAAC,CACvE,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,EACrC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/esm/layout/responsive/Responsive.d.ts

@@ -17,6 +17,10 @@ export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
      * @default "div"
      */
     as?: "div" | "span";
+    /**
+     * When true, will render element as its child. This merges classes, styles and event handlers.
+     */
+    asChild?: boolean;
 }
 /**
  * Responsive view Primitive to show/hide elements based on breakpoints
@@ -27,14 +31,14 @@ export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Hide below="md">
+ *   <Hide below="md" asChild>
  *      // Only visible above "md"
  *   </Hide>
  * </HGrid>
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Hide above="md">
+ *   <Hide above="md" asChild>
  *      // Only visible below "md"
  *   </Hide>
  * </HGrid>
@@ -49,14 +53,14 @@ export declare const Hide: React.ForwardRefExoticComponent<ResponsiveProps & Rea
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Show below="md">
+ *   <Show below="md" asChild>
  *      // Only visible below "md"
  *   </Show>
  * </HGrid>
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Show above="md">
+ *   <Show above="md" asChild>
  *      // Only visible above "md"
  *   </Show>
  * </HGrid>