@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/select-field/SelectField.js

@@ -1,16 +1,16 @@
 import { jsxs as y, jsx as o } from "react/jsx-runtime";
 import { forwardRef as S } from "react";
-import { useFormContext as h } from "react-hook-form";
-import { tv as b } from "tailwind-variants";
+import { uyTv as h } from "@payfit/unity-themes";
+import { useFormContext as b } from "react-hook-form";
 import { FormField as j } from "../form-field/FormField.js";
 import { FormControl as C } from "../form-field/parts/FormControl.js";
 import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as g } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as k } from "../form-field/parts/FormLabel.js";
-import { Select as v } from "../select/Select.js";
-const w = b({
+import { FormHelperText as T } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as g } from "../form-field/parts/FormLabel.js";
+import { Select as k } from "../select/Select.js";
+const v = h({
   base: "uy:flex uy:flex-col uy:gap-100"
-}), H = ({
+}), w = ({
   children: t,
   feedbackText: e,
   helperText: r,
@@ -25,7 +25,7 @@ const w = b({
   items: d,
   ...F
 }, a) => {
-  const { control: u } = h(), x = {
+  const { control: u } = b(), x = {
     isRequired: l,
     isInvalid: f,
     isDisabled: n,
@@ -36,13 +36,13 @@ const w = b({
     {
       control: u,
       name: m,
-      className: w(),
+      className: v(),
       ...x,
       children: [
-        /* @__PURE__ */ o(k, { requiredVariant: c, children: i }),
-        r && /* @__PURE__ */ o(g, { children: r }),
+        /* @__PURE__ */ o(g, { requiredVariant: c, children: i }),
+        r && /* @__PURE__ */ o(T, { children: r }),
         /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(
-          v,
+          k,
           {
             ref: a,
             name: m,
@@ -56,10 +56,10 @@ const w = b({
       ]
     }
   );
-}, I = S(function(e, r) {
-  return H(e, r);
+}, H = S(function(e, r) {
+  return w(e, r);
 });
-I.displayName = "SelectField";
+H.displayName = "SelectField";
 export {
-  I as SelectField
+  H as SelectField
 };

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { Key } from 'react-stately';
-import { VariantProps } from 'tailwind-variants';
 export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:gap-100", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:gap-100", unknown, unknown, undefined>>;
 export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'style'> {
     /**

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.js

@@ -1,13 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as d, useRef as m } from "react";
-import { useToggleButtonGroup as f, mergeProps as s } from "react-aria";
-import { useToggleGroupState as g } from "react-stately";
-import { tv as v } from "tailwind-variants";
+import { uyTv as f } from "@payfit/unity-themes";
+import { useToggleButtonGroup as s, mergeProps as g } from "react-aria";
+import { useToggleGroupState as v } from "react-stately";
 import { SelectableButtonGroupContext as y } from "./SelectableButtonGroup.context.js";
-const G = v({
+const G = f({
   base: "uy:flex uy:gap-100"
 }), S = d((e, r) => {
-  const t = m(null), a = g({
+  const t = m(null), a = v({
     ...e,
     selectedKeys: e.value,
     defaultSelectedKeys: e.defaultValue,
@@ -15,13 +15,13 @@ const G = v({
       var l;
       (l = e.onChange) == null || l.call(e, Array.from(c));
     }
-  }), { groupProps: n } = f(e, a, t), i = G({ className: e.className }), { ref: u } = s({ ref: t }, { ref: r });
+  }), { groupProps: n } = s(e, a, t), u = G({ className: e.className }), { ref: i } = g({ ref: t }, { ref: r });
   return /* @__PURE__ */ o(
     "div",
     {
       ...n,
-      className: i,
-      ref: u,
+      className: u,
+      ref: i,
       "data-dd-privacy": "allow",
       "aria-invalid": e.isInvalid,
       children: /* @__PURE__ */ o(

package/dist/esm/components/selectable-button-group/parts/SelectableButton.js

@@ -1,11 +1,11 @@
 import { jsxs as n, jsx as o, Fragment as x } from "react/jsx-runtime";
 import { forwardRef as h, useRef as I, useContext as w } from "react";
-import { useToggleButtonGroupItem as B, mergeProps as N } from "react-aria";
-import { tv as S } from "tailwind-variants";
+import { uyTv as B } from "@payfit/unity-themes";
+import { useToggleButtonGroupItem as N, mergeProps as S } from "react-aria";
 import { Icon as G } from "../../icon/Icon.js";
 import { Spinner as P } from "../../spinner/Spinner.js";
 import { SelectableButtonGroupContext as R } from "../SelectableButtonGroup.context.js";
-const j = S({
+const T = B({
   // add the component styles
   slots: {
     base: [
@@ -58,23 +58,23 @@ const j = S({
     hasIcon: !1,
     isInvalid: !1
   }
-}), z = h(
+}), j = h(
   (r, c) => {
     const a = I(null), s = w(R);
     if (!s)
       throw new Error(
         "SelectableButton must be used within a ToggleButtonGroup component"
       );
-    const { state: b, isInvalid: d } = s, { buttonProps: u, isPressed: f, isSelected: l } = B(
+    const { state: b, isInvalid: d } = s, { buttonProps: u, isPressed: f, isSelected: l } = N(
       { id: r.value, ...r },
       b,
       a
-    ), { ref: y } = N({ ref: a }, { ref: c }), {
+    ), { ref: y } = S({ ref: a }, { ref: c }), {
       isDisabled: m = !1,
       isLoading: e = !1,
       prefixIcon: t,
       children: i
-    } = r, { base: p, icon: g, label: v } = j({
+    } = r, { base: p, icon: g, label: v } = T({
       hasIcon: !!t && !e,
       isInvalid: !!d
     });
@@ -110,8 +110,8 @@ const j = S({
     );
   }
 );
-z.displayName = "SelectableButton";
+j.displayName = "SelectableButton";
 export {
-  z as SelectableButton,
-  j as selectableButton
+  j as SelectableButton,
+  T as selectableButton
 };

package/dist/esm/components/selectable-card/internals/Content.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
-import { tv as e } from "tailwind-variants";
-const n = e({
+import { uyTv as e } from "@payfit/unity-themes";
+const y = e({
   base: ["uy:flex uy:flex-col", "uy:py-300 uy:pl-150 uy:pr-300"]
-}), s = ({ children: o }) => /* @__PURE__ */ t("div", { className: n(), children: o });
+}), r = ({ children: o }) => /* @__PURE__ */ t("div", { className: y(), children: o });
 export {
-  s as Content,
-  n as content
+  r as Content,
+  y as content
 };

package/dist/esm/components/selectable-card/internals/Description.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { tv as r } from "tailwind-variants";
+import { uyTv as r } from "@payfit/unity-themes";
 import { Text as i } from "../../text/Text.js";
 const m = r({
   base: ["uy:mt-200", "uy:line-clamp-2"]

package/dist/esm/components/selectable-card/internals/Illustration.js

@@ -1,8 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import { tv as s } from "tailwind-variants";
+import { jsx as t } from "react/jsx-runtime";
+import { uyTv as s } from "@payfit/unity-themes";
 const r = s({
   base: ["uy:mb-300"]
-}), a = ({ children: t }) => /* @__PURE__ */ o("div", { className: r(), children: t });
+}), a = ({ children: o }) => /* @__PURE__ */ t("div", { className: r(), children: o });
 export {
   a as Illustration,
   r as illustration

package/dist/esm/components/selectable-card/internals/SelectedIndicator.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import { tv as o } from "tailwind-variants";
-const c = o({
+import { jsx as o } from "react/jsx-runtime";
+import { uyTv as t } from "@payfit/unity-themes";
+const c = t({
   base: ["uy:py-250 uy:px-150"]
-}), a = ({ children: t }) => /* @__PURE__ */ e("div", { className: c(), children: t });
+}), a = ({ children: e }) => /* @__PURE__ */ o("div", { className: c(), children: e });
 export {
   a as SelectedIndicator,
   c as selectedIndicator

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { selectableCard } from '../../selectableCard.variant.js';
 export interface SelectableCardCheckboxProps extends Omit<AriaCheckboxProps, 'children'>, VariantProps<typeof selectableCard> {
     /**

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.js

@@ -1,6 +1,6 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { tv as t } from "tailwind-variants";
-const e = t({
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
   base: "",
   variants: {
     isSelected: {
@@ -51,7 +51,7 @@ const e = t({
     children: /* @__PURE__ */ o("g", { id: "Radio input", children: /* @__PURE__ */ o(
       "path",
       {
-        className: e({ isSelected: r }),
+        className: t({ isSelected: r }),
         id: "Background",
         d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
         fill: "white",

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.d.ts

@@ -1,6 +1,6 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren, ReactNode } from 'react';
 import { RadioProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { selectableCard } from '../../selectableCard.variant.js';
 export interface SelectableCardRadioProps extends Omit<RadioProps, 'children'>, PropsWithChildren<VariantProps<typeof selectableCard>> {
     /**

package/dist/esm/components/selectable-card/selectableCard.variant.js

@@ -1,4 +1,4 @@
-import { tv as r } from "tailwind-variants";
+import { uyTv as r } from "@payfit/unity-themes";
 const o = r({
   slots: {
     base: [

package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js

@@ -1,46 +1,46 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
 import { useFormContext as f } from "react-hook-form";
-import { FormField as F } from "../form-field/FormField.js";
-import { FormControl as u } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as x } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as h } from "../form-field/parts/FormHelperText.js";
+import { FormField as n } from "../form-field/FormField.js";
+import { FormControl as F } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as u } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as x } from "../form-field/parts/FormHelperText.js";
 import { FormLabel as b } from "../form-field/parts/FormLabel.js";
-import { SelectableCardRadioGroup as C } from "../selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
-const y = s(
+import { SelectableCardRadioGroup as h } from "../selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
+const C = s(
   ({
     children: m,
     name: r,
-    isRequired: l,
-    requiredVariant: i,
-    label: t,
+    isRequired: t,
+    requiredVariant: l,
+    label: i,
     helperText: a,
-    feedbackText: c,
-    ...d
-  }, p) => {
-    const { control: n } = f();
+    feedbackText: y,
+    ...c
+  }, d) => {
+    const { control: p } = f();
     return /* @__PURE__ */ e(
-      F,
+      n,
       {
         ...{
-          isRequired: l
+          isRequired: t
         },
-        control: n,
+        control: p,
         name: r,
         className: "uy:gap-150",
         children: [
           /* @__PURE__ */ e("div", { className: "uy:flex-col uy:gap-50", children: [
-            /* @__PURE__ */ o(b, { requiredVariant: i, children: t }),
-            /* @__PURE__ */ o(h, { children: a })
+            /* @__PURE__ */ o(b, { requiredVariant: l, children: i }),
+            /* @__PURE__ */ o(x, { children: a })
           ] }),
-          /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(C, { ref: p, name: r, ...d, children: m }) }),
-          /* @__PURE__ */ o(x, { children: c })
+          /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(h, { ref: d, name: r, ...c, children: m }) }),
+          /* @__PURE__ */ o(u, {})
         ]
       }
     );
   }
 );
-y.displayName = "SelectableCardRadioGroupField";
+C.displayName = "SelectableCardRadioGroupField";
 export {
-  y as SelectableCardRadioGroupField
+  C as SelectableCardRadioGroupField
 };

package/dist/esm/components/side-panel/SidePanel.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const sidePanel: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

package/dist/esm/components/side-panel/SidePanel.js

@@ -1,9 +1,9 @@
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as c, useEffect as g } from "react";
-import { ModalOverlay as x, Modal as h, Dialog as v } from "react-aria-components";
-import { tv as w } from "tailwind-variants";
+import { uyTv as x } from "@payfit/unity-themes";
+import { ModalOverlay as h, Modal as v, Dialog as w } from "react-aria-components";
 import { SidePanelDragIndicator as p } from "./parts/SidePanelDragIndicator.js";
-const N = w({
+const N = x({
   slots: {
     overlay: [
       "uy:md:bg-gradient-to-r uy:md:from-grayscale-l12/0 uy:md:to-grayscale-l12/10 uy:md:from-70% uy:md:via-100%",
@@ -37,7 +37,7 @@ const N = w({
     return g(() => {
       d && (e ?? a) && (document.documentElement.style.overflow = "", document.body.style.overflow = "");
     }, [d, e, a]), /* @__PURE__ */ t(
-      x,
+      h,
       {
         className: n(),
         isOpen: e,
@@ -46,7 +46,7 @@ const N = w({
         isDismissable: i,
         isKeyboardDismissDisabled: r,
         children: /* @__PURE__ */ s(
-          h,
+          v,
           {
             "data-dd-privacy": "allow",
             ...y,
@@ -55,7 +55,7 @@ const N = w({
             "data-unity-side-panel": !0,
             children: [
               /* @__PURE__ */ t(p, {}),
-              /* @__PURE__ */ t(v, { className: f(), children: o })
+              /* @__PURE__ */ t(w, { className: f(), children: o })
             ]
           }
         )

package/dist/esm/components/side-panel/parts/SidePanelContent.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const sidePanelContent: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

package/dist/esm/components/side-panel/parts/SidePanelContent.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { tv as s } from "tailwind-variants";
-const a = s({
+import { forwardRef as s } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+const y = t({
   slots: {
     base: [
       "uy:bg-surface-neutral",
@@ -13,14 +13,14 @@ const a = s({
       "uy:h-full uy:min-h-0"
     ]
   }
-}), f = u(
+}), a = s(
   ({ children: o, ...l }, r) => {
-    const { base: n, scroller: t } = a();
-    return /* @__PURE__ */ e("section", { ref: r, className: n(), ...l, children: /* @__PURE__ */ e("div", { className: t(), children: o }) });
+    const { base: n, scroller: u } = y();
+    return /* @__PURE__ */ e("section", { ref: r, className: n(), ...l, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
   }
 );
-f.displayName = "SidePanelContent";
+a.displayName = "SidePanelContent";
 export {
-  f as SidePanelContent,
-  a as sidePanelContent
+  a as SidePanelContent,
+  y as sidePanelContent
 };

package/dist/esm/components/side-panel/parts/SidePanelDragIndicator.js

@@ -1,10 +1,10 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as x, useContext as D } from "react";
-import { useDrag as b } from "@use-gesture/react";
-import { OverlayTriggerStateContext as h } from "react-aria-components";
-import { tv as v } from "tailwind-variants";
+import { uyTv as b } from "@payfit/unity-themes";
+import { useDrag as h } from "@use-gesture/react";
+import { OverlayTriggerStateContext as v } from "react-aria-components";
 import { useBreakpointListener as P } from "../../../hooks/use-breakpoint-listener.js";
-const S = v({
+const S = b({
   slots: {
     base: [
       "uy:md:hidden uy:mx-auto uy:pt-300 uy:w-500",
@@ -12,13 +12,13 @@ const S = v({
     ],
     indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
   }
-}), I = 100;
-function N() {
-  const r = x(null), n = D(h), s = P(), { base: i, indicator: l } = S(), u = s === "xs" || s === "sm", c = b(
+}), T = 100;
+function I() {
+  const r = x(null), n = D(v), s = P(), { base: i, indicator: l } = S(), u = s === "xs" || s === "sm", c = h(
     (d) => {
       var o;
       const {
-        movement: [T, e],
+        movement: [N, e],
         direction: [E, m],
         intentional: f,
         cancel: y,
@@ -38,7 +38,7 @@ function N() {
           t.style.transform = "translate3d(0, 0, 0)";
           return;
         }
-        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > I || m > 0 ? n && setTimeout(() => {
+        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > T || m > 0 ? n && setTimeout(() => {
           n.close();
         }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
       }
@@ -60,8 +60,8 @@ function N() {
     }
   );
 }
-N.displayName = "SidePanelDragIndicator";
+I.displayName = "SidePanelDragIndicator";
 export {
-  N as SidePanelDragIndicator,
+  I as SidePanelDragIndicator,
   S as sidePanelDragIndicator
 };

package/dist/esm/components/side-panel/parts/SidePanelFooter.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const sidePanelFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export interface SidePanelFooterProps extends PropsWithChildren<VariantProps<typeof sidePanelFooter>> {
     className?: string;

package/dist/esm/components/side-panel/parts/SidePanelFooter.js

@@ -1,7 +1,7 @@
 import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { tv as y } from "tailwind-variants";
-const a = y({
+import { forwardRef as y } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+const a = t({
   base: [
     "uy:py-200 uy:px-300 uy:w-full",
     "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0",
@@ -10,7 +10,7 @@ const a = y({
     "uy:mt-auto",
     "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
   ]
-}), d = t(
+}), d = y(
   ({ children: e, ...r }, o) => /* @__PURE__ */ u("footer", { ref: o, className: a(), ...r, children: e })
 );
 d.displayName = "SidePanelFooter";

package/dist/esm/components/side-panel/parts/SidePanelHeader.d.ts

@@ -1,18 +1,18 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
         };
     };
@@ -23,8 +23,8 @@ export declare const sidePanelHeader: import('tailwind-variants').TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
             content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
             heading?: import('tailwind-merge').ClassNameValue;
         };
     };

package/dist/esm/components/side-panel/parts/SidePanelHeader.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { Heading as y } from "react-aria-components";
-import { tv as i } from "tailwind-variants";
+import { uyTv as y } from "@payfit/unity-themes";
+import { Heading as i } from "react-aria-components";
 import { CircularIconButton as c } from "../../icon-button/CircularIconButton.js";
-const d = i({
+const d = y({
   // add the component styles
   slots: {
     base: [
@@ -19,9 +19,9 @@ const d = i({
   }
 }), m = s(
   ({ children: t, ...o }, r) => {
-    const { base: n, content: u, heading: l } = d();
-    return /* @__PURE__ */ e("header", { ref: r, className: n(), ...o, children: /* @__PURE__ */ a("div", { className: u(), children: [
-      /* @__PURE__ */ e(y, { slot: "title", className: l(), children: t }),
+    const { base: u, content: n, heading: l } = d();
+    return /* @__PURE__ */ e("header", { ref: r, className: u(), ...o, children: /* @__PURE__ */ a("div", { className: n(), children: [
+      /* @__PURE__ */ e(i, { slot: "title", className: l(), children: t }),
       /* @__PURE__ */ e(
         c,
         {

package/dist/esm/components/skip-links/SkipLinks.d.ts

@@ -0,0 +1,79 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface SkipLinksProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /** Optional label for the skip links navigation. Defaults to "Skip to:" */
+    label?: string;
+}
+export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnchorElement>> {
+    /** The target element ID to skip to */
+    targetId: string;
+}
+/**
+ * SkipLinks component provides keyboard navigation shortcuts to important sections of the page
+ *
+ * The SkipLinks component creates accessible navigation shortcuts that appear when focused,
+ * allowing keyboard users to quickly jump to important sections like main content, toolbars,
+ * or action areas. It follows WCAG guidelines for skip navigation.
+ * @param props - The props for the SkipLinks component
+ * @param props.label - Optional label for the skip links navigation section
+ * @param props.children - SkipLink components
+ * @example
+ * ```tsx
+ * import { SkipLinks, SkipLink } from '@payfit/unity-components'
+ *
+ * function TableWithActions() {
+ *   return (
+ *     <div>
+ *       <SkipLinks label="Quick navigation:">
+ *         <SkipLink targetId="main-content">
+ *           Skip to main content
+ *         </SkipLink>
+ *         <SkipLink targetId="table-actions-toolbar">
+ *           Skip to actions
+ *         </SkipLink>
+ *       </SkipLinks>
+ *       <div id="main-content" tabIndex={-1}>
+ *         Main content
+ *       </div>
+ *       <div id="table-actions-toolbar" tabIndex={-1}>
+ *         Action bar content
+ *       </div>
+ *     </div>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Skip links are visually hidden by default and become visible when focused
+ * - Each link should target an element with a valid ID and tabIndex={-1}
+ * - The component follows WCAG 2.1 guidelines for skip navigation
+ * @see {@link SkipLinksProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const SkipLinks: import('react').ForwardRefExoticComponent<SkipLinksProps & import('react').RefAttributes<HTMLElement>>;
+/**
+ * SkipLink component represents a single skip navigation link
+ *
+ * The SkipLink component should be used as a child of SkipLinks to create individual
+ * navigation shortcuts. It automatically handles focus management and accessibility.
+ * @param props - The props for the SkipLink component
+ * @param props.targetId - The ID of the target element to skip to
+ * @param props.children - The link text content
+ * @example
+ * ```tsx
+ * import { SkipLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <SkipLink targetId="main-content">
+ *       Skip to main content
+ *     </SkipLink>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Should only be used as a child of SkipLinks component
+ * - Automatically focuses the target element when activated
+ * @see {@link SkipLinkProps} for all available props
+ */
+declare const SkipLink: import('react').ForwardRefExoticComponent<SkipLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { SkipLinks, SkipLink };